Article Archives

Chrome has been my default browser for many years now, but I’ve been thinking that my familiarity with just one browser has become a problem. If I tend to design for a single browser, then I’ll start to make assumptions that those features are available for everyone. Then I’m likely to miss important differences between browsers which could introduce bugs into the codebase or influence the amount of time I spend designing a feature.

I’ve started to call this problem …

Let's say you manage a WordPress site. You chose, purchase, and install a pre-made theme. Say you added a few items you came across in the WordPress plugin directory to add some advanced features to the site. This is the awesomeness that is the WordPress ecosystem. It's relatively easy for anyone with light technical chops to get a website off the ground and wrangle together something powerful without having to build everything from scratch. It just works great and your …

Ire Aderinokun:

There are currently four active methods for storing data on the client side.

1. Cookies (old school, still useful because they are sent with server requests)
2. Local Storage (very easy to use)
3. Session Storage (exactly the same, only clears when the tab is closed)
4. IndexedDB (quite complex, quite powerful)

Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can be trying to get specific components, particularly ones that have pieces that have to stay a certain size (like animations), to look good regardless of the screen size. In this post, we'll cover how to help keep our responsive animations sized the way we want them.…

Bert Bos, noting today as quite a notable day:

On December 17, 1996, W3C published the first standard for CSS.

Very interesting to see what historic points made the cut for the timeline. The Zen Garden, acid tests, preprocessors... good times!…

Andrew Coyle on when to use <input placeholder>:

• Don't use them as a label
• Don't use them as a secondary label
• Don't use them as example input
• Don't use them as helper text

Which amounts to pretty much: "Don't use them". Notice there are no examples of good use cases, and even the examples in the "Do" graphics just say "Placeholder Text", which isn't exactly demonstrative of usefulness.

I wonder if placeholder text will fall completely out of favor.…

Kevin Suttle on the ever-growing number of .dotfiles in projects:

The number of config files per repo is slowly but surely overtaking the number of code files.

Seems to me /config/ or /.config/ as a directory to keep them are also too overloaded to be a real solution. I agree: "something’s gotta give at some point."…

There have been a couple of articles lately regarding fluid type.

Matt Smith (calling it "flexible type"):

My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the :root selector

Richard Rutter (calling it "Responsive Display Text"):

In one fell swoop you can set the size of a display heading to be proportional to the screen or browser width, rather than choosing from a scale in a series of …

📹 by Glen Maddern:

I don't think most front-end developers are as comfortable as SVG as they should be. It's one of the most powerful technologies available on the web.

He makes a very strong case for inline SVG, which I wholeheartedly agree with. This screen from the video does a nice job of that:

You could do worse in leveling up your SVG knowledge than picking up a copy of Practical SVG.…

For all you freelancers out there, Jessica Hische has written some copy to help you articulate saying no to things you should be saying no to.

I’ve created this handy tool to help you say “no” to free and low-budget work and to help ask for more favorable contract terms before the start of a project.…

Steve Souders:

Comparing the ASYNC and DEFER waterfalls, we see that using DEFER makes DOM Interactive fire sooner and allows rendering to proceed more quickly.

Even though <script async></script> is more commonly seen in the wild, defer is typically preferable as they can never block other syncronous scripts, as well as load in predictable source order.…

Chris Dumez:

WebKit did not support HTML interactive form validation, which occurs on form submission (unless the novalidate attribute is set on the <form> element) or using the reportValidity() API. We are pleased to announce that this is now implemented in WebKit and enabled in Safari Technology Preview 19. Upon interactive form validation, WebKit will now check the validity of all form controls in the form

Form validation in Safari has long been a bummer. It didn't even stop the …

Jeremy Keith released a new book, for free, on the web only:

This is not a handbook. It’s more like a history book.…

It was five years ago when I wrote Screen Resolution ≠ Browser Window. The idea was that, at the time, there was a lot of talk about monitor size in relation to how we design websites. JavaScript is happy to tell the dimensions of a monitor: screen.width. But how useful is that? Isn't it more useful to know how big the actual browser window is? Of course, it is. We don't write media queries based on screen.width, …

I remember Estelle Weyl used to mention this a lot in her talks. If you set .button { background: red; } you've, inadvertently or not, set a whole slew of other properties to their initial values. Harry Roberts demonstrates this clearly and goes so far to say it's a bad practice.

I don't avoid it, but I do actively think about it every time I'm about to use a shorthand. I think "I'm not just doing this to be lazy, …

My friend Jeff just asked me this question. He was looking for a designer for a one-off graphic design job. He had the project all scoped out. He just didn't know how to do it. He's not a fool; he web searched around for stuff, but what you find doing that is a confusing mess with plenty of results that don't feel right.

I figured I'd document that journey here, and contrast it hiring an electrician. A trite comparison, perhaps, …

Envato Elements is the design industry’s first unlimited download subscription for digital assets, tailored to the needs of agencies, designers, marketers, and professionals. With over 9000 carefully curated fonts, graphics, mockups, templates and more you can save time whilst still creating beautiful design projects.

Join the thousands of subscribers already enjoying unlimited monthly downloads, broad commercial use licensing and the ability to cancel at any time - no strings attached.

Browse the library now!…

Alicia Sedlock, on removing a large section of a website:

... it’s the ultimate “I really hope this doesn’t break something else” situation. It was a stressful and tedious effort of triple checking that the things we were removing weren’t dependencies elsewhere. To be honest, we wouldn’t have been able to do this with any amount of success or confidence without our test suite.

Tests don't just help you when you change code or write new code, then help when …

Lately, I've been obsessed with optimizing performance through lazy-loading. Recently, I've written on how to lazy-load Google Maps and on how to lazy-load responsive Google Adsense. Now it's time for Disqus, a service for embedding comments on your website. It's a great service. It eliminates the headache of developing your own local commenting system, dealing with spam, etc. Recently, I've been working on implementing the widget in one of my projects.…

InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body></body>…

The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox built-in DevTools instead.

Looks like the end of an over 2 year process.

Firebug was probably the single most important tooling advancement in front-end developments short life. A glimpse of the future, indeed.…

A round up of goings-on related to me, this site, and related projects, as we are wont to do once in a while. I've had the good fortune of being a guest on a number of podcasts lately, so I'll link up those. I'll share some upcoming conferences I'll be at and news from CodePen and ShopTalk Show. …

Eric Meyer, talking to himself:

How long until I can actually use Grid, then? Two or three years?

March 2017. So about four months from now.

Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.

We agreed table markup for layout was a bad idea…

I posted a context-less poll on Twitter, just for fun. …

Mariko Kosaka:

I finally figured out, it's an alien you can invite to live on user's browser.…

This past summer, I wrote The Essential Meta Tags for Social Media about how developers can prepare web pages to optimize their appearance when shared on social media. But what about creating the links to let users share these web pages? Facebook, Twitter, and LinkedIn offer numerous ways to do this, some involving button generators and others that require external JavaScript. To avoid all of that, though, you can create your own links to share web pages. And the best …

SVG is absolutely a vector graphics format. But it's more than that. You can set type in it. You can place raster graphics in it. There is interactivity and animation. It's more like a multimedia graphics format. Over on the Media Temple blog, I walk through the creation of a multimedia graphic to show off some of those possibilities.

See the Pen SVG is a cross-medium format! by Chris Coyier (@chriscoyier) on CodePen.

If we get SVG …

Some highlights-of-highlights, based on Brian Krogsgard's post:

• BuddyPress and bbPress will get new support and engagement over the next year.
• WordPress 4.6 was available in 50 languages the day it was released.
• the REST API [endpoints] get included in WordPress 4.7.
• WordPress.com is now fully on PHP7. WordPress.org will now recommend PHP7 by default.
• There is some concern about design. "If WordPress doesn’t make changes to the interface and otherwise, [Matt Mullenweg would] expect WordPress marketshare to begin to decline

A brand new course by Rachel Nabors. There is a lot here: learning the code and learning the tools to help work with the code and make sure you're doing a good job. A couple favorite aspects of the course:

• Captioned videos you can understand without audio.
• Convenient CodePen exercises–no code to set up.

;)…

An interesting journey of form UX, documented by Tim Paul. It started with browser defaults. It's unclear why that wasn't working. But interestingly, an alteration that included giant label-based click areas in color-offset boxes didn't help. What actually helped was bigger (and custom) radios and checkboxes.

So far they’ve tested really well. In research, people of all confidence levels are clicking these controls quickly and easily.

I used to think the size of SurveyMonkey radios was awkwardly large. Now …

High five to Dave Gandy and the Font Awesome team:

The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time.

What's do the funders get? 1,000 more icons, icon font ligatures (a uniquely cool thing fonts can do, like turn "right arrow" into ➡, which can be an accessibility win), and, drum roll please, an SVG framework that will be open sourced. …

If you've ever watched old sci-fi flicks, you know how powerful loops can be. Feed your robot nemesis an infinite loop, and kaboom. Robo dust.

Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY CSS. While everyone is talking about pattern libraries and modular design, most of the focus has been on CSS selectors. No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your …

People responded quite positively to "Hey designers, if you only know one thing about JavaScript, this is what I would recommend." Even the YouTube comments were positive.…

Read Christie Aschwanden's first paragraph. If you've written anything that elicits comments, I'm sure you can relate.

There is plenty of data here to digest, and also further speculation:

I had a hypothesis: Maybe this commenting-without-reading phenomenon represents a variation of the backfire effect, in which a person who receives evidence that their belief is erroneous actually becomes more strongly convinced of the viewpoint they already held. In this case, the reader sees a headline that catches their interest and …

Gina Trapani:

On a daily basis I’m struck by the fact that no number of degrees—or titles, or companies, or years experience, or apps shipped, or books published, or Twitter followers—matter when you’re facing down a situation that’s completely new. You think it through, you consult your trusted advisors, you do your best, and maybe you write down what you learned. That’s just about all you can do. Because you don’t know what you’re doing, and neither does anyone else.…

I don't have any UX research to cite, but anecdotally, I like it when inputs that expect data in a specific format use an input mask. I thought I'd just line up a few demos for really easy reference.…

The following is a guest post by Pieter Biesemans. Pieter is a front-end developer at Audience where he loves styling things with SCSS. He's going to dig into what I'd call a bonafide CSS trick.…

Over the past couple of weeks there’s been a lot of excitement over color fonts. Adobe describes the technology like this:

OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”.

Back in March, Roel Nieskens wrote about …

If you've been reading at all about HTTP/2, then you've likely heard about server push. If not, here's the gist of it: Server push lets you preemptively send an asset when the client requests another. …

Manuel Matuzovic rediscovers @media print {} styles.

The first thing he shows in this article is a tweet by Aaron Gustafson in which Indiegogo's website is pretty jacked up for print. It basically looks like a site in which none of the CSS loads at all, which is probably because they wrap all their styles in @media screen {}, or use <link rel="stylesheet" media="screen" href="style.css">. That's fine if you intend to take a "start from scratch" approach …

I think I had the same wooahhhhh coool reaction as so many others did when this tweet was going around:…

Over two years ago, I published a dumb-funny little blog post called Please Don't Learn To Code From Stock Photos. It got unearthed somehow and got shared around again recently.

Of course, it's just for laughs, and by and large nobody took it too seriously. But also, there was one little thing in there that tickled the Well Actually Bone of quite a few developer folks. I'd say in the last year or so, 100 people or so have …

Last time, we saw how the average web page looks like using data from about 8 million websites. That's a lot of data, and we've been continuing to sift through it. We're back again this time to showcase some random and hopefully interesting facts on markup usage.…

Indeed Prime helps tech talent such as UX/UI designers and software developers simplify their job search and land their dream job. Candidates get immediate exposure to the best tech companies with just one simple application to Indeed Prime. Companies on Prime’s exclusive platform message candidates with salary and equity upfront. The average software developer gets 5 employer contacts and an average salary offer of $125,000. Indeed Prime is 100% free for candidates – no strings attached. And when you’re hired, …

The following is a guest post by Eduard Pochtar from ShiwaForce. Eduard is going to walk us through they why and how of a plugin he and his team built to process existing CSS to make a high contrast version of a web site. It involved a little thinking and a little strong arming to make it happen.…

Nice tutorial from Michael Scharnagl in which he takes a perfectly-functional comment form and progressively enhances it with very nice features. Things like custom error messaging, auto-expanding height, and even really fancy stuff like ajax and offline submission. …

The following is a guest post by Pascal Klau, a trainee from South Germany, who dislikes unnecessary HTTP requests and broccoli. Pascal is going to explain way to use a polyfilling service in such a way that you might get away with not using it at all.…

Say you want an element to be in one state for 9 seconds, and in another state for 1 second, on a loop.

No tweening between the state, just a straight swap.…

The following is a post by Levi Gable. Levi digs into the idea of separating the CMS from the presentation of content within that CMS. As Levi will explain, there is a freedom there that can feel mighty good to a web developer. A website can digest an API and present content in whatever the hot new way to do that is. But even more importantly, an API can serve multiple publishing platforms. Levi demonstrates this as well, by having …

It's a perfectly reasonable to want to style the marker of list items. You know: blue bullets with black text in an unordered list. Or red counters with knockout white numbers in an ordered list.

There is a working draft spec that defines a ::marker pseudo-element that would give us this control.

It's possible to do this styling now, though, thanks to CSS counters. The trick is …