DEV Community: anasrin

How I Keep My Browser Organized and Clean

anasrin — Wed, 08 Nov 2023 12:16:32 +0000

TL;DR

Use custom user data directory for chromium based browser or profile for firefox, simple script to launch it, and don't forget to close unused tab.

User Data Directory

Chromium

The user data directory contains profile data such as history, bookmarks, and cookies, as well as other per-installation local state¹.

Firefox

What information is stored in my profile? Bookmarks, Downloads, Browsing History, Passwords, Cookies, Extensions, et cetera².

Custom User Data Directory

Using custom user data directory allow me to focus and separate my workflow like for personal where all email and social media related, work where I use for work related, and development where I do webdev stuff.

To use custom user data directly, first you need to create new directory, and start browser with user data directory to new directory path.

chromium-browser --user-data-dir=./dir
firefox --new-instance --profile ./dir

To differentiate each browser I use different themes or colors.

Pros

At least prevent cookie stealer³.
Manage extension, no extension allowed for personal and work.

Cons

Can not copy user data directly to other machine, use sync, export, and import feature (so far I just tested with chrome, feel free to correct me).
Each user data start around ~200MB and grow as cache being stored, but it was worth it.

Shell Script

You can create custom shortcut, but I use simple shell script with fzf to launch browser with custom argument.

#!/usr/bin/sh

RESULT=$(fzf --delimiter " " --with-nth 1 -- "$@" < <(
  echo "Firefox:Development firefox --new-instance --start-debugger-server 6222 --profile \"$HOME/secret/path/ff/development/\""
  echo "Chrome:Development google-chrome-stable --remote-debugging-port=9222 --user-data-dir=\"$HOME/secret/path/c/development/\""
  echo "Chrome:Personal google-chrome-stable --user-data-dir=\"$HOME/secret/path/c/personal/\""
  echo "Chrome:Work google-chrome-stable --user-data-dir=\"$HOME/secret/path/c/work/\""
))

if [ "$RESULT" != "" ]; then
  COMMAND=$(echo $RESULT | sed 's/[^ ]* //')
  eval $COMMAND &>/dev/null &
fi

Isometric Projection

anasrin — Sun, 29 Oct 2023 03:31:33 +0000

TL;DR

This blog post about isometric projection math and code.

From 2D

SR45⁰

Rotate $45°=π445\degree = \frac{\pi}{4}$ and scale vertical direction with $\approx tan(30\degree) = tan(\frac{\pi}{6}) = \frac{\sqrt 3}{3}$ .

Preview

Math

\begin{aligned} a &= \pi/4\\ s &= tan(\pi/6)\\ f(x,y) &= \begin{bmatrix} x \cos(a) - y \sin(a)\\ (x \sin(a) + y \cos(a)) s \end{bmatrix} \end{aligned}

Code

const ANGLE = Math.PI / 4;
const SCALE = Math.tan(Math.PI / 6);

function sr45(x: number, y: number): [number, number] {
        return [
                x * Math.cos(ANGLE) - y * Math.sin(ANGLE),
                (x * Math.sin(ANGLE) + y * Math.cos(ANGLE)) * SCALE,
        ];
}

SSR30⁰

Scale vertical direction with $\approx \cos(30\degree) = \cos(\frac{\pi}{6}) = \frac{\sqrt 3}{2}$ , Skew horizontal direction $±30°\pm30\degree$ , Rotate $±30°\pm30\degree$ .

Preview

Math

\begin{aligned} s &= \cos(\pi/6)\\ M_{scale}(x,y) &= \begin{bmatrix} 1 & 0\\ 0 & s \end{bmatrix} \begin{bmatrix} x\\ y \end{bmatrix}\\ &= \begin{bmatrix} x\\ y s \end{bmatrix}\\ M_{skew}(x,y, \theta) &= \begin{bmatrix} 1 & \tan(\theta)\\ 0 & 1 \end{bmatrix} \begin{bmatrix} x\\ y \end{bmatrix}\\ &= \begin{bmatrix} x + y \tan(\theta)\\ y \end{bmatrix}\\ M_{rotate}(x,y,\theta) & = \begin{bmatrix} \cos(\theta) & -\sin(\theta) \\ \sin(\theta) & \cos(\theta) \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} \\ & = \begin{bmatrix} x \cos(\theta) - y \sin(\theta) \\ x \sin(\theta) + y \cos(\theta) \end{bmatrix} \end{aligned}

Code

const ANGLE = Math.PI / 6;
const SCALE = Math.cos(ANGLE);

function scale(x: number, y: number): [number, number] {
        return [x, y * SCALE];
}

function skew(x: number, y: number, angle: number): [number, number] {
        return [x + y * Math.tan(angle), y];
}

function rotate(x: number, y: number, angle: number): [number, number] {
        return [
                x * Math.cos(angle) - y * Math.sin(angle),
                x * Math.sin(angle) + y * Math.cos(angle),
        ];
}

From 3D

Projection

You can directly project 3D point to 2D point and swap the up axis easily.

Preview

Math

\begin{aligned} a &= \pi/6\\ P_{y}(x,y,z) &= \begin{bmatrix} (x - z) \cos(a)\\ (x + z) \sin(a) + y \end{bmatrix}\\ P_{z}(x,y,z) &= \begin{bmatrix} (x - y) \cos(a)\\ (x + y) \sin(a) + z \end{bmatrix} \end{aligned}

Code

const ANGLE = Math.PI / 6;

function upY(x: number, y: number, z: number): [number, number] {
        return [(x - z) * Math.cos(ANGLE), (x + z) * Math.sin(ANGLE) + y];
}

function upZ(x: number, y: number, z: number): [number, number] {
        return [(x - y) * Math.cos(ANGLE), (x + y) * Math.sin(ANGLE) + z];
}

References

Seeding Database With Drizzle ORM

anasrin — Sun, 24 Sep 2023 09:52:03 +0000

Database

This post assume using PostgreSQL for database, check orm.drizzle.team/docs/overview for more information how to connnect to your database.

Setup

Dependencies

npm i drizzle-orm pg dotenv
npm i -D drizzle-kit @types/pg esbuild-register @faker-js/faker

Environment Variables

# .env.development
DATABASE_URL=postgres://user:pass@127.0.0.1:5432/db

Drizzle Config

// drizzle.config.ts
import type { Config } from "drizzle-kit";
import * as dotenv from "dotenv";
dotenv.config({ path: "./.env.development" });

if (!("DATABASE_URL" in process.env))
        throw new Error("DATABASE_URL not found on .env.development");

export default {
        schema: "./src/db/schema.ts",
        out: "./src/db/migrations",
        driver: "pg",
        dbCredentials: {
                connectionString: process.env.DATABASE_URL,
        },
        strict: true,
} satisfies Config;

Schema

// src/db/schema.ts
import { pgTable, serial, text, varchar } from "drizzle-orm/pg-core";

export const users = pgTable("users", {
        id: serial("id").primaryKey(),
        username: text("username"),
        email: varchar("email", { length: 256 }),
});

Scripts

// package.json
{
        "scripts": {
                "drizzle:generate": "drizzle-kit generate:pg",
                "drizzle:push": "drizzle-kit push:pg",
                "drizzle:seed": "node --loader esbuild-register/loader -r esbuild-register ./src/db/seed.ts"
        }
}

Migrations & Push

npm run drizzle:generate
npm run drizzle:push

Seed

// src/db/seed.ts
import { drizzle } from "drizzle-orm/node-postgres";
import { Pool } from "pg";
import { users } from "./schema.ts";
import { faker } from "@faker-js/faker";
import * as dotenv from "dotenv";
dotenv.config({ path: "./.env.development" });

if (!("DATABASE_URL" in process.env))
        throw new Error("DATABASE_URL not found on .env.development");

const main = async () => {
        const client = new Pool({
                connectionString: process.env.DATABASE_URL,
        });
        const db = drizzle(client);
        const data: (typeof users.$inferInsert)[] = [];

        for (let i = 0; i < 20; i++) {
                data.push({
                        username: faker.internet.userName(),
                        email: faker.internet.email(),
                });
        }

        console.log("Seed start");
        await db.insert(users).values(data);
        console.log("Seed done");
};

main();

npm run drizzle:seed

Android Phone as Microphone on Linux Using Local Network

anasrin — Sun, 03 Sep 2023 12:21:12 +0000

TLDR

Using Mumble for simple chat server and change output as input, and bash script from github.com/siddhpant/broo for automation setup.

Tested on Arch Linux using PipeWire, Firefox, Chromium, and Audacity.

Why ?

Android phone nowaday has good microphone built-in.

Requirements

Android

gitlab.com/quite/mumla (F-Droid) - GUI client.

Linux

mumble - GUI client.
mumble-server - CLI server.
avahi - avahi-daemon.
iproute2

Arch Linux command:



sudo pacman -S mumble mumble-server avahi iproute2

Installation

Copied from github.com/siddhpant/broo#installation



git clone https://github.com/siddhpant/broo.git
cd broo
chmod +x broo setup_broo
./setup_broo

Then follow the on-screen instructions.

Run

Linux

Copied from github.com/siddhpant/broo#run



broo
# Do you want to start Broo, or close it? (s/c):

Press s to start Broo, or c to stop it.
Use the mic by choosing Monitor of Broo as your input source / mic in applications.
The script will reside in ~/.local/bin, so you can run Broo from anywhere.
You can use -h or --help for help.

Android

Open Mumla
Connect to local IP

Go: Build binary for Android

anasrin — Sun, 30 Jul 2023 22:12:12 +0000

Go 1.20.6 and Ubuntu 20.04.6 was used in this post.

Android NDK

Download Android NDK and unzip. By the time I write this post I use android-ndk-r25c-linux.zip.

Command

Change CC and CXX to android-ndk-r25c/toolchains/llvm/prebuilt/linux-x86_64/bin and you can choose clang base on your target architecture and android API, and also add CGO_ENABLED=1. Example target aarch64 and android28:



CC="/android-ndk-r25c/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android28-clang" CXX="/android-ndk-r25c/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android28-clang++" GOOS=android GOARCH=arm64 CGO_ENABLED=1 go build

Result

Here the result, now we can run using app like Termux:

Go: Using fork module

anasrin — Sat, 15 Jul 2023 07:29:27 +0000

Why ?

When you are using a Go module and encounter a bug, you may try to fix it by forking the repository and sending a pull request. However, the merge or release tag might not be immediately available, and you still need to use the module.

Here is how you can use the forked module: After forking the repository and committing the bug fix, you can run the following command:

go mod edit -replace github.com/someuser/repo=github.com/yourusername/repo@branch

This command will add the following code to your go.mod file:

replace github.com/someuser/repo => github.com/yourusername/repo branch

Now, you just need to run the following command to download the module:

go mod download

If you take a look at your go.mod file, you will see that the branch has been changed to tag-(time commit)-(hash commit).

replace github.com/someuser/repo => github.com/yourusername/repo v0.0.0-(time commit)-(hash commit)

Whenever the pull request has been merged, you can feel free to remove the replace statement in the go.mod file and update the module.

References

https://www.jvt.me/posts/2022/07/07/go-mod-fork/

Convert Font Using FontForge

anasrin — Sun, 18 Jun 2023 15:34:10 +0000

Requirement

FontForge was installed and can be access in terminal.

Simple command to convert font or just to regenerate font.

fontforge -lang=ff -c 'Open($1); Generate($2); Close();' in.otf out.ttf

Or using absolute path.

fontforge -lang=ff -c 'Open($1); Generate($2); Close();' "$PWD/in.otf" "$PWD/out.ttf"

Netinstall MikroTik on Linux

anasrin — Fri, 31 Mar 2023 12:02:31 +0000

Background

I have RB941-2nD-TC (hAP-Lite2) and it seem I misconfigured, so I need to reset configuration using netinstall technique.

Requirements

RouterOS base on your router architecture (in my case is SMIPS).
Netinstall (CLI Linux).
Plug out router from powerline.

Download all requirements files from https://mikrotik.com/download, and select RouterOS version (in my case is RouterOS v6).

Setup

Files

Extract all files to single folder, so we can work with the files easily.

Disable Internet Interface

Disable all internet interface such as WiFi, and only leaving with Ethernet.

IP Static

Using ip command.

sudo ip addr add 192.168.88.2/24 dev <interface>; sudo ip link set dev <interface> up

Using ifconfig command.

sudo ifconfig <interface> 192.168.88.2/24 up

Where <interface> is your ethernet interface name, you can print list ethernet interface using netstat -i, something like eth* or enp0s* is your interface.

IP Gateway

Using route command.

sudo route add default gw 192.168.88.1 <interface>

Check IP

Using route command to check if we success to setup IP.

route -n

It will print something like this.

Kernel IP routing table
Destination     Gateway         Genmask          Flags  Metric  Ref  Use  Iface
0.0.0.0         192.168.88.1    0.0.0.0          UG     0       0      0  enp0s25
192.168.88.0    0.0.0.0         255.255.255.0    U      0       0      0  enp0s25

Netinstall

Run netinstall with sudo.

sudo ./netinstall -r -a 192.168.88.1 <routeros>

Plug ethernet cable from PC to router.
Press reset button on router.
Plug router to powerline.

Result

My netinstall result.

Known Issues

### Only Show PXE client

Disable all interface except ethernet.

### FAILED TO REPLY

Make sure you set IP gateway.

### Using server IP: 0.0.0.0

Make sure you plug out router from powerline before you run netinstall.

References

https://blog.webiptek.com/2021/01/tutorial-netinstall-mikrotik-di-linux.html

Inject 360º metadata to video using python

anasrin — Mon, 27 Feb 2023 09:40:12 +0000

Notes

Only work on equirectangular¹ video.

git clone https://github.com/google/spatial-media spatial-media
cd spatial-media
python spatialmedia --inject <input file> <output file>

https://en.wikipedia.org/wiki/360_video_projection ↩

Simple 2-joint inverse kinematic with isosceles triangle

anasrin — Sun, 12 Feb 2023 11:03:05 +0000

Math Formula

Formula to get height of isosceles triangle from one side a and base b, you can use it to find the elbow position.

\sqrt{a^2-\frac{b^2}{4}}

TypeScript version.

function getHeight(a: number, b: number){
  return Math.sqrt((a ** 2) - ((b ** 2) / 4));
}

Application

Let's say you have shoulder p1, hand p2, and a is half length of your arm. You want to find where the elbow position is.

a=10b=∣(p2−p1)∣c^=p2−p1bd=c^h(a,b)k=p1+c^b2+[d1cos⁡(90°)−d2sin⁡(90°)d1sin⁡(90°)+d2cos⁡(90°)] \begin{aligned} a &= 10\\ b &= |(\bold{p_2} - \bold{p_1})|\\ \bold{\hat{c}} &= \frac{\bold{p_2} - \bold{p_1}}{b}\\ \bold{d} &= \bold{\hat{c}}h(a,b)\\ \bold{k} &= \bold{p_1} + \bold{\hat{c}}\frac{b}{2} + \begin{bmatrix} d_1 \cos(90\degree) - d_2 \sin(90\degree) \\ d_1 \sin(90\degree) + d_2 \cos(90\degree) \end{bmatrix} \end{aligned}

TypeScript version (vector library using vecti).

import { Vector } from "vecti";

const p1 = new Vector(10, 10);
const p2 = new Vector(150, 150);
const a = 100;
const b = p2.subtract(p1).length();
const c = p2.subtract(p1).normalize();
const d = c.multiply(getHeight(a, b));
const k = p1.add(c.multiply(b / 2)).add(d.rotateByDegrees(90)); // because SVG and Canvas using top to bottom you can use -90, you can also use this to switch direction

Demo

Convert variable font to static font using Python

anasrin — Sat, 11 Feb 2023 16:39:14 +0000

fonttools

A library to manipulate font files from Python¹.

Install

pip install fonttools

Convert Font

fonttools varLib.mutator ./font.ttf wght=400 wdth=85

Documentation: https://fonttools.readthedocs.io/en/latest/varLib/mutator.html#module-fontTools.varLib.mutator

https://github.com/fonttools/fonttools. ↩

Contentlayer: Optimize getStaticProps on Next.js

anasrin — Thu, 09 Feb 2023 13:46:37 +0000

TL:DR

Remove unnecessary data that doesn't render on getStaticProps.

Why?

When you pass Contentlayer data to getStaticProps on Next.js, by default will include the raw markdown, which is redundant and bad for load speed.

import { allPosts, Post } from 'contentlayer/generated';

export async function getStaticProps() {
  const posts: Post[] = allPosts;
  return {
    props: {
      posts,
    }
  };
}

HTML result.

<script id="__NEXT_DATA__" type="application/json">
  {
    "props": {
      "pageProps": {
        "posts": [
          {
            "title": "Change me!",
            "date": "2022-03-11T00:00:00.000Z",
            "body": {
              "raw": "\nWhen you change a source file, Contentlayer automatically updates the content cache, which prompts Next.js to reload the content on screen.\n",
              "html": "<p>When you change a source file, Contentlayer automatically updates the content cache, which prompts Next.js to reload the content on screen.</p>"
            },
            "_id": "change-me.md",
            "_raw": {
              "sourceFilePath": "change-me.md",
              "sourceFileName": "change-me.md",
              "sourceFileDir": ".",
              "contentType": "markdown",
              "flattenedPath": "change-me"
            },
            "type": "Post",
            "url": "/posts/change-me"
          },
          {
            "title": "Click me!",
            "date": "2022-02-28T00:00:00.000Z",
            "body": {
              "raw": "\nBlog posts have their own pages. The content source is a markdown file, parsed to HTML by Contentlayer.\n",
              "html": "<p>Blog posts have their own pages. The content source is a markdown file, parsed to HTML by Contentlayer.</p>"
            },
            "_id": "click-me.md",
            "_raw": {
              "sourceFilePath": "click-me.md",
              "sourceFileName": "click-me.md",
              "sourceFileDir": ".",
              "contentType": "markdown",
              "flattenedPath": "click-me"
            },
            "type": "Post",
            "url": "/posts/click-me"
          },
          {
            "title": "What is Contentlayer?",
            "date": "2022-02-22T00:00:00.000Z",
            "body": {
              "raw": "\n**Contentlayer makes working with content easy.** It is a content preprocessor that validates and transforms your content into type-safe JSON you can easily import into your application.\n",
              "html": "<p><strong>Contentlayer makes working with content easy.</strong> It is a content preprocessor that validates and transforms your content into type-safe JSON you can easily import into your application.</p>"
            },
            "_id": "what-is-contentlayer.md",
            "_raw": {
              "sourceFilePath": "what-is-contentlayer.md",
              "sourceFileName": "what-is-contentlayer.md",
              "sourceFileDir": ".",
              "contentType": "markdown",
              "flattenedPath": "what-is-contentlayer"
            },
            "type": "Post",
            "url": "/posts/what-is-contentlayer"
          }
        ]
      },
      "__N_SSG": true
    },
    "page": "/",
    "query": {},
    "buildId": "lJqgQzHmHoKqCJDQ-Nldm",
    "isFallback": false,
    "gsp": true,
    "scriptLoader": []
  }
</script>

Optimizing

Clone data¹ and remove unnecessary things.

import { allPosts, Post } from 'contentlayer/generated';

export async function getStaticProps() {
  const posts: Post[] = allPosts.map((post) => {
    const copy = structuredClone(post);
    copy.body.raw = "";
    copy._raw.sourceFilePath = "";
    copy._raw.sourceFileName = "";
    copy._raw.sourceFileDir = "";
    copy._raw.flattenedPath = "";
    return copy;
  });
  return {
    props: {
      posts,
    }
  };
}

Why Clone?

Contentlayer use single source of truth JSON, modifying data might causing race condition when you need one data on two place or more.

HTML result.

<script id="__NEXT_DATA__" type="application/json">
  {
    "props": {
      "pageProps": {
        "posts": [
          {
            "title": "Change me!",
            "date": "2022-03-11T00:00:00.000Z",
            "body": {
              "raw": "",
              "html": "<p>When you change a source file, Contentlayer automatically updates the content cache, which prompts Next.js to reload the content on screen.</p>"
            },
            "_id": "change-me.md",
            "_raw": {
              "sourceFilePath": "",
              "sourceFileName": "",
              "sourceFileDir": "",
              "contentType": "markdown",
              "flattenedPath": ""
            },
            "type": "Post",
            "url": "/posts/change-me"
          },
          {
            "title": "Click me!",
            "date": "2022-02-28T00:00:00.000Z",
            "body": {
              "raw": "",
              "html": "<p>Blog posts have their own pages. The content source is a markdown file, parsed to HTML by Contentlayer.</p>"
            },
            "_id": "click-me.md",
            "_raw": {
              "sourceFilePath": "",
              "sourceFileName": "",
              "sourceFileDir": "",
              "contentType": "markdown",
              "flattenedPath": ""
            },
            "type": "Post",
            "url": "/posts/click-me"
          },
          {
            "title": "What is Contentlayer?",
            "date": "2022-02-22T00:00:00.000Z",
            "body": {
              "raw": "",
              "html": "<p><strong>Contentlayer makes working with content easy.</strong> It is a content preprocessor that validates and transforms your content into type-safe JSON you can easily import into your application.</p>"
            },
            "_id": "what-is-contentlayer.md",
            "_raw": {
              "sourceFilePath": "",
              "sourceFileName": "",
              "sourceFileDir": "",
              "contentType": "markdown",
              "flattenedPath": ""
            },
            "type": "Post",
            "url": "/posts/what-is-contentlayer"
          }
        ]
      },
      "__N_SSG": true
    },
    "page": "/",
    "query": {},
    "buildId": "toHJpUjQDJpnE6IPRFO4s",
    "isFallback": false,
    "gsp": true,
    "scriptLoader": []
  }
</script>

structuredClone() - Web APIs | MDN. ↩