Markup Tutorials
Referencing a Script’s Own Tag
There are times when the contents of an external script may want to reference its own
SCRIPT
tag. There are times that developers may want to detect attributes of the script tag which act as options for the script; this is a practice that's been done...Unicode CSS Classes
CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores. One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.
Detect Unmatched CSS Selectors with Helium
One thing I can't stand is extra code. Whether it's an extra CSS or JavaScript file that's been included by the page, bloated HTML, or unoptimized images, we're making our millions of of desktop and mobile visitors pay for our laziness and mistakes. A great tool...
Get Element Attributes with JavaScript
What I love so much about JavaScript is that the language is incredibly dynamic. So dynamic that you can modify native objects if you so choose. One dynamic property I've frequently been using lately is the
attributes
property of DOM elements. Thisattributes
property provides me...5 Common Usability Mistakes and Solutions For Avoiding Them
I'm sort of a grumpy web user, but I think that's part of what drives me to be a good Web Developer. I get so annoyed at things that make using a website difficult, things that should be basic. Here's a list of five common usability...
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...
Redacted Font
Back when I created client websites, one of the many things that frustrated me was the initial design handoff. It would always go like this: Work hard to incorporate client's ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client...
jQuery Wookmark
The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should." Basic web users probably think nothing of it but as a developer, I can appreciate the...
Spoiler Prevention with CSS Filters
No one likes a spoiler. Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know. As a possible provider of spoiler content, some sites may choose to warn users ahead...
Create a Sheen Logo Effect with CSS
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...