SlideShare ist ein Scribd-Unternehmen logo
1 von 33
Downloaden Sie, um offline zu lesen
Cape Cod Web Technology MeetupCape Cod Web Technology Meetup
http://www.meetup.com/Cape-Cod-Web-Technology-Meetuphttp://www.meetup.com/Cape-Cod-Web-Technology-Meetup
HTML · CSS · JavaScript · PHP · MySQL
SEO (Search Engine Optimization)
CMS (Content Management Systems)
Software Development · Web Design &
Development · JQuery · Linux · OSX · Windows ·
Open Source, DOM, Canvas/SVG, WebGL,
Video/Audio, Animation, AJAX, WebSockets,
Cache/Storage, Geolocation
Meetup Topics
(Quick Overview)
● Open Source Development
Building your own Custom Firefox (or LibreOffice/OpenOffice)
from the Nightly or Developer Source Code
● GIT / Mercurial (code sharing / version control)
● What's new in HTML5 and JavaScript 2015
ECMAScript 2015 (ES6)
– const, class, let, for of, function*, import
Notable Free Open Source Projects
● GNU – Free Software Compiler (C++ / others … located in Boston!)
51 Franklin Street, Fifth Floor, Boston, MA
● Linux Operating System… (Google works on Andoid in Kendell Square, Boston)
355 Main Street, 5th Floor, Cambridge, MA 02142
● GNOME / KDE (window manager… GNOME has a meeting in Boston Every
October)
● Apache Web Server
● LibreOffice (word processor… spinoff from OpenOffice/Sun StarOffice)
● GIMP / InkScape (images / vector graphics)
● And JavaScript / C++ / Java / MySQL are also free/open too...
AND Mozilla Firefox (web browser)!
GNU
Interesting Problem in Open Source
Which Project to Help?
● How do you decide which Open Source Project
to help with? (Community History & Code & Art)
● Example: Check for Source Code Docs.
● OpenOffice:
http://openoffice.apache.org/source.html
● LibreOffice:
https://wiki.documentfoundation.org/Development/BuildingOnMac
IRC – Internet Chat
http://xchat.org
Chat with Other Developers
Main Server to Connect to
#boston IRC channel
IRC is Similar to StackOverflow only its LIVE
OSX Client: https://itunes.apple.com/us/app/xchat-azure
Linux/Windows: http://xchat.org/download/
Make a Sensible Diagram of the
Community and Code
(Not Like This)
LibreOffice: https://wiki.documentfoundation.org/Development/Code_Overview
Start by Helping with Bugs
Then Build your own Mozilla Firefox
from the C++ Source
● A lot of the internal Firefox code is written in...
JavaScript! (and C++)
● Firefox GUI Layout is XUL (or HTML)
● http://codefirefox.com/ (nice videos and demos)
● Don't worry be a Firefox bench warmer… these
developers are real outer space “alien”
programming pros!
Does the Open Source Project
Have Bugzilla or Bug Tracking?
https://bugzilla.mozilla.org/
Does the Project REALLY Have
Open Source Code Available?
(search for their “free” source code with
git/subversion/mercurial)
How Mozilla Firefox
Developer Edition Works
(Nightly Builds / Lots of Code Changes)
https://www.mozilla.org/en-US/firefox/developer/
Search for “Mozilla Firefox Developer Edition”
Firefox Developer Notes
https://www.mozilla.org/en-US/firefox/channel/#developer
● People that work on Firefox are called Mozillians
https://mozillians.org
● Bugs are Tracked Using Bugzilla
https://bugzilla.mozilla.org/
● Firefox changes all the time and you can download
the source code and build it locally
● Version 38... now they have 39… 41… and the code
changes every hour. … 41.0a2 (2015-07-10)
Build your Own Firefox (C++)
http://codefirefox.com/
How Firefox Looks After a Build on CentOS Linux
NOTE: Watch the videos on http://codefirefox.com before building firefox locally
OSX
Linux
I've tested the build instructions on Linux and OSX and it really is only 3 lines...
Compiling Firefox Mozilla
100% Use of 8 CPU's (~30 min)
https://developer.mozilla.org/en-US/docs/Simple_Firefox_build
Firefox built a little bit faster on OSX then Linux
(Maybe it was just because of the Intel i7 vs AMD x8)
LinuxBuildona8CoreAMDCPU
Firefox OSX build on an 8 Core Intel i7 CPU
Same Build Command in all OS's
“./mach build”
Building Firefox on
OSX / Linux / Windows
Step 1: “bootstrap” your system and get everything your system needs
Step 2 & 3: use “git clone” to get the files then run “./mach build” and “./mach run”
Firefox During a build on OSX Firefox after a complete build on OSX
Build Problems?
● Building Firefox should really not be more then 3 lines and it
should work on any major OS (Linux / OSX / Windows)
(I tested the build instructions out on Linux [CentOS] and OSX
[with Xcode 7 beta] and it really was only 3 lines)
Normal Build Instructions: https://developer.mozilla.org/en-US/docs/Simple_Firefox_build
● Search StackOverflow or read up on how compilers work.
● Completed building your favorite free / open software?
– hang out with us on a developer fan club channel
– IRC server “freenode.net” (http://xchat.org)
– Join “##boston” or “##javascript” and let everyone know your build
configuration was successful!
Free / Open Debugger?
“gdb” or Eclipse IDE (C++ or Java)
https://eclipse.org/
C++ Debug View
Xcode 7 (OSX)
Not Open Source (however free)
Only way I could get it to work was
to Dubug → Add to Active Process
Debug Firefox GUI
(JavaScript - No C++)
(make sure both checkboxes are selected for remote debugging)
Firefox “Browser Toolbox”
Debug View
Try it out yourself!
Search all the firefox code with “!function_name”
Mozilla Firefox Internal Debugging
(Select “Browser Toolbox”)
Note: Doesn't require downloading code or building Firefox.
Using Git and GitHub
http://www.github.com/join/
They also have free project / personal hosting at https://pages.github.com/
Main GIT Commands to Know
● git clone (copy the files to your local dir)
● git pull (get the latest files from the server)
● git push (put the files on the server)
● git commit -m (put a new file on the server)
Push your Code Changes
Merge Code Back
View “diff”s and make comments
Lets try a “git clone”
(looking at someone's source code
● Find the repo on git/github that you want to
study...
Copy the Address
In a local directory type “git clone <address>” where <address> is the http://
Starting Working With Others
(“fork” a repo and then clone locally)
Github Project to Fork
Number of People
Working on the Project
Try to fork the project
to your local
and then request
to merge it back
Local Github Fork
try using some advanced git
Clone Branch Merge
http://www.git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging
Clone then Branch then Merge (git)
1) git clone “url or address of repository”
2) git branch experiment
3) git checkout experiment
// make some changes to a .html file
4) git commit -a -m 'added new html [experiment]'
5) git merge experiment
6) git status
What's new in HTML5?
(a lot of new libraries, anyone want to comment?)
https://en.wikipedia.org/wiki/HTML5#New_APIs
New HTML5 tags
● XML tags <>
– <header>, <section>, <article>, <aside>, <footer>,
<nav> and also some audio and video tags...
● IBM has a pretty good page on HTML5
– http://www.ibm.com/developerworks/library/wa-html5structuraltags/index.html
What's New in JavaScript?
ECMAScript 2015 (ES6)
● FIRST try and use good old fashioned javascript it still works too… for example…
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("o." + prop + " = " + obj[prop]);
}
// Output:
// "o.a = 1"
// "o.b = 2"
// "o.c = 3"
New JavaScript for 2015!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements
● class is an alternative to .prototype (has anyone tried using .prototype before its (WAS) pretty common)
class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(length) {
super(length, length);
this.name = 'Square';
}
}
Constant = const
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
// define my_fav as a constant and give it the value 7
const my_fav = 7;
// this will fail silently in Firefox and Chrome (but does not fail in Safari)
my_fav = 20;
// will print 7
console.log("my favorite number is: " + my_fav);
// trying to redeclare a constant throws an error
const my_fav = 20;
// the name my_fav is reserved for constant above, so this will also fail
var my_fav = 20;
(let)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
var item = document.createElement("LI");
item.appendChild(document.createTextNode("Item " + i));
let j = i;
item.onclick = function (ev) {
console.log("Item " + j + " is clicked.");
};
list.appendChild(item);
}
Future Meetup Topics?
● Web Graphics using <canvas> D3.js:
https://github.com/mbostock/d3/wiki/Gallery#basic-charts
● Writing Unit Tests / QA (Shell Scripting / PHP is Perl)
https://make.wordpress.org/core/handbook/automated-te
sting/#writing-tests
● MySQL / MySQLAdmin
● AJAX / JQuery
● Editing Local Cape Cod Websites
– Cape Cod Online (Cape Cod Times)
– WHOI / MBL
Thank You!
HTML Questions?
● Feel Free to Contact Me Anytime
– Asher Martin
Tel: 773.321.8181
Email: AsherMartin@gmail.com
Skype: AsherMartin

Weitere ähnliche Inhalte

Was ist angesagt?

Docker & PHP - Practical use case
Docker & PHP - Practical use caseDocker & PHP - Practical use case
Docker & PHP - Practical use caserjsmelo
 
Gorush: A push notification server written in Go
Gorush: A push notification server written in GoGorush: A push notification server written in Go
Gorush: A push notification server written in GoBo-Yi Wu
 
Programming in Linux Environment
Programming in Linux EnvironmentProgramming in Linux Environment
Programming in Linux EnvironmentDongho Kang
 
Porting your favourite cmdline tool to Android
Porting your favourite cmdline tool to AndroidPorting your favourite cmdline tool to Android
Porting your favourite cmdline tool to AndroidVlatko Kosturjak
 
Ripping web accessible .git files
Ripping web accessible .git filesRipping web accessible .git files
Ripping web accessible .git filesVlatko Kosturjak
 
Culerity and Headless Full Stack Integration Testing
Culerity and Headless Full Stack Integration TestingCulerity and Headless Full Stack Integration Testing
Culerity and Headless Full Stack Integration TestingPatrick Huesler
 
Wonderful world of (distributed) SCM or VCS
Wonderful world of (distributed) SCM or VCSWonderful world of (distributed) SCM or VCS
Wonderful world of (distributed) SCM or VCSVlatko Kosturjak
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composernuppla
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composernuppla
 
Development and deployment with composer and kite
Development and deployment with composer and kiteDevelopment and deployment with composer and kite
Development and deployment with composer and kiteChristian Opitz
 
Buildout: creating and deploying repeatable applications in python
Buildout: creating and deploying repeatable applications in pythonBuildout: creating and deploying repeatable applications in python
Buildout: creating and deploying repeatable applications in pythonCodeSyntax
 
Drupal + composer = new love !?
Drupal + composer = new love !?Drupal + composer = new love !?
Drupal + composer = new love !?nuppla
 
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChang W. Doh
 
Ratpack On the Docks
Ratpack On the DocksRatpack On the Docks
Ratpack On the DocksGR8Conf
 
Ansible Project Deploy (phpbenelux 2015)
Ansible Project Deploy (phpbenelux 2015)Ansible Project Deploy (phpbenelux 2015)
Ansible Project Deploy (phpbenelux 2015)Ramon de la Fuente
 
Open Source Flash 2010
Open Source Flash 2010Open Source Flash 2010
Open Source Flash 2010Gaurav Saxena
 
Groovy Powered Clean Code
Groovy Powered Clean CodeGroovy Powered Clean Code
Groovy Powered Clean CodeGR8Conf
 
Dependency Management with Composer
Dependency Management with ComposerDependency Management with Composer
Dependency Management with ComposerJordi Boggiano
 
WebSocket on client & server using websocket-sharp & ASP.NET Core
WebSocket on client & server using websocket-sharp & ASP.NET CoreWebSocket on client & server using websocket-sharp & ASP.NET Core
WebSocket on client & server using websocket-sharp & ASP.NET CoreChen Yu Pao
 

Was ist angesagt? (20)

Docker & PHP - Practical use case
Docker & PHP - Practical use caseDocker & PHP - Practical use case
Docker & PHP - Practical use case
 
Gorush: A push notification server written in Go
Gorush: A push notification server written in GoGorush: A push notification server written in Go
Gorush: A push notification server written in Go
 
Golang workshop
Golang workshopGolang workshop
Golang workshop
 
Programming in Linux Environment
Programming in Linux EnvironmentProgramming in Linux Environment
Programming in Linux Environment
 
Porting your favourite cmdline tool to Android
Porting your favourite cmdline tool to AndroidPorting your favourite cmdline tool to Android
Porting your favourite cmdline tool to Android
 
Ripping web accessible .git files
Ripping web accessible .git filesRipping web accessible .git files
Ripping web accessible .git files
 
Culerity and Headless Full Stack Integration Testing
Culerity and Headless Full Stack Integration TestingCulerity and Headless Full Stack Integration Testing
Culerity and Headless Full Stack Integration Testing
 
Wonderful world of (distributed) SCM or VCS
Wonderful world of (distributed) SCM or VCSWonderful world of (distributed) SCM or VCS
Wonderful world of (distributed) SCM or VCS
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composer
 
Efficient development workflows with composer
Efficient development workflows with composerEfficient development workflows with composer
Efficient development workflows with composer
 
Development and deployment with composer and kite
Development and deployment with composer and kiteDevelopment and deployment with composer and kite
Development and deployment with composer and kite
 
Buildout: creating and deploying repeatable applications in python
Buildout: creating and deploying repeatable applications in pythonBuildout: creating and deploying repeatable applications in python
Buildout: creating and deploying repeatable applications in python
 
Drupal + composer = new love !?
Drupal + composer = new love !?Drupal + composer = new love !?
Drupal + composer = new love !?
 
Chromium: NaCl and Pepper API
Chromium: NaCl and Pepper APIChromium: NaCl and Pepper API
Chromium: NaCl and Pepper API
 
Ratpack On the Docks
Ratpack On the DocksRatpack On the Docks
Ratpack On the Docks
 
Ansible Project Deploy (phpbenelux 2015)
Ansible Project Deploy (phpbenelux 2015)Ansible Project Deploy (phpbenelux 2015)
Ansible Project Deploy (phpbenelux 2015)
 
Open Source Flash 2010
Open Source Flash 2010Open Source Flash 2010
Open Source Flash 2010
 
Groovy Powered Clean Code
Groovy Powered Clean CodeGroovy Powered Clean Code
Groovy Powered Clean Code
 
Dependency Management with Composer
Dependency Management with ComposerDependency Management with Composer
Dependency Management with Composer
 
WebSocket on client & server using websocket-sharp & ASP.NET Core
WebSocket on client & server using websocket-sharp & ASP.NET CoreWebSocket on client & server using websocket-sharp & ASP.NET Core
WebSocket on client & server using websocket-sharp & ASP.NET Core
 

Andere mochten auch

ΚΙΤΟU ANNA CV-EN
ΚΙΤΟU ANNA CV-ENΚΙΤΟU ANNA CV-EN
ΚΙΤΟU ANNA CV-ENANNA KITOU
 
2 minty finty-mbpfw - přednáška
2 minty finty-mbpfw - přednáška2 minty finty-mbpfw - přednáška
2 minty finty-mbpfw - přednáškafashiontechcz
 
M.5 3 11 13 24(PP)
M.5 3 11 13 24(PP)M.5 3 11 13 24(PP)
M.5 3 11 13 24(PP)Mark'k Stk
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programmingThanut Treenan
 
Safeguarding in Maternity Services
Safeguarding  in Maternity ServicesSafeguarding  in Maternity Services
Safeguarding in Maternity ServicesLGTNHS
 
3 size id-fashiontechcz
3 size id-fashiontechcz3 size id-fashiontechcz
3 size id-fashiontechczfashiontechcz
 
Httpool fashion week2015
Httpool fashion week2015Httpool fashion week2015
Httpool fashion week2015fashiontechcz
 
Avrora smart road
Avrora smart roadAvrora smart road
Avrora smart roadTatjana1989
 
Praluent abstract.
Praluent abstract.Praluent abstract.
Praluent abstract.Kemper May
 
Introduction to-programming
Introduction to-programmingIntroduction to-programming
Introduction to-programmingMark'k Stk
 
How To Get Your Employees On Your Team
How To Get Your Employees On Your TeamHow To Get Your Employees On Your Team
How To Get Your Employees On Your TeamIrv Holmes
 
PCF_Soln_Brief-New
PCF_Soln_Brief-NewPCF_Soln_Brief-New
PCF_Soln_Brief-Newkarunbakshi
 
2012-2010 Print Media Mkt. Projects
2012-2010 Print Media Mkt. Projects2012-2010 Print Media Mkt. Projects
2012-2010 Print Media Mkt. ProjectsValeria Pacheco Rub
 
openMDM5: From a fat client to a scalable, omni-channel architecture
openMDM5: From a fat client to a scalable, omni-channel architectureopenMDM5: From a fat client to a scalable, omni-channel architecture
openMDM5: From a fat client to a scalable, omni-channel architectureAndreas Benzing
 
Bus Stop Infrastrucutre Services 2015 v1
Bus Stop Infrastrucutre Services 2015 v1Bus Stop Infrastrucutre Services 2015 v1
Bus Stop Infrastrucutre Services 2015 v1Neil Szegota
 

Andere mochten auch (20)

Colmos
Colmos Colmos
Colmos
 
ΚΙΤΟU ANNA CV-EN
ΚΙΤΟU ANNA CV-ENΚΙΤΟU ANNA CV-EN
ΚΙΤΟU ANNA CV-EN
 
Redacción de textos 2
Redacción de textos 2Redacción de textos 2
Redacción de textos 2
 
2 minty finty-mbpfw - přednáška
2 minty finty-mbpfw - přednáška2 minty finty-mbpfw - přednáška
2 minty finty-mbpfw - přednáška
 
M.5 3 11 13 24(PP)
M.5 3 11 13 24(PP)M.5 3 11 13 24(PP)
M.5 3 11 13 24(PP)
 
Introduction to programming
Introduction to programmingIntroduction to programming
Introduction to programming
 
Safeguarding in Maternity Services
Safeguarding  in Maternity ServicesSafeguarding  in Maternity Services
Safeguarding in Maternity Services
 
3 size id-fashiontechcz
3 size id-fashiontechcz3 size id-fashiontechcz
3 size id-fashiontechcz
 
Httpool fashion week2015
Httpool fashion week2015Httpool fashion week2015
Httpool fashion week2015
 
Avrora smart road
Avrora smart roadAvrora smart road
Avrora smart road
 
Praluent abstract.
Praluent abstract.Praluent abstract.
Praluent abstract.
 
Introduction to-programming
Introduction to-programmingIntroduction to-programming
Introduction to-programming
 
2015-sdms-foundation-annual-report
2015-sdms-foundation-annual-report2015-sdms-foundation-annual-report
2015-sdms-foundation-annual-report
 
How To Get Your Employees On Your Team
How To Get Your Employees On Your TeamHow To Get Your Employees On Your Team
How To Get Your Employees On Your Team
 
PCF_Soln_Brief-New
PCF_Soln_Brief-NewPCF_Soln_Brief-New
PCF_Soln_Brief-New
 
2012-2010 Print Media Mkt. Projects
2012-2010 Print Media Mkt. Projects2012-2010 Print Media Mkt. Projects
2012-2010 Print Media Mkt. Projects
 
openMDM5: From a fat client to a scalable, omni-channel architecture
openMDM5: From a fat client to a scalable, omni-channel architectureopenMDM5: From a fat client to a scalable, omni-channel architecture
openMDM5: From a fat client to a scalable, omni-channel architecture
 
Bus Stop Infrastrucutre Services 2015 v1
Bus Stop Infrastrucutre Services 2015 v1Bus Stop Infrastrucutre Services 2015 v1
Bus Stop Infrastrucutre Services 2015 v1
 
Mani Resume
Mani ResumeMani Resume
Mani Resume
 
2015-sdms-annual-report
2015-sdms-annual-report2015-sdms-annual-report
2015-sdms-annual-report
 

Ähnlich wie Cape Cod Web Technology Meetup - 3

Dependent things dependency management for apple sw - slideshare
Dependent things   dependency management for apple sw - slideshareDependent things   dependency management for apple sw - slideshare
Dependent things dependency management for apple sw - slideshareCavelle Benjamin
 
Developing FirefoxOS
Developing FirefoxOSDeveloping FirefoxOS
Developing FirefoxOSFred Lin
 
State ofappdevelopment
State ofappdevelopmentState ofappdevelopment
State ofappdevelopmentgillygize
 
Firefox OS - Hive Pilani 2015
Firefox OS - Hive Pilani 2015Firefox OS - Hive Pilani 2015
Firefox OS - Hive Pilani 2015Nilay Binjola
 
Fullstack workshop
Fullstack workshopFullstack workshop
Fullstack workshopAssaf Gannon
 
Some wonderful Linux softwares for daily use
Some wonderful Linux softwares for daily useSome wonderful Linux softwares for daily use
Some wonderful Linux softwares for daily usearun.arwachin
 
Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)Eugene Yokota
 
Build Great Networked APIs with Swift, OpenAPI, and gRPC
Build Great Networked APIs with Swift, OpenAPI, and gRPCBuild Great Networked APIs with Swift, OpenAPI, and gRPC
Build Great Networked APIs with Swift, OpenAPI, and gRPCTim Burks
 
Import golang; struct microservice
Import golang; struct microserviceImport golang; struct microservice
Import golang; struct microserviceGiulio De Donato
 
Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Derek Jacoby
 
Untangling fall2017 week2
Untangling fall2017 week2Untangling fall2017 week2
Untangling fall2017 week2Derek Jacoby
 
Build your own embedded linux distributions by yocto project
Build your own embedded linux distributions by yocto projectBuild your own embedded linux distributions by yocto project
Build your own embedded linux distributions by yocto projectYen-Chin Lee
 
ITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devs
ITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devsITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devs
ITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devsITCamp
 
Dd13.2013.milano.open ntf
Dd13.2013.milano.open ntfDd13.2013.milano.open ntf
Dd13.2013.milano.open ntfUlrich Krause
 
Настройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'aНастройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'acorehard_by
 
The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13
The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13
The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13Dominopoint - Italian Lotus User Group
 
Road to sbt 1.0 paved with server
Road to sbt 1.0   paved with serverRoad to sbt 1.0   paved with server
Road to sbt 1.0 paved with serverEugene Yokota
 
Software Quality Assurance Tooling - Wintersession 2024
Software Quality Assurance Tooling - Wintersession 2024Software Quality Assurance Tooling - Wintersession 2024
Software Quality Assurance Tooling - Wintersession 2024Henry Schreiner
 
Dependencies Managers in C/C++. Using stdcpp 2014
Dependencies Managers in C/C++. Using stdcpp 2014Dependencies Managers in C/C++. Using stdcpp 2014
Dependencies Managers in C/C++. Using stdcpp 2014biicode
 

Ähnlich wie Cape Cod Web Technology Meetup - 3 (20)

Dependent things dependency management for apple sw - slideshare
Dependent things   dependency management for apple sw - slideshareDependent things   dependency management for apple sw - slideshare
Dependent things dependency management for apple sw - slideshare
 
Monkey space 2013
Monkey space 2013Monkey space 2013
Monkey space 2013
 
Developing FirefoxOS
Developing FirefoxOSDeveloping FirefoxOS
Developing FirefoxOS
 
State ofappdevelopment
State ofappdevelopmentState ofappdevelopment
State ofappdevelopment
 
Firefox OS - Hive Pilani 2015
Firefox OS - Hive Pilani 2015Firefox OS - Hive Pilani 2015
Firefox OS - Hive Pilani 2015
 
Fullstack workshop
Fullstack workshopFullstack workshop
Fullstack workshop
 
Some wonderful Linux softwares for daily use
Some wonderful Linux softwares for daily useSome wonderful Linux softwares for daily use
Some wonderful Linux softwares for daily use
 
Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)Road to sbt 1.0: Paved with server (2015 Amsterdam)
Road to sbt 1.0: Paved with server (2015 Amsterdam)
 
Build Great Networked APIs with Swift, OpenAPI, and gRPC
Build Great Networked APIs with Swift, OpenAPI, and gRPCBuild Great Networked APIs with Swift, OpenAPI, and gRPC
Build Great Networked APIs with Swift, OpenAPI, and gRPC
 
Import golang; struct microservice
Import golang; struct microserviceImport golang; struct microservice
Import golang; struct microservice
 
Untangling fall2017 week2_try2
Untangling fall2017 week2_try2Untangling fall2017 week2_try2
Untangling fall2017 week2_try2
 
Untangling fall2017 week2
Untangling fall2017 week2Untangling fall2017 week2
Untangling fall2017 week2
 
Build your own embedded linux distributions by yocto project
Build your own embedded linux distributions by yocto projectBuild your own embedded linux distributions by yocto project
Build your own embedded linux distributions by yocto project
 
ITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devs
ITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devsITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devs
ITCamp 2013 - Alessandro Pilotti - Git crash course for Visual Studio devs
 
Dd13.2013.milano.open ntf
Dd13.2013.milano.open ntfDd13.2013.milano.open ntf
Dd13.2013.milano.open ntf
 
Настройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'aНастройка окружения для кросскомпиляции проектов на основе docker'a
Настройка окружения для кросскомпиляции проектов на основе docker'a
 
The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13
The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13
The Latest and Greatest from OpenNTF and the IBM Social Business Toolkit, #dd13
 
Road to sbt 1.0 paved with server
Road to sbt 1.0   paved with serverRoad to sbt 1.0   paved with server
Road to sbt 1.0 paved with server
 
Software Quality Assurance Tooling - Wintersession 2024
Software Quality Assurance Tooling - Wintersession 2024Software Quality Assurance Tooling - Wintersession 2024
Software Quality Assurance Tooling - Wintersession 2024
 
Dependencies Managers in C/C++. Using stdcpp 2014
Dependencies Managers in C/C++. Using stdcpp 2014Dependencies Managers in C/C++. Using stdcpp 2014
Dependencies Managers in C/C++. Using stdcpp 2014
 

Kürzlich hochgeladen

Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 

Kürzlich hochgeladen (20)

Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 

Cape Cod Web Technology Meetup - 3

  • 1. Cape Cod Web Technology MeetupCape Cod Web Technology Meetup http://www.meetup.com/Cape-Cod-Web-Technology-Meetuphttp://www.meetup.com/Cape-Cod-Web-Technology-Meetup HTML · CSS · JavaScript · PHP · MySQL SEO (Search Engine Optimization) CMS (Content Management Systems) Software Development · Web Design & Development · JQuery · Linux · OSX · Windows · Open Source, DOM, Canvas/SVG, WebGL, Video/Audio, Animation, AJAX, WebSockets, Cache/Storage, Geolocation
  • 2. Meetup Topics (Quick Overview) ● Open Source Development Building your own Custom Firefox (or LibreOffice/OpenOffice) from the Nightly or Developer Source Code ● GIT / Mercurial (code sharing / version control) ● What's new in HTML5 and JavaScript 2015 ECMAScript 2015 (ES6) – const, class, let, for of, function*, import
  • 3. Notable Free Open Source Projects ● GNU – Free Software Compiler (C++ / others … located in Boston!) 51 Franklin Street, Fifth Floor, Boston, MA ● Linux Operating System… (Google works on Andoid in Kendell Square, Boston) 355 Main Street, 5th Floor, Cambridge, MA 02142 ● GNOME / KDE (window manager… GNOME has a meeting in Boston Every October) ● Apache Web Server ● LibreOffice (word processor… spinoff from OpenOffice/Sun StarOffice) ● GIMP / InkScape (images / vector graphics) ● And JavaScript / C++ / Java / MySQL are also free/open too... AND Mozilla Firefox (web browser)! GNU
  • 4. Interesting Problem in Open Source Which Project to Help? ● How do you decide which Open Source Project to help with? (Community History & Code & Art) ● Example: Check for Source Code Docs. ● OpenOffice: http://openoffice.apache.org/source.html ● LibreOffice: https://wiki.documentfoundation.org/Development/BuildingOnMac
  • 5. IRC – Internet Chat http://xchat.org Chat with Other Developers Main Server to Connect to #boston IRC channel IRC is Similar to StackOverflow only its LIVE OSX Client: https://itunes.apple.com/us/app/xchat-azure Linux/Windows: http://xchat.org/download/
  • 6. Make a Sensible Diagram of the Community and Code (Not Like This) LibreOffice: https://wiki.documentfoundation.org/Development/Code_Overview
  • 7. Start by Helping with Bugs Then Build your own Mozilla Firefox from the C++ Source ● A lot of the internal Firefox code is written in... JavaScript! (and C++) ● Firefox GUI Layout is XUL (or HTML) ● http://codefirefox.com/ (nice videos and demos) ● Don't worry be a Firefox bench warmer… these developers are real outer space “alien” programming pros!
  • 8. Does the Open Source Project Have Bugzilla or Bug Tracking? https://bugzilla.mozilla.org/
  • 9. Does the Project REALLY Have Open Source Code Available? (search for their “free” source code with git/subversion/mercurial)
  • 10. How Mozilla Firefox Developer Edition Works (Nightly Builds / Lots of Code Changes) https://www.mozilla.org/en-US/firefox/developer/ Search for “Mozilla Firefox Developer Edition”
  • 11. Firefox Developer Notes https://www.mozilla.org/en-US/firefox/channel/#developer ● People that work on Firefox are called Mozillians https://mozillians.org ● Bugs are Tracked Using Bugzilla https://bugzilla.mozilla.org/ ● Firefox changes all the time and you can download the source code and build it locally ● Version 38... now they have 39… 41… and the code changes every hour. … 41.0a2 (2015-07-10)
  • 12. Build your Own Firefox (C++) http://codefirefox.com/ How Firefox Looks After a Build on CentOS Linux NOTE: Watch the videos on http://codefirefox.com before building firefox locally OSX Linux I've tested the build instructions on Linux and OSX and it really is only 3 lines...
  • 13. Compiling Firefox Mozilla 100% Use of 8 CPU's (~30 min) https://developer.mozilla.org/en-US/docs/Simple_Firefox_build Firefox built a little bit faster on OSX then Linux (Maybe it was just because of the Intel i7 vs AMD x8) LinuxBuildona8CoreAMDCPU Firefox OSX build on an 8 Core Intel i7 CPU Same Build Command in all OS's “./mach build”
  • 14. Building Firefox on OSX / Linux / Windows Step 1: “bootstrap” your system and get everything your system needs Step 2 & 3: use “git clone” to get the files then run “./mach build” and “./mach run” Firefox During a build on OSX Firefox after a complete build on OSX
  • 15. Build Problems? ● Building Firefox should really not be more then 3 lines and it should work on any major OS (Linux / OSX / Windows) (I tested the build instructions out on Linux [CentOS] and OSX [with Xcode 7 beta] and it really was only 3 lines) Normal Build Instructions: https://developer.mozilla.org/en-US/docs/Simple_Firefox_build ● Search StackOverflow or read up on how compilers work. ● Completed building your favorite free / open software? – hang out with us on a developer fan club channel – IRC server “freenode.net” (http://xchat.org) – Join “##boston” or “##javascript” and let everyone know your build configuration was successful!
  • 16. Free / Open Debugger? “gdb” or Eclipse IDE (C++ or Java) https://eclipse.org/
  • 17. C++ Debug View Xcode 7 (OSX) Not Open Source (however free) Only way I could get it to work was to Dubug → Add to Active Process
  • 18. Debug Firefox GUI (JavaScript - No C++) (make sure both checkboxes are selected for remote debugging)
  • 19. Firefox “Browser Toolbox” Debug View Try it out yourself! Search all the firefox code with “!function_name”
  • 20. Mozilla Firefox Internal Debugging (Select “Browser Toolbox”) Note: Doesn't require downloading code or building Firefox.
  • 21. Using Git and GitHub http://www.github.com/join/ They also have free project / personal hosting at https://pages.github.com/
  • 22. Main GIT Commands to Know ● git clone (copy the files to your local dir) ● git pull (get the latest files from the server) ● git push (put the files on the server) ● git commit -m (put a new file on the server) Push your Code Changes Merge Code Back View “diff”s and make comments
  • 23. Lets try a “git clone” (looking at someone's source code ● Find the repo on git/github that you want to study... Copy the Address In a local directory type “git clone <address>” where <address> is the http://
  • 24. Starting Working With Others (“fork” a repo and then clone locally) Github Project to Fork Number of People Working on the Project Try to fork the project to your local and then request to merge it back Local Github Fork
  • 25. try using some advanced git Clone Branch Merge http://www.git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging Clone then Branch then Merge (git) 1) git clone “url or address of repository” 2) git branch experiment 3) git checkout experiment // make some changes to a .html file 4) git commit -a -m 'added new html [experiment]' 5) git merge experiment 6) git status
  • 26. What's new in HTML5? (a lot of new libraries, anyone want to comment?) https://en.wikipedia.org/wiki/HTML5#New_APIs
  • 27. New HTML5 tags ● XML tags <> – <header>, <section>, <article>, <aside>, <footer>, <nav> and also some audio and video tags... ● IBM has a pretty good page on HTML5 – http://www.ibm.com/developerworks/library/wa-html5structuraltags/index.html
  • 28. What's New in JavaScript? ECMAScript 2015 (ES6) ● FIRST try and use good old fashioned javascript it still works too… for example… var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("o." + prop + " = " + obj[prop]); } // Output: // "o.a = 1" // "o.b = 2" // "o.c = 3"
  • 29. New JavaScript for 2015! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements ● class is an alternative to .prototype (has anyone tried using .prototype before its (WAS) pretty common) class Polygon { constructor(height, width) { this.name = 'Polygon'; this.height = height; this.width = width; } } class Square extends Polygon { constructor(length) { super(length, length); this.name = 'Square'; } }
  • 30. Constant = const https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const // define my_fav as a constant and give it the value 7 const my_fav = 7; // this will fail silently in Firefox and Chrome (but does not fail in Safari) my_fav = 20; // will print 7 console.log("my favorite number is: " + my_fav); // trying to redeclare a constant throws an error const my_fav = 20; // the name my_fav is reserved for constant above, so this will also fail var my_fav = 20;
  • 31. (let) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let var list = document.getElementById("list"); for (var i = 1; i <= 5; i++) { var item = document.createElement("LI"); item.appendChild(document.createTextNode("Item " + i)); let j = i; item.onclick = function (ev) { console.log("Item " + j + " is clicked."); }; list.appendChild(item); }
  • 32. Future Meetup Topics? ● Web Graphics using <canvas> D3.js: https://github.com/mbostock/d3/wiki/Gallery#basic-charts ● Writing Unit Tests / QA (Shell Scripting / PHP is Perl) https://make.wordpress.org/core/handbook/automated-te sting/#writing-tests ● MySQL / MySQLAdmin ● AJAX / JQuery ● Editing Local Cape Cod Websites – Cape Cod Online (Cape Cod Times) – WHOI / MBL
  • 33. Thank You! HTML Questions? ● Feel Free to Contact Me Anytime – Asher Martin Tel: 773.321.8181 Email: AsherMartin@gmail.com Skype: AsherMartin