Collective #678
Publikováno: 9.9.2021
Building a split-button component * Roadroller * Using the platform * Pollen
The post Collective #678 appeared first on Codrops.

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

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.

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.

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

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

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.

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.

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

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.

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

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.

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

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

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

Warmth
A wonderful Three.js sketch made by Ryohei Ukon.

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

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

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.

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.

Inspirational Websites Roundup #29
A new collection of the best web designs and creative websites from the past couple of weeks.
The post Collective #678 appeared first on Codrops.