A Guide to Handling Browser Events
13.3.2020
In this post, Sarah Chima walks us through how we can work with browser events, such as clicking, using JavaScript. There’s a ton of great info in here! If JavaScript isn’t your strong suit, I think this is the best explanation of event handling that I’ve read in quite some time.
When an event...
Two Steps Forward, One Step Back
12.3.2020
Brent Jackson says CSS utility libraries failed somewhat:
Eventually, you'll need to add one-off styles that just aren't covered by the library you're using, and there isn't always a clear way to extend what you're working with. Without a clear way to handle things like this, developers tend...
Programming Sass to Create Accessible Color Combinations
12.3.2020
We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
The post Programming Sass to Create Accessible Color Combinations appeared first on CSS-Tricks
Consistent Backends and UX: What Can Go Wrong?
12.3.2020
Article Series
Why should you care?
What can go wrong?
What are the barriers to adoption? (Coming soon)
How do new algorithms help? (Coming soon)
In the previous article, we explained what strong (vs. eventual) consistency is. This article is the second part of a series where we explain how...
Collective #596
12.3.2020
Using Redux with React * Utopia * Midori * Pure CSS Landscape * Why Svelte * Snapfont
Collective #596 was written by Pedro Botelho and published on Codrops
Careful with Nested `display: grid; height: 100%;`
11.3.2020
It's not every day you can feel CSS be slow at something. Reddit user jgbbrd discovered nesting grid containers that all have 100% height can cause many-seconds of rendering delay. Probably not something you'll ever have to worry about, but still, interesting. From the comments:
What a funny...
How to Make a Line Chart With CSS
11.3.2020
Line,  bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG or a JavaScript chart library like Chart.js or a complex tool like D3 to create those charts, but what if you don't want to load yet another...
Sass !default and themeable design systems
11.3.2020
This is a great blog post from Brad Frost where he walks us through an interesting example. Let’s say we’re making a theme and we have some Sass like this:
.c-text-input {
background-color: $form-background-color;
padding: 10px
}
If the $form-background-color variable isn’t defined then...
Fluid Width Video
11.3.2020
IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <video tag. You might...
Background Scale Hover Effect with CSS Clip-path
11.3.2020
A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.
Background Scale Hover Effect with CSS Clip-path was written by Mary Lou and published on Codrops
Block Links Are a Pain (and Maybe Just a Bad Idea)
10.3.2020
As we noted in our complete guide, you can put an <a href=""> link around whatever chunks of HTML you like. Let's call that a "block link." Like you are wanting to link up an entire "Card" of content because it makes a big clickable target.
<a href="/article/"<!-- display: block;...
Considerations When Choosing Fonts for a Multilingual Website
10.3.2020
As a front-end developer working for clients all over the world, I've always struggled to deal with multilingual websites — especially cases where both right-to-left (RTL) and left-to-right (LTR) are used. That said, I’ve learned a few things along the...