As of the writing of this journal, there are over 1.7 billion websites estimated online. Engaging nearly 4.5 billion users per day. Think about that, and then think about what life was like 30 or even 20 years ago.

It’s safe to say that the emergence of the internet mixed things up a bit. As a kid of the 80s, or the late 1900s as it is now referred to (how cringe is that), I’ve been enamored by its presence and function since 1999. It took me quite a few years to ask myself, "Where are all of these sites and apps coming from?". I’m not sure if I thought they just appeared or were mass-created in some factory like the burgers and fries in my Big Mac meal, but once I had the realization that everything had to be created and that virtually anyone could be a creator, I was well hooked. At the time, Myspace was a big part of this realization as it was really the first experience my generation had with personalizing a webpage or profile. You could upload images, change backgrounds, add music, write content, and send messages. Myspace may have been seemingly rudimentary on the face of it, as far as the user was concerned, but the thought and technology that went into making all of that possible amazed me. I can’t quite remember what my first personal website was like, I’m sure it was a travesty, but I have been building on those first experiences to this day.

coding in the mountains

The Journey

As a marketer and entrepreneur for the last 5 years or so, building and maintaining websites as a means of communicating with my target audience has been a daily endeavor. I naively considered myself a web designer, and even used the term developer, from the first time I set up a site on Squarespace. I had been building sites for my own personal use long before Squarespace, WordPress or Wix were ever available, but Squarespace was really the jumping-off point for me as a designer, as it all seemed so easy and the results looked better than anything I had ever made before. My first Squarespace site launch was in 2010 and was used as a landing page for the music production company I was running at the time.

Even though modern content management systems seemed lightyears ahead of the platforms I used in the early days, they all still felt hugely limiting. My ideas and designs always seemed to have me fighting with templates, looking for hacks, and alternatives to what was inherently available in the platform. I struggled like this through most of my professional experience. I was really trying to make the best out of what I was given. It wasn't until I started my own marketing company in 2020, that I decided a canned website built from templates, simply wasn't going to cut it. How was I going to stand out?

I had a lot of experience managing developers as subcontractors in previous ventures and knew how expensive that could get. It wasn't scalable for me as a small startup focusing more on client goals and revenue generation. So, what else was I supposed to do? Learn web development myself?

What started out as a perceived necessity quickly became an obsession. How had I missed out on this adventure for so long? Why had I been fighting templates for so long before coming to the realization that the only way for me to get the results I wanted was to learn to code myself? Well, the simple answer is, because IT'S A LOT.

the fundamentals of web development

Starting from the basics

On the recommendation of my good friend Mike, I started with some free courses covering HTML, CSS, JavaScript, object-oriented programing, modern web design and more. I'd participate in these courses available on The Gymnasium for the first hour or two of my day and attend to my business for the next 10 hours or so. It didn't take long before I was logging in after I finished work for the day too.

HTML, CSS & JavaScript make up the bulk of what you see online. It was described to me like this:

- HTML represents nouns (header, body, footer, etc.)

- CSS represents adjectives (color, size, position, etc.)

- JavaScript represents verbs (do this, get that, show this, change that, etc.)

I still think of these separate languages in the same way. You can also think of it as HTML representing the things you can see on a page; CSS representing how you see them, and their characteristics and JavaScript representing the things you can do and interact with on a page.

For me, the key to picking up new information has always been to put said information into practical use as soon as possible. With the HTML and CSS knowledge, I started tweaking templates I was using on client websites. Armed with enough knowledge to be dangerous, I felt like Thor wielding a mighty hammer and I absolutely loved it. But that was just the beginning.

Funny side note here, I pulled a bunch of noob moves in the early days like overriding previous CSS I had written with new selectors, not using design systems, and even asking Mike how to center a <div>. Don't do that last one, it's an annoying question that is covered at length in every forum on the internet. The lesson here is to make sure you do some looking before you start asking friends for help. Also, documentation for the languages is and always will be your best friend. It took me about a month to fully grasp HTML and CSS, but I have continued to improve upon that knowledge regularly as new situations and challenges arise in projects I am working on. As they say, practice makes perfect.

javascript coding

JavaScript

JavaScript is really where the action is. It's also the language that took me the longest to learn. Likely that's because it is the closest of the three to a true programming language. While I previously described it as the verbs of a website, it's so much more than that. It's like the brain. Capable of logic and data manipulation as well as interactivity. It is the brain that lives at the heart of modern web interfaces and applications. There is a lot to learn in vanilla JavaScript alone. However, once you start looking at all of the frameworks and libraries available, it can all get pretty overwhelming. For me though, it was a treasure trove with seemingly no bounds.

There are a ton, literally a ton, of resources out there for fledgling developers to learn JavaScript. That's no surprise as it is one of the most popular and in-demand languages in the industry. My advice? Start with this crash course on YouTube and then the accompanying full course on Udemy. These two courses and how they are laid out and taught by Brad Traversy gave me the best understanding of the language, what it's capable of and how to use it appropriately.

I recommend starting with the fundamentals. Learning the syntax, or how to properly write the language in a way that the engine can understand, should be your first stop. I started with ES6, the most current version of the language. I then moved to DOM manipulation or how to interact with the HTML and CSS. My goal was to create user interactions in most cases but there's a lot that can be accomplished by interacting with the DOM.

From there I moved on to data structures, manipulating data, interacting with APIs, and advanced logic. This part took me the longest to grasp and I am still learning new things every single day. It took me just under a year to get really comfortable with my JavaScript knowledge, and if I felt like Thor wielding a mighty hammer after I learned a bit of CSS, I began to feel like the wizard Gandolf, extremely powerful and knowing but proceeding with tact and a fair amount of wisdom.

behind the scenes of a react app

My thesis

My website, the one you are likely reading this on, is a sort of thesis for my self-education into the world of coding and web development. It’s a practical project representing all I have learned up to this point, and I am not too humble to say that I am quite proud of it. I took several big leaps building this website and really tried to push myself to see how far I could go in a short amount of time. I also wanted to deliver something that was functional for me. Something that served a purpose beyond fueling my code obsession. So, while a written blog in 2021 and the obsolescence of such a thing isn’t lost on me, I love this site as an outward expression of what lives inside my brain. And hey, you’ve read this far, so something must be working.

website wireframing

The frontend

I wanted a website that was sleek and modern but minimal at the same time. The importance of the design and implementation was critical to me, down to how users get around, and the speed at which the content is delivered. I also wanted the design to be scalable should I need to grow the site over time. For this reason, and because it was on my list of things to learn, I decided to use the popular JavaScript library React to develop the frontend.

Side note here, I do not recommend venturing into any frameworks or libraries before having a firm understanding of the fundamentals of a given language. I think a lot of new and ambitious developers do this and get in way over their heads.

React allows a developer to create reusable components that are programmatically displayed to the user as opposed to static HTML and CSS. Delivering components instead of static pages makes the site modular and adaptable, it also allows for creating more of an app-like experience for the user. Drucial.com is a single-page app or SPA and is (or will be depending on when you read this) a progressive web app or PWA. This means that all the interactions happen on a single page where content can be interchanged based on user input (much like Facebook, Twitter, Netflix, etc.). In addition, the PWA function allows the site to be downloaded to a user's device and run from the home screen. It also allows users to interact with the site even if they have no internet connection. While this may be overkill for a simple blog, it was a valuable learning experience and one I am glad I did.

Along with the React frontend, I wanted to implement a content management system or CMS. A CMS allows owners of a site to update content, pictures, pages, etc. without having to write code. This was important to me for two reasons.

1 - This is standard practice in the industry, and I wanted to have some experience here. As a web developer, you can’t just build an amazing website full of gorgeous, perfectly executed code and deliver it to the client without giving them the ability to manage the content. The process of fetching server-side data and implementing it on a page was new to me but an important stepping stone to mastering my newfound skillset. I decided on using Sanity for all my structured content as I found their documentation very straightforward, comprehensive and I liked the idea of being able to host the backend of the CMS on my own site. I also found several tutorials for setting up such an environment. While I would like to say this was an easy and enjoyable task, it did take quite a few visits to the docs to get everything working as I wanted.

2 - I wanted a way that I could write new journals and update content without having to open Visual Studio Code. The ability to write new content from my phone was a big motivator and the added benefit of scalability was a huge factor as well. Every time I write a new journal post, all the data is deployed to my website once published. A new page is created, links to the page are created and all the content on that page is programmatically invoked as a new entry without having to write a single character of new code.

git hub for developers

The Backend

Once I had a site I was proud of on my local machine, it was time to deploy the site. I already had experience with GitHub and Netlify from some previous projects, so I decided to use these two platforms for this site as well.

Before I get into the deployment, I do want to make a note about version control. While there are several tools available for controlling the progress of your site as it is being written and maintained, the industry standard is Git. I opted to go this route as again, the documentation is straightforward and I can manage my local repositories, commits, and version history right from the command line in VS Code. I can also commit to a remote repository (in this case GitHub) and deploy updates to my live site…all from my command line. Git saved my ass so many times working on this project. If you don’t know Git, take the time to learn it. It is worth its weight in gold.

GitHub, not to be confused with Git, is where all my projects make their debut online. I can connect my GitHub account to several deployment and hosting services on the internet seamlessly. This has become my preferred workflow.

Once all my code has been committed to a remote repository on GitHub, I set up a new Netlify site using a custom domain. From there it is pretty simple to connect the Netlify site to the GitHub repository and boom! Just like that, the website is live. There is a lot more to it than this, but for the sake of brevity (yeah right, on word 2300+…) I won’t go into more detail here. I will likely be putting up a few follow-up journals where I dive into some of these specific technologies and applications in the future as I really do like to nerd-out on this a bit.

Summation

I realize that for anyone reading all of this with no background in web development, it can seem confusing. The reality is, I felt that way too. That is why it took me so long, so many years battling with templates and limiting platforms before I decided to make the leap. That being said, learning to code has been one of my greatest and most enjoyable personal accomplishments to date. I plan to keep expanding this knowledge and learning more languages, digging deeper into algorithms and so much more. This is one of the few things I have found that can lock my focus. You know, start coding, blink, and it's 8 hours later. I love that. I love bending devices, and browsers to my will. I love solving complex problems. It’s a rush. Most of all, I like that it is a constant challenge. Like an enormous puzzle that forces you to think differently and handle complex scenarios that seem to expand beyond the 3 dimensions.

If you are of any age, I highly recommend you venture into this world, particularly if you like problem-solving. I think in the very near future some version of coding is not only going to be a highly desirable skill in the workplace, but it'll also be a necessity. As apps, webpages, and new forms of digital interactions continue to grow and evolve, the only way I see staying relevant in the technological future is by understanding what makes these things work and how to build them. I hope you are enjoying the site and III has been a pleasant experience! Let me know what you think.

-Drew