Fotis Papadogeorgopoulos

I wrote about one of my favourite new-ish APIs, the Cookie Store API. It simplifies manipulation of cookies in browsers, has some tangible performance improvements, and offers a missing "change" event to sync state ✨ fotis.xyz/posts/the-new-… cc @sebastienlorber @bytesdotdev 📨

Uploaded my talk on the past, present, and future of bundlers. It covers a bit of history, why we use bundlers, how they work, features like code splitting and tree shaking, and a bit on the evolution and future of JavaScript tooling. Check it out! 📺 youtu.be/JUS6EPMbk0U

@donniedamato Looks nice! If I understand correctly, the idref boundary only matters if you are trying to reference symbols by their id in a spritesheet? The approach in svg-use is to always reference external SVGs via their URL + id. I left spritesheets as a future rabbit hole 😅

@isfotis Nice work, I solved this problem a few years ago with poor ergonomics but it also covered ShadowDOM since the idref boundary will break in there. npmjs.com/package/savager

Introducing svg-use: a set of tools and bundler plugins, to ergonomically load SVG files as components, via SVG’s <use href> mechanism. Meant as an alternative to inlining SVG in JS. I've been missing such tooling for years, so I gave it a shot! fotis.xyz/posts/introduc…

Psyched to see svg-use featured on @bytesdotdev 🎉 It's been a great few weeks of hearing all the use-cases people have, and how this solves real pain points for them! github.com/fpapado/svg-use (My surname got chewed up in the newsletter, I assure you it's Papadogeorgopoulos 😶)

@__phuoc For svg-use, I considered using import attributes to bundle some icon sets into granular spritesheets: import {Component} from './arrow.svg?svgUse' with {spritesheet: 'my-sheet'} This could give more loading flexibility to the caller. Complicated to implement, but maybe 💭

@__phuoc One advantage of spritesheets is that you can eagerly load your icons up-front, which is more resilient to intermittent connection failures. The cost/benefit from reducing requests depends on the load profile.

@KimChouard I am not very familiar with metro tbh 😅 Does RN support use[href]? As long as the bundler has hooks to transform JS + emit an asset (as described here #in-depth" target="_blank" rel="nofollow noopener">github.com/fpapado/svg-us…), it should be ok. Another option is to do the transforms up-front (e.g. github.com/fpapado/svg-us…).

@isfotis How would this work with a React Native app and the metro bundler? 🤔

@jvpmamede Thank you! 😊

@isfotis Really nice tool. Gotta use it next time I need svgs.

@liseuek My ideal future approach to this space would probably be similar to CSS linked parameters (#the-future" target="_blank" rel="nofollow noopener">fotis.xyz/posts/introduc…). That would allow using either background-image and `img[href]`, for the best control over scheduling priorities, CORS and so on. Keeping my fingers crossed 😅

@liseuek Oh that's a neat technique! I like the consideration for tricolor schemes, that covers most use-cases. Re: zero JS, the tools I describe are build-time transforms, and bundler plugins. The delivery is up to the caller. I've used this as an 11ty postprocessor, for example.

@gregberge_ Thank you so much! Means a lot to hear that from you 😌

@isfotis Finally! Thanks for that 👏

@sebastienlorber @ThisWeekInReact I'd be happy to look at integrating this approach! The tricky part is that with inline SVG, authors might be targeting individual parts with CSS. With `use`, only a specific theme / CSS props API will be exposed. So the migration docs will be as important as the implementation 😅

@ThisWeekInReact @isfotis I might need that for Docusaurus :D github.com/facebook/docus…

Direct link to GitHub: github.com/fpapado/svg-use cc @_developit and @kurtextrem, whose posts on SVG-in-JS gave me a good prompt to put this together 🔧

@shadeed9 One thing I learned early on, is using people's names when referencing them and their work, always. I would expect someone with such a big following to know this by now, and be upfront when they mess up. Sorry about this Ahmad, your blog and work is a trove of resources 😌

@farzad_yz The aria-labelledby and visually hidden element work as I would expect, since the element is part of the page already (and not display: none and such) 😁

@farzad_yz What browser is this on? I got a bit curious and set up a codepen (standalone debug mode: cdpn.io/pen/debug/gOdq…, source: codepen.io/fpapado/pen/gO…) and aria-label does not seem to show up on macOS FF/Chrome/Safari. aria-labelledby and a "visually hidden" element do show up.

TIL: aria-label content contributes to the text of the page. In other words, you can find the text in aria-labels with ctrl/cmd + F.