DEV Community: Pacharapol Withayasakpunt

Multiple page Vite on Github Pages with HTML5 History Mode

Pacharapol Withayasakpunt — Wed, 20 Apr 2022 08:10:16 +0000

Indeed, one of the way is simply pre-render (e.g. with vite-plugin-ssr).

Nonetheless, it is possible to enable fallback (without redirect settings, which doesn't exist in Github Pages), if you don't want to pre-render, and sacrifice JavaScript-ness yet. The way is, to clone dist/index.html to dist/sub/route/index.html. (SSG's also have multple **/index.html.)

import { existsSync, mkdirSync, copyFileSync } from 'fs'
import { resolve as pathResolve, join as pathJoin } from 'path'

function cloneIndexHtmlPlugin(routes: string[] = []): PluginOption {
  const name = 'CloneIndexHtmlPlugin'
  const outDir = 'dist' // config's `build.outDir`
  const src = pathJoin(outDir, 'index.html')

  return {
    name,
    closeBundle: () => {
      // routes.push(...)

      routes.map((p) => {
        const dir = pathResolve(outDir, p)
        if (!existsSync(dir)) {
          mkdirSync(dir, { recursive: true })
        }

        const dst = pathJoin(outDir, p, 'index.html')

        // It is possible to edit HTML here, too.
        copyFileSync(src, dst)
        console.log(`${name}: Copied ${src} to ${dst}`)
      })
    },
  }
}

And put the plugin in vite.config.ts

// https://vitejs.dev/config/
export default {
  base: `/${GITHUB_REPO_NAME}/`
  plugins: [cloneIndexHtmlPlugin()],
}

Integrating with Vue 3 and Vue Router 4

VueRouter makes navigating easier, without full page reload; however, it does need a little extra config - baseURL.

import { createRouter, createWebHistory } from 'vue-router'

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // Define your routes here
  ],
})

Route names can be glob dynamically with import.meta.glob.

import { createRouter, createWebHistory } from 'vue-router'

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    // Does not allow string templating - `${PAGE_DIR}/**/*${PAGE_EXT}` does not work.
    ...Object.entries(import.meta.glob('../pages/**/*.vue')).map(
      ([p, component]) => {
        const PAGE_DIR = '../pages'
        const PAGE_EXT = '.vue'
        const PAGE_INDEX = 'index'

        let path = p.substring(PAGE_DIR.length, p.length - PAGE_EXT.length)
        if (path.endsWith(PAGE_INDEX)) {
          path = path.substring(0, path.length - PAGE_INDEX.length - 1)
        }
        if (!path) {
          path = '/'
        }

        return {
          path,
          component,
        }
      },
    ),
  ],
})

cloneIndexHtmlPlugin should also glob - fast-glob is what import.meta.glob uses, so copy it.

import { sync as glob } from 'fast-glob'

// ...

      const PAGE_EXT = '.vue'
      const PAGE_INDEX = 'index'

      routes.push(
        ...glob(`**/*${PAGE_EXT}`, {
          cwd: 'src/pages',
        })
          .map((p) => {
            p = p.substring(0, p.length - PAGE_EXT.length)
            if (p.endsWith('/' + PAGE_INDEX)) {
              p = p.substring(0, p.length - PAGE_INDEX.length - 1)
            }

            return p
          })
          .filter((p) => p !== PAGE_INDEX),
      )

Why do I even need favicon to prevent server errors? And, why the default is .ico?

Pacharapol Withayasakpunt — Wed, 13 Oct 2021 02:02:58 +0000

Do I even need /favicon.ico for http://localhost or Electron?

Right now? I use 1px PNG (not ICO) at /f/favicon.png (not at /, but at /f/). I think it is at least better than using a a short string of data URI (where Fastify Helmet or Express Helmet won't allow).

pip install pillow
python -c 'from PIL import Image;Image.new("RGBA", (1,1), color=(0,0,0,0)).save("favicon.ico", sizes=[(1,1)])'

Do we need two version-locking files? (Pipfile = "*" vs pypoetry.toml vs venv + requirements.txt)

Pacharapol Withayasakpunt — Tue, 05 Oct 2021 05:29:47 +0000

Edit: I am also confused about .venv/bin/python's location - in-project $PROEJCT_ROOT/.venv/bin/python or global (e.g. ~/.pyenv/versions/$PROJECT_IDENTIFIER/.venv/bin/python)?

Pipenv's defaults

I feels odd to me that my Pipfile looks like this.

[[source]]
url = "https://pypi.org/simple"
verify_ssl = true
name = "pypi"

[packages]
fastapi = "*"
aiofiles = "*"
uvicorn = "*"
gunicorn = "*"
gtts = {git = "https://github.com/patarapolw/gTTS.git"}
wordfreq = {extras = ["cjk"], version = "*"}

[dev-packages]

[requires]
python_version = "3.9"

To say that, if you know lock files in other programming languages' package managers; this looks VERY OPINIONATED.

Of course, there is Pipfile.lock, but it doesn't look very readable to me, unlike package.json or go.mod (which, of course, have package.lock and go.sum to pair with).

Another problem is, Pipenv IS NOT VERY VERBOSE at all...

Personally, I also add export PIPENV_VENV_IN_PROJECT="enabled" to ~/.zshrc.

`python -m venv .venv`

This path typically creates only one version-locking - requirements.txt; and it can be readable, if not compiled directly from pip freeze >.

I have seen some projects with multiple requirements.txt (e.g. .prod.txt, .dev.txt); but I have seen NONE with requirements.lock

But of course, it is as easy as pip freeze > requirements.lock; even perhaps adding to git pre-commit hook.

cat << EOF > ~/.git/hooks/pre-commit
#!/usr/bin/env bash
source .venv/bin/activate
pip freeze > requirements.lock
EOF

chmod +x ~/.git/hooks/pre-commit

Personally, I don't really use this option much.

Poetry's opinionatedness

poetry add <PACKAGES> actually pin versioning into TWO lock files, one with exact, another with >=; but I distaste this.

$ poetry init
...
Would you like to define your main dependencies interactively? (yes/no) [yes] no
Would you like to define your development dependencies interactively? (yes/no) [yes] no
...

So, you wanted me to answer YES, huh?

Personally, I am add config,

poetry config set virtualenvs.in-project true.

semver syntax I learnt from JavaScript Node.js

So, in Node.js, we have something like this.

>=2.0.1
^2.0.1
~2.0.1
2.0.1
2.0
2

Not sure about these syntaxes in Python, and whether it is just requirements.txt (TXT file), setup.py (Python file), or whatever *.toml files.

Do we still need `setup.py`; if we are not publishing to PyPI or local repository?

I don't know the answer to this either...

But of course, it can help with py2app or py2exe; which I don't need when I already have PyInstaller.

A thought

Why can't we just go back to

cat << EOF > requirements.txt
fastapi
aiofiles
EOF

python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
pip freeze | grep -i "$(cat requirements.txt)" > requirements.txt
pip freeze > requirements.lock
python --version > .python-version

# Then, hand-edit requirements.txt

What is YOUR decision?

For me, even though I like Poetry, I don't like some of the defaults; but the general defaults of other options are even more insane.

How would you deviate from the default settings?

Customizable PDF viewer with self-built PDF.js

Pacharapol Withayasakpunt — Sun, 03 Oct 2021 06:53:20 +0000

At first glances, PDF viewer seems to be as easy as opening a PDF URL in an Iframe; however, not only uncustomizable, but also, if some browsers doesn't support PDF browsing, it could be a problem.

A solution to this would be Mozilla's PDF.js. However, the PDF viewer isn't prebuilt for you in pdf.js-dist, only some minimal JavaScript files.

Building PDF.js by yourself

By this way, it will also build the PDF viewer (which is normally used in Mozilla Firefox). You can also customize HTML, CSS and JavaScript.

git init
npm i gulp-cli
git submodule add https://github.com/mozilla/pdf.js.git
cd pdf.js
npm i

# Edit web/app_options.js (for default PDF); and `web/viewer.html or CSS files (for UI) to your liking

npx gulp generic
cp -r build/generic ../pdf.js-dist
cd -
npx http-server pdf.js-dist -o /web/viewer.html

I already built it for you

This is here. Just copy the /dist folder.

patarapolw / pdf.js-viewer

Example of how to build example viewer of Mozilla's PDF.js

My example project

This online Lilypond compiler / playground is made using this, using the endpoint /pdf.js/web/viewer.html?file=<FILEPATH>#pagemode=none. It's a quick project of mine to compile MIDI and WAV files, and share it.

`docker compose` (v2) vs `docker-compose` (v1) vs `podman-compose` - which one to choose?

Pacharapol Withayasakpunt — Thu, 30 Sep 2021 13:22:27 +0000

Latest Docker Compose (v2)

https://docs.docker.com/compose/cli-command/

Now, the command is no longer docker-compose (although there is compose-switch), but rather, a Docker plugin, docker compose.

For some reasons, it had to rebuild my Dockerfile image again, even though I have built (and tagged) it before.

I saw that there that are releases for Windows and macOS (darwin, including arm64) as well; and it is already installed by default on Windows and macOS.

Legacy Docker Compose (v1)

https://docs.docker.com/compose/install/

This one has absolutely my expected behavior. Nothing special. No surprise dangers.

podman-compose

This one uses podman, which is probably only available in Linux (and macOS), and requires podman.service user unit; so, probably cannot be started in Windows' WSL.

Goodies, other than can be rootless podman (i.e. no root privileges, nor usermod -aG docker $USER); is that it actually create a "pod" containing multiple containers.

So, what are unexpected behaviors I have found?

Cannot attach to virtual volumes, nor attach to non-existent folders (will not create a new folder)
podman-compose up $SERVICE_NAME does not work, unlike docker-compose
Ctrl+C does not destroy pod, nor "down", so podman-compose up >> Ctrl+C >> podman-compose up will give some friendly(?) errors
- In contrast, docker-compose up >> Ctrl+C >> docker-compose up throws no error; also noticeably, logs continue (just like Ctrl+X >> kill -CONT)

Conclusion

So, is Podman better than Docker, or is Docker itself getting better than alternatives?

Debugging in Rust

Pacharapol Withayasakpunt — Wed, 29 Sep 2021 05:03:32 +0000

How do you go for debugging in Rust, without proprietary software, like CLion or IntelliJ Ultimate?

What are some Linux distros you spent significant time on?

Pacharapol Withayasakpunt — Tue, 28 Sep 2021 01:41:47 +0000

Not counting distros you only tried off curiosity.

Only the distro you used long enough that you see real problems.

And what are the problems?

Noticeable differences between podman and docker

Pacharapol Withayasakpunt — Thu, 23 Sep 2021 08:31:29 +0000

Anyone used podman for a while should notice differences between podman and docker; especially rootless podman

Permission issues on folder mounting?
Subtle differences in command? (podman-compose build db doesn't work)
podman-compose down is required to kill pods.
VSCode Docker extension doesn't work properly.

All in all, is it even worthy to switch to podman? Is extra security worth it? I am also not sure if the concept of pod is useful.

Furthermore, Fedora Silverblue specifically uses podman. (Preinstalled with podman, and the system is immutable.)

VSCode word wrap for very very long base64 image datauri? (Generate no more than 5 lines.)

Pacharapol Withayasakpunt — Wed, 01 Sep 2021 07:29:09 +0000

Is this even possible? Limiting the markdown to enable internal base64 image datauri, and keeping sanity.

How do you calculate 3^3^3^3? (What algo / struct?)

Pacharapol Withayasakpunt — Mon, 16 Aug 2021 03:22:40 +0000

At first glance, it seems to be very straight forward. However, when you look at the sample calculation from Wolfram Alpha.

https://www.wolframalpha.com/input/?i=3%5E3%5E3%5E3

This breaks both long long (integer, 18-19 digits) and double (float / IEEE 754, up to e+308 digits, with 17 digits' precision).

However, I can cheat a little with Python, as it will automatically allocate more bytes for integer.

Still, 3^(7.625e+13) takes abnormally very long time... (3^3^3 = 7.625e+13).

class Int:
    MAX_LEN = 10

    def __init__(self, val: int) -> None:
        if isinstance(val, Int):
            self.val = val.val
        else:
            self.val = val

    def exp3(self):
        return Int(3 ** self.val)

    def tetrate3(self, n: int):
        first = Int(self)
        for _ in range(n - 1):
            first = first.exp3()

        return first

    def __repr__(self) -> str:
        s = str(self.val)

        if len(s) > self.MAX_LEN:
            h = int(self.MAX_LEN / 2)
            return f"{s[:h]}...{s[-h:]} ({s[0]}.{s[1:4]}e+{Int(len(s))})"

        return s

Does Google Docs really support non-English speakers? (Thai, specifically) And, any alternatives?

Pacharapol Withayasakpunt — Sun, 27 Jun 2021 10:25:17 +0000

Something like, long word breaking... no, much longer than German words. AFAIK, auto-hyphenation is missing for some reasons.

Something like, language specific fonts. Sometimes, there are also be Above and Under.

Please ELI5 what Parquet is for, and NOT for

Pacharapol Withayasakpunt — Mon, 14 Jun 2021 00:14:55 +0000

I am trying to understand how good is Apache Parquet for

Data storage format (when you DO NOT have a Hadoop; only on your local computer)
- How big is the size?
- How reliable is it?
Query-able format
- Do I have to index first? (Probably unique indices are not possible?)
- Speed?
- Resource usage?

As far as I understand, Parquet may not be good for frequent writes or updates; but is it good enough for a static database?

You can compare to the always popular SQLite, as a benchmark; disregarding SQLite features, such as foreign keys, unique indices, full text search and multiple tables.

BTW, I have seen SQLite file size goes to 700 MB for a few megabytes for final CSV data, and not sure if it is reliable as a storage anymore...