Hacker News·46wSVGs that feel like GIFs
SVG animations can replace GIFs for terminal recordings, offering smaller file sizes and higher resolution. Using asciinema to record terminal sessions and svg-term-cli to convert them creates animated SVGs that work in GitHub README files. SVG animations leverage built-in elements like <animate>, <animateTransform>, and <animateMotion> from the SVG specification.
Frontend Masters·43wLiquid Glass on the Web – Frontend Masters Blog
Apple's new Liquid Glass design aesthetic for version 26 operating systems creates complex visual effects with light refraction, distortion, and frosted glass appearances. Web developers are recreating this look using CSS backdrop-filter, SVG filters like feDisplacementMap and feGaussianBlur, and React components. The technique involves multiple parameters including displacement scale, blur amount, saturation, and aberration intensity. However, implementing liquid glass effects raises significant text contrast accessibility concerns that developers must carefully address when placing text over unknown backgrounds.
Josh W Comeau·44wA Friendly Introduction to SVG • Josh W. Comeau
SVG (Scalable Vector Graphics) is a powerful web technology that allows developers to create scalable, interactive graphics using XML syntax. Unlike traditional image formats, inline SVGs can be styled with CSS and manipulated with JavaScript as first-class DOM citizens. The tutorial covers basic SVG shapes (circles, rectangles, polygons), the viewBox attribute for scalability, and advanced stroke animations including dash patterns and drawing effects. Key concepts include using presentational attributes, creating smooth transitions, and leveraging stroke-dasharray and stroke-dashoffset for dynamic visual effects.
developedbyed·47w"don't use AI for coding" is stupid
A developer and content creator argues against the sentiment that using AI for coding is cheating or harmful. They share their perspective that AI tools are invaluable for beginners, helping them jumpstart their programming journey by building projects in days rather than years. The author distinguishes between effective AI usage (guided assistance with understanding) and ineffective usage (blind copy-pasting without comprehension). They demonstrate how they used AI to create a complex SVG zipper animation while maintaining understanding of the underlying concepts, and advocate for documenting AI-assisted learning processes.