✻ Wladston Ferreira Filho on Annotating Your (Critical) CSS
It's all about leaving /* comments */ in your CSS to designate declarations that are "critical", then separating that out into a separate CSS file that you can include in the .
Google even provides a service to give pages a "speed score", a not-so-subtle hint that performance can be related to SEO. Properly using Critical CSS is advised by Google to up your score. The technique is certain to cause a positive effect on render speed. The reduction in render time depends on how small you can make your Critical CSS, and how big your main stylesheet.
✻ Over on the Media Temple blog, Chris explains a method to load and use external data in React. It a demo that snags data from a JSON API templates it up and uses it.

✻ In Automating CSS Regression Testing, Garris Shipon gives us the breakdown of his visual regression testing app Backstop.js. Imagine getting a warning if you push a CSS change that breaks something you weren't expecting to break.

✻ Robin Rendle begins a three-part introduction to CSS Modules by first looking at what they are and why we might need them. Have you ever wanted to use a simple class name in both your HTML and CSS and not worry about it blasting all over your website and causing unintended problems? Read on.

What we’ve been reading, listening and watching

Back in 2012, Dustin Curtis wrote about pixel-fitting. That is, making raster images like logos and icons as crisp and sharp as possible:
After you resize a vector image onto a raster plane (like a Photoshop canvas), you should zoom in to the pixel grid and manually refit the paths to pixel edges where it makes sense.


And Monica Dinculescu takes a deep dive into everything emoji.

In other news around the web
 
A note from the archives

Yesterday The Manual, which calls itself a “design journal for the web”, released its fifth and final issue before announcing that it was going on permanent hiatus, so this week we thought it’s worth diving back into their archives rather than ours. There’s far too many articles to recommend, but exploring the Staff Picks is likely the best place to start for those unfamiliar with The Manual.

 
What have you learnt this week?

Chris Coyier:

I'm so stoked about this one.

I learned about Airtable. It's a spreadsheet interface that is ultimately a database. You make a "base", which is your data store (a spreadsheet) and it has wonderfully nice read and write JSON apis. It's a really unintimidating way to work with data on the web, and you can do it totally from the front end. Perfect for working in CodePen. 

As I type this, SNDmakes San Francisco is wrapping up. About 50 of us formed into small teams to prototype fun ideas at the intersection of technology and journalism. One of the people on my team was Meagan Gamache, an engineer at Slack, who showed me Airtable. She's an excellent back end engineer, but we reached for this for our project since it was so easy and perfect for what we were doing, which was:
  1. Collect some data with Wufoo
  2. Dump it to a .CSV
  3. Import it to Airtable
  4. Massage it through their nice interface
  5. Suck data down as JSON
  6. Make a cool interface in React
So satisfying.

Looks like Fieldbook is pretty similar. Google spreadsheets can also be accessed as JSON, but I found the JSON output pretty gnarly and the options limited.

Until next time!
Team CSS-Tricks
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.