Intro

Hi! My name is Elmer Camargo, I'm a Data Scientist over at the Department of Public Health and have been there for a bit over a year now. I've always been the kind of person to follow my curiosity and for the last few months I have been teaching myself web development. I decided to do this for a few different reasons. One, I was getting paid for it since I was helping maintain the vaccination dashboard, and two was that I had a conversation with a recruiter a while back ago that thought that people with a background in data science can only work in data science and would have difficulties working as a software engineer. To be fair, I could understand where they were coming from and why they would think that from a recruiters perspective, but I strongly disagree with the statement and absolutely believe that anyone with a good foundation of programming, critical thinking skills, and willingness to learn can be an excellent engineer. Really what it comes down to is being able to pick the right tool for the right job and knowing why its the right tool.

So all that to say, yeah im a data scientist, but I can do other cool stuff too! I went to school to do stuff like whats on my old portfolio page (my new portfolio page is a work in progress btw) but I'm fully capable of learning other skills. I'm interested in web development and am picking up some HTML/CSS/JS skills right now but who knows if I end up getting more interested in VR/AR I'll likely pick up some C, C#, or C++.

And so for the last few months I've been chugging away at The Odin Project (TOP)! I saw it continuously be recommended on reddit and decided to give it a try and share my journey. I'm finishing up the first half of the program and below are the topics that have stood out to me so far.

Programming Mindset and The Process

Theres a lot to unpack about describing the mindset to be a programmer and the proces of development / self learning. The Odin Project has a fair approach on talking about the journey and some of the common pitfalls along the way that a lot of other tutorials and courses neglect. Hands down the 2 best articles linked by TOP are Why Learning To Code Is So Damn Hard and Deliberate Programming Practice.

The image that I think captures the snapshot of the programmers journey is one from the first article linked because it resonates so much with what I experienced. I clearly remember around the time of my first job as a software engineer being introduced to production code how incredibly complex it was and how far I was to understanding it even though I was doing relativley well in all my classes. It wasnt until my second job that I felt that upswing and started understanding things.

The second article talks about the idea of deliberate practice and how it applies to programming. This post also resonated with me a lot because it absolutely hit the nail on the head describing how a person can stagnate and get stuck doing the same thing over and over again if they don't continually challenge themselves. HOWEVER! After having been working for the last 10ish years in a data field, be very careful where you put your time and energy. Yes, its important to stay hungry and to be on the grind learning things, but if you're going to be staying at the office until 10pm as an employee, I hate to tell you, but youre being taken advantage of. I'd also add that, learning things outside of programming has been such a relief for me and at times non-advertantly helped me be a better programmer. I can atest to let you know that guitar and the weightroom have taught me that patience and repitition gets you results.

HTML and CSS

At first glance HTML might not be the most interesting topic in web development, but after digging around other websites using dev tools, its crazy to see how its manipulated to create such awesome sites. Getting started with it is cake, but when you start including CSS and JS into it, it makes you start thinking strategically about how you're designing the site. One HTML tag that is on my list to really get down is the <pre> and <code> tag. I really wanted to include some code snippets into this blog post but had trouble getting it to actually look good.

console.log("helloWorld")

See what I mean?

Hence, my next few challenges is to create something more like this. It's crazy to me how complex some simple code snippet tags could be, and more generally, how much crazy shit you can do with CSS. I'm not super keen to be jumping into CSS, but it is something that I want to work on, especially now that there are advancements in it with tools like SASS and SCSS which I have absolutely no idea how to use, but am sure I can figure it out.

Dev Tools

I mentioned dev tools in the last section and I think this has been one of the best skills I picked up since starting TOP; Its really incredible how much info you can pick up with using dev tools. I mentioned how I wanted to implement a code snippet view from a previous article and wanted to show you how I used dev tools to make a decision on if implementing it were feasible for time I wanted to release this.

From the image, you can see there quite a bit going on. The first thing I notice is that the parent <pre> tag has 2 children and both itself and its children their own classes as well as one havinga flexbox display. Digging into it further, it looks like each line of code in the json snippet has its own <span> tags with one being the key and the other being the value. It could be that this comes from an external library that but the fact that the HTML and CSS have a breakdown like that for a seamingly simple thing is astounding.

The 3 other features of dev tools that I got to mess around with were the networks, sources, and performance tab. I got to use these on the job while working on the vaccine dashboard site: The network tab is a great tool to see the load times for different portions of the site and helps you narrow down where you can improve, the sources tab helped me debug some JS code I wrote while working with the code base, and the performance tab helped the team further identify where things were slow and inaccessible. I am fully aware that I didnt get to use all the tabs to the best of their ability which gets me excited to discover more about it.

JS and TDD/BDD

TOP wasn't my first time working with JS, (my first time was actually with using the Google Earth Engine) so it wasn't too difficult to dig into it and find resources on my own. I should mention that TOP does a fair job introducing JS, but frankly, there are better beginner resources on youtube that make it easier. But then again, since this wasn't my first time picking up a programming language I am likely being a little too nitpicky with how TOP introduces it. Other resources that I referenced while learning more about JS came from the MIT CS50 Channel and the Codesmith Channel.

Where TOP lacks in JS introduction, I think it makes up for by introducing test driven development (TDD). I think TOP was the first beginner programming tutorial resource that brings up testing while learning JS. My first run in with testing was at my first internship with Northrop Grumman using the Google Test Framework. My manager mentioned I should look into using TDD while there, so I did. Did I know what it was when I started? Kinda, not really. Only a few years later did I actually start understanding why people use it and how it can be used to better frame the way you write and design code. While reading up about it during TOP, I was intrigued by it so I looked some more into it and discovered behavior driven development (BDD). I am a big fan of it. It makes so much sense to me now and I'm sure there is still more to learn about it. From what I gather of it so far is that as programmers we need only to write code to the point where a behavior is confirmed. Testing should capture the designs outcome and not just test how it accomplishes a task. Overall, testing is something I'm starting to really dig and am glad TOP gave an awesome intro to it.

Frameworks (Backend + Frontend)

The “backend”, meanwhile, denotes all that goes on “behind the scenes” on web servers to make the user experience possible. As long as it can take in an HTTP request and spit out some HTML, you can probably put it on a server somehow. has been one of the simplest and best introductions to what the backend for a website is. There is more to it, but it really comes down to three things: a server, an application, and a database. A backend framework just makes these pieces easier to interact with one another. I did some extra research to see what some popular choices are and to my surprise I've actually used the Flask framework for an assignment in college, see here; please excuse my lack of comments and clarity, I wrote it when I just started getting comfortable with coding.

The "frontend" is, by default, not the backend. So anything that you actually see on a website that interacts with the backend. I've gotten the hang of using HTML, CSS, and JS, but a lot of front end web development now uses frameworks to get an upperhand on developing and make it easier to reuse pieces of websites called components. I don't have an instinct on what a good framework is since I haven't used one yet, though I will be for the second half of my web development coursework, but to my knowledge they help with making components, reusing them, and fitting them into single paged applications. The one I'm planning on getting comfortable with first is going to be React since it is widely used and there are lots of blogposts, videos, and conference talks about React.

Next Project

I'm likely to take a small break in side projects since I am applying to Masters programs. But! I am planning to slowly finish up the first few checkpoints the second half of TOP, then transition to the Full Stack Open course since I've been seeing that they offer a better intro to React than TOP does. I do want to write more project summaries like this so I might do a small fun one every few months or something, but we shall see! Thanks for reading!