Tutorial Topics

.htaccess (37)

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

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

  • By
    5 Ways to Make Your Site Smaller and Faster

    Confession:  I'd say once a week I genuinely wish I was a kid who spent his work day cutting grass and doing landscaping.  Why?  Because at the end of the day, they are able to say "the grass is cut, the job is complete."  As Web Developers, we...

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

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

  • By
    Try Treehouse!

    Treehouse has been a mainstay of web learning for a few years now and I'm amazed at how they've grown.  You'd expect them to teach basic stuff like web design and JavaScript, but they've moved on to broader but important topics like...

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

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

  • By
    How to Build Charts in Angular

    It is very easy to get lost in the flood of JavaScript frameworks and libraries that we, as front-end developers, have to choose from these days. Every week some new framework springs up and takes you back to the comparison board, making your task of selecting...

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

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

  • By
    Prevent Body Scrolling

    One of my pet peeves with fixed or absolute positioned elements is the <body> scrolling while you scroll the the positioned element.  Have you ever tried scrolling a dialog and seeing the page scroll in the background?  Awful user experience, bordering on embarrassing.  Yikes. So what's the best way...

  • By
    CSS user-select

    In my quest to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools.  The JSON Viewer component needed some love so that was first on my list.  While viewing the CSS for the JSON Viewer component, I saw something I...

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

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

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

Dojo (60)

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

  • By
    Clone Anything with JavaScript

    One topic or concept that causes confusion when developers start with JavaScript is the idea of passing objects by reference;  for example, setting two variables equal to the same object actually creates a reference to that same object.  Sending an object to a function and modify...

Events (23)

Features (49)

  • 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
    Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

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

  • By
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

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

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

  • By
    Making Sprite-based Games with Canvas

    The canvas element was introduced with HTML5 and provides an API for rendering on the web. The API is simple, but if you've never done graphics work before it might take some getting used to. It has great cross-browser support at this point, and...

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

git (24)

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

  • By
    Export and Import Patches with git

    Most of us that use git probably only have use GitHub -- thus is the popularity of their service.  If you (or a parent project) don't use a service like GitHub, however, you'll need to export patches for review.  Let's have a look at how to export a patch...

  • By
    git tag

    git tag is used to pin down a given revision as significant, often for the purpose of officially releasing code.  Once a tag is created, it's often referred to by build and deploy scripts instead of the tag's represented commit.  Tagging revisions  and deleting tags in git is easy...

  • By
    List Recent git Commits from Command Line

    GitHub is an amazing service which brings the boring, sometimes difficult git command line tool to life.  Oftentimes instead of futzing with the command line I'll simply bring up GitHub and find what I need.  In the year 2016, however, I'm trying to break away from GUI...

  • By
    Create a Global .gitignore

    The .gitignore file is cherished by developers because it can keep repositories clean after build files and OS-generated files (like .DS_Store) clutter the structure of your repository. What I find is that I'm constantly adding the same files and directories (like node_modules) to every repository...

Giveaways (10)

Google (53)

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

  • By
    Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

Guest Blogger (128)

  • 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
    WhitestormJS v2 Beta: New Ecosystem

    We always improve our apps: refactor, update dependencies, practices as well as user experience. In whitestorm.js v2 we update API, app structure. The main goal of the second version is to improve flexibility as much as we can. 3D rendering is a bit more complicated than I...

  • By
    How Blockchain Technology Will Secure Online Payments

    Look around at the business climate today and you will find a multitude of fintech startups, including bitcoin exchange ones. This tells us that the financial services industry is ripe for disruption, and the most prominent candidate is blockchain. Blockchain is to banks as the...

  • By
    Getting Started with Whitestorm.js

    What is whitestorm.js? Whitestorm.js is a framework for developing 3D applications or games that run in browser. This framework is basically a wrapper around Three.js library (like jQuery wraps DOM to make it easier to use). It extends Three.js with simple API and component...

  • By
    stdlib: Create Scalable Node.js Microservices in a Flash

    Hey everyone - today I have the honor of walking you through using the brand new service registry for microservices, stdlib. You can also check out stdlib on GitHub, which is the open source project we'll be using to generate service scaffolding and take care of package management.

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

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

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

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

  • By
    Convert String to DOM Nodes

    It wasn't too long ago that browsers were mostly stagnant when it came to implementing new APIs and features, leading to the rise of MooTools (FTW), jQuery, Dojo Toolkit, Prototype, and likewise JavaScript toolkits. Then we started doing more client side rendering and were forced...

  • By
    Unique Array Values

    When you look at any programming language, you see missing features that you find puzzling because the use case seems so common.  One such case is retrieving unique values from an array with JavaScript. Years ago I mentioned an easy way of unique value management using objects instead...

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

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

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

  • By
    Building Ambitious Web Applications with Ember.js

    Ember.js is a solid single page application framework for building modern web applications.Before Angular and React reached critical mass, Ember.js was leading the charge in building scalable single page applications. While the spotlight may have shifted, Ember.js remains a great and viable option...

Media (44)

  • By
    Normalize a Directory of mp3s

    Back in the early days of Napster, Kazaa, eMule, and other file sharing networks, I would download as many apps, movies, game, and movies as possible.  My illegal downloading was out of control; I would get DMCA notices from my ISP for apps and games I had...

  • 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
    Modify Video Speed with ffmpeg

    I watch a lot of sports and recently I've become fascinated with some of the methodologies they use to illustrate events within the game.  I don't have their advanced TV software or hardware, of course, but I do have a love for ffmpeg, which allows me to do...

  • By
    Slice Videos with ffmpeg

    Isolating a specified portion of a video is a very common task for those who work within the media, probably using nice GUI tools to slice clips from the full video.  I'm a developer, however, and know how amazing ffmpeg is so I prefer to do my basic video slicing from command...

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

Microsoft (16)

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

  • By
    Application Pinning with META Tags

    If there's one thing I want you to learn from the wide range of blog posts I've written, it's that it's the small things matter when you're creating your websites. Whether it's a one-page showcase, a business website, or an enterprise web application, there are...

Mobile (52)

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

  • 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
    Remove Mobile Firefox Button Gradient

    If you have an Android device, you've gotta check out Firefox for Android.  It's an outstanding mobile browser -- it has been very well received and you can even install apps from the Firefox Marketplace from within this awesome browser.  One usability practice implemented by Firefox for...

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

  • 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
    Follow URL Redirects with Node.js

    URL shorteners are a dime a dozen these days, and it is quite nice to have a pretty URL instead of a mile long string, but there are some downsides to URL shorteners:  they can mask dangerous URLs and getting to the endpoint can be slow, since you...

  • By
    System Notifications with Node.js

    Notifications can be a godsend or the bane of our existence these days.  Every app you install on your phone wants access to notifications, as do desktop apps, and now we have a Web Notifications API along with a Web Push API,  just in case you don't already have...

  • By
    Manage Bitcoin with the Coinbase API

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

  • By
    Node.js Raw Mode with Keystrokes

    I find the stuff that people are doing with Node.js incredibly interesting.  You here about people using Node.js to control drones, Arduinos, and a host of other devices.  I took advantage of Node.js to create a Roku Remote, a project that was fun and easier than I thought...

O'Reilly (19)

Optimization (42)

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

  • 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
    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
    Remote Debugging with Charles Proxy

    The most difficult part of supporting TV apps when you didn't create them and don't have access to the source code is debugging them when asked for help.  It's almost an unfair request -- "we wont give you access to edit the code but we want you...

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

Performance (25)

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

  • By
    Convert Image to Data URI with JavaScript

    Whenever I go on a "performance run" on a website, the first place I look is imagery.  Why?  Because you can save an image out of Photoshop, push it into ImageOptim or even TinyPNG, and save 70% on its file size.  What do most developers not consider?  Taking tiny image...

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

PHP (211)

  • By
    POST Form Data with cURL

    cURL is the magical utility that allows developers to download a URL's contentexplore response headers, get stock quotes, confirm our GZip encoding is working, and much more.  One more great usage of cUrl for command line is POSTing form data to a server...

  • 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
    Get Array Values Recursively with PHP

    I've been helping to write a WordPress plugin (I'm not ready to share it yet) and one of the tasks required is validating an array of user-selected values against a list of known valid values.  The known valid array is actually a key=>value array so unfortunately array_values wont help get...

  • By
    DOMDocument and UTF-8 Problem

    A few weeks back I shared how I used PHP DOMDocument to reliably update all image URLs from standard HTTP to HTTPS.  DOMDocument made a difficult problem seem incredibly easy ... but with one side-effect that it took me a while to spot:  UTF-8 characters were being...

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

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

  • By
    Building Ambitious Web Applications with Ember.js

    Ember.js is a solid single page application framework for building modern web applications.Before Angular and React reached critical mass, Ember.js was leading the charge in building scalable single page applications. While the spotlight may have shifted, Ember.js remains a great and viable option...

  • By
    JavaScript sleep Function

    The infamous sleep, or delay, function within any language is much debated.  Some will say that there should always be a signal or callback to fire a given functionality, others will argue that sometimes an arbitrary moment of delay is useful.  I say that to each their own...

  • By
    Permissions API

    Many of the functionalities that we're translated from mobile to the web require permission from the user.  Think about geolocation, audio/video access (think getUserMedia for camera access), and likewise APIs.  We can probably all agree that requiring permission for access to these APIs is a good thing, but I see a...

Python (10)

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

  • By
    Scraping iTunes Charts Using Scrapy Python

    Hacking is more fun when you have some data to play with, but from where do you get data when you are just hacking for fun? I use web scraping to make my hacks interesting and cool and have learned a lot in the process. In...

Quick Tips (190)

  • By
    Unique Array Values

    When you look at any programming language, you see missing features that you find puzzling because the use case seems so common.  One such case is retrieving unique values from an array with JavaScript. Years ago I mentioned an easy way of unique value management using objects instead...

  • By
    Slice Videos with ffmpeg

    Isolating a specified portion of a video is a very common task for those who work within the media, probably using nice GUI tools to slice clips from the full video.  I'm a developer, however, and know how amazing ffmpeg is so I prefer to do my basic video slicing from command...

  • By
    Sorting Strings with Accented Characters

    Strings can create a whole host of problems within any programming language.  Whether it's a simple string, a string containing emojis, html entities, and even accented characters, if we don't scrub data or make the right string handling choices, we can be in a world of hurt. While looking...

  • By
    CodeMirror: Set Focus at End of Line

    CodeMirror is a WYSIWYG-like editor that allows for rich text editing on a small scale, oftentimes used to allow Markdown editing, much like ReviewBoard uses it for.  One problem I've found, however, is that calling a CodeMirror instance's focus method put the cursor at the beginning of the input, which...

  • By
    Convert webm to mp4

    There's an upcoming Mozilla trip to Hawaii on the cards and, in trying to be a good family man, I'm bringing my wife and two young sons.  Glutton for punishment?  Probably.  Anyways, I've been feverishly downloading cartoons from YouTube using youtube-dl to put onto our new iPad to keep...

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

Security (28)

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

  • By
    Prevent XSS &#8220;on&#8221; Attribute Attacks in CKEditor 3.x

    CKEditor 3.x had issues with XSS /security issues with on attributes.  For example, you could trigger malicious code via an onerror attribute -- ouch!  Of course the problem has been fixed in CKEditor 4 but upgrading can be an issue if you have custom plugins.  Here's how the issue...

  • By
    An Introduction to Persona

    So you've heard of this new hipster login service called Persona. It promises to relieve you of dealing with passwords, and be easy to setup. Can it really? I'm here to walk you through setting up Persona on your own website, in just a...

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

  • By
    Normalize a Directory of mp3s

    Back in the early days of Napster, Kazaa, eMule, and other file sharing networks, I would download as many apps, movies, game, and movies as possible.  My illegal downloading was out of control; I would get DMCA notices from my ISP for apps and games I had...

  • By
    ding!

    I've been working with beefy virtual machines, docker containers, and build processes lately.  Believe it or not, working on projects aimed at making Mozilla developers more productive can mean executing code that can take anywhere from a minute to an hour, which in itself can hit how productive I can...

  • 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
    Modify Video Speed with ffmpeg

    I watch a lot of sports and recently I've become fascinated with some of the methodologies they use to illustrate events within the game.  I don't have their advanced TV software or hardware, of course, but I do have a love for ffmpeg, which allows me to do...

  • By
    Slice Videos with ffmpeg

    Isolating a specified portion of a video is a very common task for those who work within the media, probably using nice GUI tools to slice clips from the full video.  I'm a developer, however, and know how amazing ffmpeg is so I prefer to do my basic video slicing from command...

Sponsored (119)

  • By
    Handpicked Resources for 2017

    Let’s start 2017 with a great showcase of handpicked web resources that will make our projects easier. We’ve worked a couple of months to identify which are the best tools worth mentioning. Developers, web designers and individuals talked with us and they share their experience and...

  • By
    Apply to 100 Tech Companies with 1 Application

    Indeed Prime helps tech workers (e.g. software developers, data scientists, UX/UI designers, sales professionals) simplify their job search and land their dream job. Candidates get immediate exposure to the best tech companies with just one simple application to Indeed Prime. Companies on Prime’s exclusive...

  • By
    Pre-Built Websites â An Interesting Web Design Trend

    When you think every possible web design trend has already been invented, a new one comes along. A new web design trend is, in fact, on the horizon, and it differs in many ways from its predecessors. This new trend doesn't focus on aesthetics, or page load...

  • By
    Useful WordPress Tips, Tools, and Themes for Developers

    The following sets of tips, tools, and themes are designed to make your life as a website developer an easier one. The tips offered will help to keep your workflow running smoothly. The tools can help to keep you out of trouble; or understand what's happening should trouble...

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

Theory / Ideas (69)

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

  • By
    An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they're not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects - 394 of...

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

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 or 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 (0)

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

  • By
    O&#8217;Reilly Fluent Conf &#8211; San Francisco &#8211; 20% Discount

    Fluent: Spotlighting the Crucial Tools and Technologies of the Web The Web is undergoing countless transformations as new ways of interacting with it emerge, and keeping up with the sheer volume of new and changing web development tools and practices is a challenge for anyone...

  • By
    Offline Recipes for Service Workers

    "Offline" is a big topic these days, especially as many web apps look to also function as mobile apps.  The original offline helper API, the Application Cache API (also known as "appcache"), has a host of problems, many of which can be found in Jake Archibald's...

_HideInContentAds (13)

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

  • By
    O&#8217;Reilly Fluent Conf &#8211; San Francisco &#8211; 20% Discount

    Fluent: Spotlighting the Crucial Tools and Technologies of the Web The Web is undergoing countless transformations as new ways of interacting with it emerge, and keeping up with the sheer volume of new and changing web development tools and practices is a challenge for anyone...

  • By
    Offline Recipes for Service Workers

    "Offline" is a big topic these days, especially as many web apps look to also function as mobile apps.  The original offline helper API, the Application Cache API (also known as "appcache"), has a host of problems, many of which can be found in Jake Archibald's...