Collective #672
Inspirational Website of the Week: Post Familiar Wine
An excellent design with modern artistic details and great typography.
Get inspired
Your personal freelancing and job seeking concierge.
We match you with vetted companies, pitch you and set up your interviews, handle your contracts, and pay you consistently—no reminders or invoices required.
Check it out
Creating An Accessible Dialog From Scratch
In this great guide, Kitty Giraudel digs into how to create a short script to create accessible dialogs.
Read it
Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines
Bramus Van Damme shows how to use the new properties of the Scroll-Linked Animations spec for controlling the time position of regular CSS Animations by scrolling.
Read it
Writing a Sokoban Puzzle Game in JavaScript
Tania Rascia shares a couple of things she learned making a Sokoban puzzle game in JavaScript.
Read it
Etienne Barbedette
What a fun web experience! Etienne shows his amazing skills in his super creative portfolio.
Check it out
Slinkity
A build plugin that can extend any 11ty site for components, page transitions, and more.
Check it out
Improving the Tesco Loan Calculator
To help communicate what a web form designer does, Chris Annetts reviewed and tried to improve the Tesco loan calculator.
Read it
Is it Time to Ditch the Design Grid?
Michelle Barker recaps the idea shared on Gridless Design and explains why we “shouldn’t be forcing content into a rigid design grid to the detriment of user experience”.
Read it
Shapecatcher
With Shapecatcher you can search through a database of characters by simply drawing your character into a box. It can find the most similar character shapes for your drawing.
Check it out
WCAG colour contrast ratio
Dan Hollick’s super interesting thread on how color contrast gets calculated and why the WCAG colour contrast ratio doesn’t always seem to work.
Check it out
Password-protected pages on Netlify
Learn how to password-protect specific pages on Netlify using serverless functions, redirects and Netlify Identity.
Read it
Thinking About The Cut-Out Effect: CSS or SVG?
A look at how CSS and SVG can be used to implement the cut-out effect. By Ahmad Shadeed.
Read it
The State of Developer Ecosystem in 2021 Infographic
A detailed report about the programming community, which covers the latest trends in languages, tools, technologies, and lifestyles of developers.
Check it out
Moving on a Penrose Triangle
A beautiful demo of the Penrose triangle with a moving ball. By Amit Sheen.
Check it out
Web Authentication: Cookies vs. Tokens
An article by Chameera Dulanga on how to choose between cookies and tokens in web authentication.
Read it
Piped
Piped is an alternative privacy-friendly YouTube frontend which is efficient by design.
Check it out
Pose Estimation
Alexandre Devaux fantastic pose estimation demo.
Check it out
What happened when I stopped using Emojis
An interesting self-imposed experiment: no emoji for 2 weeks. Clo S shares the results from this interesting endeavor.
Read it
Web Features That May Not Work As You’d Expect
Farai Gandiya shares some insights into circumstances where some new web capabilities don’t work as expected in the interest of usability, security and privacy.
Read it
Scroll-Kaiju
Really cool horizontal scroll demo by Tom Miller.
Check it out
Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property
Bramus looks at the new scrollbar-gutter CSS property and shows how to use it.
Read it
Layout with Reveal Animations and Content Preview
Some experimental reveal animations on typographic elements as repeating pattern for a website design.
Check it out