Cape Cod Web Technology Meetup - 3

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

Cape Cod Web Technology Meetup - 3

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Cape Cod Web Technology Meetup - 3 (20)

Recently uploaded (20)

Cape Cod Web Technology Meetup - 3