“There are two ways of constructing a software design. One way is to make it so simple that there are obviously no deficiencies. And the other way is to make it so complicated that there are no obvious deficiencies.”

— C. A. R. Hoare

❍ @remvze // #quote

«Spotube»

Open source music client! Available for both desktop & mobile!

→ github.com/KRTirtho/spotube

❍ @remvze // #music

The light-dark() CSS <color> function allows you to define two colors for a property. It automatically selects the appropriate color based on whether a light or dark color scheme is in use, either set by the developer or preferred by the user, eliminating the need for a prefers-color-scheme media query.

❍ @remvze // #css

Container queries let you style elements based on their container’s size, styles, or scroll state, offering a more local alternative to media queries, which depend on the viewport.

❍ @remvze // #css

The CSS clamp() function restricts a value between a minimum and maximum, using a preferred value in between: clamp(min, preferred, max).

❍ @remvze // #css

The accent-color CSS property allows you to change the color of UI controls like checkboxes, radio buttons, progress bars, and sliders in a webpage to match your design.

❍ @remvze // #css

overscroll-behavior controls what happens when scrolling hits an element’s edge: auto allows normal bounce and scroll chaining, contain stops scroll from reaching parents but may bounce, and none blocks both chaining and bounce.

❍ @remvze // #css

The :focus-visible CSS pseudo-class targets elements that receive focus and should show a visible focus indicator, typically when the user navigates via keyboard (like using the Tab key), not when clicking with a mouse.

❍ @remvze // #css

The :has() CSS pseudo-class selects elements that contain specific descendants or match a given condition, enabling parent-level styling based on child elements.

❍ @remvze // #css

The @ scope CSS at-rule limits where styles apply by defining a scoped area within the DOM. It helps prevent style conflicts by containing selectors to a specific element and its descendants, improving modularity and component-based design.

❍ @remvze // #css

The "from" keyword in CSS color functions extracts color channels (like r, g, b) from another color. For example, rgba(from var(--color) r g b / 50%) reuses --color’s RGB values and applies 50% opacity, creating a semi-transparent version.

❍ @remvze // #css

The @‌property CSS at-rule lets you define custom properties with types, defaults, and inheritance. It enables animating and transitioning CSS variables (like colors or angles) by telling the browser how to interpret and interpolate their values.

❍ @remvze // #css

The ::placeholder CSS pseudo-element styles the placeholder text inside input or textarea elements, letting you change its color, font, or opacity without affecting the user-entered text.

❍ @remvze // #css

«Dashy»

A self-hostable personal dashboard built for you. Includes status-checking, widgets, themes, icon packs, a UI editor and tons more!

→ github.com/Lissy93/dashy

❍ @remvze // #oss

corner-shape CSS property defines the style of an element’s corners (e.g., squircle, round, scoop, bevel) when used with border-radius. It customizes how corners are rendered beyond simple curves.

❍ @remvze // #css

«AutoAnimate»

A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

→ github.com/formkit/auto-animate

❍ @remvze // #oss

The @‌starting-style rule in CSS defines the initial styles used when an element first appears, enabling smoother transitions from those starting values to its final state when entering the page or changing display.

❍ @remvze // #css

Introducing Pieper 🥧

A tiny, typesafe, asynchronous pipeline for functional programming in TypeScript.

→ github.com/remvze/pieper

❍ @remvze // #announcement

In CSS, "will-change" property tells the browser which properties of an element are likely to change soon, allowing it to optimize rendering for smoother animations or transitions.

❍ @remvze // #css

Introducing Microscope 🔬

Super simple atomic state manager for React.

→ github.com/sterrahq/microscope

❍ @remvze // #announcement