Sunday, May 25, 2014

Frame-by-frame animation with HTML and JavaScript

Frame-by-frame animation with HTML and JavaScript

Animations can make your project stand out from the crowd. Good animations enhance the user interface, make navigation feel smoother and offer a superior esthetic experience (bad animation does the opposite, so be careful). Modern browsers support animations quite well, but there are so many different ways of animating HTML elements that it often confuses even experienced developers.

Saturday, May 24, 2014

JavaScript Prototypes, Scopes, and Performance: What You Need to Know

JavaScript: More than meets the eye

JavaScript can seem like a very easy language to learn at first. Perhaps it's because of its flexible syntax. Or perhaps it's because of its similarity to other well known languages like Java. Or perhaps it's because it has so few data types in comparison to languages like Java, Ruby, or .NET.

Saturday, May 24, 2014

Parallax Done Right

Parallax Done Right

Getting great performance with parallax is tough. Here's how to make it happen.

Tldr; There are an easy handful of things you can do to get buttery parallax scroll. Check out a demo I cooked up to see it in action.

Saturday, May 24, 2014

Morphing Buttons Concept

Morphing Buttons

Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.

Saturday, May 10, 2014

The Absolute Beginner's Guide to Node.js

The Absolute Beginner's Guide to Node.js

This is a republished blog post by Brandon Cannaday. Brandon is the CTO of Modulus, a Node.js application hosting platform. Brandon organizes the Indianapolis Node.js meetup and enjoys speaking at conferences about Node's horizontal scalability. Prior to Modulus, Brandon worked in the chemical detection and telecommunications industries.

Friday, May 09, 2014

Six Common Problems With The UX Process and Six Solutions!

Six Common Problems With The UX Process

How robust is your user experience design process? We all have our favored methods and techniques, but the general process is similar: Conduct research, prototype, then present to stakeholders and users.

Thursday, May 08, 2014

7 Things You Didn’t Know You Could Do with CSS

7 Things You Didn’t Know You Could Do with CSS
CSS and JavaScript, believe it or not, are starting to overlap as CSS adds more functionality. When I wrote 5 Ways that CSS and JavaScript Interact That You May Not Know About, people were surprised at how CSS and JavaScript have come to overlap. Today I will highlight seven tasks you can accomplish with CSS -- no JavaScript or imagery required!

CSS @supports

Every good front-end developer feature-tests before using features which a browser may not have. Feature testing has always done with JavaScript, and many people use Modernizr, an impressive utility packed with loads of well-tested routines, to do that feature testing. A new API, however, has come along to let you do feature tests with CSS: @supports. Here are a few samples of how @supports works:

Monday, May 05, 2014

Injecting SVG With JavaScript

Injecting SVG With JavaScript

"Injecting SVG" – it sounds kinda complicated I know, but trust me it's not. It's actually super-simple! Right now you're probably thinking "Why would you use JavaScript to inject SVG markup? What is it? And how does it work?". Let me explain.

Saturday, May 03, 2014

Off Canvas Menus with CSS3 Transitions and Transforms

Off Canvas Menus

Off Canvas Menus are used primarily with Mobile and touch devices and can provide an extremely useful and beautiful experience for your users. This tutorial will cover an introduction on them, a getting started guide, some improvement tricks, and then finally some awesome demos for you to build off of. Instead of JavaScript, we'll use CSS3 Transitions and Translations for the animation making them smoother, better performing, and easier to tweak and customize.

Thursday, May 01, 2014

Chrome DevTools Features You May Have Missed

Chrome DevTools

In 2013, I posted a few tutorials on DevTools: Markup and Style, Networking and the Console and JavaScript and Performance, covering the basic features of the various DevTools panels. Since then, a lot has changed, so let's take a look.