DEV Community: CK

Having trouble with PWA

CK — Sat, 03 Jun 2023 13:37:57 +0000

Appended info at the end of the article.

Hi all,

I'm writing a PWA which requires audio playback from S3 with presigned URLs. The presigned URLs are important because the bucket cannot be public.

I wrote a little audio player, and on the web on desktop, it works every time. However, on PWA on iOS (and maybe Android, I have yet to test this), the audio playback is slow and works about half of the time. I'm curious if any of you have experimented with this, and whether you have a solution for it.

Here is the full component fwiw:

import { useState, useRef, useEffect } from "react";
import {
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
  PlayIcon,
  PauseIcon,
} from "@heroicons/react/24/outline";

import { api } from "../../utils/api";
import Spinner from "../ui/Spinner";
const skipTime = 15;

const buttonStyles = `
  w-6 items-center
`;





const AudioPlayer = ({
  src,
  recordingId,
  duration
}: {
  src: string;
  recordingId: string;
  duration: number;
}) => {
  const audioRef = useRef<HTMLAudioElement>(null);
  const seekRef = useRef<HTMLInputElement>(null);
  const [_duration, setDuration] = useState(duration);
  const [currentTime, setCurrentTime] = useState(0);
  const [playing, setPlaying] = useState(false);
  const [lastTime, setLastTime] = useState(0)
  const [loaded, setLoaded] = useState(false);
  const updateLT = api.recording.updateListenTime.useMutation();
  const [audioUrl, setAudioUrl] = useState<string | null>(null);

  const downloadAudio = async () => {
    const response = await fetch(src);
    const blob = await response.blob();
    const objectUrl = URL.createObjectURL(blob);
    setAudioUrl(objectUrl);
    if (seekRef.current) {
      seekRef.current.value = "0"
    }
  }

  useEffect(() => {
    downloadAudio().then(() => {
      setLoaded(true)
      return;
    }).catch(() => {
      console.error("Could not load audio")
    })

    return () => {
      if (audioUrl) {
        URL.revokeObjectURL(audioUrl);
      }
    };
  }, [])

  return (
    <>
      {
        audioUrl &&
        <>
          <audio
            controls
            ref={audioRef}
            onDurationChange={(e) => {
              const target = e.target as HTMLAudioElement;
              const dur = target.duration;
              if (dur !== Infinity) {
                setDuration(dur)
              }
            }}
            onTimeUpdate={(e) => {
              const target = e.target as HTMLAudioElement;
              if (seekRef && seekRef.current) {
                seekRef.current.value = (target.currentTime * 1000).toString();
              }
              setCurrentTime(target.currentTime);
              target.currentTime.toString();
              if (target.currentTime - lastTime > 2) {
                setLastTime(target.currentTime);
                updateLT.mutate({
                  recordingId,
                  progress: target.currentTime,
                  duration: _duration,
                });
              }
            }}
          >
            <source src={src} type="audio/mp3" ></source>
            Your browser does not support the audio!
          </audio>
          <div
            className={`
          align-center
          rounded-md
          flex
          w-full flex-col
          justify-center
          bg-gray-200 text-gray-900
      `}
          >
            <div className={`flex h-8 w-full items-center justify-center pt-2`}>
              <span className="mx-2 w-8">
                {Math.floor(currentTime / 60).toFixed()}:
                {String((currentTime % 60).toFixed()).padStart(2, "0")}
              </span>
              <input
                type="range"
                min={0}
                max={_duration * 1000}
                ref={seekRef}
                className="h-0.5 cursor-pointer appearance-none rounded bg-white"
                onChange={(e) => {
                  const target = e.target as HTMLInputElement;
                  if (audioRef && audioRef.current) {
                    audioRef.current.currentTime = Number(target.value) / 1000;
                  }
                }}
              />
              <span className="mx-2 w-8">
                {_duration ? Math.floor(_duration / 60).toFixed() : 0}:
                {_duration
                  ? String((_duration % 60).toFixed()).padStart(2, "0")
                  : "00"}
              </span>
            </div>
            <div
              className={`
        flex w-full justify-center gap-4 pb-4
        `}
            >
              <button
                // disabled={audioContext!.tracks!.length === 0}
                className={`${buttonStyles}`}
                onClick={() => {
                  if (audioRef && audioRef.current) {
                    audioRef.current.currentTime = Math.max(
                      audioRef.current.currentTime - skipTime,
                      0
                    );
                  }
                }}
              >
                <ArrowUturnLeftIcon />
              </button>
              <button
                // disabled={audioContext!.tracks!.length === 0}
                className={`${buttonStyles}`}
                onClick={() => {
                  if (audioRef && audioRef.current) {
                    audioRef.current.volume = 1
                    if (playing) {
                      audioRef.current.pause();
                    } else {
                      audioRef.current.play().catch((e) => console.error(e));
                    }
                  }
                  setPlaying(!playing);
                }}
              >
                {loaded ? <>{playing ? <PauseIcon /> : <PlayIcon />}</> : <Spinner />}

              </button>
              <button
                // disabled={audioContext!.tracks!.length === 0}
                className={`${buttonStyles}`}
                onClick={() => {
                  if (audioRef && audioRef.current) {
                    audioRef.current.currentTime = Math.min(
                      audioRef.current.currentTime + skipTime,
                      _duration
                    );
                  }
                }}
              >
                <ArrowUturnRightIcon />
              </button>
            </div>
          </div>
        </>

      }
    </>

  );
};

export default AudioPlayer;

I thought if I downloaded the full file as a blob then it might work, but I'm still getting slow/no playback on iOS. This is the same behavior I got when I tried to stream directly from the S3 presigned URL.

Let me know if you have any suggestions.

Thanks

Update:

According to this article from Prototyp, PWA audio support from Apple is intentionally unreliable because of Apple's desire to maintain a monopoly on the App store (eg: forcing Spotify to use an official app instead of a PWA).

I am going to look into alternatives for audio playback, potentially a native app.

Choosing an Open Source Headless CMS

CK — Fri, 09 Sep 2022 13:39:53 +0000

What is a CMS?

Traditionally, a CMS and a website are hosted on the same server. Wordpress, for example, is a CMS and website combination in which the admin can log into the CMS to get editing privileges directly on the site. More recently, there has been the JAMstack trend, part of which is the introduction and proliferation of the headless CMS.

What does it mean to be headless?

The webserver and the CMS are hosted separately.

Instead of hosting the website and the CMS on the same server, the site and CMS are separated. This has several pros and cons.

We'll start with the cons first.

What are the cons?

Using a headless CMS requires a higher level of technical competence to get going. There are many competitive services which offer Wordpress hosting that require little technical savviness, but in choosing a headless CMS one necessarily must know how to host two servers, or outsource the CMS to a SaaS.
Often, more custom development is required; you must know how to connect your site to your CMS.

What are the pros?

If your CMS goes down, your site can still keep working. With options like 11ty, Astro, NextJS, and more for static site generation, your CMS only needs to run at build time. This gives you a lot more reliability, especially as modern serverless hosting options become more robust.
There are far more options for site customization - you have the freedom to connect any framework to any CMS. For sites that require custom development, this freedom can be essential.
Hosting options are more compelling when you enter the JAMstack world. Instead of a traditional webserver setup, using tools like Netlify, Vercel, CockroachDB, Planetscale, any of the myriad of frontend frameworks, and more can allow you to create an incredible and unique experience to your customers.

How do I know which CMS to choose?

Ultimately, there are more options to consider than those which I can cover here. For a more comprehensive breakdown, I recommend that you check out JAMstack.org's comparison.

That being said, if open-source is important to you, be it for privacy or avoiding vendor lock-in, my three favorites are Directus (I am a contributor), KeystoneJS, and NetlifyCMS (not technically a headless CMS, but still worth considering).

Directus

Directus is... really cool. It can connect with your currently-existing database, provides a GraphQL API, is extensible, can be hosted in a serverless environment (Google Cloud Run), and is a pleasure to use.

KeystoneJS

Keystone is in many ways similar to Directus, except it uses a more developer-first approach to the database schema. You write a file that compiles into a Prisma configuration. This is nice in theory, but it makes using the same database as your currently-existing database more difficult. However, that may not be a problem since the idea of a headless CMS is to divorce the CMS from the website infrastructure anyway. Like Directus, it too can be hosted in a serverless environment (even Netlify).

NetlifyCMS

Of this group, NetlifyCMS is certainly the oddball. Instead of connecting to a database and potentially a storage bucket, NetlifyCMS connects with your git repository. Using a service like Netlify, a new build of your site is created every time a piece of content is updated. For something like a blog, where content is read far more than it is updated, and the content is updated only by admin users, NetlifyCMS is a good choice. The best part about NetlifyCMS is that it can easily be used for site templates. Most starter sites I create use NetlifyCMS because users can simply deploy to Netlify and call it good.

NetlifyCMS is not good for websites with content that must be updated by regular users (comments should not be handled by NetlifyCMS, for example).

How to choose?

Essentially, I argue the best simplification for how to choose is this:

Do non-admin users update any "server-side" state in your site? If not, go with NetlifyCMS.
Do you want to connect to your existing database? If so, go with Directus.
If neither of the above apply, choose between Directus and KeystoneJS. You'll probably want Directus, but there may be edge cases in which Keystone is better (or, you might just have a preference for whatever reason).

Ultimately, there are many options for your choice of CMS, and the right one might not be here. This is just a framework I have decided upon after doing lots of research for my own projects and learning which CMS options work best for most of my needs.

I created a 🔥blazingly🔥 fast blog template with Astro and NetlifyCMS

CK — Thu, 18 Aug 2022 20:39:14 +0000

This article was written and published on my blog. I did not interact with Medium or dev.to except to check that it was republished correctly.

What is Astro Devblog?

A serverless (JAMstack) blog template intended to be deployed to Netlify which republishes articles to Medium and dev.to.

Read about how to deploy the template for yourself here, or see this YouTube video. Or, better yet, dive into the git repo.

Why Astro?

Astro is the hot new kid on the block, with compelling features like zero JavaScript by default and the Islands architecture.

Previously, I was using 11ty for my blog. However, Astro offers several advantages, including...

Islands architecture allows me to incorporate UI frameworks/libraries when necessary or helpful
SSR futureproofs my stack

I have not yet rebuilt all of the features associated with my old blog, but I am optimistic that Astro is a good choice for my blog's future. In the near future, I will share the aspects of Astro that I enjoyed, as well as the pieces with which I found frustration. If you're interested in that, consider following me on Dev, Medium, YouTube, and/or Twitter.

Thanks for reading!

Arch Linux Installation Tutorial (Tested on T530)

CK — Fri, 27 Aug 2021 08:05:00 +0000

Follow along to install Arch Linux (tested on ThinkPad T530)

Download the `.iso`

Flash a USB

Use Rufus (Windows) or Etcher (MacOS or Linux) to flash the .iso to a flash drive.

Boot into the installation media

Common boot buttons include:

F12 - ThinkPads

Connect to the internet

Ethernet/virtual machine does not require any extra setup. For wifi, you will use the iwctl utility:

iwctl device list
iwctl station [device] get-networks
iwctl station [device] connect [network]

After the last command runs, you will be prompted to enter a password if the wifi network is private.

Note: If your network has multiple works, it must be enclosed in quotes.

You can test your connection by using the ping command (for example, ping blog.kapic.io).

Advanced: determine the boot mode

Check whether the /sys/firmware/efi/efivars directory exists:

ls /sys/firmware/efi/efivars

If the directory exists, the computer boots with UEFI. If the directory does not exist, it probably boots with BIOS.

Optional: update the system clock

timedatectl set-ntp true

Partition the drive

There are several options for partitioning the drive. You may use whichever you prefer; I suggest cfdisk because it is a GUI. (Video reference)

cfdisk

The Arch Linux Installation Guide suggests using a root and a swap (> 512MiB) partition. If you are booting with UEFI, also create a boot partition.

Create a filesystem

Filesystem

mkfs.ext4 /dev/[root partition]

Example

mkfs.ext4 /dev/sda1

Swap

mkswap /dev/[swap partition]

Example

mkswap /dev/sda2

Mount the partitions

mount /dev/[root partition] /mnt
swapon /dev/[swap partition]

Install essential packages

pacstrap /mnt base linux linux-firmware neovim

Note: You can choose other text editors in place of neovim. If you do so, use that editor instead of nvim for the remainder of the tutorial.

Fstab

genfstab -U /mnt >> /mnt/etc/fstab

Change root into the new system

arch-chroot /mnt

Set the timezone

ln -sf /usr/share/zoneinfo/[continent or country]/[city] /etc/localtime

Example

ln -sf /usr/share/zoneinfo/America/Chicago /etc/localtime

Note: to see available continents, run ls /usr/share/zoneinfo/. Likewise, to see available cities, run ls /usr/share/zoneinfo/[continent]/.

hwclock --systohc

Choose locales

nvim /etc/locale.gen

Uncomment the locales you wish to use (if you are not sure, just uncomment the line with en_US.UTF-8 UTF-8.

locale-gen

Then run

echo "LANG=[locale]" >> /etc/locale.conf

Example

echo "LANG=en_US.UTF-8" >> /etc/locale.conf

Hostname

echo [hostname] >> /etc/hostname

Edit /etc/hosts

nvim /etc/hosts

# /etc/hosts
127.0.0.1 localhost
::1 localhost
127.0.1.1 [hostname].localdomain [hostname]

Set the root password

passwd

Install useful programs

To be honest, I am not sure what every one of these is for, but I tried installing Arch without them and ran into problems.

pacman -S networkmanager network-manager-applet dialog wireless_tools wpa_supplicant os-prober mtools dosfstools base-devel linux-headers

Install a boot loader

Look up which boot loader is correct for the computer. I use grub for a ThinkPad T530. This step may be different depending on what hardward is being used. Do your own research to make sure you install a working boot loader.

pacman -S grub
grub-install --target=i386-pc /dev/sda
grub-mkconfig -o /boot/grub/grub.cfg

Exit and reboot

exit

umount -a

reboot

My Thoughts on SuperTokens

CK — Thu, 12 Aug 2021 08:15:00 +0000

Authentication has been a topic of fascination for me over the last several months. I have been researching all of the available options that I can find. If you follow me on YouTube, then you might have seen my video about authentication methods. Since creating that video, I stumbled upon SuperTokens, and I have to say... I am impressed.

That being said, SuperTokens is for a specific use case—web apps created with create-react-app. Technically, it works with other libraries as well, but I think other options are better for projects built with Gatsby, other JavaScript frameworks, or native applications—At least for now (I am actually a contributor for SuperTokens, and in the future I plan on working on bringing ease-of-use to Gatsby and maybe Expo for native applications).

SuperTokens is good for several reasons:

It is simple to set up (with create-react-app).
It is open source.
You can easily self-host it (I'm working on the CapRover One-Click App).
It integrates with your Node.js API.

Some of the (current) drawbacks of SuperTokens include:

There are not supported SDKs for other frameworks.
There are not supported SDKs for other backends.

Keeping in mind these limitations, this is the perfect use case for SuperTokens:

SaaS web application built with CRA on a subdomain

Let me explain.

You probably do not want to use create-react-app for a landing page because you want to optimize SEO. So instead, you choose Next.js or Gatsby. But those are annoying to build apps in, so you use create-react-app for the app itself. Host the app on https://app.yourdomain.com and the landing page on https://yourdomain.com. Then boom. Easy authentication with better SEO. And your authentication is not bound by vendor lockin because you can selfhost it.

This is my current strategy for TickerTab.

Use Gitforks.com to Compare Forks of a Repo

CK — Tue, 27 Jul 2021 13:47:00 +0000

One thing that I have wanted to do several times is compare forks of a repository on Github to see who was actually making changes to a repository and who only forked a repository because they thought it would be a fun thing to do. Unfortunately (to the best of my knowledge), Github does not make this easy. In order to see how many commits ahead a repository is, you need to go to the webpage for that repository.

What I wanted was a quick list, where I could simply scan over it and see which forks had changes. So I built that.

Enter Gitforks, a simple website written in React and hosted by Netlify (CDN and one serverless function). The website is really simple, but it does what I need it to do: display forks and their commits ahead/behind.

As it stands now, it is not perfect. If I wanted to get fancy, I would add authentication and caching so I do not have to worry about hitting the Github API's rate limit. However, I have better things to do, and it works well enough. If I am honest, my goal is mostly just to have this tool for myself, although I think it would be cool if someone at Github saw this and added it as a feature to the site (please, do this; many of us would find it useful). I also hope that it might be useful to others, so give it a shot and let me know what you think.

I am also open to having open-source contributions. If you want to make an open source contribution, check out the repo. You can implement caching (this should not be that difficult) or authentication (I do not know how difficult this is for Github OAuth), or anything else that you think would make for a good addition to the site.

And for those who just find it a cool idea, I would love if you simply gave the repo a star. Thank you!

There is a better alternative for serverless caching

CK — Wed, 14 Jul 2021 23:21:00 +0000

The other day, I was really excited because I thought of a great idea for a service: I was going to create a SaaS that handled caching for serverless applications (targeting Netlify specifically, but other platforms could use it as well). In my mind, serverless caching was the one thing that was still lacking from modern serverless stacks, and it was a problem that I needed to solve for TickerTab. I wrote an article about how I planned on solving this problem, and funnily enough, I will probably be changing my solution.

Unfortunately for me (because I wanted to build this business idea), there already is a company providing serverless caching. Enter Upstash, a serverless database for Redis. Upstash has a free tier for up to 10,000 daily commands, which seems amazing, and after that it is only $0.02/100,000 commands. If you want persistance, it is $0.25/GB/month. Not bad.

Technically speaking, Upstash probably has the insecurity problem I mentioned in my original article about working with a serverless cache, but it still might be worth using for the sake of simplicity. If I choose to migrate TickerTab, my new stack will be:

Netlify (Hosting, Identity, Functions) - Free until 1,000 MAU, then $100/month
Stripe (Billing) - 2.9% + $0.30 per successful charge
EOD Historical Data - $40/month (for the data necessary for TickerTab)
Upstash - Free until >10,000 daily commands
Chat server - Starting at $10/month, hosted on Vultr, and scaling as needed (manually)
Mailgun - I am not actually sure if I will need this for a pure operational cost, but I anticipate using it to send receipts for Stripe transactions.

In which case I will launch with an operational cost of $50/month until TickerTab grows large enough to have 1,000 MAUs (which will bump me up to $150/month).

The only other thing I might consider switching is my hosting provider. When I started developing TickerTab, Netlify seemed like the obvious choice, but as I have learned more, it might be the case that Cloudflare is better. If I were to switch to Cloudflare for hosting and functions, I would use Supabase for authentication. However, I probably will not switch; I mostly just want to be done developing TickerTab since I have worked on it for so long.

To be honest, I still may try to compete with Upstash because I think there is a lot of opportunity in the market, but I will likely try my other ideas first. I still need to finish working on TickerTab, and I have another idea that could be really good.

How to authorize requests for a private API behind a Netlify app

CK — Mon, 05 Jul 2021 08:17:00 +0000

Netlify is great for developing and hosting static sites. Their authentication service is straightforward relative to other options I have tried (you can get authentication in no time if you are willing to use their identity widget, which is not beautiful, but is good enough for prototyping). They offer cloud functions.

Long story short, Netlify makes it easy to get a lot of functionality for a website without dealing with many of the hurdles that developers had to deal with in the past.

However, one thing Netlify does not have an obvious solution for is authorizing requests for private APIs (unless you're on the business plan, in which case, just get your JWT and decode it as middleware on the API). For instance, I wrote an API that requires caching requests. Obviously, with a serverless framework, I cannot count on a Redis instance being available across multiple invocations of a function. Perhaps you saw my previous article in which I propose a way to handle this situation (in not the most secure way—I was desperate). Now, I have four ways to handle this situation. There is also a video in which I explain the concepts, if you would prefer that.

Method 1 (not that great)

This method was my naive first choice when I started development of TickerTab. It is bad for a couple of reasons:

Sometimes it did not work (I do not know if this was my fault or Netlify's)
If you are going to invoke a serverless function, you might as well do it as outlined in method 3.

Method 2 (not that great)

This is the method I described in my previous article. It is bad because Redis is super fast, so a brute force attack is possible. Use a long password if you do not want to be hacked, or use a better method.

Method 3 (better—and can be free)

This is the best solution I have if you want to stay on the free plan. It is essentially the same strategy you would use to authenticate requests to a third-party API, and you can do caching (or any other fancy things that require a true server) on a persistant machine.

Method 4 (best, but paid)

Since Netlify Identity uses JWTs, the best solution is to get your secret key and decode the JWTs on your server. This option, however, requires the business plan, so it is fairly expensive. If you are just starting, I would suggest you use method 3, and once you can afford the more expensive plan, switch to method 4. You might have noticed that they are structually quite similar, and switching should require only a minimal amount of refactoring.

The case for a CapRover Instance

CK — Sat, 03 Jul 2021 23:33:00 +0000

If you have not heard of CapRover, it is a self-hosted platform-as-a-service designed to simplify deploying containers; that is well and good, and perhaps you will actually use CapRover at some point to deploy something to production. But the real value is using it as a playground.

CapRover offers a list of one-click-apps, and unlike choosing from a selection of one-click-apps from a cloud VPS host, you do not need to provision a new machine for each app you deploy. Deployment is super easy, and if there is not a one-click-app available, you can submit a Dockerfile to create your app.

CapRover also offers ridiculourly easy SSL deployment, so all of your self-hosted one-click-apps can have valid HTTPS certificates with minimal work on your end.

For context, here are some of my favorite one-click-apps available in the main CapRover Repository:

Ackee - a self-hosted, privacy-respecting analytics tool. (An alternative is Plausible, but I have not been able to get the self-hosted version working. If you are willing to pay, their SaaS option is actually pretty good... and I'm not getting paid to say that.)
code-server - VS Code in your browser. There are a couple quirks, but it is super helpful to have an accessible (from any computer with a web browser) IDE. Just try not to let yourself get lost in the weeds of maintaining any weird settings.
Firefly III - personal finance manager. To be honest, I have yet to spend much time figuring this one out, but it seems promising, and it also seems to be the most popular based on online forums.
OnlyOffice - OPENOFFICE in the browser. Fairly similar to Microsoft Word in functionality, but in your browser, and open source (not proprietary through Google).

Overall, there are still more one-click-apps for me to explore. There are also a couple that I have had trouble with... If you want Mastodon, do not host it with CapRover (as of July, 2021).

At the very least, CapRover will offer a little fun. Give it a shot.

Thanks, and you're welcome.

How to deploy a NodeJS server with NGINX on a VPS

CK — Thu, 01 Jul 2021 23:22:00 +0000

This is how I (currently, as of July 2, 2021) deploy NodeJS servers. Eventually I will figure out Docker, but for right now this is good enough. This tutorial also includes information for using Redis on the same VPS for caching.

1. Prepare a VPS

Create a VPS (I use Vultr–that's my referral link). I use Ubuntu; if you use another distro you will have to use your distro's package manager for installing software.

You'll probably want a domain name anyways, so point a domain (I will use example.com for the tutorial) at the VPS.

SSH into the VPS:

ssh root@example.com

Update the machine:

sudo apt update; sudo apt upgrade

Install programs that will be useful:

sudo apt install nginx redis-server python3-certbot-nginx

Install a text editor (I prefer Neovim):

sudo apt install neovim

2. Edit your NGINX files

nvim /etc/nginx/sites-available/example.com

In the proxy_pass value, the port should be whichever port you plan to run your NodeJS server on.

server {
    listen 80;
    server_name example.com www.example.com;
    location / {
        proxy_pass http://localhost:3000/;
    }
}

Run

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled

3. Configure Redis

Edit your redis.conf file:

nvim /etc/redis/redis.conf

Find the supervised key; set the value to systemd.

Restart Redis:

sudo systemctl restart redis.service
sudo systemctl restart redis

4. Install NodeJS (via `nvm)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Exit your SSH session and start a new one:

ssh root@example.com

Install NodeJS:

nvm install v15.11.0

5. Clone your repo

git clone https://probablygithub.com/yourusername/yourrepo.git

6. Start your server

Change directory into your server directory:

cd yourrepo.git

Install your packages:

npm install

Install pm2 globally:

npm install pm2 -g

Start your server (change server.js to the path of your main file):

pm2 start server.js
pm2 startup
pm2 save
sudo reboot

7. Configure SSL

Use LetsEncrypt:

sudo certbot --nginx -d example.com -d www.example.com

Enter the required information, and soon enough you will have SSL for your server.

Congrats! You have a deployed NodeJS server with Redis for caching and SSL through LetsEncrypt!

Other considerations

You may want to create a different user so you are not running the server as root.

You may want to use ufw for added security. I would reference Brad Traversy's deployment strategy.

If this tutorial is broken at any point in the process, let me know by leaving a comment below. Thank you!

How to deploy a Redis instance

CK — Sat, 19 Jun 2021 08:30:00 +0000

For part of my development of TickerTab, I need to create an instance of Redis, an in-memory key:value database for caching. Initially, when I created TickerTab, I had a NodeJS API, but I am refactoring to use Netlify's serverless functions. Since my functions are serverless, I cannot cache on the same server that the functions are run on (like I could with NodeJS), so I need a separate server.

This is how to set up an independent instance of Redis.

Note: I don't know what I'm doing when it comes to security—if you know something I don't, send me an email. Thanks!

Another note: I now have better ideas about how to handle caching for Netlify. Keep an eye out for another article about a better method.

1. Create a VPS

I like to use Vultr (referral link), and I decided to go with Ubuntu 18.04.

2. SSH into the VPS

Then run

apt update; apt upgrade

3. Install Redis

Run

sudo apt install redis-server

4. Update the configuration

Run

sudo vim /etc/redis/redis.conf

And change the following:

# /etc/redis/redis.conf
# 
# previously:
# supervised no
# now:
supervised systemd

# previously:
bind 127.0.0.1 ::1
# now:
# bind 127.0.0.1 ::1
# NOTE: Generally, this is a big security risk,
# but since we are using serverless functions we
# don't know which IP address we will receive a
# connection from.

# previously:
# requirepass foobared
# now:
requirepass YOURSUPERSTRONGPASSWORD
# NOTE: Use a long password. If you don't, Redis
# is fast enough that a brute force attack would
# not be very difficult.

5. Run Redis

systemctl restart redis.service

And that should do it. I think. If you have problems, leave a comment and I will get back to you!

Technologies I want to learn this summer

CK — Wed, 02 Jun 2021 07:51:00 +0000

Since this is my last summer before I graduate college, I want to take advantage of it to make myself as marketable as possible. It would be useful to have a well-rounded resume, especially as I look for my first post-college job. (By the way, if you are looking for full-stack developers who majored in math at Northwestern, here is my resume).

Here are the technologies I want to learn and why I want to learn them.

TailwindCSS

I am not artistic, so knowing my way around any CSS framework will fill in that gap well for me. Currently, in spite of all of my efforts, every website I build looks ugly as sin. Hopefully TailwindCSS can change that for me. I know some people have complained about Tailwind making HTML difficult to read, but it seems as though it is pretty universal across different frameworks, which is good.

SQL

Everyone uses SQL, so I need to learn how to use it too. Based on what I have seen, I do not expect SQL to be difficult. However, it does seem to be the case (from the perspective on one who has not yet used any SQL database) that getting started with a server is difficult, especially if doing so with security in mind. I think I will learn how to use PostgreSQL since it seems to be easier to get started with than MySQL (which would be my second choice).

MongoDB

It seems to be the case that MongoDB is easier than SQL (again, from the perspective of an outsider), but it also seems to be the case that it is not as ubiquitous as SQL databases. I think Mongo will be fun, and that's the main reason why I plan on learning it.

GoTrue API

Authentication is either a pain or requires vendor lock-in. Netlify's GoTrue API might be the easiest solution for a self-hosted, not-too-difficult identity provider. Right now, I use Firebase and Netlify Identity, but GoTrue on a self-hosted machine seems to be ideal for making myself independent on the web. (I will probably still use either Firebase or Netlify Identity for TickerTab.io, just so I do not have to worry about my identity server going down, but I do cringe at the thought of being more dependent on others than necessary for my web presence).

Manjaro

I have watched enough Luke Smith. I need to make the jump into Linux. Well, I have already done some work with Linux, but I would like to use it as my daily driver. I have a laptop that runs Archlinux, but I do not care enough about my computer to set up every little detail to be how I want it to be, so using Manjaro seems like a good in-between. I will probably go with the KDE version, and will style it to be as keyboard-centric (eg: avoid using the mouse) as possible, keeping some of the aesthetics of MacOS (which I am using to type this post).

Svelte

Do I worry about the potential limitations of Svelte? Yes. Do I think it has the potential to be awesome once I learn it? Also yes.

And I think learning it will be fun. Therefore, I will learn Svelte.

Stripe

I already have some experience with Stripe, but I would not yet consider myself confident. I do need to implement subscriptions for TickerTab, so there is no choice but to learn Stripe. I think it will be useful for a lot of projects, so I—though daunted—will learn Stripe.

TypeScript

It's what the cool kids are doing.

Docker

I do not want to need Docker, but something tells me that it will show up, sometime or another. Might as well get ahead of the curve.

DEV Community: CK

Having trouble with PWA and S3?

Choosing an Open Source Headless CMS

What is a CMS?

What does it mean to be headless?

The webserver and the CMS are hosted separately.

W﻿hat are the cons?

W﻿hat are the pros?

How do I know which CMS to choose?

D﻿irectus

K﻿eystoneJS

N﻿etlifyCMS

H﻿ow to choose?

I created a 🔥blazingly🔥 fast blog template with Astro and NetlifyCMS

What is Astro Devblog?

A serverless (JAMstack) blog template intended to be deployed to Netlify which republishes articles to Medium and dev.to.

Why Astro?

Astro is the hot new kid on the block, with compelling features like zero JavaScript by default and the Islands architecture.

Arch Linux Installation Tutorial (Tested on T530)

Flash a USB

Boot into the installation media

Connect to the internet

Advanced: determine the boot mode

Optional: update the system clock

Partition the drive

Create a filesystem

Mount the partitions

Install essential packages

Fstab

Change root into the new system

Set the timezone

Choose locales

Hostname

Set the root password

Install useful programs

Install a boot loader

Exit and reboot

My Thoughts on SuperTokens

Use Gitforks.com to Compare Forks of a Repo

There is a better alternative for serverless caching

How to authorize requests for a private API behind a Netlify app

Method 1 (not that great)

Method 2 (not that great)

Method 3 (better—and can be free)

Method 4 (best, but paid)

The case for a CapRover Instance

How to deploy a NodeJS server with NGINX on a VPS

1. Prepare a VPS

2. Edit your NGINX files

3. Configure Redis

4. Install NodeJS (via `nvm)

5. Clone your repo

6. Start your server

7. Configure SSL

Other considerations

How to deploy a Redis instance

1. Create a VPS

2. SSH into the VPS

3. Install Redis

4. Update the configuration

5. Run Redis

Technologies I want to learn this summer

SQL

TypeScript

Having trouble with PWA

What are the cons?

What are the pros?

Directus

KeystoneJS

NetlifyCMS

How to choose?