Collective #548
12.9.2019
Metronomes in JavaScript * VeoLuz * Logical Operations with CSS Variables * Can I Email * Simplicity (II)
Collective #548 was written by Pedro Botelho and published on Codrops
Using Custom Properties to Wrangle Variations in Keyframe Animations
12.9.2019
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would so nice to drop yet one more dependency and go with vanilla CSS.
Well, I found a way to account for variations within...
Fast Static Sites with Netlify and AnyMod
12.9.2019
In about 10 minutes, we'll set up a workflow that makes static sites dead simple.
You'll get the following:
Free https
Free or cheap hosting
Build sites quickly
Edit with live reload
Edit when you’ve forgotten everything in 6 months
Start: signups
We can get all this by using Netlify (really...
The Rise of the Electric Scooter
12.9.2019
In an electric car, the (enormous) battery is a major part of the price. If electric car prices are decreasing, battery costs must be decreasing, because it's not like the cost of fabricating rubber, aluminum, and steel into car shapes can decline that much, right?
On an electric scooter, though
Logical Operations with CSS Variables
11.9.2019
Very often, while using switch variables (a variable that's either 0 or 1, a concept that's explained in a greater detail in in this post), I wish I could perform logical operations on them. We don't have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these...
Some HTML is “Optional”
11.9.2019
There is a variety of HTML that you can just leave out of the source HTML and it's still valid markup.
Doesn't this look weird?
<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.
It does to me, but the closing </p> tags are optional. The browser will detect...
Awesome Demos Roundup #8
11.9.2019
A roundup of hand-picked web experiments using the latest front-end technologies to ignite the creative coder in you.
Awesome Demos Roundup #8 was written by Mary Lou and published on Codrops
Caniuse and MDN compatibility data collaboration
10.9.2019
Second only to "silly GIFs," I'd guess screenshots of caniuse are the most common slide graphic at web conferences. It's become the ultimate source for looking at web compatibility data in the hearts and minds of web developers.
Can I use CSS filter in Firefox? Yes. Can I use the filter() function?...
Hamburger Menu with a Side of React Hooks and Styled Components
10.9.2019
We all know what a hamburger menu is, right? When the pattern started making its way into web designs, it was both mocked and applauded for its minimalism that allows main menus to be tucked off screen, particularly on mobile where every pixel of space counts.
CSS-Tricks is all about double...
“Off The Main Thread”
10.9.2019
JavaScript is what they call "single-threaded." As Brian Barbour puts it:
This means it has one call stack and one memory heap.
We all feel a symptom of that regularly in the form of performance jank and non-interactivity on elements or entire sites. If we give JavaScript lots of jobs and it gets...
How to Not Minify Source with webpack
10.9.2019
The webpack JavaScript utility has taken over the modern JavaScript landscape, so much so that it’s hard to be a JavaScript developer and not use it. JavaScript build utilities are the point where they do best practices implicitly, like minify code, caching, and more. I was recently debugging...
CSS Security Vulnerabilities
9.9.2019
Don't read that headline and get worried. I don't think CSS is a particularly dangerous security concern and, for the most part, I don't think you need to worry about it.
But every once in a while, articles tend to circulate and get some attention as to the possibilities of what CSS can do that...