Collective #678

Inspirational Website of the Week: Miti Navi
Beautiful shapes with modern and elegant typography make this site a true masterpiece.
Get inspired

Translate designs to developer-friendly code with Anima
Use Anima to translate designs into developer-friendly React, Vue & HTML code. As in, code you can actually work with.
Learn more

Developer Decisions For Building Flexible Components
In this article, Michelle Barker walks us through the process of taking a seemingly simple design for a text-and-media component and deciding how best to translate it into code, keeping in mind the needs of both users and content authors.
Read it

Building a split-button component
A foundational overview of how to build an accessible split-button component. By Adam Argyle.
Read it

My Room in 3D
Bruno Simon finished his amazing room in 3D, a fantastic demo of a blend of technologies.
Check it out

YT-DLP
A youtube-dl fork based on the now inactive youtube-dlc. The main focus of this project is adding new features and patches while also keeping up to date with the original project.
Check it out

Roadroller: Flattens Your JavaScript Demo
Roadroller is a heavyweight JavaScript packer designed for large demos of at least 10 KB in size, like js13kGames. Depending on the input it can provide up to 15% additional compression compared to Zopfli.
Check it out

Practice / 3.js
An amazing particle experiment by Toshiya Marukubo (smartphone not supported).
Check it out

Using the platform
Elise Hein shows how important it is to “know the platform” and be able to develop web apps without frameworks or build tools.
Read it

Learning in the Open
Michelle Barker’s article on how learning by doing is the most effective way to learn anything.
Read it

Pollen
Pollen is a TailwindCSS-inspired library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems.
Check it out

HTML checkboxes Webcam filter
Bryan Braun made this fun webcam filter out of HTML checkboxes.
Check it out

Bundling non-JavaScript resources
Learn how to import and bundle various types of assets from JavaScript in this article by Ingvar Stepanyan.
Read it

Monkey Island Tribute, a WebGL Experience
A beautiful WebGL experience by Sébastien Lempens.
Check it out

Warmth
A wonderful Three.js sketch made by Ryohei Ukon.
Check it out

SVGOMG
Jake Archibald released a new version of this great tool powered by SVGO v2.5.0.
Check it out

Houdini.how
A super-cool CSS Houdini worklet made by George Francis.
Check it out

58% of Hacker News, Reddit and tech-savvy audiences block Google Analytics
Marco Saric investigates how much data is missing from Google Analytics due to adblockers and privacy-friendly browsers.
Check it out

Madbox
Madbox is a mobile gaming company and for their new website they collaborated with Bruno Simon. There’s also this awesome little game that you can play in the browser.
Check it out

Inspirational Websites Roundup #29
A new collection of the best web designs and creative websites from the past couple of weeks.
Check it out