Tag Archives : How-To July 2014

  • Orbit Button Glow

    Maybe you’ve seen this type of interaction already if you’ve taken a glance at Polymer’s paper components. The idea is that when a click event is triggered an orb like glow appears and then vanishes at the end of the event. It’s a nice and subtle way to provide user feedback when they interact with an element on your page, but also doesn’t break layout if it sits next to other items. We achieve the effect through the use of keyframe animations, class toggling with JavaScript and using the animationend listener made available via JavaScript. Read More →

  • Emmet Hot Key: Open & Closing Tag

    Quick keys are the best thing since sliced bread when you have a firm grasp of them and use the ones you care about the most. I’ve been doing some research to discover a few favorite quick keys with my editor of choice and wanted to share one that I think is pretty hawt! Read More →

  • Coding for Touch & Click Events

    Recently I watched a video on building for touch screens that discusses the challenges when building for touch and keyboard interactions —something that is on the mind of many, many, many, many, many people and something I’ve written about before. So what’s the best way to deal with touch at the moment? Modernizr? Well, detecting for touch primarily using something like Modernizr.touch can sometimes lead to false positive results plus it can be dangerous to make that assumption when a device also includes a keyboard. Read More →

  • Keeping your front-end tool chain up-to-date : Node, NPM and Ruby

    WARNING! I use a Mac so these comments and examples are from the point of view of a Mac owner.

    Setting up an environment with the required dependencies can be a chore to be blunt. Here’s a rundown of the best approaches to keep these dependencies in place once they’re installed. This is not an article about installation, but what to do once they are installed and maybe a few hot items/points of interest to enhance your experience. As a FRED these days you’ll certainly run into a project that may have node or may use Ruby and knowing how to operate in these environments plus keep them updated can be a huge advantage to you or your team members. Read More →