The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Building for HTTP/2  

Rebecca Murphey:

This is everything-you-thought-you-knew-is-wrong kind of stuff. In an HTTP/2 world, there are few benefits to concatenating a bunch of JS files together, and in many cases the practice will be actively harmful. Domain sharding becomes an anti-pattern. Throwing a bunch of <script> tags in your HTML is suddenly not a laughably terrible idea. Inlining of resources is a thing of the past. Browser caching — and cache busting — can occur on a per-module basis.

I can't help but think that web development might actually make sense some day.

Metadata Markup  

Jeremy Keith looks at the competing standards for the metadata that goes in the head which ultimately helps services such as Slack, Twitter and Facebook to create a preview of the content of a website. Unfortunately the lack of consensus is an annoying problem for developers:

We’ve seen this kind of waste before. I remember when Netscape and Microsoft were battling it out in the browser wars: Internet Explorer added a proprietary acronym element, while Netscape added the abbr element. They both basically did the same thing. For years, Internet Explorer refused to implement the abbr element out of sheer spite.

40% Sale in the Shop  

Have you been trying to find some kind of SALE happening online today, but coming up empty handed? We have some CSS-Tricks T-Shirts and hoodies in the store at 40% off (use coupon code trikzare4kids) now through Monday.

If you're size Small or XXL/XXXL, most of the designs are available. If you're Medium or Large, not so much, but we hope to have some kind of new fun merch soon.

Rolling Out Responsive  

Redesigning a site with responsive design? The tech stuff can be challenging, but easy compared to the decision-making, process-defining, and organization-wrangling before you even get there. Karen McGrane has a new book on all this stuff called Going Responsive, and this link post links to Chapter 2 of that, published on A List Part.

In other book news, Christopher Schmitt is working on a book around one of those rollout options: retrofitting. And there is a new Ethan Marcotte book as well: Responsive Design: Patterns & Principles.

A New Responsive Font Format for the Web

Nick Sherman gave a fascinating talk at Ampersand earlier this month which was based on an article he wrote called Variable Fonts for Responsive Design. In both the talk and the essay he suggests that we need a new font format to solve complex responsive design problems:

…the glyph shapes in modern fonts are restricted to a single, static configuration. Any variation in weight, width, stroke contrast, etc.—no matter how subtle—requires separate font files. This concept may not seem so bad in the realm of print design, where layouts are also static. On the web, though, this limitation is what I refer to as the “glass floor” of responsive typography: while higher-level typographic variables like margins, line spacing, and font size can adjust dynamically to each reader’s viewing environment, that flexibility disappears for lower-level variables that are defined within the font. Each glyph is like an ice cube floating in a sea of otherwise fluid design.


Scaled/Proportional Content with CSS and JavaScript

The web is a fluid place. Different sized screens, yadda yadda yadda. Fortunately for us, the web is ready for it. Text wraps. CSS gives us control over how to size things. What we don't get (easily, anyway) is a way to scale whole element (and it's children) proportionally—retaining its exact layout as it changes size.

We can do it though.


WPO stats  

WPO, as in, "Web Performance Optimizations", I believe.

Case studies and experiments demonstrating the impact of performance optimization on user experience and business metrics.

Real companies, real performance changes, real impact. Ya know, Little things like:

Staples reduced median homepage load time by 1 second and reduced load time for the 98th percentile by 6 seconds. As a result, they saw a 10% increase in their conversion rate.

#143: Using and Caching Third-Party JSON with WordPress

On the design of CSS-Tricks as I record this, one of the things I wanted to add was a "Front End Design & Development Jobs" widget, powered by the CodePen Job Board. Those jobs are available as JSON data.

Couldn't we just do an Ajax request for that and use it? Perhaps a little JavaScript Templating? Sure, we could. But Ajax requests are async. I'm picturing a little spinner on every page load, waiting for the data …

Watch Video →

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed