cape cod web technology meetup - 3
TRANSCRIPT
Cape Cod Web Technology MeetupCape Cod Web Technology Meetuphttp://www.meetup.com/Cape-Cod-Web-Technology-Meetuphttp://www.meetup.com/Cape-Cod-Web-Technology-Meetup
HTML · CSS · JavaScript · PHP · MySQLSEO (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 DevelopmentBuilding 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 2015ECMAScript 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 SourceWhich 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 Chathttp://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 BugsThen 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 ProjectHave 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 Noteshttps://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)
Linu
x B
uild
on
a 8
Cor
e A
MD
CP
U
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 needsStep 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!
C++ Debug ViewXcode 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 GitHubhttp://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 localand then requestto merge it back
Local Github Fork
try using some advanced gitClone 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 = consthttps://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-testing/#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: [email protected]
Skype: AsherMartin