This week’s Friday Frontend comes with an extra serving of typography goodness. Much of the innovation happening here is still in the early stages, but from the font-display property to variable fonts, the future of typography on the web is SUPER EXCITING.

There’s also some great CSS tutorials, React and Vue goodness, a back-to-basics JS and CSS article, and much more. Enjoy!

Happy Friday!
KBall from ZenDev

CSS & SCSS

CSS font-display: The Future of Font Rendering on the Web

Dive into a super cool new CSS property to allow control over how typography displays while font files are still loading. Sure it’s not available on many browsers yet, but imagine what this will do for our ability to use custom fonts reliably. I’m excited!


Implementing A Pure CSS Collapsible

Nice walkthrough using the “checkbox hack” (implementing state changes via css targeting a :checked pseudoselector) to implement a pure CSS Collapsible. Particularly useful if you ever want to implement interactive HTML emails - an environment where there is no JavaScript!


CSS Grid Gotchas And Stumbling Blocks

Excellent article by Rachel Andrew (in my head I think of her as “the goddess of grid”, she probably knows more about CSS Grid than anyone in the world), this goes through many of the conceptual jumps and differences in thinking in CSS Grid as compared to all other web layout techniques previously.


A Tale of Four Properties

Chris Coyier (of CSS Tricks & Codepen) recorded a screencast of his talk about 4 awesome CSS properties. I was lucky enough to see this talk live at Web Unleashed, it’s well worth the time it takes to watch it, it will both expand your sense of possibilities of CSS, and bring you back to the good old days with some great They Might Be Giants references. :D


How to Draw Your Face in CSS

A nice, whimsical walkthrough of how to translate an illustrator design of a face into pure HTML and CSS.


JavaScript

What you need to know about React 16

An excellent quick read of all the new goodies in the latest version of React. As an HTML structure nerd I’m particularly excited by the ability to render arrays of elements without a wrapper!


8 Key React Component Decisions

An excellent guide to many of the key decisions to get your team on the same page for a React application. And if you’re new to React, this is also a great walkthrough of topics to learn about to get a good grasp on React.


Getting Your Head Around Vue.js Scoped Slots

The concept of slots is key to elegantly creating reusable, customizable components for content in Vue. Scoped slots let you take those components to the next level, passing data back up from the child to the parent for use in templates, letting you create components at a higher level of abstraction.


Javascript Testing Frameworks: The Best to Test JS Code

Megalist of all of the different JavaScript testing frameworks, with some info about each. If you’re already using a framework, don’t worry about it, but if you’re trying to figure out what a good test framework would be this is a great resource.


How to use jQuery Selectors and CSS Selectors, and the basics of how they work

With all of the emphasis on advanced JavaScript frameworks, it can be easy to skip over the basics and miss out on fundamentals. For those building less complicated sites & applications, a solid understanding of CSS, JavaScript, and jQuery can take you a long way.


Other Awesomeness

WebVR is for everyone - This is how to design and develop an experience.

Great hands-on walkthrough to get you started using WebVR quickly, with minimal prior knowledge required.


What You Need to Know About Variable Fonts

I fell in love with the idea of variable fonts after attending a talk about them at Web Unleashed - these things have the potential to radically shake up our ability to use fonts on the web, letting us realize incredible variation without the performance cost of including a dozen fonts. Definitely check them out!


A Five Minutes Guide to Better Typography

An excellent visual walkthrough of typography that will help you wrap your head around to make, as the article says, “a beautiful group of letters, not a group of beautiful letters”.


Fundamentals of Responsive Images

A great, thorough walkthrough of the various techniques at your disposal to create responsive images for your site or application.


eBay’s Font Loading Strategy

In our lead off article we talked about how the font-display property will enable us to control font loading in the future - here’s a great in-depth walkthrough of how eBay handles this today to ship custom fonts without a FOUT (flash of unstyled text) or FOIT (flash of invisible text).


Happy Friday!