Yoav
Kadosh
Making the web more
delightfuljoyouscaptivatingfascinatingentertainingslickfabulous

Experiments

Live Code Examples

More Experiments

Posts

Articles & tutorials about web development

Gradient.art - Designing and Inspecting Complex CSS Gradients

gradients
4 Min
dev.to

gra.dient.art is an advanced online CSS gradient editor. In this article i'm exploring its various tools and features.

How I Created These Generative Underline Pen Strokes

svg, react, text-effect, tutorial
2 Min
dev.to

I created a small React component that adds a randomly generated pen stroke underline to a given word. The strokes are rendered using an SVG <path/> element.

How I Made This Realistic Red Switch (Pure CSS)

css-art, gradients, tutorial
7 Min
dev.to

In this tutorial I explain in detail how I made my popular 'Realistic Red Switch' pen using various CSS techniques, including gradients, 3D transformations, animations, and transitions.

Webrix.js - Building Blocks for Interactive React Apps

react, webrix
2 Min
dev.to

webrix.js is a set of React components and hooks, each dedicated to solving a single UI challenge. In the article I explore the different components and hooks in this library.

Don’t Mix Controlled and Uncontrolled Values In React

react, architecture
6 Min
Medium

In this article, I will be discussing one of the most fundamental rules in component architecture. This fundamental rule is often violated, leading to issues that are very hard (if not impossible) to solve.

Balancing Responsibilities in Software Components

architecture
7 Min
Medium

Responsibilities and it's derivative — abstractions — are one of the more ambiguous aspects of software quality, at least to me.

More Posts

Snippets

Bit(e) size code snippets for your every-day copy-paste needs

ClientOnly

A React component for rendering content only on the client side

Media Query Mixin

A sass mixin for breakpoint based media-queries

useAnimationFrame

A React hook for working with animation frames

useDocumentEvent

A React hook for performantly attaching event listeners to the document

useIntersectionObserver

A React hook for detecting element visibility within a container

useValue

A React hook for persisting non-stateful values

More Snippets

Projects

Tools & Libraries

gra.dient.art screenshot
gra.dient.art screenshot
gra.dient.art screenshot
gra.dient.art screenshot
gra.dient.art screenshot

gra.dient.art

https://gra.dient.art
An advanced CSS gradient editor. Design illustrations, patterns, icons, and more using a feature-packed editor with layering, design tools and free cloud storage.
Go to gra.dient.art website
webrix.js screenshot
webrix.js screenshot
webrix.js screenshot
webrix.js screenshot
webrix.js screenshot
webrix.js screenshot

webrix.js

https://webrix.amdocs.com
A set of small, single-purpose React components & hooks, each aimed at overcoming a specific UI challenge. It's not a component bank, but rather a set of building blocks for creating your own unique component bank. Webrix does all the technical heavy lifting, so you can focus on the presentation.
Go to webrix.js website
truchet.js screenshot
truchet.js screenshot
truchet.js screenshot
truchet.js screenshot
truchet.js screenshot

truchet.js

https://ykadosh.github.io/truchet.js/
A tiny library for performantly rendering tile patterns using JavaScript. You control which tile is rendered, when, and how, by passing around lists of props which are used by the library to determine whether a change has been made, and a re-render is due.
Go to truchet.js website

Tags

Find content based on topic

Tweets

@yoavikadosh