DEV Community: Dan Curtis

How to spoof your MAC address on macOS

Dan Curtis — Sun, 03 Apr 2022 15:42:56 +0000

I upgraded to Monterey recently. For some reason spoofing my MAC address to extend the time on the free WiFi priced into my $5 coffee has become a lot harder.

Before I had one magic ifconfig command to do it, now I have to run four different commands:

Disconnect from the wifi

sudo /System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources/airport -z

Change my lladdr

My interface is always en0, and I just change the last digit of my MAC address. Holding option while clicking on the wifi menubar tray shows both my interface and MAC address.

sudo ifconfig <interface> lladdr <new MAC address>

Change my ether

sudo ifconfig <interface> ether <new MAC address>

Run ifconfig to see if the ether value for my interface changed

ifconfig

Now I can reconnect to my favorite insecure wifi. The wifi menubar tray still shows my old MAC address, but the public network sees the spoofed value from ifconfig.

How to Use Supabase Apple OAuth in React Native

Dan Curtis — Sun, 20 Mar 2022 15:14:20 +0000

Supabase combined with NextJS or Expo makes spinning up a side project in a few hours possible.

Supabase recently added a tutorial for Expo and support for Apple OAuth authentication. However, Apple OAuth does not work out of the box with Expo and Supabase. So I figured I'd write this article and create a GitHub template.

Supabase and Expo

I followed Supabase's Expo quickstart to get basic authentication working in Expo. The quickstart does not mentioned AsyncStorage which is required in lib/supabase.js to get it working.

My final code:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createClient } from '@supabase/supabase-js';

// https://reactnative.dev/docs/security#storing-sensitive-info
import { supabaseUrl, supabaseAnonKey } from './supabase-keys';

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  localStorage: AsyncStorage,
  detectSessionInUrl: false
});

Supabase Apple OAuth with Expo

Next I followed Supabase's tutorial for Apple authentication. I tried to use Supabase's sign in method onClick in my React Native auth component, which doesn't work:

const { user, session, error } = await supabase.auth.signIn({
  provider: 'apple'
});

The user/session/error all will be null. I was a bit worried Apple OAuth on mobile wouldn't be supported by Supabase's Go True library, but I stumbled upon a PR which adds support Fix: Add id_token grant flow

Instead of using Apple as the provider I decided to use Expo's authentication library to get a token and then pass that to Supabase:

import { startAsync, makeRedirectUri } from 'expo-auth-session';

import { supabase } from '../lib/supabase';
import { supabaseUrl } from '../lib/supabase-keys';

const signInWithApple = async () => {
    const returnUrl = makeRedirectUri({ useProxy: false });
    const provider = 'apple';
    const authUrl = `${supabaseUrl}/auth/v1/authorize?provider=${provider}&redirect_to=${returnUrl}`;

    const response = await startAsync({ authUrl, returnUrl });

    if (!response || !response.params?.refresh_token) {
      return;
    }

    await supabase.auth.signIn({
      refreshToken: response.params.refresh_token
    });
};

The full code is available on GitHub. Apple OAuth with Supabase and support for React Native is relatively new. Feedback is always welcome if there's a better way of doing things.

Setting up my Dev Environment on a Mac

Dan Curtis — Thu, 25 Feb 2021 20:27:44 +0000

I recently started a new job and spent hours looking up how to install all of the tools I use for development on my personal MacBook. I came across Tania Rascia's macOS Catalina: Setting up a Mac for Development, which inspired me to create some documentation on the tools I use so I can streamline the process in the future.

This is intended to be a "living document" of my development environment. I would highly recommend Tania's article for more of a tutorial on many of the tools.

I'm always looking for tools that make my life easier. I'd love to hear what you're using!

Tools

homebrew: package manager

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

git: version control
make: builds executable programs
pyenv: python manager

brew install git make pyenv

After installing git, don't forget to configure it:

vi ~/.gitconfig

After installing pyenv, install the latest Python version:

pyenv install 3.9.1
pyenv global 3.9.1
pyenv version
# update shell path (ZSH on Catalina)
echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.zshrc
# ensure pip uses pip3 (ZSH on Catalina)
echo "alias pip=/usr/local/bin/pip3" >> ~/.zshrc

nvm: node manager

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
nvm install node
# restart terminal
nvm use node

GUI Applications

I'm a simple person. I rely on generic macOS apps like notes and terminal and use the Teams, Spotify, and GitHub web apps.

VSCode: IDK
Chrome: Main browser
Firefox: Secondary browser
Postman: API testing
Docker: VM containers

brew cask install \
  visual-studio-code \
  google-chrome \
  firefox \
  docker \
  postman

Extensions

Chrome

uBlock Origin: Adblocker
React DevTools: Debugging for react apps
Augury: Debugging for Angular
Grammarly: Grammar/spellchecker
Dark Reader: Dark mode for any website
Last Pass: Password manager
JSON View: Beautify JSON docs

VS Code

Languages

Linters

ESLint: JavaScript ESLint
Prettier: Opinionated code formatting
Grammarly: Grammar/spellcheck for Markdown files

Tools

Night Owl: Dark theme for VS Code
Kubernetes: Cluster management, debugging, etc.
Docker: Container management
Jupyter: Jupyter notebook in VSCode...not a huge fan :(

Productivity

TabNine: AI auto-complete
Markdown All-in-One: Markdown preview/shortcuts
Auto Rename Tag: Auto rename HTML tags

Cover photo by Alexander Shatov

Self-updating GitHub Profile README with JavaScript

Dan Curtis — Tue, 04 Aug 2020 21:38:26 +0000

GitHub recently released a feature that allows users to add markdown to their profile. People have done some pretty cool things, which inspired me to create a README that dynamically updates with my Dev.to posts. Here's the link to my GitHub repo, which has a live example!

GitHub Actions and NodeJS make this easy. I created a script to:

Get my Dev.to articles
Parse my README
Update the README with my latest articles

GitHub Actions make it possible to schedule automatic runs of a program at timed intervals, known as a cron job.

I currently have my GitHub Action Workflow configured to run the script three times a week. I thought this would push me to publish articles three times a week, but that hasn't happened yet...

You'll need 3 files: .github/workflows/build.yaml, updateReadme.js, and README.md. Without further ado, here's the code:

.github/workflows/build.yaml

# Name of workflow
name: Build README

# Run workflow at 12:01 on Sunday, Wednesday, and Friday
on:
  schedule:
    - cron: '1 12 * * 0,3,5'
  # Run workflow on pushes to main branch
  push:
    branches:
      - main

# Steps to carry out
jobs:
  build:
    # Create a ubuntu virtual machine
    runs-on: ubuntu-latest

    # Checkout repo code
    steps:
    - name: Checkout repo
      uses: actions/checkout@v2

    # Install node
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 10.16
    - run: npm install
    - run: npm run build --if-present
    - run: npm test
      env:
        CI: true

    # Run script "updateReadme.js" 
    - name: Update README
      run: |-
        node updateReadme.js
        cat README.md

    # Commit changes
    - name: Commit and push if changed
      run: |-
        git diff
        git config --global user.email "readme-bot@example.com"
        git config --global user.name "README-bot"
        git add -A
        git commit -m "Updated articles" || exit 0
        git push

updateReadme.js

// Include node fs (file stream) and https modules
const fs = require('fs');
const https = require('https');

// API endpoint
const url = 'https://dev.to/api/articles?username=<YOUR DEV USERNAME>';

function readWriteAsync() {
  // Get articles using HTTPS
  https.get(url, (res) => {
    res.setEncoding('utf8');

    // Set variable body to response data from API
    let body = '';
    res.on('data', (data) => body += data);

    res.on('end', () => {
      // Parse the JSON response
      body = JSON.parse(body);

      // Shorten array to latest 3 articles
      body = body.slice(0, 3);

      // Create string of markdown to be inserted
      const articles = `\n - [${body[0].title}](${body[0].url})\n - [${body[1].title}](${body[1].url})\n - [${body[2].title}](${body[2].url})\n \n`;

      // Update README using FS
      fs.readFile('README.md', 'utf-8', (err, data) => {
        if (err) {
          throw err;
        }

        // Replace text using regex: "I'm writing: ...replace... ![Build"
        // Regex101.com is a lifesaver!
        const updatedMd = data.replace(
          /(?<=I'm writing:\n)[\s\S]*(?=\!\[Build)/gim,
          articles
        );

        // Write the new README
        fs.writeFile('README.md', updatedMd, 'utf-8', (err) => {
          if (err) { 
            throw err;
          }

          console.log('README update complete.');
        });
      });
    });
  });
}

// Call the function
readWriteAsync();

README.md

# Self-updating README

This text won't be change.

The text below will be, though!

What I'm writing:

- This will be replaced
- This too!
- This three!

![Build README](https://github.com/<YOUR GITHUB USERNAME>/<YOUR GITHUB USERNAME>/workflows/Build%20README/badge.svg)

This won't be impacted either. The text above is a GitHub build badge.

I tried to explain what the code is doing with comments, which makes the code look longer/more daunting than it is. GitHub Action's documentation and this README cheatsheet are excellent if you're just getting started with either. Here's another link to my GitHub repo, to see it live!

What are your README tips for this new feature? 👀

An Analogy for Big O Notation

Dan Curtis — Tue, 28 Jul 2020 14:29:38 +0000

If you can’t explain something in simple terms, you don’t understand it.
- Einstein

Open AI recently released GPT-3 for natural language processing. One of the cool features is the ability to summarize complex passages for a second-grader.

My time in college was spent translating complex Computer Science topics to simple analogies. So I thought I'd share my translation on the holy grail of complex CS topics: time complexity and Big O notation.

This post covers constant, linear, and quadratic time complexities in detail. If you don't know what those mean, read on. If you do and you're looking for logarithms, you'll have to wait on a future post - sorry!

Big O notation is a way to describe how quickly a function grows.
- GPT-3

Let's break down the function first

Say we go through a drive-thru. We drive-in. We order. We pay. We receive our food. We drive out.

The drive-thru is the function. The car is the parameter passed into the function. Order, pay, and food are all steps that occur in the function. And after we complete the steps in the function, we return the car. I'll be using this drive-thru analogy throughout the rest of this post.

function DriveThru(car) {
  order;
  pay;
  food;
  return car;
}

If a drive-thru serves 1,000 cars in a day, it returns 1,000 cars. Every car goes through the same three steps: order, pay, and food.

Why do some cars get through the drive-thru faster than others?

A car can hold N amount of people. For example, a sedan holds five people and a van holds ten people. The drive-thru has no idea how many people are in a car when the car enters. Let's say we have a truck with one person and a van with ten people. And our drive-thru has a strict limit of one payment per vehicle.

The truck quickly proceeds through every step. The van takes a long time on the order and food steps. However, the pay step for both the truck and van takes an equal amount of time.

The time it takes a car to get through the drive-thru is dependant on how many people are in the car. Think of the car as an array of objects. Each object is a person with an order.

car = [
  {
    "name": "Monique",
    "order": "Salad"
  },
  {
    "name": "Joel",
    "order": "Burger"
  }
];

So when we pass the car into the function, the function has to look at each object in every step.

function DriveThru(car) {
  // Order step
  const orders = [];
  for (let i = 0; i < car.length; i++) {
    orders.push(car[i].order);
  }
  sendOrdersToKitchen(orders);

  // Pay step
  sendPaymentToBank(car.creditCard);

  // Food step
  for (let i = 0; i < orders.length; i++) {
    handOrderToCar(orders[i]);
  }

  return car;
}

The payment step is the easiest and fastest step. Because no matter how many people are in the car, there will always be one payment. The order and food steps are dependant on the number of people in the car. If there are five people in one car, the order and food steps run five times before the car can leave.

Let's dig into Big O notation's syntax

Big O follows the following simplified syntax:

O(number of times a step repeats itself in a function)

In CS, "N" or sometimes "K" is used to describe a number of something constant.

For example, let's say N is equal to 5. We have "N cows in a field" which means we have 5 cows in a field. Let's say for every cow, there are twice as many chickens. So we have 5 cows and 10 chickens when N is 5.

To simplify this, we could say we have N cows and N*2 chickens.

Maybe we have cows squared chickens. So we could say we have N cows and N^2 chickens. When N is 5, that would be 5 cows and 25 chickens.

Big O notation uses N to describe the number of steps because we never know how many steps something might take. In our drive-thru, a car might have 1 person or 10 people. We don't know. So we describe them in terms of N because we're worried about measuring the efficiency of the drive-thru not how many people it can handle.

For example, maybe only 5 cars go through Wendys a day, and each car has 1 person. While McDonald's has 1 million busloads go through each day. It would be pointless to compare the efficiency of the drive-thru based on how many people are served. That's why we use N to in Big O notation.

But what about timing the drive-thrus? We could see how long in terms of the time it takes Wendy's and McDonald's to handle 1,000 cars to estimate the efficiency, right?

Yes. Timing is another method of measuring functions. If Wendy's has a poorly run drive-thru, it will take them more time to serve 1,000 cars. However, it would take a lot of experimentation to build an efficient drive-thru based on timing every step.

Big O measures how many steps repeat themselves as the parameter grows. So we can build a drive-thru that limits the amount of repeating steps, without the expensive experimentation.

Let's say McDonald's doesn't enforce one payment per car while Wendy's does. McDonald's now has three steps (order, pay, food) that repeat once for every person in every car. While Wendy's only has two steps (order, food) that repeat once for every person in a car. We can say that Wendy's will be more efficient because they have less repeating steps, without ever timing it in the real world.

Measuring a function with Big O

Big O is a way to measure the efficiency of functions for the best, average, and worst cases. I use to work at McDonald's. The worst-case was a busload of people coming through. The best-case was a car ordering a Sprite. I was always worried about the worst-case, even though it didn't happen very often.

Computer Scientists are always worried about the worst-case too. So let's analyze our drive-thru function for the worst-case scenario and put it into Big O notation.

We have a busload of 30 people come through. The order step repeats 30 times. The payment step repeats once. The food step repeats 30 times.

Or in terms of Big O, the order step runs once for every person. The payment step runs once per car. The food step runs once per person. In Big O notation, N would represent the number of people in each car. So we would have the following:

order: O(n)
pay: O(1)
food: O(n)

When we add up those three steps, we get 1 + n + n which is 1 + 2n. We're worried about the worst-case, so we can ignore the 1 because if we add more people the payment steps always stay the same. We can also write 2n as n because if we add more people there will always be two steps of n.

Our drive-thru function in Big O notation is O(n). In mathematical terms, our time complexity is linear.

If we didn't have the order or food steps, our Big O notation would be O(1). It would have a constant time complexity.

Let's say our kitchen messes up orders a lot when they're overloaded. For every order, they make order squared mistakes. So our order step would still be O(n), our pay step would be O(1), but our food step would be O(n^2).

If we have 5 orders, there would be 25 mistakes on the food. Which means the food step would loop 25 times before getting the order correct. When Big O notation is O(n^2), the time complexity is quadratic.

Quadratic time complexity is often done in code with nested for loops. For example:

const numbers = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  for (let x = 0; x < numbers.length; x++) {
    console.log(numbers[x]);
  }
}

// Output: 1, 2, 3, 1, 2, 3, 1, 2, 3

Graphs illustrate the importance of Big O and time complexity well. Let's say our drive-thru has a linear order time, constant payment time, and quadratic food time.

The graph shows where the bottlenecks in our drive-thru exist before ever actually using the drive-thru. Yes, we could run a test and time 1,000 cars and find the same bottlenecks. But in a real-life scenario that would take a lot of time and be expensive. Analyzing algorithms with Big O notation allow us to find bottlenecks and fix them before we implement them in production.

Another important point is to notice that for 1-3 people, the time or step difference isn't really that much. Big O notation is good at describing worst-case scenarios. Maybe, cars in our drive-thru never have more than one order. If that's the case, optimizing the food step might not be worth it. Instead, we could optimize in other areas, such as installing a second drive-thru.

Code Examples

Here are some common examples of O(1), O(n) and O(n^2)

const myArray = ["dog", "cat", "fish"];

// O(1)
// Output: dog
function constant(myArray) {
  console.log(myArray[0]);
}

// O(n)
// Output: dog, cat, fish
function linear(myArray) {
  for (let i = 0; i < myArray.length; i++) {
    console.log(myArray[i]);
  }
}

// O(n^2)
// Output: dog, cat, fish, dog, cat, fish, dog, cat, fish
function quadratic(myArray) {
  for (let i = 0; i < myArray.length; i++) {
    for (let x = 0; x < myArray.length; x++) {
      console.log(myArray[x]);
    }
  }
}

Conclusion

In programming, we strive for O(n) linear time complexity. O(1) constant time complexity isn't really possible except for simple tasks like addition. O(n^2) should always be avoided. Sometimes algorithms (such as binary search) don't fit any of these, and that's where logarithms come in. I'll update this post with the link to the logarithm article when it's finished!

I hope you have a solid understanding of Big O notation and time complexity now. I'm sure my fast-food analogy could be improved, let me know what you think!

CI/CD Pipeline with Netlify and GitHub Actions

Dan Curtis — Tue, 21 Jul 2020 20:54:45 +0000

In this tutorial, we'll set up a modern CI/CD Pipeline with GitHub Actions and Netlify. Show me the code!

☑️ Development and production environments (websites)
☑️ GitHub Actions for CI/CD (saves Netlify build minutes)
☑️ Netlify for free, secure hosting
☑️ Cypress for end-to-end testing

CI stands for Continous Integration, which means that developers are continuously integrating their changes into the main branch.

CD stands for Continous Development or Delivery, which means that changes are automatically pushed to customers barring a failed test.

Project set up

Create a sample application using React. I'm calling it "netlify-github-pipeline": npx create-react-app netlify-github-pipeline
Create a new repo on GitHub and link it to our local React project
Create "main" and "dev" branches on GitHub's website
Set the default branch to main in Settings > Branches
Delete the master branch
Pull the branches locally: git pull
Switch to main: git checkout main

Netlify set up

Instead of creating a project with git, drag our React project folder to the bottom of Netlify's UI
Cancel the automatic build running in Netlify's UI
Generate NETLIFY_AUTH_TOKEN by going to User Settings > Applications > New Access Token
Add the auth token to the GitHub repo by going to Settings > Secrets. Be sure to name it NETLIFY_AUTH_TOKEN
Get the Site ID in Netlify by going to Settings > Site Information > APP ID
Add the App ID to GitHub with the name of NETLIFY_SITE_ID

Repeat these steps for another website, only changing the NETLIFY_SIDE_ID to DEV_NETLIFY_SITE_ID in steps 5 and 6.

If we used Netlify to build and deploy, we would link our GitHub repo directly. We would also use their build preview feature instead of creating a "separate" dev website.

Using Netlify is cleaner, but they limit their free build minutes to 300/month. GitHub Actions has 3000 for private repos and is unlimited for public repos.

GitHub Workflow set up

If you're not familiar with GitHub Actions, I would suggest checking out their docs. I don't go into a bunch of detail on how the workflow files work.

We're going to create production and development environments. We should have two branches and Netlify Site IDs set up to reflect these environments. We also want to run tests every time a Pull Request is created. So we need three workflows: productions, development, and test.

Create a directory in netlify-github-pipeline's project root called .github and a workflows directory inside of .github: mkdir .github/workflows

Development Workflow

Create a development.yml file in the workflows directory:

# Name of workflow
name: Development workflow

# When workflow is triggered
on:
  pull_request:
    branches:
      - dev

# Jobs to carry out
jobs:
  deploy:
    # Operating system to run job on
    runs-on: ubuntu-latest

    # Steps in job
    steps:
      # Get code from repo
      - name: Checkout code
        uses: actions/checkout@v1
      # Install NodeJS
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      # Run npm install and build on our code
      - run: npm install
      - run: npm run build --if-present
      # Deploy to Netlify using our dev secrets
      - name: Deploy to netlify
        uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.DEV_NETLIFY_SITE_ID }}
        with:
          args: deploy --dir=build --prod
          secrets: '["DEV_NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'

Creating a pull request to the dev branch triggers this workflow file. The file runs Node on Ubuntu to build our app and then deploys the app to the Netlify dev website. We can manually test our changes before merging into main and creating a release.

Production Workflow

Create a production.yml file in the workflows directory:

#  Name of workflow
name: Production workflow

# When workflow is triggered
on:
  push:
    tags:
      - "v*"

# Jobs to carry out
jobs:
  deploy:
    # Operating system to run job on
    runs-on: ubuntu-latest
    # Steps in job
    steps:
      # Get code from repo
      - name: Checkout code
        uses: actions/checkout@v1
      # Install NodeJS
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      # Run npm install and build on our code
      - run: npm install
      - run: npm run build --if-present
      # Deploy to Netlify using our production secrets
      - name: Deploy to netlify
        uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          args: deploy --dir=build --prod
          secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'

Creating a release triggers this workflow file. We can create releases to manage the version of our app. The code in main does not always reflect the code in the release!

You can create releases using the GitHub website or by create a tag, git tag v1.0 then pushing the tag, git push origin v1.0

The file runs Node on Ubuntu to build our app and then deploys the app to our Netlify production website. Now we need to set up tests!

Test Workflow

We have to do a little configuration to get Cypress to run a simple test that visits the app and checks to see if it runs. This blog post has more info on Cypress and React.

Create a cypress.json file in the project root

{
  "baseUrl": "http://localhost:3000"
}

Create a cypress directory in the root
Create an integration directory in the cypress directory
Create an init.spec.js file in the integration directory

describe('Cypress', () => {
  it('is working', () => {
    expect(true).to.equal(true);
  });

  it('visits the app', () => {
    cy.visit('/');
  });
});

Install cypress npm install cypress
Create a test.yml file in the workflows directory

#  Name of workflow
name: Test workflow

# Trigger workflow on all pull requests
on:
  pull_request:
    branches:
      - dev
      - main

# Jobs to carry out
jobs:
  test:
    # Operating system to run job on
    runs-on: ubuntu-latest
    # Steps in job
    steps:
      # Get code from repo
      - name: Checkout code
        uses: actions/checkout@v1
      # Install NodeJS
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      # Build the app using cypress
      - name: Cypress run
        uses: cypress-io/github-action@v1
        with:
          build: npm run build
          start: npm start
          wait-on: http://localhost:3000
          browser: chrome

Cypress opens up our app in Chrome at localhost:3000 and ensure's it works every time we create a pull request.

Putting it all together

You should now have 3 workflow files, a cypress directory and json file, two branches and Netlify websites. You can go ahead and push all of your changes to main. Below I walk through a development example to demonstrate the new pipeline.

Pipeline Example

Let's say we want to add a super cool feature. That super cool feature is changing the default text that create-react-app shows.

Instead of making changes in main or dev, we should create a feature branch off of dev called "feature/change-text." Then we'll make our changes and merge it into dev. We can see the changes on the dev website, and then merge it into main. Then we can create a new release for all of our users!

This is all easy to do with our new CI/CD pipeline.

Create a feature branch on GitHub
Pull changes locally
Change the text in the p tag in src/App.js
Save the changes and push them to the feature origin
Create a pull request from the feature branch to dev
Wait on the tests to run
After the checks are successful, merge the PR to dev and delete the feature branch
Visit your dev website, mines dev-netlify-github-pipeline.netlify.app
After ensuring the changes are correct, create a PR from dev to main
Wait on the tests to run
After the checks are successful, merge the PR to main
Switch to the main branch and pull the changes: git checkout main; git pull
Create a new tag to trigger production workflow: git tag v1.0
Push the tag: git push origin v1.0
Create a new release on GitHub's website
Check out your new production web app by visiting the production Netlify URL 🥳

If your GitHub Actions are failing, be sure to wait for them to run before merging pull requests.

Conclusion

We went over a lot. I tried to define a CI/CD Pipeline while simultaneously implementing one.

The general idea is that we have two branches on GitHub that match two websites, one for users and one for development. Our changes are tested with every pull request. To push our development changes to users, we create a release.

This is an over-simplified workflow. Companies usually have staging and testing environments on top of production and development. Adding those would be pretty easy now that we know the basics of GitHub Actions.

Acknowledgments:

Cover photo by Samuel Sianipar on Unsplash

Learn React by Recreating this Dev.to Article

Dan Curtis — Sat, 27 Jun 2020 12:55:45 +0000

What is React anyways? 🕵️‍♀️

Websites consist of data, whether that's text or boxes. React makes it easy to change the data displayed. Instead of reloading the page, React automatically changes data, giving it the feel of a mobile app.

We're going to recreate this article from scratch to learn React! Skip to the end for the full code.

Thinking in React 🤔

Websites used to be "pages" of data. React splits the page UI up into chunks known as components. We create components by calling a function.

For example, this page has a header, article, sidebar, and a title inside of the article. Each could of these be their own component.

Functions, classes, components - oh my! 🤯

Functions, classes, and components are synonymous in React. Every component in React should be a class or function. Classes in JavaScript are special functions. Older React code uses classes, but functions are the standard now.

Every component returns HTML, known as JSX. Traditionally, JavaScript and HTML are separated. In React, functions encapsulate all the code (JS, HTML, even CSS!) for a component.

function Article() {
  return <h1>Hello World</h1>;
}

The power of components 🦾

Why use components? Components are reusable, and they can easily manipulate HTML and CSS. Parent components can call children components. For example, our Article component can call Title, Author, and Body children components.

Article (Parent)
- Title (Child)
- Author (Child)
- Body (Child)

Let's say we build Dev.to and use the same Article component for every article on the site. The data inside the Title, Author, and Body components would need to change. Instead of hardcoding data into our JSX, we can use what is known as props.

function Title() {
  return <h1>Fun Fact</h1>
}

function Author() {
  return <span>Daniel Curtis</span>
}

function Body() {
  return (
    <p>The unicorn is the national animal of Scotland.</p>
  );
}

function Article() {
  return (
    <div>
      <Title />
      <Author />
      <Body />
    </div>
  );
}

Introducing component props 📨

Props are the way React sends data or functions from one component to another. They are an object of parameters that we can pass into a component when we call it. Props allow us to dynamically change the data of every component, making the component highly reusable. Props can be any data type, even other functions.

function Title(props) {
  return <h1>{props.title}</h1>
}

function Author(props) {
  return (
    <div>
      <img src={props.img} alt="Author" />
      <span>{props.author}</span>
    </div>
  );
}

function Body(props) {
  return <p>{props.body}</p>;
}

function Article() {
  const data = {
    title: "Fun Fact",
    author: "Daniel Curtis",
    body: "The unicorn is the national animal of Scotland."
  };

  return (
    <div>
      <Title title={data.title} />
      <Author author={data.author} img={data.img_src} />
      <Body body={data.body} />
    </div>
  );
}

In the real world, the data variable would be a bunch of articles. We could map over every article in the data and return an Article component for each one. This would look something like this:

function App() {
  const bigData = {/*lots of articles*/}
  return (bigData.map((el) => <Article data={el} />));
}

Data manipulation with Hooks ↩️

React shines when data is dependant on user interactions. React uses state as a webpage timeline that tracks the state of the webpage.

Hooks are fancy React functions that manipulate state. Every component can create a local state using the useState() hook. The useState() hook contains the current state and a function to update it.

Let's say we want to create a Like button. Every time it's clicked, we'll need to call a function to update a variable tracking likes. We can use State for this:

function Likes() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Like
    </button>
  );
}

Notice that the onClick event is camelcase instead of all lowercase.

Conditionally rendering components ❓

We can conditionally render components or information inside of components. For example, we're going to render "Loading..." while our article loads and our article once it is loaded.

Conditionally rendering components and data depending on a webpage's state is what makes React magical.

function Article() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(); 
  // notice we moved data to state instead of a variable

  if (loading) {
    return <h1>Loading...</h1>;
  } else {
    return (
      <div>
        <Title title={data.title} />
        <Author author={data.author} img={data.img_src} />
        <Body body={data.body} />
      </div>
    );
  }
}

The useEffect() Hook ↪️

There are a handful of Hooks. And it's possible to create your own custom hook too. useState() and useEffect() are by far the most used. useEffect() is powerful for fetching data from an outside source like an API. useEffect() is a callback function that can asynchronously update state. It initially runs when the component is called.

useEffect(() => {/* do stuff */}, []);

When we load the Article component, we need to get the article data from an API. The timeline of our Article component would be:

Article initializes data and loading as states
Article asks for data by making a fetch request in useEffect()
Article continues because useEffect() is a callback function
Article returns the conditional HTML for when loading is true
Article hears back from the fetch request and calls the callback
Inside the callback, data is set to the info requested and loading is set to false
Article returns the conditional HTML, this time for when loading is false

In code this would look like:

function Article() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState();
  const API_URL = 'https://dev.to/api/articles/354834';

  useEffect(() => {
    fetch(API_URL)
      .then((res) => res.json())
      .then(
        (result) => {
          // On callback, update state
          setData(result);
          setLoading(false);
        },
        (error) => {
          // Update state; log error
          setLoading(false);
          console.log(error);
        }
      );
  }, []);

  if (loading) {
    return <h1>Loading...</h1>;
  } else {
    return (
      <div>
        <Title title={data.title} />
        <Author 
          author={data.user.name} 
          img={data.user.profile_image} />
        <Body body={data.body_html} />
      </div>
    );
  }
}

You might be wondering why there's a set of [] in useEffect(). That's where we add dependencies. Every time something inside of those square brackets changes, useEffect() runs. We leave them empty so useEffect() only runs once when the component loads.

Stylish components 🥳

React is a UI library, so CSS is a big deal. There's a bunch of different ways you can style components. You can use inline objects, objects, or an external stylesheet with classes. Or you can use a library called styled-components, which extends on the idea of using JavaScript objects for styling.

function StylinDiv() {
  const h3Style = {
    color: 'purple',
    fontSize: '23px' // notice camelcase
  }

  return (
    <div>
      {/* Using an external stylesheet */ 
      <h1 className="StylinDiv-h1">Hey there!</h1>
      {/* Using an inline object */}
      <h2 style={{ color: 'red' }}>Whats up?</h2>
      {/* Using an object */}
      <h3 style={h3Style}>Goodbye</h3>
    </div>
  );
}

Whichever method you choose, avoid global styles - make them specific to components.

I'm using an external stylesheet with classes in this example.

Here's the finished product. Fork the pen and try adding tags!

Resources 📚

There's a lot more to learn when it comes to React that's beyond the scope of this article. These are some of my favorite learning resources:

Thinking In React is an excellent article on shifting from traditional webpages to components.

I use Hooks in this article. Older React code uses classes and constructors to manipulate state. I highly recommend going through React's Tutorial to understand classes and the "old way."

Traversy Media is an excellent resource for anything frontend related. His crash course is excellent for picking up React quickly.

Create-React-App makes getting started with a React application on your computer quickly. No configuring webpack!

Learn to UseContext() with Hooks in 3 Minutes

Dan Curtis — Mon, 15 Jun 2020 18:13:28 +0000

I don't check Dev.to that often anymore. Find me over on dancrtis.com instead.

This is my first post on Dev.to! I'm surprised by the number of introductory React Context tutorials that use classes and useReducer(). I think classes and useReducer() overcomplicate things, so I thought I would write on useContext() without either.

We're going to create a super simple authentication app, and learn context in less than 3 minutes!

Context is like a global variable - or a global Hook - that's passed to every child. Context is a component that wraps around any other component. Every child component has access to it without being passed around through props. There are four steps to using context:

Initiate context
Provide the initiated context
Implement context in our app
Update context in our app

We're going to have an app that renders two components, one for authorized users and one for unauthorized users. This is the file structure:

index.js
App.js
UserContext.js
AuthApp.js
UnauthApp.js

That looks like a lot! Don't worry, I also created a CodePen with everything condensed into one file. It's 75 lines of code, including whitespace.

Step One: Initiate Context

Initiating context is super easy. We create a variable and set it to createContext(). We're going to set it to a default "fallback" value. If we left it blank, it would default to an empty object, which is okay too.

const UserContext = createContext({ name: '', auth: false });
// This also works: const UserContext = createContext();

Step Two: Provide Context

Creating a function to provide our initiated context is the most complicated part.

We're going to call a provider function with children as a prop. This function will be the parent of every other component in our app. This allows us to provide any method we create within the provider function to any other component.

const UserProvider = ({ children }) => {
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

We're creating a function that provides our newly initiated context to every child component. You probably are wondering where the value prop with user, login and logout is coming from. Those are the methods that will be accessible to any child component.

Let's create them:

const UserProvider = ({ children }) => {
  // User is the name of the "data" that gets stored in context
  const [user, setUser] = useState({ name: '', auth: true });

  // Login updates the user data with a name parameter
  const login = (name) => {
    setUser((user) => ({
      name: name,
      auth: true,
    }));
  };

  // Logout updates the user data to default
  const logout = () => {
    setUser((user) => ({
      name: '',
      auth: false,
    }));
  };

  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

Step Three: Implement Context in our App

Remember, context is a global variable. So we need to implement it as the highest level in our app, i.e. where React renders our app.

import React from 'react';
import ReactDOM from 'react-dom';
import { UserProvider } from './UserContext';
import App from './App';

ReactDOM.render(
    <UserProvider>
      <App />
    </UserProvider>
  document.getElementById('root')
);

Step Four: Update Context

From here on out, we're going to be consuming context (i.e. using and updating it). Using context just requires importing it and calling it! In App.js, we import it as well as authenticated and unauthenticated components.

import React, { useContext } from 'react';
import { UserContext } from './UserContext';
import AuthApp from './AuthApp';
import UnauthApp from './UnauthApp';

function App() {
  const { user } = useContext(UserContext);

  return user.auth ? <AuthApp /> : <UnauthApp />;
}

export default App;

We simply import user context. Then because it's an object, we can access the auth property. Then we use a ternary operator (fancy if statement) to either return <AuthApp /> or <UnauthApp />.

AuthApp.js and UnauthApp.js similarly import the user context, and also methods to update the user context.

AuthApp.js

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

function AuthApp() {
  const { user, logout } = useContext(UserContext);

  return (
    <>
      <h1>Hello, {user.name}!</h1>
      <button onClick={logout}>Logout</button>
    </>
  );
}

export default AuthApp;

UnauthApp.js

import React, { useContext, useState } from 'react';
import { UserContext } from './UserContext';

function UnauthApp() {
  const { login } = useContext(UserContext);
  const [name, setName] = useState();

  return (
    <>
      <h1>Please, log in!</h1>

      <label>Name:</label>
      <input
        type="text"
        onChange={(event) => {
          setName(event.target.value);
        }}
      />
      <button onClick={() => login(name)}>Log in</button>
    </>
  );
}

export default UnauthApp;

And that's a wrap. Let me know what you think!

A lot more goes into authentication that I did not cover. I'm currently creating a full-stack authentication example based on this post. I'll update this post with a link when it's done!

DEV Community: Dan Curtis

How to spoof your MAC address on macOS

How to Use Supabase Apple OAuth in React Native

Supabase and Expo

Supabase Apple OAuth with Expo

Setting up my Dev Environment on a Mac

Tools

GUI Applications

Extensions

Chrome

VS Code

Self-updating GitHub Profile README with JavaScript

An Analogy for Big O Notation

If you can’t explain something in simple terms, you don’t understand it. - Einstein

Big O notation is a way to describe how quickly a function grows. - GPT-3

Let's break down the function first

Let's dig into Big O notation's syntax

Measuring a function with Big O

Code Examples

Conclusion

CI/CD Pipeline with Netlify and GitHub Actions

Project set up

Netlify set up

GitHub Workflow set up

Development Workflow

Production Workflow

Test Workflow

Putting it all together

Pipeline Example

Conclusion

Learn React by Recreating this Dev.to Article

What is React anyways? 🕵️‍♀️

Thinking in React 🤔

Functions, classes, components - oh my! 🤯

The power of components 🦾

Introducing component props 📨

Data manipulation with Hooks ↩️

Conditionally rendering components ❓

The useEffect() Hook ↪️

Stylish components 🥳

Resources 📚

Learn to UseContext() with Hooks in 3 Minutes

Step One: Initiate Context

Step Two: Provide Context

Step Three: Implement Context in our App

Step Four: Update Context

If you can’t explain something in simple terms, you don’t understand it.
- Einstein

Big O notation is a way to describe how quickly a function grows.
- GPT-3