Author: admin

The Edge team put together a thorough demo of variable fonts, showcasing them in all of their shape-shifting and adaptive glory. Equally interesting as the demo itself is a history of web typography and where variable fonts fit in the grand scheme of things. This demo pairs well with v-fonts.com, which is an interactive collection of variable fonts that allows you to play around with the variable features each font provides. Direct Link to Article — Permalink The post Microsoft Edge Variable Fonts Demo appeared first on CSS-Tricks....

We started this series by learning how to animate HTML elements using mojs. In the second tutorial, we moved on to animation of built-in SVG shapes using the Shape module. The third tutorial covered more ways of animating SVG shapes using the ShapeSwirl and stagger modules. Now, we will learn how to animate different SVG shapes in a burst formation using the Burst module. This tutorial will depend on concepts we covered in the previous three tutorials. If you have not already read them, I would suggest that you go through them first. Creating Basic Burst Animations The first thing...

We’re so used to either a backend language or a JavaScript framework powering our data-backed components. I love me a Rails partial with a bunch of locals: {} or a but you don’t have to give up on components even if working in static HTML. With Nunjucks, which has includes and templates and macros, we have a robust toolset for building component-based sites that are easy, fast, and secure to host. Direct Link to Article — Permalink The post Building A Static Site With Components Using Nunjucks appeared first on CSS-Tricks....

We’ve blogged about responsive tables a number of times over the years. There’s a variety of techniques, and which you choose should be based on the data in the table and the UX you’re going for. But many of them rely upon resetting a table element’s natural display value to something else, for example display: block. Steve Faulkner warns us: When CSS display: block or display: grid or display: flex is set on the table element, bad things happen. The table is no longer represented as a table in the accessibility tree, row elements/semantics are no longer represented in any form. He argues that the browser is making a mistake here by altering those semantics, but since they do, it’s good to know it’s fixable with (a slew of) ARIA roles. Direct Link to Article — Permalink The post Short note on what CSS display properties do to table semantics appeared first on CSS-Tricks....

In this post, you’ll learn what ExpoKit is and how it is used for adding native functionality to Expo apps. You’ll also learn some of its pros and cons. In my Easier React Native Development With Expo post, you learned about how Expo makes it easier for beginners to begin creating apps with React Native. You also learned that Expo allows developers to get up and running with developing React Native apps faster because there’s no longer a need to set up Android Studio, Xcode, or other development tools. React Native Easier React Native Development With Expo Wern Ancheta But as...