Hugo Future Imperfect Slim

Tracey Jaquith 路 PoohBot Pictures

Technophile 路 Optimist 路 CyclistArchivist 路 Design 路 Video 路 TV 路 Nomad 路 Docker

tracey pooh

4 minutes read

things turning me on this week
鈽昬njoy with a hot cupa java/script
JavaScript is mental now with deno — forget node npm package.json node_modules and everything you growed up on. This 馃 changes everything!

About a year ago, an amazing coworker who shall remain anonymous ([COUGH] Drini), casually mentioned “Deno” in a team meeting (~12 of us). They mentioned Ryan Dahl, the creator of node, created this as The Next Thing. I’d never heard of it, checked it out, got excited and was… delflated seeing full urls in import statements (instead of relative urls) since that wasn’t compatible with browsers.

When a tech idea & premise is so good with a fatal flaw, I tend to revisit periodically…

3 months ago, to my amazement – all the main browsers were totally loading full urls, eg:

import $ from 'https://esm.sh/jquery'

“Cancel my appointments for the month!” — I dove in immediately to kick the tires on the back-end and see if fully replacing node for deno in my work (mostly backend) main repository for TV, audio & video, containing 30,000+ JS lines, might work.

In under 3 months, I migrated the entire repository to Deno.

Here’s a nice browser example:

https://av.prod.archive.org/demo/deno.htm

Pay special attention to the top and later import statements here.

You can load logical npm modules directly from the web (!) 馃槏

Omitting (just) the pie chart setup clutter (it’s a lot of JSON config for the data – you can see the full source here):

import $ from 'https://esm.archive.org/jquery@^3.0.0'
import dayjs from 'https://esm.archive.org/dayjs'
import * as d3v7 from 'https://esm.archive.org/d3'

import { log } from '../js/util/log.js'

window.d3 = { version: '7.0.0', ...d3v7 }

$('body').append(`
  <style>.card { width: 40%; margin: 3%; display: inline-block; vertical-align: top; }</style>
  <div id="x" class="card card-body bg-light">
    <h1>bootstrap hai whirld</h1>
    no real idea why it's working to \`import\` with urls starting with 'https://' now!
    <p> working in (at least): chrome, safari, firefox, safari iOS</p>
  </div>
  <div class="card card-body bg-light">
    <p>.. that doesnt work in \`node\` for example.</p>
    <p>.. but natively works in \`deno\`!</p>
  </div>
  <div class="card card-body bg-light">
    <h2>some dayjs stuff</h2>
    ${dayjs().format('dddd MMMM D, YYYY h:mma')}<br>
    ${dayjs().format('YYYY-MM-DD HH:mm:ss')}<br>
    ${dayjs().startOf('month').add(1, 'day').set('year', 2018)
    .format('YYYY-MM-DD HH:mm:ss')}<br>
  </div>
  <div class="card card-body bg-light">
    <h2>user privacy</h2>
    self-hosted
    <a href="https://esm.sh">esm.sh</a>
    -- at
    <a href="https://esm.archive.org">esm.archive.org</a>
    <pre>
import dayjs from 'https://esm.archive.org/dayjs'
import $ from 'https://esm.archive.org/jquery@^3.0.0'
    </pre>
  </div>

  <div id="pieChart"></div>
`)
$('#x h1').hide().fadeIn('slow')

async function dpie() {
  const d3pie = (await import('https://esm.archive.org/d3pie')).default

  const pie = new d3pie('pieChart', {
    ...
  })
}

void dpie()

Look how clean that is!

No need to npm install – no need for npm or node whatsoever.

You can load JS from npm packages transpiled-on-the-fly to import-able JS via https://www.skypack.dev/, https://esm.sh (we host one of these on our archive.org site for user privacy), and more.

It’s hard to fully articulate how weightless it feels to develop multiple repos, all without any kind of npm install or setup – and just load JS files directly into the browser or backend.

You can now make websites, blogs, and more entirely free, committed to and hosted at https://github.com or https://gitlab.com – no backend needed.

Here’s a fun example of charting Live Music concerts stored at https://archive.org that I live coded for Aaron Swartz Day 2021 where everything is hosted free at github:

band recordings per year site

band recordings per year source

I’m shook!

(and won’t go back)

鉂わ笍 馃

[postscript]

BTW, it took a couple months to migrate, not because migrating node => deno is particularly involved or long.

The conversion took awhile because:

  • major delay due to needing to find a minimal porting setup for code lint, test, and coverage. Ultimately, though deno lint is good (and blazing fast) — at this point — eslint is still better. I also didn’t want to change my expectations based ES Modules mocha test files too much. My next Teco Tuesday post will be about a nice testing & coverage setup.
  • I decided it was time to move all synchronous/blocking network and shell-out calls to async i/o
  • I decided not to use any of the available node-compatible layer – and instead switch everything to native deno.

(There’s only 2 files presently using a single node-compatible emulation readdir() call, since I already had performant complex async i/o doing parallel processing with it, running live 24x7, that I didn’t want to destabilize, eg:

import { readdir } from 'https://deno.land/std/node/fs/promises.ts'

Say something

Comments

Nothing yet.

Recent posts

See more

Categories

Tags

#spottheshuttle 1940s 1st-person 3d accident aids-lifecycle airplane animals appeltart apple-pie apple-watch architecture arkit art ascii-art asia augmented-reality baking bali bay-area biking birthday cafe-racer camaro camera-video cars cat-pee cat-psychology cats coding college colorspaces computer-vision cornell crictl css dark-mode decaf deinterlace desert design diy docker documentary ducting emacs endeavour family ffmpeg food games geek gitlab golden-gate-bridge google-cardboard gravel-bike green-magic-man h.264 hack highway-1 home https hugo hyperlapse internet-archive ios iphone javascript k3s kubernetes landscapes linux lisp luke-battling-darth mac macosx mashup metal montclair motion-jpeg motorcycle mplayer nasa new-bay-bridge news ninja oakland partioning php php-htm-mode politics protest rancher recording remaster remix remodel shuttle small-town star-wars swift technical time-lapse time-machine timing-belt-adjustment top-end-rebuild tracey traefik training-ride vacation valve-job video virtual-reality vlog vscode weekend-mechanic work x264 xcode yuvj420p zx6

About

tracey is a nonstop dance party. so you dont have to. dont ask me about k8s. thanks for dropping by today. you look nice.