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!


Staggering Animations

The following is a guest post by David DeSandro. David wanted to offer a new feature in Isotope: staggered animations. Like so many things web, there are lots of ways he could have approached it. Here he looks at some of the possibilities, the advantages and disadvantages of each, and what he ultimately went with for Isotope.


#148: Laying Things Out (HTML & Flexbox) with Dee Gill

In this pairing screencast, I hang out with Dee Gill. We take a look at some layout stuff for a new app she's working on: Tinge. She had a design mockup she was working from, so we peak at that and try and build it out in HTML and CSS. We start at the top and focus on the navigation, using flexbox heavily to do what we need to do. …

Watch Video →

We have a pretty good* newsletter.