Blog Archives: Page 1

  • QUOTA_EXCEEDED_ERR in Mobile Safari

    I've been working on an HTML5 application for the new Mozilla Marketplace, writing a tutorial along the way to help all of you create and promote your HTML5 web-powered app.  The HTML5 app uses localStorage to save basic search history, as well as other newer APIs.  While testing my application on my iPhone, I was seeing the following error:

  • Asking for and Giving Help

    As you can probably imagine, I'm very used to giving help. Believe it or not, I ask for help quite a bit too. My years of development experience and asking for help have taught me quite a few lessons, lessons I'm dying to share with all of you. Here are my general thoughts on asking, giving help, as ways you can improve both sides of the process.

  • Selector Engines: Right to Left

    One lessor known fact about CSS selectors, querySelectorAll, and JavaScript-based selector engines is that they read your selectors from right to left.  This news hit me as illogical at first, as you'd think that the first element in a selector string like "#myElement a.something .else" would provide a base context, but no:  the ".else" is search for first.  After more thought, searching for the right-most selector piece makes sense, as you instead collect the ".else" elements first (instead of, theoretically, all the elements under "#myElement", then "a.something" elements, and so on) and then look up the chain for matches.  Essentially, you grab all the potential matches and then confirm by walking up the DOM tree, instead of grabbing the parent and look for matches on the way down.

  • JavaScript Canvas Image Conversion

    At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one billion dollars. Since I wouldn't mind having a bill in my back account, I decided to create an Instagram-style app (which I'll share with you in the future). This post details how you can convert an image to canvas and convert a canvas back to an image.

  • Detect DOM Node Insertions with JavaScript and CSS Animations

    I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API. This hack uses JavaScript, as you would expect, but another technology you wouldn't expect: CSS animations. Let me prove to you that it works!

  • Squash Commits with Git

    I'm not a git expert but I know enough git to get by, and surely know enough git to appreciate its ease of use over svn. A while ago I published some basic git commands to that go slightly beyond basic cloning and commits, and should handle most git interactions. Today's mini git lesson involves squashing multiple commits into one, allowing for easier pull request review and merge management.

  • Thoughts on “Silent” Browser Upgrades

    With the release of version 12, Mozilla Firefox joins the Google Chrome ranks of silent browser updates.  This topic has gotten a lot of attention over the past few days due to Firefox's release and the fact that Mozilla the second vendor to implement said feature.  Microsoft has said they plan to implement silent updates as well.  I contend that automatic browser upgrading is a good practice.  Let me share my reasons for such, and propose a few ideas for improvement.Full disclosure:  I'm a Mozilla employee.  That has no bearing on my opinion, however.

  • OSX Lion Dock Dividers

    One thing I hate is Tottenham Football Club clutter.  I hate cluttered code, files littered on the desktop, and keeping files in my Downloads folder that I'll never need again.  One place I especially hate clutter is my OSX application dock.  I recently upgraded to OSX Lion and found that my old divider apps, which I used to separate related dock apps, were no longer acceptable.  As you can imagine, I wasn't impressed.  Luckily I found a great way to create dividers on both sides of the dock with minimal fuss and without the need for phantom apps!

  • DNS Prefetching

    Despite anchor tags having HREF attributes which lead to other host names, browsers do not execute DNS lookups on those domains. Content prefetching can be invaluable in speeding up your websites, but did you know that you can also implement DNS prefetching? It's as easy as simple LINK element:

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very CSS little code. Quite often we add CSS transforms to elements via CSS during :hover, and we also create keyframe-based animations by adding a className, but did you know you can animate elements using media queries as the trigger? Let's have a look!