Article Archives

A Table With Borders Only On The Inside

You know, like a tic-tac-toe board. I was just pondering how to do this the other day, as one does. There are three ways I can think of. One involves a good handful of rules and is the way I intuitively think of, one involves a deprecated attribute, and one is very simple and feels kinda like a CSS trick.


Video Transcripts

None of the videos in our entire video screencasts library have captions / subtitles / transcripts. That means all of that content is rather useless to the deaf, as was made quite clear to me in this recent email:

I'm a big fan of CSS-Tricks and I make a lot of use of your written content, however the same can't be said for your videos as I'm deaf. It may not be viable for your business but subtitles on your videos would enable access to me - and probably thousands of others - who can't follow your videos via sounds.


Fully Managed Cloud Hosting

Do you have a client that requires absolutely zero downtime?

How about any sites that have unpredictable traffic? Welcome spikes in visitors that can happen anytime, but can be a big problem for web servers.

You should look at Fully Managed Cloud Hosting on Media Temple. It may be the perfect home for these projects. It's Amazon Web Services hosting, with white-glove support from Media Temple's AWS-certified Cloud Architects. This is instant scaling, super high-performance web hosting that you don't have to manage yourself.

People’s Names That Break Websites

I heard from Alex Goldman of Reply All (a super duper very great podcast with stories loosely originating from the internet):

We're doing a story about people that have names that websites and computers don't seem to like - for example, we spoke to a guy named William Test, and a woman named Katie Test, both of whom can't seem to keep a hotel or airplane booking because the name "test" is flagged by internal systems.

We also spoke to a guy named Christopher Null who had the same problem, and woman named Joan Fread, who can't use paypal because her last name is the same as a PHP command.

I'm curious if there's anyone in the dev community that is thinking about this, and how to deal with it. Is it even considered a problem? Is the population that this affects so small that people don't even think about it?


Deploying From Bitbucket to WordPress

Of all the projects I've worked in the last few years, there's one that stands out as my favorite: I wrote a WordPress plugin called Great Eagle (Tolkien reference) that allows my team to install and update themes and plugins from our private Bitbucket repos, via the normal wp-admin updates UI.

This plugin has blasted our dev shop through the roof when it comes to development best practices, in ways we never expected or intended. It forces us to use proper version numbers because now we can't deploy without them. It forces us to store our work in Bitbucket because now we can't deploy without it. It forces us to use the command line en route to deploying our work (by which I simply mean, git push origin master), which then led to us using phpUnit. Now we can't deploy unless our tests pass. We've arrived at the nirvana of test-driven development, all because we started with the unrelated step of deploying from git.

If this all sounds standard and obvious, great. I'd love a chance to learn from you. If this sounds like exotic rigmarole, guess what? This article is for you.


Tinder for Bananas

I saw this little web app (live demo) by Das Surma going around the other day. It's funny, but it's also a really compelling demo app for a bunch of modern technologies. I'm sure that's the whole point of it.

  • Minimal build process. Just Gulp to use Babel and PostCSS. It's heavy on ES6+ and CSS custom properties.
  • Loads of custom elements, like <tinderforbananas-item>, with the Polymer polyfill for those.
  • Icons are super tiny SVG, they look hand-golfed.
  • ServiceWorker for offline cache.
  • Mobile and performance-first design and interactions.

Maybe it'll be like the HTML5 Boilerplate of the future.

The Line of Death

Eric Lawrence has written a pretty scary post about browser security and malicious websites that hope to trick us:

When building applications that display untrusted content, security designers have a major problem— if an attacker has full control of a block of pixels, he can make those pixels look like anything he wants, including the UI of the application itself. He can then induce the user to undertake an unsafe action, and a user will be none-the-wiser.

And the problem is even worse on mobile:

Virtually all mobile operating systems suffer from the same issue– due to UI space constraints, there are no trustworthy pixels, allowing any application to spoof another application or the operating system itself

Opera Neon

Hot takes!

  • I wanted to give it at least a few days of full-time use, but you can't use extensions (yet?). The web is too hard for me to use without 1Password and Ghostery.
  • The UI feels fresh and interesting. UI polish seems like an excellent direction for Opera to go. Since moving to Blink they aren't spending (as many) resources on under the hood browser stuff, they might as well polish up the hood itself. It's neat how it uses your desktop background as its background. It's not transparent, though, it's just a duplicate image.
  • The pop-out videos are pretty sweet. Safari can do it (awkwardly), but the tray of media in Neon is an upgrade. I don't understand why Chrome and Firefox can't do this... isn't it a macOS level thing?
  • Weird bug: doesn't seem like you can ⌘V paste into the address bar?

How To Create Your Own URL Scheme

A URL Scheme is like "http://..." or "ftp://...". Those seem like a very low-level concept that you don't have much control over, but actually, you do! What sounds like an exotic topic is not so exotic at all: we are constantly using different URL Schemes, on any given day. For example when we're clicking a link to an iPhone app that launches the AppStore. Or when a friend sends us a link to a playlist and it opens in the Spotify desktop app.

In the following short tutorial, we'll look at how custom URL schemes work on macOS and iOS.



Looks like a nicely done little system, by José Luis Antúnez for creating presentation slides.

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

An alternative to reveal.js. I like how it utilizes other open source projects.

I always feel like I should be using things like this for my presentations, as someone who normally very much likes working in HTML and CSS. But for some reason, I always reach for Keynote or I think it's a brain-modes thing. When I'm in "I need to work on what I'm going to say at this presentation" brain-mode, I don't want to be messing with markup, I just want to write and maybe pluck at some UI controls.

Modernizing our Progressive Enhancement Delivery

Scott Jehl, explaining one of the performance improvements he made to the Filament Group site:

Inlining is a measurably-worthwhile workaround, but it's still a workaround. Fortunately, HTTP/2's Server Push feature brings the performance benefits of inlining without sacrificing cacheability for each file. With Server Push, we can respond to requests for a particular file by immediately sending additional files we know that file depends upon. In other words, the server can respond to a request for `index.html` with `index.html`, `css/site.css`, and `js/site.js`!

Server push seems like one of those big-win things that really incentivize the switch to H2. We have an article about being extra careful about caching and server push.

Sponsored: Analytics for Lazy Developers

Here's an incomplete list of analytics tools I've personally used: Google Analytics, Alexa, Gauges, FullStory, NewRelic, and Woopra.

Perhaps you've used some others? Mixpanel, Heap, KISSmetrics, Rollbar?

They are all different and do interesting and valuable things for our businesses. Integrating them means integrating their third-party JavaScript into your site. What if you want to add one or remove one? You're back in the code making all those adjustments. And heaven forbid one of them updates its're on the hook for integration maintenance indefinitely.

Enter Segment.

Segment is the data hub that routes your data directly to these analytics tools (and hundreds of others, for advertising, data warehousing, CRM and others). You're still using your favorite tools, but you only have to integrate Segment into your site or apps. Segment then sends all the appropriate data to the other tools.

Get Started with Debugging JavaScript in Chrome DevTools

Kayce Basques wrote an excellent interactive tutorial that explores how to debug JavaScript with DevTools. Kayce looks into a number of techniques and options that I was completely unaware of and, as he notes in the beginning of the tutorial, if you’re still using console.log to find bugs in your code (like me) then this article is written just for you (also me).

Clean Code JavaScript

Inspired by Robert C. Martin's book Clean Code, Ryan McDermott put together a repo with some software engineering best practices as they apply to JavaScript in particular. The repo has tons of great guidelines for beginning programmers, and good reminders for seasoned maintainers.

I'm a particular fan of this style of teaching because it focuses on legibility as much as writing. This ensures that our codebases are friendly to the next developer who comes along, even if it's ourselves.


Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does.

David Walsh has a post on it. I'm interested, as I'm still working on my muscle memory for ES6. Even the simple stuff. So blasting some old code through this as a kick start seems appealing.

The Road to SVG and Custom Elements in Clarity Icons

Another day, another design system deciding an SVG icon system is the way to go.

Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, scale, and the future. Based on these, they actually ended up on a custom element (<clr-icon>, which is inline <svg> under the hood), just like Etsy.

Non-Rectangular Headers

Jon Moore documents a trend in which designs opt for non-rectangular headers. Slants, rounded bits, image crops, even weird jagged polygons. I mean c'mon, what kinda site would put a weird jagged polygon as a header?

Build a Custom CMS for a Serverless Static Site Generator

Static Site Website Generators have been getting increasingly popular within the last 2 years. Much has been written (like this and this) and there have been many great open source projects and even funded companies launched to help you get up and running.

What if I told you that you could build a Static Site Generator with your own custom CMS without the need for a database? Not just that, but we can get to Hello World! in under 100 lines of JavaScript.


Etsy’s Evolving Icon System

Etsy moves away from an icon font in production to using SVG. It's going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use.

Two cents:

  • I could see the need for that abstraction going away if we had a more convient syntax for <use> available, like: <svg use="icons.svg#cart" />
  • I like how dedicated they are to icon consistency. I struggle with this a lot. An SVG icon process can be so easy to work with, and new icons so easy to find and drop in, that consistency can suffer. That grid, with the examples, is gold.
  • They are still building an icon font as part of the build process, for the designers to use in design software.

That last one is surprising to me, as I would think it would be a pain in the butt to find the right icon to design with when the one you need is assigned to some random character in the font. I would think the concept of "Symbols" in Sketch or Illustrator would make the way to make those icons super easy to find and use for designers. Which makes me think what the font actually has to offer is interoperability between design software. I wonder if software like Lingo or Iconjar would be helpful here.

ColorMe / CSS Color Level 4

Does this look weird?

.element {
  background: color(#eb8fa9 alpha(75%) blackness(20%));

That's the "color function" from a draft spec from the CSS working group. I think it's all about making colors a little easier and more intuitive to work with. Looks awesome to me, as someone who uses Sass color manipulation functions quite a bit.



Varun Vachhar:

A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.

An amazing contribution to this open source project would be to make all those points draggable, and then be able to spit out the newly adjusted code.

Also, weren't browser extensions on their way to being interoperable? Looks like the community group has significant work done.

Redesign v15 Notes

Little redesign around here. As ever, it's just a start. It will ebb and flow in the weeks, months, and years to come.

There are bugs! There are little differences that might take a tiny bit of getting used to! You're always welcome to contact us and report bugs or let us know what you think. You know how a lot of people are all like "all websites are the same!", well, some things are different here quite on purpose.


Introducing the Payment Request API

As I understand it:

  • It's the early days for a standards-based JavaScript API for payments on the web. As in, var payment = new PaymentRequest(methodData, details, options);
  • For users, it means potentially better UX. Payment methods are stored by the browser, and work with those browsers existing proprietary payment systems (e.g. Microsoft Wallet). That means users aren't filling out payment forms nearly as often, they are just selecting payment methods.
  • For developers, long term, it means not having to create those payment forms and validating data and all that work. You get the UI and UX of a payment flow for free. Although for now, the best you can do is progressively enhance to this, so it's more work in the meantime.
  • Microsoft has docs for it, and so does Google.

Web Animation Workshops in Spring

Web Animation Workshops has started up again for Spring, we're headed for San Francisco, Chicago, and Paris this year, some dates still to be announced. Val Head and I team up to bring you two packed days full of content and exercises so that when you leave the class, you not only understand the techniques of how to animate in different tech stacks/environments but why. Here's is some of the content we cover:


The Narrative Browser Using Articulate.js

Many sites with lots of written content employ specially crafted print style sheets. That way, a user can print out the relevant content without wasting paper on navigation, ads, or anything else not germane.

Articulate.js, a jQuery plugin, is what I consider the narrative equivalent. With as little as one line of code, it enables developers to create links that allow users to click, sit back, and listen to the browser read aloud the important content of a web page. In some ways, it can turn a thoughtful essay or article into a mini podcast. And because it uses built-in JavaScript functionality, no browser extensions or other system software is needed.


From Sass to PostCSS

Tyler Gaw documents his process of moving off Sass and onto PostCSS, but keeping most of the code the same. That meant making sure he was using PostCSS plugins that would replicate most of Sass' functionality, like nesting and mixins and whatnot.

Tyler is sold. I find it an interesting experiment, and it's cool to know it's basically possible, but I'm definitely not sold yet.

Now instead of just having Sass as a dependency, which is an active healthy project, you have a whole bunch of plugins with different authors as dependencies. And for what? Assuming you use libsass, you don't get any speed. If you like some particular PostCSS plugin, using Sass doesn't prevent you from using that also. One thing I definitely wouldn't recommend is preprocessing those custom properties, as those are not interchangeable things.

Automatic Image Optimization with Hazel and ImageOptim

I'm forever trying to make my local image workflow easier. I work with images as part of blog posts, images as part of sites I'm working on, images headed to social media... images everywhere. Almost always headed to the web. If we're taught one thing about images and the web, it's that they should be optimized.

For me, that means dragging every single image onto ImageOptim before using it. Monotonous repetitive tasks are fertile ground for computerization, so let's computerize it.


Animation in Design Systems

Our own Sarah Drasner:

Unlike fonts, colors, and so on, we tend to add animation in as a last step, which leads to disorganized implementations that lack overall cohesion. If you asked a designer or developer if they would create a mockup or build a UI without knowing the fonts they were working with, they would dislike the idea. Not knowing the building blocks they’re working with means that the design can fall apart or the development can break with something so fundamental left out at the start. Good animation works the same way.

2016 Favorites

As the year closes, it's good to reflect on all of the things we as a community have built, contemplated, and contributed to. Here are some of the things we read or watched that we enjoyed and think were important in 2016.


Indie Microblogging: owning your short-form writing

Manton Reece has a Kickstarter for a new kind of social network and a book, both of which aim to encourage folks to write independently again:

In the earlier days of the web, we always published to our own web site. If you weren’t happy with your web host, or they went out of business, you could move your files and your domain name, and nothing would break.

Today, most writing instead goes into a small number of centralized social networking sites, where you can’t move your content, advertisements and fake news are everywhere, and if one of these sites fails, your content disappears from the internet. Too many sites have gone away and taken our posts and photos with them.

Thank You (2016 Edition)

Another year in the bag! As we do every year, I'd like to look back at the year by-the-numbers and see how we did. It's also an opportunity to say how grateful I am to you all. All things considered, the web design and development community is a pretty great one. Lots of sharing and caring. I consistently enjoy working on this site and being a part of the sub-community that happens here.


Has the Internet Killed Curly Quotes?

Glenn Fleishman:

At an increasing number of publications, [curly quotes have] been ironed straight. This may stem from a lack of awareness on the part of website designers or from the difficulty in a content-management system (CMS) getting the curl direction correct every time. It may also be that curly quotes' time has come and gone.

I know it's highly uncool in this community to get quotes wrong and highly cool to remind people how to type them. I'm on the uncool side of the fence on this one. I go so far as to standardize on straight quotes on this site. I'm not worried about the encoding, but laziness is some part of it. It's a weird key command (⌥ [) especially for coders who are so used to straight quotes being required. Not to mention a different key command for the closing version (e.g. ⌥ ⇧ ]), and both are even harder on any non-macOS system). Straight quotes of both varieties have a dedicated key.

You know what is a cool-these-days sentiment? The fact that language evolves, including written language. I'm not anti-curly-quotes, I just don't care. If you'd like to write in straight quotes, but publish in curly quotes because "algorithmically, it’s a solved problem", be my guest. Perhaps written English, on the web, has evolved to "whatever, either way". Oooooo look at that period outside the straight quotes. I'm a loner, Dottie. A rebel.

Designing for “Show scroll bars”

In macOS, users have the ability to set when they want to see scrollbars in windows. This affects all windows in the operating system, including in web browsers. They have three choices:

  • Automatically based on mouse or trackpad
  • When scrolling
  • Always

Which means you are either in a state where you see them all the time, or a state where you only see them once scrolling has been started through some other means.


display: flow-root;

News to me! There is a spec for it and Firefox says they intend to ship it. It's just like display: block; only:

It always establishes a new block formatting context for its contents.

Meaning: you don't have to use clearfix hacks. There is a bit more to it though. Fiona Chan has a mini-talk all about block formatting context. I think it affects z-index and transforms in some cases too. Anybody?

I suspect Nicole Sullivan will approve. She's been writing and talking about new formatting contexts forever. In 2010 she even wrote:

I wish we had a simple property value pair that would do the same thing in standards-based browsers.

.lastUnit {
  formatting-context: new; /* please! */

Just using overflow isn't a real solution. It hides box-shadow, for one thing.

Develop Locally, Use Images from Production

Working on your website locally means having the files that make your website tick right there on your computer. It's common those files live in a version control repository. You work on them, and push them up to the repo when you are ready. Other people work too, and you pull their changes back down.

What might not be in that repo, are images files from the CMS. WordPress is a classic example of this. When you upload an image in WordPress, it does a whole song and dance. It gets uploaded to the `uploads` folder, multiple versions are created, even the database is updated and attachment meta data happens. What doesn't happen is that a version control commit happens with all those files.


Review of My New Computer Equipment

I recently changed out just about all of my computer equipment. Nothing dramatic like #davegoeswindows, but all new gear within my relative comfort-zone. It was the first time since late 2013, and now it's going on 2017, so I figured it was time.

No surprise: I'm an Apple guy. I have been for a couple of decades now. I was pretty excited about the new MacBook Pro's and ordered one within a few days of them coming out. Coinciding with all that, I've also changed out my mouse, keyboard, and monitor. None of those accessories are Apple. Partly because they've stopped making them (monitors), or the ones they do make kind of suck (mice, keyboards).

I figured I'd review my new setup since it's on my mind.


CSS Writing Modes

We shared a little trick not long ago about using the writing-mode property to set a title vertically. While a useful trick, it's the tip of the iceberg on this property. Jen Simmons digs in and explains what's really going on.

There is a certain way elements flow on websites. Without doing anything special, block elements push downward from top to bottom. Inline elements go from left to right. In writing-mode, that would be expressed by (the default) horizontal-tb (horizontal inline flow, "top to bottom" block flow). Different languages and cultures handle layout in other ways, so this property allows for control over that in a more comprehensive way than the dir attribute is capable of. For example, vertical-rl (vertical inline flow, "right to left" block flow).

Reactive Audio WebVR

Virtual reality has become a thing again! All of the usual suspects are involved: HTC, Microsoft, Samsung, and Facebook, among others, are all peddling their respective devices. These predictable players shouldn’t be having all the fun, though!

You make websites. You know a bit of Javascript. You have a mobile device. You can have a slice of this virtual pie too! WebVR is here, and it’s not that difficult to learn. If you already know the basics of three.js, you might be surprised at how simple it is to get it going. If you haven’t ever used three.js, this will be a fun way to learn it.


A Guide to 2017 Conferences

Back by popular demand! It's difficult to keep track of all of the great talks and conferences happening in our industry. Sometimes you may find out too late that an event is taking place, and it's a real shame when it's an something you might have attended. We've compiled this list so you can see what's happening, both in your hometown, and abroad. This list will be updated throughout the year.

If you have a conference to add, we're happy to put it in! Please use the form at the bottom of the post.


Learning from Lego: A Step Forward in Modular Web Design

Samantha Zhang:

When web components are modular like Lego bricks down to the elements level, they become more versatile and easier to maintain. We believe it’s the next step to take in modular web design.

It's a clever system: put a half-gutter around all elements and a half-gutter around the containers. That way no matter what touches what, full gutters are naturally there.

The “Optimal Image Format” for Each Browser

Perhaps you've heard about the WebP image format? And how it's a pretty good performance win, for the browsers that support it? Well that's only for Blink-based browsers, at the moment. Estelle Weyl's article Image Optimization explains the best image format for each browser:

Browser Optimal image format
Chrome WebP
IE 9+ / Edge JPEG-XR
Opera WebP
Safari JPEG-2000

And you can serve these formats through the <picture><source type=""> syntax.

Couple that complexity with the complexity of responsive images, and it really seems like outsourcing image delivery to a dedicated service seems like the way to go. At least above a certain scale.