 Resources from Ian Jones in 2024

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

Learn Remix by Building a Social Media Platform with TypeScript and Prisma

🚀 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.

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

Upgrade Your Terminal and Make It a Joy to Work with

Yarn 2 (Berry) has finally [released a stable version](https://dev.to/arcanis/introducing-yarn-2-4eh1)! 

The yarn team has been working on this release for over 2 years. 

This collection goes over: 

- What yarn pnp is and how it tries to solve the `node_modules` problem
- How to install yarn globally and locally inside of a single project
- How to use `yarn dlx`
- How to use `yarn up` to manage yarn workspace dependencies



Fast, reliable, and secure dependency management.

yarn

Yarn 2 AKA Berry

This collection will cover the basics of how to interact with an HTML document with JavaScript. We will go over:

- What is the DOM?
- fetch elements from an HTML document
- add HTML nodes to a HTML document
- Respond to click events

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

Introduction to Client Side Web APIs

Gain efficiency in navigating and manipulating text in VSCode. If all you’re using right now is your mouse, you’re leaving a lot on the table in terms of efficiency. 

VSCode gives you the ability to detect patterns in text and manipulate those patterns as you see fit. e.g. when you’re renaming a variable, you don’t want to rename just the declaration but all the uses of that variable in one file. Do so in just a few key presses.

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Text Manipulation in VSCode

This lesson goes over how to install yarn 2 through npm.

To install yarn 2 globally, we use `npm install -g yarn@berry`. 

To install yarn 2 to a specific project, we use `yarn policies set-version berry`. This creates a `.yarnrc` file and a `.yarn/` directory. `.yarnrc` that sets the path to our yarn instance in the created `.yarn/` directory that holds our new yarn version.

Install Yarn 2

`yarn dlx` can be used to run packages without installing them. This is useful for packages like `create-react-app` and `gatsby` that scaffold out apps for you, so you don't have to keep updating your global versions.



Use Yarn dlx to Execute Packages without Installing Them

Yarn 2 is workspace aware. When you need to upgrade a package in one workspace, yarn will ask you if you want to resolve the version of the package to a version you use in a different package.

In this lesson, we go over `yarn up -i` to upgrade a package with an old version.

Use yarn up to Update Dependencies In A Yarn Workspace

Yarn PnP is a new feature set on **by default** with yarn 2. PnP gets rid of your projects `node_modules` in favor of a `.pnp.js` file.

This `.pnp.js` file maps all of the packages installed in your project to where Yarn has placed them on your disk. This enables faster, more reliable installs because you don't have to write to disk as often.

WTF is Yarn Plug'n'Play (PnP)?

The DOM stands for Document Object Model. It is the interface between the JavaScript you write and the browser.

In this lesson, we open up the browser developer console to inspect the HTML within.

Use `CMD + OPT + i` to open the console quickly.

WTF is the DOM?

You can use `document.querySelector` to fetch elements from your HTML document.

In this lesson, we pass an Id to `querySelector` indicated with a `#`. 

`document.querySelector('#movie-2')`.

`querySelector` will return the first element that it matched. 

Select an HTML Element with document.querySelector

Querying the DOM by an elements id is so common that JavaScript has given us a method to do this directly.

`document.getElementById`

In this lesson, we switch our `querySelector` function our with `getElementById` to fetch our movie list element.

Select a DOM Element with document.getElementById

This lesson goes over how to create an HTML element and add it to our document. We do this by creating an element with `document.createElement`. Once we have the element created, we can use `document.appendChild` to add our element to our HTML.

We then go over how to connect our JavaScript to a button's `onclick` event.

Add a Node to Your HTML with document.appendChild

Bite-size video tutorials for badass web developers.

egghead

This is a test lesson

`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

`bat` is a `cat` replacement that adds syntax highlighting to file previews.

You can install `bat` with `brew install bat`

Next, you simply call `bat my_file.md` to print out the contents. 

Use Bat to Print a File with Syntax Highlighting in the terminal

`fzf` lets you set a `--preview` command to display file previews when searching for a file with `fzf`. Here we use `bat` to preview files while using `fzf` 

Interactively preview files with fzf and bat in the terminal

Finally, you want to associate users to the posts that they make. To do this you will grab the user data from authenticator.isAuthenticated API to pass to the post creation. This data does not need to be validated because it’s coming from the session storage which has already been validated.

Add User Data to a Post Creation in Remix

Here comes the bulk of complexity when dealing with authentication. You need to handle verifying that a user account exists in the database and when it passes somehow referencing it throughout your application.

A great way to do this is through Session Storage. You can implement session storage with HTTP cookies (which is what you will do here) or with a database. You’ll implement functions `commitSession`, `destroySession`, and `getSession` but luckily the Remix docs will give you a head start here.

Along with session storage, you will need to implement an authentication strategy. Again there are a few ways you can do this whether that’s magic email, 3rd party auth like GitHub or Twitter, or email / password. Because you are already accepting email / password, that is what you will do!

Implement User Login in Remix with a Form Strategy and Session Storage

You need to accept input from a user to sign them up to your application. Creating a user in the database is a straightforward Prisma.create function call. 

The tricky part here is that we want to ensure bad data is not inputed into the form. We’ve done form validation before but this lesson will show you a more complex version of it.   Among the validation that is applied, you will hash the password that’s given to us before saving it to the database as well as check the database for existing users when a sign up is attempted.

Validate User Sign Up Data in Remix and Hash a Password

To further prep for implementing user sign up and log in, you will create a sign up and log in page. To do this, there are a few development workflows that you’ll be introduced to. You will create a reusable button component from the previous button that was created to use inside the Nav header. 

To actually reuse the buttons, you’ll need to create a nav. One thing that you shouldn’t do is apply a nav to every page you create. This is why Remix has layout routes and in this case because it’s an application layout, you will want a pathless — pathless meaning it won’t show up in the url — layout route. This is denoted with two underscores in the layout file, for an app that is `__app`.

Along the way you will be introduced to an awesome component pattern that implements an `as` prop. What this will do is let you define your button AS a link so that you can use actual HTML links instead of buttons for accessibility reasons.

Topics

Instructors

Content Type

Ian Jones