Collective #746
Publikováno: 6.1.2023
Webspaces * Mafs * Top Pens of 2022 on CodePen * Sailboat UI
Inspirational Website of the Week: Andreas Antonsson
The portfolio of Andreas Antonsson offers a delightful user experience with its fluid design and smooth scrolling, as well as excellent typography that enhances the overall aesthetic.
Our Sponsor
Where is my website traffic and how do I get more?
Some straight facts about search engine traffic: 51% of all website traffic is driven by SEO, 40% of all online revenue is driven by SEO, 72% of search traffic goes to the first 10 results on the first page. We have the formula to get your website the conversions you are looking for! Book your complimentary SEO call.
Webspaces
Webspaces is a new kind of website that uses HTML to create 3D worlds in addition to 2D pages. Read more about it in this article and thread by Greg Fodor.
Companies.tools ’22 recap
Here’s how and which apps and tools tech teams all over the world used in 2022.
Copy Dennis
Dennis Snellenberg created this homnage to all the creators who have taken a little bit too much inspiration from his portfolio website.
Mafs: React components for interactive math
Build interactive, animated visualizations with declarative code using Mafs.
Draw SVG rope using JavaScript
A beautifully illustrated article by Stanko Tadić that explains how to use SVGs and JavaScript to create an animation of a rope.
InfiniteGrid
Austin Malerba created this demo of a pannable infinite grid in React.
Slow Roads
The new version of the endless driving experience now has controllers and wheels plus first-person view. Read more about it in this article.
Top Pens of 2022 on CodePen
A collection of the most hearted codepen demos of 2022.
MeshEpoxyMaterial
Paul Henschel has created a demo that showcases the capabilities of the new MeshTransmissionMaterial in drei, which allows for realistic rendering of glass, gelatin, or epoxy materials with RGB shift and noise effects.
CSS :has() feature detection with @supports(selector(…)): You want :has(+ *), not :has(*)
Bramus Van Damme explains how when you’re feature detecting :has() with @supports you must pass a selector into :has().
Pseudo-classes can do magic
Kevin Powell shows a really useful trick using pseudo-classes in CSS in this short video.
YouTube Transcript
A tool that lets you get the transcript of a YouTube video so that you can simply read it.
Sailboat UI
This modern UI component library, built with Tailwind CSS, provides over 150 pre-designed components to help developers quickly and easily create websites.
How to use ChatGPT in product design: 8 practical examples
Some interesting examples on how ChatGPT can help with product design. By Nick Babich.
AI: Markets for Lemons, and the Great Logging Off
Lars Doucet asks an important question: What happens when most “people” you interact with on the internet are fake?
Shift Happens
“Shift Happens” is a book that traces the history of keyboards from their early days as typewriters to the present-day digital versions. The site shows a wonderful 3D preview of the book!
Safari’s date-picker is the cause of 1/3 of our customer support issues
Learn why Robin Thomas is shocked by the poor design of the standard <input type=”date”> HTML field, especially considering that it is provided by a company known for its attention to good design.
From Our Blog
Inspirational Websites Roundup #45
A compilation of the most beautifully designed and thoughtfully crafted websites we’ve come across lately.
Our Sponsor
Explore the world like a local with Babbel
If you’ve always wanted to learn a new language, Babbel will be the most productive 10 minutes of your day. Trusted by over 10 million subscribers worldwide, the subscription-based language learning platform can get you confidently conversing in a new tongue in just three weeks. This isn’t your grade school textbook: the bite-sized lessons, available in 14 languages, teach you localized vocabulary you’ll actually use in the real world. Plus, speech recognition technology helps you perfect your accent. Sign up today and get up to 60 percent off your subscription.