CSS
★ Featured
Animotion CSS
A visual CSS animation generator for creating smooth transitions, keyframe animations, and micro-interactions
Goodies
Resources, utilities and snippets for devs
This section brings together things I use every day: tools, snippets, small CSS ideas and a list of links worth keeping nearby. It's not theory or long courses, but practical resources to solve frontend problems faster and with better code.
Tools
(3)Small tools built for everyday development: generators, helpers and utilities that simplify repetitive tasks. If something saves me time or reduces mistakes when writing code, it usually becomes a tool and ends up documented here.
CSS
★ Featured
Gradify CSS
A modern CSS gradient generator with real-time preview for creating beautiful linear, radial, and conic gradients
TypeScript
★ Featured
ZodSmith Builder
A powerful visual builder for creating Zod schemas and TypeScript types with drag-and-drop interface
Snippets
(38)Ready-to-use code fragments you can copy, adapt and paste: React patterns, TypeScript helpers, frontend logic and functions I reuse constantly. The goal is to have an organized place to find quick solutions without reinventing the wheel every time.
typescript
chunk
Split an array into smaller arrays of a specified size.
typescript
uniqueBy
Remove duplicates from an array based on a key selector function.
typescript
groupBy
Group array items by a key into an object of arrays.
typescript
debounce
Limit function execution rate by delaying until calls stop.
typescript
throttle
Limit function execution to at most once per interval.
typescript
retry
Retry an async operation with exponential backoff on failure.
CSS Tricks
(21)Small CSS tricks to handle interface details: layouts, subtle effects, simple animations and micro-interactions. These examples are meant to make it easy to grasp the pattern, adapt it to your design and keep your visual code clean and consistent.
CSS
Fluid Sizing with clamp()
Smooth responsive sizes without media queries. One line of CSS that scales between min and max values.
CSS
Animate Height with Grid
Finally animate to auto height! Use grid-template-rows from 0fr to 1fr for smooth accordion animations.
CSS
Motion Path Animation
Animate elements along custom curves and SVG paths without JavaScript.
CSS
Container Queries
Components that respond to their container's size, not the viewport. Perfect for reusable UI.
CSS
Avoid Universal Selector Resets
Why * { margin: 0 } hurts performance and what to use instead.
CSS
Circle: border-radius vs clip-path
Two ways to make circles, but only clip-path gives you a circular click area.
Useful Links
(80)A curated selection of links I actually use: solid documentation, design references, frontend resources and online tools that make daily work easier. Less noise, more sites that add real value when you're building something serious.
Awesome AI Devtools
Curated list of AI tools to accelerate your development workflow.
OpenAI Cookbook
Practical examples for integrating OpenAI models into your projects.
Awesome Cursor Rules
Collection of .cursorrules to tune Cursor as your code copilot.
Cursor Rules Repo
Advanced Cursor rules focused on agents, TypeScript and AI workflows.
Animate.css
Collection of ready-to-use CSS animations with simple classes.
Framer Motion
Declarative animations for React with integrated gestures, layout and drag.
GSAP
JS animation engine with powerful timelines and SVG/scroll support.
Motion One
Lightweight library based on Web Animations API with modern syntax.
AutoAnimate
Add automatic animations to DOM changes with a single line of code.
MDN Web Docs
Central reference for HTML, CSS, JavaScript and modern web APIs.
TypeScript Docs
Official TypeScript documentation, from basics to advanced types.
Astro Docs
Official guide for building fast, content-driven sites with Astro.