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

  • By
    How to Cancel a Fetch Request

    JavaScript promises have always been a major win for the language -- they've led to a revolution of asynchronous coding that has vastly improved performance on the web. One shortcoming of native promises is that there's no true way to cancel a fetch...until now. 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
    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...

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

  • By
    Automatically Rebase GitHub Pull Requests

    Working on an open source project with a thriving contribution community is one of the great joys I have at Mozilla. In leading this charge, I get to meet amazing people of all different skill sets and interests, as well as different points of...

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

Blog (107)

  • By
    Goals For 2020

    Every new year brings about a sense of optimism that the next 365 can bring about big, positive changes in different phases of life. That's no exception for me and this blog. I did pretty well with last year's goals, so I thought I'd push...

  • By
    2019 Year in Review

    The beginning of every year starts out with all of us setting ambitious goals -- goals being personal and professional. Many of us rarely complete half of those goals, most abandoning them by the end of the year. In January of this year I...

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

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

  • By
    JavaScript Picture-in-Picture API

    As a huge fan of media on the web, I'm always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom...

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

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

  • By
    How to Earn Interest with Bitcoin

    When I was young I remember looking at my bank book and seeing nice interest payments for cash I had in the bank. Fast forward to today and banks are giving essentially nothing for interest -- your money just sits there collecting dust. In an ideal...

  • By
    Tips for Starting with Bitcoin and Cryptocurrencies

    One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out...

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

CSS (438)

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

  • By
    Tips for Starting with Bitcoin and Cryptocurrencies

    One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out...

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

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

  • By
    How to Play Retro Game ROMs on Windows

    Video games are always a fun time, something we desperately need during our COVID lockdown. A few years back I shared how to play retro games on Mac, as well as how to patch games to play popular ROM hacks like Grand Poo World...

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

git (45)

  • By
    Automatically Rebase GitHub Pull Requests

    Working on an open source project with a thriving contribution community is one of the great joys I have at Mozilla. In leading this charge, I get to meet amazing people of all different skill sets and interests, as well as different points of...

  • By
    Detect git Directory with Bash

    One interesting aspect of working at Mozilla is that Firefox lives in a mercurial repository while several other projects live on GitHub in a git repository. While most focus on either Firefox or another project, I switch between both, leaving me running git commands inside...

  • By
    5 Essential git Commands and Utilities

    For many of us, git and GitHub play a huge role in our development workflows. Whenever we have a tool that we need to use often, the more fine-tuned we can make that tool, the faster we can get things done. The following are five git...

  • By
    How to Set a Default Commit Message

    Having a default commit message is really useful for a number of reasons:It can formalize your commit messagesIt serves as a good reminder for the information you should add to your commit message, like issue numberIf you set it to "Drunk AF, don't accept this"To set...

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

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

  • By
    Vital Web Performance

    I hate slow websites. They are annoying to use and frustrating to work on. But what does it mean to be “slow”? It used to be waiting for document load. Then waiting for page ready. But with so many asynchronous patterns in use today, how do...

  • By
    Are You a Developer?

    “You’re not really a developer. Sooner or later people are going to realize you don’t know what you’re talking about. You’re just not good enough.”You’ve probably had thoughts like these at one point or another. You’ve never heard someone else tell you that you’re not a...

  • By
    Devising the Cloak of Invisibility in JavaScript

    Steganography. The art of hiding something right under your nose. For as long as humans have been alive, we’ve been trying to hide things — whether it’s our last slice of pizza or the location of a buried treasure. Do you remember the cool invisible lemon...

  • 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.Guest Blogger posts

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

    • By
      Lazy Load IFRAMEs

      We've known for a decade that lazy loading resources like JavaScript, CSS, and especially images is a massive performance win for web pages. At first we used tricks and JavaScript to do the lazy loading, but more recently native image lazy loading has debuted...

    • By
      JavaScript Picture-in-Picture API

      As a huge fan of media on the web, I'm always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom...

    • By
      Image Lazy Loading

      Lazy loading images is a practice that's been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in...

    • 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
      Awesome File Compression and Delivery with KeyCDN and Brotli

      I've seen the KeyCDN name around for years, mostly as a free content delivery network (CDN) for many open source JavaScript frameworks, and based on that alone I've always thought very well of them.  KeyCDN recently asked me to check out one of...

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

    • By
      5 Awesome JavaScript Promise Tricks

      The Promise API changed the game in JavaScript. We went from abusing setTimeouts and settling for synchronous operations to doing everything possible to leverage this new async API. Let's check out a handful of awesome Promise API tricks!Cancel a fetch RequestOne problem we...

    • By
      Logical Assignment Operators

      I love JavaScript, it's my favorite programming language, but I love dipping into other languages because they offer a new perspective on coding paradigms. There've been syntax additions to JavaScript that I've seen I found interesting (think ?? in optional chaining) and...

    • By
      Match Emojis with Regular Expressions

      When experimenting with unicode property escapes, to identify accented letters in strings, it reminded me of a question I had a few years ago: what is the best way to identify and then replace emojis in a string? I first noticed this practice...

    • By
      Simple Node.js Proxy

      When I wanted to refresh my React.js skills, I quickly moved to create a dashboard of cryptocurrencies, their prices, and and other aspects of digital value. Getting rolling with React.js is a breeze -- create-react-app {name} and you're off and running. Getting the API...

    • By
      Match Accented Letters with Regular Expressions

      Regular expressions are used for a variety of tasks but the one I see most often is input validation. Names, dates, numbers...we tend to use regular expressions for everything, even when we probably shouldn't.The most common syntax for checking alphabetic characters is A-z but what if...

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

    • By
      Remove the Search Input Clear(x) Icon

      I really appreciate the amount of different <input> elements we've received over the past decade. These elements don't just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element...

    • By
      Lazy Load IFRAMEs

      We've known for a decade that lazy loading resources like JavaScript, CSS, and especially images is a massive performance win for web pages. At first we used tricks and JavaScript to do the lazy loading, but more recently native image lazy loading has debuted...

    • By
      Offscreen Text for Copy &#038; Paste

      The relationship between HTML and CSS is special: mixing content via HTML with presentation from CSS to make an awesome presentation. Sometimes, however, you need to employ CSS tricks solely to enhance functionality. This could be one of those cases.When browsing through the Firefox...

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

    Media (69)

    • By
      JavaScript in SVGs

      SVGs are such an amazing tool for creating custom fonts, animations, size-reduced graphics, and more. They're part HTML, part image, and all awesome. Many websites have moved toward SVG instead of JPG, GIF, and PNG due to the flexibility that SVG provides.Whats one example...

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

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

    • By
      Kotlin Coroutines and Delay

      Whenever I suspect that there's a timing conflict causing a problem with rendering and directives, I usually opt for a JavaScript setTimeout with a delay. The setTimeout code never makes it to production, but it does help me to understand if my code is the...

    • By
      Mirror Android Device to Computer

      As I continue my adventure into Android development, pair programming has been a huge help in learning this new platform. When it's time to build and run the app, relying on the emulator is a fools' game -- the emulator is slow and it's hard to...

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

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

    • By
      Simple Node.js Proxy

      When I wanted to refresh my React.js skills, I quickly moved to create a dashboard of cryptocurrencies, their prices, and and other aspects of digital value. Getting rolling with React.js is a breeze -- create-react-app {name} and you're off and running. Getting the API...

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

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

    • By
      Vital Web Performance

      I hate slow websites. They are annoying to use and frustrating to work on. But what does it mean to be “slow”? It used to be waiting for document load. Then waiting for page ready. But with so many asynchronous patterns in use today, how do...

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

    PHP (220)

    • By
      How to Simulate Long HTTP Requests

      It happens less frequently these days but there are times when we need to accommodate for a HTTP request timing out. The service could be down, under heavy traffic, or just poorly coded, or any host of other issues.Whenever I need to simulate a...

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

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

    • By
      5 Awesome JavaScript Promise Tricks

      The Promise API changed the game in JavaScript. We went from abusing setTimeouts and settling for synchronous operations to doing everything possible to leverage this new async API. Let's check out a handful of awesome Promise API tricks!Cancel a fetch RequestOne problem we...

    • By
      Promise.allSettled

      The Promise object has many useful functions like all, resolve, reject, and race -- stuff we use all the time. One function that many don't know about is Promise.allSettled, a function that fires when all promises in an array are settled, regardless of whether...

    • By
      How to Cancel a Fetch Request

      JavaScript promises have always been a major win for the language -- they've led to a revolution of asynchronous coding that has vastly improved performance on the web. One shortcoming of native promises is that there's no true way to cancel a fetch...until now. A...

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

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

    • By
      Remove the Search Input Clear(x) Icon

      I really appreciate the amount of different <input> elements we've received over the past decade. These elements don't just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element...

    • By
      Logical Assignment Operators

      I love JavaScript, it's my favorite programming language, but I love dipping into other languages because they offer a new perspective on coding paradigms. There've been syntax additions to JavaScript that I've seen I found interesting (think ?? in optional chaining) and...

    • By
      Match Emojis with Regular Expressions

      When experimenting with unicode property escapes, to identify accented letters in strings, it reminded me of a question I had a few years ago: what is the best way to identify and then replace emojis in a string? I first noticed this practice...

    • By
      Match Accented Letters with Regular Expressions

      Regular expressions are used for a variety of tasks but the one I see most often is input validation. Names, dates, numbers...we tend to use regular expressions for everything, even when we probably shouldn't.The most common syntax for checking alphabetic characters is A-z but what if...

    • By
      Binding Arguments with Bind

      One of my favorite and most essential Function method is bind, a function we added to MooTools when it wasn't featured in the JavaScript language itself. We often think of using bind to simply bind a method's call to its host object, but did you...

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

    • By
      Devising the Cloak of Invisibility in JavaScript

      Steganography. The art of hiding something right under your nose. For as long as humans have been alive, we’ve been trying to hide things — whether it’s our last slice of pizza or the location of a buried treasure. Do you remember the cool invisible lemon...

    • By
      Unlock Your Mac with Apple Watch

      I convinced myself six months ago that I needed to give the Apple Watch a try. While I wear it every day and enjoy a few features, I've felt a bit let down by the experience. I do, however, believe that the Apple Watch...

    • By
      Validate CSP from Command Line

      The content security policy spec has been an amazing front-end security tool to help prevent XSS and other types of attacks. I'd go as far to say that every site should implement as specific CSP as possible. If you aren't familiar with CSPs...

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

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

    • By
      Detect git Directory with Bash

      One interesting aspect of working at Mozilla is that Firefox lives in a mercurial repository while several other projects live on GitHub in a git repository. While most focus on either Firefox or another project, I switch between both, leaving me running git commands inside...

    • By
      How to Set a Default Commit Message

      Having a default commit message is really useful for a number of reasons:It can formalize your commit messagesIt serves as a good reminder for the information you should add to your commit message, like issue numberIf you set it to "Drunk AF, don't accept this"To set...

    • By
      How to Specify User Agent with cURL

      Over the years I've shared how to perform a number of actions with cURL: how to send POST data, how to retrieve headers, follow redirects, check GZIP encoding, and more. Another useful cURL directive is sending the user agent, as some...

    • By
      View Mac Calendar from Command Line

      As someone that loves using UI tools, I do pride myself in learning how to accomplish the same feats from command line. Don't believe me? Check out my Command Line tutorials section -- I guarantee you'll learn quite a bit. Recently I learned that you...

    • By
      Git Branch Autocompletion

      Naming git branches is something most of us have down to a science. My branch naming pattern is usually {issue number}-short-feature-description, though many developers prefer to lead with the description and end with the issue.Regardless of the pattern you use, having a feature like autocomplete...

    Sponsored (174)

    • By
      5 Most Common Developer Portfolio Mistakes

      A portfolio site is one of the best marketing and sales tools you as a web developer have in your arsenal. And if it’s set up right, it’ll save you a bunch of time having to: Chase down new clients, Spend time convincing them to work with you,Answer...

    • By
      Easy Stock Market Quotes with marketstack

      The stock market is wild right now, at least in the United States. Between pandemic, political events, and everything else going on, the stock market is one swing after another. There are a host of services that give you stock quotes but I don't trust them;...

    • By
      Get Worldwide Postal Code Data with Zip Code API

      Accurate shipping and location information is well worth the price you need to pay for it. You can sell that information, you can target consumers to perfection, and save yourself loads of frustration when it comes to shipping. Creating your own location API isn't worth the...

    • By
      Free SSL Certificates with ZeroSSL

      During my early years in web development, one of the most costly and annoying tasks was securing and installing security certificates on client websites. Most providers charged hundreds of dollars for SSL certs and getting them configured properly was a huge source of stress. Securing...

    • By
      Track Your Keyword Placement with Ranktrackify

      I don't need to tell you how important search engine placement is. You either earn it with quality content, loads of SEO work, paying for placement, or all of the above. And even we you achieve best placement, you need to be wary of...

    Streaming (1)

    Theory / Ideas (78)

    • By
      3 Great Ways to Monetize Content

      Monetizing content on the web usually boils down to one thing: advertisements. The problem with adding advertisements to your website, especially from the popular ad services, is that they can be slow and they certainly don't protect user privacy. That's where alternative monetizing opportunities come into...

    • By
      Are You a Developer?

      “You’re not really a developer. Sooner or later people are going to realize you don’t know what you’re talking about. You’re just not good enough.”You’ve probably had thoughts like these at one point or another. You’ve never heard someone else tell you that you’re not a...

    • By
      How to Add Native Keyword Aliases to Babel

      Those of you who follow this blog know that not every blog post is an endorsement of a technique but simply a tutorial how to accomplish something. Sometimes the technique described is probably not something you should do. This is one of those blog...

    • By
      Tips for Working Remotely and Enjoying It!

      With the coronavirus spreading and employers telling employees work from home if possible, there are scores of people getting their first taste of working remotely. Depending on your experience and discipline levels, this could be a welcomed change or a complete culture shock. The...

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

    Tools (1)

    • By
      Expanding the Future (of Dev Tooling) with AI

      I'm writing to share some news that I'm genuinely excited about, not even just for me but for the rest of the developer community.Many of you know that I've been working with companies all over the world for nearly a decade, helping their developers learn JS...

    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
      Land Your Dream Job with Vettery

      Whether you're an experienced pro or someone new to the industry, finding a great job can be a scary, stressful process. Engineers and designers get inundated with Hacker Rank tests, portfolio requests, and a variety of other queries. Vettery improves the experience for free...

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

    _HideInContentAds (29)

    • By
      Land Your Dream Job with Vettery

      Whether you're an experienced pro or someone new to the industry, finding a great job can be a scary, stressful process. Engineers and designers get inundated with Hacker Rank tests, portfolio requests, and a variety of other queries. Vettery improves the experience for free...

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