The Collective #893

In partnership with

Hope you are having a fantastic start of the week!

As announced in our previous email, from now on, you’ll find all the latest Collective news in our brand-new Collective section, updated in real time. So, if you love staying in the loop as things happen, be sure to check it out!

Prefer sticking to the newsletter? No worries! We’ve got you covered with this weekly digest, delivered every Monday, packed with all the exciting links and updates from the past week.

If you are craving web design inspiration and want to be updated with the latest gems, make sure to keep an eye on our Webzibition.

If you’re missing the web demos we usually include in our Collective, don’t worry! We’re working on something exciting for Codrops that will soon make discovering cool demos even better. Stay tuned! 😉

We hope you enjoy this first digest edition, and as always, thank you for being a part of our community.

Happy exploring! 💙

^{From our sponsor}

Want To Rank Your Business On Google?

Beyond Blue Media is a full-service marketing agency that specializes in growing businesses through:

• SEO

• Ads

• Social Media

• Website Design/Development

• Videography

We do everything in-house! Reach out today to see the type of ROI we can produce for your business.

Schedule A Call Today!

🎨 DOOM: The Gallery Experience

DOOM: The Gallery Experience transforms the classic DOOM E1M1 level into a satirical virtual art gallery where players explore reimagined spaces and indulge in fine art and virtual wine.

^{art / interactive-games / retro / satire}

🎨 Mokubara

An easy way to create impressive mockups for projects. It offers free 3D, animated, and realistic mockups to enhance design presentations.

^{digital-assets / mockup / tool}

🎯 CSS Flexbox Playground

The CSS Flexbox Playground is an interactive tool that lets you experiment with various Flexbox properties, see real-time changes to layouts, and copy the generated CSS for your projects.

^{css / tool}

🌍 Languine

Languine is an AI-powered, open-source command-line tool for automating localization, offering support for multiple file formats, intelligent translation features, and seamless integration into developer workflows.

^{ai / i18n / localization / tool}

🎹 World's First MIDI Shellcode

This blog post documents an ambitious reverse engineering project on a Yamaha PSR-E433 synthesizer, culminating in the creation of "MIDI shellcode" to display the iconic "Bad Apple" video on the synth's LCD by leveraging custom assembly, memory manipulation, and MIDI protocol.

^{article / hacking / midi / retro / reverse-engineering / synthesizer}

📝 Balancing Text In CSS

This article by Ahmad Shadeed takes a deep dive into text balancing in CSS, covering features like text-wrap: balance and text-wrap: pretty to help designers and developers create cleaner, more readable layouts with practical examples and use cases.

^{article / css / typography}

🕹️ 8-bit Sine Scroller

This tutorial demonstrates how to recreate the classic 8-bit sine scroller effect using about 30 lines of JavaScript, using a bitmap font and HTML5 canvas for a nostalgic, animated text display.

^{retro / tutorial}

📸 Photoroom

An AI-powered photo editing tool designed to create professional-quality images by automatically removing backgrounds and enhancing visuals with ease.

^{ai / image-processing / tool}

🔌 API Parrot

A debugging tool for testing and simulating API calls, providing a simple interface to mimic API responses and behavior during development.

^{api / tool}

🌐 Orbit by Mozilla

Orbit lets you summarize emails, docs, articles, and videos across the web — without sacrificing your privacy.

^{ai / tool}

💻 Ghostty

Ghostty is a fast, feature-rich, and native terminal emulator designed for macOS and Linux, built with a focus on balancing speed, native UI integration, and advanced features for modern terminal use.

^{terminal / tool}

🤖 GitIngest

A tool that enables seamless integration of Git repositories into AI workflows, making it easier to analyze, summarize, and extract insights from codebases.

^{ai / tool}

📚 Next.js Book Inventory

A book inventory app template built with Next.js, Drizzle, and PostgreSQL to search, filter and paginate a large number of books.

^{next-js / template}

🎨 Building a Design System as a Solo designer in a startup

A detailed reflection on the challenges, strategies, and successes of creating and scaling a design system at Raise.

^{article / web-design}

⚡ Reweb

Reweb is a visual builder that enables fast, customizable web development with exportable Next.js and Tailwind code.

^{ai / next-js / tailwindcss / tool}

🌐 Browser Use

A tool for connecting AI agents to browsers, enabling automated browsing, scraping, and page interactions using LLM models.

^{ai / tool}

✨ View Transitions Snippets: Getting all Animations linked to a View Transition

A code snippet that explains how to retrieve and manipulate all animations associated with the View Transition API.

^{article / css / tutorial}

📊 Context Chips in Survey Design: "Okay, but how does it feel?"

Lea Verou's article introduces "Context Chips," an innovative survey UI element designed to capture user sentiment alongside responses.

^{article / survey}

🎞️ Some Things About Keyframes

Ryan Mulligan's article delves into nuances of CSS keyframe animations, covering topics like duplicate keyframe properties, the significance of keyframe rule order, and applying custom easing functions within keyframes to enhance animation control.

^{animation / article / css}

🎮 Bitspace

Bitspace is an open-source creative computing environment that allows users to experiment with GLSL shaders and interactive inputs in a flexible, sandbox-like prototype. By Emil Widlund.

^{glsl / tool}

🔧 Oniguruma-To-ES: Translate Oniguruma regexes to native JavaScript

Steven Levithan introduces Oniguruma-To-ES, an open-source project that translates Oniguruma regular expressions into native JavaScript RegExp objects.

^{javascript / regular-expressions / tool}

🎥 Refraction and glass effects with #threejs TSL

Yuri Artiukh explores creating refraction and glass effects using custom TSL shaders in Three.js during this livestream.

^{live-coding / three-js / tsl / tutorial / video / webgl}

📄 Office File to Markdown

MarkItDown is a browser-based tool that converts various file formats—including Microsoft Office documents, PDFs, images, and audio files—into Markdown, ensuring privacy by processing files entirely on your device.

^{markdown / tool}

🎨 Scroll-Driven Multi-Colored Line Indicator

This free lesson from Creative Coding Club demonstrates how to create multi-colored line indicators using GSAP's ScrollTrigger, providing a practical example of scroll-driven animations.

^{animation / gsap / tutorial}

🔄 Experiment: Automatically trigger a View Transition when a JavaScript Property of an Element changes

This article explores a method to automatically trigger a View Transition when a JavaScript property of an element changes.

^{article / css / javascript / view-transitions}

💻 GPU Glossary

Modal's GPU Glossary is a hypertext resource designed to bridge fragmented GPU documentation, interlinking concepts across the hardware and software stack to create a comprehensive and navigable guide.

^{glossary / gpu / reference}

🧮 Turing Machines

This article introduces Turing machines, explaining their components, functionality, and significance in computing theory, and provides interactive examples to illustrate their operation.

^article

📧 The State of Newsletters In 2024

InboxReads' "State of Newsletters 2024" report analyzes trends in the newsletter industry, highlighting popular topics, user interests, preferred email service providers, sending frequencies, and monetization strategies.

^{article / industry-report / web-trends}

⚡ State of JavaScript 2024

The State of JavaScript 2024 survey provides an in-depth analysis of trends, tools, and patterns in the JavaScript ecosystem, offering valuable insights into its evolving landscape.

^{javascript / survey / web-trends}

💎 Diamond

A prototype idea by Ian Curtis that was brought to life with Bolt.new.

^three-js

🎨 Auto text color

Devon Govett shares a CSS trick to auto-swap text color (black/white) using calc() and LCH lightness. Read more in his post on X here.

^css

📄 File Over App: A Philosophy for Digital Longevity

Rishikesh Sreehari advocates for using open file formats like Markdown to ensure long-term data accessibility and resilience, reducing reliance on proprietary apps.

^{article / markdown}