Collective #647
Publikováno: 4.2.2021
Mutsuacen * New aspect-ratio CSS property * Fusuma * Dark Patterns in UI Copy 2021
The post Collective #647 appeared first on Codrops.

Inspirational Website of the Week: CCNCN – Saison 2021
A fresh design with great typography and a daring, addicting click interaction concept. Our pick this week.

Blockchain domains are owned, not rented
Blockchain domains are stored by their owners in their wallet like a cryptocurrency, no third party can take them away. Pay once and you own the domain for life, no renewal fees. Get your .crypto or .zil domain now.

Creative Good: Why I’m losing faith in UX
Read why Mark Hurst thinks that UX is now “user exploitation”.

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly
Maintaining aspect ratio within images and elements is now easier to achieve with the new aspect-ratio CSS property.

Things You Can Do With CSS Today
Andy Bell looks into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties.

We Value Your Privacy (At About $0.50): Dark Patterns in UI Copy 2021
Read how shady euphemisms are employed to trick users into handing over personal data, and manipulative descriptions continue to deceive people. By Graeme Fulton.

SVG Waves
A handy SVG wave generator made by Bereket Semagn.

Mutsuacen
A great little tool to create animated and interactive drawings.

Fusuma
A tool to create slides from Markdown.

Crunk dancer
An amazing music web experiment by Arno Di Nunzio. Made with Three.js and Cannon.

Faking container queries with CSS Grid
With CSS Grid and some trickery it’s possible to implement something very close to container queries.

Le Voyage Azarien
A beautiful immersive journey into a forest made by Joseph Azar.

Making GitHub’s new homepage fast and performant
The third article in a five-part series on building GitHub’s new homepage.

Iconduck
Iconduck lists over 100,000 free open source icons, illustrations and graphics from around the web. They can be used for personal and commercial projects.

CSS Polygon Shapes
Tweakable shapes generated with css-doodle and clip-path. By Yuan Chuan.

ReacType
If you didn’t know about it yet: ReacType is an open-source application that assists developers in prototyping React applications via a user-friendly drag-and-drop interface.

Supercons
A friendly open source React iconset by Lachlan Campbell.

How-to: Use the tabindex attribute
Learn why and how to use the tabindex attribute in this article by Eric Bailey.

Continuous Typography Tester
A prototype of a design tool for continuous typography made by Max Kohler. Read more about it here.

Don’t use functions as callbacks unless they’re designed for it
Jake Archibald shows why functions shouldn’t be used as callbacks unless they are designed for it.

GutenSearch
Find any term in the wast body of Project Gutenberg books.

Gaze-controlled keyboard
Write words using your eye movements. Built with Tensorflow.js

Skateboard Video Platform
A beautiful UI coded by Aysenur Turk.

Droste Creator
Create recursive images with the droste effect using this cool tool. Made by Javier Bórquez.

Barebones CSS for Fluid Images
Zach Leatherman’s CSS tip for fluid images.

Svelte Kit, the first ‘serverless-first’ framework?
Jasper Moelker tested out Svelte Kit and summarized what he learned.

Introducing Pika. A free, open-source colour picker app
Learn about Pika, an easy to use, open-source, native colour picker for macOS.

How to Code the Traveling Particles Animation from “Volt for Drive”
A coding session where you’ll learn how to implement Volt for Drive’s traveling particles animation with Three.js.
The post Collective #647 appeared first on Codrops.