Collective #672
Publikováno: 29.7.2021
Scroll-Linked Animations in CSS * Accessible Dialog * Slinkity * Is it Time to Ditch the Design Grid?
The post Collective #672 appeared first on Codrops.
Inspirational Website of the Week: Post Familiar Wine
An excellent design with modern artistic details and great typography.
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.
Creating An Accessible Dialog From Scratch
In this great guide, Kitty Giraudel digs into how to create a short script to create accessible dialogs.
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.
Writing a Sokoban Puzzle Game in JavaScript
Tania Rascia shares a couple of things she learned making a Sokoban puzzle game in JavaScript.
Etienne Barbedette
What a fun web experience! Etienne shows his amazing skills in his super creative portfolio.
Slinkity
A build plugin that can extend any 11ty site for components, page transitions, and more.
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.
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”.
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.
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.
Password-protected pages on Netlify
Learn how to password-protect specific pages on Netlify using serverless functions, redirects and Netlify Identity.
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.
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.
Moving on a Penrose Triangle
A beautiful demo of the Penrose triangle with a moving ball. By Amit Sheen.
Web Authentication: Cookies vs. Tokens
An article by Chameera Dulanga on how to choose between cookies and tokens in web authentication.
Pose Estimation
Alexandre Devaux fantastic pose estimation demo.
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.
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.
Scroll-Kaiju
Really cool horizontal scroll demo by Tom Miller.
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.
Layout with Reveal Animations and Content Preview
Some experimental reveal animations on typographic elements as repeating pattern for a website design.
The post Collective #672 appeared first on Codrops.