What we’ve published


Leveling Up with React: Redux
The final post in Brad Westfall’s series on React, this time focusing on Redux, a tool that helps you manage state across an entire app in a prescribed and very sensible way.


What’s the deal with declaring font properties on @font-face?
As in:

 
@font-face {
  font-family: 'My Font';

  /* Why is this here? */
  font-weight: 700;

  src: url(my-font.woff2) format('woff2');
}

Here's a way to think about it: those properties are gatekeepers.
 

Accessible, Simple, Responsive Tables
Davide Rizzo deep dives into some neat styling tricks for a responsive .
 
What we’ve been reading, listening and watching

Rachel Nabors writes about how web animations have developed over the past several years:
The Web Animations API is a spec created to unite CSS Animations, Transitions, and SMIL (native SVG animation) under one animation engine. JavaScript developers can tap into it to build more performant DOM animations and libraries. Browsers can also tap into the API to build more advanced animation developer tools—and they’ve been doing just that.
Paul Lewis answers questions about performance, high speed network connections and frameworks:
To be super clear, a library that does a job for me is extremely welcome, whether that be date formatting, model storage & retrieval, routing, or history state management. I am a big fan of libraries, although again I will not include one if the code required by me is relatively small; it will largely depend on the number of edge cases it covers, and which User Agent(s) the intended users of the app will be using. If a library misbehaves in any way, I can swap it out for another. If a library is sufficiently large, or it has sufficient reach, it becomes indistinguishable from a framework.
And last, but certainly not least, Houdini is a new W3C task force that hopes to give web developers a number of low level browser APIs. Philip Walton has the scoop:

The bottom line is, imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. And think about all of the new features you read of in blog posts or hear about at conferences and meetups — things like CSS grids, CSS snap points and sticky positioning. Imagine if you could use all of them today and in a way that was as performant as native CSS features. And all you’d need to do is grab the code from GitHub.

This is the dream of Houdini. This is the future that the task force is trying to make possible.

 
In other news around the web
 
From the (updated!) archives

Although the support for CSS Grids isn’t looking particularly great right now that shouldn’t stop us from learning more about them. So we’ve made a Complete Guide that should answer all your questions like “how does it work?” and “why can’t we just use flexbox for layout?”:
CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. CSS has always been used to lay out our web pages, but it's never done a very good job of it. First we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it's intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we've all been hacking our way around for as long as we've been making websites.
 
What have we learned this week?

Chris Coyier: I know we mentioned the React series at the top of the email, but it's the thing I'm most excited about lately. Not only the series itself, which is great (love those Lynn Fisher illustrations), but actually diving into these technologies myself and using them. I'm just kicking off a brand new (rather huge) project and we're going for React and Redux, so it couldn't be more perfect timing.



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