JavaScript Tutorials
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...
Scroll to Element within CKEditor
CKEditor is the outstanding WYSIWYG editor we use on the Mozilla Developer Network. We have many custom plugins and we do everything we can to make writing easy for contributors. One trick I just picked up was skipping to an element within the editor by ID and setting the...
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...
GSAP + SVG for Power Users 3: New 1.18.0 Features
This is the third 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...
Access Native Node.js Modules within Intern
Intern is an awesome unit and functional test suite from SitePen. I've been using this utility extensively over the past year, writing tests to make sure MDN's front-end is in good shape after code merges and pushes. Sometimes when writing tests I'll want to make use of a node...
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...
Creating an Animated Product Slider with Sequence.js
In this tutorial, we're going to create a simple animated content slider with Sequence.js. We'll base our demo on the Sequence.js Theme, Mono. For the sake of brevity, our demo won't include everything that Mono does but you'll learn all of the Sequence.js key concepts...
IFRAME contentWindow is null
I like clean code so I do what I can to avoid unwanted JavaScript global variables. I initially thought that
keys(window)
would give mewindow
property leaks but that didn't work because browsers returned different results, so I moved on to using anIFRAME
to compare default...Get Global Variables with JavaScript
JavaScript globals are considered bad. And as a contributor to the MooTools project, I've heard this on a daily basis for the better part of a decade. MooTools got knocked for extending natives but also for placing objects in the global space, like
Browser
and$$
. I find...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...