Monday 26 May 2014

Server-Sent Events and Bootstrap Tinkering

Last week was definitely substantial in terms of activity. In the pursuit of surprise, however, summary and descriptions of my work on the current sprint will be completed on this upcoming week's blog post when initial implementation into the MakeDrive logic will occur (hopefully by week's end) and be visually demonstrated first.

I am delighted to report about my initial fiddling work with Bootstrap CSS which is coming along rather swimmingly and excitingly. This front-end resource is being used to present my first proof-of-concept of the relatively new SSE interface. Documentation is readily google-able and as in-depth as you need it. When used in conjunction with JQuery, it provides for extremely efficient element generation and manipulation. You can event grab pre-made templates from the main website and customize them from there for web design on the fly. It's front-end beauty that's ideal for the timeframe of back-end coders.

Friday also welcomed a new workshop to host at Silver Springs public school. Very similar in structure to the workshop held one week prior, with the addition of me personally spearheading the last one of the day. The students were nearly as attentive and focused as the first school, and showcasing Webmaker proved to be a success yet again, with excited praise coming from faculty and participants alike. One trend fellow teammate Kieran Sedgwick and I were noticing is the slight difficulty for the younger audience to immediately find the tools they were looking for from the main page. Kieran has already filed a new issue on Github for the front-end team to take a look at.

Lots more news to come after the shipping of the first sprint by the end of this week!

Sunday 18 May 2014

The Plugin, the Sprint, the Speech, and the Workshop

To use a word such as 'eventful' for this week would likely be the understatement of the century. In the short span of 5 days, the Webmaker team at CDOT managed to implement and demo a barebones functional version of a Brackets extension called Wavelength, and crack down on the remaining issues in the Filer codebase in order to ready it for porting into MakeDrive. In between all of this, fellow team member Kieran Sedgwick and I were sent out on our first workshop for the Toronto District School Board, and earlier in the week I was able to harness my communication skills and impromptu charm by welcoming a visit from high profile individuals.

In the spirit of honesty and accuracy, the work on the brackets extension did start on Friday, but that shouldn't take anything away from the tenacity and talent of the team being able to dive straight into a brand new API and push up a functional extension within less than 10 hours of work per person. Credit and thanks should be given to Adobe for not only creating sufficiently thorough documentation to peruse through in times of need, but for uploading templates and specific examples for starting to build extensions that proved to be paramount in our ability to create ours in such a demanding timeframe. My particular contribution was implementing the toolbar icon and the events necessary to emulate the standard behaviour relating to mouse movement and action - changing background colour when hovering over the icon and changing the icon's colour when clicked on or activated. The biggest logical hump for me to overcome was having to wrap my head around the fact that Brackets elements are all effectively DOM elements; I was looking for an API-specific function or parameter that would invoke or manipulate the toolbars when in actuality these are all DOM elements controlled by standard javascript calls and CSS classes. Extremely neat.

Filer work made up the bulk of the development work for the week, and the experience was the first true test of what is likely to come in the near future in regards to the independent workflow process. When the rest of the team was focused on their own respective tasks, and project lead David Humphrey is juggling 50 other issues at any given time, I was largely left up to my own devices and ken in order to solve any blockers that obstructed my progress. IRC is always there, but honestly it could never amount up to the quality of a peer's physical presence. Quite overwhelming at first. Filer's codebase is relatively vast in comparison to what I am used to working with up until now, and file system logic is brand new territory for me. Combine those factors with a rather outdated documentation and the questions started piling up quickly from under the woodwork. Once I gathered enough context about the variables and functions involved and more insight into assertion-agnostic unit testing, everything else eventually fell into place with the exception of a few kinks. Testing the logic proved to be a challenge as well since I was requested to run the unit tests on a local server instance to emulate an environment that accommodates CORS mechanisms. Mac OS X builds have apache2 built in to serve webpages locally, but being able to properly implement that also ended up needing the seasoned and extremely capable hands of Chris Tyler, OSTEP team's project lead and veteran linux wizard. Apache2 is overly restrictive in its document path hierarchy and file permission structure. I initially thought that placing a symbolic link of my index.html entry point in the default path given in the httpd.conf file. That proved to be unsuccessful, so Chris needed to change the default path to start at my Document file tree and set the chown group of all the inner files and folders to the "staff" moniker in my case with lastly the addition of granting read and execute permissions to the "other" octet (chmod 755, or similar). Allowing symlinks is apparently a dangerous course of action that opens your files to attacks. All in all, I managed to send pull requests of two issues related to filer by the end of the week, ultimately surpassing my own goals in the end.

Thursday was reserved for the workshop activities at Kennedy Public School for a grades 6-8 career day. Kieran and I agreed on engaging the children in a relatively simple task of creating a webpage with their own background colour and URL-sourced image anchor using Webmaker's Thimble editor. Initially, we believed there would be enough time for the students to look for and find the syntax required to achieve the task on their own, but for many of them the learning curve was a bit much and we quickly adapted ourselves to nudge and help them along in the right direction. Nearly everyone was attentive and listening, and we were pleased to see some cases of genuine interest and comprehension of what they were looking at and doing. It was a smooth, productive day and I'd like to think that we've helped nurture the future software development giants of tomorrow some way, shape, or form.

I conclude with a pleasant surprise this week when one of the ICT professors dropped by the office with a pair of executive academic representatives. I had the opportunity to give them a quick overview of our project, and tried my best to add as much genuine personality into the conversation as I could while keeping a professional manner. It's wonderful experience for anyone who wants to refine or nurture their interpersonal skills in a more improvisational dynamic. These kinds of meetings often lead to invaluable networking channels that will reward you in waves later on. Wonderful stuff.  

Monday 12 May 2014

A Trial by Fire - Initial Exposure to Bower, NPM, and require.js Modules

Starting the first week in any place of work tends to be chaotic to say the least - settling into the expected workflow and output, setting up your environment, and getting to know your team members, if any. The first week's project was designed to expose and introduce the popular and emerging web technologies used to test, build, and publish web apps in the front and backend of systems.

Node.js functions and objects were used to import and export a simple module that parses through incoming data in markdown file format and return the URL addresses of the links found in the strings. Initially, the data was placed in a static variable in order to focus on the pure logic of the function that parses through the data. Unit testing was created with mochaTest and automated with a Grunt task, alongside JShinting and linting for any syntactic concerns. Travis was used in conjunction with the Github repository currently being worked on in order to invoke all of the testing tools anytime a change is pushed, and the results would be emailed to the developer shortly thereafter. After those dependencies were properly implemented and tied together, the module was published to the npm and bower registries in order to be useable by the public. Bonus tasks were to implement logic to read data from incoming file arguments on the command line as well as parse data from a front-end web app using require.js to import the module and its dependencies.

Managing to accomplish all the aforementioned goals save for the front-end medium concluded a work-intensive and very intriguing week. Almost all of the technologies used in this project were brand new and my exposure to them will hopefully prove to be invaluable when tackling the coming work ahead with the Mozilla Webmaker team to release a functional version of the nimble to the Webmaker toolkit by the end of the summer. Any of the expected blockers that I've come across were efficiently quelled by the readily available amount of help from the rest of the team and the documentation of the APIs. I enter this week ready to tackle whatever challenges that cross my path next with cautious optimism and palpable excitement.