Learn Bash, Flexbox and Lighthouse

Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

docker

This lesson uses some advanced concepts and some bash scripting to build a better Dockerfile. By using the concepts showed here, you will be able to build more future-proof and production-ready containers. If you prefer to focus on the content about containers, feel free to ignore this lesson and come back to it later on if needed.

Currently, we use `sed` to overwrite the hard-coded path to the API. This works well when there is a single value to replace. Now if one of your team members replaced the value of localhost:3000, your build will break.

We'll use `jq` to fix this issue. Jq is a command-line tool that makes it easy to change values in a JSON file. The base image that we used for building the application does not contain this tool, but that is not an issue. To install `jq`, you will need to download the [binary](https://github.com/stedolan/jq/releases/download/jq-${JQ_VERSION}/jq-linux64.), we'll need that to execute `jq` commands in our Dockerfile. This will allow us to update specific properties i

Modify a JSON Configuration File with jq

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

With just a handful of CSS properties, we can create an intrinsically responsive photo gallery using flexbox. This is accomplished by setting our preferred width as the `flex-basis` value and allowing items to both shrink and grow. The use of `object-fit: cover` on images allows them to fully fill up the list item without distortion or overflow. We finish the gallery with a small animated effect that alters `opacity`.

Create an Automatically Responsive Flexbox Gallery

CSS Grid and Flexbox are very useful tools for providing the overall layout of a page.  I take a specific design and create the high level layout using css grid and then arrange an individual section using flex box.

Layout a webpage using css grid and flexbox

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

Pandoc is a command-line tool built in Haskell that can convert almost any markup or word processing format interchangeably. You specify the input and the output types and pandoc will do the rest.

In this lesson we will convert a few markdown files to pdf. You will see how to convert a single file and then we'll write a script to loop through a couple files and convert them dynamically.

This lesson requires that you install `pandoc` and have `pdflatex` available.

You can install `pandoc` with brew: `brew install pandoc`
To access `pdflatex`, you can install `basictex` and set the path for `--pdf-engine` to `pdflatex`

Convert a File from Markdown to PDF with pandoc

🚀 In this collection, I will be going over some command line tools I use on a daily basis that make my life a lot easier.

[First up is fzf](https://github.com/junegunn/fzf).

> fzf is a general-purpose command-line fuzzy finder.

Upgrade Your Terminal and Make It a Joy to Work with

`fzf` is a fast cli finder tool. The `fzf` command will launch an interactive find session. You can type a path to a file and see a list of possible results.

Piping the output of commands (such as git branch) to `fzf` makes it easy to find the line you are looking for.

Interactively Find Anything By Piping it to fzf in the terminal

Many people just drop all of their Zsh functions inside of their .zshrc and forget about it. But as your collection of functions begins to grow, you start looking for a better way to organize everything. Since Zsh provides `autoload` for loading in functions dynamically, we can drop all of our functions into individual files, loop through that directory, then autoload each file as a function.

Store Zsh Functions in Individual Files Inside a Directory

SSH provides a secure way for your to [connect to and authenticate with GitHub's servers](https://help.github.com/en/github/authenticating-to-github/about-ssh). While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like [`ssh-keygen`](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have [separate accounts for personal and professional projects](https://ryanharris.dev/managing-ssh-keys-for-github/), which can be difficult to manage manually. Using `ssh-agent` and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's `git` URL.

Secure GitHub connections with SSH

When working with multiple GitHub accounts on the same system, you want to ensure that your commits have the proper author information. 

To do this, we'll create a global `git` configuration on our system that uses our personal account's information. Then, in our work-specific repositories, we'll add a local `git` configuration to override our global values.

We will be using the following commands in this lesson:

- `code`
- `git config`

Update gitconfig to Work with Multiple Accounts and SSH Keys

In this lesson, we have two local SSH keys: one associated with our personal GitHub account, the other with our work account. 

To more easily manage them, we will use `ssh-add` to add our keys to our system's key manager `ssh-agent`. Then, we will create a SSH configuration file, which will determine what key to use when connecting to GitHub based upon the URL. 

Once we have set up our configuration file, we can test our connections using `ssh -T` and clone repositories with `git clone`.

Commands we will be using in the lesson:

- `ls`
- `ssh-add`
- `touch`
- `ssh`
- `git clone`

Manage Keys with ssh-agent and Add SSH Configuration

In some cases, you may have multiple GitHub accounts that you need to interact with from the same system. For example, you could have an account for work and another for personal projects, but you don't want to re-authenticate each time you switch between then. By using public SSH keys for each account, you can eliminate this part of the process.

In this lesson, we will create two SSH keys in our terminal using `ssh-keygen` , copy them to our clipboard using `pbcopy` and then add them to our respective GitHub accounts.

Commands we'll be using include:

- `ssh-keygen`
- `ls`
- `pbcopy`

Generate SSH Keys for your GitHub Accounts

Parsing arguments in zsh functions can be a bit difficult to manage if you try and customize it for each new function. Luckily, that's where zparseopts comes in. zparseopts is a utility function which can parse out each of the arguments you define and store them inside of an associative array for easy access. This makes accessing arguments as easy as looking them up by name.

Pass Arguments to zsh Functions with zparseopts

See how to use flexbox to layout variable-width content in columns, and take advantage of `justify-content` to keep flex children center-aligned on smaller viewports. We'll also learn how `margin` can be applied to resolve for lack of a well-supported `gap` property in flexbox. At the end of the lesson, we'll have styled both the "Subscribe" section and the site footer.

Use Flexbox to Responsively Layout Variable-Width Content

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

Create a Landing Page with CSS Grid and Flexbox

Learn the fundamental difference between CSS grid and flexbox layout, and create utility classes for each `display` value. Then begin to apply and expand these concepts to style the landing page navigation.

Choose Between Grid or Flexbox for CSS Layout

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

It can be difficult to work on multiple projects that use different versions of Node.

`nvm` ([Node Version Manger](https://github.com/nvm-sh/nvm)) make this easier by allowing you to download multiple versions and switch between them. You can also add a NVM configuration file (i.e. `.nvmrc`) to specify which version you want to use for each project.

In this lesson, we'll cover the following commands:

- `nvm install`
- `nvm ls`
- `nvm ls-remote`
- `nvm use`

Install and Manage Node.js Versions with nvm

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.

Using the [GitHub CLI](https://github.com/cli/cli) and a shell script, we will automate the process of monitoring pull requests in repositories we maintain. Specifically, open PRs we have created and those awaiting our review.

Monitor Pull Requests with the GitHub CLI

We have a parent HTML element that takes up the height and width of the page. We will make that parent element into a flex container, and then vertically center its child element using `align-items: center;`. Finally, we'll use `justify-content: center;` to horizontally center the element.

Center an Element Horizontally and Vertically using Flexbox

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Search

Search Results