 Resources from Chris Achard in 2021

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

To let people easily share the patio11bot, we'll add a "Tweet" button to the page.  You can easily add a static share button by going to `https://publish.twitter.com/` and following the instructions there, but to make a dynamic tweet button is more difficult.

We'll use the same share button, but we'll dynamically add it to the page with javascript, and then we have to tell the Twitter script to reload it as a widget with: `twttr.widgets.load()`

Add a Dynamic Tweet Button to a Webpage

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

We've been building patio11bot without a favicon so far - so before we deploy it, we'll make one from the SVG avatar that we have.

We'll use the service here to do it: `https://convertio.co/svg-ico/` - but there are many free services online that work.

After we have the .ico file, rename it to `favicon.ico`, and then link it with a link tag in HTML: 
`<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">`

Turn an SVG Into a Favicon and Link it

We're finally done with patio11bot!  To get it online and served at patio11bot.com, we'll use the service https://www.netlify.com/ - which provides quick (and free!) hosting for static sites.

Deploy and Host a Static Webpage for Free with Netlify

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React hooks provide a new way to access the data and functions stored in context with the `useContext` hook.

In this lesson, we'll create a login form and store the user data in a context called `UserContext` that we create the typical way - with `React.createContext()`.  We'll also provide that context to our app the typical way - by wrapping our app with `<UserContext.Provider>`.

But then, in our child components, we'll use `useContext` to pull out the value stored in the `UserContext`.  Then, we can display that value, and use the function that we set in the context to change the user value.

Pass Data Between React Components with the useContext Hook

React Hooks can replace local state in React components, so that you can write entire components as functions now, instead of classes.

In this lesson, we'll convert a React class component to a functional component, by switching from using local state to using the `useState` hook from React.

Rewrite a React Component Class to use the useState Hook Instead of Local State

Custom hooks in React are functions, and we can write them by combining other, preexisting hooks.

In this lesson, we'll wrap the `useState` React hook to create a hook that automatically pulls out the `event.target.value` of an input's `onChange` callback.  We'll then use that hook directly as the `onChange` prop of a text input.

Create a Custom Hook in React by Wrapping useState

There are two important rules to follow when writing React functional components with hooks.

1. Use the hooks at the top level of your functions, without wrapping them in `if` statements, loops, or other types of control logic.

2. Only call hooks from React functions or custom hooks that start with the word `use` - so that you and other developers know that those functions are hooks, and can use them appropriately.

In this lesson, we'll show examples of what to do and NOT do with hooks, by adding on to a simple React app that uses a custom hook.

Use React Hooks Correctly by Following The Two Rules of Hooks

If you want to make an AJAX call when a React component class component loads, then you can do that in the componentDidMount lifecycle method.  However, there is no lifecycle methods in React functional components.  Instead, you can use the `useEffect` hook!

In this lesson, we'll use the `useEffect` hook to fetch some JSON from an API when our React component loads.  We'll also avoid an infinite loop by passing an empty array of dependencies to the hook, and use the 2nd form of the `useState` hook inside of `useEffect`, which takes a callback to get the current value of the `useState` state.

Use the useEffect React Hook Instead of the componentDidMount Lifecycle Method

Instead of multiple `useState` hooks, you can use a single `useReducer` hook to manage multiple pieces of data in a React component.

This will feel very similar to Redux, but it will be defined for only a single component.

This can trade off some of the complexity of using multiple `useState` hooks, but it just moves that complexity into the reducer function - so using `useReducer` vs multiple `useState` calls is mostly just a code style choice.

Use a Reducer in a Functional Component with the useReducer Hook in React

If you have a React component that is computing a value that is expensive to compute, then you can cache that value with the `useMemo` hook, so that it's only re-computed when one of its dependencies change.

In this lesson, we'll use `useMemo` to memoize (cache) a label that is computed when the user presses a button - but we'll prevent it from being computed when the user updates other parts of the state (an input text value in this case).

Cache Computed Values for Better Performance with the useMemo React Hook

Most of the time you don't need access to the actual DOM when developing React applications.  But when you do need to, there's a hook that will give you access to the DOM.

In this lesson, we'll use the `useRef` hook to get a reference to a `div` element.  Then we'll print the dimensions of that element - just to show that we have access to the actual DOM element; but you can use this element now to do anything you'd typically do with an element.

The one trick to using the `useRef` hook is to remember to call `.current` on the reference to get the actual element.

Get a Reference to a DOM Element in React with the useRef Hook

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

vscode

VSCode can natively preview markdown files.  Open a markdown file in VSCode and press `cmd-k v`, or the `Open Preview to the Side` button.

The Preview is live and updates as you type, and it switches live as you switch between markdown files.

View a Markdown Preview directly in VSCode

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

After setting `display: flex` on a parent element, you can use `flex-direction` to switch the container to be either a `row` or a `column`.

We also switch the body between `row` and `column`.

Flex into a Row or a Column with flex-direction

We can space items inside of a flexed component in the "on-axis" direction, with `justify-content`.

Justify content can take the following values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, or `space-evenly`

Change the Spacing of Flexed Components with justify-content

We changed the axis layout with 'justify-content', and the "off axis" layout is controlled by 'align-items'.  The most common values are `flex-start`, `flex-end`, or `center`.

Change the off-axis Alignment of a Flexed Container with `align-items`

Cascading Style Sheets bring order and beauty to our applications.

Inside of a flexed container, a single item can control its own flex with `align-self`. The possible values are `flex-start`, `flex-end`, `center`, or `stretch `

Change the Alignment of a Single Flexed Item with 'align-self'

To set the wrap settings of elements inside of a container, we can set the `flex-wrap` css attribute.  The most common values are: `nowrap`, `wrap`, or `wrap-reverse`

Wrap Elements Inside of a Flexed Container with `flex-wrap`

To stretch individual elements to fit the given space, we can set the `flex-grow` or `flex` attributes to any integer.  Other surrounding elements will grow proportionally to their `flex-grow` or `flex` attributes.

Proportionally Grow a Flexed Element by Setting `flex-grow` or `flex` Styles

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.

If you make a mistake in a commit message but HAVEN'T pushed it yet, you can change that commit message with --amend:

`git commit --amend -m "New message"`

This won't change any of the files in your commit - but will rewrite the commit with the new message.

Change a Commit Message that Hasn't Been Pushed Yet

To add more files to the most recent commit, we can add them to the staging area with:

`git add -A`

and then rewrite the most recent commit to include them with:

`git commit --amend -m "My new message"`

Caution: only do this BEFORE you've pushed the commits - otherwise you will be re-writing history for people who may have already pulled down the old commits.

Add More Files and Changes to a Commit Before Pushing

If you've added files to the staging area (the Index) accidentally - you can remove them using `git reset`.

We'll first add a file to staging, but then back it out with:

`git reset HEAD filename`

in order to pull it back to the working directory, so it doesn't end up in a commit when we don't want it to.

Topics

Instructors

Content Type