DEV Community: Feldroy

Codecast #6: Writing Two Scoops of Django

Daniel Feldroy — Wed, 08 Jul 2020 01:08:45 +0000

Ever wanted to know how we update Two Scoops of Django?

I recorded 4 hours of doing just that and uploaded it to YouTube. Let me know what you think!

Codecast #4

Daniel Feldroy — Thu, 02 Jul 2020 22:49:52 +0000

For a while now I've been live streaming my coding sessions. Here's my latest coding session, where I:

Build a SaaS product (Writernaut)
Update an Async Django project
Refactor tests written in PyTest
Use Tailwindcss and TailwindUI to make a killer landing page
Twiddle with AlpineJS
Update my Django Crash Course book
Talk about my upcoming live, online Django training taking place on July 16th and 17th

If you like my video, please like and subscribe!

If you'd like to see more of my videos, head over to YouTube.

A quick way to detect bad practices on a Dockerfile

Fábio C. Barrionuevo da Luz — Tue, 28 Apr 2020 17:08:40 +0000

In Feldroy we use Docker images as the base to running the tools to build the PDF, EPUB, and Kindle files from the content written by @audreyfeldroy and @danielfeldroy .

Having a 100% functional Dockerfile that follows good practices is a good thing to have.

The hadolint is a linter tool that helps to validate a Dockerfile to build Docker images that follow the recommendations of the Best practices for writing Dockerfiles guide.

A quick way to use

docker run --rm -i hadolint/hadolint < Dockerfile

What is the validation rules

The validation follows these rules: https://github.com/hadolint/hadolint#rules

How to customize the validation

We can customize the validation by creating the .hadolint.yaml file: https://github.com/hadolint/hadolint#configure

How to integrate on the CI Server

There are several examples of how to use hadolint on CI servers: https://github.com/hadolint/hadolint/blob/master/docs/INTEGRATION.md

Turn a REST API into a GraphQL API

Audrey Roy Greenfeld — Mon, 27 Apr 2020 06:46:18 +0000

I really like working with GraphQL APIs. I like being able to get data in the shape I want, and using subscriptions to get it in realtime. This weekend I discovered that transforming a REST API into a GraphQL one is easier than it sounds.

This is a walkthrough of turning one REST endpoint to GraphQL. Once you can do one, you can do more 😀

The REST API Endpoint We'll Transform

To keep things simple, we'll use a simple GET REST endpoint as our starting point:

GET https://pokeapi.co/api/v2/pokemon/pikachu/

Now let's create a GraphQL endpoint.

Define the GraphQL Schema for a Pokemon Object

First we define our GraphQL type for the Pokemon data we'll be returning from our new API endpoint:

type Pokemon {
  id:       String!
  name:     String!
  base_experience:  Int!
}

For the sake of example, we're limiting the fields, but add more if you want.

Define the GraphQL Query Type

Then we define a GraphQL query called getPokemon that takes an id and returns a Pokemon object:

type Query {
  getPokemon(id: String!): Pokemon
}

Define the Query Resolver

When a getPokemon GraphQL query comes in, under the hood of our resolver, we send a GET request to /pokemon/<id>/:

const resolvers = {
  Query: {
      getPokemon: async (_, { id }) => {

          const response = await fetch(MY_REST_URL + '/pokemon/' + id + '/');
          return response.json();
      },
  }

Try the Query in GraphQL Playground

A copy of the above code is editable here on Glitch, and running live here with interactive querying via GraphQL Playground

Go to GraphQL Playground and try the query we just created:

query {
  getPokemon(id: "pikachu"){
    id
    base_experience
  }
}

It responds with real data from PokeAPI:

{
  "data": {
    "getPokemon": {
      "id": "25",
      "base_experience": 112
    }
  }
}

Yay! As a practice exercise, try implementing another field besides base_experience:

Remix my Glitch app
Add the field to the Pokemon schema
Add it to your query and see the results in GraphQL Playground

With this knowledge and a little practice, there's so much you can do. Enjoy!

Autodocumenting Makefiles

Daniel Feldroy — Sat, 25 Apr 2020 06:10:53 +0000

Today was my 6th day of 100 days of code. I was working on the forthcoming Two Scoops of Django 3.x and thanks to my co-worker Fabio I learned something new about Makefiles. This is an expansion on what he provided (I added the output list and sort feature).

Using PYSCRIPT to Print Documentation

I've seen variations of this trick but this is the best version ever. At the top of your Makefile, put in this code:

.DEFAULT_GOAL := help # Sets default action to be help

define PRINT_HELP_PYSCRIPT # start of Python section
import re, sys

output = []
# Loop through the lines in this file
for line in sys.stdin:
    # if the line has a command and a comment start with
    #   two pound signs, add it to the output
    match = re.match(r'^([a-zA-Z_-]+):.*?## (.*)$$', line)
    if match:
        target, help = match.groups()
        output.append("%-20s %s" % (target, help))
# Sort the output in alphanumeric order
output.sort()
# Print the help result
print('\n'.join(output))
endef
export PRINT_HELP_PYSCRIPT # End of python section

help:
    @python -c "$$PRINT_HELP_PYSCRIPT" < $(MAKEFILE_LIST)

Next, we added concise docstrings for every Makefile command. Here's what we did for two of the commands:

code:  ## Extracts code for uploading to GitHub
    python extractor.py

rmcode: ## Removes sample code 
    rm -rf code

Notice how each command's docstring starts with two pound signs? The "##"? That's what the auto documenter code needs to find the docstring.

Trying it out!

When I type just make without any arguments, by default that triggers the help function, which runs the Python script at the top of the makefile. What I get is this:

$ make
clean                Cleans up the environment
cleandocker          Cleans up the docker environment
code                 Extracts code for uploading to GitHub
dpdf                 Render PDF in docker
mdeps                Discovers missing LaTeX deps
mint                 Production ebook rendering
print                Renders print version
rmcode               Removes sample code 
short                faster rendering with minimal index check
tiny                 even faster rendering with no index check

Very useful!

Simple JavaScript Loops

Daniel Feldroy — Fri, 24 Apr 2020 17:06:46 +0000

In this, my 5th day of 100daysofcode, I'm writing a tutorial. This tutorial is a cookbook of my favorite JavaScript looping techniques and to a lesser degree, object introspection. It should prove useful to anyone new to JavaScript, especially if you are coming from languages with for...in (python in particular).

I'm doing this in my browser JavaScript console.

Looping for values

Looping through elements of an array is easy in JavaScript. Use for...of!

> let arr = [5, 10, 15, 20]
> for (let i of arr){
    console.log(i)
  }
5
10
15
20

for...of returns the value of the loop iteration. It's the right tool for this operation.

Looping for index

If you need to track the index of a loop, do this:

> for (let i=0; i < arr.length; i++){
    console.log(i)
  }
0
1
2
3

This technique is reliable and acts predictably. I've heard that this method runs more quickly than for...of, but JavaScript is very fast these days. Any slowdowns your code might have is probably due to latency or other bottlenecks rather than which JavaScript looping technique you choose to implement.

What's the difference between `for...of` and `for...in`?

Let's use both techniques on the same array and see what we get. First, the for...of combination:

> let arr = [5, 10, 15, 20]
> for (let i of arr){
    console.log(i)
  }
5
10
15
20

Now, the for...in combination, which isn't recommended:

> let arr = [5, 10, 15, 20]
> for (let i in arr){
    console.log(i)
  }
0
1
2
3

It appears that for...in returns the index of the loop iteration, right? What's wrong with that?

Read on!

Problems using `for...in` with arrays

for...in can fool you into thinking it's the right tool for iterating over arrays for indexes instead of the more verbose approach of (let i=0; i < arr.length; i++). This appeared to work:

> let arr = [5, 10, 15, 20]
> for (let i in arr){console.log(i)}
0
1
2
3

But let's change things up a bit with some prototype manipulation:

> Array.prototype.icecream = function(){console.log("Ice cream!")}
> let arr = [5, 10, 15, 20]
> arr
(4) [5, 10, 15, 20]

The array has been proven to have four elements. Now let's iterate over the array using for...in:

> for (let i in array){console.log(i)}
0
1
2
3
icecream

Where did the icecream value come from? icecream function wasn't in the array but for...in called it anyway. What just happened?!?

What's going on is that the for...in is enumerating over the properties of the array, not the values or index. Even if you avoid using prototypes, the same cannot be said for any library installed from NPM. Finally, there is no guarantee that the elements will be returned for...in in numeric order.

What about `forEach` loops?

The forEach loop requires a callback, making it a slightly advanced enough method of writing for loops in JavaScript. I'll cover that in a future article.

Summary

Use for...of for iterating over the values of an array.
Use (let i=0; i < arr.length; i++) for enumerating over the index of an array.
Avoid using for...in for iterating over arrays in any capacity.

JAMStack Fun: Combining StackBit, Forestry, Netlify, Gatsby, Hasura, Glitch

Audrey Roy Greenfeld — Wed, 22 Apr 2020 08:21:06 +0000

For days 6-7 of #100DaysOfCode, I did various JAMStack experiments with SaaS and open-source tools, putting them together to see what would happen.

Trying Out Stackbit

I signed up for a Stackbit account and used their site builder to create a project:

Theme: Azimuth
Site generator: Gatsby
CMS: Forestry (Always wanted to try it!)
Deployment: GitHub repository with Netlify build + deploy (the only current options available. I look forward to Gitlab coming soon!)

I connected my Forestry and GitHub accounts.

Stackbit says it deployed my site. Ooh, it's really live:

I clicked Claim to claim the Netlify project. It worked, yay.

Then I clicked Edit in Forestry to edit the content.

Trying Out Forestry

Forestry provides a GUI for editing Gatsby content. It also supports Hugo, Gridsome, Jekyll, and other static site generators.

It's pretty cool, and I could see it being useful for people who can't build their static site locally or are editing from a mobile device.

The lag between updating a site via Forestry and seeing the new deployed version on Netlify was a few minutes. For my purposes, I find running npm run develop easier because I can see the static site changes on localhost in seconds.

Adding a Netlify Function

Next I added a Netlify function. Initially it'll do almost nothing, but I could see it implementing something dynamic and server-side like what you would expect of an Express or Django web application.

I cloned the GitHub repo, then created a Netlify function by copying functions/hello.js by @kentcdodds into my project. I added it to my build in netlify.toml. Then I git committed and then went to Netlify to watch the build go.

Now that the function's deployed, it's here:
https://curious-rosemary-e8299.netlify.app/.netlify/functions/hello?name=Uma

Whatever you pass into name gets shown on the page by the function:

// functions/hello.js from https://kentcdodds.com/blog/super-simple-start-to-serverless
exports.handler = async event => {
    const subject = event.queryStringParameters.name || 'World'
    return {
      statusCode: 200,
      body: `Hello ${subject}!`,
    }
  }

I'd like to expand this into something real and maybe have it get triggered by a form submission via a Netlify form like the contactForm provided by the sample code. But in the interest of time, I'm saving that for another day to focus on getting the Gatsby site to display dynamic remote API data.

Experimenting with Gatsby

It's been years since I last used React, so getting Gatsby to do what I wanted was a challenge. My hope at this point was to replicate what a Django ListView does in JAMstack.

I created an items.js page to play in:

import React from "react"
export default ({ data }) => (
    <div>
        Hello!
    </div>
)

Next, I looked into populating the page with dynamic data. If I could grab data onto this static page from a remote GraphQL endpoint, that would be great.

Gatsby uses GraphQL, so I started with using that as test data:

import React from "react"
export default ({ data }) => (
    <div>
        <h1>Items List {data.site.siteMetadata.title}</h1>
        <p>This is a static site, but it's loading items dynamically from GraphQL:</p>
        <ul>
          {data.site.siteMetadata.header.nav_links.map(x=> <li>{x.label}</li>)}
        </ul>
    </div>
)

export const query = graphql`
  query {
    site {
      siteMetadata {
        header {
          nav_links {
            label
          }
        }
      }
    }
  }
`

Setting Up a GraphQL API with Hasura

Hasura is an open-source, Heroku-deployable tool that can take existing databases and give you a GraphQL API.

I did the first part of the Hasura tutorial and loved it. Now I have a todos table I can query:

query MyQuery {
  todos {
    id
    title
  }
}

The response from Hasura with my sample data:

{
  "data": {
    "todos": [
      {
        "id": 1,
        "title": "My First Todo"
      },
      {
        "id": 2,
        "title": "Second Todo"
      }
    ]
  }
}

Adding a New Gatsby GraphQL Root

I did an npm install gatsby-source-graphql then added my Hasura GraphQL API to gatsby-config.js:

I see that the example from the Gatsby docs points at https://api.graphcms.com/simple/v1/swapi which is down.

Looks like that site, GraphCMS, was featured on ProductHunt today...I'll sign up and see if they have an updated sample endpoint. Hmm, it looks like an interesting rabbit hole for another day.

In Hasura, I went to Remote Schemas > *Try it with Glitch* and found hasura-sample-remote-schema.glitch.me/

With @danielfeldroy 's help we added the new root to gatsby-config.js:

        {
            resolve: "gatsby-source-graphql",
            options: {
              // This type will contain remote schema Query type
              typeName: "query",
              // This is the field under which it's accessible
              fieldName: "hasuraSample",
              // URL to query from
              url: "https://hasura-sample-remote-schema.glitch.me/",
            },
          },

Then he figured out this query worked in Glitch:

query {
  hello 
}

In http://127.0.0.1:8000/___graphql we got this query to work:

query {hasuraSample {
  hello
}}

Showing Remote GraphQL Data on a Gatsby Page

Finally, I updated items.js to be:

import React from "react"
export default ({ data }) => (
    <div>
        <h1>Items List</h1>
        <p>This is a static site, but it's loading items dynamically from GraphQL:</p>
        <ul>
          {data.hasuraSample.hello}
        </ul>
    </div>
)

export const query = graphql`
  query {hasuraSample {
    hello
  }}
`

With that, http://localhost:8000/items now shows a static Gatsby page with the live data from the Glitch-hosted Hasura Sample Remote Schema!

It was really fun to play around and put all these JAMstack toys together, particularly the ones that auto-configured themselves and auto-deployed. Every piece served a purpose and did it well. That was cool!

Day 4: Exploring async and await in JavaScript

Daniel Feldroy — Tue, 21 Apr 2020 06:50:11 +0000

I've always enjoyed the feeling of JavaScript promises, possibly because they feel more explicit than what I've read about await and async. I've also used await and async in Python, and have always wished async code there was implemented with JavaScript-style promises.

However, a lot of JavaScript code is written with await and async, so I decided to knuckle down and get familiar with them.

First I defined a function that returned a promise and would take some time:

function squareXAndWaitXSeconds(x) { 
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x*x); // square the result
    }, x * 1000); // delay by x seconds
  });
}

Then I wrote an async function to call the squareXAndWaitXSeconds function:

async function addItem(y) {
  var x = await squareXAndWaitXSeconds(y); // await for the response
  console.log(x); // Log the response
}

While this worked, it was hard to see it in action. So I used HTML for better display:

<link href="https://unpkg.com/tailwindcss@^1.2/dist/tailwind.min.css" rel="stylesheet">

<div class="container">
  <h1 class="text-4xl">Playing with Await/Async</h1>

  <!-- Use an ordered list to display the results in order they appear -->
  <ol id="result" class="list-decimal px-10">
  </ol>
</div>

I modified the addItem function to post the result in li tags inside the ordered list:

 async function addItem(y) {
  var x = await squareXAndWaitXSeconds(y);

  // Show x  when it's done being awaited
  var li = document.createElement('li');
  li.setAttribute("class", "text-green-600");
  var sentence = `Returning ${x} from ${y} in ${y} seconds`
  var text = document.createTextNode(sentence);
  li.appendChild(text);
  result.appendChild(li);  
}

This was much better, but I wanted a spread of numbers to evaluate. I used a for...of loop to give me better insight into what was happening:

// Count down from 5 so we can see that higher number values
// generate results after lower number values. Nothing blocks!
for (let i of [5,4,3,2,1]){
  // Show we're testing "i" immediately
  var li = document.createElement('li');
  li.setAttribute("class", "text-red-600");
  var text = document.createTextNode(`Testing ${i}`);
  li.appendChild(text);
  result.appendChild(li);

  // run the addItem() function. It won't show until i second(s) pass.
  addItem(i);
}

In My Own Words: What's Happening

The addItem() function is labeled async, meaning that it won't block while it "waits" for the await called function (squareXandWaitXSeconds) to finish evaluating. The logic flow keeps going, hence addItem() is an asynchronous function.

The setTimeout function is used here to test this capability. In other circumstances, this could be used to render complex data on a screen (including games), call an API, or access a database.

You can see where I noodled this out in this codepen:

Day 5 of #100DaysOfCode: Dev.to Cover Image Generator

Audrey Roy Greenfeld — Mon, 20 Apr 2020 06:45:41 +0000

Tonight I created this cover image generator:

It uses JavaScript to draw on an HTML5 canvas.

To change the text:

Fork this on CodePen: https://codepen.io/audreyfeldroy/pen/rNOMxad
In the JS panel, change the lines with ctx.fillText to be the text you want.
Break any long lines into two lines, or shrink the fonts.

You'll probably also want to change:

The colors
The fonts
The parameters of the fractal tree

Have fun! I'd love to see what you create, so please share your posts/forks in the comments below.

Day 3: Attaching Custom Exceptions to Functions and Classes in Python

Daniel Feldroy — Mon, 20 Apr 2020 05:55:29 +0000

Having too many custom exceptions on a project can be a pain, but a few choices are nice. The problem is that in complex libraries having to import both functions and exceptions becomes a drag. To mitigate having to remember to import custom exceptions, this is a handy pattern you can use in a project and can be done on both functions and classes.

Attaching a Custom Exception to Functions

This works because Python functions are first-class objects. They can be passed around as things, and in this case, have things assigned to them.

# logic.py
class DoesNotCompute(Exception):
    """ Easy to understand naming conventions work best! """
    pass

def this_function(x):
    """ This function only works on numbers."""
    try:
        return x ** x
    except TypeError:
        raise DoesNotCompute("Function does not compute")

# Assign DoesNotCompute exception to this_function
this_function.DoesNotCompute = DoesNotCompute

Now I can import the function, and it won't just throw DoesNotCompute exceptions, it will also carry the function along with the import:

>>> from logic import this_function
>>> this_function(5)
3125
>>> this_function(4.5)
869.8739233809259
>>> this_function('will throw an error.')
Traceback (most recent call last):
  File "<input>", line 1, in <module>
  File "logic.py", line 10, in this_function
    raise DoesNotCompute
DoesNotCompute

Alright, that doesn't seem like much, but let's add in some exception handling:

>>> try:
...     this_function('is an example')
... except this_function.DoesNotCompute:
...     print('See what attaching custom exceptions to functions can do?')
...
...
See what attaching custom exceptions to functions can do?

Attaching the Custom Exception to Classes

All we have to do is enhance our existing logic.py file by adding ThisClass:

# logic.py
class DoesNotCompute(Exception):
    """ Easy to understand naming conventions work best! """
    pass

# removed the function example for clarity

class ThisClass:
    # Assign DoesNotCompute to this class
    DoesNotCompute = DoesNotCompute

    def this_method(self, x):
        """ This method only works on numbers."""
        try:
            return x ** x
        except TypeError:
            raise self.DoesNotCompute("Class does not compute")

Now to demonstrate in the shell (Python REPL for the semantic purists):

>>> from logic import ThisClass
>>> this_class = ThisClass()
>>> this_class.this_method(3.3)
51.415729444066585
>>> this_class.this_method("Don't create too many custom exceptions")
Traceback (most recent call last):
  File "<input>", line 1, in <module>
  File "logic.py", line 24, in this_method
    raise DoesNotCompute
DoesNotCompute
>>> try:
...     this_class.this_method('I like ice cream')
... except ThisClass.DoesNotCompute:
...     print('Milk, ice, and fruit in a blender is nice too')
...
...
Milk, ice, and fruit in a blender is nice too

Admonition: Don't Go Crazy

Rather than use this trick all over the place, considering using it in a few strategic places to powerful effect. For example, Django uses it only in a few places, and publicly only on MyModelClass.DoesNotExist and MyModelClass.MultipleObjectsReturned. By limiting Django's use of this technique, Django libraries are that much easier to comprehend. In this case, less complexity means more.

I say this because this pattern lends itself to creating custom exceptions to the point of effectively replacing Python's stock exceptions with your own. This makes for harder-to-maintain and harder-to-learn projects.

Not that I've ever done that. Ahem.

Updated 2020/04/20: Added missing self in ThisClass thanks to Chiheb Nexus Lad.

Day 4 of #100DaysOfCode: Building My First Square App with Glitch

Audrey Roy Greenfeld — Sun, 19 Apr 2020 00:25:44 +0000

Today I built my first working Square app!

I started with Square's official Order-Ahead Sample App, a Node/Express project.

Following its accompanying tutorial in the Square docs:

Configuration

I created an Order Ahead app in https://developer.squareup.com/apps/ (you need a Square account to do this)

I updated config.json with the sandbox app ID and token.

Running npm test failed. I did npm install and tried again. It worked:

$ npm test

> order-ahead-sample-app@0.0.0 test /Users/arg/projects/3rd-party/connect-api-examples/connect-examples/v2/node_orders-payments
> NODE_ENV=sandbox node ./bin/www

First Local Run

I went to http://localhost:3000/ and saw a page with "Sandbox Location Business Nickname" at the top. Yay, the app runs locally!

Generating Test Data

I ran the example script to seed the sandbox store catalog with test data. It generated a bunch of restaurant food items:

$ npm run seed

> order-ahead-sample-app@0.0.0 seed /Users/arg/projects/3rd-party/connect-api-examples/connect-examples/v2/node_orders-payments
> NODE_ENV=sandbox node ./bin/script/seed-catalog.js generate

Successfully uploaded item: #Italian Sandwich
Successfully uploaded item: #Steak Tacos
Successfully uploaded item: #Autumn Soup
Successfully uploaded item: #Sunny-Side Egg on Toast
Successfully uploaded item: #Fried Chicken Sandwich
Successfully uploaded item: #Salmon with Zucchini
Successfully uploaded item: #Oatmeal with Fruit
Successfully uploaded item: #Mediterranean Yogurt Bowl
Successfully uploaded item: #Meatballs
Successfully uploaded item: #Pancakes with Fruit
Successfully uploaded item: #Bacon Cheeseburger
Successfully uploaded item: #Grilled Steak

Placing a Sample Order

Restarting the local server with npm test, I now see those test items. I can click them to see a pop-up with detail and a Buy This button:

Clicking Buy This leads to Choose Delivery Method:

Under Delivery Method, the only option is Pickup.
Under Pickup Location, the only option is Sandbox Location Business Nickname.

The next screen was Review and Complete Your Order. I entered the test card:

I clicked Pay with Card and it gave me this Order Confirmation:

Verifying the Order in the Sandbox

Sure enough, the order shows up under Orders:

I can mark it In Progress, then Ready, then Picked Up using the upper right button.

That's great that the sample Square app works locally.

Getting It Running on Glitch

I made a copy of the node_orders-payments folder as OrderAhead.

I copied GitHub's Node.gitignore as the project .gitignore.

The code's now in a GitHub repo: https://github.com/feldroy/OrderAhead

In Glitch, I clicked New Project > Clone from Git Repo and pasted in git@github.com:feldroy/OrderAhead.git. The screen went black and it didn't like that. I tried again with https://github.com/feldroy/OrderAhead.git and that worked.

The Square tutorial had me put credentials into config.json earlier, which I .gitignored. I moved those to .env and now load them from there in util/square-connect-client.js:

const config = {
  "path": "https://connect.squareupsandbox.com",
  "squareApplicationId": process.env.SQUARE_APPLICATION_ID,
  "squareAccessToken": process.env.SQUARE_ACCESS_TOKEN
}

Here's the Glitch app:

The Deployed Demo Site

You can experiment with this and even place test orders using the demo credit card.

Play with the live demo: https://orderahead.glitch.me/

Finally, if you're new to Square, here's an invite to get free processing on up to $1,000 in credit card transactions for the first 180 days.

Day 2: hover, underline, list-disc, and px-*

Daniel Feldroy — Sat, 18 Apr 2020 23:38:36 +0000

I like it when links hovered over are underlined. I learned how to do this in Tailwind CSS today by adding hover:underline to a tags. Here's an example:

<a
  class="text-blue-600 hover:underline"
  href="https://dev.to/feldroy/day-2-hover-underline-list-disc-and-px-3apn">
    Day 2: hover, underline, list-disc, and px-*
</a>

On my Glitch project, I'm organizing links to my dev.to posts like the one you're reading by putting them in an unordered list. To my surprise, using this code:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Gave me this result:

That almost works. I like my unordered lists to have bullets. The docs told me to use list-disc in a class on the ul element, so I did. And I got:

Hmmm... the bullets appear but they are at the edge of the containing div. Then I remembered that Tailwind CSS makes it easy to adjust horizontal padding through the use of the px-* classes. After a little experimentation, I settled on px-6. This is how it looks now:

And the code for the list:

<ul class="list-disc px-6">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Finally I put in my content:

<ul class="list-disc px-6">
  <li>
    <a 
      class="text-blue-600 hover:underline" 
      href="https://dev.to/feldroy/day-1-building-a-page-after-a-css-reset-1dif">
        Day 1: Building a Page After a CSS Reset
    </a>
  </li>
  <li>
    <a class="text-blue-600 hover:underline" 
       href="https://dev.to/feldroy/day-2-hover-underline-list-disc-and-px-3apn">
         Day 2: hover, underline, list-disc, and px-*
    </a>
  </li>
</ul>

Here is today's code on glitch.