Andrew Mason › Comments

This charming, easy Jubilee cake recipe will be the talk of any street party. Equipment and preparation: You will need two lengths of doweling rod, assorted ribbon and thread, and an electric mixer. - Andrew Mason

This specification defines an interface for web applications to access timing information related to navigation and elements. - Andrew Mason

Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation. I used Chrome's Timeline tab to see the duration of paint events on the page. Before each test I forced a garbage collection and scrolled to the same window position using window.scroll(0, 140). Then I clicked the down arrow in the scroll bar twice, a 40px-scroll per click, and recorded the paint times. - Andrew Mason

If you've been using requestAnimationFrame you've enjoyed seeing your paints synchronized to the refresh rate of the screen, resulting in the most high-fidelity animations possible. Plus, you're saving your users CPU fan noise and battery-power when they switch to another tab. There is about to be a change to part of the API, however. The Timestamp that is passed into your callback function is changing from a typical Date.now()-like timestamp to a high-resolution measurement of floating point milliseconds since the page was opened. If you use this value, you will need to update your code, based on the explanation below. - Andrew Mason

To clarify, I’m looking for a decent regular expression to validate URLs with. I have no interest in parsing a list of URLs from a given string of text (even though some of the regexes on this page are capable of doing that). Assume that this regex will be used for a public URL shortener written in PHP, so URLs like http://localhost/, //foo.bar/, ://foo.bar/, data:text/plain;charset=utf-8,OHAI and tel:+1234567890 shouldn’t pass (even though they’re technically valid). Also, in this case I only want to allow the HTTP, HTTPS and FTP protocols. Also, single weird leading and/or trailing characters aren’t tested for. Just imagine you’re doing this before testing $url with the regex: - Andrew Mason

One of the best exercises for you, whether you’re trying to build muscle or lose weight (or both) HAS to be the squat. However, it’s also one of the most difficult exercises to do properly unless you actually know what you’re doing. Let’s take a look at why this exercise is so great, and then how to perform it properly for maximum results and minimal chance of injury. - Andrew Mason

Fun little video game - Andrew Mason

ns had been blocked preventing its extension. Or the battery ran down with the lens extended. Believe it or not, one BIG contributor to lens errors is using a camera case. Sand, gunk, case fibers, etc... acc - Andrew Mason

In our last post we announced Octicons, our new icon font. We put a lot of work into the font and gained a lot of knowledge in the process. With five different designers working to make it happen, this was one of our bigger collaborations. We thought we'd detail how we built Octicons and what we learned along the way. - Andrew Mason

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it. - Andrew Mason

When working with Rich Internet Applications, we write JavaScript that updates the page by changing elements or adding new ones. This is done by working with the DOM, or Document Object Model, and how we do this can affect the speed of our applications. Working with the DOM can cause browser reflow, which is the browser's process of determining how things should be displayed. Directly manipulating the DOM, changing CSS styles of elements, and resizing the browser window can all trigger a reflow. Accessing an element's layout properties such as offsetHeight and offsetWidth can also trigger a reflow. Because each reflow takes time, the more we can minimise browser reflow, the faster our applications will be. When working with the DOM we either manipulate existing elements on the page or generate new ones. The four patterns below cover both DOM manipulation and DOM generation and help reduce the amount of reflows triggered in the browser. - Andrew Mason

I’ve got a piece in tomorrow’s G2 on what happened when I did everything the internet told me for a day. In writing it, I came across lots of interesting/troubling articles on how the web is, well, turning. Here’s a handful of snippets… - Andrew Mason

A little over two years ago, I left Google. In my farewell blog post, I noted: "One of the many things Google has taught me is that building simple things is often extremely complicated and [Google Tasks] was no exception. (I think I've spent at least one man-month trying to figure out the best way for the cursor to move up and down between tasks, but that's a topic for another post.)" Somehow, my blog post made it onto Reddit where some disgruntled group of people modded down my post because they were hoping to hear more about this whole cursoring thing. Fast-forward to today where a little company named Asana has decided to take a stab at task management software. Now, I still use Google Tasks heavily, and even though the Tasks community has loudly and clearly expressed its desire to share task lists, Google has failed to come through. Finding myself in need of a shared task list, I decided to give Asana a try. - Andrew Mason

Media queries are awesome, a godsend for website developers that want to make small tweaks to their stylesheets to give a better experience for users on devices of various sizes. Media queries essentially let you customize the CSS of your site depending on screen size. Before you dive into this article, learn more about responsive design and check out some fine examples of media queries usage here: mediaqueri.es. As Brad Frost points out in an earlier article, changing the look is only one of many things to consider when building for the mobile web. If the only thing you do when you build your mobile website is customize your layout with media queries, then we have the following situation: All devices get the same JavaScript, CSS, and assets (images, videos), resulting in longer than necessary load times. All devices get the same initial DOM, potentially forcing developers to write overly complicated CSS. Little flexibility to specify custom interactions tailored to each device. - Andrew Mason

Many front-end web developers make use of the wonderful browser consoles that have matured in the past few years. While the tried-and-true console.log() often does the trick, its lack of support (particularly in IE) has led to the use of proxy functions, such as Paul Irish’s console.log wrapper and Ben Alman’s Debug() which prevent unsupportive browsers from throwing errors. I had a need for logging data in every browser, not just ones that natively support console.log(). So I forked Paul’s function and expanded it to work with every browser I could test — IE6+, Firefox 3.6-4, Chrome 10-11, Safari 5, and Opera 11. - Andrew Mason

Backbone.js is a framework that lets us structure our applications using a pattern similiar to MVC (technically Backbone is not pure MVC as the C stands for "Collection"). However, Backbone is a powerful system to use when creating apps that are beyond very basic. When passing & manipulating a lot of data, you should consider using something like Backbone. Since launching this blog I've had a lot of people ask me about Backbone. Although there are a lot of very good resources out there, I have struggled to get to grips with it myself and from the requests I've had I'd suggest a lot of others have too. So, I sat down to create a sample application with Backbone, and in this tutorial - which will span at least 3 parts - we will create a very simplified shopping cart application, with Backbone. As always the source will be on Github and is linked to at the end of this post. - Andrew Mason

I’ve been working with git a lot lately, though I admit, still at a basic level.  Though I enjoy git a great deal more than SVN, the problem with git is its lack of friendliness in the command line.  The commands are too long to type, you never know which branch you’re currently on, commits and merges are sometimes mistakenly done in the wrong place, feature branches are hard trace from where they originated, diffs are hard to read, history graphs are too verbose… - Andrew Mason

Vintage gamers, near 25 years after its arcade release, Easter Egg is proud to announce to you that R-Type is finally back for your Amstrad / Schneider CPC 128K. Yes, CPC like Colour Personal Computer, no more like Crappy Port Compomise... So, don’t miss your last chance to blast off and strike the evil Bydo empire! READY - Andrew Mason

HTML5 is here, and the Web will never be the same. You’ve no doubt heard that before, or something like it. I’d guess that when you did, you got excited, rolled your eyes, or mouthed the word “why?” and furrowed your brow a bit. Perhaps your reaction was a mix of all three. I wouldn’t blame you for any of these. HTML5 is exciting, and it does have the potential to change the Web as we know it, but it also gets blown out of proportion. What’s more, its true meaning can be elusive. I’ve experienced each of those reactions myself while building applications with HTML5. It’s a broad topic, so it’s difficult to wrap your head around HTML5, much less know where to begin with this exciting new set of technologies. - Andrew Mason

HTML5 introduced many storage APIs that let you store a large amount of data locally in your users' browsers. But the amount of space allocated for each app is, by default, restricted to a few megabytes. Google Chrome lets you ask for a larger storage quota, beyond the previous limit of just 5 MB. This document introduces you to the basic concepts around the types of storage used in Chrome and describes the experimental Quota Management API, which lets you manage your storage quota. The document assumes that you are already familiar with the general concepts of client-side storage and know how to use offline APIs. - Andrew Mason

Debugging JavaSvript - Andrew Mason

This document summarizes the results of some browser tests done while attempting to implement key stroke handling code in JavaScript. It documents inconsistancies in the way different browsers implement keyboard events. The tests were originally done with the intention of learning just enough to write the code I needed to write. Coverage has expanded considerably since then, but the results here still are not comprehensive or authoritative and do not cover all aspects of keyboard event handling. - Andrew Mason

The previous post described motherboards and the memory map in Intel computers to set the scene for the initial phases of boot. Booting is an involved, hacky, multi-stage affair – fun stuff. Here’s an outline of the process: - Andrew Mason

This post has been heavily commented and linked to over the years, and continues to receive a ton of traffic, so I should make it clear that much of this is no longer relevant for modern browsers. On the one hand, they have adjusted and tightened up their security policies, making some of the techniques here no longer relevant. On the other hand, they have introduced technologies that make it easier to do cross-domain communication in the first place. - Andrew Mason

Let's keep this short. Too few websites log JavaScript errors. Let's build a simple system to track client-side errors. First, we'll create a logError method in JavaScript: - Andrew Mason

All firefox releases. - Andrew Mason

A* Search / Pathfinding Algorithm in Javascript - Andrew Mason

Font hinting (also known as instructing) is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid, such as the pixel grid in a display. Fonts will not line up correctly without hinting until displays have 300 DPI or greater. Two types of hinting are available. Byte-Code Interpreter (BCI) Using normal hinting, TrueType hinting instructions in the font are interpreted by freetype's Byte-Code Interpreter. This works best for fonts with good hinting instructions. To enable normal hinting: - Andrew Mason

After a recent tour through Gnome3, KDE and Unity my font anti-aliasing in XFCE4 has changed in a subtle way (not sure if it was any of the DEs that changed the setting or any of the dependencies that got install when installing the DEs): The font, Verdana 8, looks almost exactly the same, except in the old one subpixels where used to make the lines a little wider in the new one they are just one-pixel. Which setting does cause this effect and how can I set it back? It's neither the hinting nor the subpixel ordering, which are the only settings reachable from XFCE4. - Andrew Mason

This page shows text rendering with various types of lcd filtering parameters. The pango-view util from Pango was used to generate the images. Cairo is patched with the lcd filtering patch (https://bugs.freedesktop.org/show_bu...) and a modification to read lcd filtering parameters from fontconfig. Source for the hack script to generate this page You must have a LCD screen with RGB pixel order, otherwise the images won't make sense. First part of the page is done with the bytecode interpreter turned on and the second part with the autohinter. - Andrew Mason