okikio

Below is a step-by-step guide (in plain English) for rebasing your feature branch on top of main. The code is purely demonstrative—treat it as a starting point if you want an automated workflow around Git operations.

Tip

There is an attached bash script I call gitru.sh (git rebase update). It automatically rebases your local feature branch (basically it updates your local branch with changes from the main branch). Only run it on separate feature branches avoid running it on the main branch.

---

1. Scientific Method-Inspired Breakdown

1.1 Design Requirements & Use Cases

okikio

Using TransformStream in place of traditional queue implementations is an interesting approach that leverages the stream API's natural queuing and backpressure features. Below is a breakdown of how you might implement each queue type using TransformStream, adhering to the constraint of using no more than 2 TransformStreams per queue, and addressing any limitations that arise.

1. Simple Queue (FIFO Queue)

• Implementation:
  • TransformStream 1: This stream simply passes data from the writable side to the readable side in FIFO order.
  • TransformStream 2: Not necessary in this case, as one TransformStream is sufficient to maintain the FIFO order.

const fifoQueue = new TransformStream(undefined, undefined, { highWaterMark: Infinity });

rachelnabors

• useMatcher identifies an animated element throughout addition and removal from the DOM, not unlike key in React —probably needs a better name!
• zombie elements are elements that will be removed after their exist animation plays. Implementation
• use:* is a custom directive that can attach multiple directives (effects, signals) to a single element after render, before addition to DOM implementation

okikio

// Based off of https://github.com/esbuild/esbuild.github.io/blob/main/src/try/fs.ts 
// GitHub Permalink: https://github.com/esbuild/esbuild.github.io/blob/d405aa5f06ef359430344ca7fcbbc9bc8acf620e/src/try/fs.ts

// This file contains a hack to get the "esbuild-wasm" package to run in the
// browser with file system support. Although there is no API for this, it
// can be made to work anyway by pretending that node's "fs" API is present.
import { decode, encode } from "./encode-decode";

const enum Kind {
  File,

ran-dall

# Use an official Python runtime as a parent image
FROM python:3.9-slim

# Install git
RUN apt-get update && \
    apt-get install -y git && \
    rm -rf /var/lib/apt/lists/*

# Set the working directory in the container
WORKDIR /usr/src/app

okikio

const isWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;

async function getHandleFromPath(path: string) {
  const pathParts = path.split('/').filter(part => part.length > 0);
  let currentHandle = await navigator.storage.getDirectory();

  for (const part of pathParts) {
    if (part === '..') {
      currentHandle = await currentHandle.getParent();
    } else {

jacob-ebey

import { html } from "html-tagged";

export default function ClientNavigation() {
  return html`
    <script type="module">
      if (typeof navigation !== "undefined") {
        let lastAbortController;
        navigation.addEventListener("navigate", (event) => {
          if (!event.canIntercept) return;

samselikoff

Remix's useFetcher doesn't return a Promise for any of its methods (like fetcher.submit()) because Remix doesn't want you to explicitly await anything so they can handle things like cancellation for you. Instead, they recommend adding a useEffect and performing whatever logic you need to after the fetcher is in a particular state.

I found using an effect to run some logic after a submission to be too indirect, and there seem to be plenty of cases where you want to submit a form and then perform some other work on the client (sometimes async, like requesting the user's permission for their location), and I'd rather just do that after a submission in the event handler rather than an effect.

So here's a proof of concept hook that wraps Remix's useFetcher and returns a version of submit that is a promise, and resolves with the data from the action:

function useFetcherWithPromise() {
  let resolveRef = useRef();
  let promiseRef = useRef();

joepie91

ES Modules are terrible, actually

This post was adapted from an earlier Twitter thread.

It's incredible how many collective developer hours have been wasted on pushing through the turd that is ES Modules (often mistakenly called "ES6 Modules"). Causing a big ecosystem divide and massive tooling support issues, for... well, no reason, really. There are no actual advantages to it. At all.

It looks shiny and new and some libraries use it in their documentation without any explanation, so people assume that it's the new thing that must be used. And then I end up having to explain to them why, unlike CommonJS, it doesn't actually work everywhere yet, and may never do so. For example, you can't import ESM modules from a CommonJS file! (Update: I've released a module that works around this issue.)

And then there's Rollup, which apparently requires ESM to be u

jonathantneal

/** Return a unique selector for a specific element. */
let getUniqueSelector = (/** @type {Element} */ element) => {
	/** Unique selector for this element */
	let selector = ''

	/** @type {Element} */
	let parent

	/** @type {number} */
	let nth