DEV Community: Lawrence Chen

Fix Remix.run builds on Cloudflare Pages

Lawrence Chen — Wed, 26 Jan 2022 08:33:56 +0000

If you encounter this error when building Remix.run for Cloudflare pages (as of 1/26/22):

npm ERR! gyp ERR! cwd /opt/buildhome/repo/node_modules/xxhash-addon

set the python version to 3.7 (versions >=3.6.0 should work) via environment variables.

PYTHON_VERSION=3.7

thank you whoever you are:

Full logs for indexing:

00:18:35.013    Initializing build environment. This may take up to a few minutes to complete
00:21:05.922    Success: Finished initializing build environment
00:21:05.922    Cloning repository...
00:21:07.556    Success: Finished cloning repository files
00:21:07.687    Installing dependencies
00:21:07.690    Python version set to 2.7
00:21:08.974    Downloading and installing node v17.4.0...
00:21:09.134    Downloading https://nodejs.org/dist/v17.4.0/node-v17.4.0-linux-x64.tar.xz...
00:21:09.382    Computing checksum with sha256sum
00:21:09.517    Checksums matched!
00:21:12.688    Now using node v17.4.0 (npm v8.3.1)
00:21:12.765    Started restoring cached build plugins
00:21:12.768    Finished restoring cached build plugins
00:21:12.902    Attempting ruby version 2.7.1, read from environment
00:21:13.978    Using ruby version 2.7.1
00:21:14.236    Using PHP version 5.6
00:21:14.269    5.2 is already installed.
00:21:14.275    Using Swift version 5.2
00:21:14.276    Started restoring cached node modules
00:21:14.279    Finished restoring cached node modules
00:21:14.623    Installing NPM modules using NPM version 8.3.1
00:21:42.392    npm ERR! code 1
00:21:42.393    npm ERR! path /opt/buildhome/repo/node_modules/xxhash-addon
00:21:42.395    npm ERR! command failed
00:21:42.395    npm ERR! command sh -c node-gyp rebuild --ensure
00:21:42.396    npm ERR! gyp info it worked if it ends with ok
00:21:42.396    npm ERR! gyp info using node-gyp@8.4.1
00:21:42.396    npm ERR! gyp info using node@17.4.0 | linux | x64
00:21:42.396    npm ERR! gyp ERR! find Python 
00:21:42.396    npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
00:21:42.396    npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
00:21:42.397    npm ERR! gyp ERR! find Python checking if "python3" can be used
00:21:42.397    npm ERR! gyp ERR! find Python - executable path is "/usr/bin/python3"
00:21:42.397    npm ERR! gyp ERR! find Python - version is "3.5.2"
00:21:42.397    npm ERR! gyp ERR! find Python - version is 3.5.2 - should be >=3.6.0
00:21:42.397    npm ERR! gyp ERR! find Python - THIS VERSION OF PYTHON IS NOT SUPPORTED
00:21:42.397    npm ERR! gyp ERR! find Python checking if "python" can be used
00:21:42.397    npm ERR! gyp ERR! find Python - executable path is "/opt/buildhome/python2.7/bin/python"
00:21:42.398    npm ERR! gyp ERR! find Python - version is "2.7.12"
00:21:42.398    npm ERR! gyp ERR! find Python - version is 2.7.12 - should be >=3.6.0
00:21:42.398    npm ERR! gyp ERR! find Python - THIS VERSION OF PYTHON IS NOT SUPPORTED
00:21:42.398    npm ERR! gyp ERR! find Python 
00:21:42.398    npm ERR! gyp ERR! find Python **********************************************************
00:21:42.398    npm ERR! gyp ERR! find Python You need to install the latest version of Python.
00:21:42.399    npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
00:21:42.399    npm ERR! gyp ERR! find Python you can try one of the following options:
00:21:42.399    npm ERR! gyp ERR! find Python - Use the switch --python="/path/to/pythonexecutable"
00:21:42.399    npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)
00:21:42.399    npm ERR! gyp ERR! find Python - Set the environment variable PYTHON
00:21:42.399    npm ERR! gyp ERR! find Python - Set the npm configuration variable python:
00:21:42.399    npm ERR! gyp ERR! find Python   npm config set python "/path/to/pythonexecutable"
00:21:42.399    npm ERR! gyp ERR! find Python For more information consult the documentation at:
00:21:42.399    npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
00:21:42.399    npm ERR! gyp ERR! find Python **********************************************************
00:21:42.399    npm ERR! gyp ERR! find Python 
00:21:42.399    npm ERR! gyp ERR! configure error 
00:21:42.399    npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
00:21:42.399    npm ERR! gyp ERR! stack     at PythonFinder.fail (/opt/buildhome/.nvm/versions/node/v17.4.0/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:330:47)
00:21:42.399    npm ERR! gyp ERR! stack     at PythonFinder.runChecks (/opt/buildhome/.nvm/versions/node/v17.4.0/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:159:21)
00:21:42.399    npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (/opt/buildhome/.nvm/versions/node/v17.4.0/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:266:16)
00:21:42.399    npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (/opt/buildhome/.nvm/versions/node/v17.4.0/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:297:7)
00:21:42.399    npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:390:7)
00:21:42.399    npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
00:21:42.399    npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)
00:21:42.399    npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
00:21:42.399    npm ERR! gyp ERR! System Linux 5.11.0-1027-azure
00:21:42.399    npm ERR! gyp ERR! command "/opt/buildhome/.nvm/versions/node/v17.4.0/bin/node" "/opt/buildhome/.nvm/versions/node/v17.4.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--ensure"
00:21:42.399    npm ERR! gyp ERR! cwd /opt/buildhome/repo/node_modules/xxhash-addon
00:21:42.399    npm ERR! gyp ERR! node -v v17.4.0
00:21:42.399    npm ERR! gyp ERR! node-gyp -v v8.4.1
00:21:42.399    npm ERR! gyp ERR! not ok
00:21:42.402    
00:21:42.402    npm ERR! A complete log of this run can be found in:
00:21:42.402    npm ERR!     /opt/buildhome/.npm/_logs/2022-01-26T08_21_15_159Z-debug-0.log
00:21:42.429    Error during NPM install
00:21:42.430    Failed: build command exited with code: 1

Remix.run create resource route along with a UI route

Lawrence Chen — Wed, 12 Jan 2022 09:29:32 +0000

Some websites like Reddit expose a .json endpoint alongside each post. For example, the posts shown in https://www.reddit.com/r/rickroll/ are also exposed in https://www.reddit.com/r/rickroll.json.

Here's how we can do the same in Remix:

If $postId.tsx was our post's UI route, we can create a file called $postId[.json].ts with the following:

export { loader } from "./$postId";

Note that we escape [.json] due to Remix conventions

JavaScript Relative Time

Lawrence Chen — Mon, 05 Jul 2021 01:45:58 +0000

I've found that Day.js and Moment.js's relative time support to be buggy, especially when dealing with very recent timestamps.

Here's an implementation in TypeScript:

// much love https://stackoverflow.com/questions/6108819/javascript-timestamp-to-relative-time

const units = {
    year: 24 * 60 * 60 * 1000 * 365,
    month: (24 * 60 * 60 * 1000 * 365) / 12,
    day: 24 * 60 * 60 * 1000,
    hour: 60 * 60 * 1000,
    minute: 60 * 1000,
    second: 1000
};

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

export const getRelativeTime = (d1: Date, d2 = new Date()): string => {
    const elapsed = d1.getTime() - d2.getTime();

    // "Math.abs" accounts for both "past" & "future" scenarios
    for (const u in units) {
        if (Math.abs(elapsed) > units[u] || u == 'second') {
            return rtf.format(Math.round(elapsed / units[u]), u as Intl.RelativeTimeFormatUnit);
        }
    }
};

and raw JavaScript:

// much love https://stackoverflow.com/questions/6108819/javascript-timestamp-to-relative-time

const units = {
    year: 24 * 60 * 60 * 1000 * 365,
    month: (24 * 60 * 60 * 1000 * 365) / 12,
    day: 24 * 60 * 60 * 1000,
    hour: 60 * 60 * 1000,
    minute: 60 * 1000,
    second: 1000
};

const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });

export const getRelativeTime = (d1, d2 = new Date()) => {
    const elapsed = d1.getTime() - d2.getTime();

    // "Math.abs" accounts for both "past" & "future" scenarios
    for (const u in units) {
        if (Math.abs(elapsed) > units[u] || u == 'second') {
            return rtf.format(Math.round(elapsed / units[u]), u as Intl.RelativeTimeFormatUnit);
        }
    }
};

Credits

https://stackoverflow.com/questions/6108819/javascript-timestamp-to-relative-time

Remap Caps Lock to Escape or Control

Lawrence Chen — Fri, 11 Jun 2021 01:00:34 +0000

Emacs

Caps Lock to Control

hidutil property --set '{"UserKeyMapping":[{"HIDKeyboardModifierMappingSrc":0x700000039,"HIDKeyboardModifierMappingDst":0x7000000E0}]}'

Vim

Caps Lock to Escape

hidutil property --set '{"UserKeyMapping":[{"HIDKeyboardModifierMappingSrc":0x700000039,"HIDKeyboardModifierMappingDst":0x700000029}]}'

This seems to not affect external keyboards in my setup. If you know a fix, please drop a comment!

Reset

Caps Lock to Caps Lock

hidutil property --set '{"UserKeyMapping":[{"HIDKeyboardModifierMappingSrc":0x700000039,"HIDKeyboardModifierMappingDst":0x700000039}]}'

Learn More (Remap Other Keys)

https://developer.apple.com/library/archive/technotes/tn2450/_index.html

Credits: https://superuser.com/a/1405422

Monaco Editor + Svelte Kit

Lawrence Chen — Fri, 07 May 2021 04:44:36 +0000

Here's the gist:

<script lang="ts">
    import type monaco from 'monaco-editor';
    import { onMount } from 'svelte';
    import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
    import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
    import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
    import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
    import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

    let divEl: HTMLDivElement = null;
    let editor: monaco.editor.IStandaloneCodeEditor;
    let Monaco;

    onMount(async () => {
        // @ts-ignore
        self.MonacoEnvironment = {
            getWorker: function (_moduleId: any, label: string) {
                if (label === 'json') {
                    return new jsonWorker();
                }
                if (label === 'css' || label === 'scss' || label === 'less') {
                    return new cssWorker();
                }
                if (label === 'html' || label === 'handlebars' || label === 'razor') {
                    return new htmlWorker();
                }
                if (label === 'typescript' || label === 'javascript') {
                    return new tsWorker();
                }
                return new editorWorker();
            }
        };

        Monaco = await import('monaco-editor');
        editor = Monaco.editor.create(divEl, {
            value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
            language: 'javascript'
        });

        return () => {
            editor.dispose();
        };
    });
</script>

<div bind:this={divEl} class="h-screen" />

Key points

Don't do module.default as shown on the FAQ
With Vite, you don't need to configure workers with your bundler

Hello, world!

Lawrence Chen — Sat, 27 Feb 2021 02:24:54 +0000

Hello.