DEV Community: Robert Guss

Astro 2.0 Content Collections

Robert Guss — Tue, 07 Feb 2023 15:35:43 +0000

This tutorial will teach you what content collections are and how they work in Astro 2.0.

After creating a new Astro 2.0 project from scratch, we will create a content collection for blog posts. We will also define a collection schema that will validate the Frontmatter of our blog posts, making it typesafe. Finally, we will learn how to generate dynamic routes for each post in the blog content collection.

This tutorial assumes you are already familiar with how dynamic routes work in Astro. If this concept is new to you, we highly recommend you read Astro’s official docs to familiarize yourself with them. Throughout the tutorial, we will have links to various sections of the docs and external resources where you can learn more.

We’ve got a lot to cover, so let’s get started.

What are content collections?

Content collections are one of the latest features released in Astro 2.0. They allow you to better organize your markdown and MDX content via the new src/content directory and provide type safety for your Frontmatter and content. You can also query content collections to pull them into your templates and generate routes for each piece of content.

This may all sound a bit abstract at the moment, but don’t worry. We will cover everything in detail throughout this tutorial, and by the end, you will be ready to create content collections in your own Astro projects.

Creating a new Astro 2.0 project

We can create an Astro 2.0 project by entering the following into our terminal.

npm create astro@latest

When asked if you would like to install the latest Astro package, press y on your keyboard for yes.

Next, you will be prompted to give your project a name. I will use the name astro-content-collections, but you can name it whatever you want. Press Enter to continue.

Then, select “a few best practices (recommended).”

Next, press y to install NPM dependencies
Next, you are asked to initialize a new Git repository. Press n for no, as we won’t need it for this tutorial.
Finally, select “strict” for the TypeScript setup.

After your project has been created, cd into your project directory.

cd <project name>

# For example
# cd astro-content-collections

Running the dev server

To start the Astro dev server, enter the following in the terminal.

npm run dev

The dev server will serve your app at http://localhost:3000. You should see the following if you open this URL in your browser.

We are ready to create our blog content collection now that we have created our project.

Define a new collection schema

The first thing we will need to do is to create two new folders. Within the src folder, create a new folder called content. Within the content folder, create a new folder called blog. The entire file path should be src/content/blog.

Creating our blog posts

Next, we will need to create some blog posts.

For demonstration purposes, these blog posts will be very simple. The most important part is the Frontmatter, as we will soon learn how to make all of the data contained in it typesafe.

src/content/blog/post-1.md

---
title: "Blog post 1"
author: John Doe
isDraft: false
publishedDate: 02-01-2023
tags:
  - Web Development
  - JavaScript
  - Astro
image: https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
canonicalURL: https://localhost:3000/blog/blog-post-1
---

# Blog post 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum dignissim fermentum. Nunc eget semper dui. Fusce commodo placerat dictum. Curabitur nec mauris eu mi condimentum fermentum. Donec a magna accumsan, sodales leo consequat, venenatis ligula. Vivamus a pharetra est. Nam posuere dolor sed tortor suscipit, ac feugiat magna convallis.

src/content/blog/post-2.md

---
title: Blog post 2
author: John Doe
isDraft: false
publishedDate: 02-01-2023
tags:
  - Web Development
  - JavaScript
  - Astro
image: https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80
canonicalURL: https://localhost:3000/blog/blog-post-2
---

# Blog post 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum dignissim fermentum. Nunc eget semper dui. Fusce commodo placerat dictum. Curabitur nec mauris eu mi condimentum fermentum. Donec a magna accumsan, sodales leo consequat, venenatis ligula. Vivamus a pharetra est. Nam posuere dolor sed tortor suscipit, ac feugiat magna convallis.

src/content/blog/post-3.md

---
title: Blog post 3
author: John Doe
isDraft: false
publishedDate: 02-01-2023
tags:
  - Web Development
  - JavaScript
  - Astro
image: https://images.unsplash.com/photo-1537884944318-390069bb8665?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
canonicalURL: https://localhost:3000/blog/blog-post-2
---

# Blog post 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum dignissim fermentum. Nunc eget semper dui. Fusce commodo placerat dictum. Curabitur nec mauris eu mi condimentum fermentum. Donec a magna accumsan, sodales leo consequat, venenatis ligula. Vivamus a pharetra est. Nam posuere dolor sed tortor suscipit, ac feugiat magna convallis.

Defining our blog collection schema

Now that we have some blog posts, we need to define a collection schema for our blog content collection.

Create a file called config.ts inside of src/content.

We first need to import the Zod validation library and the defineCollection() function from Astro:content.

// src/content/config.ts

import { z, defineCollection } from "astro:content";

Next, we define the schema for the content collection we want to validate. In our case, we need to define a schema for our blog collection.

// src/content/config.ts

import { z, defineCollection } from "astro:content";

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    isDraft: z.boolean(),
    publishDate: z.string().transform((str) => new Date(str)),
    tags: z.array(z.string()),
    image: z.string().optional(),
    canonicalURL: z.string().url(),
  }),
});

First, we are creating a new constant called blogCollection and using the defineCollection function to define our schema.

const blogCollection = defineCollection({

Next, we pass the defineCollection function an object with a schema property.

schema: z.object({
    title: z.string(),
    author: z.string(),
    isDraft: z.boolean(),
    publishDate: z.string().transform(str => new Date(str)),
    tags: z.array(z.string()),
    image: z.string().optional(),
    canonicalURL: z.string().url(),
  }),

The schema property is an object containing all of the Frontmatter data in our blog posts with their respective types. This is how Astro can validate and ensure our Frontmatter is typesafe!

The z object comes from the Zod, a TypeScript first schema validation library. Please check out their docs for more info.

A couple of interesting things worth pointing out.

publishDate is of type string, but we are also using the .transform() method from Zod to transform it into a JavaScript Date object.
tags is an array of strings denoted by z.array(z.string()).
image is of type string and also optional. We can make any type optional by using the .optional() method.

By default, Zod makes everything required. You have to explicitly tell it when something is optional.

Finally, we need to export our schema from our config file. Here is the entire src/content/config.ts file in its entirety.

import { z, defineCollection } from "astro:content";

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    isDraft: z.boolean(),
    publishDate: z.string().transform((str) => new Date(str)),
    tags: z.array(z.string()),
    image: z.string().optional(),
    canonicalURL: z.string().url(),
  }),
});

export const collections = {
  blog: blogCollection,
};

Querying our blog collection

Now that we have defined our collection schema, we are ready to learn how to query our blog content collection and render its content.

Update src/pages/index.astro with the following code.

---
import { getCollection } from "astro:content";
const blogPosts = await getCollection("blog");
---

{blogPosts}

First, we import the getCollection method from astro:content.

import { getCollection } from "astro:content";

Next, we await the getCollection method, which retrieves all the items within a given content collection. Our collection is called “blog,” so we pass the name of our collection as a string to getCollection().

const blogPosts = await getCollection("blog");

Finally, we render our blog posts.

{
  blogPosts;
}

Now if you open your browser to http://localhost:3000, you should see the following error.

Our schema validation is working!

The error states that publishDate is required, but our Frontmatter has publishedDate. Hopefully, you can now begin to see how powerful and useful having typesafe frontmatter is.

We can solve this by updating our src/content/config.ts like so.

import { z, defineCollection } from "astro:content";

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    isDraft: z.boolean(),
    publishedDate: z.string().transform((str) => new Date(str)), // updated from publishDate
    tags: z.array(z.string()),
    image: z.string().optional(),
    canonicalURL: z.string().url(),
  }),
});

export const collections = {
  blog: blogCollection,
};

Now if you visit http://localhost:3000, you should see the following.

We can render our blog post content properly by updating src/pages/index.astro with the following.

---
import { getCollection } from "astro:content";
const blogPosts = await getCollection("blog");
---

{
    blogPosts.map((post) => (
        <h2>
            <a href={`/blog/${post.slug}`}>{post.data.title}</a>
        </h2>
    ))
}

We use .map() to iterate over each post inside our blog content collection to create a link for each blog post title.

If you try and click on one of the titles, you will get a 404 error page.

This is happening because we have not told Astro how to create dynamic routes for each of our blog posts.

Let’s do that now!

Dynamic routes from content collections

Now that we have our blog posts on the home page, we need to tell Astro how to generate a route for every post with dynamic routes.

If you are unfamiliar with how dynamic routes work in Astro, please check read the docs: https://docs.astro.build/en/core-concepts/routing/#dynamic-routes

First, create a folder called blog inside of the src/pages directory. Inside the newly created blog folder, create a file called [slug].astro.

Paste the following.

---
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const blogEntries = await getCollection("blog");
  return blogEntries.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
---

<Content />

First, we are importing the getCollection function from astro:content. We learned about this function in the previous section, where we learned how to query for our blog collection content.

import { getCollection } from "astro:content";

Next, we are exporting an async function called getStaticPaths() which Astro provides. This function is what Astro uses to generate dynamic routes.

export async function getStaticPaths() {}

Inside getStaticPaths(), we await the getCollection() function, which returns all of the posts from the blog content collection.

export async function getStaticPaths() {
  const blogEntries = await getCollection("blog");
}

Then, we use .map() to iterate over the blog posts, returning an object with two properties.

The first is a params property which contains the slug of our blog post. Astro expects the slug from each post since we named this file [slug].astro.
1. By default, Astro will use the file name of each post for the slug, which in our case is post-1, post-2, and post-3.
The second property, props, returns each blog post's content.

export async function getStaticPaths() {
  const blogEntries = await getCollection("blog");
  return blogEntries.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

Finally, we get the data returned from the getStaticPaths() function and render the blog content using a special Content component provided by Astro.

const { entry } = Astro.props;
const { Content } = await entry.render();
---

<Content />

Now if you visit http://localhost:3000 and click on one of the blog post titles, you should see the post’s content.

Wrap up

We covered a lot of material in this tutorial, so let’s quickly recap everything you learned.

First, you learned what content collections are.
Next, you learned how to create a new Astro 2.0 project.
Then, you learned how to define a collection schema.
Then, you learned how to query the blog content collection to render each blog post onto the home page.
Finally, you learned how to create dynamic routes for each blog post within the blog content collection.

How to get experience as a new developer

Robert Guss — Tue, 27 Dec 2022 20:40:19 +0000

Here are several ways for you to gain experience as a new developer, in no particular order.

Practice

Practice is critical for almost anything, and coding is no different. Instead of watching another tutorial, put into practice the concepts you just learned to solidify your understanding. Most tutorials, books, and courses will give you opportunities to practice, and you should complete all of them. In addition to those, however, here are some more ways you can practice.

Projects

An excellent way for you to get experience is by building projects. Once you can create more complex applications, you should put some of them in your GitHub profile, resume, and portfolio.

Here are some links and resources to give you some project ideas.

Bonus

Here is a list of free public APIs you can use to build your projects.

https://github.com/public-apis/public-apis

Freelancing

Freelancing is one of the best ways to gain experience as a new developer. This is the approach I took when teaching myself how to code. Instead of trying to make money, I was working for the experience I could put on my resume, which was more valuable than money.

People will not pay you very much when you are just starting and have little experience. When you start out, your skills are not worth much because you don’t have any yet. This will change over time as you get better and gain more experience.

We all have to start somewhere.

Here are some ideas to get you started freelancing:

See if you can help a family member’s business or friend.
Churches usually have outdated websites that need a lot of work. Offer to work on their website for free, and I doubt they will say no.
Restaurants notoriously have horrendous websites. Ask if you can rebuild the website for a local restaurant in your area.
Look at the websites for various small businesses in your area. Ask the owner if you can rebuild, update, optimize, etc.
Remember, it’s hard for anyone to say no when you offer free work, as they have nothing to lose.

Freelance Websites

Freelance Tech & Tools

WordPress is the most popular CMS in the world. If you are freelancing, you have to know it.
Shopify is one of the most popular e-commerce platforms in the world. If you want to do e-commerce, you need to know it.
Squarespace is also incredibly popular as it allows you to build beautiful websites and stores without coding.

Open source

The best way to gain real-world experience is by doing open-source work. This can be incredibly intimidating initially, but the payoff is well worth it.

When you are just starting, the best way to get started is by submitting PRs (pull requests) with fixes for typos, grammar, broken links, and things like that. This requires little to no skill and involves you in the open-source community. Maintainers always appreciate when people correct mistakes or broken links in their docs.

If you are brand new and have never created a PR, or you don’t even know what that means, take this free course to learn how GitHub, PRs, and open source work:

How to Contribute to an Open Source Project on GitHub

Here are some ways to get started in open source:

As I mentioned, submit fixes to documentation sites for typos, grammar, and broken links.
Look at the issues tab on any GitHub repo for beginner-friendly issues. Lots of repos on GitHub will label beginner-friendly issues with things like “first-time contributor.”
A list of awesome beginners-friendly projects
Open Source for Developers – A Beginner's Handbook to Help You Start Contributing
First Timers Only - a list of open source projects for newbies

Hackathons

Hackathons are another great way to gain experience as a new developer. They may seem intimidating at first, but many hackathons are beginner friendly and welcoming.

A lot of them are virtual nowadays, too, since Covid.

Internships

Some companies offer internships which can be another great option to get your foot in the door and gain real experience. I don’t suggest doing an internship for free. The company should be paying you for your time. The nice thing about internships is that the company will typically offer you a full-time position if they like working with you during the internship.

It is a great way to get experience and land your first job too.

How to Create Developer Screencasts with Keynote

Robert Guss — Fri, 06 May 2022 13:44:06 +0000

In this article, I will show you how I create screencasts for developers using Keynote.

None of the links in this article are affiliate links.

I use a Mac, so all of the information and software mentioned in this article will be specific to Mac.

Screencast Examples

Before explaining the methods, tools, and techniques I use to create these screencasts, I thought it would be helpful to share a few examples. Please watch them to determine if this is something you are interested in learning more about.

Now that you have seen a few examples let’s break down the steps involved in creating them.

Writing the Script

The first thing I do is write the script that I will read when recording the screencast. A script helps me clarify my thoughts and serves as an outline of all the topics I wish to discuss. Writing is thinking aloud, so by having a script, I am confident that I won’t forget something or leave a critical point out.

One of the nice things about having a script is that you know precisely what you will say. Improvising or “just winging it” often wastes a lot of time and makes editing more difficult.

Once the script is complete, I split the script into multiple parts or sections. Each section will be a separate video. I do this because it allows me to record most of the videos in a single take, which is more natural. I do not enjoy editing videos, so anything I can do to minimize it is better.

Example Script

In the video below, I broke the script into nine different sections.

Here is what the script looks like:

I use Notion for all of my scripts. One of the nice things about using Notion is that it allows me to drag and drop sentences and ideas around as I shape the script. I also like it because it keeps everything in sync across all of my devices, as I usually read the script from my iPhone or iPad while recording. Keynote blacks out all external monitors while presenting, so I use my phone or iPad instead.

I will often make notes for myself within the script to remind myself of things I need to do. For example, I will often remind myself of the name of the keynote file I need to use for that section, when I need to advance the next slide, etc.

Once the script is complete, I then begin working on the slides.

Creating the Slides

This is the most time-intensive part of the process, especially if you are new to Keynote. Since I am making screencasts for developers, I will often have many code examples.

Highlighting & Animating Code Examples

One of the main reasons I like using Keynote for code examples is that I can highlight and draw the viewer's attention to specific areas or lines in the code. I learned this technique from the guys over at Egghead.io. They have an excellent video that goes in-depth on how to highlight and animate code here.

Animations with Keynote

Keynote also contains an incredibly powerful animation engine that allows you to create animations with relative ease. The most important animation tool within Keynote that you want to learn is “Magic Move.” You can find out more about how to create animations in Keynote from this awesome video by Sam Julien.

You can also “reverse engineer” the animations in the slides I used in the example videos above to better understand how to create animations in Keynote. Here are links to download the keynote files.

DX-Template-for-Screencasts.key

CI-Intro.key

Workflows-Actions.key

6-session-origin-spec.key

The first file, “DX-Template for Screencasts,” contains several template slides that I use regularly. It includes slides that mimic a terminal, VSCode, etc., so I don’t have to reinvent the wheel. Feel free to use these in your videos if you like.

Audio & Mics

Audio is one of the most important aspects of making videos, not just screencasts but any video. People can put up with a lower quality resolution, but they will NOT tolerate lousy audio, so getting your sound right is critical.

I use the Blue Yeti microphone, and it works pretty well. The problem with using it or any condenser microphone is how sensitive they are. Unless you are in an acoustically treated room, they will pick up all kinds of sounds and vibrations around you. If you don’t already own a mic, I recommend you use the Samson Q2U, a dynamic microphone that sounds excellent. Dynamic mics are less sensitive than condenser mics, so you won’t have to worry as much about room sounds or sounds outside of our room like lawnmowers, leaf blowers, cars, etc.

Regardless of the mic, it would be best to get your mouth as close to it as possible. You want the mic as close to your mouth as possible for the best quality sound.

You may also want to invest in a pop filter to protect your mic from picking up explosive sounds like when you make “p” sounds or “s” sounds with your voice.

If you don’t already have a mic, make sure to buy one that you can hook up to your computer via USB. Otherwise, you will have to purchase mic cables and an audio interface to hook up the mic to your computer, which is frankly overkill and unnecessary for screencasts. I have been a musician for over 20 years and already own a bunch of audio equipment, and I still use a mic with a USB connection for its convenience and because the audio quality is just as good.

Recording

Now that the script and the slides are complete, it is time to record. I use Screenflow to record all of my screencasts. I also use a tool called SwitchResX, which allows me to change the resolution of my monitors to whatever I want. Being able to control the resolutions of my monitors is essential for making screencasts. I always record at the following resolution.

1280x720, 60Hz HiDPI 16:9

This will record at 720 but with double the number of pixels, so when I later export from Screenflow, I can export at double the resolution. Recording at 720 makes everything large enough, and the HiDPI resolution provides plenty of pixels, so everything is crisp and clear.

When I am about to record, I press play in Keynote to start the presentation, and then I press my keyboard shortcuts to start the Screenflow recording and record the video.

I name each file for each video something like “video-1.screenflow", “video-2.screenflow,” etc. The numbers correlate to the numbers in my script, like in the example above.

Making Mistakes

It would be best if you accepted that you will make mistakes and say stupid things when recording. This is normal and will improve over time with lots of practice. What I like to do when I say the wrong thing, cough, breathe loud, etc., is to take a long pause while still recording and say that sentence or part over again. I rarely ever stop the recording, as I can edit and delete all the bad takes afterward.

Another important thing to note is that once you have finished recording the video, watch the entire thing immediately afterward to make sure you have all that you need. I used to record all of the sections without immediately reviewing them, only to find out that my audio was terrible or something else and had to re-record everything. Please don’t make the same mistakes as me. So once you have finished recording, make sure to watch and listen to it immediately to ensure everything looks and sounds good, then move on to the next video.

Editing

Now that you have recorded all of the sections of your video, you need to start editing. Open the first video and immediately save it as “video-1-edited.screenflow” or something similar. I always immediately save a copy and denote “edited” in the file name. This way, I have a copy of the original unedited version and the edited version. I do this because sometimes I make bad edits or mistakes that I cannot undo. I cannot tell you how many times I have done this and had to redo the recording again. This way, you will have a copy of the original to revert to if you make a mistake during the editing process.

I would highly recommend you do this, especially if you are brand new. You will thank me later.

I can’t go into great detail on how to edit videos in Screenflow. There are tons of helpful videos on YouTube that will help you, but for the most part, it is very straightforward. You don’t need to know a whole lot, just the basics like how to cut, trim, transition, etc. Screenflow makes all of this very easy for you.

The first thing you need to do is create a new ScreenFlow project that contains all of your videos. I typically duplicate the “video-1.screenflow” file and rename it to the name of the screencast, like “cypress-origin-api.screenflow.” Then I open each screenflow project, copy the audio and video tracks and paste them into the “cypress-origin-api.screenflow” project, or whatever you named your project. After going through each one, you should have all the video and audio tracks combined into a single ScreenFlow project.

Next, before I start editing, I adjust the audio. Take a look at this screenshot.

You want to select all of the audio tracks and then click on the speaker icon in the right sidebar. Check the “Smooth Volume Levels” checkbox and the “Remove Background Noise” checkbox. You can adjust how much background adjustment is necessary with the slider below it. This will help to make your audio levels sound consistent.

After adjusting the audio, I begin to trim, edit, delete, etc.

Ripple Delete

One technique that is a game-changer for editing in Screenflow is something called Ripple Delete. It will significantly cut down the amount of time you spend editing.

You can watch this video to learn it: How to Ripple Delete.

Recut

Another tool that I have heard a lot of great things about, but have yet to use myself is Recut. Check it out and see if it helps you.

Descript

Another tool we use a lot at work is called Descript. It is a great tool for editing and collaborating on screencasts. What makes it really powerful is the ability of its AI to learn your voice. This allows you to easily fix misspoken words, sentences, phrases, etc. All you have to do is highlight that word(s) in descript, type out the correct word(s) and Descript will use your own voice to correct it. It sounds incredibly realistic.

A tool like this is by no means essential, but it does come in handy. It is worth looking into if you are going to be making a lot of screencasts.

Exporting

Once you are finished editing and are satisfied with the screencast, it is time to export. Here are the settings I use when exporting.

Make sure you select the “Type: Manual” and select the “customize” button. Here are the custom settings I use in that menu.

Notice that the resolution is set to 2560x1440, which is 100% the original. I record at HiDPI because it gives you double the number of pixels.

I also always uncheck the “Letterbox Content” checkbox.

Finally, click “Export.”

Summary

This article went over how I create developer screencasts with Keynote. I tried to be as detailed and specific as possible, as the devil is really in the details with this kind of thing. If you found this helpful and use any of these ideas or techniques in your screencasts, I would love to see them. Please share them with me on Twitter or send me an email. All of my contact info is in the footer.

Introducing Real World Testing with Cypress

Robert Guss — Mon, 18 Apr 2022 13:55:38 +0000

Overview

Real World Testing with Cypress (RWT) is a four-course curriculum that teaches everything you need to know about testing modern web applications with Cypress.

What You Will Learn

The curriculum contains four courses and over 25 lessons.

1. Testing Your First Application

How to test a simple TodoMVC app with Cypress.

First, we teach you how to test a simple TodoMVC application with Cypress. We thought it would be best for you to “get your hands dirty” right away.

2. Testing Foundations

The foundations you need to write great tests.

Next, we teach you the foundational knowledge you need to write great tests. We cover topics like “testing mindset,” knowing what to test, the difference between manual and automated testing, the differences between unit, integration and end-to-end tests, etc.

3. Cypress Fundamentals

Absolute fundamentals of Cypress you must know to be successful

Then we cover Cypress fundamentals, which go over all of the important Cypress-specific knowledge you need to write the best tests possible with Cypress. Even if you have been using Cypress for years, I promise there will be some gold nuggets in there.

4. Advanced Cypress Concepts

Advanced Cypress concepts to take your tests to the next level.

Finally, we cover advanced Cypress concepts. In this course, we teach you how to initialize and seed your database for testing, how to run tests in CI, how to test network requests, how to build custom Cypress commands, etc.

Real World Examples

In addition, we have also prepared over 30+ examples of real-world tests against the Real World App. This application has been around for a couple of years now, but since it contains some rather advanced concepts and examples, much of it was beyond reach for people just getting started. To solve this problem we have written in-depth articles for every example which explains line by line what each test is doing.

These examples put into practice all of the principals and concepts explained within the curriculum.

Tutorials

Finally, we aim to demonstrate how to test more real-world applications against various technologies and providers.

How to Build and Test a Next.js and Shopify Store

In this six-part tutorial, we teach you:

How to create a Shopify partners store
How to create a custom front-end for your store with Next.js,
How to test the app with Cypress
How to run your tests in CI with GitHub Actions
How to run your tests in parallel with the Cypress Dashboard
How to deploy your app to production on Vercel

Contributing

The curriculum is open source and can be found on GitHub.

What is Zettelkasten?

Robert Guss — Sat, 14 Aug 2021 19:36:14 +0000

Photo by Maksym Kaharlytskyi on Unsplash

History

The word Zettelkasten is a German word that means "slip box." However, it is commonly used to refer to a system of note-taking, which was popularized by a German Sociologist name Niklas Luhmann.

During his lifetime, Luhmann created over 90,000 notes in his Zettelkasten which allowed him to publish over 50 books and over 600 articles. His estate also contains over 150 unfinished manuscripts, one of which is over 1,000 pages long.

So what exactly is a Zettelkasten and how does it work?

The Zettelkasten Method

Luhmann's Zettelkasten and note-taking method is rather simple which is what makes it so profound. Here is how it works:

Capture a single thought, in your own words, in a single note. The goal here is to make sure that the note has all of the context you need so that you will understand it at a later point in time, without needing to look up the source of where it came from.
Link this note with other notes within your Zettelkasten system. Herein, lies the key and the secret of the entire system and method. What makes a Zettelkasten powerful, is not the notes themselves, but their relationship to one another. You can think of this like hypertext on the web, where one page links to another. This system of linking notes mimics what our brains naturally do, i.e Neuroplasticity. The Zettelkasten becomes a "second brain" that you build externally to yourself.

Now let's learn how we can create one.

How to create your own Zettelkasten

I am going to be describing my process, which is not necessarily the "right way." Truth be told, there really isn't one. The most important thing is that you find a process that works for you. You are building your own personal knowledge management system, aka a "second brain" for yourself, so feel free to adapt and modify the method to suite your own needs.

I will be describing my method in the context of taking notes on a book, but my process is identical for any medium.

Literature Notes

Before I begin reading the book I will create a new note in Obsidian. This new note will be considered a "literature note." A literature note is simply a note where I capture my own thoughts about something that I am reading in the book. The key here is not to copy and paste or write down verbatim, a passage or sentence from the book. The intent is to take the time to really think about this thought, internalize it, and write it down in my own words. Once I have captured the thought or idea in my own words, I move on and keep reading. I continue this process of taking notes until I finish reading the book.

By the end of the book I will have several notes of my own thoughts and ideas, from various concepts I learned from the book.

Confession & Full Transparency

There are times when an author's words are so well written and perfectly encapsulate an idea that I cannot possibly word it any better. In that case, I capture the idea as a quote, and make sure I know that it is a quote and not my own thinking. I will also make note of the page number to reference where this quote came from.

Permanent Notes

So now that the book is finished and I have a single "literature note" with lot's of notes, ideas, quotes, etc. I then review all of these thoughts and ideas and determine which ones I would like to turn into "permanent notes."

Permanent notes are atomic.

Atomic means they contain all of the context necessary to understand the thought or idea, without needing to look up the source from which it came from. The meaning is self-contained within the note itself.

So which notes become permanent notes?

Permanent notes are thoughts or ideas that I feel are important and do not want to forget. Once I find a thought or idea from my literature note that I want to turn into a permanent note, I will create a brand new note for it.

I will typically expand upon the idea to make sure it encapsulates the context and everything it needs to be understood by me in the future. I don't write more than a couple of paragraphs typically.

The goal here is not to write a lot of words, simplicity and brevity are key. Write down the minimum amount of information needed to capture the idea so it can be understood on its own, by you, at some point in the future.

Here is an example of one of my permanent notes.

# We often mask our lack of understanding using complicated vocabulary and jargon

The use of complicated and/or sophisticated language is often used to hide the fact that we do not fully understand what we are talking about. Being able to speak in simple vocabulary, use simple illustrations, etc., demonstrates our full comprehension of a subject.

If we can explain our subject to a child, then this is a good indicator that we do not have any gaps in our understanding.

> If you require complicated terminology to explain what you know, you have no flexibility. When someone asks you a question, you can only repeat what you’ve already said.
> -- https://fs.blog/2021/02/feynman-learning-technique/

See: [[Perfection is achieved when there is nothing left to take away]]

---

Date: 2021-06-02
Status: #permanent

Linking Notes

In the example above you will notice a link, [[Perfection is achieved when there is nothing left to take away]] which links to another note within my Zettelkasten.

This is what that note looks like:

# Perfection is achieved when there is nothing left to take away

> Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

---

Author: Antoine de Saint-Exupéry
Source: Airman’s Odyssey. https://www.goodreads.com/work/best_book/11753-airman-s-odyssey.
Type: #quote

This is the power of using the Zettelkasten method. By linking notes together, you are creating new connections and pathways between various types of information and thought — and remember, these are your own thoughts.

As you begin to add more notes into your Zettelkasten the connections between those notes grows. The more you put into your Zettelkasten the more you get out of it. This is why Luhmann's Zettelkasten of over 90,000 notes allowed him to write as many books and articles as he did.

The Goal of a Zettelkasten is writing

I only do what is easy. I only write when I immediately know how to do it, if I falter for a moment, I put the matter aside and do something else
-- Niklas Luhmann from "How to take Smart Notes" by Sönke Ahrens page 15

When Luhmann began to write a new article or book, he would simply open his Zettelkasten and follow the links between his notes. He would then take all of the notes that made the most sense for his subject and use them as his outline and first draft.

His Zettelkasten provided the framework for his new projects which meant he never started from a blank page. He had a vast collection of thousands of notes from which he could draw inspiration, insight, and inquiry — all of these insights from his Zettelkasten were his own thoughts. After writing his first draft, he would then do further research to fill in any gaps in his arguments and then publish.

Luhmann would typically work on several books at the same time, which is why he was so prolific as an author. Working on multiple projects also kept him from ever getting "stuck." Listen to what he would do, in his own words, whenever he was felt stuck:

I always work on different manuscripts at the same time. With this method, to work on different things simultaneously, I never encounter any blockages.
-- Niklas Luhmann from "How to take Smart Notes" by Sönke Ahrens page 141

Resources for learning more

This article really only scratches the surface as the proverbial "rabbit hole" goes quite deep when it comes to Zettelkasten, Personal Knowledge Management, Building a Second brain, etc. If you want to take the "red pill" and go deeper, here are some great resources:

How to manage your expectations while teaching yourself how to code

Robert Guss — Tue, 10 Aug 2021 12:56:58 +0000

Photo by Franz Harvin Aceituna on Unsplash

Programming is hard. Don't let anyone tell you otherwise. This profession is not easy. Teaching yourself how to code, especially when you have no prior experience, can feel daunting and overwhelming. This is why one of the most important lessons you can learn before you begin this journey is to embrace being a beginner.

You will be terrible at first and that's ok

When you are first learning something, you typically are quite terrible at it. In fact, most of us struggle for quite some time when first learning a new skill, language, subject, instrument, etc. However, for some strange reason, people teaching themselves how to code completely miss this.

When you are first learning how to code, you really have no idea what you are doing. Am I doing this right? Should I take this tutorial or that one? Should I take both? Which one should I take first? Should I go to a boot camp? How do I find a mentor? How much do I need to know before I get my first job? The questions are endless, and that's expected, because you don't know what you're doing.

Embrace not knowing.

You must learn to embrace being a beginner when teaching yourself how to code. You are going to get stuck a lot! You are going to make tons of mistakes, you will do so many things "wrong." Here is the reality of it all though...

You are supposed to get stuck, make mistakes and do the wrong things over and over again. This is called learning, the very thing you set out to do.

Embrace being a beginner.

When you are learning to program, you are exposing yourself to many new concepts that at first seem completely foreign to you, and that's because they are. If these concepts were not foreign then you wouldn't be learning anything.

Managing Expectations

One of the most valuable lessons I learned while on this journey, and frankly before I even started, was knowing how to manage my expectations. You see prior to teaching myself how to code I taught myself how to play guitar at the age of 14. I didn't have any lessons, all I had was a guitar, the internet and an incredible desire to play. I practiced for hours and hours each and every day, and it took me about one year to become a "bad" guitar player.

Let that sink it for a moment. One year of practicing virtually every single day for several hours made me a bad guitar player. I could have just given up right then and there and said this is not for me, clearly I don't have any talent for this. Maybe I did, maybe I didn't, maybe I still don't, who knows.

The point, however, is that I never gave up. I kept practicing.

All of that practice finally paid off when I was accepted to Berklee College of Music at the age of 24. I was accepted as a bass player and managed to teach myself that instrument too, without any private lessons as well. I couldn't read music, I didn't know what scales were or key signatures for that matter, but I could play. I played countless shows in various bands and practiced for countless hours over those 10 years.

I embraced being a beginner because I knew that at some point I no longer would be.

You are not too old and yes you are smart enough

A common question that I see come up again and again is, "I am x years old, am I too old to program?" No. It doesn't matter how old you are.

The real question is how badly do you want to program? If you want it and are willing to work hard for it, you will get it, the same holds true for most things in life.

Hard work wins.

Don't be like me and think that you need to have a PhD from MIT in mathematics or physics in order to do this, you don't. I have been a full-time developer for over six years now and I have used very little math in my day to day work. Obviously this will vary depending upon the type of programming you are doing, but don't let it stop you. If you need better math skills, then you will learn those skills too, as needed. That "as needed" part is key, by the way.

You only need to know enough to get the job done, you don't have to know it all.

You are always learning

Another misconception many people have when teaching themselves to code is that they have to have it all figured out before they can apply for their first job. I got my first junior developer job after five months of teaching myself how to code. I had no idea what I was doing, however, I knew I would grow into the role over time.

You need to realize this too, and the sooner the better.

You are always learning in this field and you always will be. Things change all the time and that is what makes it fun. Sure we get paid a lot of money to do this, but you will be absolutely miserable if you are not comfortable with being put into challenging situations and asked to solve problems you have never seen before on a daily basis.

Developers who have been at this for a very long time are still learning and believe it or not they can still learn things for you, even if you are just a junior developer. Everyone's experience is unique and everyone has something unique to offer, don't think you don't simply because you are new.

Leverage what you have

If I am being completely honest, the real reason I was hired at that company was because of my degree in music, as Berklee is a well respected school. The company that hired me was a music company and they were willing to take a chance on me because of my degree in music, not because of my programming skills.

This is something you should be thinking about too. You may not have a lot of experience in programming just yet, but what do you have experience with? If you have experience in retail then try to get a developer job working for a retail company, maybe working on their e-commerce store. If you have experience teaching, then try to get a developer job at a software company in the education space.

Leverage what you already have instead of trying to start from scratch.

Wrap Up

The sooner you learn to embrace being a beginner the more effective your learning will be. If you can learn to manage your expectations before you even begin to teach yourself how to code, you will be less likely to give up. You will already be anticipating getting stuck, making mistakes, feeling stupid, etc.

The biggest thing standing if your way from learning how to code is fear. It's all in your head and it's all a lie.

Learn to turn it off by embracing being a beginner.

Why Writing is Important for Software Developers

Robert Guss — Mon, 09 Aug 2021 13:54:09 +0000

Writing is thinking out loud.

If you want to become a great software developer than you need to be a great writer. I am quite surprised to find so few people talking about how important your writing skills are within the world of software development. Being able to clearly articulate your thoughts is practically a superpower, because most people struggle to do it well.

Just think about how much writing you need to do as a software developer, that does not involve writing code. Emails, Slack, documentation, readme's, code comments, git commit messages, pull requests, code reviews, etc. I think it would be fair to say that most developers write more words than code every day, and yet I never hear of a developer talking about how they need to improve as a writer. Being able to write great code is incredibly important, please don't misunderstand me, however, being a great writer is even more so.

Great writers are great thinkers.

I mentioned earlier that writing is thinking out loud. When you are reading someone else's words, you are reading their thoughts after them. Those words are the result of their thinking. The same can be said about code. When you are doing a code review, or checking out the source code of some open source project, you are reading someone else's thoughts after them.

This is why when you read great writing you are actually reading great thinking. When you see well written, concise, simple and easy to reason about code, you are reading great thinking. The common denominator is great thinking in both cases.

So how do you become a better thinker? By becoming a better writer. How do you become a better writer? By becoming a better reader and by writing a lot.

There are no shortcuts

I am sure you have heard something along the lines of, "a great developer is a lazy developer." This is true and the sentiment often refers to the fact that great developers automate as much as possible. We possess the power to wield computers however we wish, and when we use this power to delegate much of our work, we are considered "lazy" which is an admirable trait.

The trait of being a "lazy" developer does not hold water however when it comes to being a great writer. Great writers are anything but lazy. Great writers show up, each and every day, and write -- and they write a lot! There simply are no shortcuts to becoming better at writing. The more and more you write the better you will become at it, but you have to put in the work.

There are no shortcuts.

The beautiful thing about this, is that by recognizing this you already have a leg up on the competition, if you are willing to put in the work. Most people are not willing to put in the work required to become a great writer, and this gives you a significant advantage.

Natural talent only gets you so far

I am sure many of you reading this now are thinking, "but I am not a great writer." Very few of us are born great writers, we become great writers by the act of writing... a lot!

I was quite fortunate to study at a very prestigious music school in college and was surrounded by what felt like thousands of modern day Mozart's. I was the underdog. I couldn't read music, I never had a private music lesson in my life before attending school, and here I was surrounded by kids with perfect pitch, who traveled the world playing with some of the best symphonies on the planet, had record deals, you name it. On the surface it seemed like I didn't belong, and maybe that was true, at least at first. However, what I brought to the table and what made me stand out from all of them was my work ethic.

You see, many of them were quite arrogant and relied solely upon their natural God given talent. I was not gifted with as much talent as most of them, but I worked harder than all of them. Eventually, I surpassed them, because of my hard work ethic. Developing a hard work ethic was one of the greatest lessons I learned while studying there as it has catapulted my career ever since.

The same is true for you and your writing. Not everyone is born a Hemingway, and even he had to write a lot to develop his tremendous talent.

Most people are not born great, they become great.

You simply need to write more than the competition and eventually you will surpass them. There is a limit to how far natural talent will get you, but there is not limit to how far you can get with a strong work ethic. So work hard at your writing and hone those skills on a regular basis, every day if possible.

Establish a daily writing habit

Establishing habits becomes increasingly more difficult the older you become, so start to establish a daily writing habit as early as possible. You don't have to write 5,000 words a day, you simply need to exercise your writing muscles. If you only have 10 minutes, than work with what you have. Writing for 10 minutes a day is more effective than not writing at all.

Writing to throw it all away

Often times people get stuck staring at the blank page because they cannot think about anything to write about. They think they have to write something perfect, well edited, well informed, with a sophisticated vocabulary. That may be true if you are writing for a large publication or trying to write a NY times best seller, but you are doing none of those things. You are writing emails, Slack messages, documentation, etc.

When you sit down to write every day, just write, knowing that you can simply throw it all away. What is most important is showing up and practicing your writing each and every day. If you really have no ideas, write about how you have no ideas, and how you are feeling about that. Write about what you would like to accomplish that day, or what you are grateful for, etc. Just write!

Practice in Public

Finally, the last thing I would like to mention is the importance of practicing your writing in public. If you don't have a blog, start one. If you don't want to write a blog, post on Twitter or your social media platform of choice on a regular basis. Here is the thing, if you are just starting out, no one is going to read what you write anyways, so what are you so concerned about? Just start writing.

Over time your writing will improve and you will start to gain some attention and begin to build a small audience. As your audience grows, so will your writing skills. The both grow naturally and organically together, so stop worrying and just start writing and publishing as often as possible.

Wrap Up

Writing is incredibly important as a software developer and will serve you well for the rest of your career and your life. Establish a daily writing habit starting today. The benefits will far exceed anything you can imagine.

Jamstack ecommerce site with Gatsby & Stripe Checkout

Robert Guss — Wed, 06 Jan 2021 13:24:58 +0000

This project builds on top of the Gatsby E-commerce Tutorial provided in the official Gatsby docs, and the Use Shopping Cart Example repo.

In this project, we will be creating a simple e-commerce web site with Gatbsy and Stripe checkout. Stripe checkout is client-side checkout that allows us to integrate a complete checkout experience without a backend.

Installing Gatsby

First, you will need to download and install Gatsby

npm i -g gatsby-cli

With the CLI installed, create a new project.

gatsby new stripe-checkout
# name the project whatever you would like

Open up the project and run the development server.

gatsby develop

Once the server is up and running, you should be able to preview the site at http://localhost:8000/.

Installing & Configuring Stripe

You will need to create a Stripe account if you don't already have one. You can sign up for a free account to provide all that we need for our project.

Once you have your Stripe account set up, head back over to your terminal to install the Stripe NPM packages.

npm install @stripe/stripe-js gatsby-source-stripe

With both of these packages installed, we now need to add the gatsby-source-stripe plugin to our gatsby-config.js file. Add the following to the config.

{
  resolve: `gatsby-source-stripe`,
  options: {
    objects: ["Price"],
    secretKey: 'secret key goes here',
    downloadFiles: false,
  }
},

You will notice a key called secretKey that we need to populate with Stripe's secret key. We will configure this next.

The entire file should look like this.

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Gatsby Default Starter`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    {
      resolve: `gatsby-source-stripe`,
      options: {
        objects: ['Price'],
        secretKey: 'secret key goes here',
        downloadFiles: false,
      },
    },
  ],
};

Head back over to the Stripe dashboard and click on "Developers" and then "API keys" on the left-hand side.

make sure to toggle on the "Viewing test data" as well.

In the "Standard keys" section, you should see the following.

Click the "Reveal live key" to show your secret key and then copy it.

Creating .env variables

We do not want to paste our secret key into our gatsby config because it would expose it to the outside world. This is a huge security risk! To protect our keys, we will create a .env file, which allows us to use our keys without exposing them to the public.

In the root of our gatsby project, create two files called .env.development & .env.production

touch .env.development
touch .env.production

Within both files, add both your Publishable and Secret keys like so:

GATSBY_STRIPE_SECRET_KEY=sk_test_FOlN...
GATSBY_STRIPE_PUBLISHABLE_KEY=pk_test_ibqK...

The GATSBY prefix is important because we need these variables exposed to the client. You can read more about this here

.env.production will contain the keys we need for production; for the sake of this example, our keys will be the same, but in a real-world project, they would be different.

Now let's add this file to .gitignore.

# dotenv environment variable files
.env*

This may already exist from when we first created our project, but double-check just in case.

Now we need to use these env variables in our Gatsby config.

{
  resolve: `gatsby-source-stripe`,
  options: {
    objects: ['Price'],
    secretKey: process.env.GATSBY_STRIPE_SECRET_KEY,
    downloadFiles: false,
  },
},

We also need to include our .env.development file in our config to have access to the variables. Add the following snippet to the top of the gatsby-config.js file just above the module.exports = {

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {

Stripe Checkout

Now let's set up and configure Stripe checkout. Head over to https://dashboard.stripe.com/settings/checkout. Under the
"Next steps" section, click the "Enable client-only integration" button.

Click "Allow" on the modal that pops up.

You should now see some additional fields in the "Next steps" section.

Next, we need to create some products in Stripe to sell on our site. Click on the "Create your first product" link.

On the next screen, click on the "Add Product" button to add our first product.

For this example store, we are going to be selling t-shirts for developers. So let's find some images of dev t-shirt's that we can sell. You are free to use whatever images or products you would like. I am going to use some photos I found from Redbubble

Enter a name for the product, upload the image, set the price, and check the "one-time" button.

Make sure to add a few products so that we have some actual products to populate our store page with.

Adding Stripe as a utility function

Per Gatsby's docs, they recommend that we wrap Stripe.js into a utility function so that we can use it across multiple pages.

Create a new file in src/utils/stripejs.js and add the following.

you will need to create the utils folder as well

import { loadStripe } from '@stripe/stripe-js';

let stripePromise;
const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY);
  }
  return stripePromise;
};

export default getStripe;

Adding a shopping cart

We will be installing a shopping cart package that will allow our customers to add t-shirts to their cart, as this does not come out of the box with Stripe checkout. Otherwise, customers will only be able to buy a single product at a time.

We will be installing Use-Shopping-Cart

Install the shopping cart with the following command.

npm install --S use-shopping-cart

Displaying our products

Now that we have some products uploaded to Stripe, and your shopping cart installed, we need to display them on our Gatsby site.

The following code comes from the Use Shopping Cart Example Gatsby Repo with only slight modifications made by me

Index Page

Withing /pages/index.js, add the following.

import React from 'react'

import Layout from '../components/layout'
import SEO from '../components/seo'

import Skus from '../components/Products/Skus'
import CartOverview from '../components/CartOverview'

import { loadStripe } from '@stripe/stripe-js'
import { CartProvider } from 'use-shopping-cart'

const stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY)

const CartExample = () => (
  <Layout>
    <SEO title="Cart Example" />
    <h1>Checkout with cart example</h1>
    <h2>
      With{' '}
      <a href="https://use-shopping-cart.netlify.app/">use-shopping-cart</a>
    </h2>
    <CartProvider
      mode="client-only"
      stripe={stripePromise}
      successUrl={`${window.location.origin}/page-2/`}
      cancelUrl={`${window.location.origin}/`}
      currency="USD"
      allowedCountries={['US', 'GB', 'CA']}
      billingAddressCollection={true}
    >
      <CartOverview />
      <Skus />
    </CartProvider>
  </Layout>
)

export default CartExample

Index Page Breakdown

<CartProvider // This component comes from the use-shopping-cart package
  mode="client-only" // allows client-side checkout
  stripe={stripePromise} // Our Stripe instance so we can communicate with the Stripe API
  successUrl={`${window.location.origin}/page-2/`} // the url to redirect to after a successful purchase
  cancelUrl={`${window.location.origin}/`} // the url to redirect to when they cancel a purchase
  currency="USD" // US Dollars is the type of currency we are accepting
  allowedCountries={['US', 'GB', 'CA']}
  billingAddressCollection={true} // allows the collection of the users billing address for Stripe
>
  <CartOverview /> // We will create and go over this component later
  <Skus /> // We will create and go over this component next
</CartProvider>

Skus Component

Create a new folder called Products inside the src/components folder and create a file called Skus.js.

// src/components/Products/Skus.js
import React from 'react'
import { graphql, StaticQuery } from 'gatsby'
import SkuCard from './SkuCard'

const conatinerStyles = {
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  padding: '1rem 0 1rem 0',
}

export default (props) => (
  <StaticQuery
    query={graphql`
      query ProductPrices {
        prices: allStripePrice(
          filter: { active: { eq: true }, currency: { eq: "usd" } }
          sort: { fields: [unit_amount] }
        ) {
          edges {
            node {
              id
              active
              currency
              unit_amount
              product {
                id
                name
                images
              }
            }
          }
        }
      }
    `}
    render={({ prices }) => (
      <div style={conatinerStyles}>
        {prices.edges.map(({ node: price }) => {
          const newSku = {
            sku: price.id,
            name: price.product.name,
            price: price.unit_amount,
            currency: price.currency,
            image: price.product.images,
          }
          return <SkuCard key={price.id} sku={newSku} />
        })}
      </div>
    )}
  />
)

Skus Component Brekdown

query ProductPrices {
  prices: allStripePrice(
    filter: { active: { eq: true }, currency: { eq: "usd" } }
    sort: { fields: [unit_amount] }
  ) {
    edges {
      node {
        id
        active
        currency
        unit_amount
        product {
          id
          name
          images
        }
      }
    }
  }
}

This is our GraphQL query which fetches the product data from Stripe. We are filtering for only active products where the currency is == US Dollars. We then retrieve the id, whether or not the product is active, the currency, unit_amount, product id, product name, and product images.

render={({ prices }) => (
  <div style={conatinerStyles}>
    {prices.edges.map(({ node: price }) => {
      const newSku = {
        sku: price.id,
        name: price.product.name,
        price: price.unit_amount,
        currency: price.currency,
        image: price.product.images,
      }
      return <SkuCard key={price.id} sku={newSku} />
    })}
  </div>
)}

We then take the results of our GraphQL query and map over the products returned and create a newSku object for each product. We then take the newSku object and pass it into the <SkuCard /> component via the sku prop.

Sku Card Component

Create a new file called SkuCard.js in the src/components/Products folder.

// src/components/Products/SkuCard.js
import React from 'react'

import { useShoppingCart, formatCurrencyString } from 'use-shopping-cart'

const cardStyles = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-around',
  alignItems: 'flex-start',
  padding: '1rem',
  marginBottom: '1rem',
  boxShadow: '5px 5px 25px 0 rgba(46,61,73,.2)',
  backgroundColor: '#fff',
  borderRadius: '6px',
  maxWidth: '300px',
}
const buttonStyles = {
  fontSize: '13px',
  textAlign: 'center',
  color: '#fff',
  outline: 'none',
  padding: '12px',
  boxShadow: '2px 5px 10px rgba(0,0,0,.1)',
  backgroundColor: 'rgb(255, 178, 56)',
  borderRadius: '6px',
  letterSpacing: '1.5px',
}

const SkuCard = ({ sku }) => {
  const { addItem } = useShoppingCart()

  return (
    <div style={cardStyles}>
      <img src={sku.image} alt=""/>
      <h4>{sku.name}</h4>
      <p>
        Price:{' '}
        {formatCurrencyString({
          value: parseInt(sku.price),
          currency: sku.currency,
        })}
      </p>
      <button style={buttonStyles} onClick={() => addItem(sku)}>
        ADD TO CART
      </button>
    </div>
  )
}

export default SkuCard

Sku Card Component Breakdown

This component is fairly straight forward. We take the data passed into it via the sku prop and then render the appropriate markup and styling accordingly. This card component will wrap each of our products and display the product image, name, price and the Add to Cart button.

Shopping Cart Component

Lastly, we will create a component for our shopping cart.

// src/components/CartOverview.js

import React, { useState } from 'react'

import { useShoppingCart } from 'use-shopping-cart'

const buttonStyles = {
  fontSize: '13px',
  textAlign: 'center',
  color: '#fff',
  outline: 'none',
  padding: '12px',
  boxShadow: '2px 5px 10px rgba(0,0,0,.1)',
  backgroundColor: 'rgb(255, 178, 56)',
  borderRadius: '6px',
  letterSpacing: '1.5px',
}

const Cart = () => {
  const [loading, setLoading] = useState(false)
  /* Gets the totalPrice and a method for redirecting to stripe */
  const {
    formattedTotalPrice,
    redirectToCheckout,
    cartCount,
    clearCart,
  } = useShoppingCart()

  return (
    <div>
      {/* This is where we'll render our cart */}
      <p>Number of Items: {cartCount}</p>
      <p>Total: {formattedTotalPrice}</p>

      {/* Redirects the user to Stripe */}
      <button
        style={buttonStyles}
        disabled={loading}
        onClick={() => {
          setLoading(true)
          redirectToCheckout()
        }}
      >
        {loading ? 'Loading...' : 'Checkout'}
      </button>
      <button style={buttonStyles} onClick={clearCart}>
        Clear cart
      </button>
    </div>
  )
}

export default Cart

Shopping Cart Component Breakdown

Our shopping cart displays the total number of products in our cart and the total price of all of those items and two buttons. One button redirects to the checkout, which is Stripe checkout in our case, and the other empties the cart.

Our site should now look like this.

Finished Store

Add a couple of products to the cart and then click "Checkout."

If everything goes well, you will see Stripe checkout.

Fill out the details and use the special Stripe credit card 4242 4242 4242 4242. For the expiration date, choose any date in the future and use any three-digit number for the security code.

Now, if you open up your Stripe dashboard and click on "Payments" in the left sidebar, you should see the purchase you just made.

remember to make sure the "Viewing test data" is toggled on in the left sidebar

Deploying to Vercel

We will deploy our site to Vercel, another popular hosting provider for Jamstack sites. Head over there and sign up for a free account.

Before we can use Vercel, we first need to push our Gatsby site up to GitHub.

If you forget how to do this, please take a look back at the Hugo Blog project where I show you how to set this up.

After logging in, you should see Vercel's dashboard.

Click on "Import project" and then "Import Git Repository."

You then need to paste in the URL of your repo from GitHub and press "Continue."

Vercel is smart enough to detect that this is a Gatsby project, and so the "Build and Output Settings" are already configured for us. However, we need to paste in our .env variables in the "Environment Variables" section.

Then press the "Deploy" button.

After a couple of mins or so, you should see the following.

Click the "Visit" button to see the live site.

Make a test purchase to ensure that Stripe checkout is working correctly.

GitHub Repo

The completed project can be found here inside of Gatsby-eCommerce/final
GitHub Repo

Wrap Up

In this tutorial, we learned how to create an ecommerce site using Gatsby and Stripe Checkout. We also installed a shopping cart plugin and deployed our site to Vercel.

Understanding the Jamstack Book

My book Understanding the Jamstack is "pay what you want." You can get it for free by entering 0 for the price at checkout.

Buy Understanding the Jamstack

Jamstack membership site with Eleventy & Memberstack

Robert Guss — Wed, 06 Jan 2021 13:23:23 +0000

For this project, we are going to be building a membership site using the Eleventy static site generator and Memberstack. We will then deploy our membership site with Surge.

Installing Eleventy

First, you will need to download the course repo and use the start/ folder located within Eleventy-Membership. This repo contains the theme for our site, which will allow us to hit the ground running. Memberstack provided the theme as just a .zip of HTML, CSS, and js files. I then took all of those files and integrated them with Eleventy to make our lives easier and so that you can become familiar with another static site generator.

Open your terminal inside of the start/ folder and install the npm packages.

npm i

Then start the eleventy server to serve up our site.

npm start

The terminal should display various URLs to access the site.

I like to use http://localhost:8080/, which is the "Local" URL.

When you open the URL in your browser, you should see a site that looks like this.

It is a relatively simple site with some placeholder content and two pricing tables at the very bottom. Take a couple of mins to click around on the navigation links to see what the pages look like. There is a login form, a signup form, and two membership areas.

We will be using Memberstack for handling our user login, authentication, sessions, and payments. Memberstack will handle all of the backend, whereas we just have to provide the front-end content for our members.

Integrating Memberstack

Before we can begin using Memberstack, you need to sign up for a free account. Once you have signed up and log in, you will see the following screen.

Choose "HTML/CSS"

On the next screen, give your site a name. I called my "Eleventy Membership," but you can name it whatever you would like. Also, make sure to select the need to accept payments as we will be integrating with Stripe later. Then click the "Let's go!" button.

You will land on your membership dashboard for our site.

Memberstack gives us a checklist we need to follow to set up our new site. Click on the "Create a membership" button on the Setup Checklist.

On the next screen, click on the "New Membership" button. Here is where we will set up our two memberships, "basic" & "premium". Let's start with the basic plan first.

Basic Membership

Enter "Basic Plan" for the plan name.
Select the "Require Payment" button.
Enter $49 for the price. This is the price listed on the pricing tables of our site.
Select "Monthly" for the billing frequency
Free Trial, Setup Fee & Collect taxes can remain off for now.

Now click on the "Hide Content" button in the "Members-only content" section. This section will make sure that users who do not have access to either membership plan cannot access the content.

Enter "Basic Plan" for the content name.
Enter basic for the "Hide pages & folders" field. This will hide all of the basic plan content from users who do not have a basic plan.
Enter login for the "Access denied page." This will redirect users who try to access the basic account page who are not logged in or are not paying subscribers.
Click the "Create" button at the bottom.

For the "Page after signup" & "Page after login" enter basic/account/

Memberstack will redirect any user who has a "basic plan" membership to the basic account page after signing up and each time they log in.

Then click the "Create Membership" button.

Your Membership dashboard should now look like this.

Premium Membership

Click on the "New Membership" button.

Enter "Premium Plan" for the plan name.
Select the "Require Payment" button.
Enter $499 for the price. This is the price listed on the pricing tables of our site.
Select "Yearly" for the billing frequency
Free Trial, Setup Fee & Collect taxes can remain off for now.

Now click on the "Hide Content" button in the "Members-only content" section. This section will make sure that users who do not have access to either membership plan cannot access the content.

Enter "Premium Plan" for the content name.
Enter premium for the "Hide pages & folders" field. This will hide all of the premium plan content from users who do not have a premium plan.
Enter login for the "Access denied page." This will redirect users who try to access the premium account page who are not logged in or are not paying subscribers.
Click the "Create" button at the bottom.

Make sure that both the "Basic Plan" & "Premium Plan" are on. Our premium members get access to both basic and premium content.

For the "Page after signup" & "Page after login" enter premium/account/

Memberstack will redirect the users who have a "premium plan" membership to the premium account page after signing up and after logging in.

Then click the "Create Membership" button.

Your Membership dashboard should now look like this.

Integrating Memberstack Memberships

Now that we have both of our memberships configured, we need to integrate them on our site so that our users can signup for them.

Underneath the "Membership Plans" section of our dashboard are both membership plans. To the right of those are buttons called "Signup link" this is the code snippet we need to link our memberships on our site to Memberstack. Click on the "Signup link" for the Basic plan first.

Then click the "I'd rather use data attributes" and copy the attribute.

Then head back over to our site's code and open the index.html file and scroll to around line 232 and add the the data attribute to our basic signup link like so:

<a
  data-ms-membership="5fd8ca13..."
  href="signup"
  class="button full-button w-inline-block"
>
  <div>Get Started</div>
</a>

Now let's do the same for our premium membership. Head back to Memberstack and copy the data attribute for the premium plan.

Add the data attribute to our premium link around line 247

<a
  data-ms-membership="5fd8cfb1..."
  href="signup"
  class="button full-button secondary-button w-inline-block"
>
  <div>Get Started</div>
</a>

Installing Memberstack Header code

Next, we need to install the Memberstack <script> tag in the <head> of our site. Head back over to the main dashboard of Memberstack and click on the "Install header code" underneath the Setup Checklist.

Copy the code snippet in there and then paste the snippet just above the closing </head> tag in src/_includes/layouts/base.html. The file should now look like this:

<!-- Additional Code Above -->
<link
  href="/asssets/images/Freebie-Favicon.png"
  rel="shortcut icon" type="image/x-icon">

  <link
    href="https://howtocode.io/assets/images/Freebie-Webclip.png"
    rel="apple-touch-icon">

  <!-- Memberstack -->
  <script
    src="https://api.memberstack.io/static/memberstack.js?custom"
    data-memberstack-id="751ee1...">
  </script>
</head>

Note: the formatting & indentation might be different in your file.

Signup Form

Next, we need to integrate Memberstack without Signup Form. On the Memberstack main dashboard, click on the "Add a Login form" under the "More Features" section.

You will be taken to the "Login" form section, but we need to set up the "Signup" form first. So click on the "Signup" tab at the top.

By default, the Signup form comes with fields for email and password. Our form also has a field for first name and last name.

Click on the "Add custom fields" button to add the First Name Field.

Add another field for the Last Name.

The signup form should now look like this:

Scroll to the bottom of the form under the "Signup form type" and select Build a custom signup form.

Copy the data attribute.

We now need to add this to the signup <form> element on our site. Add the data attribute to the form element in signup.html around line 12

<form
  data-ms-form="signup"
  id="sign-up"
  name="wf-form-Sign-up-Form"
  data-name="Sign up Form"
  method="post"
  ms-signup="true"
  class="login-form"
></form>

Login Form

Next, let's set up our login form.

Click on the "Login" tab at the top of the Memberstack Dashboard.

Our site's login form only has an email and password field, so the default fields that Memberstack provides are just what we need.

On the Memberstack dashboard, scroll to the bottom and select "Build a custom login form," just like we did for the signup form.

Then copy the data attribute and paste it into the <form> element of the login form around line 13 of login.html

<form
  data-ms-form="login"
  id="login"
  name="wf-form-login"
  data-name="login"
  method="post"
  ms-login="true"
  class="login-form"
></form>

Deploying to Surge

Now that we have our site set up with Memberstack, we need to deploy it to a live URL for testing. We will be deploying with Surge.

First, we need to install Surge as a global NPM package.

npm i -g surge

Next, we need to build our static site.

npm run build

Next, we can deploy our site with this simple command.

surge dist

This tells Surge to deploy our dist folder, which contains our built static site.

If this is the first time you are using Surge, you will be asked to create an account. After doing so, you should see something similar to this.

Press enter, and in a few seconds, your site will be live. Head on over to the domain surge provides and open it in your browser.

Copy the domain that Surge gives you and paste it into the deploy script within package.json like so:

{
  "name": "eleventy-memberstack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npx eleventy --serve",
    "build": "npx eleventy",
    "deploy": "npm run build && surge dist --domain faulty-hate.surge.sh"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@11ty/eleventy": "^0.11.1"
  }
}

This is a custom script I wrote that will automatically build our eleventy site and deploy to Surge whenever we run.

npm run deploy

After you have updated the script with your surge URL, run the deploy command to ensure everything is working correctly.

Testing Memberstack Integration

Now that our site is live let's test to ensure Memberstack is working correctly.

First, let's try to access the /basic/account page, which is reserved only for users who have a basic membership. On your live surge site, go to https://faulty-hate.surge.sh/basic/account, replacing the domain with whichever one Surge provided you.

You will be redirected to the login page.

Now try to access the premium account by going to /premium/account/. For example, https://faulty-hate.surge.sh/premium/account/.

You will be redirected to the login page.

Basic Membership Signup

Now let's try to signup for a basic plan. Scroll to the bottom of the home page to the pricing tables and click on the basic plan. Fill out the signup form and press "Continue." You should be prompted with a modal like this:

Click confirm and pay.

After a few seconds, you will be redirected to /basic/account, the basic account membership area. So far, so good! Memberstack handles all of the session and authentication for us, so we are currently logged in as a basic member.

Now that we are logged in, try to go to /premium/account, and you should be redirected to the login page.

So our basic memberships are working, and these members are unable to access the premium section of our site. Awesome!

Logging out

Now that we are signed in, we need a way for our users to sign out. We need to add a logout button to the nav of our /basic/account page right next to the "Change Plan" button.

Add the following to src/basic/account.html <nav> tag.

<a href="#/ms/logout" class="button navbar-cta w-nav-link">Log Out</a>

The entire <nav> should look like this.

<nav role="navigation" class="homepage-nav-menu w-nav-menu">
  <a href="#/ms/logout" class="button navbar-cta w-nav-link">Log Out</a>
  <a href="/basic/upgrade" class="button navbar-cta w-nav-link">Change Plan</a>
</nav>

The entire account.html file should look like this.

{% extends "layouts/base.html" %} {% block content %}

<div
  data-collapse="medium"
  data-animation="default"
  data-duration="400"
  class="navbar w-nav"
>
  <a href="/" class="brand w-nav-brand">
    <img src="https://howtocode.io/assets/images/heart.svg" alt="" />
  </a>

  <nav role="navigation" class="homepage-nav-menu w-nav-menu">
    <a href="#/ms/logout" class="button navbar-cta w-nav-link">Log Out</a>
    <a href="/basic/upgrade" class="button navbar-cta w-nav-link"
      >Change Plan</a
    >
  </nav>

  <div class="menu-button w-nav-button">
    <div class="w-icon-nav-menu"></div>
  </div>
</div>
<div class="delete-me-section">
  <h1 class="account-h1">Basic Account</h1>
  <div class="w-richtext">
    <p>Member&#x27;s only areas can be any combination of the following:</p>
    <ul>
      <li>an individual page</li>
      <li>a group of pages</li>
      <li>folders</li>
      <li>CMS items</li>
      <li>or entire CMS collections</li>
    </ul>
  </div>
</div>

{% endblock %}

With that in place, let's push our latest changes to Surge and test.

npm run deploy

You should still be logged in, so navigate to /basic/account and you should see our new "Log Out" button at the top. When you click it, you should be redirected to the home page. Try to access /basic/account again, and you will be redirected to the home page.

Premium Membership Signup

Now that we have confirmed our basic membership is working, let's test out the premium membership.

On the home page, scroll to the pricing tables at the bottom and click on the premium membership. Fill out the form, and you will see the Premium payment form.

You should be redirected to the /premium/account page. Since premium also included access to everything the basic membership has, you should also be able to access /basic/account.

This page will also need a log out button, but you already know how to do that. If you want one on this page as well, by all means, go for it.

Connecting Stripe for payments

This next section is optional and is only useful if you are launching a live membership site. Currently, there is no way to test payments taken from Memberstack with Stripe while in the demo/test mode. Your membership site must be live for the charges to show up in Stripe.

All of our testing thus far has been in test mode. If you noticed, when we tried to signup for these plans, we didn't have to enter in any actual credit card information. We can connect Stripe so we can receive real money from real customers.

First, you will need to set up a free Stripe account. After that, head back over to the Memberstack dashboard.

In the main Memberstack dashboard, there is a settings section; click on that to expand it and click on "Connect to Stripe."

On this screen, click the big button to connect to Stripe, you should see a screen like this.

Click the "Connect my Stripe account" button.

You should then be redirected back to Memberstack and see the following:

GitHub Repo

You can find the project repo here inside of Eleventy-Membership/final
GitHub Repo

Wrap up

Well, that wraps up this project. To recap, we used Memberstack to create a membership Jamstack site with two membership plans "basic" & "premium." Within Memberstack, we could designate which portion of the site basic and premium members can access and redirect users who do not have the appropriate access. We also learned how to integrate Stripe if we decide to launch a live membership site.

We also gained some experience with the Eleventy static site generator. This SSG is quite popular and is growing ever more so in popularity. It is quite simple to use and has a lot of features built-in by default. It provides several templating languages and other features that make getting Jamstack sites up and running quickly.

For hosting and deployment, we used Surge. Surge is a simple NPM package that allows us to publish static sites with just a single command.

Understanding the Jamstack Book

My book Understanding the Jamstack is "pay what you want." You can get it for free by entering 0 for the price at checkout.

Buy Understanding the Jamstack

Jamstack blog with Hugo, Netlify CMS and Zapier

Robert Guss — Wed, 06 Jan 2021 13:21:48 +0000

We will be building a blog using the Hugo Static Site Generator and then deploy it to Netlify. Once our blog is complete and lives on Netlify, we will then integrate Zapier to trigger our site's automatic CI/CD pipelines. Zapier will allow us to write blog posts ahead of time by setting a publish date sometime in the future. It will then notify Netlify to build our site so that the entire process is automated.

Installing Hugo

Hugo is written in the Go Programming Language, making it very easy to install since it is just a single binary. To install Hugo, head over to their Installation Docs and follow along for whatever operating system you are using. I am using Mac and have installed Hugo with Homebrew. I highly recommend using Homebrew if you are on a Mac.

Creating the blog

Now that you have Hugo installed, run the following command to create a new Hugo site:

Hugo new site blog

# blog will be the name of the folder and project

If you are like me, you probably already have a directory where all of your web/code projects live on your computer. I have a folder called Projects on my laptop, which contains all of my projects. I recommend you have something similar on your machine and install it there.

We are going to be using a pre-configured theme for Hugo called Ink. You can
download the theme from Github here. Click on the green button called "Code" and then "Download Zip."

When you download the zip file and unzip it, it is called Hugo-ink-master. Rename the folder to ink and then move it inside the themes folder.

Your Hugo project should now look like this:

Inside of the ink theme folder is another folder called exampleSite. This folder contains some example content that we can use to populate our site with some pages and posts.

Copy the directory themes/ink/exampleSite/archetypes/ and replace /archetypes/ located at the project's root.
Copy the directory themes/ink/exampleSite/content/ and replace /content/ located at the root of the project.
Copy the directory themes/ink/exampleSite/data/ and replace /data/ located at the project's root.
Copy the file themes/ink/exampleSite/config.toml and replace config.toml located at the root of the project.

Now run the following command in your terminal to start the Hugo server:

Hugo serve

If everything is configured and set up correctly, you should see the following at http://localhost:1313/

Your site might have a white background, which is fine; the theme has both light and dark themes, which are toggled based upon your system preferences.

Instant Reload & Creating new posts

Hugo's built-in dev server will automatically reload the page whenever it detects a page. You can see this in action by modifying one of the posts located at content/posts/. If you make any changes to one of these files, the browser will reload and update with your changes virtually instantly! Pretty sweet right 😎

To create a new post, you will either have to stop the Hugo server, or open up another terminal window in the project directory and run the following command.

hugo new posts/my-first-post.md

Feel free to name the file whatever you like. You will need to modify what is known as the Front Matter at the top of the file.

If you open up one of the sample posts, you will see something like the following at the top:

---
title: 'Markdown Syntax Guide'
date: '2019-03-11'
description: 'Sample article showcasing basic Markdown syntax.'
tags: [markdown, CSS, HTML, themes]
categories: [themes, syntax]
---

This data is what Hugo uses to generate various data on our site.

This data is entirely customizable by you. With the correct theme and configuration modifications, you can have Hugo parse and use all kinds of custom data in the Front Matter.

Take the example I used above and paste it into your new post.

Here is what my post looks like:

---
title: 'My First Post'
date: '2020-12-12'
description: 'This is the description of my first post'
tags: [markdown]
categories: [syntax]
---

Content goes here...

The homepage should have been updated with your latest post and should look something like this:

Pushing our project to GitHub

Before we can deploy our site, we need to first push our site up to GitHub.

If you do not have a GitHub account, please sign up for a free account as you are going to need it throughout this course.

**Your GitHub may not be dark like mine. I am using their dark theme, which is _not enabled by default.**_

Create a new repository by clicking the + in the upper right-hand corner, next to the bell icon, then "New repository."

Fill out the repository name and description field and choose whether to make the repo private or public. It doesn't matter which one you choose. Netlify will work with both public and private repos.

Then click the green button "Create repository."

You should see a screen that looks similar to this:

This next section requires you to have Git installed. If you do not have Git installed, you can download it here

Head back over to your terminal inside your Hugo directory and run the following, in this order.

git init # initializes a new git repository
git add . # adds all of the files to Git
git commit -m "init commit" # creates a new commit with the message "init commit"

Then you are going to need to copy the URL for your git repo in GitHub. You can find it in this section of your empty GitHub repo.

Paste it into your terminal:

git remote add origin git@github.com:robertguss/hugo-blog.git

Then do:

git push -u origin master

Refresh GitHub, and you should see the following:

Now you are all set and ready to deploy with Netlify.

Deploying to Netlify

Now that our site is all set up and running, let's learn how to deploy our static site to Netlify. Netlify is free and is one of the most popular hosting providers for the Jamstack. Head on over to their site, and sign up for an account; use your GitHub account to sign up.

Once you sign up, you should land on a dashboard that looks like the following:

Click on the "New site from Git" button.

On the next screen, click on the "GitHub" button.

You will want to connect your GitHub account to Netlify and give them access to all of your repos.

You will then need to search for the repo we just created and select it. I named mine Hugo-blog so I can easily search for it in the search bar.

It should automatically detect that this is a Hugo project and fill in the form fields for you. Just in case it doesn't, the build command is Hugo, and the publish directory is public

Then click the green button "Deploy site."

You will then go back to the site dashboard, where the site will begin to deploy. It shouldn't take very long before you see a random URL at the top.

Click on the green URL; it should take you to our new Hugo site!

Wait!?! Why is our site broken?

If we inspect our site using Chrome dev tools and open up the console, we can see we have some mixed content warnings and a reference to http://example.org. Where is this URL coming from?

If you open up config.toml you will see the following on line 1:

baseURL = "http://example.org/"

Change it to the following:

baseURL = "/"

We will need to add these changes to Git and push them up to GitHub.

git add .
git commit -m "fixed base URL in config.toml"
git push

Once our change is on GitHub, Netlify will automatically detect this change and redeploy our site. This CI/CD comes for free from Netlify without us having to set up and configure anything! We simply push to our master branch, and Netlify takes care of the rest.

If you refresh your Netlify URL, the site is now fixed.

Integrating Netlify CMS

Now that we have our blog setup and deployed live on Netlify, we will now integrate Netlify CMS, which allows us to update our content more easily. You can find the docs for the installation & setup here.

First, we need to create an admin folder, which is where the CMS will live. We need to make this folder inside of /static. This folder does not currently exist, so create a new folder called static in the project's root and then within that another folder called admin.

Within the /static/admin folder create 2 new files: index.html & config.yml.

Open up static/admin/index.html and add the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

Then within static/admin/config.yml add the following:

backend:
  name: git-gateway

Next, we need to add a collections: property to our config.yml, which will let the CMS know about our posts' structure. The collections can be a little complicated at first, as there are many fields that the CMS provides. You can find out more details about them in the docs here.

For our blog, add the following to config.yml.

collections: # A list of collections the CMS should be able to edit
  - name: 'post' # Used in routes, ie.: /admin/collections/:slug/edit
    label: 'Post' # Used in the UI, ie.: "New Post"
    folder: 'content/posts' # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'text' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
      - { label: 'Tags', name: 'tags', widget: 'list' }
      - { label: 'Categories', name: 'categories', widget: 'list' }

The entire file should look like this:

backend:
  name: git-gateway

collections: # A list of collections the CMS should be able to edit
  - name: 'post' # Used in routes, ie.: /admin/collections/:slug/edit
    label: 'Post' # Used in the UI, ie.: "New Post"
    folder: 'content/posts' # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'text' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
      - { label: 'Tags', name: 'tags', widget: 'list' }
      - { label: 'Categories', name: 'categories', widget: 'list' }

Finally, we need to let Netlify CMS know where to put the images that we upload. We can do so by adding the following to our config.

media_folder: 'static/images/uploads' # Folder where user uploaded files should go
public_folder: '/images/uploads'

The entire file should now look like this:

backend:
  name: git-gateway

media_folder: 'static/images/uploads' # Folder where user uploaded files should go
public_folder: '/images/uploads'

collections: # A list of collections the CMS should be able to edit
  - name: 'post' # Used in routes, ie.: /admin/collections/:slug/edit
    label: 'Post' # Used in the UI, ie.: "New Post"
    folder: 'content/posts' # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'text' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
      - { label: 'Tags', name: 'tags', widget: 'list' }
      - { label: 'Categories', name: 'categories', widget: 'list' }

Now let's push up our changes to that our latest code is on Netlify.

git add .
git commit -m "installed Netlify CMS"
git push

Next, let's setup Netlify Identity, Netlify's built-in authentication service, to log into our cms.

Within your Netlify site's dashboard, click on Site settings at the top and then Identity on the left sidebar. Then click on the Green "Enable Identity" button.

You can leave the "Open" radio button selected for now and click "Save."

Scroll down towards the bottom of the page and click on "Enable Git Gateway" under the "Services" heading.

Netlify Identity Widget

Next, we need to install the Netlify Identity Widget, which will allow us to interact with Netlify Identity for authentication and logging into the CMS.

Add this script include to the <head> section of /static/admin/index.html:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

The entire file /static/admin/index.html should look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

We need to install this to the <head> of our Hugo static site so that it is included on every page. Paste inside of the <head> of /themes/ink/layouts/partials/header.html.

That entire file should look like this now:

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  {{- $title := ( .Title ) -}} {{- $siteTitle := ( .Site.Title ) -}} {{- if
  .IsHome -}}
  <title>
    {{ $siteTitle }} {{ if isset .Site.Params "subtitle" }}- {{
    .Site.Params.Subtitle }}{{ end }}
  </title>
  {{- else -}}
  <title>{{ $title }} - {{ $siteTitle }}</title>
  {{- end -}} {{- if isset .Site.Params "favicon" -}}
  <link rel="icon" type="image/png" href="{{" .Site.Params.favicon }} />
  {{- end -}}

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  {{ with .OutputFormats.Get "rss" -}} {{ printf `
  <link rel="%s" type="%s" href="%s" title="%s" />
  ` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}} {{-
  template "_internal/schema.html" . -}} {{- template "_internal/opengraph.html"
  . -}} {{- template "_internal/twitter_cards.html" . -}}
  <link
    href="https://fonts.googleapis.com/css?family=Playfair+Display:700"
    rel="stylesheet"
    type="text/css"
  />
  <link
    rel="stylesheet"
    type="text/css"
    media="screen"
    href="{{ .Site.BaseURL }}css/normalize.css"
  />
  <link
    rel="stylesheet"
    type="text/css"
    media="screen"
    href="{{ .Site.BaseURL }}css/main.css"
  />
  {{- if isset .Site.Params "customcss" }}
  <link
    rel="stylesheet"
    type="text/css"
    href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}"
  />
  {{ end }}

  <link
    id="dark-scheme"
    rel="stylesheet"
    type="text/css"
    href="{{ .Site.BaseURL }}css/dark.css"
  />
  {{- if isset .Site.Params "customdarkcss" }}
  <link
    id="dark-scheme"
    rel="stylesheet"
    type="text/css"
    href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}"
  />
  {{- end }} {{ if and (isset .Site.Params "social") (isset .Site.Params
  "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}}
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  {{- else if or (isset .Site.Params "social") (eq .Site.Params.mode "auto") (eq
  .Site.Params.mode "dark") -}}
  <script src="{{ .Site.BaseURL }}js/feather.min.js"></script>
  {{ end }}
  <script src="{{ .Site.BaseURL }}js/main.js"></script>
  {{- if isset .Site.Params "customjs" -}} {{- range .Site.Params.customJS }}
  <script src="{{ $.Site.BaseURL }}{{ . }}"></script>
  {{- end }} {{- end }}
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>

Our final step is to include a simple JS snippet that Netlify provides us in their install docs. This snippet will handle the redirection to the CMS admin dashboard upon successfully logging in.

Add the following snippet to /themes/ink/layouts/partials/footer.html.

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on('init', (user) => {
      if (!user) {
        window.netlifyIdentity.on('login', () => {
          document.location.href = '/admin/';
        });
      }
    });
  }
</script>

The entire file should now look like:

<div class="footer wrapper">
  <nav class="nav">
    <div>
      {{ dateFormat "2006" now }} {{ with .Site.Copyright }} {{ . | safeHTML }}
      | {{ end }} <a href="https://github.com/knadh/hugo-ink">Ink</a> theme on
      <a href="https://gohugo.io">Hugo</a>
    </div>
  </nav>
</div>

{{ template "_internal/google_analytics_async.html" . }} {{- with
.Site.Params.Social -}}
<script>
  feather.replace();
</script>
{{- end -}}

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on('init', (user) => {
      if (!user) {
        window.netlifyIdentity.on('login', () => {
          document.location.href = '/admin/';
        });
      }
    });
  }
</script>

Now let's push up our changes:

git add .
git commit -m "added Netlify Identity"
git push

Now navigate to your Netlify URL and add /admin at the end. For instance, mine is https://reverent-liskov-4cbe35.netlify.app/admin.

Click on the "Login with Netlify Identity" button.

Then click on the "Sign up" tab, fill out the form and click the "Sign up" button.

Make sure to use your actual email address as you will need to click a link to confirm your identity.*

Open the email and confirm your email address. You should now be logged in and presented with the CMS admin dashboard.

You can now edit and create new posts with Netlify CMS!

Open up one of the posts, edit some of the content, and click on the "Publish" button in the upper right-hand corner.

Then click "Publish Now."

Clicking this button will send a webhook to Netlify, which will begin to build and deploy the site automatically. Pretty slick 😎

One thing to keep in mind is that when you publish your site via the CMS, Netlify is creating Git commits for you in the background. So if you make some changes to your site via the CMS, make sure you run git pull to pull down your repo's latest changes. Otherwise, your local copy and the version up on GitHub will be out of sync.

Integrating Zapier for automatic deploys

I learned this neat trick from Flavio Copes. You can check his post here

This next section includes using a service known as Zapier, an automation framework that we will utilize to deploy our site automatically. You may be wondering why we would need this or what is the use case. Let me explain.

More often than not, most people write blog articles in advance and then schedule a publish date sometime in the future. For instance, you may want to publish a new blog post every two weeks or once a month and will often have several articles ready to go so that you have a "buffer" of content before you have to write more. Virtually every blogging system and cms allow this when you have a traditional monolithic architecture like WordPress or similar. However, since this is a static site and we do not have a backend, how can we accomplish this? The key is to use Zapier and Hugo's publish date.

Hugo has this feature built-in already, where if you have a date set for one of your articles in the future, it will not build the page until that date. For example, if I set the date two weeks from today, Hugo will not make that page until then. We can trigger as many builds of our site as we want, and that article will not show up until two weeks from today.

Knowing this, we can then use Zapier to send a webhook to Netlify at whatever interval we want, which will trigger a new build. So if you are publishing every two weeks, you can set up Zapier to send a webhook every two weeks. You could even have Zapier send a webhook every single day if your schedule is inconsistent. That way, you only have to worry about setting the correct date in the articles front-matter, and the deployment and publishing cycle is handled for you automatically!

For this tutorial, we will be setting up Zapier to send a webhook every day.

Before we can set up Zapier, we need first to configure Netlify to accept our Webhook from Zapier.

Netlify Webhook Setup

Head back over to your Netlify dashboard and click on "Site settings" and then "Build & deploy" on the left sidebar. Scroll down until you see a "Build hooks" section.

Click the "Add build hook" button.

Give your hook a name, and then save it.

Netlify will then give you a URL for the webhook, like so:

Copy this down or keep this tab open as we will need this Url for Zapier.

Zapier Webhook Setup

Head on over to Zapier and create a free account. After logging in, Go to this [link (https://zapier.com/apps/schedule/integrations/webhook/2845/send-webhook-post-requests-on-a-daily-schedule) to see how to configure a webhook POST request.

Click on the "Try it" button.

On the next screen, I set up mine to trigger on the weekends and at 7 am.

After clicking "Save and Continue," click on the "Test Trigger" button.

Then click on the 2nd section and add in the URL from Netlify. I set my payload type to "Raw."

You can leave the rest of the fields as they are and then click "Save and continue."

You will then see a "Test action" screen. Click the "Test & Continue" button.

If all goes well, you should see the following.

Then click on the "Turn on Zap" button to enable it.

Head back to your Netlify dashboard and see if the CI/CD was triggered. Click on "Deploys" at the top of the screen and check to see the latest deploy. It should say something like "Deploy triggered by hook: Zapier at 7 am"

Zapier will send a webhook at 7 am every day, and Netlify will deploy a fresh copy of your site at the same time. All you have to do is enter the date in your article's front-matter on which you would like your article to be published live on your site, and the rest is handled for you automatically!

GitHub Repo

You can find the completed project here inside of Hugo-Blog/final
GitHub Repo

Wrap up

In this tutorial, we learned how to create a Jamstack site using the Hugo static site generator. We also integrated Netlify CMS to make it easy to update our content and deployed our site to Netlify. Finally, we set up Zapier to trigger automatic deploys on Netlify every day.

Understanding the Jamstack Book

My book Understanding the Jamstack is "pay what you want." You can get it for free by entering 0 for the price at checkout.

Buy Understanding the Jamstack

How I taught myself how to code and got hired as a junior developer in 5 months

Robert Guss — Tue, 05 Jan 2021 00:42:42 +0000

Before I get into my story, I want to preface this article with a few things. I am typically a shy and introverted person. I am not the kind of person who openly discusses my achievements and successes, especially when it comes to finances. I don't like bragging or boasting, and this article is taking me way outside of my comfort zone.

My primary reason for writing this article is to help inform, inspire, and motivate those of you out there looking to learn how to code, especially those of you who are self-taught. I wish I could have read a story like mine when I was first learning to code over six years ago. I always want to make sure I am 100% open, honest, and transparent.

I am currently 35 years old and did not learn how to code until I was 29. So no, you are never too old, nor is it ever too late for you to learn anything... especially code.

Background

Before learning how to code, I had all kinds of jobs. I have been working since I was 15. I worked as a busboy for a few restaurants while in high school. I worked in retail, at a CVS in a shopping mall (one of the worst jobs ever!), and in real estate for over 6 years. I had a pretty good job/career in real estate until the entire economy collapsed in 2008. I was living in Florida at the time, and the real estate market there took a particularly devasting hit.

The 2008 economic crisis was one of the best things that ever happened to me. I took a good look at myself, my life and did some soul searching. Seeing how real estate was not coming back for a long time, and I didn't honestly enjoy it all that much, what was I going to do? I figured I would go back to college and get my bachelor's degree in hopes that the economy would bounce back after those four years in school. I was 24.

In case you are wondering what I did during those six years between high school and college, I worked and played in a band. Music was my life. I had been a musician since I was 13 or 14 years old. Going back to school seemed daunting and dreadful. I hated high school. I was bored all the time and never really interested in any of the subjects I was being taught. Also, math was my worst subject and still is to this day. You don't need to be a math wiz to learn how to code! I wish someone had told me this earlier, but I digress.

Being a musician, I thought I would apply to a music school to study what I loved more than anything. Only one school came to mind, Berklee College of Music. I told myself that going to college would only be worth it if I could study at Berklee. I didn't want to go anywhere else and wouldn't have accepted any other college. Berklee is the best there is. If I was going to spend four years of my life in school while getting into a whole bunch of debt, then I was going to go to the best of the best.

It was the only school I had applied to, and to my surprise, I was accepted. The reason why I was surprised is that I was self-taught in music too. I never had a private lesson or a guitar teacher. I couldn't read music, I didn't know any scales, theory, or any of that stuff... but I could play. I had been playing in bands for several years and had played countless shows up until that point.

Reality Check

So I packed up my car and moved to Boston to go to Berklee. Those four years were some of the most incredible years of my life. I graduated with a Composition degree, which basically means I learned how to compose 'classical' music. This is not exactly a high-paying in-demand skill these days, but I didn't care. For me, it was the best program/degree to get the most out of the school, and I don't regret that decision. However, I knew once I declared my major in composition, I would most likely have to fall back on my IT skills.

I was always interested in computers and taught myself how to fix them while in high school. I really just did it out of fun & curiosity. I also broke my computers all the time and couldn't afford to pay anyone to fix them, so I just figured it out, thanks to the internet.

After graduating, that is when reality really set in. My first student loan payment came, and it was well over $1,000. I had graduated with around $115,000 in student loan debt. I basically had a mortgage, but no house. That was a sobering experience. Naturally, I panicked.

I needed a well-paying job as I worked for various production companies and made a little over $30,000 a year. I was also living at home with my parents and was about to turn 30.

The Bootcamp that never was

What first got me interested in programming was a computer game I used to play called DayZ. It is an online multiplayer game where you try to survive from other players and zombies. All good games have zombies in them. I eventually decided to rent my own server to host my own version of the game for others to play on.

One of the coolest aspects of the game was that it was a "mod." This means it was built on top of another game, Arma 2. So I could install various other mods/plugins that would completely change the functionality of the game. I had no idea how to code, but I found all of these various articles and YouTube videos that showed me how to modify the game. I copied the code snippets, pasted them in the right places, and it just worked! I had no clue what I was doing, but I found it fascinating this was even possible. That was the first time I experienced the power of programming.

I did some searching online to learn how to code and came across a Bootcamp in Boston called Launch Academy. I went to their open house, filled out an application, and to my surprise, I got in. I have no idea if this was a big deal or not, they probably accept pretty much anyone, but it felt like a big deal to me. Then another reality check... the cost!

The program was three months or so and over $12,000. There was no way I could afford that! Nor was I willing to get into even further debt on top of all of my student loan debt. I tried to negotiate with them but got nowhere. Then I had an idea...

What if I put myself through my own Bootcamp? I mean, these people say they can teach me the skills I need to get a high paying coding job in three months, so why can't I just do this myself. I have taught myself IT and music before, so why not coding? So that is what I did.

My jobs working for production companies were notoriously slow from the end of the year into the beginning of the year. So, I had a few months where I wasn't really working anyway. I took full advantage of this 'downtime' and got to work. I spent a good 6-8 hours every day, seven days a week learning HTML, CSS, JavaScript, Ruby, and Ruby on Rails. The Bootcamp had given me a couple books and let us know what we would be learning, so I just searched the internet for resources to learn all of those technologies.

I read Shay Howe's book for HTML/CSS and Chris Pine's book for Ruby. I don't remember which books I read for JS or rails. I was also taking several courses on Udemy. I bought every Ruby on Rails and JavaScript course I could afford. I bounced from tutorial to tutorial, course to course, and wasted so much time. I had no idea what I was doing. I wish I had a mentor or someone who could show me the proper order of what to learn and when. I really needed some kind of curriculum, but I just had to figure it out.

My first job

I was insanely driven and dedicated to learning how to code to get a better paying job, move out, and pay off my debt. After 3 months or so, I started getting freelance gigs on eLance, which doesn't exist anymore. I think it is now called Upwork. I had zero experience doing web development, so I worked basically for free. I made some money. I charged like $50 for a website or something crazy like that. I didn't care though I was getting real-world experience and building my portfolio. I didn't care if the quality wasn't excellent, because what do you expect for $50? Don't get me wrong though, I worked my butt off for those clients. I went above and beyond to try and deliver the best product I could. It wasn't about money yet. I just needed the experience.

Five months later, I decided to try and apply for some junior developer positions. I had no idea what I was getting into and figured that I could get some practice interviewing. I took the interviews as a learning experience, as well. When someone would ask me something I didn't know, I wrote it down and looked it up later.

I eventually applied to a music company in Rhode Island. Here is my cover letter and resume

You will notice in my resume that I just have the years for my experience and not the months. This was intentional. I started learning to code in December of 2014. 😏

I got the job. I was offered $55,00. Here is the offer letter. To be honest, the only reason I think I was hired is because of my strong music background. I was a terrible developer and didn't know what I was doing, but my music skills got me in the door.

This is an important thing for new people trying to break into the industry. Use what experience you do have to try and get into tech. You may have a lot of experience in retail, restaurants, education, whatever. Try to get a coding job in those fields first. People looking to hire junior developers know you don't have great coding skills, so leverage the skills and experience you do have.

Getting a coding job is not easy, even though the demand is through the roof for developers. You need a way to stand out, as any company hiring a junior developer is taking a pretty significant risk. They know you don't have what it takes to solve complex problems and that you will need a lot of support at first. However, they hope you will grow out of your 'junior' shell in a reasonable amount of time to really start contributing.

Your number one priority as a junior dev is to learn as much as you can from the more experienced devs around you. Then you need to get that 'junior' out of your job title asap. The next jobs are so much easier once you have some real-world experience under your belt. The first one is definitely the hardest, at least in my experience.

Job 2

After working for InMusic for a couple of years or so, I began working for an agency based in New York. I was still living in RI at the time, so this was my first full-time remote gig, and I loved it! Working remote is fantastic, and I wouldn't have it any other way now. However, I don't think remote is a good idea for your first job. You should try to find a company local to you so you can get first-hand experience from other devs in person. You can do it remotely if you want. Still, I think you get so much more experience and value out of being with other devs, face to face, especially when you are just starting out.

I asked them for $80,000, which was $20,000 more than I was making. I got a $5,000 raise after my first year at inMusic and was promoted to a front-end developer. They offered me $72,000 and told me after my first year, they would pay me $80,000. I said yes and put in my two weeks.

Today

Today I am a senior software engineer for a travel insurance company in Rhode Island. I work remotely from Pennsylvania. I make just shy of $100,000. I have been there for over two years now. So in five years or so, I went from making just over $30,000 to almost $100,000. Not only has my salary increased significantly, but I have much better benefits, more time off, etc. The best part is that even with all of my debt, and my wife's for that matter, I can support my family so my wife can raise our two small children.

Plus, I really love what I do. I am crazy passionate about this stuff. It is incredible to make a good salary in a high demand field, doing what I love.

Wrap up & Advice

My story is simply that... my story. Yours will be quite different. I hope that reading my story has encouraged and inspired you. Yes, you can do this! You do not need to be a math genius or have any prior experience. You just have to want it! If you are in this solely for the money, look for something else. You will not be happy making more money doing something you hate, trust me! It's not worth it.

If you really want to do this, then nothing is stopping you. There are more free resources out there than ever before. This site is only one of them. I am trying to take all of the experience I have and teach it to others. I wish I had someone like myself to help me out along the way. I would have saved so much time, money, and effort if I had a mentor. I hope this site, my books, courses, and YouTube videos will do that for you. You can always reach out to me on Twitter or email me howtocode@pm.me.

Cheers,

Robert