A Coder’s Journey, Chapter 2: Trials in the CSS Swamp
When I started this blog I drew an analogy between my Journey on the Road to Code and the Hero’s Journey, like I was on some kind of grand adventure. A character in my own movie. I still am, we all are, but at that time I was still flush off of answering the Call to Adventure and everything was new and fun and looking rosy. But it’s not much of a movie without problems, doubts, and setbacks to create dramatic tension, and not much of a Hero’s Journey without Trials and Challenges. The road map is clear: No Boons, No Return, without first surviving a trip through The Abyss/Innermost Cave. The Abyss will test your character and reveal your shortcomings. Not everyone will make it back out of the Innermost Cave. You can’t really know someone (or yourself) until you see how they (or you) respond to adversity, and without this self-knowledge there can be no path forward on the Hero’s Journey. And that’s what I found this past two weeks when, after starting out with good weather, a level road, and the wind at my back I finally, inevitably, lost my way and had my first real trial/adventure in what I will call the Confusing and Humbling Swamp of CSS.
The project in question was my React Bloc Jams music player. Here’s a link though it is temporary and will someday move. It took just a few days for me to finish the React coding and I was feeling full of myself and my coding chops. I figured a day for styling, thinking in my ignorance and hubris “It’s only CSS!”, and I’d be on to my Bloc Chat project with a hearty pat on the back from myself for being such a productive and gifted coder who didn’t “need” to use a framework or Sass or anything else… Well, that was two weeks and roughly 100 hours of screen time in the Confusing and Humbling Swamp of CSS ago, and as you can see it still looks like crap! For sanity’s sake I’ve had to move on to something else in the meantime, but as the goal was something of professional quality I can display in my portfolio I obviously still have a lot of work to do though it will have to be with a MUCH different approach than I have employed thus far.
I am embarrassed to admit that it took that long for the results I got, and even more embarrassed that I didn’t reach out for any formal assistance from the Bloc technical mentors during that whole time. I mean I was all over Google and Stack Overflow, but it’s just not same as 1:1 real time communication with an expert on your exact issue. Not asking for help when I need it is a failing of mine that makes a lot of things in my life take longer than they need to, so I told myself going in I would not go more than 30 minutes on my own without reaching out for assistance from the technical mentors available on the Bloc Slack channels. I did meet with my personal mentor while all this was going on and she advised me that I was not in the Bloc Design Track so save myself the agony, find a site I wanted to model, and use their CSS. Unfortunately I could not find any good matches and failed to translate what I found into something that would work with how my app was laid out. What chaps my hide the most is that I knew my problem seeking help, had a plan to address it, and STILL managed to go 100 hours without invoking it and seeking technical help is really bothering me.
Looking at the Hero’s Journey cycle we see helpers and mentors present themselves when they are needed and their assistance is key for the Hero(ine) in overcoming their obstacles. To not take help when it’s available is contrary to the story I am living and just disappoints me to no end I let it happen to myself. I am on a strict monetary and temporal budget and this adventure in the CSS Swamp really cost me. In my defense each day I would start out, make some progress, feel like I had a plan to address my problems, that I was close…, only to have things get increasingly out of hand by the end of the day to the point I would have no idea what was going on anymore and nothing seemed like it was working so I would scrap it with much yelling and cursing. Each day was almost like starting over, and over, and over. Fool me once, shame on you. Fool me twice shame on me. Fool me for two weeks, well, I have an issue obviously.
The styling had begun well. I started with a display: grid for a standard header/sidebar/content/footer layout, but my troubles began when I tried to put the player bar in the footer on the album page. I spent a quite a bit of time, first using CSS and then futzing with my JSX, before I realized that the way I had coupled the player bar component to the album display component prevented me from rendering them separately. Whichever HTML element held the album info and song list is where the player bar had to go also. Okay, so design compromise number one. I could have refactored everything but it would have been a lot of work and mean putting the player bar in the footer on two pages it didn’t need to be and probably shouldn’t be just to have it in the footer on the one page I did want it. That’s not React’s fault (maybe a smidge), but really my ignorance and failure to plan. You really need to plan out your React app logic and UI from the very beginning, lesson learned.
But my frustrating journey through CSS Hell was just beginning. My biggest frustration came from the insane number of times I would make a change in my CSS but not see any resulting change in the document. Using Chrome DevTools I was able to see which CSS styling elements were being applied where. I could see sometimes that my CSS was being overridden by the default user agent styling and using a reset.css made no difference in browser behavior. In many many more inscrutable, incomprehensible (to me) cases I would add some CSS and it was just not being picked up by the browser at all. Not as a class, not as id, not on a different element, nothing I did would make the CSS I had typed show up in the document and in DevTools. I had the same issue with my media queries. Some screen sizes would work but then others just would not show up in DevTools or on the document (no typos I swear! wink).
After the frustration of not seeing my CSS work at all my next biggest frustration was seeing my CSS work but just not at all like I intended. After my initial use of display: grid other attempts to use display: grid, display: flex, display: inline, etc. seemed to produce random and unexpected results, sometimes even the exact opposite of what I thought would happen. Again I also had problems with my media queries making small changes for some sizes and HUGE changes for other sizes, particularly on the display of font sizes, that were difficult and in some cases impossible to normalize. On the subject of media queries I found them in general quite maddening. I started with a small iPhone 5 sized screen and progressed upwards in size only to find that once I was done with the larger sizes the display of smaller sizes had changed? That’s supposed to be impossible right? I would see in Chrome DevTools that media queries would not kick in at the exact pixel size I specified, for example the 600px to 900px range would kick in at a width of 752 (according to Chrome DevTools), and the 900px-1200px range not until 1152px!?!? It was also pretty bad at showing a consistently sized image in the Device Tool Bar.
So where do I go from here? Do I give up on my project? Since I can’t even style an app do I give up on trying to be a developer altogether?
I spoke with my mentor again last night about all this. Basically, failure is part of the job description so you just can’t stop. Coding can be quite the up and down experience. As noted, I went into the styling exercise thinking that I rocked and was great. Right now I feel full on impostor syndrome. I will eventually again at some point feel like a gift to the programming world before feeling like an incompetent dunce, over and over.
My first challenge in getting out of the Swamp is to stop dwelling on the feelings of regret over time spent and embarrassment over the results. Learn what I can from the experience, use that knowledge to improve, and move on. I will move on to something else for a while and we’ll come back and revisit my player styling again after a while. So now I’m just trying not to dwell on how foolish I was to let it go on as long as I did and for not availing myself of all the help and support I could bring to bear on it. I simply cannot let that happen again, and won’t stop trying. While in some respects CSS is still totally a mystery/black box to me where I cannot be sure of what inputs will produce which outputs, I really did learn a huge amount wandering around in the swamp I would not have learned if I had just gone the Bootstrap route.
So I will close by offering my most sincere respect for all those CSS wizards out there who are able to make everything look so good! I have been severely disabused of my unfounded notions on the depth and breath of CSS’s scope and power and importance. I understand know why Bootstrap and Sass exist. CSS is a programming language. There, I said it. I’m going to get some more traction on the Bloc Chat app I am working on now, apply what I can of what I learned about myself and CSS on this project, then bring to bear what I learned on the chat project to bear on the music player when I come back to it. Continuous Process Improvement. Always Be Learning. I’m pretty stoked for this chat app project as we will be using Firebase on this one and I’m looking forward to working with databases again, although this will be different from the relational databases I am used to using. I’m excited and it should be fun. Stay tuned!
