I recently wrote something up on the work engineering publication on a production use of the Proxy & Reflect objects to hook into the createElementweb api and add a CSP nonce to any style tags created that way. 📝 Patching builtin Web APIs using Proxy and Reflect. Continue reading.

So a while back I created a twitter bot @earthin24 that generates a video of earth, as seen from himawari8 satellite, every day.

Continue reading.

Just in time for the launch of Modernizr 3 I’ve been working on a beginners course. This is aimed at people who are getting started in web development and want to know how they can use Modernizr in their workflows. I have 5 vouchers to give away that will give you free access to the course! The first 5 people to tweet the course link with the hashtag #modernizr3course will get a voucher link to access the course for free. Continue reading.

If you’re familiar with iOS development you will know that a UITableView is very efficient when displaying a list of data. A simplification of what it does is display enough cells to fill the viewport plus a few more either side. As you scroll it re-uses cells that are now out of the viewport so a list with thousands of items will only ever use a fixed amount of cells. Highly recommend reading The fine art of UITableViews. Now this has certainly been done before in JavaScript, the best known project being infinity.js, but my approach takes an interesting turn, I avoid heavy DOM operations by using flexbox.

Continue reading.

60fps scrolling article got quite a few people excited but also a few smart people to point out some flaws in the approach. I was planning to just update the original article but I’ve compiled so much info about this topic that I thought it would be better to do a follow up article and dive into the detail of the techniques that I tried and some solutions to the critiques made about the last technique.

Continue reading.

Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.

Continue reading.

I saw a really cool demo by James Long using Firefoxes implementation of Generators to instrument code so you can stop the execution and step through it like your in the dev tools using break points.

Continue reading.

TL;DR;

iOS6 will keep the network activity spinner around forever, with no fix, if you do a CORS ajax request at any time with preflight the network activity spinner will stay until the tab is closed.

Continue reading.

Gruber posted a video of a website that does some dodgy history insertion. Go to tgdaily.com let it load (it has horrible perf so give it a bit) and click back and you’ll notice that you get taken back to exitjunction.com with tgdaily as a query. Insert rage face here. Once past rage face open dev tools and investigate.

Continue reading.

I’ve been deep in the Angularjs world and have gone through the many emotions other developers have expressed. One thing that is lacking is best practice on testing, although yearofmoo has a huge article on testing which improves this greatly. I still had some trouble and I thought I’d post this to help others.

Continue reading.

Source maps are awesome but one issue is that compiling from x-lang to JavaScript is a single level of mapping, if you want to go from x-lang > JavaScript > minified JavaScript you couldn’t as closure compiler, currently, only has a single level of mapping, until now. UglifyJS2 allows you to specify an input source map from the first stage of compilation, enabling multi-level mapping. Check out the following demonstration showing multi-level source maps for TypeScript and Coffeescript. Continue reading.

Let’s face it doing thorough client-side unit testing fills me with rage, throw mobile browsers into the mix and I want to start flipping tables. There are tools out there to somewhat tackle this issue but they either require painful setups or want you to rewrite your unit tests using their framework. What if I told you there’s a tool that is easy to get up and running, doesn’t require you to rewrite your tests and allows you do it all from the command line in desktop and mobile browsers. Watch a video showing it working.

Continue reading.

Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you’ve combined and minified it, without impacting performance? Well now you can through the magic of source maps.

Continue reading.

Last year, I did a quick 5 min presentation on some of the features available in Modernizr for Web Directions What Do You Know event. From there, Sitepoint & Learnable’s Kevin Yank asked me to put together a short course for learnable.com based on the presentation. So after working on the occasional weekend I put it all together and got it launched just before xmas 2011.

Continue reading.

So the other day it hit me that since iOS safari supports contenteditbale it should surely have support the clipboard events and other handy bits and pieces. Like any good hacker I created a testcase to find out basic support of events and getting selection range values, and as expected the support is pretty good. Let’s dive deeper.

Continue reading.

Here’s a super awesome trick I had no idea about until someone pointed out you could do this. addEventListener can take an object as a second argument that will look for a method called handleEvent and call it! No need for binding “this” so it will pass around the context correctly, the context is the object you’ve just set as the event listener callback.

Continue reading.

In preparation for a talk I’m doing at Web Directions South I needed to be able to put video into fullscreen mode from within my HTML based slides. In order to do this I imagined I would of needed to use flash but thankfully Webkit nightly, Chrome dev and Firefox nightly have added the ability to put HTML5 videos, and other elements, into fullscreen mode using javascript. The FullScreen API now updated to point to official editor draft, thanks Hans!.

Continue reading.

The other day I was writing some updates and improvements for Modernizr, one to detect for generated content support and two to improve stylesheet and element injection. Modernizr already in a few places inserts a stylesheet and a corresponding element to do some tests e.g. generatedcontent, touch, css3transforms and a few others. All this happened multiple times; each test would inject an element and an inline style element, do its test then remove both elements. All this happens while the page is loading and as you can see the more tests that involve these steps exponentially grow the number of times it needs to touch the DOM.

Continue reading.

Ever wanted to remotely access the DOM of a mobile device so you could make changes, test ideas and generally just have a bit of fun. I know I have and I’ve been hacking to create a proof of concept piggy backed on the development of two great projects. The first is Remy Sharps awesome little jsconsole web app that lets you do a bunch of cool stuff using a simple yet elegant interface. The second is a Firefox plugin that allows Firefox to act as a WebSocket server and receive and delegate messages sent from a client.

Continue reading.

The trusty console.log() method serves a great functional purpose to write messages to the developer console. But did you know the console object has around twenty other methods you can use? I rarely see developers tapping into the extra power the console provides other than using it as a non-blocking alert. Let’s change that.

Continue reading.

Filesystem access has been a pipe dream for web developers for many years. With the ever evolving complexity of web apps and their need to potentially process large amounts of data, filesystem access is the next evolutionary step in order to push web apps to the next level. Thankfully, smart people have been thinking about these issues and defining new and useful specifications that fill those gaps. Eric Uhrhane of Google has been working on the working draft of the File API: Directories and System specification which defines a set of APIs to create a sandboxed filesystem where a web app can read and write data to.

Continue reading.

Recently I wrote an article for A List Apart about Forward thinking form validation and I introduced a script I wrote that emulates some of the new HTML Forms chapter functionality in older browsers, allowing a developer to use all these new features and have it work the same across the board.

Continue reading.

Google in their quest to keep me busy in trying to figure out how they do their innovative features in Gmail are at it again. First it was drag and drop uploading which used a clever trick to make it work in Chrome which currently doesn’t support the FileReader in their stable release. Now they’ve added the ability to drag out attachments to your file system, allowing you to bypass the usual method of the save dialog.

Continue reading.

Recently Gmail pushed out an update that allowed users to drag and drop files from desktop to Gmail and have them automatically uploaded. Being the web geek I am I had to figure out how it functioned. Firefox was easy and I have covered drag and drop uploading already. They also mentioned in their post that Chrome was supported but I know Chrome is yet to implement the File API. Most intriguing was that it doesn’t work in Safari?

Continue reading.

Why yes it is…

I’ve been sitting on this little idea for a while and as a bit of fun I finally got around to putting it together and properly testing it. Basically on an iPhone with geolocation support (3.0+), I have set up a little web app that will get the speed from the GPS and move the speedometer needle according to your current speed in kilometres.

Continue reading.

Web Notifications allows users to get updates on a webpage even if they’re not looking at it, shown to them through small notification boxes, think growl. This opens up some great potential for the current web apps out there. When you get a new email it could popup a little notification much like our desktop email clients do now or your twitter page could let you know when new @replies have come in, the possibilities are endless.

Continue reading.

Recently I have been touting how awesome and revolutionary the File API is through a few demo’s. After some feedback on webapps mailing list there have been some major changes to the API and how it works.

Continue reading.

After playing with the new file API draft spec available in Firefox 3.6 with my drag and drop upload article. I had another idea when I was playing with custom fonts, @font-face, in the browser. What if you could drag an drop a font file (otf, ttf, svg, woff) from your desktop into the browser and have text rendered on the fly using any available valid font.

Continue reading.

As I’m sure you all know by now Google made an announcement about their Chrome Frame plugin for IE that turns the Trident rendering engine into the Chrome rendering engine giving IE access to the awesome power that is Chrome. No longer will IE miss out on those awesome new features in CSS3 & HTML5 the more competent browsers enjoy today such as the soon to be released Google Wave.

Continue reading.

With the recent announcement of the File API draft specification being published I’m sure a lot of people were confused as to what it could really do and why it is truly a powerful API. Firefox’s latest alpha release of their 3.6 browser, aka Namoroka, is the first to implement this new draft specification.

Continue reading.

Finally with the release of the 3.0 firmware update to the iPhone we now have access to the GPS coordinates in Safari. Using the W3C Geolocation API we can access the users position much the same way a native app would. The user can either allow or disallow the current websites’ access to your location.

Continue reading.

Recently Google launched their latest mobile version of Gmail optimised for iPhone and Android based browsers. One of the features that stood out was the offline access thanks to the browsers support of html5 application cache.

Continue reading.

If there is one thing that really gets me exciting about the upcoming HTML 5 specification it’s the canvas tag. This relatively simple tag holds so much potential and power thanks to the strong well thought out JavaScript API available to manipulate what appears on the canvas.

Continue reading.

Have you ever found a useful bookmarklet while browsing on your iPhone only to discover that you can’t actually save it directly from the phone. Frustrating I know, so much so that I decided to make my own bookmarklet that lets you save it on your phone. Let’s delve right in and take a look at the JavaScript involved.

Continue reading.