Tech Resources

This is an ongoing post where I’ll share resources I find for learning or productivity. When updates are made to a section, the section heading will be marked in a color and marker (new or updated). Also links will be ordered from newest to oldest

Web Dev



Web Design

This is a really nice codepen by Angela V for custom radio buttons (css)



Creating command line shortcuts for git commands



Tips for embedding codepen samples on wordpress sites

  • I’m using oEmbed so I just copy the url of the codepen into an empty line in my site editor


Internships Advice (new)

Intern Talk by Selena Deckelmann

Mozilla has organized a series of talks for summer interns. The first was by Selena Deckelmann, Director of Firefox Runtime.

These are some memorable points to think about:

  • Creating a circle of work advisers
  • Write down your dreams
  • Do the hard thing (find a hard problem to tackle)
  • Listen to criticism, sometimes

On her slide deck, the slide that shows periods leading to realizing dreams also coincides with periods of struggle. I have to wonder whether I am not struggling enough(?).

Webcompat Intro

Webcompat is a volunteer service that allows web developers and designers to report cross browser compatibility issues observed in their websites and applications. The issue will be triaged and a solution or browser fix will be returned. screenshot browser compatibility reporting site

One of my tasks as Front End Dev intern for Mozilla Webcompat (via Outreachy) this summer is to help migrate the application to a new architecture and version.

These are a few tools that web developers/designers can take advantage of today:

  • Firefox and Chrome add-ons: After installing this add-on for your browser, you can conveniently report cross browser issues from your website with just one click. (see the screenshot upper left corner for link)
  • CSS Fix Me: This tool allows you to enter CSS that is not working across browsers and provides updated CSS with vendor prefixes for improved cross browser compatibility.
  • Media Reporting Tool: (available on Firefox Nightly version only) Automatically detects video playback issues related to browser and provides a one-click method to report the issue from your website.

So far, I am learning about code tidying processes that are required for the build process to run (on travis). These are a few resources for the processes we are using:

That is all for now. Look forward to meeting project members and other interns at the All Hands meeting this summer.

Front End Web Interview Application

I have a web application on Github that generates random Front End Web Interview questions for practicing before interviews. This is a description about the process of developing the application. It should be noted that my main purpose in developing this application was to practice my Angular.js application development. Comments on the application are welcome.


  • I’m a Front End Web Developer who is seeking a new job. I was looking for resources online for how to prepare for technical interviews. I found the h5bp project’s interview questions list on github. But I was interested in playing with the data.

Problem 1

  • The main data format of the original list of questions is a README.mdn markdown file. Initially I didn’t even think it was possible to work with data in this format.
  • Resolution 1: I found the project’s gh-pages branch and corresponding index.html page with interview questions. The first iteration of my application’s logic did an HTTP Get on that index.html page and parsed the results.

Problem 2

  • Ruh-Roh (that’s in the voice of Scooby Doo), I compared the current README.mdn to the index.html page in the h5bp project and realized that they contained some different questions. I scanned the project issues and came to the conclusion that one of the contributors would manually generate the HTML list from the README and post to the gh-pages branch. But keeping the HTML version up to date was not a high priority.
  • Resolution 2: I found a website,, that would take a markdown file and parse it into HTML. My current process is to manually run the h5bp README in the parser and update the resulting HTML in my github project. I don’t really like having this manual step but it allows me to ensure that the presented list is relatively current. Also it gives me an assurance that my application will not break unpredictably when the list format changes on the h5bp project side.

Problem 3

  • I considered application features that would be more helpful to users who would administer technical interviews (for ex., Lead developers, Hiring managers). I thought managers might want to save a boilerplate interview or sort saved interviews in a particular order (like easiest to hardest questions).
  • But this would require some form of data storage. As I looked into options like local browser storage and IndexedDB, I had questions about what would happen when and if the h5bp questions list changed (like questions could be added or removed) and how to synchronize two versions of lists. I decided to table further enhancements requiring data storage to a different application maybe warranting use of a database and user authentication.

Cross Browser Testing Resources

Updated 03.04.15

I found a few useful links related to Cross Browser Testing.

Original: A few years ago I swapped my PC for a Mac. Recently I’ve been thinking about how to test websites on older versions of IE browser. Here are a couple of options:

  • Sauce Labs: They offer a paid service for running manual or automated web application tests. You can choose to test on different combinations of OS and web browser (with different browser versions). The test instances are running on VM’s. Pricing is mainly based on monthly subscription but testing on open source projects is free. (When I was volunteering with Mozilla’s Web QA, they were running Selenium tests on some web projects via Sauce Labs)
  • BrowserStack: This sounds like a similar service to Sauce Labs. I have not tried it out to see which is better/worse. They offer a free trial but otherwise require a paid monthly subscription. They got referrals from some big names in web dev. (Trivia: They are based in Mumbai)

Plan First Then Code

I’m between a Beg-Int software developer. I’ve taken a lot of MOOC programming courses through Coursera, Udacity, and Stanford. These are some basic lessons I’ve learned through class projects.

Ask questions before you start coding

For most people, I think the first response to seeing a coding problem is to start coding up a solution immediately. There are a couple reasons why: you want to see results immediately. I’ve found that sometimes I do not understand what I’m being asked to deliver and that leads to bad results, including wasted code and re-work. It is important to minimize any miscommunication from the beginning.

Understand the requirements

This is closely tied to the first point but I think whether you are working on a homework assignment or reviewing new work software requirements (specifications), you need to read the document a couple of times. Allow enough time to analyze and understand what does not make sense about the document. Get clarifications before you start to do any coding or planning of your solution. The worst case is when I think I understand the requirements, code to spec, and then find out the results did not meet the requirements.

Plan before you start coding

Even when working on programming homework assignments, it is rarely the case where you will be writing code from scratch. It is more often the case that you will be given a starter template (say with a game or rendering engine) or you will be working with an existing code base (with multiple authors). It is really important to understand what the existing code is doing so you will be able to use existing functionality and avoid reinventing the wheel. Also you will need to use existing functionality as it was intended to be used (pray that your co-workers practice good documentation).

I’ve found that writing pseudo-code to conceptualize a solution is better than not. Even if you’re working on tight deadlines, I have usually experienced that when I start to code without any planning, it will take me longer to debug or come to a cleanly working solution.

Ask questions after you start coding

While working on a Front-end Web Developer certificate, I felt like the first few projects were pretty simple and was able to complete one project per week. I fell behind on the fourth project, in Web Performance Analysis. I got very frustrated researching tons of articles and doing a lot of coding and not coming close to the requirements. In retrospect, the issues were a combination of I did not understand the requirements well and the requirements were not clearly written. If I had asked more questions up front and during my period of frustration, I would have saved money (the tuition cost of the course). In my upbringing, I was somewhat discouraged from asking too many questions and being considered “dumb” but in reality, even if you ask simplistic questions (to help clarify what you don’t understand), it will end up saving time and money and could lead to asking more intelligent questions down the road.


I think all the points of this article are pain points that every developer learns through experience (maybe you have to experience it in order to learn from it) but hopefully it will be useful to others.