Updated on May 21, 2015 in Learn
How to Evaluate Front-End Code for Inefficiencies
There’s more to writing good front-end code than knowing every HTML tag, CSS selector, or the latest front-end features and techniques. And as I mentioned in a recent blog post, writing good code takes a lot of patience and practice….
Updated on May 21, 2015 in Learn
A Tale of Front-end Sanity: Beware the Sass @import
Imagine coming into work on your first day as a front-end designer or dev and getting your Rails development system up and running for the first time. You’re really excited to start working on something in the app or website…
Updated on May 21, 2015 in Learn
Using Emmet to Speed Up Front-End Web Development
Emmet is a plugin for your text editor that provides a number of tools to help you quickly write HTML and CSS code. The plugin, which was previously known as Zen Coding, allows you to generate HTML elements using a…
Updated on July 14, 2015 in Learn
Challenges & Solutions for Your Responsive Navigation
One of the biggest hurdles when creating a responsive website is implementing the navigation – hands down. Not just from a design standpoint, but from a content and development standpoint as well. Debatably the most important element on the page,…
Updated on August 4, 2022 in Learn
An Introduction to Source Maps
One of the easiest performance wins you can gain for your website is to combine and compress your JavaScript and CSS files. But what happens when you need to debug the code within those compressed files? It can be a…
Updated on July 14, 2015 in Learn
Intentional Breakpoints with CSS Transitions
Responsive Web Design is more than just a few lines of code in your HTML & CSS. It’s an approach to building websites that requires us to think about the entire user experience. This means accepting that the user won’t…
Updated on July 14, 2015 in Learn
Getting Started with Stylus
Within the web development community, we hear a lot about two popular CSS preprocessor: Sass and LESS. You don’t often, however, hear about the third big preprocessor: Stylus. When it came to redesigning the Mozilla Developer Network, I chose Stylus…
Updated on October 22, 2018 in Learn
A Preview of The New Dialog Element
The <dialog> element originally entered the HTML5 scene as a way to markup conversations but it was cut from the spec back in 2009. However now it’s back, and it has a brand new role. The new <dialog> element makes…
Updated on May 21, 2015 in Learn
Multiplane Design with SVGs and CSS 3D Transforms
Recently I tweeted about my experimentations with an idea that I’m calling multiplane design. I’ve been experimenting with multi planing using 3D and SVGs: http://t.co/l4h1slT4jK Only works on desktop Chrome/Safari (for now). — Nick Pettit (@nickrp) August 4, 2013 Right…
Updated on May 21, 2015 in Learn
CSS Tip: A Better Clearfix with Sass
The CSS clearfix has been a must-have in our web design toolkit for quite some time and, until new layout features like flexbox become more stable, we’ll always need some form of clearfix in float based layouts. There are several…
Updated on May 21, 2015 in Learn
CSS Tip: Better Rounded Borders
We’ve all used border-radius in our designs to round the corners of images, divs, navs, etc. But have you ever noticed what happens when a thick border is added to an element with a border radius? As we learned in…
Updated on May 21, 2015 in Learn
Build a Gmail-Style Expanding CSS3 Navigation Menu
Users of GMail should be familiar with sliding effects of the inbox side navigation. In the most recent design you will find the GChat/Hangouts box along with other various email tags(inbox, trash, etc.). When you have a large number of…