đ Hi folks. Your usual editor, Chris Brandrick, is enjoying a week off, so it's over to me, Peter Cooper (you may know me from such newsletters as JavaScript Weekly..) to fill in for a week. It's been a long time since I've taken the frontend reins, but hopefully you enjoy this issue nonetheless ;-) |
|
Vector? Raster? Why Not Both! â Sometimes itâs obvious when a vector based approach or a bitmap based approach will work best, but at other times there may be opportunity to combine the two.. such as in this example turning a 10MB outcome into a mere 78KB one. Zach Leatherman |
Interactive Learning Tools for Front-End Developers â There are lots of different ways to learn: hit the specs, follow some tutorials, or.. play some games? This post is a neat roundup of various interactive learning tools for learning things like CSS, JavaScript, SQL, React, Vim, and regular expressions that try to keep things light and fun. Louis Lazaris |
Here's the Right Way to Manage and Deliver Images on the Web â Ever been stuck while trying to choose between image quality and user experience? Automate image optimization and deliver next-gen formats like AVIF, WEBP images based on the user's device and network. Store. Transform. Optimize with ease. Try today. ImageKit.io sponsor |
htmlq: Like Michael Maclean |
âď¸ Â An Interactive Guide to Keyframe Animations â CSS keyframe animations are incredibly flexible and powerful but, says Josh, theyâre also âa bit weird.â This is a deep-dive into how CSS keyframes work from the ground up and how to go about using them to build high quality Web animations. Josh W Comeau |
|
đ Tutorials, Articles & Opinion |
Exploring the CSS Paint API: Blob Animation â A fun effect currently supported only on Chrome (and Edge) for getting gooey/blobby shapes going with CSS enhanced by JavaScript via the Paint API. Temani Afif |
'I completely ignored the front end development scene for 6 months. It was fine.' â Given that we publish a weekly newsletter helping you keep up to date with the front end development scene, maybe itâs tricky to share such opinions, but the author isnât wrong! Itâs possible to take a break and not miss out on too much.. plus you can catch up with our issues later ;-) Rach Smith |
Why Use a Time Series Platform for Application Performance Monitoring â Learn how to use time series data for real-time observability into application performance, systems and network metrics. InfluxData sponsor |
Reducing Carbon Emissions on the Web â Whether or not youâre an active environmentalist, you may be intrigued to know there are things you can do as a Web developer to improve the carbon footprint of your creations. Berwyn Powell |
Creating Accessible CSS Art â Art and visual effects generated in pure CSS are not inherently accessible but there are some ways to improve matters. Alvaro Montoro |
The Fixed Background Attachment Hack â A look at a little trick/workaround if you want the body background in a fixed position where it stays put on scroll and have it work on mobile. Martuzaali Surti |
An Analysis of Feed URLs â Thereâs no real standard when it comes to feed/RSS/Atom URLs, but it may be worth following the crowd. Jim Nielsen |
|
đ§ Code, Tools and Resources |
SKWAR: An Extremely Straight-Edged Variable Font â Itâs âvery squareâ, monospaced, but does have variable width and weight support. Heydon Pickering |
Shoelace: 'A Forward-Thinking Library of Web Components' â A collection of well designed every day UI components (buttons, drawers, inputs, menus, color pickers, and more) built in a framework agnostic way (though there are React wrappers available). Cory LaViska |
timefind: Search a Web Site's History â A Node-based tool (which you can use from the terminal) for quickly flipping through the Web Archiveâs snapshots. Nathan Manceaux-Panot |
Shortcut Puts the Agile in Agile and the 'Can' in Kanban Shortcut sponsor |
bundle: A Quick npm Package Size Checker â Enter a package name, then hit the ârunâ button and this tool will give you the minified, bundled, and gzipped size of the package. Okiki Ojo |
HTTP Nowhere: A Chrome Extension to Upgrade (or Stop) Non-Secure Requests Chris Palmer |
Fiddly: Create Beautiful and Simple HTML Pages From Your Sara Vieira |