<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>robobeau Blog RSS Feed</title>
        <link>https://robobeau.com/blog</link>
        <description>René Esteves' blog.</description>
        <lastBuildDate>Tue, 17 Dec 2024 01:48:34 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <copyright>All rights reserved 2024, René Esteves</copyright>
        <atom:link href="https://robobeau.com/blog/rss" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[Popsicle sticks, duct tape, and Next.js]]></title>
            <link>https://robobeau.com/blog/2024/11/17/popsicle-sticks-duct-tape-and-nextjs</link>
            <guid>https://robobeau.com/blog/2024/11/17/popsicle-sticks-duct-tape-and-nextjs</guid>
            <pubDate>Sun, 17 Nov 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[A short rambling on the subject of this website, and how it was built.]]></description>
            <content:encoded><![CDATA[<h1>Popsicle sticks, duct tape, and Next.js</h1>
<p>Why would anyone go through the trouble of doing any of this? Web development is a most disagreeable hobby and/or career path. Steer clear! Heed my warnings! It's not too laaaaa—</p>
<h2>Straight to the Source</h2>
<p>You can find the source code for this site, warts and all, on its <a href="https://github.com/robobeau/robobeau.com">GitHub repo</a>.</p>
<h2>Hopping on the Next.js Bandwagon</h2>
<p>I use Next.js at my job, in which I managed to mash my fists onto a keyboard long enough for a working e-commerce cart and checkout system to materialize. Admittedly, I had <del>antagonists</del> help building it, but I hadn't stood the site up from scratch. Since we're working on Next.js 14 for a new project <em>(started shortly before Vercel announced Next.js 15!)</em>, I decided to learn more about it the best way I knew: By banging my head against that particular brick wall.</p>
<h3>Key Points</h3>
<ul>
<li>The <code>/app</code> directory is a bit of a learning curve; its rigidity takes a while to get used to. It feels like a decent <em>(but clumsy?)</em> attempt to enforce some discipline in developing React apps. It is not junior friendly.</li>
<li>React Server Components are pretty cool! I've yet to fully squeeze the juice out of these, since this site is mostly static. My only real complaint is that I wish React.Context just <em>worked</em> in RSC, which is a common enough complaint that the React team is looking into it.</li>
<li>Wow! Parallel routes are really neat!</li>
<li>Wow! Parallel routes are not production ready!</li>
<li>Jury's still out on Server Actions. Maybe I'll implement a guestbook in the future? If I do, I'll make sure to come back and update this post!</li>
</ul>
<h2>MDX Gon' Give It to Ya'</h2>
<p>This site employs <a href="https://mdxjs.com">MDX</a> for some of its pages, including the <a href="/about">About Me</a> page, and the very blog post you're currently reading! I enjoy using <a href="https://obsidian.md">Obsidian</a> as a second brain, and <a href="https://www.markdownguide.org">Markdown</a> is a simple, easy-to-use markup language for writing documents! MDX lets you do some nifty stuff, like using JSX in your Markdown files! You can also customize how it renders each construct! That's neat!</p>
<p>In the About Me page, I use JSX to correct a <a href="https://github.com/robobeau/robobeau.com/blob/main/src/components/AboutMeProgram/about-me.mdx?plain=1#L10">small accessibility foible</a> I inflicted upon myself for the sake of a dumb joke! Check out the <a href="https://github.com/robobeau/robobeau.com/blob/main/src/app/blogs/2024/11/17/popsicle-sticks-duct-tape-and-nextjs.md">source code</a> for this blog post whenever you get the chance!</p>
<h2>A Meditation on Tailwind</h2>
<p>I went out of my way to try out Tailwind for this project, since <a href="https://www.npmjs.com/package/create-next-app">create-next-app</a> offers it as an option, and I've no prior experience with it. Long story short, I don't like it.</p>
<h3>Key Points</h3>
<ul>
<li>I'm just not a fan of class soup.</li>
<li>The speed that composability provides is more or less nullified by the learning curve.</li>
<li>If I wanted to compose classes, I think I'd prefer LESS/SASS mixins. Tailwind <em>does</em> provide a way to compose classes by using their <a href="https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply">@apply directive</a>, but even <em>they</em> are hesitant to recommend that approach, given it goes against their entire ethos. Even then, see #2.</li>
<li>The cost benefit of lower CSS file sizes doesn't seem to matter on a site of this scale. Maybe one day I'll do a cost analysis and see how much the overhead of Tailwind fares against the total file size of CSS generated by SASS. Maybe one day I'll win the lotto.</li>
</ul>
<h2>Netlify, huh?</h2>
<p>To start, yeah. I intend to look into <a href="https://opennext.js.org">OpenNext</a> in the future, since the e-commerce site my team works on is currently hosted on Netlify, and we intend on fully controlling our deployment process, in time. Realistically, though, for this site? I may leave it on Netlify's free plan, unless it suddenly gets the Reddit hug of death and I get screwed with bandwidth costs.</p>
<h2>Miscellany</h2>
<p>Didn't have a good place to put this, but I wanted to shout out <a href="https://github.com/react-grid-layout/react-draggable">react-draggable</a> and <a href="https://github.com/react-grid-layout/react-resizable">react-resizable</a> for making this site a <del>giant pain in the ass</del> lot more fun to develop! Truly, this site wouldn't be able to achieve its theme without the tactility of draggable, resizable windows!</p>
<h2>The Burning Question</h2>
<p>So, why Windows 3.1...? Eh, why not? I've seen a few 95-flavored sites out there, and while fun and creative, there's a certain redundancy in emulating an operating system that's similar to the one you're likely using as you read this <em>(<a href="https://en.wikipedia.org/wiki/Usage_share_of_operating_systems">73% market share!</a>)</em>. Windows 3.1 is so charmingly clumsy that I feel more nostalgic for it's UI/UX than its 9X counterparts. It's where I cut my teeth with computers!</p>
<p>Something I really enjoy about 3.1 is the skeuomorphic design of the desktop. It's the top of your desk. On which you put stuff. Conceptually easy to understand! Folders open up to files, and you can shuffle them around as messy as you like. Ignoring all the obvious problems that you're immediately thinking of, that's a neat paradigm! I feel like we, as a society, have de-emphasized use of the desktop in operating systems. Do you use yours? Or is it sitting there empty for the sake of an A E S T H E T I C wallpaper? It's a darn shame, I say as my hair visibly turns whiter by the second...</p>
<h2>W.I.P.</h2>
<p>I've got a couple of features I want to implement on this site, as well as some bug fixes for things you may or may not have noticed!</p>
<ul>
<li>MIDI Player!</li>
<li>Configurable wallpaper!</li>
<li>Guestbook and/or Contact Form!</li>
<li>Instrumentation!</li>
</ul>
<p>Did you know this site is <em>somewhat</em> responsive? I've set up a couple of breakpoints, but most people will probably only see the smallest "mobile" breakpoint, or the largest "desktop" one. Just, uhhhhh... don't resize the browser while a window is maximized! I still have to fix that... 😅</p>]]></content:encoded>
        </item>
    </channel>
</rss>