 Resources from Taylor Bell in 2024

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

immutable

There are lots of techniques for accessing data kept in your Lists. In this lesson, we will compare how data stored in collections can be accessed directly in both standard Arrays and ImmutableJS Lists. We will also look at how to find data inside an Immutable List using the `findEntry` and `findIndex` methods.

Get items in an ImmutableJS List

The reduce function in ImmutableJS allows you to transform and create new data from an existing data structure. In this example, we will do some math and calculate a sum based on data in an ImmutableJS Map.

Calculate a sum using reduce in ImmutableJS

ImmutableJS reduce functions can be nested to get data out of complex data structures. In this example, we will create an Immutable List from an Immutable Map that is nested inside of an Immutable List that is itself nested inside of an Immutable Map.

Create a list with nested reduce functions in ImmutableJS

In this lesson we'll look at some of the differences between standard JavaScript Arrays and Immutable Lists. We'll create Immutable.JS Lists from scratch, as well as by converting regular Arrays. We will also compare and contrast the `push` and `concat` methods between both types of collection.

Create an immutable List using Immutable.js

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

In this lesson, we’ll use GraphQL to query for transformed Markdown blog posts and display links to each on your blog’s homepage. 

Use GraphQL in Gatbsy v1 to Create an Index of all Posts

In order to display the generated HTML from a Markdown post, we will build a GraphQL query and pass its data into a Template component that makes use of React’s dangerouslySetInnerHTML DOM element. 

Create a Blog Post Template for Gatsby v1

Gatsby includes several Node APIs for building sites. In this lesson, we’ll use the `createPages` API to dynamically build a page for each of our posts, using the URL path in the frontmatter of each Markdown doc. 

Dynamically Generate Gatsby v1 Blog Posts by Path

Gatsby’s `createPage` action allows for additional data to be passed in via `context`. In this lesson, we will add a processing step to include links between posts, and update our templates to conditionally display them as appropriate. 

Include Links to Next and Previous Gatsby v1 Blog Posts

In this lesson, we’ll use GraphQL to query for tags on each of our posts then dynamically create page URLs that display links to all the posts that match each tag. The tags index page and tag pages will be dynamically created in a function we will define using the page templates we have built and Gatsby's `createPage` API.

Add a Tags Page and Display All Tags in a Gatsby.js v1 Blog

In this lesson, you’ll learn how to build your Gatsby blog and add a deploy script for publishing your blog to Github Pages. In this lesson, you’ll learn how to build your Gatsby blog and add a deploy script for publishing your blog to Github Pages. We'll push the code that we've worked on to github and do a bit of configuration to expose the path on Pages. 

Deploy a Gatsby v1 Blog to Github Pages

In this lesson, you’ll install Gatsby and the plugins that give the default starter the ability to transform Markdown into HTML.

Install Gatsby v1 and Scaffold a Blog

Gatsby looks at the “front matter” at the top of each Markdown file when building your blog. In this lesson, we’ll create a few dummy posts with all the necessary information.

Format a Markdown file for Gatsby.js v1

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

html

In less than two minutes, this lesson will teach you how to create a barebones html file, with only a title and a single line of content.

Write Your First HTML Page

While you can write code with a plain text editor, many people opt for something more feature-rich. Visual Studio Code is a free code editing application that works for Mac and Windows. One of the things that makes VSCode so popular is its huge library of extensions that make writing code a breeze. In this lesson, we will install Visual Studio Code along with Live Server and Auto Tag Close extensions.

Install Visual Studio Code and Extensions

In this lesson, you will learn how to add headings to an HTML document by using `h1` thru `h6`.

Add Headings to an HTML Page

Long-form text is easier to read when it's organized into paragraphs. By using the `<p`> tag, we can add paragraphs of text to an HTML page.

Add Paragraphs to an HTML Page

Images make a great addition to a web page. In this lesson, we will use the `<img>` tag to add an image to our page.

Add Images to an HTML document

Browsing the internet wouldn't be as fun if there wasn't a way to click links to jump to other places. In this lesson, we'll look at how to use the `a` tag and the `href` attribute to point to external websites, as well as jump to different anchor points of the same page. 

Add links to an HTML document

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

The humble CSV file is a common way to store tabular data. Some people love using software like Excel or Google Sheets to manipulate CSV files, but I prefer to use JavaScript.

In this lesson, we will read a CSV file and parse it as JSON.

Parse a CSV file into JSON

Bite-size video tutorials for badass web developers.

Topics

Instructors

Content Type

Taylor Bell