Tag Archives : How-To July 2014

• Flexbox Sticky Footer

  Posted : July 24, 2014 | Filed Under : CSS

  We’ve all heard of the famous sticky footer and of course there are 101 million ways to skin that cat (Example 1, Example 2, Example 3 …and so on). Let’s take a look at a way to do this same idea, but using Flexbox. Read More →

• Orbit Button Glow

  Posted : July 2, 2014 | Filed Under : CSS

  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

  Posted : June 23, 2014 | Filed Under : Workflow

  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

  Posted : January 31, 2014 | Filed Under : Accessibility

  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

  Posted : May 12, 2013 | Filed Under : Workflow

  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 →

• Which Git? How to Keep Git Up To Date on Mac

  Posted : February 19, 2013 | Filed Under : Git

  As we all know the majority of the Web development community uses Git. The funny part to the whole story is the fact that most developers don’t even know what version they’re using. Read More →

• Silky Smooth Hopping: How to SSH with ease

  Posted : February 6, 2013 | Filed Under : Workflow

  “Silky Smooth Hopping” is a term coined by Paul Irish at the HTML5DevConf held by marakana on November 5^th, 2012. It’s a way to login via ssh painlessly and with ease. You’ll need to know what the Terminal is before you begin, and have some knowledge of basic commands (e.g. listing directories, viewing file contents, etcetera). You’ll also need to know how to create a public ssh key with a service such as Github. What we’re gonna do is really not that difficult –and honestly, I’m no Terminal whiz either so I’ll make sure to hold your hand every step of the way. Read More →