 Courses from Cameron Nokes

Extracting meaningful data from strings is a crucial skill when working with bash, and bash gives us powerful tools to do so: `head`, `tail`, `cut`, `sed`, and `awk`. But these tools can be hard to understand without spending time to learn them, so many developers fall into a rut of blindly copying and pasting commands. No more! With this mini-course, you'll understand the basic ins and outs of these commands in under 15 minutes. 


Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Manipulating strings in bash

In this lesson, we'll use the power of awk to select the columns and rows of data that match our condition. We'll pass a `,` (comma) to the `-F` flag (the F stands for field separator), to tell awk to split on commas. From there, the world is our oyster and we can tell awk to only return rows that match whatever parameters we pass.

Extract Columns of Data from a CSV with awk

`awk` is a specialized tool and programming language for querying and transforming text.   In this lesson, we’ll scratch the surface of the possibilities it provides by leveraging it in one of its most common use cases: extracting data from columns of text. Awk makes it easy to select and print just the columns and rows that we want from commands, like `ps`, that return a table of data.

Extract Data From Columns of Text with awk in Bash

`cut` makes it quick and easy to break a string into parts based on a delimiter or get a substring. In practice, it’s somewhat similar to JavaScript’s `String.split` method. In this video, we’ll look at using `cut` to work with semver strings and truncate a long string.

Split a String into Parts with `cut` in Bash

In this lesson, you'll learn how sed can be used to insert lines of text. We'll use sed's `i` command to insert a header at the top of every .js file in a directory. 

Insert Text with sed in Bash

In this lesson, you'll learn how sed can be used to delete lines of text. You can use a regex or line numbers to target a line for deletion. This makes a sed a powerful tool for automatically performing lots of tedious text deletions for you. 

Delete Lines of Text with sed in Bash

sed, which stands for stream editor, is probably most commonly used to replace text patterns with a new one, which is exactly what we’ll learn in this lesson. 

You'll learn how what flags you pass, the address argument as well as the commands that sed takes. The sed syntax can be summarized like this: `sed [flags] '[address]command[options]' [input file]`

Find and Replace Text with Sed in Bash

Head and tail are handy tools for getting just the beginning or end of a text stream. In this lesson, we’ll look at getting the first or last lines from the beginning or end of text. 

Use head and tail to Get the Start or End of Text in Bash

Bite-size video tutorials for badass web developers.

egghead

JavaScript is single-threaded, which can present some problems when creating an interactive user experience. If JavaScript runs too long while a user is attempting to interact with a page, it can cause noticeable jank or lag, which degrades the experience. `requestIdleCallback` is a DOM API that allows you to schedule a JavaScript function to be run when the page thread is idle, so your JavaScript doesn't get in the way of the user.

Use requestIdleCallback to schedule JavaScript tasks at an optimal time

`launchd` is a robust scheduled job automation tool on macOS that allows you to schedule a task to be run at recurring times. It's macOS's take on Linux's `cron`. In this lesson, we’ll schedule a simple bash script that empties the Trash to run every Monday morning at 10am. 

First, we’ll create a plist file (a plist file is just XML) with our job configuration. In here, we’ll specify our bash script as the program to run. Then we move plist file to the `~/Library/LaunchAgents` folder. Then we’ll use launchctl to load our configuration file, which will make the job active. We'll manually activate our job to ensure it's working with `launchctl kickstart`. 

Schedule Timed Jobs on macOS with `launchd`

In this lesson, we'll see how shell parameter expansions can be used to simply expand a variable's valuable and also provide a default value to a variable, if not set. Note that there are many more possibilities with shell parameter expansions, so check bash's documentation to view them all.

Set Default Arguments with Bash Shell Parameter Expansions

Maybe you’ve seen something like `2>&1` at the end of a bash command before. What does that even mean? In this lesson, we’ll learn what stdin, stdout, and stderr are. From there, we’ll see that stdin, stdout, and stderr can be referenced by their file descriptors (0, 1, and 2) and are all just streams that can be directed however we want.

Understand how to Redirect stdin, stdout, and stderr in Bash

Pipes are one of bash's most powerful features, but sometimes plain bash doesn't give us the tools we need to perform more complicated transformations. In this lesson, we'll see how we can leverage node.js in conjunction with bash. We'll pipe a log file of line-delimited JSON (LDJSON) to a node script that filters it and then writes the result to stdout. We'll use node.js' Transform stream to accomplish this. 

Transform Piped Data from Bash using a Node.js Transform Stream

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Bash is great, but sometimes we need the power of a more robust programming language to accomplish our goals. In this lesson, we’ll look at how we can integrate node.js within bash to send data to and from a node.js script. First we’ll look at how to do quick one-liners at the shell using node's `-p` (print) option. Then we'll write a node.js script that accepts parameters from the shell to check the value of a query string. In node.js, we can use the `process` object to interact with command line arguments and stdio. 

Send and Receive Data from a Node.js Script in Bash using the Process Object

`.bash_profile` is a file that bash invokes (or more technically `source`s) before the start of a new bash session. In `.bash_profile`, we have the opportunity to add variables, functions, and aliases to customize our bash environment and provide reusable functionality.

In this lesson, we’ll look at adding a `git_sync` alias as well as a `ll` alias. Aliases act like shortcuts and save us time and typing at the terminal. `.bash_profile` is a good spot for smaller functions and aliases.

Note that on most linux distributions you'll use `.bashrc` instead of `.bash_profile`.

Create Aliases in .bash_profile for Common Bash Commands

`PATH` is a global environment variable that represents a list of directories bash looks in for executable files. The executable files for bash commands like `grep` are all somewhere on your OS’s `PATH`. We can add our own folders to `PATH` to make our executables available as a command to bash. In this lesson we’ll learn how to add a new folder to our `PATH` in .bash_profile and how to symlink an executable file into /usr/local/bin, which is in `PATH` by default. 

Note that in zsh, when modifying your PATH you to provide an absolute path, `~` is not expanded. 

Add Executable Files to $PATH with Bash

Brace expansions are commonly used with the `cp` or `mv` commands in order to dynamically generate strings. In this lesson, we'll use a brace expansion to shorten a command like `cp index.js index.js.backup` to `cp index.js{,.backup}`. We'll also see how brace expansions can generate sequences. For example, `touch test-{1..10}` will generate the arguments to `touch` to create 10 test files. 

Note that the `tree` command that I use in this lesson has to be installed. 

Create and Copy Multiple Files with Brace Expansions in Bash

History expansions let you interact with bash's history. For example, if you forgot to run a command with `sudo`, you can `sudo !!` to rerun the last command with it. `!$` can be used to access the last argument of the last command. 

Rerun Bash Commands with History Expansions

Bash keyboard shortcuts make it faster and easier to get things done at the terminal. In this lesson we'll look at the following shortcuts: 

- Ctrl+A - go to the beginning of a line
- Ctrl+E- go to the end of a line
- Ctrl+K - clears line up to the cursor 
- Ctrl+W - delete last word
- Ctrl+L - clear the screen (equivalent of the `clear` command)

Note: these shortcuts work on Terminal, iTerm 2, and Hyper. If you are using an alternative terminal, they may not work.

Use Bash Keyboard Shortcuts

“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y.

Accessibility is broken down into 4 categories of disability: visual, cognitive, auditory, motor. 

Regardless of the category of disability, accessibilities aim in web development is to make applications and websites usable for everyone.

a11y

Bash, unfortunately, doesn’t ship with a command that can work with JSON natively. In this lesson, we’ll learn how to read and do basic queries on JSON with `jq`, an installable command line tool that makes working with JSON in bash really easy. We'll pipe the JSON output of the Github API to jq to extract values. 

Note: jq has to be installed. On macOS, the easiest way to do this is to run `brew install jq`.  To view install instructions for all platforms, see https://stedolan.github.io/jq/download/. 

Read and Use JSON in Bash with jq

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Redirection like `ls > out` only applies to a single line, so how do we control bash's input and output streams for blocks of commands? `exec` does just that -- it changes where stdout and stderr go for all commands that come after it. 

In this lesson, we'll use `exec` in a script to redirect all stdout and stderr to a log file. Our script will be a post-merge git hook, which runs after a git pull is performed. It'll check git's list of changed files and run `npm install` if package.json was changed. Because git operations are sometimes performed inside UI instead of the shell directly, it can be handy to capture any errors in a log file. 

Use exec to Redirect stdio in a git Hook Script

When comparing two visually similar websites, it can often be challenging to precisely identify the subtle differences between them. To facilitate a rapid analysis of these discrepancies, a practical technique involves leveraging Chrome's integrated developer tools to capture full-page screenshots of each site. Subsequently, these screenshots can be uploaded to a platform like AI Studio. There, the AI can analyze the images and generate a report detailing the variations. This entire process, leveraging a few quick shortcuts, can be completed in under a minute, delivering a comprehensive breakdown of the differences for efficient comparison and analysis.

Quickly Compare Two Sites Using AI Studio with Chrome Full Page Screenshots

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


```bash
share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}
```

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

[Verdaccio](https://verdaccio.org/) is a fully featured NPM registry that you can run locally on your machine. It’s a great tool for testing your release process, running end-to-end tests, and simulating real-world scenarios like deploying packages, installing them, and verifying functionality as an end user would.

Nx includes a [generator](https://nx.dev/features/generate-code) that simplifies setting up Verdaccio. To configure it, run:

```shell
npx nx g @nx/js:setup-verdaccio   
```

This command installs the necessary NPM packages and creates a `project.json` file with a `local-registry` target. To start the local registry, open a new terminal window and run:

```shell
npx nx local-registry
```

This will:
- Launch the Verdaccio registry.
- Configure NPM to point to the local Verdaccio server at `http://localhost:4873`.

> **Note:** A `project.json` file provides an advanced way to define scripts, offering more flexibility than a traditional `package.json` for managing complex targets.

Setup local Verdaccio server to release NPM packages

Learn how to spin up a local NPM registry powered by Verdaccio to test deploy your NPM packages.

In TypeScript, developers often begin by defining the structure of their data using type definitions or interfaces, which is a powerful way to ensure type safety. However, as applications grow and become more complex, simply defining the shape of an object might not be enough to guarantee its consistent creation and behavior throughout the codebase. This often leads to situations where objects that are intended to be of a certain "type" might be missing crucial properties or have incorrect data, which can be difficult to track down and debug.

This lesson tackles the question of when and why to move beyond basic type definitions and embrace classes in TypeScript. It demonstrates how classes provide a more robust mechanism for defining object structure, enforcing type constraints, and ensuring consistent object creation. By establishing a clear blueprint for objects, classes not only improve compile-time type safety but also offer runtime benefits and better code organization, ultimately helping developers avoid common pitfalls associated with loosely structured objects in larger TypeScript projects.

Stop Avoiding Classes in TypeScript

Karabiner isn't only for your keyboard. It can also hijack your mouse buttons and enable them to be similar to layers on your keyboard, where holding down a mouse button can allow you to tap keys on your keyboard to trigger commands and macros that can completely revolutionize your workflows. For example, you can hold down the right mouse button and tap on R to go to references in VS Code. Or hold down the right mouse button and tap the left mouse button to chop up videos and Screenflow.

This completely unlocks a whole new world of possibilities and use cases for your mouse as you can hover your mouse over anywhere on the page. And just tapping keys on your keyboard allows you to trigger mouse actions, to trigger keyboard actions, or to trigger macros and applications and terminal commands. and anything that your imagination can come up with. 

Karabiner: Rethinking Right-Click as a Macro Command Center

Make an HTML table more readable on mobile devices by using the ::before pseudo-element. We add labels to each cell, so they appear like cards when the table is viewed on smaller screens. The ::before content is set using a data-label attribute for each cell to enhance mobile viewability without horizontal scrolling.



Create a mobile friendly table with the before pseudo-element

Learn to use CSS ::before pseudo-element for mobile-friendly HTML tables. Add labels to cells for enhanced readability on mobile, avoiding horizontal scroll.

Any app of a decent size has event flows and messages being passed around. At a certain point it becomes complicated to explain it through prose and you want to turn towards diagrams. Now setting aside the time to create diagrams that accurately describe what's happening in your codebase can be quite time consuming. Luckily, with today's AI tools, we can now just do basic walkthroughs with rough recordings over codebase dictating what's going on along the way and then upload that to tools like AI Studio and then ask it to generate diagrams in a text-based format such as Mermaid that will then generate the flowcharts and diagrams for us. So this video walks us through this process of recording a rough video, uploading it to AI Studio and then asking AI Studio to generate the proper Mermaid diagram syntax.

Generate Mermaid Flow Chart Diagrams with Gemini 2.0 from Rough Screen Recordings

I'm a diehard Karabiner user and anytime I start doing something repetitively I always move it into my Karabiner configuration. Sometimes I'll fall into scenarios where I want to trigger a command, but I also want to know if that command succeeded or failed. Since Karabiner can trigger any command, setting up the command is fairly straightforward, but knowing whether it succeeded or failed became much more difficult. Luckily for me there is a package called terminal-notifier that you can install from homebrew and you can pipe the output of your command to terminal-notifier. And have a seamless way of triggering your keyboard shortcut which runs a command and you can be notified of the results.

Use Karabiner to Trigger a Terminal Command and Get Notified of the Results

There are a lot of scenarios when inspecting a site in Chrome where you don't want any click events to fire and you don't want any scripts to run. Or maybe something is animating in and out of the page and you want to capture it at a certain moment. This is a great use case for pausing script execution, which is kind of using the debugger manually by going into the Chrome DevTools and the Sources tab and clicking the pause button to essentially pause the entire page. This will give you a chance to inspect any of the elements and styles you want to inspect. And you don't have to worry about fire and click events or anything that might interrupt your investigation into the elements and styles that you want to find.

Pause Script Execution in Chrome to Easily Inspect Elements

Gemini 2.0 has a context window of a million tokens, and this means that you can upload hundreds of files and allow it to inspect and analyze massive refactors across entire code bases. 

This lesson demonstrates concatenating an entire code base into a single file and then uploading it to AI Studio. Once within AI Studio, we ask it to find the types of tasks that it can evaluate for us. Then we select one of the tasks and ask it to generate instructions for that task. Once those instructions are complete, we then turn them over to Windsurf's Cascade agent, and we allow Windsurf's Cascade to do all of the work for us as we sit back, relax, and let the AI do our jobs.

Cameron Nokes

Search Results