What was your win this week?

I had surgery last Friday (bilateral turbinectomy + sepotoplasty) to fix some nasal breathing issues and aside from some swelling, I'm almost fully recovered! 😀

No mo' nose woes for me. 👃 🙌

• Wrote a QuadTree implemenation in Rust that seems pretty ok (next step, WASM-it!)
• Ordered Metroid:Dread special edition + Amiibos (it's my bag baby)
• Played some Reactive-Drop: Alien Swarm with buddies (it was super effective)
• Failed to arrest my over use of parenthetical statements. (really, I have a problem, someone stop me!)

It has taken a few months but I finally got top spot for the year on DEV for the #a11y tag!

Now I just need a couple hundred more reactions to get top for all time and my inner egomaniac will be satisfied 🤣

dev.to/t/a11y/top/year

got hired :)

This week has been all about icons. I'll give a bit of background.

We have a Gatsby application. In it we have SVG icons implemented as React components, loaded lazily with the help of @loadable. However we have a nasty historical issue where our Gatsby configuration files have been written in TypeScript and transpiled to CommonJS. While this works for most things alright it does break dynamic imports so the only thing you can do is loadable(() => import('path/to/icon/Icon.svg')) and it has to be exactly that way. If you give it a dynamic string or use a variable then it breaks when building SSG pages. So icons are pretty verbose code due to this issue.

We also have a component library that we've been slowly building up and moving stuff there. I encountered a need to have icons there instead of our Gatsby app so I started looking into it. So I spent quite a time researching into how to get icons there while keeping things mainatainable, and also getting the benefit of lazy loading even with the limitations that we face in our Gatsby config.

First part of the week I put my biggest push to a solution that relied on require.context()'s lazy option feature and SVGR to manipulate the original SVG files to use currentColor in fills and strokes. Everything worked very well in the Storybook and Webpack would build a bundle. So I got to the phase of actually trying the new icon setup in the Gatsby app. And I got it all the way done but no icon ever became visible. Browser tried to load a bundle file that was not included in Gatsby's build. And after thinking about this for a while I had to conclude that I don't want to write a hacky solution to copy the bundled JS icon files, because the icons should just be imported into where needed and work out of the box!

I got pretty angry with this, because for about two weeks I haven't been able to deliver much anything noticeable, and a lot of work now felt like being flushed down the toilet. I either would cut my work day a bit short and probably ruin my entire weekend thinking about the problem, or just go ahead and do a longer day and figure something out.

After additional research I finally ended up with a setup where I could do something like this:

.icon {
    --icon-color: currentColor;
    display: inline-block;
    vertical-align: middle;
}

/* there is `<title />` element added conditionally but we don't want to show it on hover */
.svg {
    pointer-events: none;
}

return (
    <div className={styles.icon} style={size ? { fontSize: `${size}rem` } : undefined }>
        <svg className={styles.svg} height="1em" width="1em">
            <use href={iconHref + '#icon'} height="1em" width="1em" />
        </svg>
    </div>
);

require.context() was replaced with auto-generated index.ts file in the icons folder. SVGR got replaced with SVG imports decorated by some svg-transform-loader attribute manipulation magic to change fill and stroke values to var(--icon-color) as well as adding id="icon" to the <svg />. Doing things this way one can just throw an SVG file in, have the index.ts be generated, and the added icon becomes visible in Storybook. Also the SVGs are an asset instead of being inlined, thus saving from code-splitted JavaScript being downloaded and executed just to see an icon.

So I'm very happy that I got this far. I'm confident this solution at least works even on Gatsby side, but I can only be sure once I try it out next week. Can only hope I won't find one more hairy issue :)

We have 4mo twins along with 2yo and 4yo. Current wins center around keeping everyone alive and (somewhat) functional.

Got a call for full time SDE role from a startup who just raised $ 14 Million past month, and excited for the upcoming interview ✨🚩

1. Finished the week with all my tests passing! 😄
2. Published a blog post. 🙌🏾
3. Talked with my sister via Zoom when Facebook was down. 🥰

Framework core ready 🎊🎊🎊🎊🎊😄!!! All that's left is docs and testing the framework and doing a beta release

I finally finished my portfolio...complete with demos on glitch...and even posted it everywhere...got a job interview next week :)