Gracie Gregory (she/her) for The DEV Team

Posted on Oct 8, 2021

What was your win this week?

#discuss #weeklyretro

Hey there!

Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

Starting a new project
Fixing a tricky bug
Cleaning up your space... or whatever else might spark joy ❤️

Happy Friday! Hope you all have a great weekend 🎊

Top comments (29)

Michael Tharrington • Oct 8 '21

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. 👃 🙌

Thomas Bnt • Oct 8 '21

Oh that great ! 🎉

GrahamTheDev • Oct 8 '21

Glad the surgery went well!

You will hopefully soon be able to breath a sigh of relief that the breathing issues are gone (sorry, poor joke, I hope it isn't too soon!)

Michael Tharrington • Oct 8 '21

Lol, no no not at all in poor taste... but the smell of that joke was wretched. 😀

GrahamTheDev • Oct 8 '21

🤣🤣

Ryan Brown • Oct 8 '21

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!)

GrahamTheDev • Oct 8 '21

There is nothing (at all) wrong with the (over)use of parenthetical statements. They add some (much needed) personality to your achievements you made (this week)! ❤

GrahamTheDev • Oct 8 '21

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

Ben Lovy • Oct 8 '21

got hired :)

Amrin • Oct 15 '21

congrats ben :)

GrahamTheDev • Oct 8 '21

Congrats, where at and what role?

Ben Lovy • Oct 8 '21

I don't want to say too much today, its a fresh startup still finalizing everything. In brief, we're building machine learning tools in Rust, I'll be their first programmer hire. I've got a DEV post ready to go as soon as I get the green light!

GrahamTheDev • Oct 8 '21

No problem, completely understand, congratulations once again, I hope the role is as interesting as it sounds!

Vesa Piittinen • Oct 8 '21 • Edited

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 :)