Article Archives

4 comments

Squigglevision

It's a term for animation where the lines appear to squirm around, even when the object/scene is at rest. Apparently, it's even patented. It's part of the iconic look of shows like Dr. Katz:…

20 comments

A Quick Overview of `object-fit` and `object-position`

object-fit and object-position are my two favourite CSS properties lately. They give developers control over the content inside an img or a video similar to the way that we can manipulate the content of a background with background-position and background-size.…

​Sponsored: What salary could you be earning?

If you want to know what you're worth, Hired has the answer: with data from thousands of real interview requests and job offers, we've put together a salary calculator that can tell you what you could be making in your job based on the skills you have.

If you want to find out how much more you could actually earn, join Hired. Just set up your profile, and companies will give you job offers with salary and equity upfront before …

31 comments

Making a Simple Image Resizing/Optimizing Service in Automator

As I was using Photoshop to resize my eleven billionth image, it occurred to me I should probably simplify this process. AppleScript, perhaps? Photoshop scripts? Some already existing little app? A little pontification on Twitter resulted in a number of suggestions to try OS X's Automator. Turns out it's a pretty easy thing to do, at least in a limited way.…

Using calc() to fake a media query

A bonafide CSS trick by Rémi Parmentier. It's used in the context of emails here, but it's a clever trick in it's own right.

This is the trick:

/* When parent is 500px wide... */ .block { min-width: 50%; /* 250px WINNER */ max-width: 100%; /* 500px */ width: calc(480px - 100%) * 480); /* -9600px */ } /* When parent is 400px wide... */ .block { min-width: 50%; /* 200px */ max-width: 100%; /* 400px WINNER */ width: calc(480px
20 comments

I Heart CSS

I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics and, like love itself, it can be communicated in many ways. Consider the variety of options we have to write black in CSS:

  • #000000
  • #000
  • rgb(0, 0, 0)
  • hsla(360, 100%, 0%, 1)
  • black

In the spirit of Valentine's Day, I thought it would be fun to push this concept a little further with the many ways …

Introducing Vector Networks

The team working on the upcoming design tool Figma demonstrate how vector path making will work. Think of the Pen Tool in Adobe software, rethought. This new approach certainly looks more intuitive, especially with how easily curves can be manipulated.…

42 comments

Why npm Scripts?

The following is a guest post by Damon Bauer. There has been a growing sentiment (for instance) that using node packages directly, with the command line interfaces they provide, is a good route to take. As opposed to abstracting the functionality away behind a task runner. Partly: you use npm anyway, npm provides scripting functionality, why not just use that? But there is more to it than that. Damon will walk us through the thinking, but also

17 comments

Building a Jekyll Site – Part 1 of 3: Converting a Static Website To Jekyll

The following is a guest post by Mike Neumegen from CloudCannon. Mike and I talked about doing a little series on building Jekyll sites, which of course I was into because Jekyll is great and more education around static site generators is a good thing. Full disclosure, Mike's company CloudCannon is a CMS on top of Jekyll. As part of this series he's going to show you how to use that, so I requested it be a sponsored post.

20 comments

I Learned How to be Productive in React in a Week and You Can, Too

This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard …

12 comments

The `background-clip` Property and its Use Cases

background-clip is one of those properties I've known about for years, but rarely used. Maybe just a couple of times as part of a solution to a Stack Overflow question. Until last year, when I started creating my huge collection of sliders. Some of the designs I chose to reproduce were a bit more complex and I only had one element available per slider, which happened to be an input element, meaning that I couldn't even use pseudo-elements on …

​Sponsor: O’Reilly Fluent Conference

This year, the O'Reilly Fluent Conference (March 7-10 in San Francisco) brings you new 2-day, in-depth training courses in topics like React, CSS Layouts, Website Planning and Design. You'll also find case studies, introductions to new tools and technologies, best practices, inspiring keynotes, the ever-lively expo hall, and nonstop networking opportunities. Take a look at the schedule and see how it measures up against the problems you need to solve or the things you promised yourself you'd learn. Fluent could …

5 comments

Building & Maintaining OUI (Optimizely’s UI Library): Part 1/2

The following is a guest post by Tom Genoni. Tom is going to introduce us to the thinking and process behind Optimizely's new UI library / Sass framework. Part 2, by Daniel O'Connor, looks at some of the technical and integration bits.

When I first started working on web projects, stylesheets were seen as a necessary evil. It was neither a real language to be taken seriously by a computer-science minded engineer nor simple enough for a …

Hey, Look What Day It Is

One of my favorite self-declared holidays.

Interesting tidbit. It was considered a mistake by the CSS Working Group:

Box-sizing should be border-box by default.…

9 comments

Choosing the Right Markdown Parser

The following is a guest post by Ray Villalobos. Ray is going to explore many of the different varietals of Markdown. All of them offer features beyond what the original Markdown can do, but they offer different features amongst themselves. If you're choosing a version to use (or a version you're offering to users on your web product), it pays to know what you are getting into, as it's difficult to switch once you've chosen and there is content

Critical Web Fonts

Zach Leatherman outlines a new method for loading webfonts whereby the process can be broken up into two stages:

...instead of a full Roman webfont in the first stage, it loads a small subset of the Roman webfont, in this case with only the uppercase and lowercase alphabetic characters.

Then, in the second stage, we can load all the extra parts of that font, such as numbers or special characters. Ultimately, this greatly decreases the time in which readers will …

2 comments

Hookbin – Capture and Inspect HTTP Requests

The following is a guest post by Przemek Matylla, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What's causing this scrollbar? There is also mystery with HTTP requests. What data came along for the ride? What metadata? Is everything there (and not there) as I

Extending Sass with PostCSS

I think Ashley Nolan has the right idea here:

Many posts on PostCSS compare it’s features to Sass equivalents, but PostCSS doesn’t have to be used as an alternative to Sass. It can instead be used to add additional features to your workflow that Sass doesn’t provide. ... These extra tasks can run either before or after your Sass compilation, as PostCSS can parse both SCSS and CSS.

PostCSS has proven to be much easier for developers to write add-ons …

Sponsor: FullStory Searchies – Answers Before You Ask​

FullStory is a customer experience platform that gives product, marketing, and support teams unprecedented insight into the interactions of visitors and customers. By adding a simple script to any website, FullStory captures every event and interaction during a visit, making it easy to replay, search, and analyze each user’s experience.

FullStory Searchies intelligently determine which questions you’ll want to ask of a search or segment and present the answers in the most visually intuitive way: with a funnel, line graph, …

[Talk] HTTP/2 is Here, Now Let’s Make it Easy

Rebecca Murphey's talk from dotJS 2015 explores all the various gotchas surrounding HTTP/2. For instance, how will servers support it? How does our front-end process change to benefit the most from this new protocol? How will developers know that everything is working correctly?…

6 comments

Using Templating Engines to Streamline WordPress Theme Development

The following is a guest post by Charlie Walter. Charlie has written for us before, when he's not making me extremely envious. Now he's back to share something completely different. We're going to learn about methods he's learned for streamlining WordPress theming using templating engines.

Templating engines are fantastic! They make complex programming languages much easier to write and include features that streamline the development process.

WordPress is a natural environment for us to see how templating …

Performance Budget Builder

Brad Frost has made a very interesting visualization tool that helps teams think about performance budgets. It shows all the assets (HTML, CSS, JS, images, fonts, etc) as part of one proportional bar chart. It's a great way to look at it, because it reinforces the idea of "increase one, others need to shrink".…

The Responsive Image Breakpoints Generator

Nadav Soferman has written a great post about the common mistakes that can be made when developers attempt to make images responsive:

Whichever responsive design solution or framework you choose, you still need to generate and deliver multiple versions of each image. The challenge of finding the best fitting resolutions, which are the responsive breakpoints for each specific image, is common for all approaches and frameworks.

What’s especially surprising to me is we need to serve a different number …

10 comments

Mood Driven Development

I suspect this is what many of us do (based on my own behavior and what I observe of others), but I'm not sure we outright say it or embrace it. Mood Driven Development: Work on what you feel like working on.…

Doing Science on the Web

Alex Russell on the current problem with testing experimental web features:

Prefixes “look” ugly and the thought was that ugliness  —  combined with an aversion to proprietary gunk by web developers —  would cause sites to cease using them once standards are in place and browsers implement. But that’s not what happens.

Tools like Autoprefixer compound the problem that we developers use prefixed-anything as soon as we can get our hands on it.

He talks about some strategies for solving …

20 comments

OS X Window Manager Apps

There is no shortage of apps to help you arrange windows. I find them tremendously useful. Most Windows (the operating system) users I know quite like the built-in abilities it has to position windows, but there isn't as much of that built into OS X. OS X El Capitan (10.11) brought some split screen stuff, but it has quite a few limitations and certainly isn't fulfilling all the needs of the discerning nerd.

So let's look at the options! Fair

Revisiting the Float Label Pattern with CSS

The “floating label” is a common design pattern where the label of a form is displayed on top of an input until someone taps it. It’ll then transition out of the way to reveal the placeholder text beneath, but the label will still be visible above or below.

Emil Björklund walks us through an interesting demo that replicates this pattern but without the need for any JavaScript and with the :placeholder-shown pseudo selector.

Note there are other CSS-only methods for …

3 comments

Some Pretty Splendid SVG Links

I'm always running across wonderful SVG stuff. Demos, tutorials, tools, art... some of the best timeless resources end up in our SVG compendium. Some I think are best suited to posts like this!

Some of these are pretty new. Some of them are not, but I found them useful recently or are new-to-me.…

Sponsor: Media Temple

I'm pretty excited to welcome Media Temple as a the brand-spankin' new primary site sponsor around here. I pitched the idea to them, actually. While sponsors are vital for the site, I'm selective about the companies we work with. I personally approve and endorse every one. I'm particularly selective about the primary sponsor. I want it to be a company that I not only use and endorse, but that I select as a good fit. Media Temple was at the …

9 comments

CSS Specificity is Base-Infinite

There is a good amount of information on this site about specificity. The seminal one is Specifics on CSS Specificity, which has been updated a few times over the years. When it was originally published in 2008, it presented the information in a bit of a misleading way. It has long since been fixed, but the mistake is still interesting.…

4 comments

Planning a Tech Event in 6 Months

The following is a guest post by Brad Westfall. I ran into Brad at a conference not long ago and we talked about potential guest post ideas. Brad recently ran a conference of his own, CSSDay.io, and as you would expect he is full of thoughts on that experience. The perfect time to write!

10 comments

The Current State of Web Security (An Interview with Anselm Hannemann)

Anselm Hannemann recently made a post about some of the misconceptions that front-end developers might have about web security. Since I had lots of questions about these things, I thought I'd interview Anselm to get his take on the surprising complexity of getting set up with HTTPS. We talk about things like generating certificates and how we might best make sense of the conflicting opinions many developers, including myself, have about third-party services such as Cloudflare.

The HTTPS-Only Standard

A project by the U.S. General Services Administration that outlines how Federal agencies should implement basic web security, going into great detail as to why government websites should always use HTTPS over HTTP:

HTTP has become central to today’s way of life. HTTP is currently the primary protocol for applications used on computers, tablets, smartphones, and many other devices. As our dependency on the internet has grown, the risk to users' privacy and safety has grown along with it. Every …

38 comments

A _______ of JSON

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Yadda yadda yadda.

But what do you call a small amount of it?…

56 comments

Designing A Product Page Layout with Flexbox

The following is a guest post by Levin Mejia, a Designer Advocate at Shopify. Shopify uses flexbox in a new theme they developed and they wanted to share some of the techniques they used to do it here. To that I say: yes please.

15 comments

Influencing Web Layouts with Print Layouts

Jen Simmons has a compelling talk (video) where she calls out web design as being far too dominated by the HEADER CONTENT SIDEBAR FOOTER pattern we're all too familiar with. Print design, despite so often being dubbed "dead" or in massive decline by those of us in web design, still excels in quality and variety of layout.

Certainly we can learn from print design on the web, yeah?…

20 comments

The Sass Ampersand

The following is a guest post by Rich Finelli. Rich told me he used to have some trouble with the special ampersand character in Sass, but then had a bit of an epiphany and wanted to share that understanding (it's powers and limitations) with others. My favorite!

The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit …

Moving Along a Curved Path in CSS

motion-path is specced and already has some support. But there is another way to replicate curved motion paths, as Tobias Ahlin points out:

... if we add a container around the object we want to animate, we can apply one timing function for the X-axis, and another one for the Y-axis. Below, we're using ease-in for the X-axis, and ease-out for the Y-axis.…

Optimizing SVGs for Web Use

An in-depth series of posts by Andreas Larsen that walks us through the process of how to (hand) optimize SVGs. He suggests optimizations that it's unlikely software could do for you. Things like changing the viewBox size to accommodate simple, rounded integers.

Adding this one to our compendium of SVG info.…

Safari 9.1

There are lots of exciting new features rolling out in Safari 9.1 such as support for the picture element, enhancements to the web inspector, CSS variables and gesture events for iOS. Although, what I’m most excited for is the OpenType support with properties such as font-feature-settings and its variants like font-variant-ligatures and font-variant-caps, all of which give us more fine-tuned control over typesetting.

You can play around with these new features in the OSX 10.11.4 and iOS 9.3 betas …

We have a pretty good* newsletter.