DEV Community: Patrick Göler von Ravensburg

How to build a simple Raycast extension

Patrick Göler von Ravensburg — Sun, 27 Feb 2022 11:33:35 +0000

I recently started using Raycast and I am absolutely in love with it.

Raycast is a blazingly fast, totally extendable launcher. It lets you complete tasks, calculate, share common links, and much more. - raycast.com

If you use Mac and the Spotlight function I highly encourage you to try out Raycast as it improves on basically every aspect compared to traditional Spotlight.

A big feature is the the marketplace where the community can upload new extensions for everyone to use. As I use Chakra UI at work and for personal projects I find myself visiting the documentation for Chakra quite often and since there was no Raycast extension to browse the Chakra docs yet I decided to build one.

This is no fancy extension but if you want to get started building your own Raycast extension, hopefully I can give you a few pointers and make the process a little easier for you.

Prerequisites

You need Node.js and Raycast installed, an editor and familiarity with React & Typescript won’t hurt, that’s it.

To get started you can simply use Raycast to scaffold a starting template.

Fill out the details and choose the "Hello World" template. Note that I just specified a general folder for the location, Raycast will create a folder for you with the same name as you give the extension.

Hit "Create Extension" or use CMD+Enter to create the template. Navigate to the created folder, install the dependencies and open up your editor.

Replace the contents of src/index.tsx with this:

import { Action, ActionPanel, Icon, List } from "@raycast/api"

const items = [
  {
    title: "Button",
    url: "https://chakra-ui.com/docs/form/button",
  },
]

export default function Command() {
  return (
    <List searchBarPlaceholder="Filter by title...">
      {items.map((item) => (
        <List.Item
          key={item.title}
          icon={{ source: Icon.Link }}
          title={item.title}
          actions={
            <ActionPanel>
              <Action.OpenInBrowser url={item.url} />
            </ActionPanel>
          }
        />
      ))}
    </List>
  )
}

And with this little code the extension is practically done. You can try it out by running npm run dev and when you open Raycast while this command is running you should see the Hello World command popping up where you can test your extension.

There are a lot of other cool components that Raycast provides so you can let you creativity run free.

If you want to publish an extension I recommend you take a look at the proper documentation for that and maybe check beforehand whether this extension already exists.

That’s it, thanks for reading ✌️

Quick Tip: Take advantage of the official Next.js examples

Patrick Göler von Ravensburg — Sat, 10 Apr 2021 19:45:09 +0000

Have you ever spent too much time trying to set something up with Next.js? Hopefully this quick tip can help you in the future.

The Next.js repository contains one of the most extensive collections of examples I have seen.

Next.js Examples

So if you are trying to integrate your favorite UI or data fetching library with Next.js there is a good chance they have an example for that already.

This helped me a ton when I was trying to setup server side data fetching with Apollo GraphQL for the first time.

All the examples seem well-maintained too, e.g. the Tailwind example was updated to use the new JIT compiler which is a rather new change.

You can make use of this by copying the code you need or you can create a new Next.js project with an example as the template.

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Hope this helps :)

Youtube | Twitter

Spice up your Discord game with a custom Music Bot

Patrick Göler von Ravensburg — Mon, 01 Feb 2021 07:50:53 +0000

Learn how to create a Discord Music Bot from scratch with Typescript to bring some tunes to your next gaming session. This bot will include a basic play and stop command which takes a Youtube link as an argument and then plays the audio of that Youtube video.

Here's the code for the project or the more advanced, so called "Flötenbot".

Many free music bots exist out there but I found that the playback quality is lackluster which is totally understandable for the free version of a bot. So why not host your own bot I thought.

There are also so many ways to extend the bot to your liking. Add a queuing system or add an autoplay feature to fill the queue with songs similar to the last one played with the Spotify API to name a few. I have actually implemented these features in the "Flötenbot" project which is actively being used by me and my friends.

Check out the video for this project too

Prerequisites

You need to have Nodejs installed and a package manager of your choice, I'm using Yarn. Finally a code editor of your choice and a Discord account is needed.

Setup

Create a new folder somewhere you like and initialize it with yarn/npm.

mkdir jukebot
cd jukebot
yarn init -y

Dependencies

I tried to keep the amount of dependencies as low as possible here but some are still needed. Discord.js is used to connect to your Discord Bot, ytdl-core is used to stream Youtube videos and dotenv is used to load environment variables. Install these along with Typescript and some types and create a basic Typescript config.

yarn add -D typescript @types/node @types/ws
yarn add @discordjs/opus discord-ytdl-core ytdl-core discord.js dotenv
npx tsconfig.json

After that create a src directory and an src/index.ts file.

Finally some scripts are required to run the code, so make sure you you have a script to compile and run the code. This could look like this:

package.json

{
    "name": "jukebot",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
        "build": "tsc",
        "start": "node dist/index.js",
        "dev": "yarn build && yarn start"
    },
    "devDependencies": {
        "@types/node": "^14.14.22",
        "@types/ws": "^7.4.0",
        "typescript": "^4.1.3"
    },
    "dependencies": {
        "@discordjs/opus": "^0.4.0",
        "discord-ytdl-core": "^5.0.0",
        "discord.js": "^12.5.1",
        "dotenv": "^8.2.0",
        "ytdl-core": "^4.4.5"
    }
}

Discord Developer App

Head over to the Discord Developer Portal and make sure you are logged in. Head to the "Applications" tab and click on "New Application".

Head to the "Bot" tab and create a new Bot.

Copy the token and keep it secret!

Creating the Discord Client

Let's create a file to store our environment variables like this token from the bot.

src/config.ts

import dotenv from "dotenv"
dotenv.config()

export const TOKEN = process.env.TOKEN || ""
export const PREFIX = "_"

The "prefix" will be used to determine messages that are meant as commands for the bot. With the underscore as the prefix the play command would look like _play youtube.com/....

src/index.ts

import Discord from "discord.js"
import { TOKEN } from "./config"

const client = new Discord.Client()

client.on("ready", () => {
    console.log("The bot is online")
})

client.login(TOKEN)

This is how you would create a new Discord client and use the token to authenticate. You can try running this code now, in my case the command is yarn dev, and it should say "The bot is online".

The final piece is the message handler, a function that runs whenever a message is sent on a server where the bot is present. So let's create a new file for that: src/message.ts.

To begin with, this makes sure that the message is not sent by a bot and that it contains our defined prefix to make it a valid command for the bot.

Next, the prefix is stripped from the message and the message is split by spaces. The first entry is of course the command (play, stop, etc.) so that is taken out of the args into a separate variable.

Then a simple if/else checks which command is being invoked.

If the command is "play" then the first entry in args must be the url. There is currently no validation in place to make sure there actually is a url, but this would be a good idea down the road. Before doing anything else, this checks whether the user invoking the command is actually in a voice channel. If so, this creates a stream of the supplied Youtube video with the discord-ytdl-core library and then the bot joins the same voice channel as the user. Finally the stream is piped into the voice connection to play the audio.

src/message.ts

import { Message } from "discord.js"
import { PREFIX } from "./config"
import ytdl from "discord-ytdl-core"

export async function onMessage(message: Message) {
    try {
        if (!message.content.startsWith(PREFIX) || message.author.bot) return

        console.log(`Received message from ${message.author.username} saying: ${message.content}`)

        const args = message.content.slice(PREFIX.length).trim().split(/ +/)
        const command = args.shift()?.toLowerCase()

        if (command === "play") {
            // play url
            const voiceChannel = message.member?.voice.channel
            if (!voiceChannel) {
                await message.channel.send("You must be in a voice channel")
                return
            }

            const url = args[0]
            const stream = ytdl(url)

            const connection = await voiceChannel.join()

            connection
                .play(stream, { type: "opus" })
                .on("error", (error) => console.log(error))
                .on("close", () => {
                    stream.destroy()
                    connection.disconnect()
                })
        } else if (command === "stop") {
            // stop
            const voiceChannel = message.member?.voice.channel
            if (!voiceChannel) {
                await message.channel.send("You must be in a voice channel")
                return
            }

            const connection = await voiceChannel.join()
            connection.disconnect()
        } else {
            await message.channel.send("Unknown command, try _play or _stop")
        }
    } catch (error) {
        console.log(error)
    }
}

The .on("close") handler makes sure the bot leaves the voice channel once the playback is done. This is similar to the "stop" command. The "stop" command checks for the voice channel again and tries to connect to that. Since the bot should already be in the voice channel, this is not doing anything but providing a reference to the connection. This reference can then be used to disconnect from that channel.

The final piece in the puzzle is to connect this message handler to the discord client.

src/index.ts

import Discord from "discord.js"
import { TOKEN } from "./config"
import { onMessage } from "./message"

const client = new Discord.Client()

client.on("ready", () => {
    console.log("The bot is online")
})

client.on("message", onMessage)

client.login(TOKEN)

The bot is now ready to rock 🤘 ... but the bot isn't on the Discord server yet.

Invite the Bot

Back in the Discord Developer Portal you can find the client ID.

Copy that and replace "ID" in this link: "https://discord.com/oauth2/authorize?client_id=ID&scope=bot". Then you can visit this link and you should have the option to invite your bot to a Discord server of your choice. Keep in mind that you need the permission to invite bots to that server though.

Queue the disco music 🎧

When the bot is started now with (in my case) yarn dev the bot comes to life and it should be visible as online in your server.

Now find a song on Youtube, copy the link and send a message _play LINK in one of the Discord text channels and enjoy the tunes! 🎉

Pro tip: You can right click the bot and adjust the volume in case it's too loud/quiet.

I ran the bot locally for a bit but then decided to deploy it to Digital Ocean for 24/7 uptime and better performance. You can get 100$ starting credit on Digital Ocean with my referral link. For the 5$/month droplet you can host the bot (and much more by the way) for 20 month.

Leave a comment if you would like to see how to deploy something like this bot to Digital Ocean.

Thanks for making it this far ❤️

As I'm just getting started I'd be eternally grateful for shares, likes and subscribes on Youtube.

👋

Build a Linktree clone in under 1 hour with Strapi, Next.js and GraphQL

Patrick Göler von Ravensburg — Thu, 21 Jan 2021 14:51:07 +0000

Building a basic Linktree clone seems rather simple which is perfect for showcasing a bunch of technologies and how they work together. Strapi, GraphQL and Next.js are the main building blocks for this project while Tailwind and GraphQL Codegen help with efficiency and developer experience.

First, Strapi will be set up together with GraphQL and the necessary data models to have users and buttons. Second, Next.js with Typescript and the Apollo Client will be set up together with the GraphQL Code Generator, and finally, the UI will be built using Tailwind. Feel free to skip ahead as this project includes a lot of setting stuff up :)

The project is on Github and I also made a video on Youtube about this project, feel free to check those out.

Backend with Strapi

To begin with I like to set up the project folder as a yarn monorepo. To do that run these commands in your terminal to create a folder and initialize the project.

mkdir linktree-clone
cd linktree-clone
yarn init -y
mkdir packages

Every sub-folder like frontend, backend, ... will be in the packages folder. But first the package.json needs to be modified to make the yarn workspaces work.

{
  "name": "linktree-clone",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "workspaces": ["packages/*"]
}

The important, new fields are private and workspaces, so make sure you have those.

Now Strapi can be installed, but make sure you are in the packages folder before installing it.

yarn create strapi-app backend --quickstart

The quickstart option gives us a users and permissions out of the box. After installing Strapi will automatically launch and prompt you to create an admin user. Enter whatever you want here and you will be redirected to the Strapi home.

Now it is time to install the Strapi GraphQL plugin by going to the marketplace and installing it. I had some trouble installing this plugin, my suspicion is that the yarn workspaces are messing this up somehow. What helped me is to stop Strapi, run yarn to install packages again, launch Strapi with yarn develop and install the GraphQL plugin again. This worked for me, however, I hope it works for you the first time. Be patient during the installation, the server should reload automatically once it is done.

Now let's create an application user since we only have an admin user at the moment.

Now that we have a user let's create the buttons collection. Go to Content Types Builder and create a new collection type called Button. A basic button needs these fields:

text: text
url: text
visible: boolean
user: Many-to-one relation with user from user-permissions (not admin-user)

You can also set text and url as required in the advanced field settings and provide a default value for visible. Save the collection and create a button which belongs to your user so we have some data to fetch. Don't forget to also publish the button after saving. Before fetching data the permissions for the buttons and users need to be adjusted. For development purposes we can allow all functions for these collections. For a real world scenario these would have to be double checked! So go to Settings → Roles → Public and allow everything for buttons and users (users are at the bottom).

The backend should now be ready for data to be fetched. The GraphQL playground can be found at "http://localhost:1337/graphql". Try this query which should give you your created button and username.

query Buttons {
    buttons {
        text
        url
        user {
            username
        }
    }
}

And that's everything we need to set up a backend with Strapi. I love how easy it is to just start developing and not get bogged down by creating all the CRUD functions for the collections by yourself. The fact that users and permissons are pre-installed with the quickstarter are super nice too, even though the permissions don't really do anything for now. Plus, the GraphQL setup was super easy and now we have an always up-to-date GraphQL schema.

Frontend with Next.js

Setting up Next.js is really straight forward. From within the packages folder a Next.js app with Typescript can be installed with:

yarn create next-app frontend --example with-typescript

The team behind Next.js provides a long list of examples to use different technologies with Next.js. Some examples are: Typescript, Tailwind, Apollo, pretty much all CMS's and more.

After the installation, open the frontend with VS Code (or preferred editor) and create this file inside the lib folder.

import { useMemo } from 'react'
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
import merge from 'deepmerge'

export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'

let apolloClient: ApolloClient<any>

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: 'http://localhost:1337/graphql', // Server URL (must be absolute)
    }),
    cache: new InMemoryCache(),
  })
}

export function initializeApollo(initialState: any = null) {
  const _apolloClient = apolloClient ?? createApolloClient()

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // gets hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract()

    // Merge the existing cache into data passed from getStaticProps/getServerSideProps
    const data = merge(initialState, existingCache)

    // Restore the cache with the merged data
    _apolloClient.cache.restore(data)
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === 'undefined') return _apolloClient
  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient

  return _apolloClient
}

export function addApolloState(client: any, pageProps: any) {
  if (pageProps?.props) {
    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract()
  }

  return pageProps
}

export function useApollo(pageProps: any) {
  const state = pageProps[APOLLO_STATE_PROP_NAME]
  const store = useMemo(() => initializeApollo(state), [state])
  return store
}

This is coming pretty much straight from the example repo with-apollo. Only the server URI is different and the function parameters are typed with any. The only thing left to do is to add the @apollo/client package. This file is more like a setup-once kind of thing, so I don't mind that the parameters are typed with any.

yarn add @apollo/client

Now the entire app needs be wrapped with the ApolloProvider using the client we just created. In the pages folder create this special Next.js entry point file which wraps the entire application.

import { ApolloProvider } from "@apollo/client";
import { AppProps } from "next/app";
import { useApollo } from "../lib/apolloClient";

export default function App({ Component, pageProps }: AppProps) {
  const apolloClient = useApollo(pageProps);
  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps}></Component>
    </ApolloProvider>
  );
}

At this point I also like to create all the files not being used at the moment. That would be everything inside the components folder, the interfaces folder, the utils folder, the api and users folder in pages and the about.tsx file.

GraphQL Codegen

Since we have a complete GraphQL schema from Strapi the GraphQL Code Generator can generate a complete set of types and hooks for us to use. Just head to the installation page and follow the instructions to install all the dependencies. In short it's this:

yarn add graphql
yarn add -D @graphql-codegen/cli
yarn graphql-codegen init

The 3rd command initializes the repo. The schema is located at "../backend/exports/graphql/schema.graphql", operations and fragments should be at "lib/graphql/*/.graphql" and the output should be "lib/graphql/output.tsx". An introspection file is not needed and I called the script that runs the codegen "gen". For the rest the default options are fine. You can check out my video if you feel like these instructions are not clear enough or ask me about it in the comments.

Now the first query can be created in lib/graphql/ButtonsQuery.graphql.

query Buttons {
  buttons {
    text
    url
    user {
      username
    }
  }
}

Now the yarn gen command should generate types and more for this query but the first time I ran this command I got an error. After running yarn again to install dependencies yarn gen worked just fine. Keep in mind that every time the model or any .graphql files change the gen command needs to run again.

Tailwindcss

The official guide by Tailwindcss about the integration with Next.js is fantastic, so for the sake brevity I encourage you to follow the official guide.

However, there is one thing I would like to add. The Tailwind CSS Intellisense extension for VS Code is a must have in my opinion. This will give you auto-complete for Tailwind css classes which is especially great for beginners. If the intellisense doesn't work, try reloading the VS Code window. This usually fixes it.

Fetching the data

Thinking about what actually needs to be displayed it is quite obvious that the content is mostly static. On every user page there are just a few buttons that may not change from build to build. So we can initially render everything on the server. Every user page is accessible at the /username route. In Next this can be achieved by creating a new page called [username].tsx . This means that every route, unless occupied by another page, will map every /username to this page and the username parameter will be available in the props.

However, we only want to render a user page for actual users of the application. Next provides a function that allows us to limit which values we want to be allowed to map to this username page.

query Users {
  users {
    username
  }
}

In this case we can simply fetch all the users and only allow their usernames. Add a new query, run the code generator and add this function to the [username].tsx file.

export async function getStaticPaths() {
  const apolloClient = initializeApollo();

  const { data } = await apolloClient.query<UsersQuery>({
    query: UsersDocument,
  });

  return {
    paths: data?.users?.map((user) => ({
      params: {
        username: user?.username,
      },
    })),
    fallback: false,
  };
}

This instantiates a new Apollo client, executes the users query and maps the usernames to the paths. So if there is no user with username "fred" and someone tries to access /fred then there will be a 404.

Now the button data needs to be fetched.

export async function getStaticProps({ params }: GetStaticPropsContext) {
  const apolloClient = initializeApollo();

  const { data } = await apolloClient.query<ButtonsQuery>({
    query: ButtonsDocument,
    variables: { username: params?.username },
  });

  return {
    props: { data, username: params?.username },
    revalidate: 1,
  };
}

This looks really similar to the previous function. It receives the username as a parameter and we can use that to look up what buttons belong to that user. Then the button data and the username are returned as props to the component.

To filter the buttons by username the ButtonsQuery has to be adjusted though.

query Buttons($username: String!) {
  buttons(where: { user: { username: $username } }) {
    text
    url
    user {
      username
    }
  }
}

With this data now being efficiently fetched on the server and available in the props, this project is now ready to tackle the (little) UI work there is.

type Props = {
  data: ButtonsQuery;
  username: string;
};

export default function Username({ data, username }: Props) {
  return (
    <div className="min-h-screen max-w-2xl mx-auto flex flex-col items-center py-10">
      <img
        className="rounded-full h-24 w-24 mb-4"
        // the source is a base64 string but dev.to doesn't allow these kind of strings it seems
        src=""
      />
      <h1 className="font-bold text-lg mb-10">@{username}</h1>
      <div className="space-y-4 w-full">
        {data.buttons?.map((btn) => (
          <Button key={btn?.text} text={btn?.text!} url={btn?.url!} />
        ))}
      </div>
      <div className="flex-1"></div>
      <svg
        className="w-28"
        display="block"
        height="100%"
        width="100%"
        data-testid="BlackGreenLogo"
        viewBox="0 0 137 25"
      >
        <title data-testid="svgTitle" id="title_0.0374982482169921">
          title
        </title>
        <desc data-testid="svgDescription" id="description_0.0374982482169921">
          description
        </desc>
        <g>
          <path
            d="m37.1 24.4v-20.8c0-0.3 0.2-0.6 0.6-0.6h1.9c0.3 0 0.6 0.2 0.6 0.6v20.9c0 0.3-0.2 0.6-0.601 0.6h-1.899c-0.3-0.1-0.6-0.3-0.6-0.7z"
            fill="#3D3B3C"
          ></path>
          <path
            d="m44.3 5.5v-2c0-0.3 0.2-0.6 0.6-0.6h2.1c0.3 0 0.6 0.2 0.6 0.6v2c0 0.3-0.2 0.6-0.6 0.6h-2.1c-0.4 0-0.6-0.2-0.6-0.6zm0.1 18.9v-14.8c0-0.3 0.3-0.6 0.6-0.6h1.8c0.3 0 0.6 0.2 0.6 0.6v14.9c0 0.3-0.199 0.6-0.6 0.6h-1.8c-0.3-0.1-0.6-0.3-0.6-0.7z"
            fill="#3D3B3C"
          ></path>
          <path
            d="m51.5 24.4v-14.8c0-0.3 0.2-0.6 0.6-0.6h1.8c0.3 0 0.6 0.2 0.6 0.6v1h0.1c0.6-0.8 1.6-1.5 3.1-1.9h0.1c2.3-0.3 4.1 0.2 5.3 1.5 1 1.1 1.601 2.5 1.601 4.399v9.899c0 0.3-0.2 0.601-0.601 0.601h-1.8c-0.3 0-0.6-0.199-0.6-0.601v-9.101c0-2.699-1.101-4.101-3.4-4.101-1.1 0-2.1 0.3-2.8 1s-1 1.601-1 2.7v9.5c0 0.3-0.2 0.6-0.601 0.6h-1.8c-0.399-0.096-0.599-0.296-0.599-0.696z"
            fill="#3D3B3C"
          ></path>
          <path
            d="m68.2 24.4v-20.8c0-0.3 0.2-0.6 0.6-0.6h1.8c0.3 0 0.6 0.2 0.6 0.6v12.6h0.1l6.3-6.9c0-0.2 0.2-0.3 0.3-0.3h2.3c0.5 0 0.7 0.6 0.399 0.9l-4.599 5.2c-0.2 0.2-0.2 0.5 0 0.7l5.6 8.4c0.2 0.399 0 0.899-0.5 0.899h-2c-0.199 0-0.398-0.101-0.5-0.199l-5.1-7.6h-0.1l-2.1 2.3c-0.1 0.102-0.1 0.2-0.1 0.4v4.6c0 0.3-0.2 0.6-0.6 0.6h-1.8c-0.3-0.2-0.6-0.4-0.6-0.8z"
            fill="#3D3B3C"
          ></path>
          <path
            d="M85.3,20v-8.4h-1.8c-0.3,0-0.602-0.2-0.602-0.6V9.6C83,9.3,83.2,9,83.5,9h1.9V5.7   c0-0.3,0.199-0.6,0.601-0.6h1.7c0.3,0,0.6,0.2,0.6,0.6V9h3.4c0.3,0,0.6,0.2,0.6,0.6V11c0,0.3-0.199,0.6-0.6,0.6h-3.4v8.1   c0,0.899,0.1,1.5,0.4,1.899C89,22,89.5,22.2,90.3,22.2H91c0.3,0,0.6,0.2,0.6,0.6v1.7c0,0.3-0.199,0.6-0.6,0.6h-0.9   c-1.699,0-2.898-0.398-3.699-1.199C85.7,22.9,85.3,21.7,85.3,20z"
            fill="#3D3B3C"
          ></path>
          <path
            d="M95.5,24.4V9.6C95.5,9.3,95.7,9,96,9h1.7c0.3,0,0.6,0.2,0.6,0.6v1.2H98.4c0.301-0.6,0.801-1.1,1.399-1.5   c0.601-0.4,1.2-0.5,1.9-0.5c0.3,0,0.698,0,1,0.1C103,9,103.1,9.3,103.1,9.5l-0.3,1.8c-0.1,0.3-0.399,0.5-0.7,0.4   c-0.199,0-0.398-0.1-0.699-0.1c-1.899,0-2.899,1.3-2.899,3.9v8.8c0,0.3-0.2,0.601-0.601,0.601H96C95.7,25,95.5,24.8,95.5,24.4z"
            fill="#3D3B3C"
          ></path>
          <path
            d="m116.6 19.8 1.301 1c0.199 0.2 0.301 0.5 0.101 0.7-0.601 0.9-1.399 1.7-2.3 2.4-1.102 0.699-2.5 1.1-4 1.1-2.2 0-4-0.8-5.4-2.3s-2.1-3.601-2.1-6.101c0-2.601 0.699-4.601 2.1-6.101s3.1-2.3 5.301-2.3c2.101 0 3.899 0.8 5.199 2.3 1.301 1.5 2 3.601 2 6.2v0.302c0 0.3-0.199 0.6-0.6 0.6h-10.4c-0.3 0-0.6 0.301-0.6 0.602 0.1 1.1 0.5 2.1 1.1 2.898 0.801 0.9 1.801 1.4 3.2 1.4 0.7 0 1.3-0.1 1.8-0.3s1-0.5 1.301-0.8c0.399-0.4 0.601-0.7 0.799-0.9 0.102-0.1 0.201-0.3 0.302-0.4 0.196-0.4 0.596-0.5 0.896-0.3zm-9.4-4.7h8.6c-0.1-1.199-0.399-2.3-1.1-3.1-0.7-0.9-1.802-1.3-3.2-1.3-1.3 0-2.4 0.5-3.102 1.4-0.798 0.9-1.198 1.9-1.198 3z"
            fill="#3D3B3C"
          ></path>
          <path
            d="m134 19.8 1.3 1c0.2 0.2 0.3 0.5 0.101 0.7-0.601 0.9-1.399 1.7-2.301 2.4-1.1 0.699-2.5 1.1-4 1.1-2.199 0-4-0.8-5.398-2.3-1.4-1.5-2.102-3.601-2.102-6.101 0-2.601 0.7-4.601 2.102-6.101 1.398-1.5 3.1-2.3 5.3-2.3 2.101 0 3.899 0.8 5.2 2.3 1.3 1.5 2 3.601 2 6.2v0.302c0 0.3-0.2 0.6-0.602 0.6h-10.4c-0.302 0-0.601 0.301-0.601 0.602 0.101 1.1 0.5 2.1 1.101 2.898 0.8 0.9 1.8 1.4 3.198 1.4 0.701 0 1.302-0.1 1.802-0.3s1-0.5 1.3-0.8c0.398-0.4 0.6-0.7 0.8-0.9 0.101-0.1 0.2-0.3 0.3-0.4 0.2-0.4 0.6-0.5 0.9-0.3zm-9.4-4.7h8.602c-0.102-1.199-0.4-2.3-1.102-3.1-0.699-0.9-1.8-1.3-3.199-1.3-1.301 0-2.399 0.5-3.101 1.4-0.8 0.9-1.2 1.9-1.2 3z"
            fill="#3D3B3C"
          ></path>
          <path
            d="m11 0.7c-0.5-0.9-1.8-0.9-2.3 0l-8.6 15.6c-0.4 0.8 0.2 1.7 1.1 1.7h5.8v5.9c0 0.6 0.5 1.1 1.1 1.1h3.4c0.6 0 1.1-0.5 1.1-1.1v-5.9h-1.6c-0.7 0-1.2-0.5-1.3-1.1 0-0.2 0-0.4 0.1-0.602l4.8-8.7-3.6-6.898z"
            fill="#39E09B"
          ></path>
          <path
            d="m18.6 0.7c0.5-0.9 1.8-0.9 2.3 0l8.6 15.6c0.4 0.8-0.2 1.7-1.1 1.7h-5.7v5.9c0 0.6-0.5 1.1-1.101 1.1h-3.599c-0.6 0-1.1-0.5-1.1-1.1v-5.9h1.6c0.7 0 1.2-0.5 1.3-1.1 0-0.2 0-0.4-0.1-0.602l-4.8-8.698 3.7-6.9z"
            fill="#28BF7B"
          ></path>
        </g>
      </svg>
    </div>
  );
}

For the process and my thoughts behind building the UI I think a video is suited way better than a blog post, especially because there is nothing exciting happening in the UI. But here is the final Button component. To center a container in the middle of the screen a max-width can be used together margin: auto on the x axis. To center everything within that container display: flex and flex-direction column are suitable. The button component stretches the entire container, is green and the background changes to white with an animation while a green border remains. Things like the avatar picture or the Linktree logo can be "stolen" by inspecting their website, but since this is for educational purposes only, I hope they don't mind.

import NextLink from "next/link";

type Props = {
  text: string;
  url: string;
};

export default function Button({ text, url }: Props) {
  const link = url.includes("http") ? url : `https://${url}`;
  return (
    <NextLink href={link}>
      <button className="bg-green-300 text-white border-green-300 border-2 py-4 px-14 w-full hover:bg-white hover:text-green-300 transition-all duration-100">
        {text}
      </button>
    </NextLink>
  );
}

Let's compare the final result to Linktree.

This is the official Linktree website:

And the final result looks something likes this:

So pretty close I would say 🎉

Note that this post did not go into detail about authentication and secure API permissions with Strapi, advanced GraphQL operations for e.g. modifying the buttons or logging in, or deploying the result. If you would like to see this project continue to address any of these topics, leave a comment and tell me what you would like to see. You can check out the project repository if you like.

As you can tell I'm just getting started with this whole blogging thing, so leaving a comment or follow would mean the world to me. 🌎

That's it for now, thanks for reading!

How to get started with Web Development on Windows with the WSL in 2021

Patrick Göler von Ravensburg — Thu, 14 Jan 2021 07:50:47 +0000

In this guide you will learn how to install what I consider to be close to the perfect web development setup for Windows. This includes using the Windows Subsystem for Linux, Windows Terminal, the Node Version Manager as well as some tips and tricks along the way.

Feel free to check out my video on that topic or my website too if you like.

Install WSL

Manual Installation

Enable the Windows Subsystem for Linux using this command in Powershell with Admin privileges:

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

If you are on a somewhat recent version of Windows you should be able to install version 2 of the WSL which brings a lot of performance improvements. For that to work you need to enable another Windows feature with:

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Restart your computer now and come back once it's done.

Next, you need to install the latest Linux kernal package. Install it once the download has finished.

Finally, in an admin Powershell again run this command to set the default WSL version to version 2.

wsl --set-default-version 2

Next, you can install the WSL distribution of your choice from the Microsoft Store. I use Ubuntu 20.04 LTS which can be found in the Microsoft Store. Once installed, run the distribution from the app launcher and it will install additional files and set up your username and password.

You now have successfully installed Linux on Windows. 🎉

Easy Mode (Available Soon)

If you are running a Windows Insider build (OS build20262 or higher) you should be able to open CMD with admin privileges and type wsl.exe --install. Since you are most likely running a normal Windows build you will have to install this manually like me. I'm looking forward for this functionality to land in normal Windows builds. This new installation command will:

enable the WSL Windows feature
Download and install the latest Linux kernel
Set the WSL version 2 as the default
Downloads a Linux distribution (default is Ubuntu) and installs it
- To install another distribution try wsl --list --online to see available distributions and use this command to specify the distribution wsl --install -d <Distribution Name>

You now have successfully installed Linux on Windows. 🎉

VS Code

Download VS Code and install it.

WSL Extension

In order to work from within the WSL you need to install the Remote - WSL extension for VS Code. This will most likely be prompted anyways when you open VS Code after the WSL has been installed. After installing that you can also open workspaces from the terminal by running code FOLDER . Any integrated terminals in VS Code will then also use the WSL distribution.

Windows Terminal

To make life easier we can use the Windows Terminal app to make navigating the command line more pleasant.

Open the Microsoft Store and search for "Windows Terminal". Install and open the app.

To set Ubuntu as the default when opening Windows Terminal open the Settings (CTRL-Komma) and look for Ubuntu in the profiles list. I recommend using VS Code to edit the settings.

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl"
}

Copy the guid and paste it as the default profile at top of the file.

"defaultProfile": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",

Theme and Font

If you want you can adjust the font and color theme of Windows Terminal. I use the Cascadia Code font everywhere which supports Powerline Glyphs. This is quite handy when using some zsh themes. You can download the font here. Extract the files and install the four font files from the TTF folder. After that you can change the font family in the Windows Terminal settings. That being said you don't need a custom font if you don't want to use a theme with Powerline Glyphs.

"profiles": {
    "defaults": {
      // Put settings here that you want to apply to all profiles.
      "fontFace": "Cascadia Code PL"
    },
        ...
}

I also use the Dracula theme pretty much everywhere. If you want you can add the color scheme to the settings like this:

"profiles": {
            ...
},
"schemes": [
    {
      "name": "Dracula",
      "cursorColor": "#F8F8F2",
      "selectionBackground": "#44475A",
      "background": "#282A36",
      "foreground": "#F8F8F2",
      "black": "#21222C",
      "blue": "#BD93F9",
      "cyan": "#8BE9FD",
      "green": "#50FA7B",
      "purple": "#FF79C6",
      "red": "#FF5555",
      "white": "#F8F8F2",
      "yellow": "#F1FA8C",
      "brightBlack": "#6272A4",
      "brightBlue": "#D6ACFF",
      "brightCyan": "#A4FFFF",
      "brightGreen": "#69FF94",
      "brightPurple": "#FF92DF",
      "brightRed": "#FF6E6E",
      "brightWhite": "#FFFFFF",
      "brightYellow": "#FFFFA5"
    }
],

Now you can apply the color scheme just like the font earlier.

"profiles": {
    "defaults": {
      // Put settings here that you want to apply to all profiles.
            "colorScheme": "Dracula",
      "fontFace": "Cascadia Code PL"
    },
        ...
}

VS Code Font and Theme

This step is completely optional again but if you chose to adopt some of the theme choices mentioned earlier I want to show how to use them in VS Code too.

In the VS Code settings use Cascadia Code as the font family (without the PL) and enable font ligatures if you want (I like them). Then set the Terminal > Integrated: Font Family to Cascadia Code PL to show Powerline Glyphs in the integrated terminal. Finally if you search for "Dracula Official" in extensions you can install this color theme to match your terminal.

Installing Zsh and oh my zsh

The Z shell together with the oh my zsh framework can make life in the command line easier and prettier. There are many themes and plugins to choose from but I mainly use it to easily switch between themes.

In order to use oh my zsh the Z shell needs to be installed and set as the default shell first.

sudo apt install zsh

You can verify the installation with zsh --version .

To install oh my zsh run this command:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

This will ask you if you want to change your default shell. Say yes to this.

And this should be everything to get started with oh my zsh. You can set a theme or add plugins by editing ~/.zshrc but the defaults are good to get going. I'm running the "agnoster" theme at the moment. Double check that you are in the ~ directory because the default will put you in a different directory.

Node Version Manager

Everybody who worked with Node in the past knows that different node versions can sometimes be a pain. The Node Version Manager makes it easy to switch between Node versions.

Simply run this command:

curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh) | bash

and add this to ~/.zshrc:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Restart the terminal or source ~/.zshrc and check the nvm installation with nvm -v. If everything worked you can run nvm install node to install the latest version. If you need to switch another version you can simply run nvm install version and then nvm use version where version would be a number like 12.

Optionally you can install yarn with npm install -g yarn if you prefer that over npm.

Git and Build Tools

While we are installing some stuff you can run sudo apt install build-essential to install some build tools that are required sometimes.

If you want you can also configure git to your liking. E.g. create SSH keys for Github or configure the config with:

git config --global user.email "youremail@mail.com"
git config --global user.name "Your Name"

And this is it! 🎉

You should now have a Linux distribution running in the WSL version two with the basic tools installed to get started with Web Development in 2021. If you want you can check out something like Freecodecamp to start learning anything you want. This setup should make it easy for you to install and run anything you need. Keep in mind to look for installation guides for Ubuntu and not Windows since your code will be running inside of Ubuntu. Thank you and feel free to get in touch on social media if you have any questions or suggestions 👋.

Have a Fireside chat to beat isolation 🔥

Patrick Göler von Ravensburg — Tue, 28 Apr 2020 19:05:43 +0000

What we built

Right now, absolutely nobody needs an explanation of the psychological strain one undergoes when isolated from other humans. Whether we like it or not, we need each other. Inspired by the currently developing global phenomenon we have envisioned Fireside, an accessible anti-isolation tool made for connecting people, having fun and bringing excitement to these very trying times.
Our goal is to motivate people to start using their phones for talking again. We specifically considered the needs of our oldest generations, the people for whom this period of social distancing is especially difficult. Continue reading to find out how. Fireside matches strangers based on their common interests and sets up a call between them (we like to call this a Fireside Chat 😉).

The game is to find out what the participants have in common, if they get it right, we reward them with Sparks. The important aspect of this matching is that we do not disclose any information, our users are free to share what they feel comfortable with. Since all of this works with any regular old phone number, you don’t need to own a smartphone for Fireside, even a standard landline will suffice (you will need to be able to receive SMS messages though for our verification). We exclusively ask for information we need to set up the matches. But let us get back to users without a smartphone. How do they initiate calls? We’re glad you asked. In addition to being able to manually set up a Fireside Chat, we allow our users to set up scheduled calls. With this activated, our schedule-wizard 🧙‍♂‍ will automagically initiate calls in the selected time frame. Zero effort, works flawlessly.
And before you ask: While we can imagine that wonderful friendships are formed when using Fireside, it is not yet another dating app. We just want everyone to have some meaningful conversations again. Why not on Fireside? Give it a try 😊

Category Submission

COVID-19 Communications

Demo Link

https://fireside.netlify.app

Link to Code

https://github.com/patrickgoeler/fireside

As you can see on Github I did not build this alone but I had help from my friend Manuel.

How we built it

Frontend

We built the frontend with Vue which was entirely new for both of us. But I thought this would be great opportunity to learn something new, so we went with it. To make things pretty we used Vuetify.

The setup was quite easy with the Vue CLI. These were our settings.

To add Vuetify all we needed to do was run vue add vuetify.

Since we were using Typescript already I also wanted a nice way to manage the Vuex state. After some research I came across Vuex-Module-Decorators. With a little bit of trial and error the state management was up and running. You can find out how we did it by taking a look at the code on Github.

Overall frontend development went smoothly and once we understood how to manage the state with Vuex the pace increased significantly.

To deploy the application we used Netlify. This was as simple as connecting the repo via Github, choosing frontend as a subdirectory, npm run build as the build command and dist as the folder to be published.

To make things work properly with the Vue Router we also needed to add a _redirects file to the public folder.

/* /index.html 200

And that's it. Now on every push to the specified branch the app is built and deployed.

We included a few other cool things like update messages from the service worker that discards the cached version right away. But I'm afraid that's out of scope for this post.

Backend

For the database Mongodb seemed like a safe bet. Together with an Express + Typescript Backend we are able to interact with the Database, Twilio APIs and authenticate users with JWTs. To kickstart development we used this project because it provides great error handling and JWT authentication.

Next, I want to briefly go over how the matching and calling works in our app.

When a user signs up we store the city, interests and the job in the profile. When the user starts looking for a call we first check if a user with at least one field matching (city, interest or job) is in the FIFO queue.

If yes: we remove the found user from the queue, save a new conference object in the database containing info about the call and common interests and we dispatch two calls, one each, to a newly created conference room.

// search db for match
const foundMatch = await QueueRepo.findMatchingParticipant(incomingParticipant)
if (foundMatch) {
    // connect with match
    Logger.info("Match found, initiating...")
    // Call being initiated, create conference in db to keep track
    // for this route the incoming participant is never scheduled
    await ConferenceRepo.create(
        { user: foundMatch, isScheduled: foundMatch.isScheduled },
        { user: incomingParticipant, isScheduled: false },
    )

    const conferenceXml = buildConference(
        "Welcome to your fireside chat. Enjoy!",
        Types.ObjectId().toHexString(),
    )

    const numbers = [incomingParticipant.phone, foundMatch.phone]
...

If no: put the user in the queue collection and wait to be found.

// put number in db and wait to be found
const alreadyExists = await QueueRepo.getEntryByPhone(incomingParticipant.phone)
if (alreadyExists) {
    Logger.info("User is already in queue")
    return new SuccessResponse("User is already in queue", { queue: true }).send(res)
}
Logger.info("Adding to queue")
// again for this route incoming is never scheduled
await QueueRepo.addToQueue(incomingParticipant, false)
return new SuccessResponse("No match found. Putting in db.", { queue: true }).send(res)

To achieve FIFO like functionality in the queue collection we simply order the collection by creation date ascendingly.

public static findMatchingParticipant(user: User): Promise<QueueUser> {
    // order by date asc to have FIFO like queuing
    // match either city, interests or job
    return QueueModel.find({ phone: { $ne: user.phone } })
        .sort({ date: "ascending" })
        .findOneAndRemove({
            $or: [{ city: user.city }, { interests: { $in: user.interests } }, { job: user.job }],
         })
         .exec()
}

Once both users accept the call we receive the "conference-started" webhook event and we can find the corresponding database object by looking at the phone numbers of the participants. For now we only add a "callStartedAt" to compute the correct duration later on.

When both participants hang up we receive the "conference-end" webhook event and we can delete the conference database object. In turn we create a permanent call object, one for each participant, so the call with all the info can be shown in the frontend.

const confUpdate = req.body as ConferenceUpdate
if (confUpdate.StatusCallbackEvent === "conference-start") {
    Logger.info("Conference Started")
    // update conference with a callStartedAt Date
    const conference = await getConference(confUpdate.ConferenceSid)
    const participants = await conference.participants().list()
    await ConferenceRepo.updateStart(participants, confUpdate.ConferenceSid)
} else if (confUpdate.StatusCallbackEvent === "conference-end") {
    // update call with length and status
    Logger.info("Conference Ended")
    const conference = await ConferenceRepo.removeConference(confUpdate.ConferenceSid)
    await CallRepo.create(conference)
}

So it goes from (Queue) -> Conference -> Call. That way we can show the current status to the user.

The scheduling feature works by checking the submitted schedule settings of each user and if the time frame matches the current time we put the user in the queue. This is done with a Mongodb Stitch App that runs a function every 20 minutes. Users are also removed from the queue if the time passes their time frame of course.

We are also deploying the backend when pushing to master. Using Heroku we connected the repository, enabled automatic deploys and added a buildpack that lets Heroku change the working directory due to the monorepo style. After that all the environment variables need to be entered like the database credentials and the backend is up and running.

And that is pretty much it. You can take a look at the code on Github of course.

Additional Resources/Info

Towards the later stages of development it became clear to us that Firebase would probably have been a better choice for the database. I started to transition to firebase on a separate branch and it was pretty painless, so we will tackle that in the future.

Also it is entirely possible that our twilio account will run out of funds rather quickly. Therefore we ask you to responsibly use Fireside and to have a bit of patience should we need to replenish funds. If the service should be down, feel free to clone the project from Github and try it out yourself.

We hope you give it a shot and maybe it helps just a little bit with social isolation.