Forem: John Fay

Ditching the Theme Toggle: System Theme Detection in Astro

John Fay — Tue, 24 Mar 2026 00:00:00 +0000

How I built system theme detection for my portfolio — an inline script for flash prevention, React hooks for reactive switching, and Shiki dual-theme syntax highlighting.

The Problem

Most sites ship a theme toggle and call it done. But there are three separate problems hiding in "dark mode support":

Initial paint — the page needs to know the theme before the first pixel renders
Reactive switching — when the user changes the theme in your UI, the app needs to respond
System preference changes — when someone toggles dark mode at the OS level while your site is open

Each one needs a different solution. Here's how I handled all three.

1. Flash Prevention: The Inline Script

This runs in <head> before the browser paints anything. It's the most critical piece — without it, dark mode users get a white flash on every page load.

<script>
  (() => {
    try {
      const theme = localStorage.getItem("theme") || "system";
      const resolved = theme === "system"
        ? window.matchMedia("(prefers-color-scheme: dark)").matches
          ? "dark"
          : "light"
        : theme;
      const root = document.documentElement;
      root.classList.toggle("dark", resolved === "dark");
      root.style.background = resolved === "dark" ? "#000" : "#fff";
    } catch {}
  })();
</script>

A few decisions worth explaining:

localStorage.getItem("theme") || "system" — three possible states: "dark", "light", or "system". Default is system, meaning the OS decides.
root.style.background — setting the background color directly on the root element catches the very first frame. CSS classes can't beat an inline style for speed here.
try/catch — localStorage can throw in private browsing or restricted contexts. Silent failure is fine — the page just falls back to the default.
IIFE — keeps variables out of global scope. Small thing, but good hygiene.

In Astro, this goes in your base layout with is:inline so it doesn't get bundled and deferred:

<head>
  <!-- Theme init — runs before paint -->
  <script is:inline>
    (() => {
      try {
        const theme = localStorage.getItem("theme") || "system";
        const resolved = theme === "system"
          ? window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light"
          : theme;
        const root = document.documentElement;
        root.classList.toggle("dark", resolved === "dark");
        root.style.background = resolved === "dark" ? "#000" : "#fff";
      } catch {}
    })();
  </script>
</head>

2. Reactive Theme Switching: useEffect

When the user changes the theme through your UI (or you want to support it later), you need the DOM to react. This is where React comes in:

useEffect(() => {
  const root = window.document.documentElement;

  root.classList.remove("light", "dark");
  root.style.background = "";

  if (theme === "system") {
    const systemTheme = prefersDarkMode() ? "dark" : "light";
    root.classList.add(systemTheme);
    return;
  }

  root.classList.add(theme);
}, [theme]);

What's happening:

Strip both classes first — clean slate on every change. No stale state.
Clear inline background — the inline script set root.style.background for the initial paint. Once React hydrates, CSS takes over, so clear it out.
Resolve "system" at runtime — if the user picked "system", check matchMedia right now and apply the result.
[theme] dependency — only re-runs when the theme state actually changes.

The prefersDarkMode helper is simple:

const prefersDarkMode = () =>
  window.matchMedia("(prefers-color-scheme: dark)").matches;

3. Live System Changes: matchMedia Listener

If someone switches their OS from light to dark while your site is open, you want to catch it:

useEffect(() => {
  const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
  const handleChange = () =>
    setTheme(prefersDarkMode() ? "dark" : "light");
  darkThemeMq.addEventListener("change", handleChange);
  return () => darkThemeMq.removeEventListener("change", handleChange);
}, []);

This is a separate effect with an empty dependency array — it mounts once and cleans up on unmount. The change event fires whenever the OS-level preference flips, and it updates your React state, which triggers the first useEffect to apply the new class.

Shiki Dual-Theme Syntax Highlighting

Code blocks need to respect the theme too. Astro's Shiki integration supports dual themes:

// astro.config.mjs
export default defineConfig({
  markdown: {
    shikiConfig: {
      themes: {
        light: "github-light",
        dark: "github-dark",
      },
    },
  },
});

Shiki sets light theme colors as inline styles and stashes dark values as CSS custom properties (--shiki-dark). You need CSS to swap them:

/* Dark theme: swap to Shiki's CSS custom properties */
html.dark .astro-code {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

html.dark .astro-code span {
  color: var(--shiki-dark) !important;
  background-color: transparent !important;
}

The !important flags override Shiki's inline styles. The transparent background on spans prevents each token from getting its own background box.

Tailwind Typography Gotcha

If you're using @tailwindcss/typography for blog content, its prose styles will try to style <code> elements inside <pre> blocks — adding backgrounds, padding, and border-radius that conflict with Shiki. Scope your inline code styles to exclude code inside pre:

/* Inline code only — not inside pre blocks */
.prose :where(code):not(:where(pre *, [class~="not-prose"], [class~="not-prose"] *)) {
  @apply bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-sm;
}

/* Reset code inside pre — let Shiki own it */
.prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

The Full Picture

Three layers, each solving a different timing problem:

Layer	When	What
Inline `<script>`	Before first paint	Prevents flash, sets initial theme
`useEffect([theme])`	On theme state change	Applies class, clears inline styles
`useEffect([])`	On mount	Listens for OS-level theme changes

The inline script is the foundation. The React effects handle everything after hydration. Together they cover every edge case I've hit — initial load, manual switching, and live system changes.

Is anyone building microfrontends with different UI libraries?

John Fay — Mon, 06 Dec 2021 08:18:14 +0000

I have a scenario where a subset of developers enjoy building with Vue and another subset of devs enjoy React. I’m curious to know if anyone is leveraging the micro front end design pattern with different frameworks/libraries.

Creating a GraphQL API while utilizing your REST API

John Fay — Fri, 08 Jan 2021 00:49:16 +0000

Using an existing REST API we'll learn how to create a GraphQL API around our existing services instead of a complete rewrite of our API.

Introduction

GraphQL is a fun service to consume on the client-side. With its documentation, playground, and state management options such as relay or apollo, developer experience has been a blast for myself and my co-workers. There is a common misconception that you can use either REST OR GraphQL, but not both. You can have both! When I was learning I thought it was all in GraphQL or all in REST. To learn more about the difference between these services visit Understanding GraphQL through REST. Many of us are in a situation where we have an existing REST API that we don't want to completely abandon to start to try out GraphQL.

By the end, you'll have a GraphQL API leveraging a REST API of your choice in JavaScript. For the purpose of quickness I'll be utilizing the Covid Act Now API, but feel free to sub out your own REST API and models. If you will be using the same API I would recommend obtaining your API key now. It's immediate so no wait time needed! Let's get started.

Building your API

We'll be setting up JavaScript with a hello world script, converting that to a GraphQL hello world endpoint, adding a REST data source, and making a relationship to combine API calls.

Project Setup

Project setup has some optional steps such as using nodemon to reload our app for us, and dotenv to load environment variables. This would be where you would add in the tools you prefer to work with in JavaScript.

Create Project

mkdir covid-graphql

Initialize an npm Package

npm init -y

Create a Source Directory and an `index.js` File

touch src/index.js

Add a `hello world` Log to `index.js`

console.log("hello world")

Open `package.json` and Add `dev` and `start` Scripts

 "dev": "nodemon src/index.js --watch src/",
 "start": "node src/index.js"

dev utilizes nodemon to watch for any changes in the src directory.
start using node (lighter than nodemon in production).

Run `npm run dev` in Terminal

Making sure we're up and running and don't need to restart our app for every change going forward.

 hello world

Take it easy on me if you thought this was pointless. It will help someone.

Install Dependencies

npm install apollo-server apollo-datasource-rest dotenv

apollo-server

Used to spin up an express server.

apollo-datasource-rest

Used to take advantage of caching and other class-based inheritance around REST sources.

dotenv

Used to pass in environment variables.

nodemon

Used in development mode so you don't need to restart your app every time there is a file change.

Create a Hello World Schema

This schema file will be where we define what we can do with our GraphQL API.

touch src/schema.js

// schema.js
const { gql } = require("apollo-server")

const typeDefs = gql`
  type Query {
    hello: String
  }
`

module.exports = typeDefs

What we're saying in the typeDefs object is when we go to query in our graphQL API, we're only able to query hello and we expect a nullable String return type. In order to make that response not nullable we would just add an exclamation point to the end like so hello: String!.

Build Apollo Server

// src/index.js
require("dotenv").config()
const { ApolloServer } = require("apollo-server")
const typeDefs = require("./schema")

const server = new ApolloServer({ typeDefs })
const port = process.env.port || 9000

server.listen(port).then(() => {
  console.log(`server running 🚀 http://localhost:${port}`)
})

Inspect at http://localhost:9000 to see your schema defined. If you happen to try querying hello you will realize the response is null. We need to still define our resolver response.

Create Resolver for `hello`

Resolvers are where the actual work gets done. The schema sets the limitations of the API in terms of what the clients can do. Actually doing that work is the job of the resolver. Similar to the query and mutation explanation in my previous posts, we will return Query and Mutation if needed. Under query, we now add in our hello resolver to return hello world.

touch src/resolvers.js

module.exports = {
  Query: {
    hello: () => {
      return "hello world"
    }
  }
}

Add Resolver to `src/index.js` apollo-server Declaration

const resolvers = require("./resolvers")

const server = new ApolloServer({ typeDefs, resolvers })

At this point, when you query hello you should get your expected response.

Hooking Up a REST Source

Here we're going to build a REST Data source class that will be able to be utilized in our resolver to leverage some actual results.

Create REST Data Source

mkdir src/datasources
touch src/datasources/CovidActNowAPI.js

const { RESTDataSource } = require("apollo-datasource-rest")

class CovidActNowAPI extends RESTDataSource {
  constructor() {
    super()
    this.baseURL = "https://api.covidactnow.org/v2/"
  }
}

module.exports = CovidActNowAPI

All we really need to do here is extend RESTDataSource to get access to in-memory caching, HTTP helper functions, and pagination. To learn more visit apollo-datasource-rest.

Create .env File and Add-in API Key from Introduction

Hopefully, you've stowed away the key after obtaining your api key from the Covid Act Now API.

touch .env

COVID_ACT_NOW=YOUR_KEY_HERE

Add Some Methods to Get States and Counties in CovidActNowAPI Class

Taking a look at the Covid Act Now API documentation we can see JSON response can be hit at our baseURL(https://api.covidactnow.org/v2/) plus states for all US states, state/OH for an individual US state such as Ohio, counties for all US counties, and county/39001 for an individual county by fips plus our API key as a parameter. There is also an optional .timeseries we can append to include an array of values for things like metrics and actual figures. For getting a list of states or counties I'm choosing to avoid this as it's a much larger payload, but I am enabling the time series for individual US states and counties. Using this we can create functions to interact with the REST service now.

async getAllStates() {
    const response = await this.get(`states.json?apiKey=${process.env.COVID_ACT_NOW}`);
    return response || [];
}

async getState(stateCode) {
    const response = await this.get(
    `state/${stateCode}.timeseries.json?apiKey=${process.env.COVID_ACT_NOW}`
    );
    return response;
}

async getAllCounties() {
    const response = await this.get(`counties.json?apiKey=${process.env.COVID_ACT_NOW}`);
    return response || [];
}

async getCounty(fips) {
    const response = await this.get(
    `county/${fips}.timeseries.json?apiKey=${process.env.COVID_ACT_NOW}`
    );
    return response;
}

Add Data Source to apollo-graphql Server

// index.js
const CovidActNowAPI = require("./datasources/CovidActNowAPI")

const server = new ApolloServer({
  dataSources: () => ({
    covidApi: new CovidActNowAPI()
  }),
  typeDefs,
  resolvers
})

Update Schema to Reflect States and Counties as Queries

This should be your most time-consuming part. Relative to the Covid Act Now API they have a convenient models section that will show you some of the subcategory types you'll need to recreate to tell consumers of this API what is possible. My process here for any API is to just look through the JSON response and make sure all the data I want available is covered. Every nested object needs a type in your schema to be recognized. If you don't need it, don't make a type for it and it's ignored 😊 You can also reference apollo docs - build a schema to look at any syntax here such as the non-nullable (!), input parameters on a query or mutation (county(fips: String!): County), or array response([County]).

const typeDefs = gql`
  type Query {
    counties: [County!]!
    county(fips: String!): County
    states: [State!]!
    state(stateCode: String!): State
  }

  type County {
    fips: String!
    country: String!
    state: String!
    county: String!
    population: Int!
    metrics: Metric!
    riskLevels: RiskLevel!
    actuals: Actual!
    lastUpdatedDate: String
    url: String
    metricsTimeseries: [Metric!]
    actualsTimeseries: [Actual!]
    riskLevelsTimeseries: [RiskLevel!]
  }

  type State {
    fips: String!
    country: String!
    state: String!
    population: Int!
    metrics: Metric!
    riskLevels: RiskLevel!
    actuals: Actual!
    lastUpdatedDate: String
    url: String
    metricsTimeseries: [Metric!]
    actualsTimeseries: [Actual!]
  }

  type Metric {
    testPositivityRatio: Float
    caseDensity: Float
    contactTracerCapacityRatio: Float
    infectionRate: Float
    infectionRateCI90: Float
    icuHeadroomRatio: Float
    icuHeadroomDetails: ICUHeadroomDetails
    icuCapacityRatio: Float
    date: String
  }

  type ICUHeadroomDetails {
    currentIcuCovid: Int
    currentIcuCovidMethod: String
    currentIcuNonCovid: Int
    currentIcuNonCovidMethod: String
    icuCapacityRatio: Float
  }

  type RiskLevel {
    overall: Int
    testPositivityRatio: Float
    caseDensity: Float
    contactTracerCapacityRatio: Float
    infectionRate: Float
    icuHeadroomRatio: Float
    icuCapacityRatio: Float
    date: String
  }

  type Actual {
    cases: Int
    deaths: Int
    positiveTests: Int
    negativeTests: Int
    contactTracers: Float
    hospitalBeds: HospitalBed
    icuBeds: ICUBed
    newCases: Int
    date: String
  }

  type HospitalBed {
    capacity: Int
    currentUsageTotal: Int
    currentUsageCovid: Int
    typicalUsageRate: Float
  }

  type ICUBed {
    capacity: Int
    currentUsageTotal: Int
    currentUsageCovid: Int
    typicalUsageRate: Float
  }
`

I went all out here on models. I left very few keys out and got a lot of great information here. Start small and incrementally add-in types if this is a lot. Or get it all done in one pass.

Update Resolvers to Resolve Correctly

As part of any of our query functions, there is a list of inputs provided to each query.

fieldName: (parent, args, context, info) => data

We don't need parent or info for our functions but what we do need is access to the input args or arguments and the context because that includes our dataSources nested inside our defined Apollo GraphQL server.

// resolvers.js
Query: {
    counties: (_, __, { dataSources }) => dataSources.covidApi.getAllCounties(),
    county: (_, { fips }, { dataSources }) => dataSources.covidApi.getCounty(fips),
    states: (_, __, { dataSources }) => dataSources.covidApi.getAllStates(),
    state: (_, { stateCode }, { dataSources }) => dataSources.covidApi.getState(stateCode),
},

Validate

Once you've wired up your newly created REST Data source to resolvers, you should be able to test in the playground.

Faking a Relationship Through API Calls

Let's say the consumers of this API are building a US map showcasing a state and it's counties impact from Covid-19. They want both a US state and all counties to render their UI. If this isn't already a REST endpoint, it is two endpoints: the /state/OH and the /counties endpoints. Let's combine these to push off the lifting to GraphQL and away from the client-side.

Add County Array to State

// schema.js
const typeDefs = gql`
  type State {
    counties: [County!]
    fips: String!
    country: String!
    state: String!
    population: Int!
    metrics: Metric!
    riskLevels: RiskLevel!
    actuals: Actual!
    lastUpdatedDate: String
    url: String
    metricsTimeseries: [Metric!]
    actualsTimeseries: [Actual!]
  }

Get Counties in `getState`

// CovidActNowAPi.js

  async getState(stateCode) {
    const state = await this.get(
      `state/${stateCode}.timeseries.json?apiKey=${process.env.COVID_ACT_NOW}`
    );
    const counties = await this.get(`counties.json?apiKey=${process.env.COVID_ACT_NOW}`);

    return {
      ...state,
      counties: counties.filter(({ state: stateCode }) => stateCode === state.state),
    };
  }

If you want you could also add counties to the getAllStates function at this time. Although it won't perform well, it is better here rather than on the client-side.

Validate Counties in State

Test out to make sure you can query what you expect.

{
  state(stateCode:"OH"){
    state
    counties{
      fips
      county
      population
      metrics{
        testPositivityRatio
      }
      actuals{
        cases
        deaths
      }
    }
  }
}

Up Next: Schema First vs. Code First

If you're interested in learning the pro's and con's behind these two GraphQL approaches, stay tuned for my next post where we will take the API written in this tutorial and take it a step further by switching from schema first to code first and scaling up with better developer tooling. I'm kind of winging it on where to go next. If you want to see something specific let me know.

Summary

We have created a GraphQL API from scratch, built a REST service data source to leverage our existing services, and got to utilize the playground to start to see some of those GraphQL perks. If you got lost at any point here is the repository code on the part1 branch. You also can reference the playground hosted on Heroku to try out some queries.

Understanding GraphQL through REST

John Fay — Wed, 30 Dec 2020 06:20:04 +0000

In order to understand why GraphQL is continuing to gain attention, it is increasingly helpful to understand what it was intended to improve upon. One of the beauties of Software Engineering is the constant desire to improve upon what was provided to us. GraphQL tries to do this with REST. By the end, you will have examples of REST API(Application Programming Interface) endpoints, how GraphQL queries relate to those REST endpoints, and why GraphQL exists. Let's get started.

Understanding REST

REST stands for REpresentational State Transfer.

This architecture is known for being stateless and able to separate concern between client and server.

Stateless

Stateless in this sense means the server does not need to know what the state of the client is to execute an action.

Separation of Concern

Client and server separations allow for developers to change the server without it affecting the client-side code and vice versa.

Communication

When comparisons come into play with other API specifications, what actually makes REST unique is how the client and server communicate. REST was developed alongside HTTP(Hypertext Protocol Transfer) 1.1 back in the late '90s. Because of this, REST was able to leverage the benefits of HTTP. To illustrate the communication I'll be using a generic model with genres and books.

We will review receiving and updating a data source through a REST API.

Receiving Information from a REST API

GET /genres

When a client visits this endpoint they will be returned a list of genres.

[
  {
    "id": 1,
    "name": "Mystery"
  },
  {
    "id": 2,
    "name": "Romance"
  }
]

Similar to genres, books would be the exact same

GET /books

[
  {
    "id": 1,
    "title": "The lost man",
    "author": "Jane Harper",
    "img": "/img/jh-tlm.png"
  },
  {
    "id": 2,
    "title": "And then there were none",
    "author": "Agatha Christie",
    "img": "/img/ac-attwn.png"
  }
]

As you can see, this is a very predictable and scalable process. If our model above changed to include another model such as Libraries, we could easily add-in that endpoint and keep chugging along.

CRUD Operations in REST

In creating a service to handle CRUD(create, replace, update, and destroy) operations we would create the following

POST /genres

Create a new genre

PUT /genres

Update an existing genre

DELETE /genres

Remove or delete an existing genre

In REST API development taking advantage of the HTTP methods provided makes communicating with these available endpoints very predictable.

Summary

The general idea behind REST API's is to make everything an endpoint. If you need to add or remove pieces of information from a request to take the load away from your client's browser, you can easily do so without giving the client too much knowledge of what is going on behind the scenes. Above all, REST aims to be fast, reliable, and predictable while taking advantage of all HTTP.

What is GraphQL?

GraphQL is a language for querying an API. Not enough? Don't worry, more is coming.

Contrary to REST API's, GraphQL provides one HTTP endpoint and an understandable description of the data available through type specification. This gives the client the ability to request what they need and nothing more. This query language is much closer to the data sources giving the frontend developers more access to available models and relationships between them. With that, they are able to get many resources in a single request.

Type Specification and Self Documentation

Instead of REST endpoints returning different return types per endpoint, GraphQL relies on types and fields to tell your client what is possible.

type Query {
  books: [Book]
  genres: [Genre]
}

type Book {
  id: Int
  title: String
  author: String
  img: String
}

type Genre {
  id: Int
  name: String
  books: [Book]
}

With this, anyone needing the API to develop client-side code can reference developer tooling to see all the possible queries thanks to the type specifications and self-documenting.

Request What is Needed and Nothing More

In our genres and books data source, when we request a book we will always get all available keys.

[
  {
    "id": 1,
    "title": "The lost man",
    "author": "Jane Harper",
    "img": "/img/jh-tlm.png"
  },
  {
    "id": 2,
    "title": "And then there were none",
    "author": "Agatha Christie",
    "img": "/img/ac-attwn.png"
  }
]

With GraphQL we can add and remove keys to format only the data needed on the frontend. Let's say, for example, we are creating a page that only wants the title and image we could create a query to do so.

query {
  books {
    title
    img
  }
}

This would return the same result without the author and id keys.

[
  {
    "title": "The lost man",
    "img": "/img/jh-tlm.png"
  },
  {
    "title": "And then there were none",
    "img": "/img/ac-attwn.png"
  }
]

Get many resources in a single request

In the above REST example, if we wanted to get both genres and books we would have a few options.

Make multiple requests to /genres and /books

This would force the client-side to resolve these relationships itself.

Add books relationship into the /genres endpoint.

The only negative to this would be now anytime you want to fetch genres you are forced to also include books with it which is a problem of over-fetching as referenced above.

Make a new endpoint or add an option that would allow fetching of both genres and books.

This is most common because it will not interfere with existing frontend applications connected to your API.

Instead of planning the relationship and response for each endpoint GraphQL aims to make all relationships available through the type specification.

Versioning

Communication between frontend and backend teams can be difficult. In the example of changing an endpoint, you would need to communicate with the frontend teams to ensure they prepare for any breaking changes. With GraphQL it's easy to add or remove fields relative to your types above.

type Book {
  id: Int
  title: String
  author: String @deprecated
  authoredBy: Author
  img: String
}

type Author {
  firstName: String
  lastName: String
}

This could result in less communication needed between the teams and less breaking changes downstream.

The Basics

Query vs. Mutation

Thus far the examples above are all queries. Queries and mutations replace endpoints to all resolve to one endpoint POST /graphql. This endpoint can be changed but what is always consistent is everything is a POST request. Past that you either send a query variable or mutation variable. The formatting used is always spaced out for ease of reading and copied from the developer tools frequently used such as GraphiQL. Here is an example of GraphiQL used to query countries. Try it out!

Query

Queries are all related to GET requests in a REST API. Queries are the primary focus of GraphQL and what makes it unique. Instead of hitting a REST endpoint GET /books you would use a single endpoint POST /graphql and send a query variable. Here is an example.

query {
  books {
    id
    title
  }
}

Mutation

PUT, POST, and DELETE endpoint equivalents in GraphQL are mutations.

POST /book?name=Storyteller

mutation {
  createBook(
      {
          name: 'Storyteller'
      }
  ){
      // what you want to return
      id
      name
  }
}

One key difference above, regardless of mutations or queries, we always need to resolve the responses in the // what you want to return section. To me, this still seems awkward because you typically just want to know whether creating the books succeeded or failed. It's up to the client to decide how to handle that as opposed to a REST endpoint returning an id for example.

Why you should know GraphQL

A Brief History

GraphQL was made by the internal team at Facebook but released to the open-source community in 2015. Sometime around 2012, the Facebook team wanted to combat a few problems they saw in their REST API's. Mobile applications were getting slower with their heavily over-fetched data. They were sharing API's across multiple client applications, and changing one endpoint could be considered a breaking change to one client app.

It's Still Growing

In the State of JS 2019 survey, about 6% of developers in the JavaScript community are still unfamiliar with it but the remaining majority express interest in it. Since it's inception to the open-source community in 2015, it's been gradually growing. The open-source community has really run with this API specification and is building more tools to take this thing further and further.

Connect to Multiple Data Sources

I'm used to creating a three-tier app with an API that connects directly to a database, so restarting your API to leverage GraphQL benefits might seem like a large overhaul. This isn't the case, in fact, the community has fantastic resources for leveraging your already existing REST API to generate a GraphQL layer. So take your REST API, database, or an existing GraphQL API and you can make one unifying endpoint for all.

Support

Facebook isn't going anywhere and they make great tools that help the open-source community build great things. If you're a React developer you know all about this! Open source is also having a field day with tooling to make this an even better developer experience. One of my favorites is the graphql-code-generator where we can auto-generate TypeScript types and type-graphql types after creating your schema.

Part 2. Creating a GraphQL API using a REST API

If you are interested in learning about creating a GraphQL API utilizing a REST API as your data source here it is.

Summary

REST and GraphQL are useful specifications for sharing data. REST is scalable, stateless, and great at separating concerns. GraphQL tries to build on REST's shortcomings in terms of over-fetching data, needing to request multiple times to get all the information needed on the client-side, versioning, and manual documentation. We learned the basics of the differences between REST and GraphQL and their various terminologies such as queries and mutations. GraphQL is growing thanks to open-source software development and developer experience satisfaction. If you haven't already, try it out.

7 Steps to Tailwind CSS with GatsbyJS

John Fay — Fri, 13 Nov 2020 19:10:41 +0000

Why

Why do we do anything? As of writing this post I am using bulma. I enjoyed it initially but it got to a point where I was having to overwrite many of their container classes to do simple things like have a responsive site on mobile and desktop platforms. I had the argument of "Why didn't I just write this from scratch" many of times already.

Coworkers have mentioned this Tailwind CSS after numerous complaints of the amount of time I spend styling something to do generic things. After looking at it for a bit I gained interest in Tailwind CSS enough so to entertain a complete rewrite of my developer site you're referencing now. I've been treating this site as a platform to try out new things. By the time you view this post, you may see the new site or the old. Regardless I am going to keep the old site on the pre-tailwind branch so you can reference a before and after.

What is Tailwind CSS

Can't say it any better than their docs do. Summary incoming!

Great documentation

Nothing is ever enjoyable to develop with if the documentation is hard to understand. No matter where I'm at I can find the low-level class definitions quickly using their documentation. Starting straight from the homepage hit the / and type colors and get links to documentation relevant to your search 🎉. As a backup, if I want to look up the colors provided I can either go to the ole Senior software engineering experience and type in tailwindcss colors and I get great SEO

Avoid the "Use this component do x and y" and just give you access to the low-level classes

I can't tell you how many times I tried using a hero component or a flexbox setup to support mobile and desktop that flat out led me down a path of hatred for CSS. I like many other React developers love making components and using props to scale them for the situation as they arise. Tailwind gives me that access toCSSutility classes I would write myself in the past

"Responsive to the core"

Back to the mobile and desktop config failures in my past experiences... I'm still testing this out so I'm not totally sold here. So far it's very promising!

Designed to be customized

Overwriting the default configuration can be done in multiple places but I enjoy this setup

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      tablet: "768px",
      desktop: "1024px"
    },
    colors: {
      primary: {
        100: "#ebf8ff",
        300: "#90cdf4",
        500: "#4299e1",
        700: "#2b6cb0",
        900: "#2a4365"
      },
      secondary: {
        100: "#fffff0",
        300: "#faf089",
        500: "#ecc94b",
        700: "#b7791f",
        900: "#744210"
      }
    },
    extend: {
      boxShadow: {
        huge: "0 30px 60px -15px rgba(0, 0, 0, .25)"
      }
    }
  }
}

You can easily add/overwrite any of their existing classes in one spot

How

For this example, I will be making the changes directly to my personal developer site. If you'd like to follow along start on the pre-tailwind branch. Feel free to tag along in my repo or translate it to your own Gatsby project.

git clone https://github.com/keonik/dev-portfolio && cd dev-portfolio && git checkout pre-tailwind

I may make references to certain directories or file structure for a smoother walkthrough. If you'd like to follow along please checkout/fork this repo and start on the pre-tailwind branch.

1. Add dependencies to your existing project

I'm using yarn but feel free to swap out any yarn calls with npm

yarn add tailwindcss gatsby-plugin-postcss

gatsby-plugin-postcss will resolve imports to use tailwind on build

2. Add this plugin into your gatsby config

module.exports = {
    ...,
    plugins: [
        ...
        // highlight-start
        {
        resolve: `gatsby-plugin-postcss`,
        options: {
            postCssPlugins: [require("tailwindcss")],
            },
        },
        // highlight-end
        ...
    ],
    ...
};

3. Initialized a config file for Tailwind CSS

npx tailwindcss init

You should now see a new file tailwind.config.js. Although you might not need this config file you can override and change themes easily using this file in the future.

4. Create a CSS file and import tailwind packages

Create and open a new file

touch src/assets/tailwind.css && code src/assets/tailwind.css

Import Tailwind CSS packages

@tailwind base;

@tailwind components;

@tailwind utilities;

5. Import your CSS file into gatsby's browser step

import "./src/assets/tailwind.css"

6. Test to ensure Tailwind CSS is ready for use!

Because we changed things in the gatsby-config.js and gatsby-browser.js we typically need to restart our gatsby server. So cancel your currently running server and restart it

killall node -9 && yarn start

Let's test out a change on the home page which is located at src/pages/index.tsx

    code src/pages/index.tsx

To quickly test if it is working let's apply a background color to an element

const IndexPage = ({ data }) => {
  const image = data?.file?.childImageSharp?.fixed
  return (
    <Layout>
      <SEO title="Home" />
      // highlight-next-line
      <div className="columns bg-teal-600">
        <div className="column">
          <div className="content">
            <h1 className="title is-1">John Fay</h1>
            <h2 className="title">Software Engineer</h2>
            <p>
              Hello. I'm a Software Engineer working remotely from
              Ohio, US.
            </p>
            <p>
              I make web applications, usually with React, Node, and
              Postgres
            </p>
          </div>
        </div>
        <div className="column">
          {image && (
            <Img style={{ borderRadius: "50%" }} fixed={image} />
          )}
        </div>
      </div>
    </Layout>
  )
}

If successful you should see a home page with a teal background like...

🎉🎉🎉 Good to go?

Not quite! Tailwind includes all of its CSS at once in the current configuration. You can view this by taking a look at the page source and seeing how much CSS is included per page... or you can just trust me and I'll show you how to remove it

7. Remove unused Tailwind CSS code

Install purge-css which trims out unused CSS for you!

yarn add gatsby-plugin-purgecss

Add in the plugin to gatsby-config.js

module.exports = {
    ...,
    plugins: [
        ...
        {
            resolve: `gatsby-plugin-postcss`,
        options: {
            postCssPlugins: [require("tailwindcss")],
            },
        },
        // highlight-start
        {
            resolve: `gatsby-plugin-purgecss`,
            options: {
                printRejected: false,
                develop: false,
                tailwind: true
            }
        },
        // highlight-end
        ...
    ],
    ...
};

Restart your gatsby server

killall node -9 && yarn start

Summary

Thus far we've learned

how to add tailwind to a gatsby project
purge unused CSS.

At this point, my site focus has been to add in and get familiar with gatsby and its plugins. I have a lot of opportunities to spend some time styling and tweaking my developer site and I've got Tailwind CSS in my back pocket. I will most likely have another post to go through some things I've learned from getting familiar with the Tailwind docs and maybe a little show and tell

Upgrading to React 17

John Fay — Fri, 13 Nov 2020 18:46:57 +0000

New Release

As with any major release, there are typically breaking changes. Although the changelog for React states "No New Features" there are a few. The TLDR for this is a preparation for the next version to resolve any issues they foresee in migration to the next major version. I'm going to highlight some changes with React and Create React App that will clean up code and increase some efficiency

JSX transform

Plenty of posts have already summarized this so I'm not gonna spend too much time on this. TLDR:

New Benefit	Problems it solved
No longer need to `import React from 'react'`	JSX is understood by all files compiled below the root, possibly slightly smaller bundle sizes, and enabled future releases

Fast Refresh

react-refresh is the successor for react-hot-loader. For some time, hot loading in react has been a great developer experience where we can keep our frontend application running and it will refresh when the changes are detected. What react-refresh does is a step further. If you are someone who builds client-side rendered applications and pass around a lot of state management in tools such as react context, redux, apollo, or really any react hooks, changes to your code no longer do a complete page refresh! It stores many of those changes and updates only the changes being made. My coworkers and I will love this because we have quite a bit of complex state management being passed around so we no longer lose our place when we want to make a minor JSX change! Here's a preview

Notice the changes to the return JSX and the imports and it still stores state. Get excited! I am!

Migrating an unejected Create React App project

Install updated packages

npm install react-scripts@4.0.0 react@17.0.0 react-dom@17.0.0

Remove old installation and version lock file

rm -rf node_modules package-lock.json

Although this isn't necessary if you run into any odd eslint related errors I found doing a clean install removed quite a few for me

Reinstall

npm install

Rebuild

npm run build

This is really only applicable to typescript projects. There is a flag that you'll see get set and after that...

Restart your app

npm run start

Potential issues others are running in to

Since create-react-app updated their eslint setup you may see some errors thrown that are new. I just spent the time to understand them and resolve them as I see fit. Some of the rules such as import order we're incorrect because I was using a relative import plugin. If you run into any other problems look for an existing issue or create your own here

Other issues

If you find an issue that hasn't been captured by the Facebook Create-react-app team here be a good open-source developer and create an issue. I had one where I was referencing an image under my public/ directory in a sass file to use as a background-image:... reference when myself and others realized the public directory is no longer available. Read more on this issue here

Migrating other projects

For most cases, you still would install the updates

npm install react@17.0.0 react-dom@17.0.0

After that, you would look up your specific platform. Both webpack and babel have plugins to help with the fast refresh and JSX transform config. If you're using other setup's such as react-app-rewired or NextJS refer to their documentation to lookup how others are migrating. It's less common so I am not going to be able to stay up-to-date with the latest way to migrate.

Catching up a forked repo and contributing to open source

John Fay — Thu, 05 Nov 2020 01:57:04 +0000

Story time

I've been learning about TypeScript and progressive web applications(PWA) a lot the past year. As I was creating and PWA I was trying to use auto completion and realized there were no types for an open source project I've grown fond of. I saw an opportunity to add some new utility to an open source project 🎉 This project is written in JavaScript and bundled using Babel. Converting a project from JavaScript to TypeScript can be difficult depending on how large the code base is .

To learn how to convert a project try reading Scripting from JavaScript to TypeScript.

Luckily for me this repository only had a few files and was a great opportunity to test my skills. I submitted my pull request(PR) and I was excited about it!

Contributors started to give me positive feedback and things were progressing, but there were other priority requests in the maintainer's backlog. My contribution was overlooked for a bit, as expected. A rewrite from JavaScript to TypeScript can be a lot to review. Most of these people aren't getting paid to maintain a project. They do it as a courtesy and a way to give back to the community that has done it for them in the past. 💪

The other PR's were approved and merged into master and I realized there were many conflicts (After all it was a complete TypeScript rewrite). I wanted to resolve them quickly but ran into a new case I have yet to need to know until now. Someone else could learn from this so here's my quick take on it including some context.

Reasons why we should contribute to open source projects

If you haven't contributed to any open source projects I would encourage you to do so. Even the simplest things such as a typo in documentation will change the way you consume as a JavaScript developer.

Avoid giving up on a project

I've heard many people complain about how a library isn't working for their use case so they give up on it. Some of these abandonments are warranted...many are not. It is often complaints that continue person to person until someone is courteous enough to report an issue to the maintainer.

Relieving some duties of the maintainer(s)

The next adventure is addressing and prioritizing the work so someone can start. You can imagine being a maintainer would be stressful if it all fell to you. By writing up the issue and contributing some code these maintainers should be ecstatic to see the community engaged in their work and wanting to improve on it.

Changing your outlook

I often run into people that don't grasp how the open source repositories get updated. For some reason it's easy to assume these are well funded organizations that will tackle every and all issues in a short time.

Getting into the code and contributing will show you how it all works! All the effort put in by everyone to build something useable is fascinating to me and I love the idea of helping to benefit more than yourself.

It's good for resume building and networking

I'm currently still in a work from home status and haven't been networking as much lately. By reaching out and offering your help you may make a new friend or gain a new connection that could lead to other opportunities.

My guess is that most developers aren't contributing to open source projects often, despite a common expectation in the job market.

// Detect dark theme var iframe = document.getElementById('tweet-1313303791186268160-919'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1313303791186268160&theme=dark" }

If you do it's great for opportunities both in job searches and freelance connections.

How

Prerequisites

You've already forked the repository.
You've created a branch and PR to go into the original maintainer project.
You have conflicts or an out of date forked repository.
You're tired of reading leading in information and want to see what to do.

Configure git remote for the forked repository

For my example I'll be contributing to the react iOS PWA prompt. If you haven't seen it and enjoy the idea of PWA's check it out! iOS users don't have the generic google PWA prompt so this creates a react component to handle that case.

git remote add upstream https://github.com/chrisdancee/react-ios-pwa-prompt.git

If you'd like to validate this worked you can run

git remote -v

// expected output
origin  git@github.com:keonik/react-ios-pwa-prompt.git (fetch)
origin  git@github.com:keonik/react-ios-pwa-prompt.git (push)
upstream    https://github.com/chrisdancee/react-ios-pwa-prompt.git (fetch)
upstream    https://github.com/chrisdancee/react-ios-pwa-prompt.git (push)

Checkout master

git checkout master

Merge upstream remote to master

git merge upstream/master

Push it to your forked repo

git push

Checkout your branch that is currently under review

git checkout {name-of-branch}

Resolve the conflicts

Make sure you test and do all you can to catch the errors that could have been introduced by the new code. 🤞

Push that out

git push

If you have to notify appropriate maintainers

I typically just tag the maintainers associated in the PR to let them know it's good to go.

You're done! 🎉

I'm new to contributing to open source projects so I'd love to hear other benefits in the comments. Thank you for reading!

Scripting from Javascript to Typescript

John Fay — Tue, 27 Oct 2020 04:42:49 +0000

Why

Scripts typically require some level of tinkering and tweaking to get the desired output. If written in Javascript, developers have to remember the shape of input and output. I personally have to log output to recall what I'm getting as a response. By now, most of the Javascript community is aware of the perks of switching to Typescript. If you'd like a refresher, visit Serokell's post

What are we making?

We are going to take input from the covid tracking api and format it in a slightly different way to prepare to graph it on a chart. Here is an example of a day's US output

Sample Input

[
 {
   "date":20200916,
   "states":56,
   "positive":6597783,
   "negative":81976741,
   "pending":10587,
   "hospitalizedCurrently":30278,
   "hospitalizedCumulative":390624,
   "inIcuCurrently":6308,
   "inIcuCumulative":18961,
   "onVentilatorCurrently":1651,
   "onVentilatorCumulative":2090,
   "recovered":2525573,
   "dateChecked":"2020-09-16T00:00:00Z",
   "death":188802,
   "hospitalized":390624,
   "lastModified":"2020-09-16T00:00:00Z",
   "total":88585111,
   "totalTestResults":88574524,
   "posNeg":88574524,
   "deathIncrease":1202,
   "hospitalizedIncrease":1517,
   "negativeIncrease":625601,
   "positiveIncrease":40021,
   "totalTestResultsIncrease":665622,
   "hash":"e66c44b8b93e51c84321a2933d4031d75084a04c"
 },
 ...
]

Sample Output

[
 {
   "x":09-16-2020,
   "y":{
      "positive":6597783,
      "negative":81976741,
      "pending":10587,
      "hospitalizedCurrently":30278,
      "hospitalizedCumulative":390624,
      "inIcuCurrently":6308,
      "inIcuCumulative":18961,
      "onVentilatorCurrently":1651,
      "onVentilatorCumulative":2090,
      "recovered":2525573,
      "death":188802,
      "hospitalized":390624,
      "total":88585111,
      "totalTestResults":88574524,
      "posNeg":88574524,
      "deathIncrease":1202,
      "hospitalizedIncrease":1517,
      "negativeIncrease":625601,
      "positiveIncrease":40021,
      "totalTestResultsIncrease":665622,
 },
 ...
]

Instead of starting with a fully functional Javascript script... we'll get a script running and switch to Typescript to start building out the structure and documenting for future changes

Getting Started with a Javascript example

Setup a project space

mkdir script-in-ts && cd script-in-ts

Then initialize a package.json that will allow you to specify scripts and dependencies needed

npm init --y

We're going to get the script running in Javascript first so lets install the necessary dependencies

npm install @babel/core @babel/node @babel/preset-env

babel allows us the ability compile modern javascript. Both @babel/core and @babel/node make that possible while @babel/preset-env allows us to specify things such as the node version or browser support

Setting up babel to run Javascript

Add a .babelrc file

touch .babelrc && code .babelrc

Paste in the following setup to specify use of node version 10. This will give us access to things like the spread operator which you will see here soon

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ]
  ]
}

We're ready to create!

Make an index.js file

touch index.js && code index.js

Get started with a hello world example

console.log("hello world")

Open `package.json` and add a start script like so

{
...
   "scripts": {
       "start": "babel-node index.js",
      ...
   },
...
}

Let's make sure our script runs and everything is setup to move onto Typescript

npm run start
  hello world // expected output

Migrating Javascript to Typescript

Install dependencies

npm install typescript @babel/preset-typescript @babel/plugin-transform-typescript

The first dependency is Typescript itself and the second is the preset to transpile Typescript using babel

We'll need to update our .babelrc to include the Typescript preset like so

{
  "presets": [
    "@babel/preset-typescript",
    [
     ...
    ]
  ]
}

Create a `tsconfig.json` file

npx tsc --init

Rename `index.js` to `index.ts`

mv index.js index.ts

Update your start script in `package.json`

{
...
"scripts": {
 "start": "babel-node index.ts --extensions '.ts'",
 ...
},
...
}

Although we've added @babel/preset-typescript babel still needs a specification to allow .ts files

Validate babel compiles and runs `index.ts`

npm run start
hello world // expected output

🤞 Although this doesn't seem like a big step... it is. Unless you've configured babel frequently you forget these setup instructions and could put your search abilities to work

Getting your hands dirty with Typescript 👨🏻‍💻

If you're unfamiliar with defining types and interfaces I would highly encourage you to take a break here and familiarize yourself with the subtle differences between Javascript and Typescript. I enjoy this devhints cheatsheet when I was getting familiar.

Fetching data

We're going to type out the response from the United States COVID-19 impact in json format.

Feel free to use whatever fetching library you prefer. I'll be using node-fetch

npm install node-fetch @types/node-fetch

Fetch and log the response

import fetch from "node-fetch"
;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json = await response.json() //
  console.log(json)
})()

Typing the input

Your console should be logging something similar to this...

[
 {
   "date":20200916,
   "states":56,
   "positive":6597783,
   "negative":81976741,
   "pending":10587,
   "hospitalizedCurrently":30278,
   "hospitalizedCumulative":390624,
   "inIcuCurrently":6308,
   "inIcuCumulative":18961,
   "onVentilatorCurrently":1651,
   "onVentilatorCumulative":2090,
   "recovered":2525573,
   "dateChecked":"2020-09-16T00:00:00Z",
   "death":188802,
   "hospitalized":390624,
   "lastModified":"2020-09-16T00:00:00Z",
   "total":88585111,
   "totalTestResults":88574524,
   "posNeg":88574524,
   "deathIncrease":1202,
   "hospitalizedIncrease":1517,
   "negativeIncrease":625601,
   "positiveIncrease":40021,
   "totalTestResultsIncrease":665622,
   "hash":"e66c44b8b93e51c84321a2933d4031d75084a04c"
 },
 ...
]

Lets make an interface to replicate it!

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json = await response.json() //
  console.log(json)
})()

The interface above is an array of USInputDay so if we apply that type to the json response constant

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()
  console.log(json)
})()

We can now get a taste of the perks to switching to Typescript!

Auto-completion makes future requests to change input or output easy. We no longer need to log the file fetch to understand what it should look like!

Typing the output

In comparison to the input format we are just going to separate this into x and y values to show how to manipulate this into a new format

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()
})()

Above we made reuse of the USInputDay interface and we used the Omit utility to delete the keys we don't want to account for

Format Output

Now all we have to do is format the input into the output structure

import fetch from "node-fetch"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()

  const output: USOutputDay[] = json.map(
    ({ date, dateChecked, lastModified, hash, ...theRest }) => ({
      x: date,
      y: theRest
    })
  )
})()

I got a little fancy here and used the spread operator. Since I knew the output format only excluded a few keys from the input I pulled the keys I wanted and the ...theRest is all the remaining keys in the object I need to satisfy my output.

Write it to file

Last step... I promise 😉

Import the file system and write it to an output file

import fetch from "node-fetch"
import { writeFileSync } from "fs"

interface USInputDay {
  date: Date
  states: number
  positive: number
  negative: number
  pending: number
  hospitalizedCurrently: number
  hospitalizedCumulative: number
  inIcuCurrently: number
  inIcuCumulative: number
  onVentilatorCurrently: number
  onVentilatorCumulative: number
  recovered: number
  dateChecked: Date
  death: number
  hospitalized: number
  lastModified: Date
  total: number
  totalTestResults: number
  posNeg: number
  deathIncrease: number
  hospitalizedIncrease: number
  negativeIncrease: number
  positiveIncrease: number
  totalTestResultsIncrease: number
  hash: string
}

interface USOutputDay {
  x: Date
  y: Omit<
    USInputDay,
    "date" | "dateChecked" | "lastModified" | "hash"
  >
}

;(async () => {
  const response = await fetch(
    "https://api.covidtracking.com/v1/us/daily.json"
  )
  const json: USInputDay[] = await response.json()

  const output: USOutputDay[] = json.map(
    ({ date, dateChecked, lastModified, hash, ...theRest }) => ({
      x: date,
      y: theRest
    })
  )

  writeFileSync("formatted.json", JSON.stringify(output)) 
})()

That's it! Now your script is ready to tweak for a new change or to use as is!

If you got lost at any point, no fear, here is a repository showing what was made!

Summary

We learned how to setup a project from scratch to use babel and run basic Javascript files. We then converted Javascript to Typescript and setup babel to handle Typescript files. Next we learned how to fetch files using node-fetch. We gained some experiences building types/interfaces to control input and output for benefits such as auto-completion. Lastly, we learned to write content to a file using fs.

Forem: John Fay

Ditching the Theme Toggle: System Theme Detection in Astro

The Problem

1. Flash Prevention: The Inline Script

2. Reactive Theme Switching: useEffect

3. Live System Changes: matchMedia Listener

Shiki Dual-Theme Syntax Highlighting

Tailwind Typography Gotcha

The Full Picture

Is anyone building microfrontends with different UI libraries?

Creating a GraphQL API while utilizing your REST API

Introduction

Building your API

Project Setup

Create Project

Initialize an npm Package

Create a Source Directory and an index.js File

Add a hello world Log to index.js

Open package.json and Add dev and start Scripts

Run npm run dev in Terminal

Install Dependencies

apollo-server

apollo-datasource-rest

dotenv

nodemon

Create a Hello World Schema

Build Apollo Server

Create Resolver for hello

Add Resolver to src/index.js apollo-server Declaration

Hooking Up a REST Source

Create REST Data Source

Create .env File and Add-in API Key from Introduction

Add Some Methods to Get States and Counties in CovidActNowAPI Class

Add Data Source to apollo-graphql Server

Update Schema to Reflect States and Counties as Queries

Update Resolvers to Resolve Correctly

Validate

Faking a Relationship Through API Calls

Add County Array to State

Get Counties in getState

Validate Counties in State

Up Next: Schema First vs. Code First

Summary

Understanding GraphQL through REST

Understanding REST

Stateless

Separation of Concern

Communication

Receiving Information from a REST API

CRUD Operations in REST

Summary

What is GraphQL?

Type Specification and Self Documentation

Request What is Needed and Nothing More

Get many resources in a single request

Versioning

The Basics

Query vs. Mutation

Query

Mutation

Why you should know GraphQL

A Brief History

It's Still Growing

Connect to Multiple Data Sources

Support

Part 2. Creating a GraphQL API using a REST API

Summary

7 Steps to Tailwind CSS with GatsbyJS

Why

What is Tailwind CSS

Great documentation

Avoid the "Use this component do x and y" and just give you access to the low-level classes

"Responsive to the core"

Designed to be customized

How

1. Add dependencies to your existing project

2. Add this plugin into your gatsby config

3. Initialized a config file for Tailwind CSS

4. Create a CSS file and import tailwind packages

5. Import your CSS file into gatsby's browser step

Create a Source Directory and an `index.js` File

Add a `hello world` Log to `index.js`

Open `package.json` and Add `dev` and `start` Scripts

Run `npm run dev` in Terminal

Create Resolver for `hello`

Add Resolver to `src/index.js` apollo-server Declaration

Get Counties in `getState`

Open `package.json` and add a start script like so

Create a `tsconfig.json` file

Rename `index.js` to `index.ts`

Update your start script in `package.json`

Validate babel compiles and runs `index.ts`