Collective #618
Inspirational Website of the Week: Chris Wilcock
An outstanding class act that incorporates fresh typography with a plethora of inspiring and fluid animations.
Get inspired
Elder.js
Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
Check it out
Build websites with the most popular WordPress theme in the world
With the Divi Layout Packs you'll get world-class designs ready to be used for your client projects.
Start building
Changing World, Changing Mozilla
Mozilla wants to become something "that excites people and shapes the agenda of the internet". But sadly at the cost of letting go approximately 250 people from Firefox devtools, MDN, WebXR/Firefox Reality and more.
Read it
How To Configure Application Color Schemes With CSS Custom Properties
In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors by dividing colors into three levels.
Read it
Vertical text alignment in buttons and inputs
Learn how to center text vertically in buttons and input elements using the padding and line-height CSS properties.
Read it
Device Motion Depth
A really cool mobile demo that simulates depth with device motion by Marco Ludovico Perego.
Check it out
Gradient angles in CSS, Figma & Sketch
Learn how gradient angles in graphics programs differ from gradients created with CSS. By Nils Binder.
Check it out
Layout Shift GIF Generator
A Cumulative Layout Shift (CLS) visualiser that helps identify problematic layout shifts in the viewport on mobile and desktop.
Check it out
Supercharging <input type=number>
Kilian Valkhof shows how to build a better number input type.
Read it
Different versions of your site can be running at the same time
An interesting article by Jake Archibald on the problems of different live site versions and their solutions.
Read it
1Keys – How I Made a Piano in only 1kb of JavaScript
Frank Force shares how he coded a 1kb piano, the winner of the JS 1024 competition.
Read it
Pixeltrue
SVG illustrations and Lottie animations, available for free for personal and commercial use (MIT License).
Check it out
Building a Design System Library
Some fundamental things that everyone should consider when designing a shared library within Figma.
Read it
10 great open source games from GMTK Game Jam 2020
The staff picks from the GMTK Jam 2020 with source code to play, hack on, or learn from.
Check it out
The Endless Doomscroller
Benjamin Grosser made an endless stream of doom, without all the specifics that can "... offer up an opportunity for mindfulness about how we're spending our time online and about who most benefits from our late night scroll sessions".
Check it out
Previewed
Choose from ready-made templates to generate mockups, screenshots and video previews and for your app.
Check it out
PDF: Still Unfit for Human Consumption, 20 Years Later
Interesting article: Research spanning 20 years proves PDFs are problematic for online reading.
Read it
Serverless: I'm a big kid now
Learn about the different flavors of Serverless, and the pros and cons of each.
Read it
Let's build a Full-Text Search engine
In case you missed it: Artem Krylysov shows how to build a FTS engine for searching across millions of documents in less than a millisecond.
Read it
Chrome Music Lab
Chrome Music Lab is a website that makes learning music more accessible through fun, hands-on experiments.
Check it out
How I Structure My CSS (for Now)
Matthias Ott shares his current take on CSS structure.
Read it
Generative Logo Design
Some great insight into the journey of creating a generative logo for Components AI.
Read it
Form design best practices
Andrew Coyle provides some best practices that serve to provide a shorthand when designing forms.
Read it
Some more CSS comics
Some more CSS comics by Julia Evans.
Check it out