The David Walsh Blog

Demos & Downloads

  • Uncategorized

    SenchaCon 2013: Live Like a Rock Star

    There are a handful of outstanding front-end development organizations and Sencha is right at the top of them.  Sencha has done some incredible work, all the way back to the ExtJS days to the modern day Sencha Touch library.  Sencha continues to push the limits of front-end web development and performance, as evidenced by last year's revelation FastBook.  Mark Zuckerburg claimed HTML5 wasn't ready so Sencha shocked the industry with a world class, performant Facebook app.  In short:  Sencha doesn't mess around.

    Read Post View Demo
  • CSS

    CSS content and attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a bit of this with CSS counters, where we used the counter and counters expressions to set the content of a given element.  There's another expression, attr, that allows for CSS-based content creation as well. Let me show you how attr an content can work together!

    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