2f32cac | website

git clone https://git.pyrossh.dev/website

木 Personal website of pyrossh. Built with astrojs, shiki, vite.

2f32cac — pyrossh 2026-07-07T13:48:50+05:30

feat: add content/ directory and full deploy script with R2 sync

Files changed (5) hide show

content/eyecandy-golang-error-reporting.md +89 -0
content/gopibot-to-the-rescue.md +134 -0
content/react-powertools-swr.md +209 -0
package.json +1 -0
scripts/deploy-all.sh +23 -1

content/eyecandy-golang-error-reporting.md ADDED Viewed

@@ -0,0 +1,89 @@
+---
+title: Eyecandy golang error reporting
+description: Better error message logging in golang
+pubDate: 2016-09-17
+tags:
+  - golang
+  - error
+  - formatting
+published: true
+---
+We at playlyfe wanted to get an email report as soon as an error occurred on our production servers. Since golang does not have
+stack traces with its inbuilt error mechanism we had to find a quick and simple solution which wouldn’t require too much refactoring
+of our existing codebase. So this is how we went about accomplishing this task. First we decided to wrap our errors so that we can get the runtime stack whenever an error occurs.
+We first started using this library https://github.com/go-errors/errors
+but soon found out that it wasn’t exactly suited for our use case. So we created this minimalistic and easy approach to wrap all our
+existing errors. First we decided to wrap our errors so that we can get the runtime stack whenever an error occurs.
+```go
+package utils
+import (
+    "bytes"
+    "database/sql"
+    "runtime"
+)
+type WrappedError struct {
+    Err error
+    StackTrace string
+}
+func(e * WrappedError) Error() string {
+    return e.Err.Error()
+}
+func E(e error) error {
+    switch e.(type) {
+    case *WrappedError:
+        return e
+    case nil:
+        return nil
+    default:
+        stackTrace := make([]byte , 1 << 16)
+        runtime.Stack(stackTrace, false)
+        buffer := &bytes.Buffer{}
+        for _ , a := range stackTrace {
+            if a != 0 {
+                buffer.WriteByte(a)
+            }
+        }
+        return &WrappedError {
+            Err: e,
+            StackTrace: buffer.String(),
+        }
+    }
+}
+```
+But then just sending the error stack in plain format to our emails wasn’t going to be nice to read at all. We needed more
+information like context and session information and things like that. On top of that I also wanted to make our stack traces
+prettier so that it would easier to figure out where the error started from.
+So to parse the error stack trace I found this cool library which does that for and on top of that it also themes it very well
+https://github.com/maruel/panicparse
+But then it didn’t properly expose an API to do it properly and after a few dabblings here,
+https://github.com/maruel/panicparse/issues/8
+with the developer and +1’s we got a proper api which I could use.
+And now I haz got a prettier stack traces like this,
+![Terminal 1](@/assets/images/terminal1.png)
+So great I got ANSI coloring setup and the errors look great in our console but what about our
+mails. Of course this wasn’t going to work since emails primarily render text and HTML only, and
+ANSI color codes was going to make our messages a mess.
+So then I went about digging github for an ANSI terminal codes to HTML converter so that it would
+look exactly like this in my mail. And then I found this cool go library which does that,
+https://github.com/buildkite/terminal
+Now all emails require inline CSS or else they wouldn’t work so then I had to find out a way to do that too.
+And this was it,
+https://github.com/aymerick/douceur
+Finally after messing around with so many libraries I got around to getting it to work and this is how it looks in my email,
+![Email 1](@/assets/images/email1.png)

content/gopibot-to-the-rescue.md ADDED Viewed

@@ -0,0 +1,134 @@
+---
+title: Gopibot to the rescue
+description: A slackbot for deploying your applications (chatops)
+pubDate: 2017-04-19
+tags:
+  - nodejs
+  - slack
+  - bot
+  - chatops
+published: true
+---
+I was one of the developers who had access to our QA and Prod servers and the other person was the Head of Engineering and he is generally a busy guy.
+So whenever there is a change that needs to be deployed everyone comes to me and tells me to deploy their microservice/frontend to the QA and blatantly
+interrupts my awesome coding cycle.
+Alright then, I break off from my flow, ssh into the server and start running the deploy command. And all of you jsdev wannabes who have worked with react and webpack will know the horrors about deploying frontend code right. It takes forever so I have to wait there looking at the console along with the dev who wanted me to deploy it (lets call him @kokill for now). So @kokill and I patiently wait for the webpack build to finish. 1m , 2m, 3m and WTH 15m. And then its built and the new frontend is deployed to QA. YES! Now I can continue with my work. But wait then some other dev comes likes call him (@D-Ne0) and he asks to deploy something else and again the same process of ssh’ing the server and another wait. This got repetitive and irritating.
+Then I started searching for solutions to the problem and looked high and low and thought that CI/CD is the only thing that can solve this problem. But then I saw something new called ChatOps where developers have chatbots to talk to automate this manual work. Just like we have bots these days to help you out in your work like getting your laundry, grocery and making orders.
+So I decided to take a shot at this in my free time. And it seems it was simpler than I thought and decided to use Slack our primary team communication platform. We used it daily for everything and I thought why not have a specific channel just where the bot resides and people could talk to the bot.
+Since we are typically a nodejs shop I decided to find a way to send messages to a slack bot. And slack has this really great sdk for nodejs.
+https://github.com/slackapi/node-slack-sdk
+First I went and created the bot in my slack team settings. And then wrote a script which would allow it to read messages from the channel it was added.
+Here is the simple script,
+```js
+const RtmClient = require("@slack/client").RtmClient;
+const RTM_EVENTS = require("@slack/client").RTM_EVENTS;
+const CLIENT_EVENTS = require("@slack/client").CLIENT_EVENTS;
+const bot_token = process.env.SLACK_BOT_TOKEN;
+const rtm = new RtmClient(bot_token);
+const COMMANDS = {
+  web: "ssh -i qa.pem user@url docker pull image-name && docker rm -f container-id && docker run -d image-name",
+};
+let deploymentInProgress = false;
+let counter = 0;
+rtm.on(RTM_EVENTS.MESSAGE, (event) => {
+  console.log("Got event", event);
+  if (
+    (event.subtype === "message_changed" || event.subtype === "message_deleted") &&
+    event.text &&
+    event.text.indexOf("$slackBotId") > -1
+  ) {
+    return rtm.sendMessage(
+      "Please dont change the message and expect me to correct your past mistakes",
+      event.channel,
+    );
+  }
+  if (event.subtype) {
+    return;
+  }
+  if (event.type === "message" && event.text && event.text.indexOf("$slackBotId") > -1) {
+    if (deploymentInProgress === true) {
+      counter = counter + 1;
+      if (counter > 3) {
+        counter = 0;
+        return rtm.sendMessage(
+          "Stop bugging me noob or I'll tell to raise you bugs",
+          event.channel,
+        );
+      }
+      return rtm.sendMessage("I am already processing a deploy request please wait", event.channel);
+    }
+    var input = event.text.trim().replace("$slackBotId ", "");
+    console.log("Got input", input);
+    const arr = input.split(" ");
+    arr.forEach((word) => {
+      word = word.replace(/\s/g, "");
+    });
+    const currCommand = arr[0];
+    if (COMMANDS.indexOf(currCommand) > -1) {
+      rtm.sendMessage("Starting to deploy ${currCommand}", event.channel);
+      const ssh = spawn(COMMANDS[currCommand]);
+      deploymentInProgress = true;
+      ssh.stdout.on("data", (data) => {
+        rtm.sendMessage(data, event.channel);
+      });
+      ssh.stderr.on("data", (data) => {
+        rtm.sendMessage(data, event.channel);
+      });
+      ssh.on("close", (code) => {
+        deploymentInProgress = false;
+        if (code === 0) {
+          console.log("Deployed Successfully", currCommand);
+          rtm.sendMessage("Deployed Successfully " + currCommand, event.channel);
+        } else {
+          console.log("child process exited with code ", code);
+          rtm.sendMessage("child process exited with code " + code);
+        }
+      });
+      return;
+    } else {
+      counter = counter + 1;
+      if (counter > 3) {
+        counter = 0;
+        return rtm.sendMessage(
+          "Stop bugging me noob or I'll tell <@U30TXGLS1|gopi> to raise you bugs",
+          event.channel,
+        );
+      }
+      return rtm.sendMessage(
+        `command '${event.text} ' not found.You need to specify one of these commands [${COMMANDS.map(
+          (v, k) => k,
+        ).join(",")} ]`,
+        event.channel,
+      );
+    }
+  }
+});
+console.log("Starting deploybot");
+rtm.start();
+```
+So what the bot does is when someone mentions the bot with a command to run. It first checks if the command is defined in our COMMANDS map and then if
+it is, it executes the corresponding shell command for it on our QA server and then gives back progress/error/finished messages back to the channel so
+that everyone will be notified that someone had done a deployment. This is how it looks like,
+Anyways to just have a boring bot that just runs boring commands was kinda boring. I thought of spicing up the bot interaction by making it say weird
+things if you keep giving it invalid commands. Making it more of a life like bot.
+Initially the bot was called deploybot and had a rocket icon but then there was our QA/Bug creator/Hell Raiser/Injoker in our team so I thought creating
+a mini him would be better and give the bot a real person’s personality and it worked and people kind a started talking to bot some random stuff and
+all.
+![Gopibot 1](@/assets/images/gopibot.png)
+Further on we can maybe introduce natural language processing and deep learning to make the bot learn from our messages and not just take a single
+command. Like instead of me saying @gopibot cfm I can say @gopibot please deploy our cashflow server or please revert the deployment to the previous
+version and things like that.

content/react-powertools-swr.md ADDED Viewed

@@ -0,0 +1,209 @@
+---
+title: "React Powertools: SWR"
+description: A react library that makes it easier to fetch data
+pubDate: 2024-08-16
+tags:
+  - react
+  - frontend
+  - hooks
+  - swr
+  - fetch
+published: true
+---
+The **SWR** library provides hooks which help in facilitating fetching and revalidating data so that the UI will be always fast and reactive. It uses the stale-while-revalidate, a HTTP cache invalidation strategy, to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.
+You can install it using this command: `npm i swr`
+### useSWR
+This hook exposes few options to customise the fetching/revalidation logic,
+```tsx
+const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher, options);
+```
+**Parameters**
+- `key`: a unique key string for the request
+- `fetcher`: a Promise-returning function to fetch your data
+- `options`: an object of options for this SWR hook
+**Return values**
+- `data`: data for the given key resolved by `fetcher`
+- `error`: error thrown by `fetcher`
+- `isLoading`: if there's an ongoing request and no "loaded data" or state data
+- `isValidating`: if there's a revalidation request happening
+- `mutate(data?, options?)`: function to mutate the cached data
+> Before SWR
+```tsx
+import { useState, useEffect } from "react";
+const useUser = (id: string) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    fetch(`/users/${id}`)
+      .then((res) => res.json())
+      .then((data) => {
+        setUser(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  }, [id]);
+  return {
+    user,
+    loading,
+    error,
+  };
+};
+```
+> After SWR
+```tsx
+import useSWR from "swr";
+const fetcher = (...args) => fetch(...args).then((res) => res.json());
+const useUser = (id: string) => {
+  const { data, error, isLoading } = useSWR(`/users/${id}`, fetcher);
+  return {
+    user: data,
+    isLoading,
+    error: error,
+  };
+};
+```
+### Configuration
+You can configure a global fetcher function so that you don't need pass the fetcher on every hook call using the `SWRConfig` Provider at the root app level. The library uses a global cache to store and share data across all components, you can also customise this behaviour with the `provider` option.
+```tsx
+import { SWRConfig } from "swr";
+const fetcher = (...args) => fetch(...args).then((res) => res.json());
+function App() {
+  return (
+    <SWRConfig value={{ fetcher: fetcher, provider: () => new Map() }}>
+      <Page />
+    </SWRConfig>
+  );
+}
+```
+### Automatic Revalidation
+You can use the options parameter in the API to configure automatic revalidation of your components based on different criteria. This can be done at a global level using SWRConfig provider or at a local hook level using the options parameter.
+- `revalidateIfStale`: automatically revalidate even if there is stale data
+- `revalidateOnMount`: enable or disable automatic revalidation when component is mounted
+- `revalidateOnFocus`: automatically revalidate when window gets focused
+- `revalidateOnReconnect`: automatically revalidate when the browser regains a network connection
+- `refreshInterval`:  automatically revalidate every interval in milliseconds
+There are many more options apart from these.
+### Manual Revalidation
+There are 2 ways to trigger a revalidation request manually,
+**1.** You can use the **mutate** function returned by the **useSWR** hook to trigger a revalidation of the data
+```tsx
+import useSWR from "swr";
+const Profile = () => {
+  const { data, error, isLoading, mutate } = useSWR(`/users/1`);
+  if (error) return <div>failed to load</div>;
+  if (isLoading) return <div className="text">loading...</div>;
+  return (
+    <div>
+      <div>{JSON.stringify(data, null, 2)}</div>
+      <button onClick={() => mutate()}>Update User</button>
+    </div>
+  );
+};
+```
+This can be used to implement optimistic updates as well if you know what data needs to change and once the revalidation is complete the cache gets updated with new data from the server.
+```tsx
+mutate({ ...data, name: "John Doe" });
+```
+**2.** If you need to update the cache from another component which doesn't have access to the **useSWR** hook you can use the **mutate** function returned by the **useSWRConfig** to get access to the cache. Here you would need to provide the key to trigger a revalidation of the request.
+```tsx
+import { useSWRConfig } from "swr";
+// or import { mutate } from "swr"
+const UpdateButton = () => {
+  const { mutate } = useSWRConfig();
+  return (
+    <div>
+      <button onClick={() => mutate(`/users/1`)}>Update User</button>
+    </div>
+  );
+};
+```
+Here as well you can do optimistic updates similarly,
+```tsx
+mutate(`/users/1`, { ...data, name: "John Doe" });
+```
+### **useSWRMutation**
+This hook makes it easier to handle update requests and provides necessary state
+```tsx
+import useSWRMutation from "swr/mutation";
+async function updateUser(url, data) {
+  await fetch(url, {
+    method: "POST",
+    body: JSON.stringify(data),
+  });
+}
+function Profile() {
+  const { data, error, isMutating, trigger } = useSWRMutation(
+    "/api/user/update",
+    updateUser,
+    options,
+  );
+  return (
+    <button onClick={() => trigger({ name: "John Doe" })}>
+      {isMutating ? "Updating..." : "Update User"}
+    </button>
+  );
+}
+```
+**Parameters**
+- `key`: a unique key string for the request
+- `fetcher(key, { arg })`: an async function for remote mutation
+- `options`: an optional object to configure revalidation and optimistic updates
+**Returns**
+- `data`: data for the given key returned from the update request
+- `error`: error thrown by the request
+- `trigger(arg, options)`: a function to trigger a remote mutation
+- `reset`: a function to reset the state
+- `isMutating`: if there's an ongoing update request

package.json CHANGED Viewed

@@ -9,6 +9,7 @@
     "dev:cv": "wrangler dev --config packages/workers/cv/wrangler.jsonc --port 8783",
     "typecheck": "tsc --noEmit",
     "deploy:all": "bash scripts/deploy-all.sh",
+    "deploy": "bash scripts/deploy-all.sh",
     "deploy:worker": "# Usage: wrangler deploy --config packages/workers/<name>/wrangler.jsonc"
   },
   "dependencies": {

scripts/deploy-all.sh CHANGED Viewed

@@ -1,10 +1,32 @@
 #!/bin/bash
 set -euo pipefail
+echo "=== Step 1: Upload blog content to R2 ==="
+for file in content/*.md content/**/*.md 2>/dev/null; do
+  if [ -f "$file" ]; then
+    rclone copy "$file" r2:pyrossh-repos-prd/content/
+    echo "  Uploaded: $file"
+  fi
+done
+echo ""
+echo "=== Step 2: Upload assets to R2 ==="
+rclone sync assets/ r2:pyrossh-repos-prd/assets/ --progress
+echo "  Assets synced."
+echo ""
+echo "=== Step 3: Sync git repos to R2 ==="
+if [ -d repos ]; then
+  rclone sync -P repos r2:pyrossh-repos-prd
+  echo "  Repos synced."
+fi
+echo ""
+echo "=== Step 4: Deploy Workers ==="
 find packages/workers -name 'wrangler.jsonc' -not -path '*/dev-router/*' -not -path '*/server-error/*' | while read -r config; do
   name=$(basename "$(dirname "$config")")
   dir=$(dirname "$config")
-  echo "=== Deploying: $name ($config) ==="
+  echo "  Deploying: $name ($config)"
   wrangler deploy --config "$config"
   echo ""
 done