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.
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?
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.
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 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.
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.
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. …