@geoffrich@front-end.social
@geoffrich@front-end.social avatar

geoffrich

@geoffrich@front-end.social

Web dev, SvelteJS maintainer, and pianist. ❤️ cats, books, and video game music.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

ben, to random
@ben@a11y.info avatar

Working on a change to my blog to feature some articles a bit more prominently.

For those who've read my posts, what are 2–4 articles of mine that you'd consider some of my better or more quintessential ones?

geoffrich,
@geoffrich@front-end.social avatar

@ben this is the one I link people to the most: https://benmyers.dev/blog/on-the-dl/

geoffrich, to random
@geoffrich@front-end.social avatar

New post: on preloading SVG sprites (or lack thereof), and verifying that the code changes you make actually do something.

https://geoffrich.net/posts/preloading-svgs/

geoffrich, to javascript
@geoffrich@front-end.social avatar

I remember seeing a chart/site somewhere comparing adoption of major framework versions based on npm downloads, e.g. React 16 vs 17 vs 18 or Svelte 3 vs 4 vs 5. Anyone have a link to it?

I don't think it was just frameworks, but other packages like Redux or routers as well.

geoffrich,
@geoffrich@front-end.social avatar

@dominikg that's it, thanks!

geoffrich, to CSS
@geoffrich@front-end.social avatar

A bit of a work conundrum...

  1. We render part of a page inside multiple websites we don't control (so we don't have control over the site's CSS, just our own)
  2. We want to use rem units so it adjusts to the user's preferred font size
  3. However, some of these sites do things like "font-size: 62.5%" on <html>, which makes our page section look smaller than expected (since root font size is now 10px instead of 16px)

Is there a way to get consistent sizes and keep using rem units?

geoffrich,
@geoffrich@front-end.social avatar

Like, the whole deal with rem is it's relative to the root, so I'm not sure there's a good way. But em is too relative, since I don't want it relative to each child's parent.

for why rem is preferred over px, see these articles from Josh and Josh:

https://joshcollinsworth.com/blog/never-use-px-for-font-size
https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/

geoffrich, to svelte
@geoffrich@front-end.social avatar

#Svelte 5 is now in the "Release Candidate" phase: https://svelte.dev/blog/svelte-5-release-candidate

"This means that the design of the framework is largely settled, with no anticipated breaking changes between now and the stable release, and that the most egregious bugs have been stomped.

"It doesn't mean that it's ready for production, or that nothing will change between now and 5.0. But if you've held off on dabbling with Svelte 5 during the public beta phase, now is a great time to try it out."

geoffrich, to random
@geoffrich@front-end.social avatar

I guess you can't preload svgs? Tried both of the following to load a SVG sprite file

<link rel="preload" as="image/svg+xml" href="/assets/icons-24-IYYLJFU2.svg">  
<link rel="preload" as="image" href="/assets/icons-18-CPPFOGJG.svg" type="image/svg+xml">

The first gets a "<link rel=preload> must have a valid as value" and the second isn't actually used when the SVG sprite is rendered; it gets redownloaded.

GH issue: https://github.com/whatwg/html/issues/8870

geoffrich, to javascript
@geoffrich@front-end.social avatar

Fascinating read on optimizing code https://romgrk.com/posts/optimizing-javascript

geoffrich, to random
@geoffrich@front-end.social avatar

someone just sent the message ":q" (a.k.a. "how to quit vim") in our company's main slack channel 😄

geoffrich, to random
@geoffrich@front-end.social avatar

I can tell whether I've been spending more time in Python or JS lately by if I instinctively write print or console.log to debug

geoffrich, to random
@geoffrich@front-end.social avatar

I have a YouTube channel where I post game music piano covers, and I'm super proud of my latest covering the Beach theme from "Plok!"

Plok was a platformer for the SNES that had a killer prog-rock-influenced soundtrack, and this track was a ton of fun to learn

#vgm #piano

https://youtu.be/zmowuOgjfbA

geoffrich, to random
@geoffrich@front-end.social avatar

Reached the point at my current company where I look at old commits to see why a weird change was made and my name is on them 🙃

geoffrich, to random
@geoffrich@front-end.social avatar

Speedrunning tips for getting banned from a GitHub org:

  • open an issue with your entire project as a reproduction, and refuse to provide a minimal repro when asked
  • when your issue is closed for refusing to provide a repro, tag 20+ maintainers and order them to fix the bug ASAP
geoffrich,
@geoffrich@front-end.social avatar

I forgot to mention they did this on multiple issues

geoffrich, to svelte
@geoffrich@front-end.social avatar

I’ll be giving a talk on #Svelte 5 at CascadiaJS this summer alongside a bunch of other great speakers. Hope to see some of you there!

https://cascadiajs.com/2024

geoffrich, to random
@geoffrich@front-end.social avatar

AI-generated PR description tells:

  • "improves code organization and maintainability"
  • "enhances code clarity and efficiency"
geoffrich, to random
@geoffrich@front-end.social avatar

ok, why am I just now finding out all the Final Fantasy Piano Collection albums are streaming

https://music.apple.com/us/playlist/piano-collections-final-fantasy/pl.u-DdANrqPFl5jejq

geoffrich, to random
@geoffrich@front-end.social avatar

Trying a new thing where I have a "notes" section on my blog. The idea is I have a place to jot things down that don't reach the level of a "post" (imo) but that I want to easily refer to later.

I could bury them in Notion or whatever, but I like having them public and less easily lost.

Currently only direct links, maybe I'll wire up to RSS or add an index at some point.

The first one is on how I helped a coworker undo a bad merge:
https://geoffrich.net/notes/undoing-a-bad-merge/

geoffrich, to random
@geoffrich@front-end.social avatar

nothing gets comments like a GitHub issue around naming https://github.com/sveltejs/svelte/issues/10334

geoffrich, to svelte
@geoffrich@front-end.social avatar

Just updated my Svelte-generated social image demo for 2024! It now uses 4 and 2.

The social image below was generated from a Svelte component at runtime 👇

Built on Vercel's Satori library and @nmoo's satori-html

https://sveltekit-satori.vercel.app/?seed=quiet

geoffrich,
@geoffrich@front-end.social avatar

Part of the reason for updating was taking advantage of the new read helper in SvelteKit 2.4. I wrote a quick blog post yesterday on how that simplifies things:
https://geoffrich.net/posts/sveltekit-read/

geoffrich, to svelte
@geoffrich@front-end.social avatar

New blog post: 2.4 added a new read method that simplifies reading assets on the server. I did a quick writeup on how it simplifies retrieving raw font data in one of my old social image demos.

https://geoffrich.net/posts/sveltekit-read/

geoffrich,
@geoffrich@front-end.social avatar

Rich Harris also did a video demo of the new functionality:

https://youtu.be/m4G-6dyF1MU

thilo, to svelte
@thilo@maier.social avatar

This post by @geoffrich makes the purpose of 's new read function much clearer:

https://geoffrich.net/posts/sveltekit-read/

geoffrich,
@geoffrich@front-end.social avatar

@thilo I'm always happy when someone finds a new blog post before I post about it 😄

geoffrich,
@geoffrich@front-end.social avatar

@thilo rss ftw

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • provamag3
  • rosin
  • thenastyranch
  • Durango
  • DreamBathrooms
  • ngwrru68w68
  • magazineikmin
  • cisconetworking
  • Youngstown
  • mdbf
  • slotface
  • osvaldo12
  • GTA5RPClips
  • kavyap
  • megavids
  • InstantRegret
  • everett
  • cubers
  • vwfavf
  • normalnudes
  • tacticalgear
  • tester
  • ethstaker
  • khanakhh
  • modclub
  • Leos
  • anitta
  • JUstTest
  • All magazines
    •