Linearly Scale font-size with CSS clamp() Based on the Viewport


Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc(). Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior...

Web Technologies and Syntax


JavaScript has a (newish) feature called optional chaining. Say I have code like: const name = Data.person.name; If person happens to not exist on Data, I’m going to get a hard, show-stopping error. With optional chaining, I can write: const name = Data.person?.name; Now if person...

A Gentle Introduction to Using a Docker Container as a Dev Environment


Sarcasm disclaimer: This article is mostly sarcasm. I do not think that I actually speak for Dylan Thomas and I would never encourage you to foist a light theme on people who don’t want it. No matter how wrong they may be. When Dylan Thomas penned the words, “Do not go gentle into that good...

How to Create an Async Function


One thing I love about JavaScript is that there are many ways to accomplish the same task, one such example being creating functions. There are several patterns for functions; one of the last you see used is the new Function method: /* new Function(arg1, arg2 (...), body) */ const myFunction =...

Collective #624


Ray Marching Soft Shadows in 2D * Mono Icons * filters.css * Blacklight * Meta Tags The post Collective #624 appeared first on Codrops

The Empty Box


application building, creativity, starting The post The Empty Box appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter

Using Markdown and Localization in the WordPress Block Editor


If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it? Since the block editor is based on React, we may be tempted to use React components and HTML code for the documentation. That is the approach I followed in my previous article, which...

Jamstack Conf


Here’s an important detail here: It’s free! Jamstack Conf Virtual is coming up October 6th and 7th, 2020. The sessions are on October 6th. That’s the free part (register here). Then on October 7th there are a variety of workshops (they all look great to me) that are $100 USD each....

UI Interactions & Animations Roundup #10


Check out the latest trends in web motion design, UI interaction and animations and get inspired. The post UI Interactions & Animations Roundup #10 appeared first on Codrops

Accessible Web Animation: The WCAG on Animation Explained


It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to make sure our animations have a positive impact on accessibility, like planning how they contribute to the overall UX and ease of use of...

ztext.js


Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It’s reminiscent of Zdog, but for type. It works its magic by stacking a bunch of copies of the glyphs on top of each other that are offset by some...

Thinking About Power Usage and Websites


Gerry McGovern asked if I had any insight into energy consumption and websites. He has a book, after all, about the digital costs on the planet. He was wondering about the specifics of web tech, like… If you do this in HTML it will consume 3× energy but if you do it in JavaScript it will...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace