How to Reverse CSS Custom Counters
11.6.2020
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title
But the above is just text. I wanted to do this with a semantic <ol> element.
The easy way
This can...
Kotlin Coroutines and Delay
11.6.2020
Whenever I suspect that there’s a timing conflict causing a problem with rendering and directives, I usually opt for a JavaScript setTimeout with a delay. The setTimeout code never makes it to production, but it does help me to understand if my code is the problem or if there’s a timing...
WDRL — Edition 282: Welcome back again, the web has changed, work as well.
10.6.2020
Hey,
Hello my fellow readers! After months of silence I’m back. Since my last update in February a lot has changed, not only in my life but in everyones’. A virus makes us living differently than we are used to and work has changed with it. A lot of people work from home these days, others lost...
Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis
10.6.2020
You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using the idea...
CSS :is() and :where() are coming to browsers
10.6.2020
Šime Vidas with the lowdown on what these pseudo-selectors are and why they will be useful:
:is() is to reduce repetition¹ of parts of comma-separated selectors.
:where() is the same, but nothing inside it affects specificity. The example of wrapping :where(:not()) is really great, as now there...
How to Create a Motion Hover Effect for a Background Image Grid
10.6.2020
A short tutorial on how to achieve a motion hover effect on a background image grid.
The post How to Create a Motion Hover Effect for a Background Image Grid appeared first on Codrops
Cool Little CSS Grid Tricks for Your Blog
10.6.2020
I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more mathematical and, therefore, easier-to-understand features like transforms. However, other areas of CSS, such as layout, have remained a constant source...
Making My Netlify Build Run Sass
9.6.2020
Let’s say you wanted to build a site with Eleventy as the generator. Popular choice these days! Eleventy doesn’t have some particularly blessed way of preprocessing your CSS, if that’s something you want to do. There are a variety of ways to do it and perhaps that freedom is part...
5 Myths About Jamstack
9.6.2020
Jamstack isn’t necessarily new. The term was officially coined in 2016, but the technologies and architecture it describes have been around well before that. Jamstack has received a massive dose of attention recently, with articles about it appearing in major sites and publications and...
The Trickery it Takes to Create eBook-Like Text Columns
8.6.2020
There’s some interesting CSS trickery in Jason Pamental’s latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book experience on mobile. Which brings up an interesting question right away… how do you set full-width columns that...
How to Get All Custom Properties on a Page in JavaScript
8.6.2020
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve declared a single custom property on the HTML element:
html {
--color-accent: #00eb9b;
}
In JavaScript...
Analyzing Notion app performance
8.6.2020
Here’s a fantastic case study where Ivan Akulov looks at the rather popular writing app Notion and how the team might improve the performance in a variety of ways; through code splitting, removing unused vendor code, module concatenation, and deferring JavaScript execution. Not so long ago, we made...