Tutorial Topics

.htaccess (38)

3D Animations (8)

  • By
    Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn't matter whether they're functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they're artistic representation pushing the limits of...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    How Nesting 3D Transformed Elements Works

    CSS animations are incredibly popular right now, and I don't just mean animating a simple color or dimension property, I mean 3D transformations as well; CSS flips and rotating cubes being prime examples. We can find simple CSS snippets and examples for transforms, but...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Create a 3D Animating Sidebar

    Mozilla's Christian Heilmann is an evangelist that knows how to walk the walk as well as talk the talk.  You'll often see him creating sweet demos on his blog or the awesome Mozilla Hacks blog.  One of my favorite pieces...

AJAX (68)

  • By
    async & await

    JavaScript promises were a revelation in JavaScript, providing an alternative to the JavaScript callback hell we'd quickly found ourselves in.  Promises also allowed us to introduce and better handle asynchronous tasks.  While promises were an improvement over callback hell, they still require lots of thens...

  • By
    Create a Basic Loader with JavaScript Promises

    I've used JavaScript loaders for years; whether it was the Dojo loader, curl.js, or even using jQuery as a JavaScript loader, it's incredibly useful to request a set of resources and react once they've completed loading.  Each JavaScript loader is feature-packed, efficient, and does a wonderful job...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    Basic AJAX Request: XMLHttpRequest

    There are a number of common front-end tasks that many of us never touched the deep, dirty APIs for because our beloved JavaScript frameworks have provided easier ways to work with them.  That's why I wrote How JavaScript Event Delegation WorksDo a Basic HTTP Request with...

  • By
    Get Bitcoin Value with curl or Node.js

    Last year I started dabbling in bitcoin.  Of course I was immediately cocky as bitcoin value went up 20% as soon as I bought it, then was humbled as bitcoin's value tumbled down 50%.  From boathouse to outhouse.  From caviar to ramen noodles.  It was brutal. Anyways, I was...

Apache / Server (23)

  • By
    How to Create and Manage CRON Jobs

    Interval or scheduled task execution is used all over computer science, the most obvious use case being transaction batching.  For web developers like myself, the most obvious use case is executing CRON jobs for this blog, including polling for scheduled blog post publishing and a variety...

  • By
    Limit Download Speed with Apache

    My adventures into retro gaming have brought me back into the semi-seedy world of piracy websites and the technology considerations that dictate their business model.  Annoying popups and pornographic advertisements aside, the most obvious technological observation I made was that each of these sites used bandwidth...

  • By
    How to Make Email a Powerful Part of Your Web Application

    Giving your customers a way to access your application from their email account is a major way to boost their activity and engagement on your website. One of my favorite popular productivity tools, iDoneThis, gives me a simple way to record and share the...

  • By
    Check GZip Encoding with curl

    Last week I detailed how I enabled gzip encoding on nginx servers, the same server software I use on this site.  Enabling gzip on your server exponentially improves the site load time, thus improving user experience and (hopefully) Google page ranks.  I implemented said strategy and used...

  • By
    Serve SVG as an Image on Apache with .htaccess

    I've been a massive fan of SVG since my days creating charts and animations with the Dojo Toolkit.  SVG has been around forever, it even has IE support now, and it's ultra-flexible.  When creating this site's redesign, I used SVG within an IMG tag and...

APIs (53)

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Change Mac App Icons

    If you follow me on Twitter, you know that I recently got a new MacBook Pro.  Setting up a new machine is a pornographic euphoric experience:  no app collisions, optimal performance, and a fresh canvas to work with.  The first step is setting up your...

  • By
    Using Font Awesome Icons without <i> Tags

    If you've not used glyph icon libraries like Font Awesome before, you're really missing out.  They're incredibly useful, flexible, and are easy to implement via markup.  The normal method for using font awesome is by using an <i> element with an icon-specific CSS class: This...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    Prism Line Number Plugin

    The Mozilla Developer Network (MDN) is in the midst of a remodel (sorry for the spoiler) and we've been implementing features incrementally.  One larger front-end change we'll be implementing is using the PrismJS for document code syntax highlighting.  One requirement of MDN's syntax highlighter...

Blog (101)

  • By
    Hello DevTools!

    When I was a 17 year old noob, going to technical college in my home town, I was introduced to a browser called Firebird, which would later be renamed Firefox.  I was immediately drawn to this new browser; Firebird was fresh, exuded excitement, but most of...

  • By
    Goals for 2018

    Every turn of the year is a new opportunity to start over, set goals, and renew optimism that time can heal wounds and drive us to change and achieve.  For me 2018 is my most important year in a long time; 2018 needs to serve as...

  • By
    10 Years

    A full decade ago I was a rookie web developer at a small web shop in Madison, Wisconsin.  When I left college, all I knew was CSS layouts and confirmation boxes.  In short:  I was as green as could be, much greener that kids coming out...

  • By
    Welcome to My Office

    For many developers their office is their home away from home -- hell, some developers are at that office more often than they're at home.  For that reason most of us take great pride in our offices, keeping them as tidy (...or not) as we'd like and injecting as...

  • By
    Stylish, Secure Forms with Wufoo

    I've said consistently over my entire professional career that I absolutely hate working with web forms.  Forms have always been a pain to style, you usually have to write server-side and client-side logic, you need to write spam prevention logic, there's security (especially if you take payment) and XSS prevention...

Bookmarking / Social (17)

  • By
    How to Create a Twitter Bot with Node.js

    Twitter bots have been in the news over the past few years due to election meddling, not only in the United States but stretching across the globe.  There are, however, good and logical reasons for creating Twitter bots.  In order to see how easy it was...

  • By
    Social Sharing Links without Widgets

    Social sharing sites like Facebook, Twitter, and Google Plus are essential for people who blog like myself.  Why write about something you're passionate about if no one can find the article (purposely or by chance?)  People share enough of your posts and you get noticed and get...

  • By
    Tweet from Command Line with t

    I've been obsessed with command line magic lately, as you may have noticed.  I don't plan on using every utility I've written about but I'm having fun learning about what's out there and how it's done.  My latest quandary was how one could tweet and perform other Twitter-centric tasks...

  • By
    Retrieve Twitter and Facebook Counts with JSONP

    I've been annoyed that many popular APIs have moved to require authentication in order to retrieve information.  If I can browse a page and get said information, why can't I simply pull it with some simple code and skip the authentication bit?  I had thought that...

  • By
    Xbox Live Gamer API

    My sharpshooter status aside, I've always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I'd like to publicly shame every n00b I've baptized with my...

Books (10)

  • By
    Web Animation using JavaScript:  Animating Text
  • By
    Performance Cops and Janitors

    Performance improvements often begin as one person's voice within a company culture. You start to notice how other sites are making optimizations and improving their user experience through tweaks to perceived performance or total page load time. Then you start measuring how your competitors' sites...

  • By
    Smashing Deal:  6 Smashing Books for Web Designers

    The longer we do our Web Development jobs, the more we realize we need to know more, we need to be more proficient at more.  I feel great about my CSS/HTML/JavaScript skills, but I'd give my left arm to be better at designing graphics with...

  • By
    JavaScript Enlightenment by Cody Lindley

    JavaScript Guru Douglas Crockford famously said "JavaScript is the only language people feel like they don't need to learn to use." A quote that will surely provide a laugh, but it's funny because it's true. What furthers this sentiment is that JavaScript frameworks like jQuery have...

  • By
    Pro JavaScript with MooTools by Mark Obcena

    With Christmas almost upon us, I wanted to throw a gift idea out there to everyone.  MooTools Contributor Mark Obcena (keeto) has just finished writing his MooTools book:  Pro JavaScript with MooTools.  As you would expect, this book covers not just the basics of MooTools...

Browsers (91)

  • By
    Create a Simple Web Extension

    Much like multimedia support in the browser, we initially did browser add-ons all wrong.  For years each browser had its own language and method for installing add-ons, leading to security exploits, performance problems, painful maintenance for developers, and frustrating user experiences.  Today we have the Web Extension API...

  • By
    Convert Websites to Apps

    Converting a website to a native app, whether on mobile or desktop, can be quite useful.  The problem with bookmarks, especially for software engineers, is that we often need to work in different browsers, so having everything in one browser's bookmark set can be a pain.  I'd also argue that websites with...

  • By
    Create WebPage Screenshots with Node.js and SlimerJS

    Last week I featured PhantomJS, a headless WebKit tool, which allows for taking screenshots, automating events on the page, and so on.  PhantomJS is an excellent tool that does so much but being locked into the WebKit engine doesn't help if you want to test other rendering engines like...

  • By
    Set Chrome as Default Browser from Command Line

    Whenever I see a desktop GUI to accomplish a given web-related task, I'm dying to know the underlying operating system interaction to accomplish the same feat.  Many of the GUIs I use are just a front for a command line utility for that more experienced developers would use. I set...

  • By
    5 More Awesome New Mozilla Technologies Youâve Never Heard Of

    My original 5 Awesome Mozilla Technologies You've Never Heard Of post got a huge response and it was well deserved -- Mozilla's pool of amazing talent not only dreams up awesome projects but brings them to fruition.  A few years have gone by and we've seen...

Canvas & SVG (37)

  • By
    5 Crucial Concepts for Learning d3.js and How to Understand Them

    You may have already heard about d3.js, the dazzling JavaScript library that lets you create beautiful charts and graphics with just a few lines of code. You might have seen some of the fantastic examples of D3 in action, or you may have heard that...

  • By
    Building Animated SVG Banners

    I've been reading David Walsh's blog for years. The tips and tutorials he shares have helped me fix a lot of problems. I love that I get to support him now by advertising TrackJS on his site. Plus, I get a chance to build...

  • By
    Canvas Filters

    Adding filters to images can make them more eye-catching and shareable -- just ask Instagram, Snapchat, Prism, and every other app out there.  A few years back we got the awesome CSS filters feature, allowing us to use a fixed set of filter methods to make our photos...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

  • By
    Mozilla, Web Virtual Reality, and A-Frame

    I was fortunate enough to make Game Developer Conference this year and the big story was virtual reality.  Hell, you couldn't go five feet without seeing someone pitching their VR hardware, software, or likewise technology.  They were all proprietary solutions, including Oculus, Epic Games, and so on.  You...

Comics (9)

  • By
    The Truth About Production Testing

    Testing on production environments is something you must do but really, really would prefer not to do, right?  You can do some incredible damage in a short amount of time if you aren't careful, and when things do run smoothly, you think to yourself "Why even take the...

  • By
    The Truth About CSS

    Whether you call yourself a "full stack engineer" or not, most of us fashion ourselves able to dabble on each side of a website infrastructure.  Of course the same people who fancy themselves as capable would probably also tell you they're much stronger on client or server sides.

  • By
    The Truth About Growing Up

    There's a harsh reality: we're "grown ups" these days. Every once in a while, however, I see an image that takes me back to my childhood. My childhood was full of sports and video games and I can't help but smile on those...

  • By
    The Truth About Programming Perception

    When I tell people that I'm a web programmer, they think I'm a genius.  When I tell them I work for the company that makes Firefox, they think I'm some sort of God.  I'd be willing to bet other developers out there get the same treatment.  And I don't...

  • By
    The Truth About Code Review II

    Code review is an essential but sometimes funny part of creating an awesome product or open source project. Of course your project has standards and the developers are all relatively professional, but sometimes developers still don't quite believe in the same coding styles and methodologies.

Cryptocurrency (6)

  • By
    Realtime Cryptocurrency Rates API with coinlayer

    Last year when cryptocurrencies were gaining massively in value each month, I badly wanted to create a personal web project which would let me quickly buy and sell crypto outside of brokers like Coinbase; the problem I ran into was not having a reliable API...

  • By
    How to Recover Bitcoin Gold

    Every fork of Bitcoin brings uncertainty.  Uncertainty of value change, long term commitment of the fork, and how value may fluctuate over time.  For us Bitcoin owners, one of the big challenges if figuring out how to claim and recover the forked coin.  Remember that when...

  • By
    Mine Bitcoin and Monero in the Browser

    I recently heard this story from Buenos Aires where a Starbucks was caught was caught mining cryptocurrency on customer computers that were attempting to connect to free WiFi.  I also ran a Twitter poll recently asking if people would allow sites to mine cryptocurrency on...

  • By
    Manage Bitcoin with the Coinbase API

    One of my biggest recent regrets was not pouring money into bitcoin when Kim Dotcom said we should; this was approximately 18 months ago when the bitcoin value was $170.  Today bitcoin value has topped $1000 which is why I'm kicking myself so hard.  I buy my bitcoin...

  • By
    Get Ethereum Value from Command Line

    Last year I got big into Bitcoin; today I own a few dozen bitcoin and am loving my return.  Recently I've been hearing big things about Ethereum, another cryptocurrency.  Ethereum is in its infancy and has hit some troublesome times recently due to a hack but...

CSS (423)

  • By
    Responsive IFRAMEs

    Responsive web design revolutionized the web and spurred a movement away from native apps to web apps easily customizable for a mobile environment.  We use media queries and non-pixel-based dimensions to make responsive design easier; in fact, img { max-width: 100% } is one of my favorite...

  • By
    Create the Google Button Effect with CSS

    I always found Google's branding simple but grew to realize that was the beauty in their design; there's something about "just enough" that is the perfect balance between bland and over the top.  GMail's design grew old over the years and Google just got around to...

  • By
    8 Digit Hex Colors

    One of the most requested capabilities in my early days of web development was the ability to set opacity on elements and even PNG images without the need for browser-specific CSS or hacks.  Eventually we got native opacity support and even enjoyed rgba(), the ability...

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

  • By
    Creating Spacers with Flexbox

    I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly...

CSS Animations (46)

  • By
    Create the Google Button Effect with CSS

    I always found Google's branding simple but grew to realize that was the beauty in their design; there's something about "just enough" that is the perfect balance between bland and over the top.  GMail's design grew old over the years and Google just got around to...

  • By
    Simple Image Lazy Load and Fade

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just...

  • By
    GSAP + SVG for Power Users 2: Complex Responsive Animation

    This is the second article in a series about the GreenSock Animation API and SVG. This series isn't intended for beginners, but rather a deep dive into some of the more exciting and lesser-known features that one can work with after they've gotten past the initial...

  • By
    Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn't matter whether they're functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they're artistic representation pushing the limits of...

  • By
    Intro to JavaScript Animation

    Despite what many developers believe, CSS-based animation is not the only performant way to animate on the web. There's also JavaScript—and JS has some incredible advantages. By abandoning JavaScript for CSS, like many developers do, we are bloating our stylesheets, sacrificing animation timing control, and forgoing physics-based...

Demos (371)

Docker (4)

  • By
    Protect Sensitive Data in Docker

    Developing authentication code for open source repositories can be a scary task; you're scared that hackers can find loopholes in your code but you're also petrified of accidentally committing sensitive credentials to a public repository.  I've seen unintentional credential commits happen and the panic that ensues throughout an organization will...

  • By
    Fix Bash Error in Docker

    I really enjoy working with Docker because it gives me more insight into creating and maintaining your own environments, mostly from scratch.  I instantly gained a greater appreciation for Ops engineers, package creators, and other engineers who work on low level software.  I think what I'm trying to say is that...

  • By
    Respond to Prompt in Bash Script

    I work on a project that requires I frequently build and destroy a virtual machine.  I don't enjoy having to do so but virtual machines can be notoriously difficult to prop up, especially when you have a complex app living within it. Manually typing the same commands over...

  • By
    Docker: Remove All Images and Containers

    I've moved to a new project at Mozilla which uses a much different stack than I'm used to; suddenly I'm thrust into a world of Mercurial, Docker, and a few other technologies I'm not accustomed to.  You know what that leads to:  foul language, frustration, booze, and...lots of starting over.

Dojo (61)

  • By
    Observing Intersection Observers

    As developing for the web has matured and JavaScript engines have become faster, one area remains a significant bottleneck - rendering. It's because of this that so many of the recent development efforts have been focused around rendering, with virtual DOM being one of the more...

  • By
    Get Browser Information with Intern

    You know how you can't remember something your spouse feels is really important but you can remember every funny line from that movie you saw when you were 17?  That's how I feel after months of writing selenium tests using the Intern framework -- I've forgotten...

  • By
    Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • By
    Resize an Image Using Canvas, Drag and Drop and the File API

    Recently I was asked to create a user interface that allows someone to upload an image to a server (among other things) so that it could be used in the various web sites my company provides to its clients. Normally this would be an easy task—create a...

  • By
    Dojo DeferredList

    Deferreds are all the rage in the JavaScript community these days and who can argue?  Deferreds, an object representing an asynchronous action, make working with AJAX requests incredibly easy -- no callback hell, no problem passing request information around.  What if you want to work with...

Events (30)

Features (50)

  • By
    How to Create a RetroPie on Raspberry Pi &#8211; Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Firefox OS (21)

  • By
    Web Audio API

    The Web Audio API allows developers to load and decode audio on demand using JavaScript.  The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch.  The following is a very basic introduction to the WebAudio API...

  • By
    Spatial Navigation

    Spatial navigation is the ability to navigate to focusable elements based on their position in a given space.  Spatial navigation is a must when your site or app must respond to arrow keys, a perfect example being a television with directional pad remote.  Firefox OS TV apps are simply...

  • By
    Get Element Dimensions After CSS Transform

    I've been playing a lot with meta viewports recently due to seeing many HTML5 TV apps coded explicitly for 1280x720 which you'll see on many HD televisions.  We all know that it's a much better practice to use responsive design than hardcode dimensions but, that aside, meta...

  • By
    How to Test Firefox OS Apps on TV

    One of my responsibilities in my new role in Partner Engineering at Mozilla is testing HTML5-powered apps and games on Panasonic televisions.  The television in my office, a beautiful 60" 4K Ultra HD beast, is the perfect device for the job.  But how do I get the app...

  • By
    Geeksphone Peak Firefox OS Unboxing

    Any time you get a new device it's like instant Christmas.  Whether it's top of the line or bottom of the barrel, we're always excited to check out unique devices to see what we can learn, check out what apps are popular, and test the websites we...

Games (16)

git (36)

  • By
    Create gists from Command Line

    One of the best ways to gain contributors for your open source project is by providing a rough patch for the contributor to start from.  One of the best ways to ask for help is by providing what you have so far and letting a mentor...

  • By
    Search Git Commits Between Dates

    One of my weaknesses as a developer is relying on UIs to provide me the data I need.  It's not a fatal weakness but it does hamper me a bit.  One prime example is relying on GitHub's interface to review changes; git's command line provides the...

  • By
    Reset File Changes with git

    There are many different philosophies when it comes to code review but mine is fairly simple:  I like receiving early "work in progress" patches, I like to be positive in my code review messages, and if a patch is 90% there, I like to finish the...

  • By
    Set a Default Push Remote with git

    During my early days of git usage, my config allowed me to simply type git push instead of git push {origin} {branch_name} which I need to now.  Up until recently I needed to type out the long version...(I know)...which was incredibly annoying because I like using detailed branch...

  • By
    How to Delete a git Remote Branch

    Keeping a tidy repository is important; not just a tidy codebase, but a tidy repository in as far as not having spare branches rotting around.  Generally the main repository doesn't keep multiple branches but sometimes you need to push to a main repository simply to get Travis...

Giveaways (10)

Google (56)

  • By
    Create the Google Button Effect with CSS

    I always found Google's branding simple but grew to realize that was the beauty in their design; there's something about "just enough" that is the perfect balance between bland and over the top.  GMail's design grew old over the years and Google just got around to...

  • By
    Easy Document Signing with the Eversign Chrome Extension

    A while back I wrote about Eversign, an awesome service that allows you and your clients or partners to digitally sign documents online.  If you've recently bought a house or did any other large purchases or agreements, you know how important the ability to reliably...

  • By
    Custom, Embeddable Site Search with Swiftype

    As hard as we try to make our website navigation and content structure as logical as possible, a large percentage of users would prefer a simple search box to find what they need.  That being the case, we need to ensure that site search is as accurate and...

  • By
    Set Chrome as Default Browser from Command Line

    Whenever I see a desktop GUI to accomplish a given web-related task, I'm dying to know the underlying operating system interaction to accomplish the same feat.  Many of the GUIs I use are just a front for a command line utility for that more experienced developers would use. I set...

  • By
    Use Mozilla Firefox DevTools in Chrome

    I shared on Twitter last week that I do casual browsing in Google Chrome but do most of my development work in Firefox.  I can't give a great reason for doing so but Firefox has seemed like a development "security blanket" since I was in college (over a...

Guest Blogger (142)

  • By
    Create Custom Video Player Controls with CanJS

    In this guide, you will learn how to create a custom video player using the <video> element and CanJS. The custom video player will: Have custom play and pause buttons. Show the current time and duration of the video. Have a <input type="range"> slider that can adjust the position...

  • By
    The Dark Side of Promises

    Since the release of es6 many new features have found their way into NodeJS, but non had quite the same impact as promises. Promises have been developed for the browser before es6 was even a thing. There were several implementations that have been used like jQuery's...

  • By
    5 Crucial Concepts for Learning d3.js and How to Understand Them

    You may have already heard about d3.js, the dazzling JavaScript library that lets you create beautiful charts and graphics with just a few lines of code. You might have seen some of the fantastic examples of D3 in action, or you may have heard that...

  • By
    Using Storybook with Nuxt

    Nuxt.js has been a lot of fun to use in production web apps and side projects. It's simple, fast, and seems very in line with web standards when it comes to creating components, importing plugins, etc. Equally as exciting has been the rise of...

  • By
    Better Debugging with Conditional Breakpoints

    I love conditional breakpoints. Really! They're my favorite debugging tool. When I got started in web development, "debugging" for me meant creating a <pre id='log'></pre> and appending strings to its contents to act as a log. But once Firebug rolled around—and then when browsers started...

Hosting / Domain (16)

  • By
    500

    Over the past four or so months, I've been having a hell of a time with seeing 500 errors on my site.  And while I'm on my site a few hours a day, the amount of 500s my visitors must have seem is probably huge.  And that's...

  • By
    Enable GZIP Compression on nginx Servers

    Speed kills, and there's nothing like a speedy website.  When you come to this blog, I want you to have a great experience, which is why I've worked tirelessly to compress every asset and avoid unnecessary synchronous interactions.  In reviewing my site with Google Pagespeed...

  • By
    Hosting a Website on Amazon S3

    Everyone knows that Amazon S3 is great for storing files. It's fast, inexpensive, and easy to setup. What you may not realize is that you can also host static websites on this robust platform. What is a static website? In short, it's a website comprised of...

  • By
    Who I Use: Hosting &#038; Domain

    I get quite a few emails each day, but without a doubt, the most popular topic isn't support, recruiter, or request email; believe it or not, I'm most frequently asked who I use for my domain and hosting.  Can you blame people though?  Finding a good...

  • By
    Fix WordPress CRONs on Media Temple (dv) Servers

    When I switched from Dreamhost shared hosting to Media Temple (dv) server hosting, I had a hell of a time trying to figure out why CRONs weren't working correctly on the website. I had database backups being sent via CRON jobs so making sure CRONs...

HTML5 (56)

Interviews (6)

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    Interview with Roku&#8217;s Nowhere Man

    Chris Hagedorn works for Roku; opinions are all his own and don't reflect his employer. Introduce yourself; where you're from and your development background. I'm a desert rat. I grew up in Yuma, AZ, the sunniest place on earth and lettuce capital of the world. My father...

  • By
    A CodePen Interview with Chris Coyier

    One of my favorite sites has recently become CodePen. CodePen is an incredible showcase of what developers can do with CSS, JavaScript, and HTML; thousands of developers have shown pride in their work with each pen. I wanted to interview...

  • By
    Interview with John Hann, Creator of curl.js

    Hello John! For those who don't know you, give us a quick introduction and let us know what you're working on. Hi, I'm John. John Hann. "@unscriptable" on most of the interwebs. I've been writing Javascript since 1995. Like many, I wasn't...

  • By
    An Interview with jsFiddle Creator Piotr Zalewa

    One of the great code sharing tools was pastebin. It was simple and straight-forward but quickly grew out of its usefulness. That's where jsFiddle comes in. jsFiddle is a fresh tool that not only displays the code and highlights it but also executes...

JavaScript (499)

  • By
    React Emoji Picker

    When emojis first hit the web scene I rolled my eyes -- they seemed like a lame communication method for giggling kids.  After years more experience working remotely, managing open source communities, and communicating with people that may not get my sense of humor, I've realized...

  • By
    Replace Repeated Characters with JavaScript

    URLs can be tricky to work with because they can be more complicated than the traditional URL format you type in.  I was again reminded of this when I was parsing Webpack URLs when I saw this beauty: I parsed the URL with new URL("....") but saw that...

  • By
    Create gists from Command Line

    One of the best ways to gain contributors for your open source project is by providing a rough patch for the contributor to start from.  One of the best ways to ask for help is by providing what you have so far and letting a mentor...

  • By
    Get and Set Volume with JavaScript

    The <audio> and <video> tags provide a wealth more functionality than most people know. For instance, did you know that you could detect supported video formats and audio formats using a few JavaScript tricks?  It got me to thinking about the possibilities of detecting system volume...

  • By
    Array Destructuring

    Destructuring has become a major language feature in JavaScript, most prominently seen with imports, but also in function declarations and so on.  While object literals are the usual case for destructuring, remember that you can also destructure Arrays and Sets. Let's have a look at how...

jQuery (77)

  • By
    Update jQuery UI Widget Options

    We're all used to passing options when instantiating an object, whether it be JavaScript or any other language.  Whether or not you can update those options later is usually up to the framework, and somehow many wont let you update them once they've been passed in.  Depending...

  • By
    Inspect jQuery Element Events

    Building on top of other tools can be incredibly difficult, especially when you didn't create the other tool and you can't replace that tool.  And when those other tools create loads of event listeners, you sometimes see odd behavior within the page and have no idea what the...

  • By
    Elegant Selects with Quick[select]

    Form elements have always allowed limited styling...which is why I hate working on form display.  And I started when form elements were virtually unstylable back in the Internet Explorer 4 days.  Of course we've come a long way but there's one element which is still somewhat difficult to style and...

  • By
    iOS Mobile Safari Hover Menu Fix

    One component I'm quite proud of creating is the Mozilla Developer Network's dropdown menu component.  It's elegant, flexible, accessible via keyboard, and relatively compact (though it does require jQuery).  One problem I did notice, however, was that tapping once opened the menu (good) but you'd have...

  • By
    Unwrapping JSON-P

    This is a quickie simple post on JavaScript techniques. We're going to look at how to unwrap the "P" function-call padding from a JSON-P string to get the JSON from it. Note: Obviously, the recent push toward ubiquity of CORS is making JSON-P less important...

link() (49)

Markup (310)

  • By
    Responsive IFRAMEs

    Responsive web design revolutionized the web and spurred a movement away from native apps to web apps easily customizable for a mobile environment.  We use media queries and non-pixel-based dimensions to make responsive design easier; in fact, img { max-width: 100% } is one of my favorite...

  • By
    Convert HTML to Markdown

    One of my biggest mistakes with this blog was not finding a WordPress plugin that would allow me to write my posts with markdown; to this day I still need to write posts in "Visual" mode and then manually convert the post to HTML for "Text"...

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

  • By
    React and autofocus

    While I love ReactJS, I can say that I sometimes find interactions that were easy during the pre-ReactJS are annoyingly difficult or at least "indirect".  One example is properly ensuring that a given <input> element gets focused when a button in a different component is clicked; in...

  • By
    Creating Spacers with Flexbox

    I was one of the biggest fans of flexbox before it hit but, due to being shuffled around at Mozilla, I never had the chance to use it in any practice project; thus, flexbox still seems like a bit of a mystery to me.  This greatly...

Media (62)

  • By
    Get and Set Volume with JavaScript

    The <audio> and <video> tags provide a wealth more functionality than most people know. For instance, did you know that you could detect supported video formats and audio formats using a few JavaScript tricks?  It got me to thinking about the possibilities of detecting system volume...

  • By
    Create Custom Video Player Controls with CanJS

    In this guide, you will learn how to create a custom video player using the <video> element and CanJS. The custom video player will: Have custom play and pause buttons. Show the current time and duration of the video. Have a <input type="range"> slider that can adjust the position...

  • By
    How to Hide Information in Images

    If you've followed this blog, you know that I'm obsessed with figuring out every way to interact with, abuse, and convert different types of media.  Whether it's images, video, or audio, if something can be changed or exploited, I want to figure out how to do...

  • By
    Count Frames in an Animated GIF

    The animated GIF always makes me chuckle; on one hand they seem like a relic of the "old web", on the other hand they aren't going anywhere and their meme-like presence seem to only make them more popular.  If you browse through my media blog...

  • By
    Uppy File Uploading

    One of the big tasks I was charged with at my first job was setting up a system by which any customer or potential customer (aka anonymous user) could upload PDF and image files. I had loads of constraints to deal with: browser support...

Microsoft (17)

  • By
    Video Game Console Emulator

    Like most American children of the 1980s and 1990s, I spent a good amount of time playing video games with my friends.  My first console was the original Nintendo (NES), then the first Sega console, then onto t he Nintendo 64 (the best gaming system ever created)...

  • By
    Thoughts on Xbox One

    I've never been a massive Microsoft fan but one thing I believe they got massively right was Xbox.  I didn't own the first Xbox but I did jump at the Xbox 360 and love it.  When I saw that Xbox One was coming out, I bought...

  • By
    3 Solutions for Supporting Internet Explorer

    In the beginning, Internet Explorer was the progressive browser.  After a period of inactivity, Internet Explorer became the bane of our existence.  Microsoft has since recommitted to their browser but the fact remains that sometimes modern Internet Explorer is lagging just a bit behind WebKit-based browsers and...

  • By
    Free IE Virtual Machines

    Microsoft has been working their butts off to repair the image of their flagship browser, Internet Explorer.  They've done so by adhering to standards they previously scoffed at, creating a website with awesome IE-compliant demos, adding useful developer tools, hiring...

  • By
    Windows 8 Pin METAs

    Windows 8 allows for adding websites as apps (or maybe "bookmarks" is a better term) to the home screen, much in the vein that iOS allows users to do the same.  Like iOS devices, Windows 8 allows  users to accomplish this same task using custom...

Mobile (54)

  • By
    Game of Thrones Snapchat Filter

    If you follow me on Twitter, you know I'm a massive Game of Thrones fan.   I may not know every name but my mind has a mental map of every angle and epic battle. Not since Sopranos has there been a television show...

  • By
    Prevent Mobile Browser From Sleeping

    Web developers still have a difficult job when it comes to mobile; the web will never provide as many APIs or as much control as native mobile platforms but our users expect the same excellent experience.  Creating HTML5 games and media-heavy apps for the web can...

  • By
    Responsive Images with Client Hints

    It doesn't take being a performance fanatic to know that images can really slow down a page's load time.  We've come a long way when it comes to images, from lazy loading them to using better image formats like WebP, but they all involve loading the...

  • By
    JavaScript Battery API: Promises

    Working at Mozilla has afforded me the time to look at new APIs, one of them being the Battery API.  I wrote about the Battery API a while back, when the API was fresh into browsers.  Since then the Battery API has changed, implementing a promise-based...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

MooTools (316)

  • By
    5 Best Practice Mentalities to Get Over

    Every developers strives to write clean, maintainable, and functional code, whether they hack on the server side or dabble on the client side. Over the last few decades of the web, we've learned from some of our early mistakes and formed a site of always...

  • By
    Function Debouncing with Underscore.js

    The ability to listen and react to user interactions with JavaScript is fundamental and incredibly useful. Some interactions happen frequently and some rarely. Some listener functions are light of action, others can be quite taxing on the browser. Take window's resize event for...

  • By
    Google Extension Effect with CSS or jQuery or MooTools JavaScript

    Both of the two great browser vendors, Google and Mozilla, have Extensions pages that utilize simple but classy animation effects to enhance the page. One of the extensions used by Google is a basic margin-top animation to switch between two panes: a graphic pane...

  • By
    Custom Getters and Setters with MooTools

    Working with Dojo all day and scoping out MooTools at night gives me a unique perspective; I get to constantly evaluate the two frameworks and mentally move functionalities from framework to framework. One small but handy feature within the Dojo Toolkit's Dijit UI Framework...

  • By
    MooTools Mobile: It&#8217;s Touching!

    When the community asked the MooTools team to add basic mobile event listening to MooTools' Event class, we listened; today MooTools supports all touch and gesture events. What if we want more detailed mobile event listeners though, like swipe with direction, pinch...

Mozilla (17)

  • By
    Build Firefox Faster with Artifact Builds

    Working on Firefox DevTools has always been a dream of mine, mostly because it feels like the ultimate way to give back to the development community and those that helped me become a success.  And when I explain who Mozilla is and people ask "Oh, so...

  • By
    Hello DevTools!

    When I was a 17 year old noob, going to technical college in my home town, I was introduced to a browser called Firebird, which would later be renamed Firefox.  I was immediately drawn to this new browser; Firebird was fresh, exuded excitement, but most of...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

  • By
    5 More Awesome New Mozilla Technologies Youâve Never Heard Of

    My original 5 Awesome Mozilla Technologies You've Never Heard Of post got a huge response and it was well deserved -- Mozilla's pool of amazing talent not only dreams up awesome projects but brings them to fruition.  A few years have gone by and we've seen...

  • By
    Use Mozilla Firefox DevTools in Chrome

    I shared on Twitter last week that I do casual browsing in Google Chrome but do most of my development work in Firefox.  I can't give a great reason for doing so but Firefox has seemed like a development "security blanket" since I was in college (over a...

MySQL (15)

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...

  • By
    MySQL date_add

    Here's a quick MySQL tip I wanted to throw your way. I created an event system a while back and one of the requirements of the system was to show events that happened yesterday forward, meaning events older than 2 days were to be hidden.

  • By
    Create Custom Element Property Getters and Setters with MooTools

    One of the goals of the MooTools projects is to create very flexible methods by which developers may modify or extend the behavior of given classes. One example of that flexibility is the ability to customize the Element class' get and set methods for specified...

  • By
    Create a Basic Web Service Using PHP, MySQL, XML, and JSON

    Web services are taking over the world. I credit Twitter's epic rise to the availability of a simple but rich API. Why not use the same model for your own sites? Here's how to create a basic web service that provides an XML...

  • By
    Backup Your Database into an XML File Using PHP

    Backing up data is extremely important. Most of the time the database is the most important piece of the puzzle. Imagine losing all of the data in your database -- it would be tragic. Here's a PHP snippet that outputs your database as...

Node.js (75)

  • By
    Convert HTML to Markdown

    One of my biggest mistakes with this blog was not finding a WordPress plugin that would allow me to write my posts with markdown; to this day I still need to write posts in "Visual" mode and then manually convert the post to HTML for "Text"...

  • By
    How to Create a Twitter Bot with Node.js

    Twitter bots have been in the news over the past few years due to election meddling, not only in the United States but stretching across the globe.  There are, however, good and logical reasons for creating Twitter bots.  In order to see how easy it was...

  • By
    Using Storybook with Nuxt

    Nuxt.js has been a lot of fun to use in production web apps and side projects. It's simple, fast, and seems very in line with web standards when it comes to creating components, importing plugins, etc. Equally as exciting has been the rise of...

  • By
    Better Node.js Console Dumps with console-probe

    Writing JavaScript in the Node.js environment has always felt a bit more difficult; probably because browser developer tools have become incredibly powerful, interactive, and visually appealing.  Using console.log on the client side isn't the best of experiences and obviously isn't interactive. Though not interactive, I've found that

  • By
    Mine Bitcoin and Monero in the Browser

    I recently heard this story from Buenos Aires where a Starbucks was caught was caught mining cryptocurrency on customer computers that were attempting to connect to free WiFi.  I also ran a Twitter poll recently asking if people would allow sites to mine cryptocurrency on...

O'Reilly (26)

Optimization (46)

  • By
    Observing Intersection Observers

    As developing for the web has matured and JavaScript engines have become faster, one area remains a significant bottleneck - rendering. It's because of this that so many of the recent development efforts have been focused around rendering, with virtual DOM being one of the more...

  • By
    Detect WEBP Support with JavaScript

    Image optimization is a huge part of improving front-end performance.  We've traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering.  If you go to a site like GIPHY in Chrome you'll...

  • By
    Website Speed Test by Cloudinary

    Making your website as fast-loading as possible is not only an art but a necessity these days.  Slow-loading websites cause users to bail, leading to lost revenue and loss of credibility.  Add that Google now factors site speed into search results and you realize how important...

  • By
    JPEG Compression with Guetzli

    A little while ago Google released its Guetzli JPEG encoder, which claims a 20-30% improvement in file size over libjpeg. Being intrigued, I decided to give it a go. My tool of choice for optimizing JPEGs has long been jpeg-recompress, one of the...

  • By
    How to Reverse Engineer OS X and iOS Software

    The question of why we need to employ reverse engineering is an easy one to answer. When there is an executable, but no access to the source code, yet you still need to understand the inner workings of this particular software, you apply reverse engineering to...

Performance (27)

  • By
    Observing Intersection Observers

    As developing for the web has matured and JavaScript engines have become faster, one area remains a significant bottleneck - rendering. It's because of this that so many of the recent development efforts have been focused around rendering, with virtual DOM being one of the more...

  • By
    Detect WEBP Support with JavaScript

    Image optimization is a huge part of improving front-end performance.  We've traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering.  If you go to a site like GIPHY in Chrome you'll...

  • By
    Image Optimization with Cloudinary

    We're always looking for ways to improve site speed; we lazy load, minify and concatenate, create sprites, experiment with caching, and just about everything else we can think of.  With all of the performance optimization strategies available, the best way to decrease page size always comes back to...

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Don&#8217;t Wait for ServiceWorker: Adding Offline Support with One-Line

    The HTML5 Application Cache should make building offline-friendly web apps possible. In practice, its unforgiving nature makes it very challenging to use at all, giving it a uniquely negative reputation among front-end developers. It's expected that apps continue to work offline—most users don't won't care about...

PHP (218)

  • By
    Custom Configuration for Phabricator

    Phabricator is an excellent code review tool used by Facebook and other respected software engineering organizations.  The user interface is beautiful, the workflow and tools are concise and comprehensive, and it's a utility that covers most use cases, both web and command line.  I've written a...

  • By
    Match Special Letters with PHP Regular Expressions

    Regular expressions come with all sorts of peculiarities, one of which I recently ran into when creating a regex within PHP and preg_match.  I was trying to parse strings with the format "Real Name (:username)" when I ran into a problem I would see a lot...

  • By
    Retrieve Custom Field Values for Phabricator Objects

    Phabricator is an incredibly well-coded PHP application but lacks a bit on the documentation side.  Then again, what open source project isn't?  Over the past months I've been slowly integrating Phabricator, a newish review tool, with Bugzilla, a much older tool.  The most recent step saw...

  • By
    Add CSS and JavaScript Files to Phabricator Extensions

    Every open source framework has its own methods of extending functionality; some make extending incredibly easy and others...not so much.  Most of the time it comes down to how well the framework is documented.  Phabricator did an awesome job of making necessary classes extendable but it's fair to say it...

  • By
    Phabricator AphrontRequest / Save Error Fix

    Working on Phabricator extensions has thrust me back into the world of PHP, a language I had only touched via WordPress plugins and blog themes over the past few years.  Despite being away from the language, I was able to jump back in fairly quickly and felt...

Podcast (17)

Poll (9)

  • By
    Poll:  Should Browsers Implement Lazy Loading?

    Lazy loading is the process of delaying the load of a resource until it's needed.  Image a webpage that's 2,000 pixels high (lots of scrolling).  Why should the images toward the bottom of the page load if the user clicks the first link way up at...

  • By
    Poll:  Browser-Specific CSS Styles

    The first time I remember seeing browser-specific CSS styles was when I went to a website and saw that the scrollbars were a different color than Windows' usual grey colors. I thought it was pretty cool -- not necessarily useful by definitely creative. Fast forward to...

  • By
    Poll Follow Up: How Many Domains Do You Own?

    It was interesting to see how many domains you all had. I'm a serial domain buyer. Ever since I bought my first domain, DWIZZLE.COM (which I stupidly let go), I loved the power that it gave. Apparently many of you agreed: The Count Number...

  • By
    Poll:  How Many Domains Do You Own?

    If you're anything like me, you get hit with "great" ideas every 10 minutes. With the ecstatic feeling this new idea brings, you navigate to your domain registrar of choice to snatch up the clever domain that will surely make your "great" idea even more...

  • By
    Poll Follow Up: What is Your Preferred Browser?

    When I created the "preferred browser" poll I was interested in seeing if my assumption that Firefox would reign supreme was spot on or completely off. It turns out that I was right but I have a few other thoughts on the outcome. The...

Promises (26)

  • By
    The Dark Side of Promises

    Since the release of es6 many new features have found their way into NodeJS, but non had quite the same impact as promises. Promises have been developed for the browser before es6 was even a thing. There were several implementations that have been used like jQuery's...

  • By
    Six Tiny But Awesome ES7 + ES8 Features

    Development of new features for the core JavaScript language has really improved over the last five years, thanks in part to JavaScript frameworks pushing the limits and proving how important given functionality can be.  My previous ES6 posts, Six Tiny But Awesome ES6 Features and...

  • By
    JavaScript fetch with Timeout

    The fetch API started out as a target for criticism because of lack of timeout and request cancelation.  While those criticisms could be argued as fair or not, you can't deny that the fetch API has been pretty awesome.  As we've always done, if a...

  • By
    Node.js Port Scanner

    Node.js has become an incredible tool for creating services or utilities that act like a service.  Usually it's npm start, wait a moment, and you'll see the utility provide an address and port; a good example being localhost:8000.  One thing that bugs me about this pattern...

  • By
    async &#038; await

    JavaScript promises were a revelation in JavaScript, providing an alternative to the JavaScript callback hell we'd quickly found ourselves in.  Promises also allowed us to introduce and better handle asynchronous tasks.  While promises were an improvement over callback hell, they still require lots of thens...

Python (12)

  • By
    Change Python Version

    Python plays a major role at Mozilla; much of our website backends and tooling are written in the powerful language.  Want to build Firefox?  You'll need to make sure you have the proper Python version, which I recently found out had been upgraded. Despite installing and verifying...

  • By
    Get Python Requirements Package Hashes

    Python's (pip's) requirements.txt file is the equivalent to package.json in the JavaScript / Node.js world.  This requirements.txt file isn't as pretty as package.json but it not only defines a version but goes a step further, providing a sha hash to compare against to ensure package integrity: Coming from the JavaScript / package.json world, you only need...

  • By
    httpstat: Simple cURL Stats

    There are a lot of tools out there that do great, advanced things but present them as well as they could be presented.  I wont knock cURL for anything -- it's an amazing tool many of us can't live without;  what I will say, however, is that...

  • By
    Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • By
    Python html5lib Skipped Elements

    I've been working on some interesting python stuff at Mozilla and one task recently called for called for rending a page and then finding elements with a URL attribute value (like img[src] or a[href]) and ensuring they become absolute URLs.  One problem I encountered when using...

Quick Tips (234)

  • By
    Replace Repeated Characters with JavaScript

    URLs can be tricky to work with because they can be more complicated than the traditional URL format you type in.  I was again reminded of this when I was parsing Webpack URLs when I saw this beauty: I parsed the URL with new URL("....") but saw that...

  • By
    Search Git Commits Between Dates

    One of my weaknesses as a developer is relying on UIs to provide me the data I need.  It's not a fatal weakness but it does hamper me a bit.  One prime example is relying on GitHub's interface to review changes; git's command line provides the...

  • By
    Count Frames in an Animated GIF

    The animated GIF always makes me chuckle; on one hand they seem like a relic of the "old web", on the other hand they aren't going anywhere and their meme-like presence seem to only make them more popular.  If you browse through my media blog...

  • By
    Show FPS for Steam Games

    There's nothing more frustrating to a top gamer (outside of bugs in a game) than dropped frames in a video game.  If you're playing a competitive multiplayer game like PUBG or Fortnite, where up to 100 people are simultaneously competing, dropped frames can be the difference...

  • By
    console.timeLog

    I work on a really complex debugger at Mozilla but, and don't tell my colleagues, I sometimes enjoy simply using console.log and other console commands to get some simple output.  I know, I know, but hey -- whatever gets the job done.  A few years ago I...

rand() (41)

  • By
    Thoughts on Code Commenting

    One of the "behind the scenes" ways of organizing your code and making it maintainable is code commenting.  Whether you're coding in Java, CSS, JavaScript, PHP, or any language for that matter, code commenting plays an important role in making your development life easy.  I thought...

  • By
    Integrity: Link Checker for Mac

    I usually don't post about desktop applications because, quite frankly, I make my living creating awesome web apps.  I did, however, recently stumble upon a free utility which searches for broken links within a website.  That utility is the awesome Integrity application for Snow Leopard. Integrity is...

  • By
    Google Wave Invites Giveaway

    Over the past months I've given away dozens of Google Wave invites via my Twitter feed. Selfless? Yes. Kind? Of course. Generous? Always. So far I've simply given them away but now we're going to play a new game! The...

  • By
    What I&#8217;m Thankful For: 2009 Web Edition

    I'd like to take a moment this Thanksgiving to thank some people that deserved to be. I'd like to thank the MooTools team for all of the support and hard work. I feel truly honored to be around such intelligent, driven group of individuals.

  • By
    Confessions Friday

    Over the past two years I've run my Confessions of a Web Developer series.  Each one has been really popular and well-received.  It's Friday and I've had a bad week so today I want you to confess your web development sins in the comment section below. ...

React (14)

  • By
    React Emoji Picker

    When emojis first hit the web scene I rolled my eyes -- they seemed like a lame communication method for giggling kids.  After years more experience working remotely, managing open source communities, and communicating with people that may not get my sense of humor, I've realized...

  • By
    Get React Component Data by DOM Node

    Retrieving a React component's DOM node is fairly simple from within the component itself, but what if you want to work backward:  retrieve a component's instance by DOM node?  This is a task that the old Dojo Toolkit's Dijit framework allowed with the dijit.byId method, so...

  • By
    How to Get a React Component&#8217;s Element

    JSX is an amazing pseudo-language for React, and if I'm honest, it's what brought me to love React so much.  Using React without JSX is cumbersome and frustrating, while using JSX is such an easier way to express your code.  One drawback of JSX, however, is...

  • By
    React and autofocus

    While I love ReactJS, I can say that I sometimes find interactions that were easy during the pre-ReactJS are annoyingly difficult or at least "indirect".  One example is properly ensuring that a given <input> element gets focused when a button in a different component is clicked; in...

  • By
    React Video Player

    Streaming entertainment is a massive interest of mine as both a consumer and web developer.  My love for streaming entertainment dates back to the early days of RealPlayer and the misery of a million codecs.  Fast forward to today and I'm working a lot with ReactJS...

Security (30)

  • By
    Protect Sensitive Data in Docker

    Developing authentication code for open source repositories can be a scary task; you're scared that hackers can find loopholes in your code but you're also petrified of accidentally committing sensitive credentials to a public repository.  I've seen unintentional credential commits happen and the panic that ensues throughout an organization will...

  • By
    Prevent JavaScript Hotlinking with .htaccess

    Almost a decade (!) ago I wrote a post about preventing image hotlinking.  We all have the right to protect imagery hosted on our domain because it can slow our site down tremendously.  I love that post because it shows you how to replace the...

  • By
    Get and Remove EXIF Data from Photos

    If you've ever worked for an agency or a small web shop, I'd be willing to bet you've coded a fair amount of photo galleries.  You've probably also uploaded photos to social media, sent photos to friends and family, and so on.  Photos seem fairly innocent but, as is the...

  • By
    React Authentication is Easy with Auth0

    There are a lot of great tools out there for creating modern apps that can often make our lives easier, but one aspect that is often tricky and time-consuming is authentication. The landscape around building applications today is different than it used to be, which can...

  • By
    Clickjacking

    JavaScript security is a big business and for all of the right reasons.  JavaScript lets us do incredible things on the front end but some of those incredible things are for eval evil.  Spyjax used to be one of those evil things but browsers seem to...

SEO (5)

  • By
    The Parallax SEO Conundrum

    This post touches on the parallax SEO issue and offers solutions to fix it. If you're following the trends in web design at least from time to time, you probably know that parallax scrolling is one of the cool things that are all the rage as...

  • By
    Python Decorator for Preventing Robot Indexing

    Much of my time at Mozilla has been spent catching up to the rest of the MDN team with respect to python.  The new MDN backend, codenamed Kuma, is entirely Django-based and has been a joy to learn.  My latest python adventures have been focused on...

  • By
    Prevent Robot Indexing with Response Headers

    Every so often you have parts of your website that would be better off not indexed by search engines.  API calls, search result pages, PDF documents -- all examples of responses which may not have value outside of the current user.  No we all know we...

  • By
    Change Category Slug within WordPress

    When I first started this blog, I set the category "slug" to "sugar."  Why sugar?  Because a lot of a good thing is candy;  thus, a bunch of MooTools tutorials is as sweet as sugar.  While I get a giggle out of calling my categories sugar...

  • By
    Fixing mod_rewrite and .htaccess on GoDaddy Hosting

    I recently launched a new website on GoDaddy shared hosting. The website required mod_rewrite for SEO-friendly URLs. GoDaddy provides mod_rewrite but every time I tried to hit a two-deep URL, I would get a 404 error. Here's what I had: The fix to this...

Series (0)

  • By
    Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn't matter whether they're functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they're artistic representation pushing the limits of...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    How Nesting 3D Transformed Elements Works

    CSS animations are incredibly popular right now, and I don't just mean animating a simple color or dimension property, I mean 3D transformations as well; CSS flips and rotating cubes being prime examples. We can find simple CSS snippets and examples for transforms, but...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Create a 3D Animating Sidebar

    Mozilla's Christian Heilmann is an evangelist that knows how to walk the walk as well as talk the talk.  You'll often see him creating sweet demos on his blog or the awesome Mozilla Hacks blog.  One of my favorite pieces...

Shell (149)

  • By
    Create gists from Command Line

    One of the best ways to gain contributors for your open source project is by providing a rough patch for the contributor to start from.  One of the best ways to ask for help is by providing what you have so far and letting a mentor...

  • By
    Search Git Commits Between Dates

    One of my weaknesses as a developer is relying on UIs to provide me the data I need.  It's not a fatal weakness but it does hamper me a bit.  One prime example is relying on GitHub's interface to review changes; git's command line provides the...

  • By
    How to Hide Information in Images

    If you've followed this blog, you know that I'm obsessed with figuring out every way to interact with, abuse, and convert different types of media.  Whether it's images, video, or audio, if something can be changed or exploited, I want to figure out how to do...

  • By
    Count Frames in an Animated GIF

    The animated GIF always makes me chuckle; on one hand they seem like a relic of the "old web", on the other hand they aren't going anywhere and their meme-like presence seem to only make them more popular.  If you browse through my media blog...

  • By
    How to Delete Untracked Files in a Mercurial Repository

    Working around Firefox at Mozilla means that you need to get acquainted with mercurial, the version control system that rivals git and svn.  Like any tool, hg (mercurial) can be difficult until you're well versed with it.  And if you hg import a URL that doesn't match...

Sponsored (145)

  • By
    Whatâs Next for Hybrid App Developers?

    The story of hybrid application development is a never-ending one. Each framework has to continuously strive and innovate to remain relevant, and the discussion of which framework to use is a question often asked. Most hybrid applications are built using a combination of HTML, CSS, and...

  • By
    OpenRates Currency API

    Creating your own APIs can be a total nightmare: worrying about uptime, load balancing, data accuracy, caching, and all of the other risks would keep me up at night.  And if your API relates to money in any way?  If you get that wrong you...

  • By
    CDN, Web Security, and DDoS Protection from Incapsula

    There used to be day that you could have a small to large website that didn't require protection and worldwide CDN but, with how easy it is to initiate a DDoS attack and how important website speed is for search engine placement, it's a given...

  • By
    IP Geolocation with ipstack

    Knowing where your web visitor is located is an incredible advantage to any website; you can show relative content like maps, pricing, and availability, output your content in their likely language, etc -- I cannot overstate how useful that information is.  Of course we have...

  • By
    DDoS Protection by Incapsula

    DDoS protection is an incredibly important protection for sites that require dependability, regardless of the service your site provides.  Whether your online product or service is for managing money, buying or selling crypto, or simply sharing your tech nerdery (like this blog), there's always a...

Streaming (1)

Theory / Ideas (71)

  • By
    Confessions of a Web Developer XVI

    It's been quite a while since I've gotten a few things off of my chest and since I'm always full of peeves and annoyances I thought it was time to unleash: If I were just getting into front-end development, I'd be so lost.  The norm these...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Thoughts on Devices: 2016

    If you follow this blog regularly or follow me on Twitter, you know that I love devices for all purposes.  Whether it's for watching videos, virtual reality, or any other number of entertainment tasks, I love cutting edge devices and have an opinion on all of them.

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Thoughts on the Upcoming Apple TV

    If you followed my Twitter account during Apple's event yesterday, you'll know that I was most excited about the Apple TV update.  Apple TV is a neglected gem inside the Apple world, and despite it not really being enhanced in the past few years, I'd still assert it's better...

Uncategorized (4)

Usability / Accessibility (40)

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...

  • By
    Accessibility Tip:  Empty alt Attributes

    As mostly a self-taught developer, my impressions of best practices were self-formed, and over the years I've realized many of those impressions were incorrect or the standards associated with them had quickly changed.  One small but important practice is the usage of alt attributes on img tags, and I had thought...

  • By
    JavaScript Redirects and window.open

    One of the sweet parts in the simplified HTML5 spec was allowing A elements to wrap DIVs and other block level elements.  For too long we added JavaScript listeners and window.location redirects when a wrapping A would have probably sufficed.  But there are also times when the wrapping A wouldn't work...

  • By
    Accessibility and alt Attributes

    The alt attribute is important for a number of reasons:  it describes an image for screen readers used by those without sight or poor sight, it describes the image to bots, and it provides an indicator of what should have loaded if the image fails to...

  • By
    Create Keyboard Shortcuts with Mousetrap

    Some of the finest parts of web apps are hidden in the little things.  These "small details" can often add up to big, big gains.  One of those small gains can be found in keyboard shortcuts.  Awesome web apps like Gmail and GitHub use loads of...

Viral (1)

  • By
    The Truth About Code Review

    Code review is an essential practice for organizations that cater to large amounts of traffic and want to ensure maintainability throughout a team of developers.  Of course that doesn't mean that every developer on the team thinks and codes the same way, so code review (in...

Virtual Reality (6)

  • By
    Detect WebVR Support with JavaScript

    It's been two years since I was heavily involved with WebVR at Mozilla but, despite not contributing every day, I can see VR making leaps and bounds, from Firefox making an increased effort to Chrome pushing VR and Oculus and HTC (Vive) improving their offerings.  Native...

  • By
    One Week of Vive

    If you've been following me on Twitter, you'll notice that I've very recently taken to virtual reality.  Headsets like Oculus Rift, Samsung GearVR, Playstation's VR effort, and HTC Vive have just hit the consumer market and so now is a good time for developers to start experiencing...

  • By
    Get Query String Parameters with JavaScript

    Query string parameters have been incredibly useful on the server side since the internet took liftoff, but it wasn't until AJAX-driven web apps became popular that we relied too much on them on the client side. Not only do we grab parameter values but we also modify...

  • By
    Create a 3D Panorama Image with A-Frame

    In the five years I've been at Mozilla I've seen some awesome projects.  Some of them very popular, some of them very niche, but none of them has inspired me the way the MozVR team's work with WebVR and A-Frame project have. A-Frame is a community project...

  • By
    5 More Awesome New Mozilla Technologies Youâve Never Heard Of

    My original 5 Awesome Mozilla Technologies You've Never Heard Of post got a huge response and it was well deserved -- Mozilla's pool of amazing talent not only dreams up awesome projects but brings them to fruition.  A few years have gone by and we've seen...

VR (1)

  • By
    Get Query String Parameters with JavaScript

    Query string parameters have been incredibly useful on the server side since the internet took liftoff, but it wasn't until AJAX-driven web apps became popular that we relied too much on them on the client side. Not only do we grab parameter values but we also modify...

Vue.js (1)

  • By
    Creating a Cloudinary Vue Component

    While React.js has taken much of the attention during the latest wave of JavaScript frameworks, Vue.js has quietly become a favorite of many developers that find React overly complex and don't want to deal with the webpack tooling.  With Vue you can simply include the Vue...

WordPress (38)

  • By
    Add META Tags to WordPress Head

    The reason that WordPress is so developer-friendly is their awesome hook system.  Depending on a post category (or seemingly anything else), you can modify the contents of the page, the theme templates, and everything else.  WordPress is amazing. One recent use case I had was wanting to modify...

  • By
    WordPress Publish Post Hook

    One of the best parts of WordPress is its hook/action system; this special hook system is WordPress' way of assigning callbacks when certain events occur. One event that there seems to be a lot of confusion over is which hook to use to detect when...

  • By
    Using DOMDocument to Modify HTML with PHP

    One of the first things you learn when wanting to implement a service worker on a website is that the site requires SSL (an https address).  Ever since I saw the blinding speed service workers can provide a website, I've been obsessed with readying my site for...

  • By
    Add Custom CSS to WordPress Admin

    Believe it or not, I spend an awful lot of time going through my blog's comments and correcting spelling issues, code formatting, etc.; yes, even the comments from way back to 2007.  It's mostly for quality control purposes and ease of reading for my readers, especially the code...

  • By
    Prevent WordPress from Loading &#8220;Next&#8221; Pages

    I've been working to make this blog more performant by lazy loading everything I can think of, placing CSS and JavaScript into the HTML, and using data URIs;  the common theme in these is reducing the number of requests on each page.  One request I noticed (and hadn't anticipated) coming...

_Functional (1)

_HideInContentAds (18)