Since starting work, I have learned a great deal about JavaScript, TypeScript and React ecosystem. Keeping this blog style page as documentation of progress and other threads of thoughts.
Wanted to move the site over to TypeScript for awhile and I originally experimented a bit with Server-side Rendered framework (remix) but decided to embrace the OG: Gatsby. Gatsby has support for SSR along with hybrid SSR so my hope is some pages will be SSG while others would be SSR.
The longer I’ve been in the React world, the more uncompromising CSS-in-JS becomes. So naturally, I decided to use Emotion. Have familiar for it from work and it’s mature enough, has all the features I would need. Also haven’t used any other framework so everything I said before doesn’t matter.
It’s been a smooth developer coding experience so far (August 13, 2024 10:50 AM (EDT)). Top level view of routes is really helpful and helps clean up a bunch of code. Previous version of the nimatullo home page was imperative and I just wrote down all the routes in components:
<GridChild
onHover={setHoverTitle}
link="projects"
title="Projects"
description="things i make"
emoji={{
name: "clipartrocket",
fallback: "🚀",
}}
/>
<GridChild
onHover={setHoverTitle}
link="media"
title="media"
emoji={{
name: "artist",
fallback: "🎨",
}}
description="books, music, reading"
/>
<GridChild
onHover={setHoverTitle}
link="resume"
title="Resume"
emoji={{
name: "business",
fallback: "🖊️",
}}
description="make sure you look them in their eyes when you shake their hand"
/>
<GridChild
onHover={setHoverTitle}
external
title="Memes"
emoji={{
name: "clownonball",
fallback: "🤡",
}}
description="**bad**"
/>
But declaring the routes in another file and then iterating over them simplifies the code a lot!
<Grid>
{homePageRoutes.map((r) => (
<TextCard
onMouseEnter={(_) => debouncedSetHoverTitle(r.title)}
onMouseLeave={(_) => debouncedSetHoverTitle(null)}
key={r.title}
{...r}
/>
))}
</Grid>;
Iterated on all the typescript and other changes but no write up. Want to this section to be about my goal to achieve minimal deployments and how i think i accomplished this.
i have a bunch of content that i regularly update and change and these include: seasonal playlists, about me (interests), hoarded blog & article links. any time i would want to add to these, it would require a new deployment. so with the hopes of making this type of content more dynamic, i decided to create my own cms solution that would allow me to update these things without needing to deploy an entirely new site each time.
since i already used firebase on one section of the website, i decided to double down on this and host all my data persistance in firebase. i wrote an api layer to interact with firebase that would allow all my documents to be fully typed. this was sick.
next, all my documents all share a similar schema, they either all have a title, url, description or some variation of those. so i created a generic object that my documents would extend and use dependency injection to handle on a per document basis. each implementation would return the initial values of the document, the fields, labels, formatters, etc. then in the view, i can pass just the specific object and the form to insert these values into firebase would be rendered based on those fields.
overall, this reduced a bunch of repetition considering the similarity in my schema between my documents. this also makes it super flexible and extendable since i can now add any type of document without having to change the component that renders them (hopefully). after this initial change, i decided i also wanted to host pictures i take and adding this feature was as simple as just creating a class that extends the generic firebase model. i can now just add things to my website through this cms section without needing to redeploy the website everytime. makes me feel like a beast