@keithjgrant@front-end.social
@keithjgrant@front-end.social avatar

keithjgrant

@keithjgrant@front-end.social

👨🏻‍💻 Front end developer working primarily in React. Currently at Red Hat working on Ansible Controller. Author of CSS in Depth.

🌎 I live in the great Pacific Northwest. I care about people and believe in the open web.

✨ I’m married to a literary nerd and have two fantastic children and two ridiculous cats. I enjoy fine cocktails and cooking. And running, when I’m in the habit. #JavaScript • #CSS • #ReactJS • #WebDev • #UX • #IndieWeb • #guitar • #PNW • searchable

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

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

Huh.

I know I’ve got a cold, but a Zyrtec just cleared up at least 50% of my discomfort

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

IRS: the new w-4 form greatly simplifies the tax withholding and adds clarity

Great, so I update to the new form, went through their lengthy online form and used the random numbers it spit out and my witholding went up by 80%. Clearly it's wrong.

I have no idea how to fine tune my withholdings from here. The website tells me forms downloaded before May 25 (i.e. mine) had a bug. Filling it out now is thrown way off by my ridiculous withholding this paycheck and I have no idea how to fix it.

keithjgrant, (edited ) to random
@keithjgrant@front-end.social avatar

This is a really cool find: Build a Frontend Web Framework from Scratch by Ángel Sola Orbaiceta.

Basically a deep dive into the internals of how a modern frontend framework works. It’s on sale right now at https://shortener.manning.com/pde2

@ManningPublications

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

I want to get slots-like behavior out of a WC that doesn’t use Shadow DOM. Seems like it can only be done in Lit with some questionable hacks (Lit gets angry if I manipulate innerHTML of a sub component)

keithjgrant,
@keithjgrant@front-end.social avatar

@cferdinandi I got something rigged up that involves appending childNodes to the right places in Lit’s update function and I think it works (though I’ve stepped away for the day). Still need to chew on how I feel about that approach

keithjgrant,
@keithjgrant@front-end.social avatar

@mayank yeah I’m starting to think I might want to survey other options

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

My extra challenge I give myself when I play Connections is to solve the categories hardest to easiest. I can’t do it often, but it sure is satisfying

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

Markdown seems like the perfect place to use custom elements. It has dawned on me that this is a much cleaner, simpler approach than MDX, except...

My very first component needs a few multi-line attributes. Yet as I trying to embed these in markdown, the markdown parser can’t handle that without wrapping the whole element in a <p>. Gah.

keithjgrant,
@keithjgrant@front-end.social avatar

@cferdinandi no dice. The whole thing has to have no line breaks (and it would be an unacceptable compromise in this case anyway)

keithjgrant,
@keithjgrant@front-end.social avatar

@cferdinandi maybe? I've never used shortcodes inside MD. I'm using markdown-it right now. A quick search doesn't turn up any plugins for that, but I might look into what it would take to write one

keithjgrant,
@keithjgrant@front-end.social avatar

@cferdinandi I’m trying to drop MDX to simplify future maintenance though. Ugh

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

POV: when you use a google browser to surf the interwebs

keithjgrant,
@keithjgrant@front-end.social avatar

@mayank Jeez. I thought those Google login modal that's actually embedded in some websites was bad enough.

interfluidity, to random
@interfluidity@zirk.us avatar

even if you never use a microsoft product, people you interact with whom you trust, who may intend to respect your confidences, will unwittingly be running recall.

keithjgrant,
@keithjgrant@front-end.social avatar

@interfluidity @beep Surely there’s going to be consent legality problems here regarding video calls/chat

baumannzone, to javascript Spanish
@baumannzone@techhub.social avatar

WTF

keithjgrant,
@keithjgrant@front-end.social avatar

@baumannzone This has to do with how floating point numbers are stored (essentially, they’re fractions, not decimals). This occurs in most programming languages, not just JS. Look up “floating point rounding error”

keithjgrant,
@keithjgrant@front-end.social avatar

@baumannzone Here's python doing the exact same thing

peterreeves, to CSS
@peterreeves@mstdn.social avatar

I don't understand why CSS is so verbose sometimes. Why couldn't I just do:
color: --brand-red;
???
Why do I need to surround every use of it with var(...)? Wasn't the double-dash prefix was specifically chosen to not clash with any existing or future properties?

It's always so frustrating writing CSS. Especially compared to all the structure, abstractions, and terseness that programming languages offer.

#CSS #WevDev

keithjgrant, (edited )
@keithjgrant@front-end.social avatar

@css @peterreeves Exactly. A key consideration for every new CSS syntax is the performance involved in parsing and tokenizing the language.

It’s not simply about “is ‘left: 3 * 10px’ unambiguous?” It’s about “Can the parser know what token the ‘3’ is before it reads the ‘*’ or the ‘10px’. And without calc(), no, it cannot.

An ambiguous syntax leads to lookbacks, which absolutely destroys parser performance

keithjgrant,
@keithjgrant@front-end.social avatar

@css @peterreeves I guarantee the w3c tried to find a way to do this without var(). If you really want to dive through old GitHub issues, it’s probably there (though this one might date back to the older mailing list).

I recall seeing discussion about using $ like Sass, but then deciding that would conflict with existing Sass code, so eventually they settled on the current approach.

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

📝 New post: CSS in Depth, Second Edition

or: what’s new in my new book?

https://keithjgrant.com/posts/2024/05/css-in-depth-second-edition/

keithjgrant,
@keithjgrant@front-end.social avatar

Oh! I totally forgot to mention: key pages will be printed IN COLOR!!

keithjgrant,
@keithjgrant@front-end.social avatar

@josephdickson Thanks! I appreciate it 😄

keithjgrant,
@keithjgrant@front-end.social avatar

@ivansvlv it won’t be full color, but the pages that really need to be will (10 pages or so). Mostly that’s in the chapters on color and gradients

beep, to random
@beep@follow.ethanmarcotte.com avatar

Current status: https://bukk.it/frogpit.jpg

keithjgrant,
@keithjgrant@front-end.social avatar

@beep

word-break: break-word;
frogginess: extra;

antran22, to CSS French
@antran22@mastodon.social avatar

Can somebody really sell me Tailwindcss. This is the 3rd time I tried it and it still doesn't click for me.

#tailwind #frontend #css

keithjgrant,
@keithjgrant@front-end.social avatar

@antran22 Yeah, it really doesn't need to click. IMO, it's far inferior to just writing CSS

matuzo, to random
@matuzo@front-end.social avatar
  1. Download font from Google Fonts. Original size: 154KB
  2. Subset font. New size: 21KB
  3. Convert to woff2: New size: 10KB

With 3 styles, optimizing fonts saves me ~420KB 🫠

keithjgrant,
@keithjgrant@front-end.social avatar

@spectral @matuzo Google fonts has just revamped their UI... they now push for downloading fonts, or at least make that option as obvious as the old embed codes

(I just had to rewrite a page of my book in the absolute final stages of copyediting to match these changes 😅)

hi_mayank, to random
@hi_mayank@hachyderm.io avatar

my talk "Don't fear the cascade" starts in ~15 mins!

https://www.youtube.com/watch?v=iLxJ6PtuF9M
https://conf.11ty.dev/

keithjgrant,
@keithjgrant@front-end.social avatar

@chriskirknielsen @hi_mayank is… is this color slider overflowing intentional? Because it’s fricking hilarious

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