# Yoav Kadosh

> Personal website of Yoav Kadosh, a frontend engineer and maker. It contains web-development articles, reusable React and JavaScript snippets, interactive experiments, software projects, and fabrication projects.

Content is written in English. Public pages may be crawled, quoted with attribution, summarized, and used by AI assistants.

## Main sections

- [Home](https://yoavik.com/): Introduction and latest work.
- [Posts](https://yoavik.com/posts): Articles about React, CSS, animation, graphics, and web architecture.
- [Snippets](https://yoavik.com/snippets): Reusable frontend code with live examples.
- [Experiments](https://yoavik.com/experiments): Interactive visual and UI experiments.
- [Projects](https://yoavik.com/projects): Open-source and product projects.
- [Fabrication](https://yoavik.com/fabrication): Woodworking, furniture, and maker projects.
- [RSS feed](https://yoavik.com/rss.xml): Recent published content.
- [Sitemap](https://yoavik.com/sitemap.xml): Complete list of indexable pages.

## Articles

- [Canvas Path Animations using SVG](https://yoavik.com/posts/canvas-path-animation): Draw anything along an arbitrary path by combining the Canvas API with two little-known SVG methods - getTotalLength() and getPointAtLength().
- [Debugging "max serverless size exceeded" in Next.js](https://yoavik.com/posts/debugging-max-serverless-size): How to debug the "A Serverless Function has exceeded the unzipped maximum size of 250 MB" error in Next.js & Vercel
- [My Thoughts on the AI Revolution](https://yoavik.com/posts/the-ai-revolution): Is AI going to replace engineers? A post about AI, written with the aid of AI.

## Code snippets

- [3D text](https://yoavik.com/snippets/3d-text): A sass function for generating 3D text with a clever use of CSS text-shadow
- [<ClientOnly/>](https://yoavik.com/snippets/client-only): A React component for rendering content only on the client side
- [<CodePen/>](https://yoavik.com/snippets/codepen): A React component for embedding CodePens
- [<ImageWithFallback/>](https://yoavik.com/snippets/image-with-fallback): A React component for showing a fallback component when an image cannot be found
- [Media Query Mixin](https://yoavik.com/snippets/media-query-mixin): A sass mixin for breakpoint based media-queries
- [<MouseTracker/>](https://yoavik.com/snippets/mouse-tracker): A react component that follows your mouse
- [useAnimationFrame()](https://yoavik.com/snippets/use-animation-frame): A React hook for working with animation frames
- [useCanvasAnimation()](https://yoavik.com/snippets/use-canvas-animation): A React hook for rendering canvas animations
- [useDocumentEvent()](https://yoavik.com/snippets/use-document-event): A React hook for performantly attaching event listeners to the document
- [useGlobalState()](https://yoavik.com/snippets/use-global-state): Sharing state between React components without context or fancy libraries
- [useIntersectionObserver()](https://yoavik.com/snippets/use-intersection-observer): A React hook for detecting element visibility within a container
- [usePerishable()](https://yoavik.com/snippets/use-perishable): A React hook for creating perishable elements for animation purposes.
- [useValue()](https://yoavik.com/snippets/use-value): A React hook for persisting non-stateful values

## Software projects

- [MockPilot](https://yoavik.com/projects/mockpilot): Turn any live webpage into an editable mockup on your desktop, using natural language - no design or coding skills needed. Capture full pages or single components from any URL, auto-extract typography, colors, components and icons into a reusable asset library, then edit in plain English with an AI that keeps everything on-brand. Export as clean, standalone HTML. Free & open source, for macOS and Windows.
- [Notify](https://yoavik.com/projects/notify): A notification/toast library for React, inspired by iOS. The notifications are stacked to conserve space and can be dismissed by using the close button (they automatically disappear when their timeout expires).
- [GradientArt](https://yoavik.com/projects/gradientart): An advanced CSS gradient editor. Design illustrations, patterns, icons, and more using a feature-packed editor with layering, design tools and free cloud storage.
- [webrix.js](https://yoavik.com/projects/webrix): 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.
- [truchet.js](https://yoavik.com/projects/truchet): 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.
- [Enscouto](https://yoavik.com/projects/enscouto): A Chrome extension that provided market research and analytic tools for Envato authors, helping them track trends, monitor sales performance, and discover opportunities across the Envato marketplaces. No longer available.

## Fabrication projects

- [Band Saw Cabinet](https://yoavik.com/fabrication/band-saw-cabinet): A 3-drawer band saw cabinet with casters
- [Book Shelves](https://yoavik.com/fabrication/book-shelves): A set of narrow book shelves I made for a spot in our hallway
- [Drill Press Cabinet](https://yoavik.com/fabrication/drill-press-cabinet): A drill press cabinet to store bits and accessories.
- [Friendship Bench](https://yoavik.com/fabrication/friendship-bench): A wooden bench I made for my daughter's school, in memory of the Dee family
- [Lego Cabinet](https://yoavik.com/fabrication/lego-cabinet): A Lego cabinet that I built for my son, with 6 drawers, internal dividers, 3d printed handles and side panels, and wheels
- [Office Desk](https://yoavik.com/fabrication/office-desk): An L-shoffice desk with oak veneer and top-surface power outlets
- [Planter Box](https://yoavik.com/fabrication/planter-box): A custom built wooden planter box that wraps the corner of my apartment
- [Rabbit Hutch](https://yoavik.com/fabrication/rabbit-hutch): A 2-story outdoor rabbit hutch with a hiding spot for our rabbits
- [Tic Tac Toe](https://yoavik.com/fabrication/tic-tac-toe): A wooden tic-tac-toe game board with X and O pieces.
- [Waterfall Tables](https://yoavik.com/fabrication/waterfall-tables): Two beautiful waterfall tables made from oak, ipe and poplar wood
- [Wine Bottle & Glass Holder](https://yoavik.com/fabrication/wine-glass-holder): A wine bottle and glass holder made from Pine and Ipe wood
- [Wooden chandelier](https://yoavik.com/fabrication/wooden-chandelier): A wooden chandelier made from indian rosewood and brass light fixtures.
- [Wooden Playhouse](https://yoavik.com/fabrication/wooden-playhouse): An outdoor wooden playhouse with 2 stories and a balcony
- [Workbench](https://yoavik.com/fabrication/workbench): A wooden workbench with a vise for the workshop.
- [Yard Fence](https://yoavik.com/fabrication/yard-fence): A wooden fence built on top of a block wall with some fancy details

## Contact and attribution

- Author: Yoav Kadosh
- Website: https://yoavik.com
- GitHub: https://github.com/ykadosh
- X: https://x.com/yoavikadosh