Demos & Downloads

• Mighty Deals: WordPress Shortcodes Plugin + 3 Premium WP Themes

  A while back I wrote a post about WordPress Shortcode creation.  Shortcodes are convenient and useful on so many levels and for so many levels of skilled WordPress users.  A basic user can quickly learn shortcodes, as can an expert-level developer.  In short, shortcodes are an invaluable tool for all levels of WordPress user.  Mighty Deals is offering a WordPress plugin containing 5,000 WordPress shortcodes plus three bonus themes for less than $20.  Shortcodes include...

  Read Post View Demo

• CSS

  CSS Counters

  Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole "hit counter."  CSS counters allow for simple CSS-based incrementing and display of a number for generated content.  Let's have a quick look at how CSS counters work!

  Read Post View Demo

• CSS CSS Animations Markup

  Multiple Background CSS Animations

  CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements.  I was recently asked if it was possible to have multiple background animations on a given element and the answer is yes...with concessions.  Let's take a look at how it's done!

  Read Post View Demo

• CSS CSS Animations

  CSS Background Animations

  Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates the background image (via background position) of a given element.

  Read Post View Demo

• CSS Markup

  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.  Check this out!

  Read Post View Demo

• Blog

  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.

  Read Post View Demo

• Optimization

  Incredible Analytics with Crazy Egg

  Analytics tracking is an important part of ensuring the success of any website or app, and the better information you get, the more you can do with that information.  I've always loved and appreciated what Google Analytics provides in the way of basic information, but GA's lacked in visual presentation and "snapshot storage" of analytics.  I recently found Crazy Egg, another analytics vendor which focuses more on visual representations of visitor data than basic visit and pageview numbers.  Let me share with you how Crazy Egg works and how it can help you learn more about your visitors!

  Read Post View Demo

• CSS JavaScript Markup

  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 called Helium is available to help developers detect selectors in their stylesheets that are unmatched or malformed.  Let me show you how it works!

  Read Post View Demo

• CSS Features JavaScript

  CSS @supports

  Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we do check for CSS property support with JavaScript which leads to brief flashes of content, hopeful code and support, and other problems.  Firefox, Chrome, and Opera have just recently added support for CSS @supports (CSS) and CSS.supports (JavaScript) to detect browser support for a given style directive.  Let's see how it works!

  Read Post View Demo

• CSS CSS Animations JavaScript

  Detect Pseudo-Element Animation Support

  A while back I posted an interesting tidbit from Daniel Buchner which allows developers to detect DOM node insertions with JavaScript and CSS animations; an awesome trick driven by CSS animations.  Lea Verou recently posted another detection snippet driven by CSS animations:  detecting pseudo-element animation support.  Here's how she did it!

  Read Post View Demo

• Browsers CSS JavaScript

  Detect Vendor Prefix with JavaScript

  Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format ("-moz-", as in -moz-element) and the JS format ("navigator.mozApps").  The awesome X-Tag project has a clever bit of JavaScript magic that detects those prefixes in the browser environment — let me show you how it works!

  Read Post View Demo