How to think like a programmer

What is HTML All The Things?

HTML All The Things is a web development podcast and discord community which was started by Matt and Mike, developers based in Ontario, Canada.

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

What's This One About?

This week, Matt and Mike discussed how to think like a programmer. When you're learning to code you may think that syntax is the most important thing since it is so hard to memorize. The problem with memorizing syntax is that if you ever need to move on to a new programming language, you'll have to start memorizing all over again. Instead, Matt and Mike believe that learning programming concepts is more important than syntax, as they allow you to apply that conceptual knowledge across any language you come across - it lets you problem solve as a programmer.

Show Notes

When you embark on your learn to code journey, the number one thing on your mind is probably the syntax of whatever language you've chosen to learn
You'll learn about ifs and loops, how to declare variables, what plugins/tools are popular, how functions work, and much more
brewing silently in the background
- Problem 1: Syntax is only applicable to the language you're working on, so if you ever need to use a different one (and you definitely will if you're a full stack dev, or keeping up with the times in web dev).
  - Solution 1: We need something common between languages that lets us use syntax in a more general way. More about concepts and less about specific code formatting for a specific language
- Problem 2: It's very difficult to memorize syntax without a purpose. It's easy enough to memorize how to make if statements, for example, but how long will you remember the formatting if you don't use them frequently. Should you even be memorizing the ins and outs of a language's syntax?
  - Solution 2: We need a reason to be coding up a project. More of a reason than just to practice syntax. If we need to make a navbar that is controlled by logic, then conditional statements are a natural need and should help you remember the formatting easier
If you go to traditional school (college, university) then they will commonly administer these solutions via teaching programming concepts (ie algorithms) instead of specific languages
If you go to something like a bootcamp, they'll commonly have less concept theory, but will teach you more via doing projects instead of just syntax memorization
When you're self-teaching it can be difficult to determine the path forward.
- Do you just memorize how to write code in your preferred language?
- Do you just learn concepts?
- How about starting projects? But how do you start them if you have no syntax knowledge?
Regardless of traditional, bootcamp, or self-teaching the general idea is that you need to be able to solve problems. Solve problems in a way that a computer can execute, and by association, in such a way that you can code up for a computer to run
- This is commonly referred to as thinking like a programmer
What does it mean to think like a programmer?
- Programmers break projects down into smaller parts, commonly these smaller parts have even smaller parts underneath them
- Programmers know how to problem solve at various levels. For example, a web dev can solve a problem thinking specifically how it would be written in html/CSS/Js (the importance of syntax), or they can solve a problem at a higher level, which allows it to be applied to virtually any applicable technology (arguably more valuable than understanding any syntax)
- Programmers can modularize code, making code snippets usable in multiple instances, without having to code up a new version of something (ie an image lightbox) over and over again
- Math is helpful, but isn’t necessarily needed for some roles (ie a website UI doesn’t usually require much math and rarely needs complex math)

Example 1 - Navbar + Hover

Make a navbar with several links listed horizontally on the screen. One of the links has a sub-list of links that show up vertically when the mouse hovers over it.

Matt’s Breakdown
- The first thing that comes to mind is that each link is an element and I need to have them horizontally aligned, so I’ll need a wrapper around them so that I can flexbox them
- Each of the links will have two classes, one for styling and the other for active styling (when you’re on the page that, that link navigates to) even though this isn’t apart of the problem, it’s so commonly used I may as well set it up
- I’ll also setup an ID for the one link that needs to have the hover affect applied to it
- Similarly with the horizontal links, I need another wrapper that wraps up all the sub-links that appear on hover (so I can flexbox them), and I may even want an additional wrapper on the link that has the hover affect so that I can keep the vertical links within that wrapper and position them relative to that link wrapper div
Mikes Breakdown
- Id create a visual representation with a design (using figma)
- HTML structure would be using a <nav> using flexbox row and a div container for each link.
  - In the link there would be a <a> tag for the link as well as a potential <ul> which would be hidden by default
- I’d be using tailwind for this to prototype quickly
- Using a hover class I’d switch the nested <ul> from display none to display flex to activate the dropdown sub-list menu on hover