So you want to become a “coder”
posted 2023.03.13 by Clark Wilkins

This article, written for my son Sean, is a 2023-adapted version of my thinking on how to approach training to become a web application developer, something I have been doing professionally for more almost 30 years. I emphasize the 2023 aspect, because, quite frankly, everything has changed with the advent of ChatGPT3. I am certain that it will no longer be necessary to master the backend mechanics of Javascript and REST-based APIs, as was necessary in my own experience, because you can, for the first time, get very high quality and usable advice on basics. The path I am going to describe here is how to become a developer — not a code mechanic (aka “coder”).

Step 1: learn the basic constructs: Javascript and CSS

There are two basic areas you want to focus on before you branch into learning any framework (such as React which I will discuss below).

For the entire “backend”, and again for React, you have to have a basic understanding of Javascript. I recommend the excellent Ultimate Javascript Series. Work through the videos and tutorials here carefully, because (almost) all of the documentation you are going to deal with is going to use these structures (with some variation for TypeScript, JSX, etc.) Here, you want to focus on the following:

  • variable scope (global vs. block)
  • ES6 syntax
  • Object methods, particularly mapping and iterating objects
  • asynchronicity, especially resolving promises before returning results

Second, you need to have a good grounding in how to format your displayed results. I would recommend another of Mosh's courses. (Disclaimer: I never viewed this content, having learned organically over decades.) Here, you want to focus on:

  • responsive CSS so you can build pages that layout well on phones and on larger screens
  • CSS floats, padding and margins
  • CSS3 flexbox methods (critical even if you use a framework like Bootstrap (recommended) to get a nice grid-based layout
Step 2: learn how to make a basic REST-based API

This actually has two parts: managing a database to store data, and an API server to interact with that data. I prefer to use PostgreSQL for my storage, and Node/Express for the API server. You might be able to get a hosted setup for using both of these services, but it's much easier if you get an installation on your own laptop — in that you can run a “sandbox” locally and tweak/test things anywhere you want to work. Mosh's course goes over the setup pretty extensively.

  • Learn how to separate functional groups into separate files (routes).
  • Abstract reusable functions into a separate, callable file.
  • Do as much pre-processing as possible in the API (sorting, string cleanup, etc.) before returning results.
Step 3: learn a UI/UX framework

I spent more than 20 years in PHP, writing all my own interface code, but I am now solely working in Node and React. Again, Mosh Hamedi has a great course on starting with React 18 that will get you going. The thngs I would really emphasize as important are:

  • Refactoring code so you have smaller, tighter components that are easier to manage
  • Using higher-order components or some other methods to pass values down the component tree
  • Handling asynchronous data properly so your page components stay in sync
Now learn to work with less actual “coding”

With the current generation of AI, especially ChatGPT3, a lot of the burden of lower-level coding can be eliminated now. Once you have the pre-requisite knowledge (above) and can ask an intelligent question, you can work out “difficult” coding questions via a simple question and answer session with the AI.

For example, I asked “How do I sort a Javascript object by keys”, followed up with “now reverse sort it”. I got this loop which I was able to use in my code, almost verbatim.

const obj = { c: 1, a: 2, b: 3 };

const sortedObj = Object.keys(obj)
  .sort((a, b) => b.localeCompare(a))
  .reduce((acc, key) => {
     acc[key] = obj[key];
    return acc;
  }, {});

console.log(sortedObj);

“Conversations” like this are now saving major time in my development, and they compensate for all of the little, but important, nuances I missed when learning Javascript. The point here is to learn enough to know what to ask the AI, let it do the “grunt” work, and focus on the user experience (and equally the UI performance). For me, going into my fourth decade of web development, this is the single largest game-changer (React is a close second), and I strongly encourage anyone wanting become a “coder” to take this path, and focus on the parts of development that AI can't do, like creating a smooth, beautiful, and intuitive user experience. Anything mechanical, like writing code as shown above, is already a dead career, and you don't want to invest any time in it.

POSTSCRIPT

  • I spend no time here discussing where you host the Node/Express and React server, or on the database. That's a deeply technical subject with a lot of branching options. FWIW: my development environment is running Apache (web server), PostgreSQL (database), Node/Express (API), and React (GUI) locally on a MacBook Pro. Whatever you do, please get some qualified help, as Linux servers are a tough thing to learn how to set up.
  • My brief experiments with using ChatGPT3 to design API schemes for things such as automatic image compression of uploaded files in React was not as wonderful. Hopefully, the AI will get better and more up-to-date on what's compatible and not (especially WebPack 5 and the loss of polyfills).
  • Apologies for the large sections I skimmed over here. This is not meant to be a comprehensive road-map.
  • Yes, I “throw shade” on PHP above, and yet this blog was constructed using it. The reason is that this is a very simple environment where I can add a hand-written HTML document that automatically flows into the blog. Don't use a bazooka to kill a fly. Overkill at best delivers little improvements, and at worst, gets in the way of a simple solution.
  • This is dedicated to both of my sons, Jack and Sean, who are dedicated to making beautiful things. Love you both.