Collective #777
Inspirational Website of the Week: Rogue Studio
A vibrant design with nice scroll animations and lovely details. Our pick this week!
Get inspiredGet a Free Web Database and Create Infographics with JavaScript
Get a free Kintone Web Database, and learn how to build Heatmaps from it using JavaScript.
Check it outR3F Confetti Component
Enhance your projects with confetti explosions using this React three fiber component, offering numerous customization options, created by Anderson Mancini and Romain Herault.
Check it outThe Next Generation of Web Layouts
L. Jeffrey Zeldman's article discusses the future of web layouts focused on text readability and engagement, exploring the evolution of design techniques and introducing technologies like Typetura, with references to influential figures and resources in the field.
Read itAssistive technology shouldn't be a mystery box
Christian Heilmann discusses the progress of web development in terms of browser openness and access to developer tools, while highlighting the challenges and limitations in achieving accessibility through assistive technology, emphasizing the need for more transparent and open-source solutions in the field.
Read itUPiano
UPiano is a terminal-based piano application powered by Python and FluidSynth, allowing users to play notes using the computer keyboard or mouse, and was developed as a passion project by Elias Dorneles and Nandaja, initially started in 2017 and later revamped in 2023 with enhancements such as Textual integration and true synthesizer support.
Check it outR3F Water shader
A wonderful project by Faraz where he adapts Alex Ameye's Unity stylized water shader to Three.js (R3F). Read more about it here.
Check it outA Blog Post With Every HTML Element
Patrick Weaver shares his exploration and implementation of various HTML elements, including his experiences with less common elements, considerations for web accessibility, and insights gained from using different HTML tags in creating web content.
Read itNoclip
Noclip is a digital museum of video game levels. You can click and drag to look around and use WASD to move the camera and explore a multitude of classic video game levels.
Check it outThe Garden of Computational Delights
A curated collection of resources, communities, tools, and events that celebrate the creative and delightful aspects of computing, showcasing everything from code poetry and simulated cities to websites that dazzle and iPhone apps that evoke emotions, all compiled under the concept of a "garden of computational delights.
Check it outScroll-Driven Animations and View Transitions (2023.06.09 @ CSS Day)
Bramus' experience at CSS Day 2023 in Amsterdam, where he unexpectedly gave a talk on Scroll-Driven Animations and View Transitions, discussing the challenges of merging two topics into one presentation, sharing the slides, video recording, and resources related to the subjects.
Check it outProgressively Enhanced Form Validation, Part 1: HTML and CSS
Gerardo Rodriguez writes about the built-in form validation features in modern web browsers, exploring their use through HTML, CSS, and JavaScript for progressively enhancing the user experience, and addressing accessibility concerns.
Read itNext.js Commerce
Next.js Commerce is an ecommerce template built with Next.js 13 and App Router, featuring optimized SEO, React Server Components, server actions, styling with Tailwind CSS, Shopify integration, dynamic themes, and other features, along with guidance on setup, customization, and usage using Shopify as a CMS.
Check it outTypograms
Typograms is a lightweight image format (text/typogram) designed for simple diagrams in technical documentation, emphasizing editability and portability while providing a set of primitives and rules for diagram creation.
Check it outInvoice Dragon
Streamline invoicing and receipt creation with this free, user-friendly solution for quick and effortless documentation.
Check it outAlt Text Hall of Fame
A project by Stefan Bohacek that is intended to be a celebration of the effort, ingenuity, and creativity that goes into making the web a friendlier and more inclusive place, one captioned image at a time.
Check it outIconbuddy: 180K+ open source icons
Iconbuddy is a powerful icon search engine and manager that allows you to search, download, customize, and edit over 180k+ open source icons. It offers a wide selection of SVG and PNG icons, including royalty-free vector graphics and clipart illustrations. Additionally, Noun Project and Freepik offer free SVG and PNG buddy icons to download.
Check it outAnnouncing StableCode
Stability AI has just announced the release of StableCode, its very first LLM generative AI product for coding.
Read itWhy is DNS still hard to learn?
Julia Evans discusses the challenges of learning and troubleshooting DNS (Domain Name System) issues despite the apparent simplicity of the technology, exploring reasons such as hidden system complexities, confusing tools, weird gotchas, and infrequent exposure.
Check it outRaffael Stüken
A really cool website by Raffael Stüken: a lo-fi, scroll-driven experience solely utilizing semantic HTML and modern CSS.
Check it outFlatdraw: A simple canvas drawing web app with responsive UI
Flatdraw is a responsive web application for drawing on a canvas, developed using TypeScript, React, and Next.js, with setup instructions provided for local development and an open-source MIT License.
Check it outContinue
An open-source VS Code extension that integrates ChatGPT into your IDE, offering code auto-completion, answering coding questions, refactoring assistance, and generating files, enhancing software development productivity.
Check it outScroll-driven Animations: Shadow on header after scroll (Scroll-Timeline)
A new demo in the scroll-driven animations colltions: a shrinking header that gets a scroll shadow as you scroll down, all powered by Scroll-Driven Animations, using only CSS.
Check it outInspirational Websites Roundup #48
A carefully selected compilation of websites with really good web designs that have caught our attention over the past few weeks.
Check it out