
I love working with [Zustand](https://github.com/react-spring/zustand) when I need client-side state management in my React applications. However, one of the things I struggled with recently was using it with TypeScript. I decided to write this short post to help anyone else that might run into a similar problem.

My need in this case was simple: I wanted to be able to fetch some data from an API one time when my application started up and then make that data available everywhere in my application.

Here is what my typed Zustand store looks like:

```typescript
// utils/store.ts

import create from "zustand"
import { FeedItemProps } from "../types"
import { fetchInitialFeedContent } from "./helpers" // returns data from the API using axios

interface Set {
  json: FeedItemProps[] // this property will hold my data
  fetch: (url: string) => void // this function will store the fetched data in the json property
}

export const [useStore, api] = create<Set>(
  (set): Set => ({
    json: [],
    fetch: async (url: string) => {
      try {
        const response = await fetchInitialFeedContent()
        set({ json: response })
      } catch (err) {
        console.error("Couldn not fetch initial data")
        set({ json: [] })
      }
    },
  })
)
```

Using the `Set` interface in the right spots here is key. While this is not too bad at all, most of my trouble came from struggling to find examples of how to type the store correctly.

For the sake of completion, here's an example using the store:

```typescript
// pages/_app.tsx

import { AppProps } from 'next/app';
import { useStore } from '../utils/stores';
import { useState, useEffect } from 'react';

export default function App({ Component, pageProps }: AppProps) {
  const { json, fetch } = useStore();
  const [isFetched, setIsFetched] = useState(false);

  // initial feed data fetch
  useEffect(() => {
    if (!isFetched) {
      fetch(TIMELINE_KEY);
      setIsFetched(true);
    }
  }, [setIsFetched, json]);

...

}
```

I'm calling the `fetch` function once at the start of my application and then using `json` from the store in many other spots of the app.

I hope this helps you!

Jake


Using Zustand With TypeScript


The great debate - GitHub vs. GitLab. The names are so similar that choosing one platform over the other must not be a big deal right? Well, (spoiler alert) it depends on your needs and the needs of your team.

In this post, I intend to provide some insight into what each platform can offer you and your team. It is worth noting that I use an internally hosted version of GitLab day to day in a professional team setting while I mainly use [GitHub.com](https://www.github.com/) these days as a remote repository for my personal side projects.

## GitHub

Founded in 2008, GitHub was really the first major player to join the remote Git repository hosting services game. In fact, it became so large of a player that Microsoft decided to [acquire GitHub for \$7.5 billion](https://news.microsoft.com/2018/06/04/microsoft-to-acquire-github-for-7-5-billion/). GitHub is used by millions of developers around the world and has become sort of a social network for people interested in technology. Large organizations trust GitHub to host major open source projects such as [React](https://github.com/facebook/react), [Angular](https://github.com/angular/angular), and [TypeScript](https://github.com/microsoft/TypeScript) (not too surprising Microsoft trusts GitHub 😉).

## GitLab

GitLab, while not quite as old as GitHub, has been around since 2013. However, in the last few years, GitLab has been exploding in popularity. GitLab has raised, and continues to raise, millions of dollars every year in funding from investors like [ICONIQ Capital](https://iconiqcapital.com/) and [Goldman Sachs](https://about.gitlab.com/customers/goldman-sachs/). In fact, the Goldman Sachs technology team has found major success in their use of GitLab. One of the biggest and most compelling things about GitLab is that the product has an [open core business model](https://en.wikipedia.org/wiki/Open-core_model), meaning that individuals can download and self-host GitLab wherever they want completely for free.

## Which service to choose

As I mentioned in the beginning of this post, it depends on what you and your team are after. Let's take a look at some of the offerings from each.

### GitHub offers

- Free private repositories with unlimited contributors (announced just yesterday!) along with 2,000 build minutes per repository per month
- Collaborate with a team using cards, notes, etc.
- GitHub Desktop app, GitHub Extension for Visual Studio, as well as a new [CLI tool](https://cli.github.com/)
- Manage software releases
- Mobile app that allows developers to view code, view commits, file issues, and more
- Repository vulnerability scanning (with automatic fixes 😮😮)
- CI/CD with [Actions](https://github.com/features/actions)
- [& more!](https://github.com/features)

### GitLab offers

- A complete DevOps platform
- Free private repositories with 2,000 build minutes per group per month
- Compliance management
- Multiple tiers (core, starter, premium, ultimate)
- Kubernetes integration
- Kanban boards
- Agile workflow features like Epics and milestones
- CI/CD with their [industry leading platform](https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/)
- [& more!](https://about.gitlab.com/features/)

## Conclusion

After spending a considerable amount of time with both, I have found that they both have their positives and negatives. I personally would much rather work with GitLab's CI/CD platform over GitHub's Actions platform, but I love the community and projects that live on GitHub. In the end, I think it's worth trying out both platforms and getting a sense of what works best for you Luckily, both platforms have excellent free options at this point in time, so I would highly recommend taking advantage of that.
As always, feel free to reach out to me [@\_jakewheeler](https://twitter.com/_jakewheeler) and let me how you feel about GitHub and GitLab. 😀

Jake


GitHub vs. GitLab - Which is Better?


Inspired by [@swyx](https://twitter.com/swyx)'s idea of [learning in public](https://www.swyx.io/writing/learn-in-public/), that's the route I decided to take with this post 😄.

I have been learning JavaScript for quite a while now. I've created applications, I have learned about ES6, I have used Angular, React, Node, and Typescript. However, I have been wanting to dive deeper into how JavaScript actually works. I know that JavaScript is single threaded, I have heard of the V8 engine, and I have heard of the event loop. So what are all of these things and how do they affect JavaScript? Well, let's take a look at a few of the big ones.

## V8 Engine

Let's start with the V8 engine. V8 is an open source JavaScript and WebAssembly engine that is written in C++ and maintained by Google. This is the engine that powers Google Chrome as well as Node.js.
V8 does a couple of things for us. Firstly, V8 provides a call stack. When you make a call to a function in your JavaScript code, that function call gets placed on to this stack. When a return statement is executed, this function call gets removed from the stack. This process happens again and again until the stack is finally clear of any function calls. Secondly, V8 also provides a heap, which is responsible for handling memory allocation.

## Node.js

Okay, V8 is the engine that executes our JavaScript code. So what exactly is Node then?
Node itself is not a JavaScript engine like V8. Instead, Node is a runtime that allows us to execute JavaScript code outside of a browser. What this means is that V8 is just one piece that helps to make up Node, but there are other pieces as well. We'll explore those pieces next.
The Event Loop, Task Queue, and Thread Pool
The reason why Node is considered to be "non-blocking" is due to the event loop, task queue, and thread pool. As I mentioned earlier, it is true that JavaScript is single threaded, but that is also a bit misleading. In the case of Node, we are able to pass asynchronous work off to the thread pool. This thread pool is another piece of Node that makes use of the libuv library written in C. Our asynchronous code is passed to this thread pool, handled by these threads, and then passed back to the task queue. The event loop monitors this task queue and places tasks back on to the stack when the time comes.

## Conclusion

I wrote this post mainly to force myself to do some research and gain a better understanding of the inner workings of JavaScript and Node. If anything here needs to be corrected due to an error, please tweet me ([@\_jakewheeler](https://twitter.com/_jakewheeler)) and I'll happily make any fixes!

Jake


Learning in Public: JavaScript


**EDIT 2-27-21: I've since rebuilt this site with [Next.js](https://nextjs.org/)!**

Back in July, I decided I wanted to learn React and Node.js so that I could start working on building a web app. Like many others, I decided that the excellent [Create React App](https://github.com/facebook/create-react-app) project was my way to get going. As I got deeper and deeper into React and the JavaScript ecosystem in general, I began seeing projects like [Gatsby.js](https://www.gatsbyjs.com/) and [Next.js](https://nextjs.org/) being talked about constantly. I had seen people refer to Gatsby as a "static-site generator" but I didn't really grasp what that meant or how it was different from Create React App.

My mission in building this site was to finally try to understand what Gatsby is. Now I get it.
Gatsby is essentially a full framework for building static sites based on technologies like React and GraphQL. However, it is important to note that these things aren't what make Gatsby what it is. These technologies just make working with Gatsby a more pleasant experience for developers that are already used to creating modern web apps. The real power behind Gatsby is its API and plugin system.

Behind the scenes, I am actually using [Contentful](https://www.contentful.com/) to write this post. Contentful is a headless CMS that exposes its data via an API. Luckily, there is a [Gatsby plugin for Contentful](https://www.gatsbyjs.org/packages/gatsby-source-contentful/) that lets me easily make use of this data. During build time, Gatsby reaches out to Contentful, grabs the data for my blog posts, and dynamically creates pages based on that data. In the end, I have a completely static website that has been mostly dynamically created. I can now host this site somewhere like [Netlify](https://www.netlify.com/) or in an Amazon S3 bucket without too much trouble at all. Pretty awesome!
Hopefully this helps clear up some confusion about Gatsby.

Jake
