Project Release 0.4

In my project release 0.4, I still worked on the webmaker app project. I was working on the issue#569, which are the UI adjustments on Sign In. The code that I fixed is in webmaker-login-ux, which webmaker app uses for log in. My pull request is here. And the screenshot after fixing is as follows:

Changes in Open Source in Last 3 Months

In this semester, I had the opportunity to take David Humphrey’s OSD600. In this course, I learned the culture of open source community and how to involve in the development of an open source project. Open source model becomes more and more popular. And a lot of companies have open-sourced the software. Although, it’s been only three months since I started learning open source development. The changes in the open source community are large and obvious.

In this October, the 13^th FSOSS conference was held in Seneca@York campus. I participated as a volunteer. There were more than 200 registered audience, nearly a hundred more than the number in last year. From the number of FSOSS participants, we can see there are more and more people interested in the open source.

Moreover, the biggest news in open source community during last three month was that Microsoft announced that it made the full .NET server core stack open source for cross-platform Nov. 12, 2014. Developers can begin engaging with breadth of .NET open source project at Github. It uses MIT License, which is one of most popular license in open source projects, instead of its own open source license in the dotnet project.  That was the big step for Microsoft in the open source community. It is also a big sign that open source is getting widely recognized and adopted as an efficiency development model and in the software development industry since Microsoft, the top company leads the development model in the industry always, starts moving steps into the open source community. It is anticipant that there will be more and more companies and developers will participate the open source community.

Source: 

http://blogs.msdn.com/b/somasegar/archive/2014/11/12/opening-up-visual-studio-and-net-to-every-developer-any-application-net-server-core-open-source-and-cross-platform-visual-studio-community-2013-and-preview-of-visual-studio-2015-and-net-2015.aspx

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