Creating Generative SVG Characters
A tutorial on creating playful generative SVG characters using JavaScript and SVG.js, inspired by a craft project with a child.
Michelle Barker is a front-end developer and writer behind CSS { In Real Life }, a blog dedicated to modern CSS and real-world web development. She shares honest, practical insights on evolving CSS features, front-end techniques, and the web community.
227 articles from this blog
A tutorial on creating playful generative SVG characters using JavaScript and SVG.js, inspired by a craft project with a child.
A tutorial on using CSS custom properties and radio buttons to dynamically toggle clip-path values, demonstrating a cleaner alternative to JavaScript class toggling.
A developer discusses the challenges of estimating project timelines, especially for complex JavaScript tasks and accessibility requirements.
A technical tutorial on creating realistic paper snowflake effects in CSS using clip-path, masking, and custom properties.
Learn how to dynamically style CSS pseudo-elements like ::after using JavaScript and CSS custom properties (CSS variables).
A technical guide to creating animated underlines for links using modern CSS properties like text-underline-offset and text-decoration-color.
A developer discusses the need for better browser dev tools to debug modern CSS media queries like dark mode and reduced motion preferences.
A roundup of exciting new web technologies including CSS aspect-ratio, container queries, and JavaScript libraries like GSAP Draggable and Three.js.
Explains how to find an element's nearest positioned ancestor using JavaScript's offsetParent and getComputedStyle for debugging CSS layout issues.
A web developer's 2020 year-in-review, covering blog redesign, writing, and speaking at tech events.
A developer discusses integrating Tailwind CSS into WordPress development workflows, focusing on the Gutenberg block editor.
A guide to creating CSS utility classes for overlaying elements, covering techniques for direct children and pseudo-elements.
A developer shares techniques for preventing unwanted browser caching of static site assets, including file hashing with Eleventy and Parcel.
The author details the relaunch of their web development blog, highlighting new features and a migration from Gatsby to Eleventy.
A developer's evolving perspective on using Tailwind CSS, discussing its advantages, limitations, and recent improvements.
Tips for successfully onboarding a junior developer for remote work experience, focusing on team communication, productivity planning, and orientation.
A quick command line tip for efficiently creating multiple files with the same extension using brace expansion.
A developer critiques the use of time-consuming coding challenges in tech hiring, arguing they are unfair and exclusionary.
A developer shares their favorite recent tech discoveries, including the GSAP ScrollTrigger plugin for animations and the Eleventy static site generator.
A front-end developer explains how she built the Zig-Zag Gradient Lab, a creative CSS demo using gradients, custom properties, and JavaScript.