Skip to main content

Setup for Learning React

All these instructions are for Windows 10.

  1. Download and install Visual Studio Code from Microsoft.
  2. Download and install node.js
  3. Download and install git-scm (this will also install git-bash)
  4. I’ll be using Chrome as my browser, so go to the Chrome store and install react developer tools and redux developer tools. Once installed, they will show up under Chrome’s developer tools (ctrl-shift-I).
  5. Set up SSH on Github and your Windows git-bash shell. See this post for instructions.
  6. Run VSC from within the SSH environment inside git-bash. The first time you run it, install the following extensions:
  7. Open the source code management (SCM) mode in VSC (Ctrl-Shift-G) and connect the VSC project to the repo’s clone URL and then select a location for the local repo. I chose to put all my repos under ~\Documents\src\git\heteromeles
  8. To start the Live Server extension, find the HTML file you want it to start serving, right click it, and choose the Open with Live Server options. This will open Chrome and/or a new tab and serve the file on localhost.
  9. Edit your HTML and JS files as needed – every time you save, the changes will automatically mirror live onto the opened tab.
  10. From git-bash shell:
    1. If first time, set up create-react-app from git-bash
      1. npm –version to make sure npm is installed
      2. npm install -g create-react-app to install
    2. Run create-react-app <appname> and the app will be created in directory ~/<appname>
    3. cd ~/<appname> to go to the created app
    4. code . to start up VSC for the app
    5. npm start will then start the app in the browser

Taking Notes

It’s not just scientists that need to take good notes in their lab notebooks. Every day as a software engineer you are figuring out code, determining processes, making decisions, and learning detailed concepts. How many of you are documenting all this, though, writing things down as you go so that others, and even your future self, can benefit from all this hard work?

I challenge you to approach things much more like a scientist or (real) engineer does and start keeping a lab notebook and also publishing your results. It can all be virtual, of course, and probably should be to be searchable and to maximize its visibility to others and across your devices.

Taking a course? Write down your notes. Figure out how to make something work? Write down your notes. Listening in on a meeting? Write down your notes. Working on a project? Write down your notes.

This might be one of the most important skills you can learn.

Your Product is More Than Your Service

As a software developer, it’s easy to forget you have customers. I mean, of course you know you have customers. But, without the personal interactions you get as, for example, a retail salesperson or a restaurant waiter, you may need to remind yourself that your seemingly abstract actions and choices have very real effects on people. Pay attention to times when you’re annoyed or disadvantaged by the choices of the software you rely upon, and resolve to avoid committing the same offenses against those that depend on you.

I was reminded of this advice this morning as I went to pull up the O’Reilly Media Learning site to continue my React class and all I saw was this…

On the one hand, fair enough. Live services occasionally need downtime and early on a Saturday morning is probably a reasonable time for it. But, notice there is no indication of when the service would likely be restored. They provide a hint that the downtime will be quick, but 2 hours later, with no updates provided, “…in a flash” seems simply disingenuous. This is clearly more than a simple platform restart. Speaking of updates, there are no warnings of upcoming maintenance, or even status messages of any kind, on O’Reilly’s social media feeds. I took their advice and tried pinging the support email, but you just get an impersonal robo-response and I doubt I’ll see anything further until the outage is over when I’ll get an equally impersonal “Thanks for your patience while we work hard to improve your experience. All services have now been restored.” response.

This is just crappy, lazy work from O’Reilly. It turns me from being mildly frustrated at, yet understanding of, the disruption of my plans to being actively irritated and thinking of ways to broadly share my negative experience.

Let’s take it to heart as a lesson in what not to do, and focus on how to be better developers. Make sure you build your muscles for communicating with your customers, using all the available mechanisms. Give them fair warning, multiple times and far enough in advance that they can act on it. Be transparent about what is going on, even if an outage is unscheduled or you don’t have a resolution ETA. Don’t suggest support channels if you’re not prepared to respond appropriately. Mostly, remember that your product is not simply the normal functioning of your service, but the small quality of life touches that go along with it and make the customer experience worth coming back to.

Connecting Visual Studio to Github

I learned in the past, that it is always best to connect workspaces to source control, even for experiments and learning projects. Sometimes it’s because you’ve screwed something up terribly and you need to retreat to a last known good; sometimes it’s because you want to continue on a machine that’s different from the one you were working on earlier.

So, before I started learning react/redux (or anything else), I wanted to get my IDE connected up to Github, where I keep my source code. I’ve done this plenty of times on Linux and Mac (which is basically Linux), but never had to do it on Windows. Turns out it is a bit rough, but possible.

I am using Visual Studio Code (VSC) as my IDE for this kind of work for now. That comes out of the box with a git SCM extension, but the extension does not support using SSH AuthN to a remote server like Github. I prefer to use SSH because that’s what I know and use on other OSes. To get that to work with VSC, I first start a git-bash shell from Git for Windows, whose SSH environment is configured following the instructions in a gist from github user bsara. I then simply start the VSC executable from the shell using the command code so it inherits the SSH environment and can work with Github.

Apart from the small annoyance of having to start a shell to start VSC, this seems to work great and I am now happily interacting with my Github account directly from VSC.

Learning at O’Reilly

As a very long time member of the ACM, I’ve learned there are a few perks that come with it. The best, in my opinion, is the Learning Center, which provides ACM members with complimentary access to a number of useful resources, including the full content at O’Reilly Learning (formerly, Safari Books).

For the price of an ACM membership (currently $99) you can get access a resource that normally costs 5x that (currently $499).

Viral Motivation

At work, we have transitioned to everyone working from home, both to protect employee health and to comply with the coronavirus quarantine orders currently in effect in California. I work from home a day a week anyway, so this has not been nearly as big a transition for me as for many of my coworkers. I still have a work week just like always, I just get up a little later than normal because I don’t have to commute. Daily life doesn’t seem quite so different to me in the current situation (modulo finding food and paper products…)

Nevertheless, reading so many articles and posts about people taking up new hobbies or getting round to long neglected projects to fill up their now copious spare time brought me round this morning to thinking about reviving my outside-of-work programming habits and learning.

Now feels like a great time to dive into the front end web tech that’s always been my main coding blind spot.

At the same time, I realize that I need to dust off and re-energize the various modern artifacts of a programmer – namely my code repos (GitHub) and my tech blog (this site).

I’ve done a bang up job at work creating and regularly updating similar artifacts at work, so here’s hoping I can do something similar IRL.