Useful development and debugging tools for web devs and front-end coders.
Following is a list of cross-browser/platform web development and debugging tools useful for client-side developers. Depending on the application, one or all of these tools can be valuable in completing work on a website front-end.
I wrote this late last year and it gets, well, a lot of traffic. Why? Because it hit home with a common concern in the JS community–a path forward for decorators. It just may change the way you build React apps for the better.
How to set up a Node.js development workflow on Windows using a Linux VM.
I earlier this month I spent way too much time trying to SFTP to Ubuntu Server with Sublime Text. The purpose of the SFTP effort was to set myself up for developing modern web applications on a new Windows 8 machine I bought to play SimCity 2013. And after getting everything working I realized the SFTP method had some gremlins and the file syncing reminded me of Dreamweaver—it simply wasn’t fast enough.
Lately, unless you were running a Linux machine or had the pleasure of owning a Mac with OS X, developing modern web applications has been a bit of a kludge. Enter Vagrant.
Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.
In this article I’ll explain how to set up a development environment in Windows using a virtualized Linux box, suitable for rapid prototyping. Then I’ll take it a step further and explain how to integrate a Backbone-based application framework with Vagrant and Sublime Text, greatly increasing the speed for developing modern web applications on Windows.
One of the trickier parts of writing JS for the web is taming async code. Control flow abstractions for handling async JS exist but are commonly overlooked in engineering organizations, which can lead JS projects unknowingly into a labyrinth of
IIFEs, through the pyramid of doom (
issue) and directly to
callback hell — making code brittle and prone to breakage.
A few years back Sauce Labs co-founder Jason Huggins (
@hugs) was giving a talk at
js.chi(), showing us how to use an Arduino to change the color of an LED based on an input. During the talk Jason suggested those interested in microcontrollers check out
Pumping Station: One up on Clybourn. So I got some friends together and we went to PS1, and learned the basics of programming an Arduino. The event was a fun experience and, later that night, netted me a working Larson Scanner. Since then I’ve procured a
Raspberry PI, and started tinkering with
Google Coder. And now it’s time for Tessel.
Spike at Airbnb just mentioned during a live TechTalk webcast that the Rendr framework they built was open sourced earlier this month:
During the talk, Meteor and Derby were mentioned, and Mojito *sigh*. And Stitch was also mentioned, as a part of the stack they’re using. So anyway, there you have it. The Holy Grail I talked about. It’s out, but admittedly, according to Spike, not quite finished. Caveat emptor.
How to add syntax highlighting for CoffeeScript to the Sublime Text editor.
Sublime Text with
plenary talk from Paul Irish, I immediately began looking for ways to incorporate it into my workflow. And now, after having used it for over 8 months in my day-to-day work, I wanted to share a quick primer for those who want to amp up CoffeeScript coding with Sublime Text too.
Why PPKs “Stick with click” may not be the best advice in all situations.
I recently heard a talk from Peter-Paul Koch of
QuirksMode on the touch events in mobile at the
orbitz.com office in Chicago. During his presentation PPK gave us a great sound bite to use when dealing with the 300ms delay many touch devices use for capturing double-tap (zoom) events:
Stick with click.
Under stick with click devs are discouraged from hijacking ontouchstart to make click events occur without noticeable delay. And though a good rule of thumb I view it as more of a best practice than a hard-and-fast rule.
Video from Paul Irish on developer accordances in Chrome Dev tools.
Here’s the presentation given at Google I/O this year by Paul Irish and Pavel Feldman that got me to switch to Chrome Developer Tools promptly after watching. If you’re a front-end web developer and haven’t seen this yet take a look. It just may change the way you work.
The user agent string, a piece of data transmitted in the HTTP header during a web request, contains information valuable in determining browser type and often basic system information.
Example user agent string sent from a web browser during an HTTP request:
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/184.108.40.206 Safari/532.5
The above example, for instance, provides information such as browser and browser version, user locale (language), OS, system architecture and the layout engine used. When authoring documents for the Web, information from the user agent string can be valuable in determining how best to mark-up documents.