Collective #780
Inspirational Website of the Week: ChainGPT
A futuristic interface-like design that is fun, unique and full of great details. Our pick this week.
Get inspiredBreakpoints and `console.log` is the past, time travel is the future
15x faster JavaScript debugging than with breakpoints and console.log. Wallaby.js runs your tests immediately as you type, with runtime values, errors, and code coverage displayed in real-time right next to your code. Designed specifically for testing, Wallaby features include a Time Travel Debugger, the ability to only run opened test files, and more.
Try It NowCase Study: Rebuilding TechCrunch layout with modern CSS
In this article, Ahmad Shadeed discusses his exploration of modern CSS techniques to rebuild a layout from TechCrunch's website, analyzing the original layout's decisions and presenting multiple attempts using CSS Flexbox and Grid, along with their pros and cons, aiming to achieve a responsive and flexible design.
Read itBézier Curves
In this article, Richard Ekwonye discusses his experience with Bézier curves in frontend engineering, their application in animations and SVG paths, and how understanding the underlying logic of Bézier curves enhances web animations and design.
Check it outCSS Loaders: A collection of more than 500 loading animations
A fantastic collection of CSS-only loaders with more than 500 loading animations made by Temani Afif using just a single element and CSS.
Check it outRefraction in Three.js
A great video tutorial by Robin Payot where you will learn how to master refraction in Three.js. If you enjoy this topic you might also like Jesper Vos' tutorial on real-time multiside refraction.
Check it outMoon Clock a WebGL experiment
Graeme created an experiment to recreate his Moon Clock iOS app using WebGL, enabling rendering of a 3D moon scene in the browser with dynamic information about moon phases, rise and set times, libration, and apparent size, alongside features like timewarp and spacewarp modes.
Check it outAstro View Transitions
In this article by the Chrome team, the journey of Astro and the View Transitions API is explored, highlighting the challenges faced in achieving seamless page transitions, the emergence of the View Transitions API as a solution, its early adoption by the Astro framework, and the benefits of integrating it into Astro 3.0 for improved user experiences and streamlined animations in web development.
Read itPlaybook for universal design
Universal design methods that include tips for how to accommodate participants with diverse abilities to ensure that everyone feels included in a workshop setting no matter what they are capable of.
Check it outNo one actually wants simplicity
A really nice read where Luke Plant argues that the complexity in modern web development persists because people prioritize other factors over simplicity and are reluctant to sacrifice certain conveniences for it.
Read itWebGlossary
WebGlossary, based on Jens Oliver Meiert's "The Web Development Glossary," is a comprehensive glossary focused on web development and related fields, featuring over 3,591 entries, including major web standards, concepts, and other relevant disciplines.
Check it outWhy Does Email Development Have to Suck?
Hristiyan Dodov highlights the challenges of email development, comparing it to web development, emphasizing the reliance on table elements and inline styles due to limited email client support for modern CSS features, discussing issues with color inversion, padding, custom fonts, responsive images, and providing insight into solutions such as using frameworks like MJML.
Read itGodly: Astronomically good web design inspiration
In case you didn't know about it: Godly is a curation of the best web design inspiration, every day. Browse the best e-commerce websites, portfolio websites, animation websites and more.
Check it outWhy Rust is the most admired language among developers
Sara Verdi writes about Rust's continued dominance as the most desired programming language according to Stack Overflow's survey, delves into its history, emphasizes its safety and performance benefits, explores its various use cases, highlights why developers love Rust, and provides resources for getting started with the language.
Read it“We’re All Just Temporarily Abled”
In a personal reflection, Jim Nielsen shares how an injury led him to realize the importance of accessibility and the phrase "We're all just temporarily abled," highlighting the fluid nature of ability and the significance of noticing accessibility aids and being grateful for one's own abilities.
Read itElysium: A Tranquil 3D Nature World
Immerse yourself in the tranquil beauty of Elysium, a stunning 3D world on the web. Discover a captivating and immersive experience built with Three.js and WebGL.
Check it outA half-hour to learn Rust
In this article, the process of increasing fluency in the Rust programming language is explored by dissecting various Rust code snippets and explaining the meanings of keywords, symbols, and concepts, including variable bindings, type annotations, shadowing, and more.
Read itDataherald
Dataherald is a natural language-to-SQL engine designed for enterprise-level question answering over structured data, enabling users to query databases in plain English, set up APIs, and generate insights without the need for data analysts; it emphasizes modularity, ease of setup, and compatibility with major data warehouses.
Check it outTimeGuessr
TimeGuessr is a game that tests both your geography and history knowledge. Guess the right time and location of a historical photo.
Check it outUI Interactions & Animations Roundup #35
Explore the latest collection of innovative motion designs and inspiring UI interactions from Dribbble.
Check it outConnected Grid Layout Animation
Some ideas for simple on-scroll animations on grid layouts with "connected" items.
Check it out