Chrome dev tools deep dive : Network


1. Throttling A web application might work beautifully on fast networks but stutter and even throw up bugs on slow connections. Fiddler used to be the go-to tool for simulating delays and adding latency during testing; the good news now is that Chrome provides throttling too. There are preset profiles available (e.g. GPRS, 3G, etc.) but … Continue reading Chrome dev tools deep dive : Network

Chrome dev tools deep dive : Console


The console is one of favorite places. The REPL environment is a quick way to validate JavaScript expressions. However, there is a lot more it can do. Read on. 1. $0 - $4 selectors The last inspected element is always available in the console as $0. $1 points to the next most-recently element and so … Continue reading Chrome dev tools deep dive : Console

Chrome dev tools deep dive : Elements


1. Search CTRL + F allows you to search for strings in the DOM but you can also search using CSS selectors and XPath expressions. 2. Color picker Ever wanted to figure out what colours exist on a web page? Or prefer some other colour format? Here comes the color picker: Shift click on the color … Continue reading Chrome dev tools deep dive : Elements

Tips for printing from web applications


Web developers usually have to format user content for printing; for example, accountants might want physical copies of online ledgers while teachers might need lecture note printouts. The challenge lies in getting consistent print output across a range of browsers and their never-ending stream of subtle nuances. This post approaches printing from three viewpoints: tooling, JavaScript … Continue reading Tips for printing from web applications

7 Cool tricks with Chrome DevTools


1. $_ $_ re-evaluates the last expression and is similar to the '_' command in python's REPL. However _ prints the last 'non-None' value while $_ prints the value of the last evaluated expression even if it is undefined. 2. $() and $$() selectors $() selects the first matching DOM element while $$() selects all matching DOM elements. Quite useful if jQuery is missing. … Continue reading 7 Cool tricks with Chrome DevTools

Automate Builds using GruntJS


I already wrote about the awesomeness of GruntJS and here is how to set up your own Grunt system. 1. Installation GruntJS runs on nodejs so you need that installed first. Once nodejs and npm are installed, use the following command to install Grunt (the -g flag installs it globally). npm install -g grunt-cliThis installs the grunt … Continue reading Automate Builds using GruntJS

Grunting with GruntJS


I have been working on a team using a diverse tech stack: PHP, MongoDB, EmberJS and requireJS. Since we intend to release the alpha version in a few weeks insha Allaah, I had to bring everything up to production-ready levels. The usual needs: Javascript linting and obfuscation, resource (JS, CSS + images) minification, test automation (unit + … Continue reading Grunting with GruntJS

Ten Useful Terminal Commands for Developers


The terminal is a very powerful tool and once you grasp its basics; you'll love it and use it in ways never imagined by the original developers. Here are some really useful commands. 1. Ls I use this tool everyday and it is a workhorse. It is great for listing directory contents and checking file … Continue reading Ten Useful Terminal Commands for Developers

Importing a remote Git project using Eclipse


Git is an open-source distributed version-control system and is similar to Subversion, Mercurial and similar version control software. While trying to get access to a Git remote repository on Eclipse, I encountered a lot of issues as I didn't quite know how to go about it, so I decided to write about it. This guide assumes you already … Continue reading Importing a remote Git project using Eclipse

My Top Ten Applications


There are some tools that help me to achieve some of my daily tasks. One thing links all of them though, they are all free software and can be downloaded online. OpenOffice.org (Windows/Linux) This is an office software suite for word processing, spreadsheets, presentations, graphics, databases and more. OpenOffice.org is a good alternative to the … Continue reading My Top Ten Applications