jamiebuilds

Bump all npm outdated dependencies

npm install $(npm outdated --json | jq -r 'to_entries | map("\(.key)@^\(.value.latest)") | join(" ")')
npm run typecheck

jamiebuilds

Trailing .!await

Status

This is not yet an ECMAScript Proposal.

Authors

• Jamie Kyle (github, twitter)

jamiebuilds

OpenAPI TypeScript Generator

First we start off with a very generic module for executing OpenAPI operations:

export interface ApiRequest {
  path: string;
  method: string;
  params?: Record<string, string>;
  queryParams?: Record<string, string>;

jamiebuilds

#!/usr/bin/env node
const fs = require("fs/promises")
const globby = require("globby")
const makeDir = require("make-dir")
const path = require("path")
const svgo = require("svgo")

const REPO_ROOT = path.join(__dirname, "..")

async function main() {

jamiebuilds

<picture size-hint="100% 550px">
  <source src="/images/[email protected]"  width="640"  height="550"  resolution="1x"/>
  <source src="/images/[email protected]"  width="1280" height="1100" resolution="2x"/>
  <source src="/images/[email protected]"  width="768"  height="550"  resolution="1x"/>
  <source src="/images/[email protected]"  width="1536" height="1100" resolution="2x"/>
  <source src="/images/[email protected]" width="1024" height="550"  resolution="1x"/>
  <source src="/images/[email protected]" width="2048" height="1100" resolution="2x"/>
  <source src="/images/[email protected]" width="1280" height="550"  resolution="1x"/>
  <source src="/images/[email protected]" width="2560" height="1100" resolution="2x"/>
  <source src="/images/[email protected]" width="1536" height="550"  resolution="1x"/>

jamiebuilds

Remix Conventions Proposals

I'm splitting these off into separate changes that could be made to Remix that I think would make it more flexible and provide more value.

.route. naming

Remix (any many other tools right now) contains what I'll call "magic exports":

jamiebuilds

Idea: Flat file system for file-based routing

Personally I've never liked how tools like Remix or NextJS have mapped a nested file system to routes. Simple things like "I want to put this component in its own file" become annoying tasks.

I've always been a fan of "flatter" file systems, my files often look like this:

/App/

jamiebuilds

function t(){let t=new Set;return{listen:e=>(t.add(e),()=>{t.delete(e)}),emit(){t.forEach((t=>t()))}}}function e(){return Math.random().toString(36).substring(2,8)}function n(t,e,n){return Math.min(Math.max(t,e),n)}function r(t,e){return(t.startsWith(e)?"":e)+t}function a({pathname:t,search:e,hash:n}){return{pathname:r(t,"/"),search:r(e,"?"),hash:r(n,"#")}}function s({pathname:t,search:e,hash:n}){return t+("?"===e?"":e)+("#"===n?"":n)}function h(t){return s(a(t))}function u(t){let[e,n=""]=t.split("#"),[r,s=""]=e.split("?");return a({pathname:r,search:s,hash:n})}function i(t){return s(u(t.substring(1)))}function o(t){if("string"==typeof t)return t;{let{pathname:e="",search:n="",hash:r=""}=t;return h({pathname:e,search:n,hash:r})}}function l(t){return{location(){return e=t.path(),n=t.state(),r=t.key(),{...u(e),state:n,key:r};var e,n,r},push(e,n){let r=o(e);t.push(r,n)},replace(e,n){let r=o(e);t.push(r,n)},go(e){t.go(e)},back(){t.go(-1)},forward(){t.go(1)},listen:e=>t.listen(e)}}function p(n){let r=n.history,a=t

jamiebuilds

function capitalize(locale, string) {
  let segmenter = new Intl.Segmenter(locale, { granularity: "grapheme" })
  let result = ""
  
  for (let item of segmenter.segment(string)) {
    if (item.index === 0) {
      result += item.segment.toLocaleUpperCase(locale)
    } else {
      result += item.segment
    }

jamiebuilds

Hard to type symbols (on non-US keyboards)

I asked on twitter which symbols are hardest to type on non-US keyboards.

I didn't get a ton of responses, but I think it was clear which ones were most problematic.

char	count	visual	notes
&	4	####
^	10	##########	Swedish: Dead Key, German: Typing vowels after becomes â