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 (69)

  • By
    How to Detect an Ad Blocker

    One of the unspoken rules of the internet is that most content is "free"... at the cost of webpage being littered with advertisements and trackers. This was't a big problem in the early internet days but trackers and advertisements have become so intrusive and unapologetically aggressive...

  • 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...

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 (54)

  • By
    Amazing User Agent API with userstack

    We do our best to design and code websites so that they look and perform the way they should regardless of device or browser, but the truth is we sometimes we need to code for specific device, browser, or crawler. Whether it's a quick hack or...

  • 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...

Blog (105)

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Confessions of a Web Developer XVII

    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:Firefox's DevTools are outstanding right now. From the improvements we've made to the debugger, to responsive...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    Goals for 2019

    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. I did really well with my 2018 goals: I started a fun podcast with

  • 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...

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 (95)

  • By
    Firefox Kiosk Mode

    As someone who loves the HTML and web APIs, I want to see them used in all different types of devices and mediums. Being that I work for the amazing Mozilla Corporation, seeing Firefox and the gecko web engine thrive in those spaces is important...

  • By
    designMode

    Every once in a while I stumble upon an API or browser setting that I can't believe ever existed. Such examples can be seen in the numerous String.prototype properties such as bold, italics, and even blink, which wrap given string text in their representative HTML...

  • By
    How to Add a User Stylesheet in Firefox

    While many like to complain about CSS these days, it's important to remember how amazing CSS is; the CSS language is:easy to learneasy to readeasy to writesimple to understandWeb developers and designers alike love that CSS allows us to take text/media and present it in...

  • By
    Open Multiple Firefox Tabs from Command Line

    Now that I work on Firefox Developer Tools, I'm really starting to learn some of the tricks of building, debugging, and launching Firefox.  Once I start using Firefox at a developer level each day, the more I become amazed at how configurable and easy to work...

  • 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...

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 (8)

  • By
    5 Easy Ways to Earn Cryptocurrency

    The days of individuals mining popular cryptocurrencies are over. The amount of time and energy required to mine bitcoin is immense and you'd be competing with business with massive mining farms. What you can do, however, is chip away at earning cryptocurrency via a few...

  • By
    Detect Cryptocurrency by Wallet Address

    I’ve always been a massive advocate of cryptocurrency. I love the technology, the ease of use, and the freedom that cryptocurrencies bring to the world. Despite my love of crypto, I know that adoption will take a long time and that the state of crypto...

  • 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...

CSS (432)

  • By
    CSS prefers-reduced-motion Media Query

    When I started in the web development industry, media queries were limited -- screen and print were the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color...

  • By
    CSS Gradient Text

    Web developers know the fight we’ve all had to improve fonts on the web. Whether it be load time, odd strategies for using custom fonts (Cufon, anyone?), or just finding the right font itself, beautifying text on the web has never come easy.That got...

  • By
    CSS :focus-within

    Using :hover to display additional information or elements is a very useful technique but a big drawback to using the hover pseudo-class is that they are usually not accessibility-friendly. Not everyone uses a mouse and some users have visual impairments, so they rely on screen...

  • By
    CSS :placeholder-shown

    One of the first plugins that would hit a new framework in the early days of JavaScript frameworks was a placeholder plugin, which is why we were so excited when HTML5 brought us the placeholder attribute. Then CSS lovers like me were thrilled when the

  • By
    prefers-color-scheme: CSS Media Query

    One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result.

CSS Animations (47)

  • By
    CSS prefers-reduced-motion Media Query

    When I started in the web development industry, media queries were limited -- screen and print were the two media queries I was most often using. More than a decade later, media queries have advanced to various screen units, feature checking, and even color...

  • 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...

Demos (374)

  • By
    Chris Coyierâs Favorite CodePen Demos IV

    Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...

  • By
    prefers-color-scheme: CSS Media Query

    One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result.

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • 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...

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 (52)

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • 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...

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 (18)

  • By
    How to Patch Retry System into Super Mario ROMs

    I find myself watching less TV lately and much more time enjoying gamers stream on Twitch. While I too much PUBG, and enjoy watching people like Shroud and ChocoTaco hit bangers, I get more enjoyment out of Grand Poo Bear, Barbarian, and others play ultra difficult...

  • By
    How to Get Green Blood in PUBG

    My current video game obsession is Player Unknown's Battleground, also referred to as PUBG.  It's an online multiplayer game which drops yourself and 99 others into a single, large map and you battle it out until the last man is standing.  It's frustrating, heart-attack inducing, exciting...it's...

  • 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
    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
    Patch Super Dram World

    My recent dive into retro gaming has opened my eyes to how much time and effort still goes into playing console games that are as old as I am.  The basic challenge has gone out of these games, understandably, so players have improvised new goals like...

git (41)

  • By
    Mercurial Tips

    While most of the world seems to be using git for version control, Mozilla continues to use Mercurial (hg) to manage the Firefox source code. As a git and GitHub lover, it took me a while to get used to Mercurial. I...

  • By
    Checkout the Last Public Revision with Mercurial

    I've always preferred git over Mercurial (hg) because the feature branch workflow makes organizing code and working off of master very easy. You don't get that with vanilla mercurial -- instead, commits can just sort of apply on top of each other, without much organization.

  • By
    Set Branch Alias with Git

    Version control systems can be difficult to use, especially when you don't use a UI app. Just think about main branch or revision names: svn uses "trunk", git uses "master", and mercurial (hg) uses "tip". I need to switch between mercurial and git...

  • By
    How to Set Commit Author

    I've worn dozens of hats on a dozen different teams during my time at Mozilla, but none has been as rewarding and challenging as community management. Whether it's mentoring students, welcoming new contributors, or reviewing pull requests, there's always so much to be done. There's also...

  • By
    Git Checkout at Previous Timeframe

    In the past I've blogged about checking out branches created on a specific date as well as sorting git branches by date, but one frequent usage of git and dates is checking out a commit at a given time in the past.

Giveaways (10)

Google (57)

  • By
    Easy Google Search Result API with Zenserp

    No matter how much experience I gain in this industry, one task I continue to fail at is building an accurate, flexible, and maintainable scraper for site search. As soon as sites change their HTML structure, my scrape is borked. When looking to build my own...

  • 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...

GraphQL (1)

  • By
    Getting Started with GraphQL

    GraphQL was developed by Facebook in 2012 to power up its mobile apps. Since open-sourcing GraphQL specification in 2015, it gained a lot of popularity and is now used by many development teams, including giants like GitHub, Twitter or Airbnb. Why so? And what exactly...

Guest Blogger (148)

  • By
    Getting Started with GraphQL

    GraphQL was developed by Facebook in 2012 to power up its mobile apps. Since open-sourcing GraphQL specification in 2015, it gained a lot of popularity and is now used by many development teams, including giants like GitHub, Twitter or Airbnb. Why so? And what exactly...

  • By
    Build a Decentralized Web Chat in 15 Minutes

    In this 15 minute tutorial we're going to build a simple decentralized chat application which runs entirely in a web browser.All you will need is a text editor, a web browser, and a basic knowledge of how to save HTML files and open them in the browser.

    By
    Adding Search to Your Site with JavaScript

    Static website generators like Gatsby and Jekyll are popular because they allow the creation of complex, templated pages that can be hosted anywhere. But the awesome simplicity of website generators is also limiting. Search is particularly hard. How do you allow users to search...

  • By
    Chris Coyierâs Favorite CodePen Demos IV

    Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...

  • By
    Using Slack Slash Commands to Send Data from Slack into Google Sheets

    Since I work from home, most of my daily work interactions happen through Slack. It’s my equivalent to the water cooler. A place to hang out and discuss ideas with friends.I’m part of a book recommendations channel. People share books all the time, but they disappear...

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 (540)

  • By
    JavaScript waitForTime

    I write a lot of tests for new features within Firefox DevTools. We have hundreds of "mochitests" which open the browser and perform synthetic actions like clicking, typing, and other user actions. I've previously written about waitForever which essentially halts following actions without locking the...

  • By
    How to Create a QR Code

    QR codes aren't everyone's cup of tea but I quite like them. If I see something I want to remember or check out later, especially when on the road, it's super easy to take a quick picture -- it's much easier than trying to remember a...

  • By
    How to Detect an Ad Blocker

    One of the unspoken rules of the internet is that most content is "free"... at the cost of webpage being littered with advertisements and trackers. This was't a big problem in the early internet days but trackers and advertisements have become so intrusive and unapologetically aggressive...

  • By
    designMode

    Every once in a while I stumble upon an API or browser setting that I can't believe ever existed. Such examples can be seen in the numerous String.prototype properties such as bold, italics, and even blink, which wrap given string text in their representative HTML...

  • By
    How to Not Minify Source with webpack

    The webpack JavaScript utility has taken over the modern JavaScript landscape, so much so that it's hard to be a JavaScript developer and not use it. JavaScript build utilities are the point where they do best practices implicitly, like minify code, caching, and more.I was...

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 (313)

  • By
    designMode

    Every once in a while I stumble upon an API or browser setting that I can't believe ever existed. Such examples can be seen in the numerous String.prototype properties such as bold, italics, and even blink, which wrap given string text in their representative HTML...

  • By
    Data URIs

    We're all familiar with traditional URI protocols like https, http, ftp, and file, but data URIs have become a large part of our online strategy. We can use them to display images, the Mac camera and webcams, and more. But what if we simply...

  • By
    Detect if Element is a Web Component

    I've advocated for web components since before they became a spec, mostly inspired by the Dojo Toolkit's dijit framework. Empowering first class JavaScript widgets, as opposed to a mess of DIVs and templates, always made the most sense. Now that web components exist, and awesome...

  • 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"...

Media (68)

  • By
    How to Crop Videos

    During a recent episode of the Script and Style podcast, I had noticed that the video recording had showed a bit of our internal chat that wasn't necessary for our viewers to see. While there's nothing wrong with giving viewers a peek into the show...

  • By
    Set Video Playback Speed with JavaScript

    I love that media has moved from custom plugins (Flash…gross) to basic HTML <video> and <audio> elements. Treating these media sources as just another element allows us to use CSS filters to adjust display, for example. The less we need to do with...

  • By
    AI-Backed Image Background Removal

    I've worked on dozens of eCommerce sites in my career and many of them were hamstrung by the same pain points: tax collection, payment customization, and image optimization. While tax collection and payment customization were important, image optimization was always the hardest and...

  • By
    Convert Video to Grayscale

    I'm a JavaScript fanatic but I've always been fascinated with media manipulation. Maybe it's because I've secretly always wanted to be a designer, but I'm fine with being able to manipulate art with software instead of create the art myself. One type of art I've always...

  • By
    Open FaceTime Call from Command Line

    Communication tools are always associated with UIs, and for good reason -- if you want communication to be easy and intuitive, you need easy and intuitive interfaces. We need communication tools to provide the lowest barrier of entry, since not all users will be tech...

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 (55)

  • By
    Hello Fenix!

    Over seven years ago I made the massive career leap to Mozilla. Two years ago I realized a dream of joining the Firefox DevTools team -- it's been a rewarding adventure helping to improve the Firefox DevTools Debugger and other super helpful tools. I'm...

  • 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...

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 (22)

  • By
    Hello Fenix!

    Over seven years ago I made the massive career leap to Mozilla. Two years ago I realized a dream of joining the Firefox DevTools team -- it's been a rewarding adventure helping to improve the Firefox DevTools Debugger and other super helpful tools. I'm...

  • By
    Firefox Kiosk Mode

    As someone who loves the HTML and web APIs, I want to see them used in all different types of devices and mediums. Being that I work for the amazing Mozilla Corporation, seeing Firefox and the gecko web engine thrive in those spaces is important...

  • By
    How to Build Firefox

    Open source is a dream and a gateway to an amazing career -- I'm a testament to that. One of the most amazing open source projects to ever exist, Mozilla Firefox, is a project I'm proud to work on as an employee of Mozilla. It's rewarding...

  • By
    How to Add a User Stylesheet in Firefox

    While many like to complain about CSS these days, it's important to remember how amazing CSS is; the CSS language is:easy to learneasy to readeasy to writesimple to understandWeb developers and designers alike love that CSS allows us to take text/media and present it in...

  • By
    Open Multiple Firefox Tabs from Command Line

    Now that I work on Firefox Developer Tools, I'm really starting to learn some of the tricks of building, debugging, and launching Firefox.  Once I start using Firefox at a developer level each day, the more I become amazed at how configurable and easy to work...

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 (79)

  • By
    How to Create a QR Code

    QR codes aren't everyone's cup of tea but I quite like them. If I see something I want to remember or check out later, especially when on the road, it's super easy to take a quick picture -- it's much easier than trying to remember a...

  • By
    How to Not Minify Source with webpack

    The webpack JavaScript utility has taken over the modern JavaScript landscape, so much so that it's hard to be a JavaScript developer and not use it. JavaScript build utilities are the point where they do best practices implicitly, like minify code, caching, and more.I was...

  • By
    Stop Installing Packages Globally

    These days, most front-end projects are going to involve NPM packages of some kind. Occasionally, when browsing documentation for these packages, I’ll see a recommendation to install a package like this.Or like this.In both of these examples, the package is installed globally. This means you can...

  • By
    How to Detect Text in Images

    Images are a great way to communicate without text but oftentimes images are used/abused to spread text within social media and advertisements. Text in images also presents an accessibility issue. The truth is that it's important, for any number of reasons, to be able to detect...

  • 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"...

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 (219)

  • By
    How to Change the WordPress Media Upload Directory

    One thing I've always missed about the "old" way of web development was the simplicity of FTP. No deploy scripts, no fuss: simple drag and drop of files and the files are there. I've used FTP for assets on this blog for over a decade but...

  • 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...

Podcast (25)

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 (35)

  • By
    JavaScript waitForTime

    I write a lot of tests for new features within Firefox DevTools. We have hundreds of "mochitests" which open the browser and perform synthetic actions like clicking, typing, and other user actions. I've previously written about waitForever which essentially halts following actions without locking the...

  • By
    Promises and Static Values

    Async can throw a real wrench into the cogs of our programming workflows, all despite the fact that async is the modern JavaScript pattern. While async/await helps, there's sometimes confusion about the way to have a single function that returns a value whether it exists...

  • By
    then on Objects

    Promises were a revelation in JavaScript development, allowing us to enjoy async processing and avoid callback hell. Many new APIs like Battery API, Cache API, and others use the promise API. One fact you may not know is that you can add...

  • By
    JavaScript Proxy with Storage

    The JavaScript Proxy API provides a wealth of "magic" within JavaScript, allowing you to use any object as sort of an alias that allows a wall of validation, formatting, and error throwing. Did you know that you could also employ the Proxy API as...

  • By
    JavaScript Detect Async Function

    JavaScript async/await has changed the landscape of how we code. We're no longer stuck in callback or then hell, and our code can feel more "top down" again.Async functions require the following syntax:To use await with a function, the function needs to be declared with...

Python (13)

  • By
    Checkout the Last Public Revision with Mercurial

    I've always preferred git over Mercurial (hg) because the feature branch workflow makes organizing code and working off of master very easy. You don't get that with vanilla mercurial -- instead, commits can just sort of apply on top of each other, without much organization.

  • 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...

Quick Tips (276)

  • By
    JavaScript waitForTime

    I write a lot of tests for new features within Firefox DevTools. We have hundreds of "mochitests" which open the browser and perform synthetic actions like clicking, typing, and other user actions. I've previously written about waitForever which essentially halts following actions without locking the...

  • By
    Reverse Lookups with JavaScript

    I've always loved exploring regular expressions because they're one of those skills that's never taught in school -- you need to pick them up on the fly, messing up and fixing them along the way. Regex's are incredibly powerful, and one power they have are...

  • By
    Promises and Static Values

    Async can throw a real wrench into the cogs of our programming workflows, all despite the fact that async is the modern JavaScript pattern. While async/await helps, there's sometimes confusion about the way to have a single function that returns a value whether it exists...

  • By
    Data URIs

    We're all familiar with traditional URI protocols like https, http, ftp, and file, but data URIs have become a large part of our online strategy. We can use them to display images, the Mac camera and webcams, and more. But what if we simply...

  • By
    then on Objects

    Promises were a revelation in JavaScript development, allowing us to enjoy async processing and avoid callback hell. Many new APIs like Battery API, Cache API, and others use the promise API. One fact you may not know is that you can add...

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 (15)

  • By
    React indeterminate

    I've fallen in love with React.js and JSX over the years; state-based rendering and a logical workflow have made me see the light of this modern framework. That doesn't mean I don't sometimes get a bit frustrated that the "simple" things seem harder than they should...

  • 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...

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 (176)

  • By
    Firefox Kiosk Mode

    As someone who loves the HTML and web APIs, I want to see them used in all different types of devices and mediums. Being that I work for the amazing Mozilla Corporation, seeing Firefox and the gecko web engine thrive in those spaces is important...

  • By
    How to Create a QR Code

    QR codes aren't everyone's cup of tea but I quite like them. If I see something I want to remember or check out later, especially when on the road, it's super easy to take a quick picture -- it's much easier than trying to remember a...

  • By
    Stop Installing Packages Globally

    These days, most front-end projects are going to involve NPM packages of some kind. Occasionally, when browsing documentation for these packages, I’ll see a recommendation to install a package like this.Or like this.In both of these examples, the package is installed globally. This means you can...

  • By
    How to Build Firefox

    Open source is a dream and a gateway to an amazing career -- I'm a testament to that. One of the most amazing open source projects to ever exist, Mozilla Firefox, is a project I'm proud to work on as an employee of Mozilla. It's rewarding...

  • By
    Mercurial Tips

    While most of the world seems to be using git for version control, Mozilla continues to use Mercurial (hg) to manage the Firefox source code. As a git and GitHub lover, it took me a while to get used to Mercurial. I...

Sponsored (164)

  • By
    Real-Time Google Search Results API with serpstack

    In my early web days, I was interested in scraping and collecting data based on the results of Google searches. Scraping Google was easier in those days but now Google search results are so dynamic that you can't rely on getting the same HTML or data...

  • By
    Simple Scraping API with zenscrape

    So many developers believe that scraping a URL's content is easy -- just a simple curl and you're done, right? Nope. CAPTCHAs, rate limitations, origin-specific limitations -- they make getting content off the web a nightmare. Luckily we now have services like zenscrape...

  • By
    How to Use JPEG 2000 (JP2) for a Faster Images on iPhone

    Images Slow Down WebsitesImages slow down the page-loading performance of many websites. Audit tools like Google’s Lighthouse can quickly tell you how many seconds you can save by optimizing your images. When you are delivering to desktops or android devices running Chrome browser, a quick solution...

  • By
    Scrape the Web with scrapestack

    I first grew to love Firefox not as a web developer but as user, and what drew me to this amazing new browser was its add-on ecosystem. The add-on I used the most? Web scrapers. Piracy had just hit mainstream and I also need imagery...

  • By
    Get Total Address Information with Geocode API

    Getting address information is vitally important. Whether shipping a package, tailoring a user experience to location, or using that data to help localize language on a website, getting location information wrong can lose a sale or brake feature. Let's take a look at an API...

Streaming (1)

Theory / Ideas (74)

  • By
    Confessions of a Web Developer XVII

    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:Firefox's DevTools are outstanding right now. From the improvements we've made to the debugger, to responsive...

  • By
    Get Up and Win

    Down on my hands and knees, I crawl around, bleeding out.  I'm resigned to my fate.  A kind stranger, a new friend, rushes over to me and kneels to help, reviving me at a time that didn't require it.  Just as I'm revived, the kind stranger...

  • By
    Lessons in Failure: Removing the Old Debugger from Firefox

    Joining the Firefox DevTools team was a dream come true for me.  I shared why in the first episode of the Script & Style show but the quick summary is that I grew up loving Firefox (even before it was called "Firefox") because Mozilla cared...

  • 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...

Uncategorized (3)

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 (40)

  • By
    How to Change the WordPress Admin Login Logo

    There are numerous content management systems that thrive these days but none are as prolific as WordPress. Every client wants the ability to change their website at a moment's notice and they want to do it themselves, and again, WordPress is the best fit for that.

  • By
    How to Change the WordPress Media Upload Directory

    One thing I've always missed about the "old" way of web development was the simplicity of FTP. No deploy scripts, no fuss: simple drag and drop of files and the files are there. I've used FTP for assets on this blog for over a decade but...

  • 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...

_Functional (2)

  • By
    Easy Google Search Result API with Zenserp

    No matter how much experience I gain in this industry, one task I continue to fail at is building an accurate, flexible, and maintainable scraper for site search. As soon as sites change their HTML structure, my scrape is borked. When looking to build my own...

  • By
    weatherstack: an Amazing Weather API

    One of my first tasks each day is checking the weather; it's a necessity for knowing what my children and I should wear, if I'm going to need to water the lawn or need to shovel snow, and if I can take meetings out on my...

  • By
    Grab a .DEV Domain from Hover!

    I can say that the biggest and best changes in my professional life came from starting this blog — it was the springboard for conference speaking, open source, and joining Mozilla. I’ve always urged ever developer to have a blog to showcase talent, explore new technology...

  • By
    Wix Is Challenging You to an SEO Battle for $25K

    This year Wix launched a series of advanced SEO tools for Wix users to optimize their site pages for search engines and social media platforms. These tools include custom meta tags, canonical URLs, 301 redirects, structured data and rapid loading.So what’s the deal?To put their...

  • By
    Awesome Visual Testing with Percy!

    The more complex the applications I work on, the more I rely on and invest in testing. Whether it's flow typing, jest tests, unit tests, or selenium tests, I rely on all of them to enforce integrity and save me from myself.One type of...

_HideInContentAds (28)

  • By
    weatherstack: an Amazing Weather API

    One of my first tasks each day is checking the weather; it's a necessity for knowing what my children and I should wear, if I'm going to need to water the lawn or need to shovel snow, and if I can take meetings out on my...

  • By
    Grab a .DEV Domain from Hover!

    I can say that the biggest and best changes in my professional life came from starting this blog — it was the springboard for conference speaking, open source, and joining Mozilla. I’ve always urged ever developer to have a blog to showcase talent, explore new technology...

  • By
    Wix Is Challenging You to an SEO Battle for $25K

    This year Wix launched a series of advanced SEO tools for Wix users to optimize their site pages for search engines and social media platforms. These tools include custom meta tags, canonical URLs, 301 redirects, structured data and rapid loading.So what’s the deal?To put their...

  • By
    Awesome Visual Testing with Percy!

    The more complex the applications I work on, the more I rely on and invest in testing. Whether it's flow typing, jest tests, unit tests, or selenium tests, I rely on all of them to enforce integrity and save me from myself.One type of...

  • By
    Awesome Automation and Integration with Buddy

    One of my favorite services for years has been IFTTT (If this then that). Having a service that allows me to trigger a host of functionalities with one simple action is amazing! Posting a picture to Instagram can trigger IFTTT to send a...