Collective #792

Today we got some fresh links for you, including a great new platform for getting online store design inspiration! Discover GitHub’s new font, Monaspace, read about Web Components and the challenges around using rebase, and of course, much more.

And we are inspecting a small glitch effect to see how it was achieved in our “Behind the Pixel” section!

Please enjoy reading and feel free to share your favorite links and feedback simply by replying to this email.

Have a great start of the week!

PixieBrix is the first low-code platform to add automation, integrations, collaboration, and AI to the web apps your teams already use. Try For Free

???? Storefront.design

A storefront design platform with advanced filtering options where designers can submit their unique ecommerce store designs, and the best ones are featured weekly.

???? Building a high performance JSON parser

Dave Cheney’s article version of his talk at GopherCon Singapore 2023 where he discusses the design and optimization of a Go package for efficient JSON parsing, focusing on topics such as streaming, tokenization, reading, and scanning JSON data.

???? Monaspace

GitHub’s Monaspace font is a new type system that advances the state of the art for the display of code on screen. Includes 5 fonts and 3 variable axes.

???? CSS nesting relaxed syntax update

A follow-up article that discusses the change in the spec of Lookahead nesting in Chrome 120, which allows for nesting bare element tag names in CSS.

????️ image-dimensions

A JavaScript package that allows you to retrieve the dimensions (width and height) of an image in various formats using minimal data reading, with support for common image formats like JPEG, PNG, GIF, WebP, and AVIF, and it can be used in both browsers and Node.js environments.

???? Lab Experiments #1 — What is cooking in the kitchen

A showcase of various technology experiments and projects from 14islands Hack Days featuring impressive WebGL demos.

???? Utsubo Three.js Starter

An opinionated Vanilla Three.js starter template (still WIP) for modern web 3D graphics development, emphasizing best practices, modular architecture, and debug features.

✨ Particle Effect in R3F

Paul Henschel shared an interesting demo showcasing how R3F pushes the boundaries of realistic 3D visuals.

???? HTML First

A set of principles focused on simplifying web software development by utilizing modern web browsers’ default capabilities, HTML’s attribute syntax, and promoting a more inclusive and maintainable approach, with goals of widening the pool of web programmers and enhancing the development experience through HTML-centric practices and libraries.

???? Writing Components That Work In Any Frontend Framework

This article discusses the use of Web Components, explaining their advantages and challenges in building interactive and reusable components, and then introduces a library called Lit that simplifies Web Component development by reducing boilerplate code.

⏪ Git rebase: what can go wrong?

Julia Evans discusses various issues and challenges related to using Git’s rebase feature, including common problems and potential solutions, within the context of different Git workflows.

????️ CSS Tip: Input status strokes

Jhey Thompkins’ CSS tip where he explains how to use form control state and layered backgrounds to create input status strokes, with a focus on accessibility and animation preferences.

???? Custom GPT Directory

A directory for custom GPTs, offering information, updates, and resources for creating and using customized AI models.

???? No dogs were harmed in the making of this app

Shawn explores the challenges and frustrations of software debugging, highlighting the unique privileges and tools available to software developers compared to other professions.

In our new section “Behind the Pixel,” we examine small design and animation details and take a peek under the hood to see how they are accomplished.

Today we are taking a look at tiny glitch effect in the intro of the BITKRAFT website. The HUD-like interface design shows a border that glitches once in a while. When we inspect, we find an SVG with a path, polylines and lines. The glitch effect is achieved by animating the opacity of each basic shape in seemingly random intervals:

A very nice detail that creates a super nice futuristic touch which fits well with the design direction!

…the first computer bug was a real bug? In 1947, Grace Hopper, a computer scientist and U.S. Navy rear admiral, found a moth stuck in the relays of the Mark II computer she was working on. This moth was causing the machine to malfunction. The term “bug” was already used to describe technical glitches, but this incident popularized the use of “debugging” to mean fixing computer hardware or software issues. The moth was taped in the logbook and now resides in the Smithsonian Institution’s National Museum of American History.

And that’s all! Thank you for reading the Collective! If you have something you would like us to feature in the next edition, simply reply to this email!

Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.