DEV Community: Daniel Feldroy

What's the best thing about working for Octopus Energy?

Daniel Feldroy — Wed, 09 Jun 2021 17:41:04 +0000

On November 16, 2020, I started my first day of employment at Octopus Energy. Here's why I love working there.

The Tech Stack

The entire tech stack is built on things I know. Python, Django, AWS, and modern JavaScript frameworks. It's been implemented in a very solid way, managing to be both conservative in approach yet innovative in design. While my previous experience has proven useful, I've had the chance to learn new and exciting things. Examples of things I've learned:

Hashistack on AWS
React & Next.js

Yet when I think about it, the tech stack isn't the best thing about working for Octopus. I can find the same tech stack in a thousand other organizations.

The People

It's always a delight to work with bright, positive-minded people who share your excitement for a job or cause. I like being around people who know things I do not, for no other reason than I can learn by osmosis. I enjoy being around them, and can't wait to meet them as the pandemic fades away.

I also am amazed by the same treatment across different groups within the organization. No group or division is looked down on, be they software engineering, customer support, marketing, or executive leadership. We're all considered humans, not resources to be expended.

Yet when I think about it, while I appreciate my co-workers beyond what words can describe, the people aren't the best thing of working for Octopus. I can and have found good people in other places.

The Diversity

Speaking of people, Octopus Energy is a diversity-minded company. In my team alone, we have people from four different continents with five different native languages. We can admittedly do better on the gender front, and are striving to do better. For many reasons, this is important to me, for I believe it's not only the right thing to do, but it also increases a team's strength to have a broader set of viewpoints.

Yet when I think about it, the focus on diversity isn't the best thing of working for Octopus. Diversity-focused companies are becoming more common, and some even have better numbers than Octopus.

The Business

Octopus Energy is a fast-growing company spreading its tentacles to new markets and nations. In the months and years to come, we're going to disrupt the energy business. In the meantime, in the brief 8 months I've been with the firm the valuation has doubled up to 3 billion dollars. It's exciting to be part of something growing explosively.

Yet when I think about it, the business isn't the best thing of working for Octopus. I can think of other companies with similar explosive growth, some of whom I interviewed when Octopus reached out to me.

What is the best thing about working for Octopus Energy?

The answer is forthcoming in an article I'll be releasing on Thursday, June 10th. Stay tuned!

Image used with permission by Octopus Energy

Switching between VSCode terminals using hot keys

Daniel Feldroy — Sat, 10 Apr 2021 03:10:14 +0000

When I code I prefer to keep my hands on the keyboard as much as possible. For me, this keeps me more focused on the task at hand. Switching to the mouse is something try to I reserve for interacting with browsers.

By default VSCode doesn't include the keybinding necessary to switch terminals via the keyboard. You are forced to use the mouse, which disrupts my flow.

Here's how you add terminal switching keybindings in VSCode:

Step 1

Use ctrl+p (cmd+p on the Mac) and type keybindings.json. Select the file from the drop downlist. This will open a file that looks like this:

// Place your key bindings in this file to
// override the defaults
[]

Step 2

Replace the contents of keybindings.json with this for Windows or Linux:

// Place your key bindings in this file to
// override the defaults
[
    {
        "key": "ctrl+down",
        "command": "workbench.action.terminal.focusNext",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+up",
        "command": "workbench.action.terminal.focusPrevious",
        "when": "terminalFocus"
    }
]

Or this when using the Mac:

// Place your key bindings in this file to
// override the defaults
[
    {
        "key": "cmd+down",
        "command": "workbench.action.terminal.focusNext",
        "when": "terminalFocus"
    },
    {
        "key": "cmd+up",
        "command": "workbench.action.terminal.focusPrevious",
        "when": "terminalFocus"
    }
]

Now you can use the keyboard to change terminals in VS Code.

Django Slug + ID URLs: Copying Dev.to's URL pattern

Daniel Feldroy — Fri, 18 Sep 2020 00:15:01 +0000

One of the things I like about dev.to is their URL design. It combines a slug with a hashed value representing an internal representative of some kind of index value to ensure uniqueness. You can see an example of it in my post "Autodocumenting Makefiles" featured in the URL "https://dev.to/feldroy/autodocumenting-makefiles-175b".

Let's break apart that URL:

feldroy is my company name.
autodocumenting-makefiles is the slug and it's based off the article title.
175b is a hashed value that is either stored in an indexed character field or broken down by the router into a numeric primary key.

Here is another way of looking at their URL design:

/<org-or-username>/<slugified-title>/<hashed-id>

Let's see how we can implement a simplified version of this technique using Django.

Our Version of the URL

We're going with a simpler version of the Dev.to implementation. Our implementation will use the database primary key to ensure uniqueness instead of the hashed value relied on by Dev.to.

/<username>/<slugified-title>/<primary-key>/

Okay, now that we've determined our URL design, let's build it!

The Model

Store the data!

# articles/models.py
from django.conf import settings
from django.db import models
from django.utils.translation import gettext_lazy as _

class Article(models.Model):

    title = models.CharField(_("Title"), max_length=100)
    slug = models.CharField(_("Slug"), max_length=100)
    author = models.ForeignKey(settings.AUTH_USER_MODEL, 
        on_delete=models.CASCADE)
    # More fields...

The Form

Collect and validate the data!

# articles/forms.py
from django import forms

from .models import Article

class ArticleForm(forms.ModelForm):

    class Meta:
        model = Article
        fields = ('title', ) # more fields

The Views

Now that we have the model and form, let's build the views:

# articles/views.py
from django.shortcuts import get_object_or_404
from django.contrib.auth.mixins import LoginRequiredMixin
from django.utils import slugify
from django.views.generic import CreateView, DetailView, UpdateView

from .forms import ArticleForm
from .models import Article


class ArticleCreateView(LoginRequiredMixin, CreateView):

    model = Article
    form_class = ArticleForm

    def form_valid(self, form):
        # Save the data to an article object - 
        #   this hasn't yet saved to the database.
        article = form.save(commit=False)
        article.slug = slugify(article.title)
        article.author = self.request.user
        # Save again - this time to the database
        article.save()
        return super().form_valid(form)


class ArticleUpdateView(LoginRequiredMixin, UpdateView):
    model = Article
    form_class = ArticleForm

    def get_object(self):
        # We get records by primary key, which ensures that
        # changes in the title or slug doesn't break links
        return get_object_or_404(Article,
            id=self.kwargs['pk'],
            author__username=self.kwargs['username'],
            author=self.request.user
        )

    def form_valid(self, form):
        # Update the slug if the title has changed.
        article = form.save(commit=False)
        article.slug = slugify(article.title)
        article.save()
        return super().form_valid(form)        


class ArticleDetailView(DetailView):
    model = Article

    def get_object(self):
        # We get records by primary key, which ensures that
        # changes in the title or slug doesn't break links
        return get_object_or_404(Article,
            id=self.kwargs['pk'],
            author__username=self.kwargs['username']
        )

The URLs

Let's route this into our urls:

# articles/urls.py
from django.urls import path

from articles import views

urlpatterns = [
    path(route='/new/',
        view=views.ArticleCreateView.as_view(),
        name='create',
    ),
    path(route='/<slug:username>/<slug:slug>/<int:pk>/edit/',
        view=views.ArticleUpdateView.as_view(),
        name='update',
    ), 
    path(route='/<slug:username>/<slug:slug>/<int:pk>/',
        view=views.ArticleDetailView.as_view(),
        name='detail',
    ),       
]

And in the project's root config, we add in this:

# config/urls.py or wherever you stick the project's root urls.py
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    # Django Admin, change this URL
    path('two-scoops-of-django-is-awesome', admin.site.urls),
    # Articles management
    path('', include('articles.urls', namespace='article')),
    # More URLS here
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

# There's certainly more URLs down here

Add templates and there it is, a Django example that follows the Dev.to URL design!

Going Forward

Experienced Django users will know that the slugification logic in the form_valid methods properly belongs in the Article model's save() method, rather than the views. That's the kind of thing we discuss in Two Scoops of Django.

Speaking of which, if you want to learn all kinds of advanced tricks and tips, take a look at me and my wife's my ice-cream themed book and course on Django Best Practices.

Customizing Django Allauth Signup Forms

Daniel Feldroy — Mon, 14 Sep 2020 18:31:52 +0000

Sometimes you want to modify Django signup forms to include more data fields. In this tutorial, I have a fictional app called "SpyBook", a social network for secret operatives. At launch there are only two types of users, "Spy" and "Driver". Users need to be able to choose which one they are.

Our example will build off code from my Cookiecutter Django project, but should be portable to any project using Django Allauth.

Step 1: Tell Django-Allauth to Use A Customized Signup Form

At the bottom of config/settings/base.py, past in the following code snippet:

# Control the forms that django-allauth uses
ACCOUNT_FORMS = {
    "login": "allauth.account.forms.LoginForm",
    "add_email": "allauth.account.forms.AddEmailForm",
    "change_password": "allauth.account.forms.ChangePasswordForm",
    "set_password": "allauth.account.forms.SetPasswordForm",
    "reset_password": "allauth.account.forms.ResetPasswordForm",
    "reset_password_from_key": "allauth.account.forms.ResetPasswordKeyForm",
    "disconnect": "allauth.socialaccount.forms.DisconnectForm",
    # Use our custom signup form
    "signup": "spybook.users.forms.SpyBookSignupForm",
}

Step 2: Import Django Forms

In <yourprojectname>/users/forms.py, Cookiecutter Django imports django.contrib.auth.forms as forms. This is a namespace problem since typically django.forms is normally imported as plain forms. To address that, let's just import django.forms under a different namespace:

# Importing django.forms under a special namespace because of my old mistake
from django import forms as d_forms

Step 3: Import django-allauth's SignUp Form

Right under that forms import, get the SignUpForm:

from allauth.account.forms import SignupForm

Step 4: Write Our Custom SignUp Form

Rather than write out a long explanation, I'll just comment every line of code.

# SpyBookSignupForm inherits from django-allauth's SignupForm
class SpyBookSignupForm(SignupForm):

    # Specify a choice field that matches the choice field on our user model
    type = d_forms.ChoiceField(choices=[("SPY", "Spy"), ("DRIVER", "Driver")])

    # Override the init method
    def __init__(self, *args, **kwargs):
        # Call the init of the parent class
        super().__init__(*args, **kwargs)
        # Remove autofocus because it is in the wrong place
        del self.fields["username"].widget.attrs["autofocus"]

    # Put in custom signup logic
    def custom_signup(self, request, user):
        # Set the user's type from the form reponse
        user.type = self.cleaned_data["type"]
        # Save the user's type to their database record
        user.save()

I wrote this out on my live stream, which you can watch on my youtube and twitch channels. I'll also be putting together a short video presentation of how this works. Of course, the code for this can be found on GitHub.

If you want to learn all kinds of advanced tricks and tips, take a look at my ice-cream themed book and course on Django Best Practices.

Multiple User Types With Custom Data Fields for Django

Daniel Feldroy — Tue, 21 Jul 2020 00:08:00 +0000

How to add custom data fields to multiple user types with Django in a maintainable way that lets us easily use Django forms or DRF serializers. Features an exciting ending with a coffee cup!

Continues from where the "Multiple User Types | Django video finishes. Watch that video at on youtube.

Code from the video, with full source code available on github:

class SpyMore(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    gadgets = models.TextField()


class Spy(User):
    base_type = User.Types.SPY
    objects = SpyManager()

    class Meta:
        proxy = True

    def whisper(self):
        return "whisper"


class DriverMore(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    model = models.CharField(max_length=255)
    make = models.CharField(max_length=255)
    year = models.IntegerField()


class Driver(User):
    base_type = User.Types.DRIVER
    objects = DriverManager()

    @property
    def more(self):
        return self.drivermore

    class Meta:
        proxy = True

    def accelerate(self):
        return "Go faster"

Tell me what intermediate-to-advanced topic you want me to cover next!

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.

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.

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