Thomas Provost Portfolio 2024

For the Love of Bread

Datalands

Beyond the Code: Nurturing Young Minds with Thought-Provoking Science

This week, let's give a shoutout to our sponsor, MEL Science. These aren't just science kits; they're a ticket to inspiring the next generation of thinkers right at home. As devs, we solve puzzles daily. Now, imagine your kids unwrapping the mysteries of science with hands-on experiments. It’s about giving them the tools to explore, question, and learn—fueling their curiosity.

Explore now 👉

(sponsored)

🔧 The Debugger's Toolkit

Addy Osmani writes about the crucial skill of debugging in programming, highlighting a systematic approach over random code tweaks.

📐 Fixing Text Clipping in Divs with Overflow Hidden

Fabio Ottaviani found an effective solution to fix text clipping in elements with overflow hidden with line-heights with less than 1.2.

🎞️ Motion extraction with mostly CSS

This article by Javier Bórquez delves into motion extraction using mostly CSS, a technique for visualizing video motion by subtracting frames to highlight changes.

🔁 Layered Toggles: Optional CSS Mixins

Roman Komarov introduces "layered toggles" as a novel technique for creating and applying optional CSS mixins through custom cascade layers, offering a versatile method for conditionally applying styles.

🔥 Modern CSS patterns in Campfire

An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors.

🛠️ Deco.cx

Offering both no-code and full code editing capabilities, Deco.cx simplifies the website building process, enabling rapid deployment with pre-built UI components and real-time drag-and-drop editing.

📏 Flattening Bézier Curves and Arcs

This article by Alexandru Ică presents three efficient methods for flattening Bézier curves and elliptical arcs into line segments, facilitating tasks like computing arc length or simplifying rendering processes.

🌟 Logofav

A great place to get logo ideas with a collection of logo examples from real companies.

💬 How to display language-specific quotes in CSS

Stefan Judis explores how to use CSS to display language-specific quotation marks in web content.

📱 How to think about HTML responsive images

This article by Dan Cătălin Burzo provides an in-depth explanation of responsive images in HTML, detailing both "fluid" images handled by CSS and "adaptive images" managed through HTML's srcset, sizes attributes, and the picture element.

🔄 A design reset

Karri Saarinen discusses the process and importance of undergoing a comprehensive redesign of Linear's application.

⏳ Chronon

Chronon is an open source end-to-end feature platform that allows Machine Learning (ML) teams to easily build, deploy, manage and monitor data pipelines for machine learning.

🎨 Pictify

Pictify offers APIs to convert HTML to image or gif.

🖼 Image Stack Entrance Animations (from our blog)

Three fresh demos that show a circular stack intro on images with different animations.

Selecting the preceeding sibling with CSS is so easy now!

I Made a Graph of Wikipedia... This Is What I Found

Depth of field with CSS by Javier Bórquez

Photo-realistic Earth shaders from Bruno Simon by Sergii Medvid

Reactive Phenomena by Giom

On-Scroll Gooey Overlay (WebGL + GSAP ScrollTrigger) by Ksenia Kondrashova

…the first digital artwork, created by Ben Laposky in 1952, was made using an oscilloscope to manipulate electronic waves on a fluorescent screen? These waves, constantly moving and undulating, couldn't be recorded on paper directly. By photographing the screen, Laposky captured these fleeting images, preserving a pivotal moment in the history of digital art.