DEV Community: Paul Bennett

The prototype I built for my team

Paul Bennett — Wed, 06 Apr 2022 14:00:09 +0000

I was tasked with building a UI for a work project our team took on. The UI would need to display audience data in a table format and get that data from a Postgres database.

The prototype needed to be easy to use, as well as functional allowing a no techie user to create audience segments easily. Allow them to target the segments later on for one of their advertising campaigns.

When deciding what tech to use, I went to straight to what I know and that was React and TailwindCSS. The only back end I have build before was for my ReactFastContacts app, which was a FastAPI backend with an SQLite database. I knew I wanted a database where I can use JS so I didn't have to worry about hosting the backend anywhere or creating any sort of API.

I found supabase and thought it would be perfect for the task at hand, and it was. Being an open-source product the community around supabase is awesome, with tones of help and content to learn. Another reason I knew I picked the right product for the job.

Creating the database

Before this project, I have never heard of an ERD (Entity–relationship model diagram) there are some good articles online about them however I found this one good enough, plus the videos help explain them a bit further.

I was giving the table configurations via an Excel spreadsheet, with table names, column names and so on. Once I got my head around it I created the following ERD.

I used the supabase UI to create the tables and all the relationships, which was pretty easy. Having said that I use DataGrip daily at work, and wrote some SQL to re-create the tables if needed along the lines of

CREATE TABLE "SignalJourneyAudiences"
(
    audience_id serial
        CONSTRAINT signaljourneyaudiences_pk
            PRIMARY KEY,
    segment     varchar,
    enabled     bool
);

CREATE UNIQUE INDEX signaljourneyaudiences_audience_id_uindex
    ON "SignalJourneyAudiences" (audience_id);

CREATE TABLE "SignalJourneySources"
(
    source_id serial
        CONSTRAINT signaljourneysource_pk
            PRIMARY KEY,
    source    varchar
);

...

The UI

Now the backend is up and running, it's time to work on the user interface. The fun part, is the React part. I took the chance to use Vite for this project due to the fact I didn't really need all the bells and whistles that came with something like NextJs. Using Vite was a blast it's pretty simple to use and add on top of.

The UI itself is pretty simple it's just a table with a form that populates some data after the user has submitted it to the database. As I was already using Tailwind I wanted to bring some life to the form and make things look decent. This is where headless.ui came in allowing me to make decent looking form components. I went ahead a built a couple of Listbox components to give the form a better feel. The headless ui library was awesome to use and makes forms and other little components a joy to build. You're even able to combine certain components within each other.

The data

With the form and table more less coded up and looking good, it's time to populate the UI with some data. Supabase makes this super easy with supabase-js all that is required to get going is to create a connection client like so:

First install the supabase-js package

npm install @supabase/supabase-js

Then simply create a client in a seperate file within your project.

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

Then just import that into the files that you need to connect to your database.

The table was where I needed to join a few tables together to get the desired result, in SQL it was pretty straight forward, especially with the auto-completion from DataGrip. I needed to re-create the following SQL query in supabase.

SELECT
     constraint_id,
     segment,
     source,
     constraint_type,
     constraint_value,
     targeting,
     frequency,
     period
FROM "SignalJourneyAudienceConstraints"
JOIN "SignalJourneyAudiences" sja ON sja.audience_id = "SignalJourneyAudienceConstraints".audience_id
join "SignalJourneySources" sjs ON "SignalJourneyAudienceConstraints".source_id = sjs.source_id
join "SignalJourneyConstraintType" sjct ON "SignalJourneyAudienceConstraints".constraint_type_id = sjct.constraint_type_id;

Now time to convert that into a supabase query. Another good thing about supabase is that after creating your tables and relationships, supabase gives you API documentation on how to get what you need from your database.

const {data, error} = await supabase
      .from('SignalJourneyAudienceConstraints')
      .select(
        `
      constraint_id,
      audience_id:SignalJourneyAudiences(audience_id),
      segment:SignalJourneyAudiences(segment) ,
      source:SignalJourneySources(source) ,
      constraint_type:SignalJourneyConstraintType(constraint_type),
      constraint_value,
      targeting,
      frequency,
      period
    `,
      )
      .order('constraint_id', {ascending: true})

    if (data) {
      setTableData(data)
    }
    if (error) {
      setErrorMessage(error.message)
    }
  }

Head over to joins for more information about joins in supabase. With my above query, I learned a few things...

Using the syntax above allows you to query the same foreign table twice. In this case, you can use the name of the joined column to identify which join you intend to use.

How I understood the query

<col you want to join>:<table to join from>(<the FK from joining table>)

When trying to use the data the joins come back as objects like audience_id: {audience_id: 123 } which did throw me when trying to access the data but nothing dot notation can't fix.

Overall my use of supabase was brilliant, the syntax was very simple to use the documentation was brilliant and all in all, supabase was a pleasurable experience.

The UI with data

The UI is done the data is populated but now I had to give some user feedback when it came to messing with the data, for example.

How can a user delete a row from the table?
How can a user enable / disable an audience segment?
How to present a user with success / error messages?

With React and supabase these two tasks were pretty straightforward, here is how I used supabase to delete a row from the table.

const deleteRow = async constraint_id => {
    const {data, error} = await supabase
      .from('SignalJourneyAudienceConstraints')
      .delete()
      .match({constraint_id: constraint_id})

    if (data) {
      popupValidation('success', 'Constraint deleted successfully')
      window.location.reload()
    }
    if (error) {
      popupValidation('error', error.message)
    }
  }

Using the .delete() method with the match() allowed me to delete a row via an ID the ID being the primary key. As you can see the function is pretty simple this is how easy it was to use supabase.

I used something similar to enable/disable audience segments but used the .update() method instead, which allowed me to update records. I created one function to enable and another to disable like so...

const enableAudience = async audience_id => {
    const {data, error} = await supabase
      .from('SignalJourneyAudiences')
      .update({audience_id: audience_id, enabled: true})
      .match({audience_id: audience_id})

    if (data) {
      window.location.reload(true)
    }
    if (error) {
      popupValidation('error', error.message)
    }
  }

  const disableAudience = async audience_id => {
    const {data, error} = await supabase
      .from('SignalJourneyAudiences')
      .update({audience_id: audience_id, enabled: false})
      .match({audience_id: audience_id})

    if (data) {
      window.location.reload(true)
    }

    if (error) {
      popupValidation('error', error.message)
    }
  }

I then used another function with some conditional logic which would check if a segment was enabled or disabled, then fire off the correct function to make the update.

const handleEnableDisableAudience = async audience_id => {
    segments.map(segment => {
      if (audience_id === segment.audience_id && segment.enabled === false) {
        enableAudience(audience_id)
      }
      if (audience_id === segment.audience_id && segment.enabled === true) {
        disableAudience(audience_id)
      }
    })
  }

I then used a ternary operator with React Icon to give some user feedback to let them know if the audience segment was enabled or disabled. Which on click would fire the function to check if it was enabled/disabled then run the correct function to swap the state.

<BadgeCheckIcon
  className={`h-6 w-6 ${
    segment.enabled ? 'text-green-400' : 'text-red-500'
  } hover:cursor-pointer hover:text-gray-500`}
  onClick={() => handleEnableDisableAudience(segment.audience_id)}
/>

When it came to handling errors or success messages for the user, I had to think of something new as this wasn't something I had touched before. Here I created some states using useState if we take the success state for example it went something like this.

const [success, setSuccess] = useState(false)
const [successMessage, setSuccessMessage] = useState('')

This allowed me to create a function that would use those states to set messages for a popup that was positioned in the top right of the screen. Doing it this way allowed me to set the states of the message anywhere throughout the component. I created myself a function that could handle all the different states.

const popupValidation = (type, message) => {
    if (type === 'success') {
      setLoading(false)
      setSuccess(true)
      setSuccessMessage(message)

      setTimeout(() => {
        window.location.reload()
      }, 2000)
    } else if (type === 'warning') {
      setLoading(false)
      setWarning(true)
      setWarningMessage(message)

      setTimeout(() => {
        setWarning(false)
        setLoading(false)
      }, 2500)
    } else if (type === 'error') {
      setLoading(false)
      setError(true)
      setErrorMessage(message)

      setTimeout(() => {
        setError(false)
        setLoading(false)
      }, 2500)
    }
  }

That in turn was called like so.

if (data) {
  popupValidation('success', 'Successfully added new audience constraint')
}
if (error) {
  popupValidation('error', error.message)
}

Now I am sure for the next bit there is an easier way of doing it, however for me this is what I came up with. I used a ternary operator for every state like this.

{
  success ? (
    <div
      className="fixed top-5 right-5 z-40 rounded-b-lg border-t-4 border-green-500 bg-green-100 px-4 py-3 text-green-900 shadow-md"
      role="alert"
    >
      <div className="flex">
        <div className="mr-3 py-1">
          <LightningBoltIcon size="28" className="h-8 w-8" />
        </div>
        <div>
          <p className="font-bold">Success</p>
          <p className="text-sm">{successMessage}</p>
        </div>
      </div>
    </div>
  ) : null
}

I tried to put the three of them into a component allowing me to use it through out my project without copying and pasting it. I haven't quite figured that out yet. It's on my ToDo list...

Conclusion

With this project, I learned a lot and I for sure haven't gone over everything but I have gone on enough. The project is still a work in progress some tweaks here and there are needed, with this project though I can safely say it did skyrocket my React skills I learnt.

More about useEffect and how it works
Using useState to enable the application to perform better
TheuseRef hook
supabase and all its wonders
How to use headless ui in a project
React router and created routers
and plenty more.

Creating a dark theme switch with Tailwind & Framer Motion

Paul Bennett — Fri, 25 Mar 2022 12:57:15 +0000

Dark themes are all the rage, most of the sites you visit today will have some sort of dark theme switch. Allowing you to switch between a light theme and a dark theme on the site you're visiting.

I will hopefully explain how to create an awesome switch using a little bit of Tailwind and Frame Motion. Framer motion is an animation library for React, it's super cool and I recommend that you check it out.

This is what we will be knocking up today.

First let's install framer and then import it into our component



npm install framer-motion

Once installed let's add it to our component.



import { motion } from "framer-motion"

We need to then import useState from React so we can capture the state of isOn our component should look something like this now.



import React, { useState} from 'react'
import {motion} from 'framer-motion'

export default function DarkModeSwitch(){

    const [isOn, setIsOn] = useState(false)

    return()
}

Above we have a state of false to isOn we're currently returning nothing but let's change that now.

If you take a look at the Framer example it looks very straightforward. With the example, they're using vanilla CSS. Let's use Tailwind CSS with ours.

First, we need to create a container div for our switch.



<div className={`flex-start flex h-[50px] w-[100px] rounded-[50px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${ isOn && 'place-content-end'}`}></div>

I have included a ternary operator in my className string this is because we need to conditional move the switch when isOn is true or false.



${isOn && 'place-content-end'}`}
```

We're using **place-content-end** here which allows us to place the element at the end of its container. This is similar to using `justify-end` in Tailwind. The other styles in `className` are just for my preference you can change these to what you like. 

Now we have our container div, let's give it some magic. We need to give it an `onClick` attribute. So let's do that now.

```js
<div onClick={toggleSwitch} className={`flex-start flex h-[50px] w-[100px] rounded-[50px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${ isOn && 'place-content-end'}`}></div>
```

As you can see we have given the `onClick` a function to execute so let's add that and the div container into our component.

```js
import React, { useState} from 'react'
import {motion} from 'framer-motion'

export default function DarkModeSwitch(){

    const [isOn, setIsOn] = useState(false)

    const toggleSwitch = () => setIsOn(!isOn)

    return(
        <div onClick={toggleSwitch} className={`flex-start flex h-[50px] w-[100px] rounded-[50px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${ isOn && 'place-content-end'}`}></div>
    )
}
```

What are we doing with then `toggleSwitch` why aren't we setting it true? I will explain that later but for now let's leave it the way it is. Now time to add the switch. With the container div we should just have a rectangle with rounded edges, let's change that now.

This is where motion comes in, we need to create another `div` but this time it will be a `motion.div` this allows us to give it some frame magic. Let's add that below with some classes from Tailwind.

```js
import React, { useState} from 'react'
import {motion} from 'framer-motion'

export default function DarkModeSwitch(){

    const [isOn, setIsOn] = useState(false)

    const toggleSwitch = () => setIsOn(!isOn)

    return(
        <div onClick={toggleSwitch} className={`flex-start flex h-[50px] w-[100px] rounded-[50px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${ isOn && 'place-content-end'}`}>

            <motion.div
                className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-black/90"
                layout
                transition={spring}
            >

            </motion.div>      

        </div>
    )
}
```

We now have out `motion.div` with the additional attributes of `layout` and `transition` let's go through those now.

**layout**: `boolean` | `"position"` | `"size"`

If `true`, this component will automatically animate to its new position when its layout changes. More info [here](https://www.framer.com/docs/component/###layout)

**transition**: Transition

Defines a new default transition for the entire tree. More info [here](https://www.framer.com/docs/motion-config/###transition)

Let's add our `transition` animations, this is going to be an object like so.

```js
const spring = {
  type: 'spring',
  stiffness: 700,
  damping: 30,
}
```

- [spring](https://www.framer.com/docs/transition/#spring): An animation that simulates spring physics for realistic motion.
- [stiffness](https://www.framer.com/docs/transition/###stiffness): Stiffness of the spring. Higher values will create more sudden movement. Set to 100 by default.
- [damping](https://www.framer.com/docs/transition/###damping): Strength of opposing force. If set to 0, spring will oscillate indefinitely. Set to 10 by default.

After adding our `motion.div` and `spring` object we should have something like this:

```js
import React, { useState} from 'react'
import {motion} from 'framer-motion'

export default function DarkModeSwitch(){

    const [isOn, setIsOn] = useState(false)

    const toggleSwitch = () => setIsOn(!isOn)

    const spring = {
        type: 'spring',
        stiffness: 700,
        damping: 30,
    }

    return(
        <div onClick={toggleSwitch} className={`flex-start flex h-[50px] w-[100px] rounded-[50px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${ isOn && 'place-content-end'}`}>

            <motion.div
                className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-black/90"
                layout
                transition={spring}
            >

            </motion.div>      

        </div>
    )
}
```

This would be our finished switch, but wait there is more..what about the icons and the cool click animation??? Ok, so let's install [React Icons](https://react-icons.github.io/react-icons/) and grab those icons.

Install React Icons via npm.

```bash
npm install react-icons --save
```

I have chosen the following icons, they're from the Remix library. Let's add those now.

```js
import React, { useState} from 'react'
import {motion} from 'framer-motion'
import {RiMoonClearFill, RiSunFill} from 'react-icons/ri'
...
```

Now we need to place our icons, inside of our toggle switch. Our toggle switch is the `motion.div` we made earlier. This stage is pretty simple, we just need to create another `motion.div` inside of the parent `motion.div` and give it some ternary operators and a `whileTape` attribute like so:

```js
<motion.div whileTap={{rotate: 360}}>
    {isOn ? (<RiSunFill className="h-6 w-6 text-yellow-300" />) : (<RiMoonClearFill className="h-6 w-6 text-slate-200" />)}
</motion.div>
```

You can give your icons your own styling but this is how I have set mine up. Using the ternary operator allows us to switch the icon on the status of `isOn` we should now have the following:

```js
import {motion} from 'framer-motion'
import React, {useState} from 'react'
import {RiMoonClearFill, RiSunFill} from 'react-icons/ri'

export default function DarkModeSwitch(){

    const [isOn, setIsOn] = useState(false)

    const toggleSwitch = () => setIsOn(!isOn)

    const spring = {
        type: 'spring',
        stiffness: 700,
        damping: 30,
    }

    return(
        <div onClick={toggleSwitch} className={`flex-start flex h-[50px] w-[100px] rounded-[50px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${ isOn && 'place-content-end'}`}>

            <motion.div
                className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-black/90"
                layout
                transition={spring}
            >
                <motion.div whileTap={{rotate: 360}}>
                    {isOn ? (<RiSunFill className="h-6 w-6 text-yellow-300" />) : (<RiMoonClearFill className="h-6 w-6 text-slate-200" />)}
                </motion.div>

            </motion.div>      

        </div>
    )
}
```

### Adding into Local Storage

Now we have a working component, but it's not completely done we need to handle our dark mode with `localStrogae` so the user can keep their preference for next time. Reading over the [Tailwind Docs](https://tailwindcss.com/docs/dark-mode) on dark mode, we need to be able to toggle dark mode manually. To do this we need to add ` darkMode: 'class',` into our `tailwind.config.js` file. Something like this.

```js
module.exports = {
  darkMode: 'class',
  ...
```

Now we can toggle dark mode manually via the switch. I have used the example on the Tailwind website for supporting light mode, dark mode, as well as respecting the operating system preference. However I have tweaked it a little bit, remember the state `const [isOn, setIsOn] = useState(false)` lets change that to read `localStorage` and check if the `theme` is set to `light`

```js
// before
const [isOn, setIsOn] = useState(false)

// after
const [isOn, setIsOn] = useState(() => {
    if (localStorage.getItem('theme') === 'light') {
      return true
    } else {
      return false
    }
  })
```

Instead of the state returning `false` it fires off a function and checks if the theme within local storage is `light` if it is, `isOn` is true if not it's false. Now let's use the state of `isOn` to manage the theme within local storage.

```js
if (isOn) {
    document.documentElement.classList.remove('dark')
    localStorage.setItem('theme', 'light')
  } else {
    document.documentElement.classList.add('dark')
    localStorage.setItem('theme', 'dark')
  }
```

The above will do the following:

```html
<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>
```

Lastly, we add the following which allows us to avoid [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content#:~:text=A%20flash%20of%20unstyled%20content,before%20all%20information%20is%20retrieved.) when changing themes of page loads

```js
 if (
    localStorage.theme === 'light' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
  ) { document.documentElement.classList.add('dark') } 
  else {
    document.documentElement.classList.remove('dark')
}
```

So that's it...our final component should look like this...

```js
import {motion} from 'framer-motion'
import React, {useState} from 'react'
import {RiMoonClearFill, RiSunFill} from 'react-icons/ri'

export default function DarkModeSwitch(){

    const [isOn, setIsOn] = useState(() => {
      if (localStorage.getItem('theme') === 'light') {
        return true
      } else {
        return false
      }
    })

    const toggleSwitch = () => setIsOn(!isOn)

    const spring = {
        type: 'spring',
        stiffness: 700,
        damping: 30,
    }

    if (isOn) {
      document.documentElement.classList.remove('dark')
      localStorage.setItem('theme', 'light')
    } else {
      document.documentElement.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    }

    if (
        localStorage.theme === 'light' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
      ) { document.documentElement.classList.add('dark') } 
      else {
        document.documentElement.classList.remove('dark')
    }

    return(
        <div onClick={toggleSwitch} className={`flex-start flex h-[50px] w-[100px] rounded-[50px] bg-zinc-100 p-[5px] shadow-inner hover:cursor-pointer dark:bg-zinc-700 ${ isOn && 'place-content-end'}`}>

            <motion.div
                className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-black/90"
                layout
                transition={spring}
            >
                <motion.div whileTap={{rotate: 360}}>
                    {isOn ? (<RiSunFill className="h-6 w-6 text-yellow-300" />) : (<RiMoonClearFill className="h-6 w-6 text-slate-200" />)}
                </motion.div>

            </motion.div>      

        </div>
    )
}
```

Rending arrays in React properly.

Paul Bennett — Fri, 25 Mar 2022 12:55:47 +0000

I guess you have used .map quite a bit and understand how it works well. We can use .map in React too. It helps us render arrays to the page. For me I have never really used a key within a map function for vanilla JS, for React though it's pretty essential, let's see why.

Let's say we have the following component. That renders an array of fruit.

const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}

With the above example, React will throw an warning:

Warning: Each child in a list should have a unique "key" prop.

Now your .map function will render the contents of the array without any issue, I mean it is just a "warning" however without a key prop added it can all go wrong.

We need to add a key prop to the child of our .map function to allow React to know the element's position. You can test this going to the below link and clicking on the elements.

https://react-fundamentals.netlify.app/isolated/final/07.extra-1.js

See how the first two examples differ from the last one. You’ll notice that using the array index as a key is no different from React’s default behaviour. Using an index is incorrect, as you can see from the focus states here, the focus will always stay on that index. Instead of moving with the element, like it does when using a key.

As the key must be unique, we should code it up as such:

const allItems = [
  {id: 'apple', value: '🍎 apple'},
  {id: 'orange', value: '🍊 orange'},
  {id: 'grape', value: '🍇 grape'},
  {id: 'pear', value: '🍐 pear'},
]

function Keys() {
  return (
    <>
      {allItems.map((item => (
        <li key={item.id}>
          <label>{item.value}</label>
        </li>
      )))}
    </>
  )
}

Thanks to Kent C Dodds for explaining this like a true hero.

Setting up Docker with Pipenv

Paul Bennett — Fri, 25 Mar 2022 12:54:05 +0000

I have always struggled with Docker as I mainly build front end web apps, where I have used services like Vercel to host my applications. Sometimes for work, I am required to build some scripts that need to run in a container.

And this where sh*t fits the fan generally. But no more!! I think I have finally cracked it, hello docker-compose I have always seen these files but never really used them.

I'll give you a rundown of how I am using my Dockerfile and docker-compose together to get python running with pipenv.

# For more information, please refer to https://aka.ms/vscode-docker-python
FROM python:3.9-slim

ENV VAR1=10

# Keeps Python from generating .pyc files in the container
ENV PYTHONDONTWRITEBYTECODE=1

# Turns off buffering for easier container logging
ENV PYTHONUNBUFFERED=1

# Install & use pipenv
COPY Pipfile Pipfile.lock ./
RUN python -m pip install --upgrade pip
RUN pip install pipenv && pipenv install --dev --system --deploy

WORKDIR /app
COPY . /app

# Creates a non-root user and adds permission to access the /app folder
RUN adduser -u 5678 --disabled-password --gecos "" appuser && chown -R appuser /app
USER appuser

# During debugging, this entry point will be overridden. For more information, please refer to https://aka.ms/vscode-docker-python-debug
CMD ["python", "main.py"]

This is my Docker file for running Python with Pipenv works well enough. This is generally the boilerplate from VSC when you add a Docker file to the workspace. I have only really replaced the requirements.txt and pip stuff with the below

COPY Pipfile Pipfile.lock ./
RUN python -m pip install --upgrade pip
RUN pip install pipenv && pipenv install --dev --system --deploy

Which in turns copies my Pipfile & Pipfile.lock and then installs my dependencies.

If you have a file named .env in your project, it’s only used to put values into the docker-compose.yml file which is in the same folder. Those are used with Docker Compose and Docker Stack. It has nothing to do with ENV, ARG, or anything Docker-specific.

The key-value pairs, in your .env file are used to substitute dollar-notation variables in the docker-compose.yml file. It’s kind of a pre-processing step, and the resulting temporary file is used. This is a nice way to avoid hard-coding values. You can also use this to set the values for environment variables, by substituting the string, but that does not happen automatically.

Here is an example docker-compose.yml file, relying on values provided from a .env file:

version: '3'

services:
  plex:
    image: linuxserver/plex
      environment:
        - env_var_name=${VARIABLE_NAME} # here it is

Hint: When working with an .env file, you can debug your docker-compose.yml files quite easily. Just type docker-compose config. This way you’ll see how the docker-compose.yml file content looks after the substitution step has been performed without running anything else.

Once you're done just run docker-compose -f docker-compose.yaml up this will run a container with your image and all the specified env variables. Like anything it's easy when you understand it.

Stop using multiple states for status

Paul Bennett — Fri, 25 Mar 2022 12:53:25 +0000

When it comes to fetching API data in React using fetch there can be ways to update the user or run conditional code. This can generally mean using a selection of different states. Which can potentially get messy and complicated.

You could have something like this:

const [data, setData] = useStatus([])
const [success, setSuccess] = useState('')
const [loading, setLoading] = useState('')
const [rejected, setRejected] = useState('')
const [error, setError] = useState('')

Which in turn could be like the following:

useEffect(() => {

    setLoading('loading') // state 1

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setSuccess('success') // state 2
    })
    .catch(err => {
        setError(err)
        setRejected('rejected') // state 3
    })

}, [])

With the above we have three states to manage and keep an eye on. When it comes to using this conditionally it's going to be a pain in the ass. Something like this.

if (success === 'success') {
    //do something
} else if ( loading === 'loading' ) {
    // do something
} else if (rejected === 'rejected') {
    // do something
}

Now wouldn't it be easier to use a status state instead of worrying about 3 other states. We can include something like a const [status, setStatus] = useStatus('idle') and remove all the other states apart from the setData and setError we need the error state so we can handle the displaying of error messages.

So now we have the following which is going to be much cleaner and easier to manage.

const [data, setData] = useStatus([])
const [error, setError] = useState('')
const [status, setStatus] = useState('idle')

useEffect(() => {

    setStatus('loading')

    fetch('http://some-api-url')
    .then(response => {
        setData(response)
        setStatus('success')
    })
    .catch(err => {
        setError(err)
        setStatus('rejected')
    })

}, [])

if (status === 'success') {
    // do something
} else if ( status === 'loading' ) {
    // do something
} else if (status === 'rejected') {
    // do something
}

For me this is much a cleaner way of doing things, I know it's not that much different from using multiple states. However, we only have one state to deal with instead of three.

I got inspired to do things this way by Kent C Dodds. More information here

Rendering nav links with .map() in React.

Paul Bennett — Wed, 24 Jun 2020 17:21:07 +0000

React utilises .map() to render items in a list, this can be great for dynamically adding links to our navigation. Instead of copying the markup, again and again, ill run through how I have used .map() on my navigation.

If you don't know already my site is built on Gatsby a static site generator built on React. Gatsby’s <Link> component enables linking to internal pages as well as a powerful performance feature called preloading.

In any situation where you want to link between pages on the same site, use the Link component instead of an a tag.

// standard a tag
<a href="/posts">Posts</Link>

// Gatsby Link component
<Link to="/posts">Posts</Link>

The basis of our navigation

Let's start off by creating the foundation of our component.

import React from 'react'
import { Link } from 'gatsby'

const Nav = () => {

    return()
}

export default Nav

Styling our links

Now we have everything set up we can now add an object called styles this will allow us to use className and activeClassName

It’s often a good idea to show which page is currently being viewed by visually changing the link matching the current page. This can be done by using activeClassName — a class name that will only be added to the Link when the current item is active.

As I am using TailWind here, my styles object is going to look like this:

const styles = {
        className:'text-gray-600 block px-2 py-1 hover:underline hover:text-gray-900',
        activeClassName: 'underline text-gray-900'
    }

We can then access those properties by dot notation as follows:

styles.className
styles.activeClassName

Generating Link data.

Now we have our styles in an object, we can now move on to the Link data we want to pass. This will be an array of objects allowing us to use .map() on the array.

const links = [
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/projects',
            name: 'Projects'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/posts',
            name: 'Posts'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/contact',
            name: 'Contact'
        },
    ]

Above each object has 4 key pairings.

className: Our link styles
activeClassName: Our styles for active links
to: The page we wish to link to once clicked
name: What we what our link to display on site

Our navigation component should now look something like this:

import React from 'react'
import { Link } from 'gatsby'

const Nav = () => {

    const styles = {
        className:'text-gray-600 block px-2 py-1 hover:underline hover:text-gray-900',
        activeClassName: 'underline text-gray-900'
    }

    const links = [
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/projects',
            name: 'Projects'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/posts',
            name: 'Posts'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/contact',
            name: 'Contact'
        },

    ]

    return ( )
}

export default Nav

Adding our data to our markup.

Within our return statement, we need a parent <div> so lets do that

return(
    <div></div>
)

You can then build out your navigation bar how ever you like the next bit will be how to dynamically display the links. This can be done by using .map() on our links array of objects as below shows:

<div>
    {links.map(link => (<Link className={link.className} activeClassName={link.activeClassName} to={link.to}>{link.name}</Link> ))}
 </div>

When using .map() we have to provide it with a callback function which will be passed every item in the links array.

For the above example, our one required argument for our callback function is link which now allows us to access items on the links array by using dot notation again. If you were to check the Gatsby docs for Link you can see it should look something like this:

<Link className= activeClassName= to= ></Link>

Now this wouldnt do anything so we have to add the following to it so map() can populate it as so:

<Link className={link.className} activeClassName={link.activeClassName} to={link.to}>{link.name}</Link>

If you want to learn more about how map() works you can see that here.

Finished Item

Now we have that in place our navigation component should look like this:

import React from 'react'
import { Link } from 'gatsby'

const Nav = () => {    

  const styles = {
        className:'text-gray-600 block px-2 py-1 hover:underline hover:text-gray-900',
        activeClassName: 'underline text-gray-900'
    }    const links = [
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/projects',
            name: 'Projects'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/posts',
            name: 'Posts'
        },
        {
            className: styles.className,
            activeClassName: styles.activeClassName,
            to: '/contact',
            name: 'Contact'
        },    
    ]    


    return (
      <div>
          <div>LOGO</div>
          <div>
         {links.map(link => (<Link className={link.className} activeClassName={link.activeClassName} to={link.to}>{link.name}</Link> ))}
         </div>
      </div>
    )
}
export default Nav

Hope this helps. You can see my navigation component here, if you get stuck you can hit me up on Twitter.

Learn more about map

PS: If there is a better way to do navigation in React please let me know.

Awesome aliases make everything better

Paul Bennett — Fri, 12 Jun 2020 20:04:05 +0000

I bloody love using aliases within my terminal. It does make everything better, as I have grown more confident using the terminal. I have continued to add more and more aliases, solely to make my workflow quicker.

Below I have put all my aliases that are currently in my .zshconfig file. I am sure more will be added over time. I have various ones for Python, Django, Gatsby and Git. The Python ones have made my workflow so much easier, especially when running virtual environments. Just a couple are:

Running a Python script

Before:

$ python <python-file>

After

$ p <python-file>

Installing Python packages

Before:

$ pipenv install <python-package>

After:

$ pi <python-package>

Switching Git branches

Before:

$ git switch <branch-name>

After:

$ gbs <branch-name>

The above are only small changes, but they will make a tonne of difference especially if you're having to frequently type the same commands. Take a look at the list before hopefully, you can get some inspiration from them.

If you're using ohmyzsh you can check out their aliases here.

alias zshconfig="code ~/.zshrc"
alias ohmyzsh="code ~/.oh-my-zsh"

alias ..="cd .."
alias ...="cd ../.."
alias ....="cd ../../.."
alias .....="cd ../../../.."

# Shortcuts
alias dt="cd ~/Desktop" 
alias dev="cd ~/Developer"
alias dl="cd ~/Downloads"

# Git Shortcuts
alias gs="git status"
alias gp="git pull"
alias gb="git branch $1"
alias gbs="git switch $1"
alias ga="git add ."
alias gc="git commit -m $1"
alias gca="git commit -a -m $1"
alias gpo="git push origin $1"

# Python Shortcuts
alias python="/usr/local/bin/python3"
alias pip="pip3"
alias p="python $1" # saves typing python every time.
alias pi="pipenv install $1" # allows you to just type the package
alias ps="pipenv shell" # start a env with just "ps"

# Flask Shortcuts
alias fr="flask run" # start a flask app

# Django Shortcuts
alias rs="python manage.py runserver" # starts django server
alias dmm="python manage.py makemigrations" # makes db migrations in django
alias dm="python manage.py migrate" # migrates db in django

# Gatsby Shortcuts
alias gd="gatsby develop"
alias gbd="gatsby build"

# opens VSC from the cmd line:
code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

Rebuild your static site automatically with Contentful web hooks and Netlify

Paul Bennett — Fri, 12 Jun 2020 20:03:36 +0000

I finally got Contentful to work. It took a bit of tweaking here and there, as I am still new to React and GraphQL, I got there in the end though.

I was clicking through my site, making sure all the posts were working as intended. I had to re-publish a post as I was having issues with images in markdown files. But my site never started a build phase within Netlfiy after I re-published the post. Whaaaaaat?!!. Why wasn't this working?

After some Googling, it seemed I needed something called a webhook. I have seen the word webhook mentioned many times, but was never too sure what they did. So I also googled that:

A webhook in web development is a method of augmenting or altering the behavior of a web page, or web application, with custom callbacks.

Makes sense. How could I get a webook to build my site in Netlify once I published or un-published a blog post? Luckily Contentful has some good docs...

Update your environment variables within Netlify

For more information on how to configure a static site for continuous deployment, refer to the guide on the Netlify documentation.

Configuring a Netlify build hook

It's as simple as clicking Add build hook, giving it a memorable name, and choosing the branch you'd like to build. Netlify will then do some magic and create a HTTPS URL, which will then respond to a POST request by trigging your build and deploying it when you publish or unpublish new content.

Copy the url, which will look something like this: https://api.netlify.com/build_hooks/<someString> and then use Contentfuls Netlify webhook template to configure the webook quickly.

Easy as that...this post was created in Contentful, which trigged my webhook, which built and deployed my site with this new post.

Images: from Contentful

Converting dates from an API response in a Django Template

Paul Bennett — Fri, 12 Jun 2020 20:02:48 +0000

As you might of read I struggled getting data from an API into my Django templates. Once I did I came across another issue, dates...bloody full formatted dates. Dates formats such as this: 2019-08-30T08:22:32.245-0700 this data format was how the API presented one of the fields I needed.

How the hell could I convert it? I couldn't just use datetime So off to Stackoverflow I went.

As the brilliant @ralf said if the data I retrieved from the API was a string and not a Python datetime.datetime object. I had 2 options:

Custom template filter that converts string to date and formats it into a string with the desired format
In your view convert strings to dates and format them into strings with the desired format

The idea was to start creating a custom template filter. I copied the following from the source code from the built-in date filter so I was able to convert back to the date format I wanted, i ended up using {{ custom_date:"d/b/y" }}

I then went ahead and used the following to create a custom template tag

Step 1

First I had to create a templatetags directory inside my app, at the same level as models.py, views.py, etc. I then had to create a __init__.py file to ensure the directory is treated as a Python package.

Within the templatetags dir I created my custom_date.py which would hold my custom filter. So the app layout would look something like this:

app/
    __init__.py
    models.py
    templatetags/
        __init__.py
        custom_date.py
    views.py

Step 2

Now on to adding the filter into custom_date.py going back to my Stackoverflow question, I copied the example Ralf created. Which is the below

from django import template
from django.utils import formats
import datetime
register = template.Library()


@register.filter(expects_localtime=True, is_safe=False)
def custom_date(value, arg=None):
    if value in (None, ''):
        return ''

    if isinstance(value, str):
        api_date_format = '%Y-%m-%dT%H:%M:%S.%f%z'  # 2019-08-30T08:22:32.245-0700
        value = datetime.datetime.strptime(value, api_date_format)

    try:
        return formats.date_format(value, arg)
    except AttributeError:
        try:
            return format(value, arg)
        except AttributeError:
            return ''

I had some bugs with api_date_format because the API produced a whole load of extras I checked out the datetstrftime() and strptime() Behavior table and made some edits. Once I got rid of the errors I moved on to the template.

First I had to load the custom filter into my template, then I used the custom_date to change it to what I needed.

{% raw %}
<td class="text-center">{{ ticket.fields.updated|custom_date"Y,D,M" }}</td>
{% endraw %}

And there we have it...I successfully formatted the date, from an API response string.

Making Git easier with aliases in the terminal

Paul Bennett — Fri, 12 Jun 2020 20:02:10 +0000

Using aliases allow you as a terminal user to save time, It will end up saving a lot of time during the day. Instead of git status I type gs the rest are below and are self-explanatory.

alias gs="git status"
alias gp="git pull"
alias gb="git branch"
alias ga="git add ."
alias gc="git commit -m $1"
alias gca="git commit -a -m $1"
alias gpo="git push origin $1"

You're able to also use arguments with $1, $2, etc. for more extendability, like in this example:

alias gc="git commit -m $1"

Now, all I have to type is gc “Commit message” and it’ll commit my changes with the provided message.

All you have to do is find your most-used commands and try to make them shorter using an alias to make yourself more productive. For example below are some for Django and Gatsby workflows, you get the idea.

alias rs="python manage.py runserver" # starts django server
alias dmm="python manage.py makemigrations" # makes db migrations in django
alias dm="python manage.py migrate" # migrates db in django

alias gd="gatsby develop"
alias gb="gatsby build"

Atlantic Night a VSC theme

Paul Bennett — Fri, 12 Jun 2020 19:59:53 +0000

After reading an article created by Sarah Drasner on creating a theme for Visual Studio Code, I got inspired to create my own.

I have used many themes in my time, the likes of Dracula, Material, Monokai and One Dark. These are some popular themes, but there was always something I would want to change one of them. After being inspired by the colours of the Atlantic ocean during a boat cruise around the island of Antigua. I went on to create my theme for VSC and called it Atlantic Night.

With coding at night in mind, the colour choices have been taking into consideration with accessibility in mind. All colours have been picked from Color Safe which empowers designers with beautiful and accessible colour palettes based on WCAG Guidelines of text and background contrast ratios, these ratios have been tweaked slightly, however, the colour choice originates from Color Safe.

With blue as my main base of colour, I then went on to use other colours. Such as green, purple, yellow and a couple more. This theme will ever be evolving I hope to get further input from the developer community to make the theme better. Even if that means rearranging the colour schemes for certain syntaxes.

I tried to keep the VSC workspace all the same colour with slight changes to separate each section of the window. This was to keep my eyes concentrated on the code and not the workspace, I am currently typing this up in my garden, it's very sunny and bright. The workspace has almost turned to black but the syntax still pops from the screen, the colours I used and the contrast created helps this.

Some people may say this theme is too similar to others, that might be the case. However, this is my theme. Which means I can change it to my needs whenever, but what is more important than that, is that its open-source and I get to share my little project with the developer community and also gather feedback to make it better.

Below are some code examples of the languages Atlantic Night currently supports. More will be coming, and even a light version is in the works.

The theme has also been listed as trending themes for VS Code that are growing in popularity for 2020 by DEV. Which I am very, very happy about!

HTML

CSS

JS

React

JSON

Python

MarkDown

Rust

SQL

If you have any suggestions or ideas, please head over to the repo and log an issue. Any help is welcome.

Getting setup with Tailwind & Gatsby

Paul Bennett — Fri, 12 Jun 2020 19:46:02 +0000

I redesigned this site a while ago, moving from Jekyll over to Gatsby mainly because I wanted to learn some React. The learning curve was steep as I was coming from mainly an HTML, CSS and Python background. Never really spent too much time playing with JS, apart from JQuery the much more simplified JS Library.

Playing around with Gatsby and React, I started building out separate .scss files for each component which got harder and harder to manage. I then found TailWindCSS a utility first CSS framework, the way I styled by components changed for the better.

At first, I struggled to get to grips with setting it up within Gatsby, after a few links and youtube videos I got everything set up the way I wanted and below is how I did just that.

Create your Gatsby project

Install the Gatsby CLI globally if you don't have it already

npm install -g gatsby-cli

Create your new site and then cd into the directory

gatsby new <project-name> && cd <project-name>

Adding TailWindCSS

Once the project has finished building you're now able to add TailWind

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Once that has completed then add a .css file to your src/components folder to inject Tailwind's base, components, and utilitiesstyles into your CSS:

@tailwind base; 
@tailwind components; 
@tailwind utilities;

Create a TailWind config file (optional)

You can skip this bit if you want too, but I would recommend creating one as you can change the behaviour of TailWind with it. I generally use it to center my containers as a default.

npx tailwindcss init

Which will create a file with the below structure. I have added my own file to help show how I use it.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
        center: true
    },
}

Learn more about configuring Tailwind in the configuration documentation.

Using TailWind with PostCSS

This is where I got stuck when following the TailWind instructions on installing it. Gatsby being Gatsby there was a plugin for PostCSS, so we need to install that.

npm install --save gatsby-plugin-postcss

Once the plugin has finished installing, we need to add the config to our gatsby-config.js file by adding the following.

// gatsby-config.js
{
 resolve: 'gatsby-plugin-postcss',
    options: {
        postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],
     },
 },

This now includes the tailwind.css and tailwind.config.js file, so we're able to process the CSS.

Final step

Now all that is left is to import the tailwind.css file via our gatsby-browser.js file by simply adding the following line.

// gatsby-browser.js
import "./src/components/tailwind.css"

Purging the CSS

Now everything is set up, it's time to set up purge css so we're able to remove any unused CSS.

npm i --save gatsby-plugin-purgecss

// gatsby-config.js
{
  resolve: `gatsby-plugin-purgecss`,
  options: { tailwind: true }
}

Now this should clean up your unused CSS making your site even faster!

Done

Now you're able to use TailWind within your Gatsby project with ease. Simply just add the class names to your JSX and then run gatsby develop to see the changes.