Bootstrapped React
I've basically slapped Bootstrap and React together because I was moving fast and I'm maybe starting to regret it
When I started on this project, I wasn’t exactly sure how it was going to look or feel and I had a few options just to hit the ground running. As much as I am a Front-End Developer, I’m not much of a designer1.
I had pretty much decided I was going to use some kind of prefab’d design system to build JustReadComics and a few systems came to mind:
I had had some experience with all of these systems.
Material UI was nice and Google-y and I had spent about a half a year at my last job basically decommissioning the use of the it, so I had a decent grasp on what it looked like and functioned.
Back when I was just out of college and building little apps and other tools, Foundation was my go-to system of choice because I thought “Bootstrap is too bubbly” and Foundation was slick2. It was super fun to use with Bower and I was all about compiling CSS stuff back then.
And then there was Bootstrap. The Twitter UI system that was slick and modern as hell. Fixing all of your little layout and column stacking issue way back before we had flexbox and CSS Grids. It was standardized and tested to hell, because it ran on Twitter.com. That was cool, but damn near every brand new site on the internet was using it and I was kind of sick of it after a while.
All that being said, after a few moments of contemplation3, I decided on Bootstrap. In 2023, not only does it feel very neutral as far as UI is concerned but at one point (maybe Bootstrap 3?) I had learned a lot about how it worked. I figured, it can’t be that much more complicated than a few versions ago, right?
Using Bootstrap in 2023
This isn’t nearly as dramatic as I’m making it out to be. As it turns out, Bootstrap hasn’t changed too much in a few versions, and in fact, it’s gotten a lot simpler to throw together simple pages. My use case was covered with some almost boiler-plate code from the Bootstrap docs.
For JustReadComics, my whole principle has been “get it close, we’ll clean it up later,” so pages are thrown together using some really basic navigation elements and column layouts. Not thinking about mobile, just getting things to render data and look fine enough4.
So I’ve got pages like this that are as basic as you can get:
Lots of basic Bootstrap classes to make a page look fine enough.
But the problem is: I have to add all of those dang classes myself. I’ve gotta basically design whole elements and layouts myself using Bootstrap, which is fine once you have it done, but it’s a bit painful.
In my hastiness, I decided to do the simple thing and follow some of the basic Bootstrap docs and include everything I need as imports in my index.tsx:
Which gives me all of the Bootstrap business I need, but also means I need to manually handle everything. And if I’m a “good developer” I would notice that I’m probably including a whole bunch of extra stuff I don’t actually need in those imports.
But alas. We’re building a fun lil project. We’ll clean it up later. Right?
A potential migration…
In hindsight, I realize I’m not really doing things “The Right Way.” So as to not bore you with another breakdown of what that means, essentially, my setup is Bootstrap CSS and JS as part of the initialization of my app. It’s the recommended way to do things, but maybe it could be optimized. Plus, I have to basically build out all of the layout components I want which can be pretty tedious.
In my googling for this post, I came across a wonderful little project called React-Bootstrap that does away with jQuery (which, iirc, Bootstrap uses for some of the fun, auto-included interactive elements of their framework) and allows you to use this library as React elements rather than having to (as I’ve done) constantly check the docs for the correct classes to make things flow as you’d prefer.
It’s maintained separately from React and Bootstrap, but it’s, according to Github, used by 1.4 million people. That’s kind of reliable, right?. On top of that, thinking about the future of JustReadComics and how much I’ve married myself to Bootstrap, this might be a good way to do a few things:
Do away with having to memorize the Bootstrap class dictionary
Customize the UI without having to dig deep into the Bootstrap docs to override their default UI
Make my life easier
So, it’s likely I’ll try migrating over to this in the next few days. Seems like a good thing to work on instead of learning how to move some of the complicated bits of this project to AWS Lambda…5
Though, it seems like my attachment to importing Bootstrap’s CSS won’t go away, but at least I won’t be bringing in jQuery, yeah?
It might be a bit of work, but I’m not in a huge rush here. This will be a good thing to work on while I try to figure out some of the bigger picture parts of the project that seem incredibly daunting to me right now - but that’s mostly me getting to into my head about everything.
For now, there’s a path forward on something which is exactly what I need to lift my spirits. I’m happy with that.
Next Time
Paid post: Comic Book Data SUCKS and What I’m Doing About It.
Real Quick
I want to throw out a few quick comic recommendations in case you came here for that and I’ve lead you astray talking solely about my thought processes when writing code.
Listeners of IRCB will likely already know these suggestions, but nonetheless:
Universal Monsters: Dracula #1
Written by my (self-proclaimed) pal, James Tynion IV and illustrated by the incomparable Martin Simmonds, this book knocked me out of my chair with it’s take on the incredibly classic tale of Dracula. The first issue focuses on R. M. Renfield as he is interviewed/interrogated by a psychologist and the creep factor is there from page one. I can’t sing the praises of Simmonds’ art enough. The final sequence with Dracula is absolutely stunning.
The Council Of Frogs
This is a book I’ve become simply obsessed with. A quiet, yet perfectly paced story of adventure and spirit. There are many singular images of frogs as wizards, fighters, bards, etc. out there, but this book nails exactly what all of those images out there were trying to capture. A simple, small frog on an adventure larger than they can understand. This book builds a narrative and a world slowly and carefully in front of you, all the while, focusing on a single frog set to complete their quest. It’s perfect.
Dogsred
I read the first chapter of this series today using the Viz site and was stunned by both the art and the compelling storytelling. It’s figure skating, it’s hockey, and it’s competition. A perfect shonen title, right? The first chapter of this book sucks you in and my gut says it gets even better after that.
Which doesn’t mean I don’t have opinions on design-stuff, but coming up with ideas from scratch? I’m not great.
Remember this???
You’re going to notice this pattern a lot as I started on this project
Call this tech debt if you wish, I’m just trying to survive out here, okay?
Listen, AWS is scary, okay?