Building Open Source Browser – Firefox on Windows

I followed the instruction to build Firefox in my laptop, which is x64 system, using OS Windows8.1.

First of all, check the prerequisites. 

Check if all of windows build prerequisites are installed in the computer. At this point, I have to install MozillaBuild package. I downloaded and installed the latest version of MozillaBuild in fold c:\mozilla-build.

Second, get the source code.

Mozillar use Mercurial repository to hold the source code.

To get the source code, I have to have Mercurial installed in my laptop. I downloaded and installed TortoiseHg, which a Windows shell extension and a series of applications for the Mercurial distributed revision control system, similar with TortoiseGit and TortoiseSVN. It saves from getting lost in the instruction of Windows Install on mercurial website.

Next, start the building environment.

In folder c:\mozilla-build, type start-shell-msvc2013.bat to setup building environment because I have install visual studio 2013 installed in laptop. Then it enters a linux mode in window power shell.

Running start-shell-msvc2013-x64.bat generated the error in building (4:21.90 configure: error: You are targeting i386 but using the 64-bit compiler).

Following, build the project.

cd into mozilla-central subdirectory in above powder shell, and run command ./mach build. It will take some time to build the project. It takes 3 to 4 hours to build the project. In the end, it will show a success message if the build finishes and succeeds as follows:

Finally, run the project

Run command ./mach run in the same fold as above. Firefox Nightly browser will be started as follows:

Grunt vs. Gulp

Grunt and Gulp are the popular task runner in Node.js projects. In release 0.1, I have used Grunt in Filer project. And webmaker project uses Gulp indead. I did some research on their similarities and differences.

Both Grunt and Gulp are to build the process in Node.js base. But they have different mechanism. Grunt has longer history and Gulp is new.

Plug-ins:

Both Grunt and Gulp relies on the plug-ins to build tasks. They have large plug-in base. Developers rarely need to developer own building tasks. Grunt has better community support than Gulp since it has longer history. Grunt plug-ins often perform multiple tasks; Gulp plug-ins are designed to do one thing only.  

Mechanism in building process:

Grunt needs to generate intermediary files (.tmp/) to disk during the building process. It uses declarative approach to build tasks. When the build flow is large, it will be hard to figure out the task execution order. Also, the development team needs to write the maintenance code.

Gulp is a streaming building system. Streams is the most important concept of Gulp, which means that you input your files into a pipe from one end and generate the output file from the other end without any interruptions in the middle of the process. It makes your task definitions a bit easier to ready. And it does not have the disk I/O issues since it does not have the intermediary file written to the disk. However, Gulp requires developers know Node well to deal with streams, pipes and asynchronous code.

Gruntfile.js vs. Gulpfile.js

Grunt uses JSON-like data configuration files. And Gulp use Javascript code. There are examples getting from Filer project and Webmaker project.

Gruntfile.js

 Gulpfile.js

Both of them have advantages and disadvantages. Developers would consider them to choose the best suitable one. As a beginner in open source community, it is good to learn both of them to help understand the system I am working on.

Source:

http://www.sitepoint.com/introduction-gulp-js/

http://ponyfoo.com/articles/choose-grunt-gulp-or-npm

Release 0.3

I chose to stay in webmaker project for my release 0.3 project since I have worked on this before and am interested in this project. I picked up the issue #498 and then worked on it for several days. I noticed that this project uses page.js to direct routing. It took me some time to understand how page.js works, but finally found out page.js does not have the functionality to refresh the page. Then I used location.reload() to do so. After doing release 0.3, I got to know more about webmaker My pull request is here. 

Strategies benefiting from open source communities

On OSD600 class on this Monday, we had a discussion on how to build a software production pipeline that can strategically benefit from a vibrant open source community from many aspects, such as big corporations, small shops, students and so on.

We had a lot of ideas, which can be categorized into following aspects:

• Face to face gatherings: since the open source developers are from all of the world, it’s important and excited for them to have chances to gather together and have the face to face communication, such conferences, workshops and so on. They can increase participants’ enthusiasm to the open source community.
• Standards: good standards make participants easy to understand and follow, and keep workflow organized in open source communities.
• Technology: using programming languages that is newly developed.
• Onboarding: making it easier to understand for non-developer.
• Time management: making miles stones.
• Project planning: doing marketing research to find users and localization staff, use feedback to improve the project.
• Funding: big companies would sponsor for events held in open source community; hiring contributors.
• Partner : encouraging partnerships with business and educational organization, partnering with educational organization to have more targeting users and participants for the project
• Building open community: encouraging social media, use permissive license; putting on version control system, such as github or subvision; recognizing contributors, mentoring the community.
• Documentation: creating good guide and documentations for new developers, making video/audio guide for different learners.

Less.js – a CSS preprocessor

Today, Jordan Theriault introduced Less.js in the OSD600 class. Less.js gets popular recently. It is a CSS framework working with Javascript in client-side. I started to learn and use it when I worked Mobile Webmaker project.

Less.js have some advantages:

• Improve performance. The purpose of Less.js is to speed up development of CSS. So using Less.js can improve performance in ways that can’t be done in normal CSS.
• Significantly reduce sizes of style sheet files by well grouping things. Using Less.js, .css files can be well grouped and be separated into smaller and more meaningful .less files.
• Easiness to operate. Less.js has following features:

·         Ability to define variables,

·         Operations and functions (Mathematical functions and operational functions)

·         Mixins, embedding all the properties of a class into another class

·         Nesting

·         Joining of multiple files.

Those features of Less.js make it easy to operate to group things and generate CSS files. Moreover, the developers are easy to modify .less files with those features by reducing the redundancy of the code.

In the future, I will dig deeper into Less.js with continuously working in Mobile Webmaker project.

Source:

http://stackoverflow.com/questions/8276154/less-and-sass-vs-traditional-css-methods-and-thoughts-on-performance-and-seo-etc

http://en.wikipedia.org/wiki/Less_(stylesheet_language)

http://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of-css-preprocessing-explained

Presentation Script – NodeJS

This presentation contains following content:

´  What is Node.js?

´  Popularity

´  License

´  History

´  Community

´  Main idea of Node.js

´  How to start

What is Node.js?

In nodejs.org, Node.js is described as follows:

Node.js® is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

This is what is Node.js on Wikipedia:

Node.js is a cross-platform runtime environment for server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft Windows and Linux with no changes.

Popularity

Node.js is release under the MIT license and bundles other liberally licensed OSS components, such as V8’s license, OpenSSL’s license, HTTP Parser’s license, npm’s license and other licenses for some modules / tools.

License

 link: https://raw.githubusercontent.com/joyent/node/v0.10.32/LICENSE

History

Node.js was created by Ryan Dahl (github: https://github.com/ry), starting in 2009.

Its development and maintenance was sponsored by Joyent, the firm where Dahl worked.

Dahl stepped aside in 2012. And Timothy J Fontaine (twitter: https://twitter.com/tjfontaine, github: https://github.com/tjfontaine) is Node.js’ current project lead

Community

Developer site: http://github.com/joyent/node

Contribution Guide (http://nodejs.org/documentation/contributing/). It contains the instruction on reporting an issue and contributing a feature or fix, such as how to fork, branch, commit, test, push and so on.

nodejs.org in multiple language: http://nodejs.org/documentation/localization/

Main Idea of NodeJS

Use non-blocking, event-driven I/O to remain lightweight and efficient in the face of data-intensive real-time applications that run across distributed devices.

Non-blocking / callback means that the code does not need to wait the completion of the action to continuously execute the next line.

Event-driven means that Node.js uses even loop to handle tens of thousands of concurrent connections instead of multiple threads.

How to Start 

Tutorials

NodeSchool.io interactive lessons

The Art of Node (an introduction to Node)

Hello World

Hello World Web Server

Node.js guide

Build a blog with Node.js, express and MongoDB

Node.Js Tutorials At Project 70

Node.js for Beginners

Learn Node.js Completely and with Confidence

Absolute Beginners Guide To Node.js

Find more, please visit http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js

Source:

Real Time Web with Node.js (http://node.codeschool.com/levels/1)

Understanding the node.js event loop (http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/)

http://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js

FSOSS in Oct 23-24, 2014

This year’s FSOSS at Seneca College, Toronto was the thirteen iteration. Three keynote speakers were invited to this year’s conference. . They are David Humphrey (CDOT Researcher for Mozilla Foundation), Bob Young (Red Hat, Inc. Co-Founder) and Chris Aniszczyk (Head of Open Source at Twitter). And thirty-five speaker have presented at the conference. I participated this event as a volunteer. Fortunately, I listened two keynote speakers’ presentation and the Kieran Sedgwick’s presentation besides my duty shift.

All of the three presentations expressed speakers’ enthusiasm to the open source. Mr. Young generally introduced how open source work with business from the entrepreneur aspect. Mr. Chris talked more details on open source on technical side. With more experience and profound understanding on open source, He clearly shows the craft and culture of open source and presents how open source works in a large scale a company (Twitter). He explicitly expresses he loves open source and gets a lot of advantages from it. Moreover, he hopes there are more and more people joining open source development.

Mr. Kieren is an intermediate open source developer, who works in CDOT, an open source organization. In his presentation, he did not explicitly mention his view point on open source. But from his words, audience can strongly receive the message that he has a very positive opinion on open source. He starts his career at an open source organization with the open source projects. He learns cutting edge technologies and grows rapidly in the open source environment. He gets many benefits from open source community. In his presentation, he uses an open source project to illustrate how the mentioned technologies work. It is inevitably showing audience how open source works in a small scale - a project from some aspect.   

I am glad I did contribution to the big event held by CDOT at Seneca College. And I had deeper understanding on open source from this conference.