Tutorial Topics

.htaccess (38)

3D Animations (8)

  • By
    Crafting a 3D React Carousel

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

  • By
    Create a CSS Flipping Animation

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

  • By
    How Nesting 3D Transformed Elements Works

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

  • By
    Create a CSS Cube

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

  • By
    Create a 3D Animating Sidebar

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

AJAX (68)

  • By
    async & await

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

  • By
    Create a Basic Loader with JavaScript Promises

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

  • By
    fetch API

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

  • By
    Basic AJAX Request: XMLHttpRequest

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

  • By
    Get Bitcoin Value with curl or Node.js

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

Apache / Server (21)

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

  • By
    robots.txt Rerouting on Development Servers

    Every website should have a robots.txt file.  Some bots hit sites so often that they slow down performance, other bots simply aren't desirable.  robots.txt files can also be used to communicate sitemap location and limit request rate.  It's important that the correct robots.txt file is served...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

APIs (53)

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

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

  • By
    Change Mac App Icons

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

  • By
    Using Font Awesome Icons without <i> Tags

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

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

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

  • By
    Prism Line Number Plugin

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

Blog (99)

  • By
    10 Years

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

  • By
    Welcome to My Office

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

  • By
    Stylish, Secure Forms with Wufoo

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

  • By
    Professional &#038; Personal Goals for 2015

    The turn of the year is a natural time to get deep, think about how the past year went and put together goals for the new year.  Most goals become "pie in the sky" but it's important to aim high, right?  I've been thinking about the past...

  • By
    6 Reasons to Go Treehouse

    There are quite a few tech video tutorial websites on the internet but Treehouse is the web's best.  Of course it's easy to make that claim but here are some of the numerous reasons why that can only be true. Trying Treehouse is FREE Treehouse's sponsorship...

Bookmarking / Social (16)

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

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Books (10)

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

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

  • By
    Smashing Deal:  6 Smashing Books for Web Designers

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

  • By
    JavaScript Enlightenment by Cody Lindley

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

  • By
    Pro JavaScript with MooTools by Mark Obcena

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

Browsers (91)

  • By
    Create a Simple Web Extension

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

  • By
    Convert Websites to Apps

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

  • By
    Create WebPage Screenshots with Node.js and SlimerJS

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

  • By
    Set Chrome as Default Browser from Command Line

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

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

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

Canvas & SVG (36)

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

  • By
    Gamepad API and Xbox Controller on Mac

    The Mozilla MozVR team was demonstrating the open WebVR standard as well as A-Frame at GDC a few weeks ago and people were intrigued; some were surprised the web could handle VR, some probably just thought our VR line was smaller (it was by miles), and others saw...

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.

CSS (418)

  • By
    Focusing on Focus

    What's up my a11y allies? Were you ware that the mouse and keyboard handle focus differently? Well it's true. Both handle them differently, and depending on what browser you are in also matters...a lot actually. Focus is a crucial element to the usage and experience of the...

  • By
    Shoelace.css: A Back to the Basics CSS Starter Kit

    CSS frameworks such as Bootstrap and Semantic UI have become an essential part of web design. They provide the necessary resets, default styles, and components that save us hours and hours of work. Most CSS frameworks are built using preprocessors such as Less or Sass, which is...

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

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

CSS Animations (45)

  • By
    Simple Image Lazy Load and Fade

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

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

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

  • By
    Crafting a 3D React Carousel

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

  • By
    Intro to JavaScript Animation

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

  • By
    Reducing Memory Leaks when Working with Animations

    I have been doing a lot of work with Snap.svg recently and you may have already seen an article a while back regarding SVG animations. After the article had been published, I took some time out to review the code I had written and found that...

Demos (368)

  • By
    Chris Coyier: Some Amazing Work on CodePen III

    I'm back! David asked me to rope up some of my favorite stuff on CodePen again, which I both love doing, and wince at the thought of having to pick so few favorites. I like a ton of stuff on...

  • By
    Create Short Preview from Video

    Displaying a preview image before loading a video is common practice with web media these days; oftentimes that image preview is the video's first frame or an important frame from the video.  If you've visited an adult site recently (ahem), you will have noticed that not only do you get a preview image...

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

  • 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
    JavaScript Speech Recognition

    Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on.  Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...

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

Features (50)

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

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

  • By
    Conquering Impostor Syndrome

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

  • By
    Being a Dev Dad

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

  • By
    JavaScript Promise API

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

  • By
    7 Essential JavaScript Functions

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

Firefox OS (21)

  • By
    Web Audio API

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

  • By
    Spatial Navigation

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

  • By
    Get Element Dimensions After CSS Transform

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

  • By
    How to Test Firefox OS Apps on TV

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

  • By
    Geeksphone Peak Firefox OS Unboxing

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

Games (9)

  • 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
    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
    Gamepad API and Xbox Controller on Mac

    The Mozilla MozVR team was demonstrating the open WebVR standard as well as A-Frame at GDC a few weeks ago and people were intrigued; some were surprised the web could handle VR, some probably just thought our VR line was smaller (it was by miles), and others saw...

  • By
    Building a 3D MMO Using WebSockets

    Hi there! My name is Nick Janssen, creator of Ironbane, a 3D MMO that uses WebGL and WebSockets. With this article I would like to give you a better insight in MMO's and make you less afraid of the complexities involved in building one.

  • By
    Replicating the DOOM Screen Melt with JavaScript and Canvas

    I love retro games almost as much as I love development and from time to time I find myself addicted to games I haven't played in 20 or more years. This weekend while loading up DOOM on my speedy 486/SX (a full 66mhz of speed!) I...

git (28)

  • By
    Undo File Changes with Git

    One of my favorite features in modern text editors is their ability to integrate tools to format code upon every save.  When you're working on legacy projects, however, auto-formatting can be a problem; if you open a file that you don't explicitly change, the file may...

  • By
    Checkout the Previous Branch with git

    Command line shortcuts are can be a huge time saver, which is why I like creating bash aliases and and enjoy other tricks I've found.  I do have a list of tasks I don't yet have a shortcut for, like easy switching between my current...

  • By
    Create GitHub Pull Request and Issue Templates

    There's nothing more frustrating than getting an incomplete bug report.  I've often seen bug reports containing a useless "{x} feature doesn't work"; no steps to reproduce, no URL, no browser or device information, just a hopelessly vague message.  Similar is receiving a pull request or patch which doesn't...

  • By
    Track Empty Directories with git

    There are times when you'd like to track an empty directory within git but there's a problem: git wont allow you to add a directory that doesn't have a file in it.  The easy solution is putting an empty stub file within the directory, and the industry...

  • By
    Git Hook &#8211; npm install if package.json is Modified

    Most of the projects I work on these days contain a frequently-modified package.json file to manage dependencies.  You would think by know I'd be used seeing the package.json file when I did a git pull and it would trigger something in my head to execute npm install to ensure I...

Giveaways (10)

Google (54)

  • By
    Custom, Embeddable Site Search with Swiftype

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

  • By
    Set Chrome as Default Browser from Command Line

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

  • By
    Use Mozilla Firefox DevTools in Chrome

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

  • By
    Questions for Google AMP

    While writing the article for David Walsh’s blog I had posted a version of the article on Medium to have @cramforce, the lead on Google AMP, answer the questions brought up. Here is a link to the article where he posted those answers: bit.ly/1VCLBr0 As developers...

  • By
    Set Default Browser on Mac

    I like using edge browsers each day so that I'm aware of what features my website visitors will be seeing down the road, and to get an early glimpse at new browser and API features.  I prefer to do my basic browsing in Chrome Canary and...

Guest Blogger (137)

  • 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
    Thinking JavaScript

    I was teaching a JavaScript workshop the other day and one of the attendees asked me a JS brain teaser during the lunch break that really got me thinking. His claim was that he ran across it accidentally, but I'm a bit skeptical; it might just...

  • By
    Focusing on Focus

    What's up my a11y allies? Were you ware that the mouse and keyboard handle focus differently? Well it's true. Both handle them differently, and depending on what browser you are in also matters...a lot actually. Focus is a crucial element to the usage and experience of the...

  • By
    Shoelace.css: A Back to the Basics CSS Starter Kit

    CSS frameworks such as Bootstrap and Semantic UI have become an essential part of web design. They provide the necessary resets, default styles, and components that save us hours and hours of work. Most CSS frameworks are built using preprocessors such as Less or Sass, which is...

  • By
    Streaming Data with Fetch() and NDJSON

    *"If you stream it, you can do it" -- Walt Disney[^1] * Streams are trickling into the scene as we search for ways to improve performance. What if instead of waiting for our entire ajax response to complete, we could start showing the data as it arrives? Streams...

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

  • By
    Detect Supported Video Formats with JavaScript

    Over the past few years we've been seeing new audio, video, and image formats take shape to challenge the legacy formats that we've used since the web's inception.  This is a great development as we have more processing power and better compression algorithms have been developed...

  • By
    Six Tiny But Awesome ES6 Features

    Everyone in the JavaScript community loves new APIs, syntax updates, and features -- they provide better, smarter, more efficient ways to accomplish important tasks.  ES6 brings forth a massive wave of new goodies and the browser vendors have worked hard over the past year to get those language updates...

  • By
    HTML5 Video Player Best Practices

    Let's all be honest:  when it comes to media and the early days of the internet, we definitely did it all wrong.  We started with embedded video players like RealPlayer and Windows Media Player which required custom codecs and browser plugins, then moved on to Flash and...

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

  • By
    ping Attribute

    One of the attributes I somehow missed with the HTML5 revolution was the ping attribute;  Other attributes were more popular, download being one of them.  Hell, I just stumbled upon the ping attribute while reading an old forum post.  The ping attribute of an a element represents a...

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

  • By
    Detect Supported Video Formats with JavaScript

    Over the past few years we've been seeing new audio, video, and image formats take shape to challenge the legacy formats that we've used since the web's inception.  This is a great development as we have more processing power and better compression algorithms have been developed...

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

  • By
    Node.js Debugging

    Proper logging is of massive utility for web apps, both during development and after deployment.  What can sometimes be difficult is organizing both the code and output of logging, i.e. knowing where each log message is coming from.  I recently found debug, a Node.js utility...

  • By
    Object.create(null)

    One of the funnest parts of JavaScript, or any programming language really, is that there are loads of tiny tricks and quirks that make the language that much more interesting.  I recently learned a nice fact about Object.create:  using null as the only argument to create an...

  • By
    Node.js Port Scanner

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

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

  • 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
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

  • By
    Chained and Named Transformations with Cloudinary

    One of the big advantages to using Cloudinary is the ability to dynamically create images on the fly by modifying the URL via a directory structure-like pattern.  For example, adding w_300 to the URL path of an image hosted by Cloudinary generates an image with a...

  • By
    Instagram-like Filters with Cloudinary

    Apps like Instagram are a testament to how brilliant a few color modifications can make a photo.  We've seen hundreds of Instagram clones pop up, and even the CSS and Canvas specs have a filter property which allows us to modify imagery.  As nice as those APIs are...

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

Media (50)

Microsoft (17)

  • By
    Video Game Console Emulator

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

  • By
    Thoughts on Xbox One

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

  • By
    3 Solutions for Supporting Internet Explorer

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

  • By
    Free IE Virtual Machines

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

  • By
    Windows 8 Pin METAs

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

Mobile (54)

  • By
    Game of Thrones Snapchat Filter

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

  • By
    Prevent Mobile Browser From Sleeping

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

  • By
    Responsive Images with Client Hints

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

  • By
    JavaScript Battery API: Promises

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

  • By
    Responsive Images: The Ultimate Guide

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

MooTools (316)

  • By
    5 Best Practice Mentalities to Get Over

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

  • By
    Function Debouncing with Underscore.js

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

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

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

  • By
    Custom Getters and Setters with MooTools

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

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

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

Mozilla (15)

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

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

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

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

  • By
    Use Mozilla Firefox DevTools in Chrome

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

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

  • By
    Open Firefox in Private Mode by Default

    Opening a Firefox Private Window is oftentimes the first step persons who value privacy do when they open their browser.  That made me think:  can you configure Firefox to open in private mode by default?  It turns out you can. about:config When you type about:config in the address bar of...

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

  • By
    Node.js Debugging

    Proper logging is of massive utility for web apps, both during development and after deployment.  What can sometimes be difficult is organizing both the code and output of logging, i.e. knowing where each log message is coming from.  I recently found debug, a Node.js utility...

  • By
    Node.js Port Scanner

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

  • By
    Two-Factor Authentication with Node.js

    There are a variety of strategies for protecting your important online credentials.  We often hear about password managers and generators, but for me, the more important strategy is using two-factor authentication (2FA).  Passwords can be guessed, phone numbers can be spoofed, but using two-factor authentication essentially requires that user be in...

  • By
    JavaScript Deep Merge

    I recently shared how you can merge object properties with the spread operator but this method has one big limitation:  the spread operator merge isn't a "deep" merge, meaning merges are recursive.  Moreover nested object properties aren't merged -- the last value specified in the merge replaces the last, even when there are...

  • By
    Custom Neutrino Linting

    Last week my friend Eli Perelman shared Modern JavaScript Apps with Neutrino, an awesome new Node.js tool for creating amazing apps with minimal fuss.  No need to learn webpack, scour babel plugins, or search for what exactly is required to get a React.js app up and running -- just install...

O'Reilly (25)

Optimization (46)

  • By
    Observing Intersection Observers

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

  • By
    Detect WEBP Support with JavaScript

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

  • By
    Website Speed Test by Cloudinary

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

  • By
    JPEG Compression with Guetzli

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

  • By
    How to Reverse Engineer OS X and iOS Software

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

Performance (27)

  • By
    Observing Intersection Observers

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

  • By
    Detect WEBP Support with JavaScript

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

  • By
    Image Optimization with Cloudinary

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

  • By
    JavaScript Promise API

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

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

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

PHP (218)

  • By
    Custom Configuration for Phabricator

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

  • By
    Match Special Letters with PHP Regular Expressions

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

  • By
    Retrieve Custom Field Values for Phabricator Objects

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

  • By
    Add CSS and JavaScript Files to Phabricator Extensions

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

  • By
    Phabricator AphrontRequest / Save Error Fix

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

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

  • By
    Node.js Port Scanner

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

  • By
    async &#038; await

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

  • 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
    Promise.all for Rejections and Resolves

    Promises have been an incredible addition to JavaScript; they save us callback hell, make coding async more maintainable, and and allow us to keep track of multiple async processes at a time.  Promise.all comes to mind, allowing us to react when multiple promises have been resolved.  Unfortunately Promise.all only resolves when...

  • By
    Modernization of Reactivity

    Reactive programming has taken JavaScript by storm over the last decade, and for good reason; front-end development greatly benefits from the simplicity of writing user interface code that "reacts" to data changes, eliminating substantial error-prone imperative code tasked with updating UIs. However, while the popularity has...

Python (11)

  • By
    Get Python Requirements Package Hashes

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

  • By
    httpstat: Simple cURL Stats

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

  • By
    Serve a Directory via Python

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

  • By
    Python html5lib Skipped Elements

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

  • By
    Get a Python Package Version

    Part of maintaining a Django-based application like MDN's kuma is ensuring Python packages are up to date.  I was recently testing an upgrade on a remote system and needed to ensure that a given Python package was at the version number it should be.

Quick Tips (213)

  • By
    Detect Supported Video Formats with JavaScript

    Over the past few years we've been seeing new audio, video, and image formats take shape to challenge the legacy formats that we've used since the web's inception.  This is a great development as we have more processing power and better compression algorithms have been developed...

  • By
    Node.js Debugging

    Proper logging is of massive utility for web apps, both during development and after deployment.  What can sometimes be difficult is organizing both the code and output of logging, i.e. knowing where each log message is coming from.  I recently found debug, a Node.js utility...

  • By
    Object.create(null)

    One of the funnest parts of JavaScript, or any programming language really, is that there are loads of tiny tricks and quirks that make the language that much more interesting.  I recently learned a nice fact about Object.create:  using null as the only argument to create an...

  • 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
    Fill an Array with Sequential Values

    I've been contributing to Mozilla's awesome DevTools debugger because, well, I want to give back to the Firefox Engineers and all the developers who have stayed loyal to Firefox.  Having my hand in loads of Mozilla projects is really satisfying, especially for my ego. In any event...

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

  • By
    Using Cloudinary for eCommerce

    Nothing improves sales on the web than imagery and video.  You can describe an item a dozen ways but one picture can suck the user right in, multiple photos (including a nice zoom feature) can clinch the sale.  What does this mean?  It's important to provide users...

  • By
    Cloudinary React Components

    I've been experimenting a lot with both React and Cloudinary over the past six months and it's been a blast -- I'm learning a ton while also recovering the ambition and thirst I had as a young developer.  React has been a revelation:  an advanced JavaScript...

  • By
    Modern JavaScript Apps with Neutrino

    Utilize tooling that harnesses the power of Webpack with ease of simple presets to quickly start JavaScript projects, all without upfront configuration. Taking the plunge into starting a new JS project often brings along a significant effort into preparing your environment prior to starting development on the...

  • By
    State Reset and Update with React

    If you follow me on Twitter, you'll know that I've taken a real liking to React, as has seemingly everyone else in the JavaScript development world.  The React app I'm working on is relatively small, making fetch requests to send and receive data, rendering...

  • By
    Modernization of Reactivity

    Reactive programming has taken JavaScript by storm over the last decade, and for good reason; front-end development greatly benefits from the simplicity of writing user interface code that "reacts" to data changes, eliminating substantial error-prone imperative code tasked with updating UIs. However, while the popularity has...

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

  • By
    Node.js Debugging

    Proper logging is of massive utility for web apps, both during development and after deployment.  What can sometimes be difficult is organizing both the code and output of logging, i.e. knowing where each log message is coming from.  I recently found debug, a Node.js utility...

  • By
    Create a Waveform Image with ffmpeg

    Waveform images have a variety of uses and I've started seeing waveform images overlaying at the bottom of videos.  That type of feature seems useful if you want to see identify music in a video or specific spaces in a video which feature action.  If you're...

  • By
    Create Aliases in Bash

    Every developer likes a shortcut -- they're what make us more efficient in our work.  Of course there are good shortcuts and bad shortcuts (lazy coding, lack of security review, etc.), but let's stick with the positive and talk about a good shortcut:  bash aliases. We all have commands...

  • By
    Address Validation API with streetlayer

    There is so much of our web and eCommerce that consumers take for granted: payment types and validation, exchange rates, etc.  One of the aspects of eCommerce that should be a given, from both a developer and consumer perspective, is address handling.  We'd like to think the consumer enters...

  • By
    Track Empty Directories with git

    There are times when you'd like to track an empty directory within git but there's a problem: git wont allow you to add a directory that doesn't have a file in it.  The easy solution is putting an empty stub file within the directory, and the industry...

Sponsored (131)

Theory / Ideas (70)

  • By
    Conquering Impostor Syndrome

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

  • By
    Thoughts on Devices: 2016

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

  • By
    Being a Dev Dad

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

  • By
    Thoughts on the Upcoming Apple TV

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

  • By
    Confessions of a Web Developer XV

    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: I sometimes regret being a software engineer.  I've been doing a lot of manual labor for a friend...

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

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

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

VR (1)

  • By
    Get Query String Parameters with JavaScript

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

Vue.js (1)

  • By
    Creating a Cloudinary Vue Component

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

WordPress (38)

  • By
    Add META Tags to WordPress Head

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

  • By
    WordPress Publish Post Hook

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

  • By
    Using DOMDocument to Modify HTML with PHP

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

  • By
    Add Custom CSS to WordPress Admin

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

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

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

_Functional (1)

  • By
    Safari Learning Platform: Half Price. 48 Hours Only.

    For 48 hours only, get a full year of Safari membership for only $199—that’s a savings of $200. Get full, unlimited access to everything the Safari learning platform offers—and that's a lot—live online training, learning paths, interactive tutorials, case studies, books and videos from...

  • By
    Digital Signatures with the âHelloSign API

    We're living in a world with loads of digital capabilities yet somehow any time I need to sign anything for legal purposes, I'm sent paper to print out, sign, scan, and send back.  I don't own a printer so I usually just find a "signature"...

  • By
    Job Hunting Simplified With Hired

    On Hired the traditional process of finding a job is completely reversed; instead of you applying to companies, companies apply to you! From there, the power is 100% in your hands to decide if the opportunity is a good fit and whether or not...

  • By
    Complete Server Stability and Security with Plesk

    Every few years my hosting sponsor will provide me a new VPS to host this WordPress blog.  I love having a VPS so I have complete control over my server and the environment but one thing I do know is that I don't want to play...

  • By
    Advanced Real User Monitoring With Raygun Pulse

    When I was a teenager, I had a newspaper round as my first 'real job', and I would be paid peanuts to walk the streets and deliver the local news to households throughout my neighbourhood. I had some frustrations with the job, and didn't really...

_HideInContentAds (15)

  • By
    Safari Learning Platform: Half Price. 48 Hours Only.

    For 48 hours only, get a full year of Safari membership for only $199—that’s a savings of $200. Get full, unlimited access to everything the Safari learning platform offers—and that's a lot—live online training, learning paths, interactive tutorials, case studies, books and videos from...

  • By
    Digital Signatures with the âHelloSign API

    We're living in a world with loads of digital capabilities yet somehow any time I need to sign anything for legal purposes, I'm sent paper to print out, sign, scan, and send back.  I don't own a printer so I usually just find a "signature"...

  • By
    Job Hunting Simplified With Hired

    On Hired the traditional process of finding a job is completely reversed; instead of you applying to companies, companies apply to you! From there, the power is 100% in your hands to decide if the opportunity is a good fit and whether or not...

  • By
    Complete Server Stability and Security with Plesk

    Every few years my hosting sponsor will provide me a new VPS to host this WordPress blog.  I love having a VPS so I have complete control over my server and the environment but one thing I do know is that I don't want to play...

  • By
    Advanced Real User Monitoring With Raygun Pulse

    When I was a teenager, I had a newspaper round as my first 'real job', and I would be paid peanuts to walk the streets and deliver the local news to households throughout my neighbourhood. I had some frustrations with the job, and didn't really...