Collective #753
Inspirational Website of the Week: MANA yerba maté
MANA's website is an excellent example of how to effectively present a product, as its playful animations and interactive features make for an enjoyable browsing experience - making it our top pick of the week!
Get inspired
Our Sponsor
Developer-centric approach to building UIs and workflows
Airplane is a code-first platform for building custom internal tools. You can transform scripts, queries, and APIs into UIs and workflows for your team in minutes. Use Airplane for customer onboarding, admin operations, and more. Get started for free!
Check it out
Unovis
Unovis is a modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript.
Check it out
Container queries land in stable browsers
Since Valentine's day size container queries and container query units landed in all stable browsers. Happy CSS times!
Check it out
Openverse
Search over 600 million free and openly licensed images, photos, audio, and other media types for reuse and remixing.
Check it out
ICON x Khaby Lame - An Interactive Editorial
A very interesting case study of one of the most epic designs last year. Learn about the story and process behind Khaby Lame's website including some magical WebGL effects.
Read it
Staticrypt
StatiCrypt encrypts your HTML file with AES-256 and generates a static page with password prompt and decryption logic that you can upload anywhere to password protect your public static HTML file without requiring a back-end, and it can be encrypted online or through the CLI.
Check it out
SwissGL
SwissGL is a minimalistic wrapper on top of WebGL2 JS API that was designed to reduce the amount of boilerplate code required to manage GLSL shaders, textures and framebuffers when making procedural visualizations or simulations.
Check it out
Writing JavaScript without a build system
Julia Evans discusses the use of build systems in JavaScript projects, outlining their purpose, advantages, and why they are not always necessary, particularly for small, simple websites that do not require a lot of maintenance.
Read it
PaperList
Like HackerNews but for research papers: Share and read research papers with like-minded people. A place to discuss ideas with researchers, employers, investors, and more.
Check it out
TabFS
TabFS is a browser extension that mounts your browser tabs as a filesystem on your computer. Out of the box, it supports Chrome and (to a lesser extent) Firefox and Safari, on macOS and Linux. By Omar Rizwan.
Check it out
Design systems in the time of AI
Brad Frost asks some important questions: How will AI impact the world of UI design/development? How will AI impact how design systems are created and used?
Read it
Using Focal Points, Aspect Ratio & Object-Fit To Crop Images Correctly
Henry Desroches shows how to create a focal point picker that imitates a back-end tool and using aspect-ratio, object-fit, and object-position properties in CSS.
Check it out
Last baseline alignment
Learn about last baseline alignment in CSS grid and flexbox in overview by Rachel Andrew.
Read it
What Is ChatGPT Doing … and Why Does It Work?
Stephen Wolfram analyzes the inner workings of ChatGPT and its ability to generate meaningful text. He delves into various aspects such as models, training neural networks, embeddings, tokens, transformers, and language syntax. Long read that is worth spending some time on!
Read it
Building an animated SVG logo with anime.js
Learn how to create a fancy cyberpunk-style animated logo using SVGs and anime.js in this tutorial on Pixelhop.
Read it
DSLCad
DSLCad is a programming language and interpreter for building 3D models. Inspired by OpenSCAD, it has a language and 3D viewer to simplify the modeling experience.
Check it out
Do we need CSS flex-wrap detection?
Ahmad Shadeed wishes for flex-wrap detection in CSS and explains why it would be helpful in responsive design, providing examples of how it could be used in site headers, tabs, and auto margins.
Read it
Hover Effect Tutorial
A fun and awesome walk through on how to create a cool hover animation. By Gary Simon.
Check it out
Spaghettify
Is your code too clear? Too tidy? Fear no more because now you can introduce a bug, obscure code and do other essential spaghetti things to your code with this Visual Studio Code extension ;)
Check it out
Scribble Diffusion
Scribble Diffusion is a free and open-source AI-powered web app that lets you draw a rough sketch, add a text prompt, and generate images based on your sketch.
Check it out
From Ghost to 11ty
Ire Aderinokun shares the migration process of her website from Ghost to 11ty.
Read it
From Our Affiliate
Build Faster, Impress More
Are you a WordPress freelancer? Then Divi is for you! Bring your ideas to life faster using Divi’s visual builder and its suite of productivity-boosting features.
Try it for free for 30 days
How to create dynamic OG images with serverless functions using Sharp library
Silvestar Bistrović shares how to create dynamic Open Graph images with serverless functions and Sharp in this tutorial.
Read it
Image Pealing Effect
A fun effect for images made with CSS only. This looks like a great idea for a page transition or initial image "loading" effect. Made by Takehiko Ono.
Check it out
From our blog
Some More On-Scroll Typography Animations
A second set of ideas for on-scroll typography animations.
Check it out