Tutorials Page 4

  • CSS CSS Animations JavaScript

    Detecting CSS Animation Completion with JavaScript

    One fact of web development life in 2014 that's been difficult for me to admit is that the traditional JavaScript toolkit is mostly dead.  For years we relied on them for almost everything but now that JavaScript and CSS has caught up with what we need, we can often avoid using JavaScript toolkits if we take the time to research new native capabilities.  One argument for sticking with toolkits that I often hear is that CSS animations don't provide callback abilities.

    Read Post View Demo
  • Bookmarking / Social JavaScript

    Retrieve Twitter and Facebook Counts with JSONP

    I've been annoyed that many popular APIs have moved to require authentication in order to retrieve information.  If I can browse a page and get said information, why can't I simply pull it with some simple code and skip the authentication bit?  I had thought that both Twitter and Facebook required authentication to retrieve basic post counts, but it turns out you can grab those with JSONP.  Here's how you do it.

    Read Post
  • JavaScript FrameBuster Snippet

  • CSS JavaScript

    Tweet For Code #2

    You don't need a thousand lines of code to make a big difference in any coding language.  Oftentimes it's quite the opposite:  a few tiny code snippets can do a world of good and accomplish big things.  I asked my Twitter followers to tweet to me their favorite tiny snippets of code — that's a bit difference to try to pack into 140 characters!  Here are my favorites from this round!

    Read Post
  • Link HREFLANG

  • Browsers Microsoft

    3 Solutions for Supporting Internet Explorer

    In the beginning, Internet Explorer was the progressive browser.  After a period of inactivity, Internet Explorer became the bane of our existence.  Microsoft has since recommitted to their browser but the fact remains that sometimes modern Internet Explorer is lagging just a bit behind WebKit-based browsers and Firefox.  We also need to accommodate for earlier versions of IE.  The following will allow your sites to quickly and almost magically work better in Microsoft's flagship browser!

    Read Post
  • CSS

    Style External Links with CSS

    Styling external links is a common practice on most informational sites likes Wikipedia.  As a user, it's nice to know when you're being sent to another resource.  Many sites do the external links check on the server side, adding a `rel=external` attribute value or `external` class to external links.  In some cases that isn't possible or plausible.  After trolling around the interwebs, I found the following useful CSS snippet for styling external links...

    Read Post
  • CSS CSS Animations Demos Features Markup

    Create a CSS Flipping Animation

    You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the latered Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations.

    Read Post View Demo
  • JavaScript

    JavaScript Debounce Function

    One of the biggest mistakes I see when looking to optimize existing code is the absence of the debounce function.  If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it bricks browser performance.

    Read Post