Article Archives

When is the Right Time to Think about Web Performance?

Web performance is vital, but lately I’ve felt that the topic has only been brought up by front-end developers, and only becomes a point of discussion at the end of a project. Subsequently, whenever I hear about solutions to trim down large websites, I can’t help but feel that these are merely suggestions or tricks that developers and engineers should employ after the initial design process has kicked off.


Babel Plugin to Add Function Names

Have you ever been working with those sweet new ES6 arrow functions, run into a problem, and noticed that now your stack trace is all anonymous functions? Yeah, that's not so great. That's why this Babel plugin is so useful. You can add names to your ES6 arrow functions, and it makes debugging a lot more simple.

Using WebP Images

We've all been there before: You're browsing a website that has a ton of huge images of delicious food, or maybe that new gadget you've been eyeballing. These images tug at your senses, and for content authors, they're essential in moving people to do things.

Except that these images are downright huge. Like really huge. On a doddering mobile connection, you can even see these images unfurl before you like a descending window shade. You're suddenly reminded of the bad old days of dial-up.

This is a problem, because images represent a significant portion of what's downloaded on a typical website, and for good reason. Images are expressive tools, and they have the ability to speak more than copy can. The challenge is in walking the tightrope between visually rich content, and the speedy delivery of it.

The solution to this dilemma is not one dimensional. (more…)

Sponsored Posts

We do advertising here on CSS-Tricks! We like it. It's part of the wheel of life on the web. Products and services co-existing with publishers in a global ecosystem, where everyone focuses on what they are good at.

We actually try to make advertising better here. Nothing obtrusive, no garbage products or services, no tracking, sponsors are marked as such. Besides allowing us to sleep at night, it makes the advertising more effective.

One of the most effective types of advertising here is sponsored posts. I can work with you directly on the post to help get at the heart of how your product or service could benefit us front end developers and designers around here. You should book one.

Trusting SSL Locally on a Mac

I run most of my production sites with forced SSL, including CSS-Tricks. But locally, I've avoided getting SSL working properly. I've always avoided it, perhaps because it's not immediately obvious how to do it. It's also not that big of a deal since it's just local traffic. But hey, might as well make local work as close to production is possible eh?


What the heck is the event loop anyway?

In 2014, Philip Roberts gave a great talk at JSConf EU, walking through the event loop and breaking down what JavaScript is doing under the hood for those of us without CS degrees. I came across this talk the other day in my Twitter stream, and really enjoyed it. Even though it's a couple years old, it has stood the test of time and remains a great resource.

How To Use WebPageTest and its API

While the richness and interactivity of the average website has changed dramatically over the last decade, the same can be said about the expectations of those who consume it. This page has a list of reports that show how businesses were able to establish a direct correlation between the their website's performance and conversion/revenue figures. For example, the engineering team at the Financial Times conducted a test which showed that an increase of just one second in load time caused a 4.9% drop in article views.

The underlying cause is pretty simple and it affects projects of all sizes (yep, including yours): users are becoming more demanding, less patient and not tolerant towards slow websites or applications. If your content takes too long to load, people will go somewhere else. Visiting a site that takes ages to open and navigate is a terrible user experience, especially on the dominant mobile environment where immediacy is crucial and battery life is precious.

For that reason, website performance optimisation plays an increasingly important role in the success of any online property. All major browsers ship with tools that allow developers to keep an eye on some important performance metrics as the build progresses, but these are measured from the developer’s own standpoint, which is not enough to see the full picture.

Factors like geographic location, connection type, device, browser vendor or operating system can heavily influence perceived load times, so testing all these variables is the only way to get a (mildly) accurate representation of how a website is experienced by a broader audience.

There are various tools and services to approach that problem, but this article will focus specifically on WebPageTest. We will look at it from a developer’s perspective, in particular at using its RESTful API to extract vital information you can use to optimise the performance of your site.


`font-display` for the Masses

The following is a guest post by Jeremy Wagner, a web developer, author, and speaker living in the Twin Cities. He's got a new book on web performance. Here we're going to dig into a brand new CSS feature, that once it percolates through the browser ecosystem, will be great for performance.

If you're a regular reader here at CSS-Tricks, chances are good that you're familiar with using web fonts. You may even know a few useful tricks to control how fonts load, but have you used the CSS font-display property?

The font-display property in CSS is newly available in Blink-based browser. It gives us the same power found in browser features such as the Font Loading API and third party scripts such as Bram Stein's Font Face Observer. The key difference, though, is that this capability is also now a CSS feature.


CSS “locks”

Tim Brown with a new (metaphorical) term to describe a value that can fluctuate between two set values:

In canal and river navigation, a lock is a device used for raising and lowering vessels between stretches of water that are at different levels. That’s exactly what our formula accomplishes. Our formula is a CSS calc “lock”.

To fluctuate between a 1.3em and 1.5em line-height depending on the screen width:

line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));

Bram Stein made a helper plugin for PostCSS.

Part of the "lock" is an additional media query that overrides the value at one end of the extremes. Similar to what Mike Riethmuller did when he was playing with molten leading and how Eduardo Bouças approached viewport sized type with minimums and maximums.

A Case Study on Boosting Front-End Performance

The following is a guest post by Declan Rek, who works as a developer at De Voorhoede, a front end tech agency. A version of this article was originally published on their blog. Declan asked about republishing here, and as it is jam-packed with real world case study performance stuff, I was into it.

At De Voorhoede we try to boost front-end performance as much as possible for our clients. It is not so easy to convince every client to follow all of our performance guidelines. We try to convince them by talking to them in their own language, and explain the importance of performance for conversion or compare their performance to their main competitors.

Incidentally, we recently updated our site. Apart from doing a complete design overhaul, this was the ideal opportunity to push performance to the max. Our goal was to take control, focus on performance, be flexible for the future and make it fun to write content for our site. Here’s how we mastered front-end performance for our site. Enjoy!


The Average Web Page (Data from Analyzing 8 Million Websites)

The following is a guest post by Catalin Rosu, who along with some colleagues, dug up a ton of data about the HTML content of web sites. This is the most recent study of its kind and wildly fascinating to see the results. I find it especially fun to compare the top results to what I would have guessed would have won.

We've all been there. We try to improve our HTML code making it clean, beautiful, and readable. We do this in pursuit of better semantics and better accessibility, so that everyone can use it. It's our top priority. And we always have questions:

  • What is the best way to structure the markup?
  • How are others doing it?


10k Apart

This year is An Event Apart's 10th anniversary. In order to celebrate, they are putting on competition called 10K Apart where people show off what can be accomplished in 10kB of data. This isn't a new competetion- its first genesis has been a project called 5k way back in 2000-2002. This year is sponsored by Microsoft Edge and they're giving away $10K in prizes to competitors. The judge panel has top professionals from web development, talented people like Sara Soueidan, Lara Hogan, Mat Marquis, Rachel Andrew and Heydon Pickering.

This competition is incredibly exciting as it focuses on things we as web developers can all benefit from thinking about. In terms of progressive enhancement, what is a usable baseline? How can we cleverly make our sites usable for a wide range of people? Aside from the clear benefit for performance, this contest focuses its attention on accessibility, designing for performance, and interesting innovations in the field.

Enter the contest! It should be great fun. My contribution was the SVG animation that you see on the homepage of the site (click the handle to watch it go again), created in less than 10kB with SVG and GreenSock, with particular help in SVG optimization from SVGOMG. Aaron Gustafson of Microsoft Edge has been hard at work on development for the site and everything you see there is under 10kB, as well, which is pretty rad.

What Goes Through My Head When Exploring a Site

I got an email from Brendan Foster the other day, a developer at the Australian agency The Competition. He was showing me an interesting CSS trick that helped him pull off a layout thing on a website he was helping work on for Margaret River Beverages. I actually thought the whole site was pretty interesting, and the idea occurred to me to jot down my thoughts as I explored the site. He was cool with it.


Get the Original Image from a Data URL

Someone wrote in asking how they might get the "original image" when all they had was the data URL version of the image. I'm not exactly sure how you get into that situation, but hey, I woke up in a trunk more than once.

You can absolutely get the original back, by exploiting the wonderful powers of the browser.


Force Selection of Text Block

Have you ever seen (or put yourself) some text into a <textarea></textarea> or <input />, not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection boundaries, meaning you can click into them and (for example) Select All and get just the text inside the input.

There is a CSS property that allows us to do that without needing to use a not-particularly-semantically-appropriate form input.


Design Better Data Tables

Matthew Ström on how data tables can be better through things like alignment, rules, labels, backgrounds, and the type of numerals used:

Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.

The Atomics

  • "Atomic" is a browser-based timeline animation tool.
  • "Atomic Design" is a design methodology in which you design very small parts and combine them in larger and larger pieces to build a whole.
  • "Atomic CSS" is a system in which you apply styles directly through designated HTML classes.
  • "Project Atomic" is something for running containerized applications, like Docker? I dunno it's DevOps-y and above my head.
  • "Atomic Web Browser" is an old (looks abandoned) iOS web browser.

None of them have anything to do with each other, at least conceptually.

Extensible Web Components

Some interesting thoughts from Jeremy Keith about his concerns with Web Components:

Compare Service Workers to web components.

First of all, ask the question “who benefits from this technology?” In the case of Service Workers, it’s the end users. They get faster websites that handle network failure better. In the case of web components, there are no direct end-user benefits. Web components exist to make developers lives easier. That’s absolutely fine, but any developer convenience gained by the use of web components can’t come at the expense of the user—that price is too high.

Organizing Your Grunt Tasks

The idea of breaking up your code into smaller bite sized chunks creates an environment that is easy to work in and maintain. That's often thought of as module design, and is a standard for web development these days. I'm going to show you a way you can use module design to better organize your Grunt tasks.


SVG Uploads in WordPress (the Inconvenient Truth)

Bjørn Johansen covers why:

  1. It's easy to enable SVG uploads in WordPress (few lines to a functions.php file or functionality plugin)
  2. It makes sense why WordPress doesn't allow them by default.

Jake Archibald in the comments:

In hindsight there probably should have been two content types, one that treats SVG has a full document context, and the other as a simple image (how browsers treat SVG in today, which cannot execute script or initiate fetches).

Hear hear.

I also had someone tell me: "I'd buy your new book, but WordPress doesn't allow SVG, and I work in WordPress." To which I'd say, it's only the media uploader that disallows them, and as the article covers, it's easy to enable them (as long as you're aware of the risks). But you can use SVG to your heart's content as part of the theme.

Precedence in CSS (When Order of CSS Matters)

On your average CSS-writin' day, odds are you won't even think about precedence in CSS. It doesn't come up a whole heck of a lot. But it does matter! It comes up any time multiple CSS selectors match and element with the exact same specificity.

Assuming specificity is exactly the same, order does matter.

Styles declared later win.


High Performance SVGs

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.


CSS Writing Mode

Ahmad Shadeed with a bonafide CSS trick:

I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.

Even in English, writing-mode: vertical-lr; help us lay out text vertically without a bunch of positioning, placeholding, and transforms.

The State of CSS Reflections

I recently saw this loader on CodePen, a pure CSS 3D rotating set of bars with a fading reflection. It's done by using an element for each bar, then duplicating each and every one of these elements to create the reflection and finally adding a gradient cover to create the fading effect. Which sounds a bit like scratching behind your right ear with the toes of your left foot! Not to mention the gradient cover method for the fading effect doesn't work with non-flat-color backgrounds. Isn't there a better way to do this with CSS?

The answer is: "yes" and "no". (more…)

Sponsor: Wufoo

Wufoo is for building web forms. From a simple contact forms to complex, multi-page, logic-controlled mega forms.

Personally, I'm a huge Wufoo user. I have multiple accounts across different organizations. Each organization has multiple users with access to different forms and reports. I've used it for job applications, customer support, selling T-shirts, collecting feedback, lead generation, and more.

Wufoo has collected literally hundreds of thousands of form entries for me, saving me countless hours of dev work. Often those entries are emailed to me and my team, sometimes they are turned into reports to help us understand something better, and always that data is stored right within Wufoo, accessible through APIs and to Wufoo's many integrations with other apps.

Remote Control WordPress at Scale

This is the third and final article in a series on "remote control WordPress". That's my nickname for this strategy of managing network settings on one "control" install, and then pulling those values into all your client installs. The advantage is that it saves staff members from having to toggle the same settings on the same network plugins, across many multisite installs.


New `video` Policies for iOS

This is pretty big news: earlier today the WebKit team announced that iOS 10 will now support silent <video> elements with the autoplay attribute, which is a big deal for performance. Jer Noble describes the update in much more detail:

It turns out that people these days really like GIFs. But the GIF format turns out to be a very expensive way to encode animated images when compared to a modern video codec like H.264. We’ve found that GIFs can be up to twelve times as expensive in bandwidth and twice as expensive in energy use. It’s so expensive that many of the largest GIF providers have been moving away from GIFs and toward the <video> element. Since most of these GIFs started out their lives as video clips, were converted into animated GIFs, and were again converted back to video clips, you might say that the circle is complete.

Using the fieldset and legend elements

Leonie Watson:

You should use the <fieldset> and <legend> elements when:

  • You have a single multiple choice question (using radio buttons or checkboxes).
  • You have several questions relating to the same topic (like text boxes, or any other type of field).

You should not use the <fieldset> and <legend> when:

  • You have a single form field that asks for a single piece of information.

Learning to COPE with Microservices

I vividly remember my first encounter with a content management system: It was 2002 with a platform called PHP-Nuke. It offered a control panel where site administrators could publish new content that would be immediately available to readers, without the need to create/edit HTML files and upload them via FTP (which at the time was the only reality I knew).

Once I'd made the jump to a CMS, I didn't look back. CMSs quickly became part of my toolkit as a web developer, and I didn’t really stop to question how they worked. I spent a lot of time learning my way around the various components of the web stack; falling in and out of love with different languages, paradigms, frameworks and tools. It took me a long time to stop and think about the most important part of any system: how it manages and stores content.

I set out on a quest to learn more about what's under the hood of a CMS (more…)

OAuth Fun with OAuth1

This is the second article in a three-part series about using the WP API to achieve something I'm calling "Remote Control WordPress", a lifestyle where you'd manage network settings on a "control" install, and have other "client" installs pull their settings from the control. The advantage of this is that you could then manage the settings for many WordPress installs all in one place. The first article laid out how to register network settings as a custom endpoint in the WP API, but stopped short of demonstrating how to grab those settings when they are protected by a permissions callback, which they should be. This article picks up that thread, demonstrating how to pass OAuth credentials to the WP API.


Change Color of All Four Borders Even With `border-collapse: collapse;`

The following is a guest post by Daniel Jauch. It's a quicky that covers something I bet many of us have run across at one time or another: border-collapse is great, until it impedes on your ability to change a border color you're trying to change because of the overlapping.

The border-collapse property is great for making borders even all around <table></table> cells. It makes for a clean look that I actually prefer.

But, there is something that can cause issues with how a browser draws the cells and their respective borders. (more…)

A Comprehensive Guide to Font Loading Strategies


The post we've been waiting for from Zach Leatherman. This will be the go-to reference when making tech and UX choices on font loading.

Zach compares 11 current (and future) techniques for loading web fonts, all with live demos. He clearly lists the PRO's and CON's for each without making it a novel. Most valuably, he provides a VERDICT on each, which let's you know if the technique is up-to-par or not.

A winner is declared, but it's fairly tricky to implement. It requires a "very small subset Roman web font" as a data URL loaded in the head, cached with sessionStorage, and observed for and loaded in stages via class names. The "baseline standard" is "FOUT with a Class" (eliminates the dangerous FOIT), and there are options in there if you really dislike FOUT.

A future-winner is also declared.