On Our Radar This Week: Google, Build Tools and Debugging in the Browser

By James Hibbard
We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now

Welcome to the next installment of On Our Radar, a weekly round-up of news, trends and other cool stuff from the world of web development.

There sure has been a lot going on recently: Jeff Bezos unveiled Amazon’s first smartphone, ‘rebeccapurple’ was officially added to CSS Color Level 4, and it was announced that HTML5 may be on track for W3C Finalization by the year’s end – will wonders ever cease? In other news, Microsoft debuted a pair of trousers that can wirelessly charge mobile devices, the World Cup got its own API and Google began testing a domain registration service.


Staying with the company whose corporate motto is “Don’t be evil”, Google this week announced an independent “fork” of OpenSSL, the widely used cryptography library that came to international attention following the Heartbleed vulnerability. They also launched “Made with Code”, an initiative to encourage more girls to code, then put their money where their mouth is with a $50m pledge! Version 1.3 of the Go programming language (originally developed by three Google engineers) was also released. It promises faster compile times and targets Google’s experimental NaCl cross-platform technology.

As if that wasn’t enough, here’s more Google goodness (including two Go based tutorials):

And if that wasn’t enough, Google I/O (Google’s annual developer conference) took place this week, where they launched a new smartwatch and other Android Wear products ahead of Apple. You can find an extensive summary of what else was unveiled here.

Enough about Google already? Ok, let’s move on …


Keeping your skills up-to-date is a constant challenge in this fast-paced industry, so here’s a selection of articles and tutorials to help you do exactly that:

And if all that talk of “dependency injection” and the “open/closed principle” went whizzing over your head – don’t worry! Here’s a bonus video which does a great job of explaining things such as “event-loops”, “callbacks” and “concurrency”.

Buzzword of the Week – Build Tools

We developers are a lazy bunch and will go to great lengths to avoid repetitive and tasks (as this xkcd cartoon shows). To streamline our development workflow we prefer (or should prefer) using build tools: programs designed to automate such mundane activities as compiling preprocessed CSS, minifying JavaScript, running unit tests, or reloading the browser.

There are a slew of build tools out there and sometimes it’s hard to know which one to use. Never fear! Here is a selection of articles that will hopefully make the decision easier:

And as a final tip: the jQuery core team uses this handy Grunt task to see the file size impact of each change.

Browser Tools

While we’re on the subject of web development tools, let’s turn our attention to those which come built in to your browser. Whether dealing with layout issues, editing audio, or building an entire web app, we’ve got you covered.

Fun Stuff

After so much talk of tools and streamlining your workflow, let’s even things out with links to some amusing and random sites which are guaranteed to drain your newfound productivity.

And that’s just about it for this week. I’ll leave you with the news that the long overdue redesign of caniuse.com is all but finished, a discussion on the fact that disability isn’t binary and a report on the birthday paradox at the World Cup (which should keep my mathematically minded co-author happy).

So what do you think about the current happenings in Google? Do you use build tools such as Grunt or Gulp or are they a waste of time? Do you have any tips or tricks for your favorite browser tools that you want to share? Let us know and the conversation can begin.

We teamed up with SiteGround
To bring you the latest from the web and tried-and-true hosting, recommended for designers and developers. SitePoint Readers Get Up To 65% OFF Now
  • Awesome list of resources here!

    Yeah, I just started using grunt recently, and it definitely improved my workflow tremendously. Personally I used it for a site that had heavy use of JavaScript and css (with Less). I was using grunt to watch my less and script updates, so changes to essential files would compile on the fly.

    I also used sourcemap in Chrome devtools to map my less files to the compiled css, so I can modify the less files directly in browser through the inspector. This whole process really improved my development time. A lot of what I did was from this tutorial as well, http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools–net-36636

    • James Hibbard

      Thanks! Glad it proved useful.

      Were you using grunt-contrib-watch to watch your less and script updates?
      This is also quite useful for running unit tests whenever code changes.

      Thanks, too, for the sourcemap tip. I’ve not actually tried editing files through the dev tools. This is something I’ll have to look at.