DEV Community: David Newberry

Pygame Snake, Pt. 6: Improving Control of the Snake

David Newberry — Sun, 03 May 2026 08:11:19 +0000

Currently, there is a subtle but real flaw in the controls for the game. If the player presses two keys in quick succession, only the last one is registered -- one, or more, are simply dropped.

You can see the effect easily if you lower the framerate to something extreme, e.g. 1 (i.e. 1 frame per second) by changing the clock.tick(20) line to clock.tick(1). If you quickly press down and then right, only right will be registered.

Thankfully, pygame makes it revlatively easy to fix this.

Inside the while loop -- i.e., for each frame -- we want to see if there are arrow keydown events to consume. If so, we want to move a step in each direction pressed. If no keydown events have occured, the snake should continue in last direction it was sent.

Above the for event... loop, add add a line to create an empty list:

    vels = []

Then, inside the following conditional, instead of setting val = ..., add each arrow direction vector to the list:

            vels += [key_vel[event.key]]

Everything from screen.fill("white") until (not including) pygame.quit() will be indented; because just above that, you should add:

    for vel in vels or [vel]:

And that's it. When I first wrote the code I thought it was perfectly reasonable, and then after a while I got a bit confused. I lost track of vel being initialized at the top. It is both a global variable and a loop index in the above for loop. And it appears as part of the for loop's in expresion: or [vel], which provies the current value of vel if vels is empty. Its use as the for loop variable also has the effect of leaving vel with the value of the last element of vels when [one or more] arrow keys are pressed.

Full code as of now:

import pygame
import random

W = 30
H = 30
S = 20

# pygame setup
pygame.init()
screen = pygame.display.set_mode((W * S, H * S))
clock = pygame.time.Clock()
running = True

# game setup
snake = [pygame.Vector2(W / 2, H / 2)]
vel = pygame.Vector2(1, 0)

key_vel = {
    pygame.K_RIGHT: pygame.Vector2(1, 0),
    pygame.K_DOWN: pygame.Vector2(0, 1),
    pygame.K_LEFT: pygame.Vector2(-1, 0),
    pygame.K_UP: pygame.Vector2(0, -1)
}

grow = 3

def place_food():
    global food_pos
    food_pos = pygame.Vector2(
        random.randrange(W),
        random.randrange(H)
    )
    while food_pos in snake:
        food_pos = pygame.Vector2(
            random.randrange(W),
            random.randrange(H)
        )

place_food()

while running:
    # poll for events
    vels = []
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False
            break
        elif event.type == pygame.KEYDOWN and event.key in key_vel:
            vels += [key_vel[event.key]]

    for vel in vels or [vel]:
        # fill buffer with white
        screen.fill("white")

        new_head = snake[-1] + vel

        if new_head.x < 0:
            new_head.x = W - 1
        if new_head.x >= W:
            new_head.x = 0

        if new_head.y < 0:
            new_head.y = H - 1
        if new_head.y >= H:
            new_head.y = 0

        if new_head in snake:
            print("hit self")
            running = False
            break

        if new_head == food_pos:
            grow += 1
            place_food()

        snake.append(new_head)

        if grow > 0:
            grow -= 1
        else:
            snake.pop(0)

        for dot in snake:
            square = pygame.Rect(dot * S, (S, S))
            screen.fill("black", square)

        square = pygame.Rect(food_pos * S, (S, S))
        screen.fill("green", square)

        # copy buffer to screen
        pygame.display.flip()

        # limits FPS
        clock.tick(20)

pygame.quit()

Pygame Snake, Pt. 5: Adding Food

David Newberry — Sun, 03 May 2026 07:02:39 +0000

Our snake game only has one vital piece missing: food.

Up until this point, there has been no randomness. Now that changes, so start by adding import random at the top of the file.

Now, just above the while loop, we need to create a function that will set a new, random food location. We'll introduce a new food_pos (global) variable, and set it to a new Vector2 object we create with random x and y:

def place_food():
    global food_pos
    food_pos = pygame.Vector2(
        random.randrange(W),
        random.randrange(H)
    )

The variable has to be declared global inside the function, or else Python would create a local variable that exists only inside the function, and then disappears. By using the global keyword, we let the function know to create or update the variable in the global namespace.

This is a good start, but it's not quite done. There is a chance that it will randomly choose a position that the snake occupies. That shouldn't be allowed. So we could say if food_pos in snake: ... and set the variable to a new random location. But it could, however unlikely, again choose a location that the snake is occupying. So, instead of just using an if statement, we can use a while loop:

def place_food():
    global food_pos
    food_pos = pygame.Vector2(
        random.randrange(W),
        random.randrange(H)
    )
    while food_pos in snake:
        food_pos = pygame.Vector2(
            random.randrange(W),
            random.randrange(H)
        )

place_food()

Note: after the function is defined, it is called to set the position of the first food on the board.

Now that the game picks a random food position, we can check to see if the snake is going to get it. Add this check under (or above, it doesn't really matter) the one that checks if the snake is hitting itself.

    if new_head == food_pos:
        grow += 1
        place_food()

And finally, under the for loop that draws the snake, add these two lines to draw the food on the board:

    square = pygame.Rect(food_pos * S, (S, S))
    screen.fill("green", square)

That's the basic game, but there are lots of modifications you can make, such introducing different ways to steer. At this point the player can go outside the bounds of the board. It would make sense to either have this result in death, or wrap-around. To allow wrap-arond, add this code after new_head = ...:

    if new_head.x < 0:
        new_head.x = W - 1
    if new_head.x >= W:
        new_head.x = 0

    if new_head.y < 0:
        new_head.y = H - 1
    if new_head.y >= H:
        new_head.y = 0

Full code at this point:

import pygame
import random

W = 30
H = 30
S = 20

# pygame setup
pygame.init()
screen = pygame.display.set_mode((W * S, H * S))
clock = pygame.time.Clock()
running = True

# game setup
snake = [pygame.Vector2(W / 2, H / 2)]
vel = pygame.Vector2(1, 0)

key_vel = {
    pygame.K_RIGHT: pygame.Vector2(1, 0),
    pygame.K_DOWN: pygame.Vector2(0, 1),
    pygame.K_LEFT: pygame.Vector2(-1, 0),
    pygame.K_UP: pygame.Vector2(0, -1)
}

grow = 3

def place_food():
    global food_pos
    food_pos = pygame.Vector2(
        random.randrange(W),
        random.randrange(H)
    )
    while food_pos in snake:
        food_pos = pygame.Vector2(
            random.randrange(W),
            random.randrange(H)
        )

place_food()

while running:
    # poll for events
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN and event.key in key_vel:
            vel = key_vel[event.key]

    # fill buffer with white
    screen.fill("white")

    new_head = snake[-1] + vel

    if new_head.x < 0:
        new_head.x = W - 1
    if new_head.x >= W:
        new_head.x = 0

    if new_head.y < 0:
        new_head.y = H - 1
    if new_head.y >= H:
        new_head.y = 0

    if new_head in snake:
        print("hit self")
        break

    if new_head == food_pos:
        grow += 1
        place_food()

    snake.append(new_head)

    if grow > 0:
        grow -= 1
    else:
        snake.pop(0)

    for dot in snake:
        square = pygame.Rect(dot * S, (S, S))
        screen.fill("black", square)

    square = pygame.Rect(food_pos * S, (S, S))
    screen.fill("green", square)

    # copy buffer to screen
    pygame.display.flip()

    # limits FPS
    clock.tick(20)

pygame.quit()

Continues in Part 6

Pygame Snake, Pt. 4: A Snake That Grows

David Newberry — Sun, 03 May 2026 06:43:40 +0000

In Parts 1, 2, & 3 we have put together everything, it would seem, besides the actual game. But now we come to the point.

The first set of changes we need to make involve the snake. Instead of a single dot variable, we'll need a snake list. We'll also introduce a variable to allow the snake to grow.

First, modify this line:

dot = pygame.Vector2(W / 2, H / 2)

snake = [pygame.Vector2(W / 2, H / 2)]

Just above the while loop, introduce the new variable:

grow = 3

Inside the while loop, we'll make several changes.

A quick conceptual note: Previously, there was a single ("scalar") variable, dot. The animation worked by updating the x and y attributes of dot (via the code dot += vel). Now, the way the animation works will change slightly.

Each frame, the location where the head of the snake should move to in the next frame is calculated and stored in a variable called new_head. This location can be checked for conditions such as the snake running into itself, or into food, e.g.

As long as the user hasn't hit a game-ending condition, this new head position will be appended to the snake list. Then, under normal conditions, the first element is removed from the list. This (append and pop sequence) drives the animation.

For a single dot, this would produce the same effect in a somewhat convoluted way. But it makes it easy to let the snake grow -- simple skip the pop step.

Replace dot += vel with the following:

    new_head = snake[-1] + vel

In Python, negative indexes start from the end of the list, with -1 being the last item, -2 second to last, and so on. It's particularly quick and handy way to reference the last item in the list without having to resort to calling len().

To check whether the snake is going to run into itself, under the above line you can add the following if statement:

    if new_head in snake:
        print("hit self")
        break

And under that, perform the append step:

    snake.append(new_head)

Next comes the pop step, which depends on the value of grow. It's initially set to 3 in order to easily start the snake length at 4 (e.g.), without having to specify the location of each snake segment in advance.

Under the above code, add the following:

    if grow > 0:
        grow -= 1
    else:
        snake.pop(0)

Finally, and crucially, the code needs to be updated to draw the whole snake rather than a single dot. However, it will still drawn piece-by-piece, which can be exploited in updating the code.

Find the two lines of code that draw the dot.

    square = pygame.Rect(dot * S, (S, S))
    screen.fill("black", square)

Add this for loop above those two lines, and then indent them. The result should look like this:

    for dot in snake:
        square = pygame.Rect(dot * S, (S, S))
        screen.fill("black", square)

Try running your code. Your should immediately grow to a length of 4, and move around properly.

Full code at this point:

import pygame

W = 30
H = 30
S = 20

# pygame setup
pygame.init()
screen = pygame.display.set_mode((W * S, H * S))
clock = pygame.time.Clock()
running = True

# game setup
snake = [pygame.Vector2(W / 2, H / 2)]
vel = pygame.Vector2(1, 0)

key_vel = {
    pygame.K_RIGHT: pygame.Vector2(1, 0),
    pygame.K_DOWN: pygame.Vector2(0, 1),
    pygame.K_LEFT: pygame.Vector2(-1, 0),
    pygame.K_UP: pygame.Vector2(0, -1)
}

grow = 3

def place_food():
    global food_pos
    food_pos = pygame.Vector2(
        random.randrange(W),
        random.randrange(H)
    )
    while food_pos in snake:
        food_pos = pygame.Vector2(
            random.randrange(W),
            random.randrange(H)
        )

place_food()

while running:
    # poll for events
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN and event.key in key_vel:
            vel = key_vel[event.key]

    # fill buffer with white
    screen.fill("white")

    new_head = snake[-1] + vel

    if new_head in snake:
        print("hit self")
        break

    if new_head == food_pos:
        grow += 1
        place_food()

    snake.append(new_head)

    if grow > 0:
        grow -= 1
    else:
        snake.pop(0)

    for dot in snake:
        square = pygame.Rect(dot * S, (S, S))
        screen.fill("black", square)

    square = pygame.Rect(food_pos * S, (S, S))
    screen.fill("green", square)

    # copy buffer to screen
    pygame.display.flip()

    # limits FPS
    clock.tick(20)

pygame.quit()

Continues in Part 5

Pygame Snake, Pt. 3: Control the Dot

David Newberry — Tue, 21 Apr 2026 23:25:18 +0000

Part 2 left off with a square moving on a grid. Now, let's take control of it by consuming KEYDOWN events.

One simple approach would be to have a variable that represents one of the four directions the snake can go. It might use values 0-3, or it could use string literals like "up" and "left".

A slightly more advanced technique would be to use the Vector2 class. We use pygame's Vector2 to keep track of the position of out snake part. We could also use a Vector2 to represent the snake's speed and direction. For example, the direction right would be represented by Vector2(1, 0), because if we add that vector to the current position, it will increase the x value (the first coordinate) by 1.

Left would be Vector2(-1, 0). Up and down would be Vector2(0, -1) and Vector2(0, 1), respectively. If up and down seem backwards, it's because in pygame (which uses a common computer drawing convention) the Y-axis increases as you go down, instead of up. The origin is the canvas's upper-left corner.

Add a new variable under dot:

vel = pygame.Vector2(1, 0)

Inside the for loop that consumes events, add the following under the first if statement:

        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_RIGHT:
                vel = pygame.Vector2(1, 0)
            if event.key == pygame.K_DOWN:
                vel = pygame.Vector2(0, 1)
            if event.key == pygame.K_LEFT:
                vel = pygame.Vector2(-1, 0)
            if event.key == pygame.K_UP:
                vel = pygame.Vector2(0, -1)

Finally, update the line of code that moves dot:

dot = dot + vel # or dot += vel

When you run your program now, you should be able to control the dot's movement with the arrow keys.

Full code at this point:

import pygame

W = 30
H = 30
S = 20

# pygame setup
pygame.init()
screen = pygame.display.set_mode((W * S, H * S))
clock = pygame.time.Clock()
running = True

dot = pygame.Vector2(W / 2, H / 2)
vel = pygame.Vector2(1, 0)

while running:
    # poll for events
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_RIGHT:
                vel = pygame.Vector2(1, 0)
            if event.key == pygame.K_DOWN:
                vel = pygame.Vector2(0, 1)
            if event.key == pygame.K_LEFT:
                vel = pygame.Vector2(-1, 0)
            if event.key == pygame.K_UP:
                vel = pygame.Vector2(0, -1)

    # fill buffer with white
    screen.fill("white")

    dot += vel
    square = pygame.Rect(dot * S, (S, S))
    screen.fill("black", square)

    # copy buffer to screen
    pygame.display.flip()

    # limits FPS
    clock.tick(20)

pygame.quit()

OK, that's fine, but we could really tighten it up by introducing a dictionary to hold the key/velocity associations. Like this:

key_vel = {
    pygame.K_RIGHT: pygame.Vector2(1, 0),
    pygame.K_DOWN: pygame.Vector2(0, 1),
    pygame.K_LEFT: pygame.Vector2(-1, 0),
    pygame.K_UP: pygame.Vector2(0, -1)
}

Add that just above the while loop. Now the whole KEYDOWN if statement can be replaced with this:

        if event.type == pygame.KEYDOWN and event.key in key_vel:
            vel = key_vel[event.key]

When in is used with a dictionary like this, it checks the dictionary's keys to see if they contain the given value.

Full code now:

import pygame

W = 30
H = 30
S = 20

# pygame setup
pygame.init()
screen = pygame.display.set_mode((W * S, H * S))
clock = pygame.time.Clock()
running = True

dot = pygame.Vector2(W / 2, H / 2)
vel = pygame.Vector2(1, 0)

key_vel = {
    pygame.K_RIGHT: pygame.Vector2(1, 0),
    pygame.K_DOWN: pygame.Vector2(0, 1),
    pygame.K_LEFT: pygame.Vector2(-1, 0),
    pygame.K_UP: pygame.Vector2(0, -1)
}

while running:
    # poll for events
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False
        if event.type == pygame.KEYDOWN and event.key in key_vel:
            vel = key_vel[event.key]

    # fill buffer with white
    screen.fill("white")

    dot += vel
    square = pygame.Rect(dot * S, (S, S))
    screen.fill("black", square)

    # copy buffer to screen
    pygame.display.flip()

    # limits FPS
    clock.tick(20)

pygame.quit()

Continues in Part 4

Pygame Snake, Pt. 2: Tiles

David Newberry — Tue, 21 Apr 2026 22:23:58 +0000

In part 1, we just got pygame going. We have a 1000x1000 pixel canvas, with a 50x50 square moving more-or-less continuously. Snake is played on a fixed grid.

Instead of 50x50 pixels, we'll shrink the snake parts/tiles to 20x20, and we'll shrink the canvas to 600x600 pixels, treated as a 30x30 grid. (30 tiles x 20 pixels = 600 pixels.)

We'll add three variables to represent these values:

W = 30 # width
H = 30 # height
S = 20 # tile size

Now we should replace all other numbers in the code with references to these values.

screen = pygame.display.set_mode((W * S, H * S))

dot = pygame.Vector2(W / 2, H / 2) # approx. the center

    square = pygame.Rect(dot * S, (S, S))

These values are referenced in several places in the code. By using variables, you can update them in one place and it will be reflected everywhere. You can easily change the width, height, or tile size.

Now the dot should move 1 space, so update the line dot.x += ...:

    dot.x += 1

Full code at this point:

import pygame

W = 30
H = 30
S = 20

# pygame setup
pygame.init()
screen = pygame.display.set_mode((W * S, H * S))
clock = pygame.time.Clock()
running = True

dot = pygame.Vector2(W / 2, H / 2)

while running:
    # poll for events
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False

    # fill buffer with white
    screen.fill("white")

    dot.x += 1
    square = pygame.Rect(dot * S, (S, S))
    screen.fill("black", square)

    # copy buffer to screen
    pygame.display.flip()

    # limits FPS
    clock.tick(20)

pygame.quit()

Now we are treating the board itself as a 30x30 grid of 1x1 tiles. It is then being scaled up when being drawn. The code dot * S takes the Vector2 variable with a value like (15, 15). Assuming S = 20, dot * S would then produce the point (300, 300), i.e. (15 * 20, 15 * 20).

Continues in Part 3

Pygame Snake, Pt. 1: Bare-bones Animation

David Newberry — Tue, 21 Apr 2026 20:50:00 +0000

Pygame is a module designed to allow us to make 2D games using Python. I am just learning pygame myself. I've always loved the game Snake, and I find that it makes a good learning project, too.

When using pygame, we will draw each frame of our animation to an offscreen buffer. That is basically like an invisible canvas that exists in memory. This allows us to draw the scene piece by piece, and then when its done copy the whole buffer to the onscreen canvas.

Pygame will also handle the event loop. We can specify how many frames per second we want our game to run at, and pygame will make sure the event loop runs no faster than that. Each time through the loop, we will draw one frame of animation.

We will also respond to events that pygame gives us. In particular, pygame will send us a KEYDOWN event whenever a key is pressed. Also, if the user closes the pygame window, it will send us a QUIT event, and the game should stop.

Here is a minimal pygame setup. Modified code from https://www.pygame.org/docs/

import pygame

# initialize pygame
pygame.init()

# create 1000x1000 pixel pygame window
screen = pygame.display.set_mode((1000, 1000))

# clock used to set FPS
clock = pygame.time.Clock()

# game runs as long as this is True
running = True

while running:
    # poll for events
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False

    # fill buffer with white
    screen.fill("white")

    # copy buffer to screen
    pygame.display.flip()

    # limits FPS
    clock.tick(20)

pygame.quit()

The only thing about this code I don't like is that it requires the running variable. I wanted to use an infinite loop with break, but I can't do that since we have to iterate through potentially multiple events using an inner (for) loop, and Python has no way to break out of nested loops.

OK, so that's not a bad start, except that it is not exactly the most interesting "animation". Let's add a moving square.

To have an animated square, we'll need a new variable to keep track of its location. If we weren't using pygame, I might create a simple little class for this (to store x and y coordinates). But pygame already has such a class built-in: Vector2.

So let's add a new variable called dot and create a Vector2 value for it to hold:

dot = pygame.Vector2(500, 500)

Add that code just above the while loop.

Now inside the loop increment dot's x value, and then draw it at its new position. To draw a square, we have to create a Rect object. To do this, we will pass two pairs of values: the (x, y) coordinates of its upper-left corner, and its (width, height) values. The dot variable itself will function as the (x, y) coordinates of the square's upper-left corner.

    dot.x += 10
    square = pygame.Rect(dot, (50, 50))
    screen.fill("black", square)

Place this code right under screen.fill("white"). That command paints the entire buffer white, in anticipation of drawing a new frame. The new three lines of code draw a 50x50 black square at the location indicated by the dot variable.

Full code now:

import pygame

# pygame setup
pygame.init()
screen = pygame.display.set_mode((1000, 1000))
clock = pygame.time.Clock()
running = True

dot = pygame.Vector2(500, 500)

while running:
    # poll for events
    for event in pygame.event.get():
        # pygame.QUIT = user closed window
        if event.type == pygame.QUIT:
            running = False

    # fill buffer with white
    screen.fill("white")

    dot.x += 10
    square = pygame.Rect(dot, (50, 50))
    screen.fill("black", square)

    # copy buffer to screen
    pygame.display.flip()

    # limits FPS
    clock.tick(20)

pygame.quit()

If you have a little experience with Python, try this challenge: Add some code to check if dot.x > 1000, and if so, set it to 0. This should cause the dot to reappear on the left once it goes off the right edge.

Continues in Part 2

Installing pygame for IDLE on Mac

David Newberry — Tue, 21 Apr 2026 19:13:08 +0000

IDLE is the easy-to-use IDE that comes bundled with Python by default. It's not the greatest IDE in the world, but it's been steadily improving with each release.

If you work a lot with Python, you might also have conda installed, or something similar, to create virtual environments with different Python versions and packaged installed. Working in IDLE is going to sidestep all that.

If you have ever installed Python from https://www.python.org/, you will have IDLE installed already. If not, go download and install it now. Note: If you have an older Mac and run into problems, you may need to use Python 3.10 instead of the newest version. (This worked for me on my Mac running OS X 12.7.6 "Monterey".)

The first step requires finding the actual binary associated with IDLE.

Right-click on IDLE and select Show Package Contents.
Inside the package, open Contents, then MacOS.
Right-click on Python and choose Show Original.

Now you've located the Python binary for your version of IDLE. Highlight the file and choose Edit -> Copy. The path to the file will probably be something like this:
/Library/Frameworks/Python.framework/Versions/3.14/Resources/Python.app/Contents/MacOS/Python

The next step is done using the Terminal. Find the Terminal app in /Applications/Utilities/ and launch it.

Once the Terminal has started up fully and you see the command prompt, start by pasting the file path to the python binary on your clipboard.

After that, you will type or paste the following (note that it starts with a space):

 -m pip install -U pygame --user

-U will cause pygame to be upgraded if it's installed already
--user will cause pygame to be installed for the current user, rather than for all users

So the whole command will look something like this:

/Library/Frameworks/Python.framework/Versions/3.14/Resources/Python.app/Contents/MacOS/Python -m pip install -U pygame --user

That's it! If everything goes well, pygame will install and be available inside IDLE. If you run into a problem, leave a comment.

React, Git[Hub], and VS Code for Beginners - Video 3

David Newberry — Thu, 23 Oct 2025 03:26:47 +0000

Video 2 (about 18 min):
https://youtu.be/e_2t2MNYDFQ

In this video, I start by installing VS Code.
I start VS Code, and then open up the React project directory created in the first video.
I spend a minute looking at the file hierarchy of the project, and then open up the source file for a component called Welcome, and use it to talk a little bit about how components work.

I look a little more at the files. I don't see a files called App.js or App.tsx, which is sometimes the root of the React app. In this case, I overlooked root.tsx, so I'll explore that in the next video.
I start the React development server by running:

npm run dev

In the browser, I then load the site by visiting the URL printed in the terminal; as I recall, localhost:5173.

Finally for this video, I go back to the source in VS Code and demonstrate how the React dev server takes care of essentially refreshing and "Hot [Re]loading" the content that gets changed, if you edit the source code.

In the next video installment, I plan to:

Create a new branch in git
Create a new React component
Discuss how state is handled in React
Merge the working branch into main*

(*) As it happens, I didn't have time in that stream! But next time, for sure.

React, Git[Hub], and VS Code for Beginners - Video 3

David Newberry — Thu, 23 Oct 2025 03:26:47 +0000

Previous video blog: Part 2

Video 3 (about 18 min):
(Stream 2)
https://youtu.be/e_2t2MNYDFQ

In this video, I start by installing VS Code.
I start VS Code, and then open up the React project directory created in the first video.
I spend a minute looking at the file hierarchy of the project, and then open up the source file for a component called Welcome, and use it to talk a little bit about how components work.

I look a little more at the files. I don't see a files called App.js or App.tsx, which is sometimes the root of the React app. In this case, I overlooked root.tsx, so I'll explore that in the next video.
I start the React development server by running:

npm run dev

In the browser, I then load the site by visiting the URL printed in the terminal; as I recall, localhost:5173.

Finally for this video, I go back to the source in VS Code and demonstrate how the React dev server takes care of essentially refreshing and "Hot [Re]loading" the content that gets changed, if you edit the source code.

In the next video installment, I plan to:

Create a new branch in git
Create a new React component
Discuss how state is handled in React
Merge the working branch into main*

(*) As it happens, I didn't have time in that stream! But next time, for sure.

React, Git[Hub], and VS Code for Beginners - Video 2

David Newberry — Thu, 23 Oct 2025 03:13:29 +0000

Previous video blog: Part 1

Video 2:
(Stream 1, Part 2)
https://youtu.be/Vwr2P7OWAWI

So now, with luck, you have a React Router app. Before diving into it, create a repository on GitHub.

Signing up for GitHub is pretty straightforward.
Once you have an account, you can create a new repository.

Most of the default settings are fine. For simplicity I named it the same thing as my local repository. I did not include anything in the initial repo, because all the files I want to upload will come from the local repo.
Next I tried to follow the instructs to push connect the local repository to the remote repo and push the changes, but I ran into a snag. I needed to authenticate git to GitHub.

The solution I eventually found was to install the GitHub CLI tool, which is a separate binary from git, called gh. There were a few options for installing gh. I chose to download the binary and then run it by cd-ing into the directory and running:
```
./gh auth login
```
The ./gh indicates that I want to run a binary in my current working directory.

Another good option would be to first install Homebrew, and then use it to install gh. On my primary development computer I have Homebrew installed. I don't have to avail myself of it often, but I probably end up using it a few times a year to install some binary that would be hard to install otherwise.

Once I'm authenticated with GitHub, I'm able to push my the project.

I turn next to VS Code, starting the download.

That's it for this video. Next time, I actually open VS Code!

Next video blog: Part 3

React, Git[Hub], and VS Code for Beginners - Video 1

David Newberry — Thu, 23 Oct 2025 03:10:45 +0000

React, GitHub, VS Code Video Blog

This series of blogs is an accompaniment to a weekly coding live-stream that I am doing. This series is focused on the three topics listed above, and is aimed at people who are just getting started. For that reason, I am working on a computer that has never been used for development before, and installing all the software I need along the way.

I also decided not to rehearse these videos. My hope is that there is value in seeing the messiness of the process, and what it looks like to work through questions and issues in real time. The downside is that sometimes I'll get stuck, or change my mind and backtrack. When I post videos to YouTube, I will edit them a bit for time by speeding up stretches where I'm not talking.

You can join the weekly live stream Wednesday afternoons (around 1 PM, Pacific) on Twitch, and find past weeks' videos on my YouTube:
https://www.twitch.tv/paxfeline
https://www.youtube.com/@GrokProgramming

In these blogs, I will list out the important steps and call out any mistakes I make during the stream.

Video 1:
(Stream 1, Part 1)
https://youtu.be/K13tgiff5mo

Preliminary: Get git. On Mac, one way to do this is install Xcode.

If you have no intention of doing app development, or any non-web development, you might want to skip Xcode and get git directly from http://git-scm.com/. One way to do this on Mac is to use Homebrew, which is another thing to install, but makes getting some other binaries easier.
In order to run the commands to create a new React app and start the React dev server, I install Node.js, which comes with command line tools npm and npx. To install Node.js, I first installed nvm -- "node version manager" -- by running:
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
```
(Per https://github.com/nvm-sh/nvm?tab=readme-ov-file)

When nvm finished installing, it tried to modify my shell .profile script, which is run whenever a new shell session starts. In particular nvm wants to add some code that will export an environmental variable called NVM_DIR, and run a script to load nvm.
I used the command line program pico to create .profile and paste in the code nvm told me to, then opened up a new terminal window. This started a new shell session, which executed .profile (thus exporting the variable and loading nvm).
Next, I installed Node.js by running nvm install node.
At that point I could run the command that creates a new React Router app.

First, in the terminal, navigate to the directory you want to create your new app directory in.

Beware my mistake! I told the script to create the project at ~/first-react-app. (To be fair, I'm pretty sure the script asked "where" I wanted it.) Generally, a path like that is interpreted as "in the home directory, an entry called first-react-app." However, in this case, in my current working directory (which was my home directory -- so the tilde-slash was redundant), it created a directory named "~" and placed "first-react-app" inside that.

Don't make my mistake. Navigate to where you want your project, and then just enter the name of the project you're creating.

The command to create a new React Router app is:
```
npx create-react-router@latest my-react-router-app
```
(Per https://reactrouter.com/start/framework/installation)

During the creation process, you will be asked to give your project a name, if you would like to initialize a git repository (you probably do), and a few other questions.
To start the React development server, and see your new app, run the following commands to move into the project directory, install necessary packages, and then start the server.
```
cd my-react-router-app
npm i
npm run dev
```

End of Video 1

Next video blog: Part 2

Tagged String Literals

David Newberry — Thu, 13 Feb 2025 18:42:45 +0000

I love seeing a line of code and thinking, I can not parse that. And then learning to parse it.

This is valid JavaScript:

This is an instance of using a tagged template string.

This works too:

These examples are from MDN. Learn more there. I have no use for this knowledge right now, but one day I may!