Web Dev Origins Story
15 January 2025
Around 2022 I had a feeling my brain was atrophying, my job wasn't much of an intellectual challenge, so as a way to keep my brain sharp, I started learning programming with C# and Microsoft's Beginner series.
It felt like rain falling on the soil after a summer drought.
After going through the whole thing, following along, I jumped to other youtube teachers, mostly watching other write code, without doing much building on my own.
I was knee deep in the dreaded Tutorial Hell, without even knowing at the time, that this was a thing. I eventually found out about Maui, a cross-platform framework to build desktop and mobile apps all in one codebase. Sounded fun so I tried to follow along those video tutorials, not really understanding what the tutor was even doing or why. A friend then told me of tutorial hell and pointed out "I need to build actual stuff, on my own". Which I did, I actually made a mobile app, my very own, a calculator. Maaaan! What a dopamine hit, I felt so good, the world was mine!
The world was actually not mine
Around that time I became a father and between that and a full time, shift-based job, I was hard pressed to find spare time. But my resolve hardened. The idea entered my head "Programming and building stuff feels so good, could it..Could it become my new job??" In order to try to make this new dream a reality though, I needed to get out of tutorial hell, I needed structured lessons and no aimless wandering around. But what?
Deus ex machina
As my shifts left me with no standard time to attend a boot camp, I found out about The Odin Project. It is a fully fledged open source curriculum, designed to help people become web devs. So around September of 2023, my journey at the hands of Odin begun.
It taught me HTML, CSS, some JavaScript and then moved on to the wonderful Ruby world! Ruby lessons culminated with the Chess game, a console version of chess! It felt like climbing mount Olympus... But then, I was done. Continued the learning trek with Ruby on Rails, which ended with building a facebook clone, featuring all my Rails knowledge, I even hosted it on Fly.io, showed it to friends and family.
Here was that feeling again! The world was mine!
The world was actually not mine.
I started sending my first applications at that point, but I soon found out how premature that was. After a another round of low, reality sunk in, back to the lessons, more JS, more HTML/CSS and finally React. The curriculum end project was a messaging app, Rails as back end api endpoints, React front end, featuring everything I've learned so far, authorization/authentication, data manipulation, api calls from React, backend / front end unit tests. It felt a bit of double work, but React kinda grew onto me, like an acquired taste.
Where to now?
19 January 2025
After building that end project, the rush of joy was back. I was aware by then, the world was not mine, but it did feel good! I resumed sending applications to job posts I found interesting. A void started growing in me. A realization hit me. Now what? So far I had a tangible goal, learn and go to the next page, the next chapter, the next framework. But the lessons are done. Where to now? I know! Let's create a Portfolio/Blog site!
Let there be Light! (and Dark)
After putting up a couple skeleton pages in plain html / css, finding a way to parse md files and display them in html, I reworked the whole thing into a React app, basically starting from near scratch, and then it hit me. Never so far did I try to implement light/dark mode in an app, so let's do it! Let's see what google has to say about it.
After half an hour of search, it came down to this. First I created a component for the switch. It is basically a checkbox input, it gets 2 props for the parent component. A boolean state, held by the parent component, and a callback function handleChange to be able to change state of the parent component. Then on said parent component, I have a data-theme attribute on the outer <div>, whose value is based on the boolean state. Add some css to define colors as custom variables and have them re-defined for [data-theme="dark"] and finally some css for the transition of the background color, to make it less jarring and....voila! Got my self a dark theme.
In all honesty, the hardest part, which took most time, was the css part. Making something look not-horrible is a struggle. I...rock? No..that's not it...Ah, got it! Let there be Rock!
Inevitable
28 January 2025
As my portfolio site develops, another though crosses the mind. "Shouldn't it be somewhat decent for small screens?" Ah, there, another one of these problems I have done everything in my power to avoid thus far, another enemy of old, the reviled media queries and responsive design. "You hear that, mr. Anderson?... That is the sound of inevitability!". With Agent Smith's line ringing in my head, I realized I couldn't run from it forever, eventually I would have to deal with it. I decided to make my stand today, this project.
Queries en-garde!
I've read about mobile-first design, desktop-first design. Since I mostly had my styles down already for desktop, I decided to work with media queries for mobile. To be honest, I don't see a big difference going either way. But where do I start? As with a number of problems I've faced in my dev journey so far, when a problem seems too big, or too complex, start small. For example, the Chess game for console looked daunting. Chess rules? Console board design? Jeez! Then, I calmed down. Ok Nick, I told my self, what do you know how to do? Well, getting user input was easy. I went ahead and coded that. Ok then, maybe my chess board is an 8x8 2D array. Ok, done. Now maybe a method to validate user input and transform it to array indexes. Cool, done. And little by little the project started flowing, just the edges in the begging, slowly getting fleshed out in a fully fledged game.
This is the way.
I started with reducing the screen size with the help of browser dev tools, to commonly used screen sizes, 760px for tablet or 380px for mobile, and fix the parts that broke. Then went ahead to shrink the screen to various sizes, see where the page broke horribly, and fix it with a media query at that size. Phew! Done! And you know what? It was even half as bad as I imagined it to be. We do that to ourselves, procrastination. Anyway, I'm just happy I sticked my proverbial flag on top of media queries hill!
What can change the nature of a man programmer?
3 March 2025
Great question asked by one of the best cRPGs ever. Learning on your own, you are blessed with many tutors. The advice that comes up the most is, after you learn the basics go and solve a problem you face with coding. Well I finally found a problem and worked on a solution. Here is the story:
The problem
At my current, non-programming job, one of my duties involves drafting documents for the Courts, formal statements, arrest documents and many other. What they all have in common is first the current date details, like day month year, day of week, time of drafting he document. More over, the documents usually include information of a person, either a witness or suspect. I can get most of the details from the person's ID document, but formatting the information the way it is required by the process can get tedious, especially in a busy day. Same goes for a vehicle's data.
The solution
Parsing the current date and providing the needed stuff was easy enough.
Getting a person's or vehicle's data is easy enough, hit the id number or license plates on internal systems and voila! But for my app, I needed that data, API access is out of the question, so...how? I know, find the needed info on internal systems, and mark the whole thing and paste it on my app. It would only need then a parsing function, to extract what was required and then output the way needed. Ok let's do it! One thing that quickly became apparent is the gaps! So split the initial input string to smaller ones, and then make an object with each word as key and the next as value. Then extract what is needed. Cool! Now let's do the same for vehicles!
Now let's help my users one step more, make a button for each output field (textarea element with readonly attribute) to copy the contents to the clipboard, navigator.clipboard.writeText(textToCopy) works fine, with a caveat: Works fine only for https pages.
Finishing touches: Since I intended the app to be a web page and have other's use it freely, it needed help buttons! I had just created a modal for a react app but was a bit of a hassle, so I browsed around for an easier solution. Kevin Powell to the rescue! A treasure trove of knowledge and really great guy, can't recommend enough! Anyway, long story short, dialog html element is a newer addition, it is a build in modal, just like that! A button to open that calls showModal() on it, (calling show() has different functionality) and then close() and you are set! One part of me was happy, and one part was sad because I didn't find out of dialog a few days earlier, it would save me from so much hassle! Oh well, at least I learned about createPortal hook.
Host it on GitHub pages and.... Done! Now THAT'S a good feeling. I had just solved a real problem with programming skills. And as a kicker, my solution helped a bunch of other people at work. It felt like a coming of age ritual, marking my passage from programming adolescence to young adulthood. Now I need more problems to solve!
It turned out, there was more joy in store! Quite a few people liked it, a number of them even messaged me with suggestions. It meant they had real interest in it. People, real people used my tool! Woohoo!! I couldn't be happier for my work. I even talked one of them to into learning programming. In my book that is success! Since then, I implemented a lot of the suggestions I received, and using it myself in day-to-day work, identified and added more functionality to it, made it, overall, more robust. What is next?!