Collective #671
Publikováno: 22.7.2021
Building a breadcrumbs component * Designing for the Unexpected * Streambus * Graphlatte * Uniclode
The post Collective #671 appeared first on Codrops.

Website of the Week: Dpt.
Innovative like its studio, this website shines with playful details and exciting interactions. Our pick this week.

Building a breadcrumbs component
A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site. By Adam Argyle.

Streambus
A better business model for video folks where you can create your own streaming service and make money from subscriptions.

The most efficient way to build your WordPress site
Enjoy a fully-featured website templating system that harnesses the power of Divi’s Visual Builder to design your website’s header, footer, product templates, post templates, category pages, 404 page, and more.

Carrd
A free platform for building simple, fully responsive one-page sites for pretty much anything.

Back to the Future with RSS
It’s always good be reminded how awesome RSS is and why we should choose it over social networks.

Custom properties and @property
Peter-Paul Koch’s interesting article about @property and how it is useful for extending CSS inheritance, yet fails to approach the general applicability one would hope for.

Vanishing Suzanne
A magical vanishing effect made by Arno Di Nunzio.

The performance effects of too much lazy-loading
Learn about data-driven advice for lazy-loading images with Core Web Vitals in mind in this article by Rick Viscomi and Felix Arntz.

Uniclode: yet another demo of Eleventy Serverless
Uniclode is a zero-clientside JavaScript application that lets the end user select individual characters to generate a unicode-range value that can be used in font subsetting. By Zach Leatherman.

Glitter text
This is from a while back but it’s just so amazing: make some super realistic glitter text in SVG!

Designing for the Unexpected
Cathy Dutton explains how to create more robust and flexible designs by focusing on content that adepts to any environment.

The worst volume control UI in the world
A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume control interface in the world. Fabricio Teixeira shows some examples.

Svgbob editor
In case you didn’t know about it: Svgbob is a diagramming model which uses a set of typing characters to approximate the intended shape.

The accessibility stalemate
Christian Heilmann explains what he means by accessibility stalemate and why he believes it’s the root cause which makes the topic of accessibility less accessible.

Trust in Software, an All Time Low
Lars Wikman shares why he couldn’t give a good reason why anyone should trust, or like, software the way it typically works these days.

WebSockets and Node.js – testing WS and SockJS by building a web app
Learn how to build a cursor position sharing web app to demonstrate how to implement WebSockets with Node.js, and the pros and cons of WS and SockJS.

Of Course We Can Make a CSS-Only Clock That Tells the Current Time!
Learn how to build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. By Mate Marschalko.

From A Colourblind Designer To The World: Please Stop Using Red And Green Together
Learn how designers can avoid creating problems for color blind people in this article by Andrew Wilshere.

Wobbles and bubbles
Cassie Evans’ supercool scrolltrigger demo.

Acid Tabs
An open-source Chrome extension for auto-grouping tabs by URL patterns.

Graphlatte
Next.js template with GraphQL, Urql, Prisma, Nexus and Tailwind.

Creating a Typography Motion Trail Effect with Three.js
A tutorial on how to use WebGL framebuffers via Three.js to create an interactive typography motion trail effect.
The post Collective #671 appeared first on Codrops.