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

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.

Animate box-shadow with Silky Smooth Performance  

Neat trick by Tobias Ahlin:

How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance.

There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo element.


Pretty bold step for WordPress. Totally new UI. Totally new technologies. No more PHP and MySQL, it's Node.js, React, Flux, Babel, Webpack... the fanciest of fancy modern tooling. Still completely open source.

Matt Mullenweg:

On one hand it seems risky. How much of WordPress' success is based on the epic backwards compatibility and ability to run on nearly any server? Will this ever become the self-hosted variant? At the moment, they are saying "Install JetPack and you can manage your self-install from" - but that doesn't feel like an answer. If we can never self-install, maybe the backwards compatibility doesn't matter? Can you keep developers interested in working on "the old thing" when the new shiny open source thing that powers the core business is right there?

On the other hand it seems to stifle risk. If you stay stuck in old tech, how long can you retain talent? How long until using it feels awkwardly antiquated?

This chart really drives home the before/after benefits.

The Cost of Frameworks Recap

A classic blog-and-forth, my favorite form of internet discussion.

Paul Lewis does some research on the performance of differnet frameworks, pitting each of their TodoMVC versions against one another:

For me the results are pretty clear: there appears to be a pretty hefty tax to using Frameworks on mobile, especially compared to writing vanilla JavaScript.

Tom Dale:

Most critics miss the key [value to using a framework]: frameworks let you manage the complexity of your application as it and the team building it grows over time. All of the other stuff is just gravy.


... my hypothesis is that, for apps of any complexity, the ones that start off “vanilla” will accrete their own Frankenframework that performs similarly to, if not worse than, an off-the-shelf framework

Dave Rupert:

... the interesting discussion to be had from Tom’s post is: Are we trying to make lightweight sites that WORK FAST or maintainable sites WORK FOR YEARS?

My take: yes, maximum performance and maximum developer comfort are a bit at odds. It's a dance as old as time. The river runs slower when you dam it, but hey you get some electricity. OK enough metaphors.

More baby bear porridge from Zach Leatherman, and a hopefull call for benchmark-pushing competeition:

If you decide to spend valuable kilobytes on a framework, fortunately there are plenty of frameworks to choose from. Just like DOM libraries used to compete on selector engine performance, the onus is on framework authors to compete against each other on initial render performance.

Another thing I'd add: this uncached time-to-glass stuff is a good metric; perhaps the most important metric. But measuring performance after that is pretty important too. Who is winning the "clickin' around and doing stuff" performance race?

Sponsored: Learn by Doing with Code School  

Join over 1 million students who are learning by doing with Code School. With more than 50 courses covering JavaScript, HTML/CSS, Ruby, Git, iOS, Database, and more, Code School pairs experienced instructors with engaging content.

How Our CSS Framework Helps Enforce Accessibility  

Ian McBurnie:

A user interface control not only needs to look like a certain control, it must be described as that control too.

What if we could also write our CSS framework in a way that acts as another layer in our line of defense? Read on to find out how!

One of the tricks:

[role=button].btn {
  /* Gotta be the right role before it gets the styles */

#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