Posts

Showing posts from 2017

Async image load test with gh-pages

Image
I finally got the opportunity to try out GitHub Pages. GitHub Pages is a simple static HTML page that we can create from our GitHub repositories. It is perfect for documentation or anything related to the project. To get started, a gh-pages branch must first be created, and then it can be further setup in the settings section. For this project, I wrote a test case for async image loading. I built a simple page that would allow me to test this in multiple browsers. The page is very simple with an image, a counter, and a button to reload the image. As the user clicks the button, the image is reloaded. If the image is reloaded, the background changes colours and the counter is updated. The async testing has passed on all the browsers except for Safari. I decided to dig deeper into this and Safari is like this. I had to dig pretty deep into the webkit source files to see where the load event is fired. After digging around for a little bit, I found the ImageLoader.cpp file. The na

Learning Proper Documentation

Image
Earlier this week I finally finished my JavaScript Node.js package . I finished all the coding and testing, and thought to myself "Okay great job, on to the next project." However there was one thing left to do: documentation. I know the value of good documentation because I've worked with a few large projects in the past. After coming back to a project after a month or two without any documentation, the code can seem very alien to you, as if it wasn't even you that wrote it. I typically try commenting most of my code, however my set-up instructions, project descriptions, and generally my ReadMe file has never been up to par. This project has taught me how to write a cleaner, better looking read me. GitHub has detailed instructions for creating good documentation that I've been following. It specifies the order and content that a ReadMe generally follows: project name, description, table of contents, installation, usage, contributing, credits, and license. The

Setting up a complete CI Solution for a project

Image
With this lab, I continued working on my library that I created. Although originally my library was pure JavaScript/HTML, I changed it over to Node for some new experience. This required me to modify some of my functions. This lab has taught me how to set a continuous integrated environment. In simpler words, continuous integration is a process of automating the build and testing of code for every new commit. My first experience with automated code testing came as I pushed first bug fix, I received a message saying my code didn't get accepted because Travis CI build failed. This time, I got to set up my entire build and test process. There are a few files that are needed for a continuous integration process. The first thing needed was a way to tell TravisCI how to configure, build, and test my project. To do this, I created a .travis.yml file in my root folder, which holds the language used, as well as the appropriate versions. Next, I used the package.json file to auto

First bugs completed

Image
After working on my bugs for the past few weeks, I've finally completed two of my bugs! The bugs themselves were very simple to solve, but in this process, I've learned how to use a variety of different Git command, including clone, pull, add, fork, and pull request. I use to feel lost while using Git, now I'm much more confident with my new skills. Neither of my bugs were software-breaking bugs, and most users wouldn't even notice them. I finished my first bug in my previous blog, you can go and view it here . Deep inside of Firefox's Dev-tools, one button's boundaries extended to the end of the screen, instead of around the image only. The fix was relatively easy, a CSS class was already created and I only had to place the class name in the correct spot on the HTML page. I left the last blog after I completed the bug, without creating a Pull Request. During my previous lab, I practiced creating a Pull Request, so I had an idea on how to do it this time. I cr

My first Pull Request

Image
For the next lab for my Open Source class, the goal is to create a repository with a simple open source library, let other students contribute to my library, while I got the chance to contribute to their repositories. The library is meant to get simple file information, such as file name, file size, and sha1/MD5 digest. I decided to write my library in JavaScript. I created four empty functions, raises 4 issues , and then waited for someone else to create a pull request against my code. Lately I was the one that would go into different Git project, look through all the issues to find the good first issue label. It was a nice change to create these issues myself, and then place labels on them. Eventually another student changed some of my code sent a pull request. I accepted it and merged his code together with him. I closed one of my issues, maybe someone else will come and help me out with the others. Now I had to contribute to another student's project. I knew the b

Starting work on my first bug

Image
This week I finally started working on one of my bugs. I decided to first start on the DevTools bug, since I got this one assigned to me first. Once I cloned the repo to my local machine, there were a few packages that I had to install first, mainly node and yarn. The README file was very easy to follow. A few weeks ago, I ran Firefox from source so I knew how to set it up. You can read up on my experience with that  here . I had to download and build the source once again, fortunately this time I knew how to do this. So I had the correct version of Firefox running, now it's time to look into the bug! The  bug  instructions are easy to understand, with easy to follow steps for reproduction. There is also a handy video for reference. Once I saw the "Learn More" button, I understood the problem. When the user hovers over the button, the entire row acts as a button, instead of just the image. Definitely not a software breaking bug. Nonetheless, I'm excited to star

Finding my first Open Source bugs

Image
This week on my Open Source journey, I started hunting for my first bugs to work on. I was hoping to find something simple, so I could understand how the whole process works. Once I know how to contribute, I'll start looking into more difficult bugs. When looking for bugs, I was mostly looking for JavaScript or CSS bugs. There is a large variety of bugs available, from Python on the Mozilla Network site, to Java and C++ on Firefox Mobile Android. There was a few projects that I narrowed my search down to: Thimble , Firefox Dev Tools ,  Rust , and rr .  Each has plenty of bugs to start with. It's hard to understand what any of these bugs mean. Even after reading the description, I couldn't get a clear understanding on what I need to do. A lot of the bugs were also assigned to a contributor. So I kept looking for something that I felt comfortable with. On Firefox DevTools, I finally came across something I'd be interested in. The bug [1403883 ] is not very diffi

The MIT License

Image
The MIT License is a software license that gives permission for reuse, modify, or sell as the programmer sees fit. The License is written in lots of big words, and I am a programmer not a lawyer so it's hard to understand it all. In my Open Source course, I learned of the acronym "IANAL", or I am not a lawyer. For an assignment, I am to write a simple blog about what do I think the MIT license means, explain it in my own words versus how a lawyer would read this. Image obtained from https://opensource.org/licenses/MIT The license starts off stating that the software code can be used free of charge in whatever way the person obtaining it sees fit. This includes using it, modifying the code, redistributing it, or even selling copies of the software. Now that may see weird, why would I allow someone to use my code free of charge and then let them sell my software while I make no profit? Well the next paragraph explains it. The software is provided "as if&qu

Learning the ins and outs of my favourite code editors

Image
Everyone has their favorite Code editor to use. I've tried multiple editors to see which one I like the most. I love the simplicity of Notepad++ and have been using it for years, however once I started using Linux, it wasn't there! I was pretty bummed out a bit that, but I wanted to start doing some coding in Linux and wasn't going to give up that easily, and so my quest for a new code editor started. I've tried multiple different code editor: vim is interesting however the learning curve is a little too steep for me, emacs keyboard-only navigation is interesting however it also turned me off from the editor, Gedit was a little too simple for me, and finally sublime was very nice but the occasional "trial end" message pops up and annoys me. I then stumbled upon Atom. I liked the visual components and simplicity of the Code Editor, along with the ability to customize anything and everything. Atom became my predominate code editor for Linux. I knew some of t

Building Mozilla web browser from source

Image
This week I built the Firefox web browser from source. Mozilla currently has about 17,998,723 line of code, it is mostly built with C++ but also includes other languages such as HTML, C, JavaScript, Rust, and many more. I personally use Mozilla as my preferred browser, so it was interesting to download and modify the source code. Mozilla has easy to read  instructions  that I followed for downloading the source code, building it, then running. I'm using Mozilla on a Windows 10 system. Some of the prerequisites include installing Visual Studio with certain workloads, Rust, MAPI Header Files, and MozillaBuild. Once I installed everything necessary, I was ready to pull the Firefox source code using the command hg clone https://hg.mozilla.org/mozilla-central And then the wait begins. After patiently waiting for the a while, the downloading aborts. Uh oh, what happened? The message read: "Rust compiler not found". I have installed the Rust compiler and have

Rythm - making your page dance

Image
If you've ever wanted to add some life into your web pages, Rythm is a simple JavaScript library that will do just that. Rythm enables you to make each component on your page dance to your music. There is even a variety of dance moves to choose from. There is the pulse, The jump,       The twist,       The slide,      The fade        And finally the color change            Rythm is a great way of making a site more lively. Buttons, images, text, and more can be animated. The project was started earlier this year and is still getting updated today. It is written in both JavaScript and HTML More details including all demos can be found at https://okazari.github.io/Rythm.js/