Markup Tutorials
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...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...
File Input accept Attribute
The HTML5 revolution provided us several simple but important attributes like
download
,autofocus
,required
,novalidate
, andplaceholder
. There's another one you may want to know about:accept
. Theaccept
attribute is useful forinput[type=file]
elements. Let's have a look at it! The HTML I'll...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...
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...
Getting Dicey With Flexbox
What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...
Get HTML5 Camera and Video on iPhone
One of the questions I get asked most often via my contact form is how to get access to the camera and video recorder on the iPhone from within the browser. It's a valid question, one that I've not come across in the needs of...
File API
Working with file uploads, especially on the front end, was always a hassle. We didn't use to be able to drag and drop files, complete AJAX uploads, provide multiple files, and hell, we couldn't get any information about the file until it hit the server; you'd...
Font Loading Techniques
It seems as though most websites use non-default fonts these days and who can blame them? System fonts are all pretty boring and custom fonts add a bit of flare and freshness to a site's design. The problem with using custom fonts, however, is they can really...
Get HTML5 Video Duration
HTML5 video is exciting, if only for the reason that we no longer need Flash or other third party plugins to render media. We can also create custom controls and displays around the video, and one of those displays should be the duration of the video. Let me...