Category Archives: JavaScript

Remote Debugging with Chrome for Android [video + tut]

Posted on February 13, 2012 by wesbos

Be sure to Follow @wesbos on twitter for more like this

Earlier this week Chrome for Android was finally announced and web developers everywhere celebrated. Not only did we have one of the best browsers now on our phones, but we had access to remote debugging, which we have been waiting for and talking about forever.

Remote debugging allows a developer to use the browsers developer tools from a desktop computer while inspecting and manipulating the website on the mobile device – all in real time! This means you no longer have to use alert boxes to debug a problem that only reproduces on the phone.

So, while there have been a few earlier implementations of something similar, Chrome for android brings us the rock solid experience that we have been waiting for. Without further ado, here is a quick tutorial on how to get remote debugging up and running.

Update: I’d like to specifically point out that Opera Mobile has has this functionality for quite some time now and you’re able to do it without USB or a SDK (miketaylr had an awesome presentation on it at jQuer conf). So, develop in whatever browser you prefer and use both these tools when you’re debugging that specific mobile browser.
Continue reading →

Sublime Text 2 Build System Scripts: CoffeeScript & Node

Posted on September 28, 2011 by wesbos

A really great feature of Sublime Text 2 is the ability to create your own build scripts. A build script is helpful when you are writing in a language that needs to be compiled or executed from terminal / command line. I personally use build scripts to compile the current file into CoffeeScript as well as run the current file in Node JS.

Watch the tutorial or continue reading to learn how to make Sublime Text 2 build scripts.
Continue reading →

JavaScript Face Detection + Canvas + Video = HTML5 Glasses!

Posted on September 26, 2011 by wesbos

This morning I saw this link on youtube which was a little mashup of some HTML5 technologies. I thought it would be funny if I could do the same, but with goofy pair of glasses. I’ve also been itching to put the CCV JavaScript Face Detection library to use. This library shows a few examples on static images, but after a quick look at the code, it shows that the underlying element to the script is a canvas element. So instead of running it on a single image, I am running it on a feed of frames coming from an HTML5 video element.

I’ll go into the technical details further on in the post, but here is a demo as well as a youtube video showing the effect as it can be a little sluggish on older machines. Currently tested and working in Google Chrome 14 and Firefox 6.0. Continue reading →

Growl notifications for the Node.js CoffeeScript complier

Posted on July 19, 2011 by wesbos

Two things I’ve been working with lately have been Node.js and CoffeeScript. If you haven’t heard of either, Node.js is server side javascript and CoffeeScript is a ruby/python like langage that compiles down to regular javascript.

The way I develop my CoffeeScript is by using the Node.js compiler to watch my `scripts.coffee` for any changes and compile it into normal JavaScript every time I save my file. The process is instant, but I need to watch my terminal window to see if there were any compiling errors. As you can imagine, this can get fairly annoying especially if you aren’t on dual monitors.

So, my solution was to write a Node.js module that would send a growl notification to the user when the compile was finished. I made use of the growlnotify command line plugin for OSX.

To use, you need to first install growlnotify.

Then use NPM to install the package `npm install coffeescript-growl`

Finally, require (with -r or –require) the module when you compile your script. I like to use something like this:

`coffee -r coffeescript-growl –watch –compile ~/sites/my_project/scripts.coffee`

Thats it! If you have any suggestions or fixes, please fork me on github and follow me on twitter.

Link within a jQuery Cycle slideshow with the hashchange event

Posted on May 17, 2011 by wesbos

Two of my favorite jQuery plugins are Mike Alsup’s Cycle and Ben Alman’s Hashchange. Cycle allows you to create really flexible sliders /slideshows and Hashchange allows you to create an event that triggers on hash change. When you’re using jQuery cycle for a large slideshow, its a good idea to let users link within that slideshow to a specific slide so that they can share and bookmark them.

A great example of this is for a photographer that may have 50 pictures in their portfolio, they often do not let you share the link to that specific picture but rather just the page with the slideshow embedded in it. Additionally, the user can now use the browsers back/forward buttons to navigate through your slideshow Continue reading →

Get All Angry Birds Levels in Chrome HTML5 Version with a quick hack

Posted on May 11, 2011 by wesbos

Just about an hour ago Rovio and Chrome released Angry Birds for Chrome. As a JavaScript / HTML5 guy, I quickly jumped into the code to see how things worked.

I was quickly able to find a hack that gave me access to all the levels, even the special Chrome levels! So to get access to all levels in Chrome Angry Birds, just copy and paste the following line into your browser’s address bar.

Continue reading →

Wes Bos

Designer, Developer & Entrepreneur making the web an awesome place.