Collective #678
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_WOTW.jpg?x86293)
Inspirational Website of the Week: Miti Navi
Beautiful shapes with modern and elegant typography make this site a true masterpiece.
Get inspired![Anima](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/Collective350x400.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_componentmichelle.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_split.jpg?x86293)
Building a split-button component
A foundational overview of how to build an accessible split-button component. By Adam Argyle.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_myroom.jpg?x86293)
My Room in 3D
Bruno Simon finished his amazing room in 3D, a fantastic demo of a blend of technologies.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_dlp.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_roller.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_exercise.jpg?x86293)
Practice / 3.js
An amazing particle experiment by Toshiya Marukubo (smartphone not supported).
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_usingthe.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_learning.jpg?x86293)
Learning in the Open
Michelle Barker's article on how learning by doing is the most effective way to learn anything.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_pollen.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_checkboxes.jpg?x86293)
HTML checkboxes Webcam filter
Bryan Braun made this fun webcam filter out of HTML checkboxes.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_bundle.jpg?x86293)
Bundling non-JavaScript resources
Learn how to import and bundle various types of assets from JavaScript in this article by Ingvar Stepanyan.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_monkeyisland.jpg?x86293)
Monkey Island Tribute, a WebGL Experience
A beautiful WebGL experience by Sébastien Lempens.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_warmth.jpg?x86293)
Warmth
A wonderful Three.js sketch made by Ryohei Ukon.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_svgo.jpg?x86293)
SVGOMG
Jake Archibald released a new version of this great tool powered by SVGO v2.5.0.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_paintlet.jpg?x86293)
Houdini.how
A super-cool CSS Houdini worklet made by George Francis.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_googleanalytics.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_game.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/09/C678_roundup.jpg?x86293)
Inspirational Websites Roundup #29
A new collection of the best web designs and creative websites from the past couple of weeks.
Check it out