DEV Community: Jacob Marshall

Product launch: Startrack

Jacob Marshall — Fri, 03 Jun 2022 14:58:52 +0000

Recently, I launched Startrack in a YouTube livestream. It's an easier way to star repos on GitHub. Commonly, you'll head to a repo with the intent to star. Perhaps you saw the website first, or have been using the project for a while but not starred. When you click the link to a repo, you are overwhelmed by a lot of useful information like files, the README, and commit history. This can cause you to loose that intent to star.

Startrack aims to solve this problem, and is a bit like twitter intents. With Startrack, that intent is preserved. When you go to a Startrack starring page, you are presented with some context about the repo, like a name, description and author, along with a button to star in one click.

I am able to achieve this great user experience, because the first time you attempt to star a repo, you are prompted to authenticate with GitHub. Startrack then receives an oAuth token, which it uses to authenticate with the GitHub API. As this token is persisted in a database, you can easily star repos with minimal friction.

Another key feature of Startrack is its ease of setup. All it takes to use Startrack with your repo is a URL in this format:

https://startrack.vercel.app/star/[OWNER]/[REPO]

That's it! There is no complex setup required. And Startrack also offers an easy and fast way for returning back to the page you were starring from. It uses the history stack to go back, allowing for the page to be served from the browser cache for fast load times. This results in minimal disruption to the user.

That's it for this post! If you enjoyed it and are able to financially support me, please buy me a coffee. Otherwise, a Twitter follow (@jqcat) or a YouTube subscribe (Jacob Marshall) would be nice. You can also star this repo or follow me on GitHub (@jacobhq). Have a great day.

How to set up k3s on a raspberry pi 4

Jacob Marshall — Mon, 23 Aug 2021 15:01:19 +0000

Provisioning your pi

You'll need to download and install raspberry pi imager from the official website. After you've done that, open it.

Then from the choose os menu, select Raspberry pi OS (other), and then select Raspberry pi OS lite (32 bit). Make sure you have your sd card inserted into your computer, then choose it from the storage menu.

Now, hit CTRL + SHIFT + X with the imager window focused.

Then configure ssh (use a password if you're new to ssh, or otherwise use a public key), wifi (if your not using ethernet), and a hostname. Now hit save, and then hit write to flash your sd card. You might need to authenticate, depending on your OS.

After you've flashed the sd card, remove it, then plug it back into your computer. Now, edit cmdline.txt, if your using linux, its on the boot partition of the drive. After the word rootwait, add a space, then add cgroup_memory=1 cgroup_enable=memory. Save the file. Now open config.txt and add arm_64bit=1 to the end of the file.

K3S install

Now for the moment of truth! Plug in your sd card, and boot up your pi. SSH in to your pi using the hostname you set, followed by .local. So pi@kube1.local for me. Type yes if prompted to accept the fingerprint. If you used a password, you'll be prompted to enter it, and if you used a public key, you'll be logged in automatically.

Now, will need to use legacy iptables for kubernetes to work properly. Run these commands:

sudo iptables -F sudo update-alternatives --set iptables /usr/sbin/iptables-legacy
sudo update-alternatives --set ip6tables /usr/sbin/ip6tables-legacy
sudo reboot

Your ssh session will close automatically, and you'll need to reconnect.

Now, you'll need to install k3s. First become root by running sudo su -, then install k3s by running curl -sfL https://get.k3s.io | sh -. After that's done, check for nodes, by running kubectl get node.

If you only have one device in your cluster, read on, and if not, you're all done.

On your master node (the node that you just set up), run this command to get your token: sudo cat /var/lib/rancher/k3s/server/node-token. Now on the pi you want to add to your cluster (the node), follow the provisioning steps, and edit the iptables. Now fill in this command: curl -sfL https://get.k3s.io | K3S_TOKEN="[the output of above command]" K3S_URL="https://[your master ip]:6443" K3S_NODE_NAME="[name of node]" sh -, and run it on the node. Repeat this for the number of nodes that you have.

Now, why not buy me a coffee, or follow me on twitter or github. Have a great day. :)

Create a production-ready storybook with tailwind

Jacob Marshall — Mon, 29 Mar 2021 20:34:02 +0000

Hello everyone, I recently experienced a lot of pain trying to use tailwind, nextjs and storybook for a project. It took a lot of work (and time) to finally get it to work in production, so I thought I'd share a few tips.

If you have used tailwind, you probably know it uses postcss, which allows for things like treeshaking. Now, I'd used tailwind loads, but I'd usually just followed the installation docs, and left it at that. Anyway, let me show you how I did it.

First, I ran yarn create next-app, to bootstrap a nextjs project. Then I installed tailwind by running yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest. I know nextjs already has postcss, but I install it anyway, to ensure it's up to date. I didn't use the pages directory for this project, so you can clean out all the files in there. You now have a nextjs app with tailwind.

It's a good moment to add your tailwind config, so run npx tailwindcss init -p to create a tailwind.config.js and a postcss.config.js. Now let's run npx sb init to create a storybook. Now run yarn add @storybook/addon-postcss and add

// .storybook/main.js
{
  name: '@storybook/addon-postcss',
  options: {
    postcssLoaderOptions: {
      implementation: require('postcss'),
    },
  },
},

to your .storybook/main.js file. The .storybook/main.js should now look something like this:

// .storybook/main.js
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
     name: '@storybook/addon-postcss',
     options: {
       postcssLoaderOptions: {
         implementation: require('postcss'),
       },
     },
   },
  ]
}

Now head to stories/assets and create a globals.css file with the following:

/* stories/assets/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Add any custom styles above the @tailwind rules. To import your css in dvelopment, add import '../stories/assets/globals.css' to your .storybook/preview.js file. Now, to import your treeshaken css in production, create a file called .storybook/preview-head.html and populate it with:

<!-- .storybook/preview-head.html !-->
<link rel="stylesheet" href="./app.css" />

Now install postcss-cli by running yarn add postcss-cli. Now replace the scripts section of your package.json file with this:

"scripts": {
    "dev": "next dev",
    "build": "yarn build-css && yarn build-storybook",
    "start": "next start",
    "storybook": "start-storybook -s ./stories/assets -p 6006",
    "build-css": "postcss ./stories/assets/globals.css -o ./stories/assets/app.css",
    "build-storybook": "build-storybook -s ./stories/assets"
  },

Congratulations! You now have a tailwindcss storybook. You can now use Chromatic or a static hosting company to deploy your app. If you use Vercel, I'll show you how to deploy.

Import your repo, and then ensure you have setup your commands like this:

Now you are actually done :). Thanks for reading, that was my first article on dev.to! Please follow me on github and let me know in the comments what thought!