Collective #779
Inspirational Website of the Week: Pixelflakes
This website meticulously designed by exo ape boasts amazing micro interactions and a minimal, unique design with a perfect harmony. Our pick this week.
Get inspired
This content is sponsored via BuySellAds
Get 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 out
deck․gallery
A place where you can discover the art of presentation design. It's a curated collection of standout slides, keynotes, and guidelines, chosen specifically for their design brilliance.
Check it out
Opendream: A Web UI For the Rest of Us
Opendream is a user-friendly web interface that brings essential features like layering, non-destructive editing, portability, and easy-to-write extensions to Stable Diffusion workflows for image generation and manipulation, enhancing creative exploration and experimentation.
Check it out
Write about what you learn. It pushes you to understand topics better.
Addy Osmani emphasizes the value of writing about one's learning experiences as a means to enhance understanding, uncover knowledge gaps, and foster personal growth, drawing parallels with the Feynman Technique and the importance of consistency for skill development and success in writing.
Read it
The ideal viewport doesn’t exist
This article discusses the importance of considering the wide range of screen sizes and browser viewports before making design decisions based on strict breakpoints, presenting findings from an experiment conducted by Set Studio with over 120,000 datapoints and 2,300 unique viewport sizes gathered over 48 hours, and delves into the implications of this fragmentation for designing both mobile and desktop experiences.
Read it
The New CSS Math: round()
This article by Dan Wilson explains the usage of the CSS `round()` function, which offers precise control over rounding values in various CSS properties, including considerations for precision, units, and rounding strategies such as nearest, up, down, and to-zero.
Read it
Lightning CSS
Light Speed Lightning CSS is a blazingly fast Rust-based tool for minifying CSS, outperforming JavaScript-based alternatives by over 100x, ensuring efficient memory usage, and supporting modern CSS features while generating compact and optimized code.
Check it out
TextFX
TextFX is a collection of 10 AI-powered tools utilizing Google's PaLM 2 model to enhance the creative process for rappers, writers, and wordsmiths by generating innovative textual and linguistic possibilities.
Check it out
Use web components for what they're good at
Nolan Lawson explores web components' pros and cons. He highlights their success in client-rendered leaf components, cross-framework integration, and enterprise design systems. He also notes downsides like server-side rendering and accessibility issues. He advises choosing web components judiciously based on use-case suitability.
Read it
A quick introduction to CSS @scope
The article introduces the upcoming #CSS @scope feature, which allows scoping of CSS selectors to control their reach, demonstrating its usage to solve styling conflicts and improve selector organization, and noting its compatibility with Chrome 118.
Read it
Laying out dots on a dice using display:flex & pseudo-classes
Maciek Fitzner shares his experimentation with creating a virtual 6-sided dice using HTML and CSS, focusing on arranging dots (pips) on each face using different techniques and selectors such as nth-child, :not, and :is
Read it
Pros and cons of using Shadow DOM and style encapsulation
Manuel Matuzović shares his experience with using web components, particularly focusing on the utilization of Shadow DOM for style encapsulation, DOM encapsulation, and slot functionality, while also highlighting drawbacks such as styling challenges, limitations in styling nested slotted content, and issues with JavaScript dependencies, along with potential solutions and personal insights.
Read it
Simulating Real Cameras using Three.js
This article by Tobias Cornille explains how to simulate a physical camera in a 3D web application using Three.js and OpenCV, covering the pinhole camera model and realistic lens distortion, demonstrating its application in augmented reality, robotics, and visualization tools.
Read it
Rewriting wipEout
Dominic Szablewski experience of rewriting the source code for the classic PSX game "wipEout," which had its source code leaked in 2022, resulting in a near-complete rewrite that can be compiled for various platforms, enabling the game to be played in browsers using WASM and WebGL.
Read it
Scroll shadows with animation-timeline
Dave Rupert describes a solution to add shadows as visual indicators of overflow on elements using scroll-driven animations, including examples of using the new `animation-timeline` property with the `scroll()` function to achieve the effect for overflowing content and sticky columns, highlighting the simplicity and advantages of this CSS-based approach over JavaScript alternatives.
Read it
Adapting Illustrations to Dark Mode
Learn how to make illustrations on your website suitable for both light and dark modes by utilizing CSS filter effects like invert(1) and hue-rotate(180deg), while understanding color space concepts like RGB and HSL to achieve the desired effects.
Read it
Moonbit: the fast, compact & user friendly language for WebAssembly
Moonbit is a new WebAssembly (Wasm)-first programming language designed to address challenges in Cloud and Edge computing by providing efficiency, security, compactness, and ease of use, led by an experienced team aiming to unlock Wasm's untapped potential, with a focus on speed, compact output, and user-friendliness, set to reach beta status by Q2 2024.
Check it out
Things you forgot (or never knew) because of React
Josh Collinsworth writes about his experiences transitioning from default music preferences to exploring new artists and draws a parallel to frontend development tools, particularly React, urging readers to consider the benefits of venturing beyond popular defaults and embracing other modern frameworks due to their adaptability, compatibility, and better features.
Read it
Particles in flight
Michal Zalobny's latest WebGL experiment that shows particles "in flight".
Check it out
PDF Tool
A simple tool to edit PDFs for free, without uploading files, ensuring privacy and security.
Check it out
Geisha
A beautiful little Three.js experience named Geisha. By Corentin Bernadou.
Check it out
Little-rat
A small chrome extension to monitor (and optionally block) other extensions' network calls.
Check it out
Satisfying curly cursor (3kb of vanilla JS on canvas)
A beautiful minimal JavaScript animation of a curly cursor by Ksenia Kondrashova.
Check it out