Collective #547
9.9.2019
How Video Games Inspire Great UX * js-noisy-gradient * PowerToys * SVG to JSX * Google Engineering Practices Documentation
Collective #547 was written by Pedro Botelho and published on Codrops
How to Contribute to an Open Source Project
9.9.2019
The following is going to get slightly opinionated and aims to guide someone on their journey into open source. As a prerequisite, you should have basic familiarity with the command line and Git. If you know the concepts and want to dive right into the step by step how-to guide, check out this part...
Stop Installing Packages Globally
9.9.2019
These days, most front-end projects are going to involve NPM packages of some kind. Occasionally, when browsing documentation for these packages, I’ll see a recommendation to install a package like this. yarn global add <package> Or like this. npm install --global <package> In both...
Various Methods for Expanding a Box While Preserving the Border Radius
6.9.2019
I've recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there's a rectangle with rounded corners expanding in the back.
Expanding box effect on the CodePen homepage.
Being the curious creature that I am, I had to check how this works! Turns out, the rectangle...
How to Create a Webcam Audio Visualizer with Three.js
6.9.2019
A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam.
How to Create a Webcam Audio Visualizer with Three.js was written by Ryota Takemoto and published on Codrops
WDRL — Edition 273: 5min meetings, Basic as virtue, and Well engineered text form fields.
6.9.2019
Hey,
Do we make our lives too complex, too busy, and too rich? More and more people working with digital technology realise over time that a simple craft and nature are very valuable. Getting more productive and the constant hunt to do more, including making wellness and sports a competition...
Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator
5.9.2019
In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's in-app browser is only posing as one. Let's get into the news!
Check if your content breaks after increasing text spacing
Dylan Barrell from...
Inspirational Websites Roundup #8
5.9.2019
Another set of inspirational website designs from the previous month to bring you up to date on the current design trends.
Inspirational Websites Roundup #8 was written by Mary Lou and published on Codrops
Collective #546
5.9.2019
Ackee * Webpack Boilerplate * O-GL * Email Love * Bitmelo * Overflow And Data Loss In CSS
Collective #546 was written by Pedro Botelho and published on Codrops
Using a PostCSS function to automate your responsive workflow
5.9.2019
A little while back, you might have bumped into this CSS-Tricks article where I described how a mixin can be used to automate responsive font sizes using RFS. In its latest version, v9, RFS is capable of rescaling any value for value for any CSS property with px or rem units, like margin, padding...
Learn Design for Developers and SVG Animation with Sarah Drasner ✨????
5.9.2019
(This is a sponsored post.)
Hey, Marc here from Frontend Masters — excited to support CSS-Tricks ❤️!
Have you checked out Sarah Drasner's courses yet? She has two awesome courses on Design for Developers and SVG! Plus another introducing Vue.js!
Design for Developers
In...
Multiline truncated text with “show more” button
4.9.2019
Now that we've got cross-browser support for the line-clamp property, I expect we'll see a lot more of that around the web. And as we start to see it more in use, it’s worth the reminder that: Truncation is not a content strategy.
We should at least offer a way to read that that truncated content...