Collective #764
Inspirational Website of the Week: C2MTL
A stunning web experience filled with vibrant colors, captivating shapes, and uniquely designed layouts. The KOKI-KIKO team has crafted a visually striking website that incorporates seamless animations, perfectly complementing the overall aesthetic.
Get inspired
This content is sponsored via BuySellAds
Use Kintone to Spend Less Time on the Back-end
Kintone is a powerful web database, providing developers with a convenient environment to test out front-end coding ideas, without having to run a backend.
Find out more
Don't use custom CSS scrollbars
Eric W Bailey discusses the impact of customizing scrollbars on web accessibility. Highlighting important considerations, the article provides valuable insights for creating inclusive web experiences.
Read it
Eyecandy: Visual Technique Library
A visual technique library for enthusiasts and learners. You can click on an image and explore media made with the same technique with the sources and learn how it's made. Super interesting and inspirational!
Check it out
The ongoing defence of frontend as a full-time job
Christian Heilmann defends the role of frontend developers as specialized experts, highlighting their skills in browser performance, cross-platform development, accessibility, compliance, and user-centric design, while challenging misconceptions about frontend development and advocating for the hiring of dedicated frontend developers to build optimized and user-friendly web products.
Read it
Currl: A social bookmarking website
Currl is a free text-based social bookmarking website. You can collect the links you love from around the web, you can also store them privately or share them publicly with your followers.
Check it out
See this page fetch itself, byte by byte, over TLS
This page performs a live, annotated https: request for its own source. It's inspired by The Illustrated TLS 1.3 Connection and Julia Evans' toy TLS 1.3.
Check it out
Introducing Baseline
In this article, discover the concept of Baseline, a tool that provides a quick assessment of the safety and compatibility of features or APIs for your website or web applications, and learn how it can benefit you in making informed decisions.
Check it out
EVA: AI-Relational Database System
EVA is an open-source AI-relational database designed to support AI-powered applications. It seamlessly handles structured (tables) and unstructured data (videos, text, podcasts, PDFs, etc.) using deep learning models.
Check it out
Practical Guide To Not Blocking The Event Loop
In this article, Slava Knyazev provides a practical guide to avoid blocking the event loop in JavaScript, explaining the single-threaded nature of JavaScript, the concept of synchronous and asynchronous work, and offering solutions such as horizontal scaling, refactoring synchronous work to be asynchronous, and off-loading work to worker threads.
Read it
How large DOM sizes affect interactivity, and what you can do about it
Large DOM sizes have more of an effect on interactivity than you might think. This guide explains why, and what you can do.
Read it
How to measure page loading time with Performance API
Learn how to use the Performance API to measure page loading time in this article by Silvestar Bistrović.
Read it
JS private class fields considered harmful
Lea Verou mourns the loss of encapsulation in her projects as she decides to avoid private class fields due to conflicts with proxies, leading her to gradually refactor them out of her existing libraries.
Read it
HTMX is the Future
Chris James explores the challenges of single-page applications (SPAs) and introduces HTMX as a solution to simplify web application development by enhancing the browser's hypermedia capabilities and reducing reliance on JavaScript.
Read it
Frogmouth: A Markdown browser for your terminal
Frogmouth is a Markdown viewer / browser for your terminal, built with Textual. Frogmouth can open *.md files locally or via a URL. There is a familiar browser-like navigation stack, history, bookmarks, and table of contents.
Check it out
Roll your own JavaScript runtime, pt. 3
The third part in a series about building a custom JavaScript runtime focusing on using snapshots to improve startup times. By Leo Kettmeir and Andy Jiang.
Read it
Testing Feature Support for Modern CSS
Stephanie Eckles writes how keeping up with the fast pace of CSS development can be challenging, but there are ways to stay informed, test for support, decide when to use new features, assign fallback solutions, and utilize build tools and polyfills to bridge any compatibility gaps.
Read it
CSS Tip: Button shimmer
Jhey Thompkins shows how button shimmers are a cool use case for container queries.
Check it out
:root isn't global
The article explores the misconception that CSS custom properties defined on :root are global, highlighting issues with the inheritance of custom styles and proposing potential solutions to address the problem. By Kilian Valkhof.
Read it
Conical gradient animation
A thread on how to pull off a really nice line gradient animation using CSS only by LukuVJ.
Check it out
Yt's a(door)able
Adorable one-minute minigames where you need to get a key and leave through a door.
Check it out
From our blog
Ideas for Grid to Slideshow Switch Animations
Some ideas and inspiration for layout animations where we go from an irregular grid to a slideshow or alternative view.
Check it out
From our blog
UI Interactions & Animations Roundup #32
Explore inspiring & creative motion designs in our latest UI interactions and animations roundup from Dribbble.
Check it out
From our blog
Case Study: Sophie Studio
With a gaming interface as its core concept, Sophie Studio's website design showcases its values, purpose, and expertise in a fun and engaging way.
Check it out