Akryum

<script lang="ts">
const iframes = new Map<string, { iframe: HTMLIFrameElement, src: string }>()
</script>

<script lang="ts" setup>
import { useAttrs, ref, shallowRef, watchEffect, onMounted, onBeforeUnmount } from 'vue'
import { useElementBounding } from '@vueuse/core'

defineOptions({
  inheritAttrs: false,

robzlabz

Install Laravel + Svelte + Inertia + Vite Right Way

Install Inertia Composer dependency

composer require inertiajs/inertia-laravel

Setup Middleware

php artisan inertia:middleware

getify

In defense of blocks for local scopes (Part 2)

Some have leveled the criticism that "part 1" of this post is unnecessarily contriving a problem that doesn't really exist in "good code" -- if you really need to narrow a scope of some declarations in a function, then that function is too complex already and that bigger problem is what you need to fix.

Just to be extra clear: if a chunk of code is already reasonable to make a function, that's not the sort of code I'm talking about in either of these blog posts. If it's being called multiple times, or if it's completely independent and makes sense as its own logical chunk, make it a function. I'm talking about a different sort of code, a set of a few statements related to each other, that declare one or more variables, but which logically still belong inside another function. That's the context here.

OK, let's stop talking about this stuff abstractly.

A Real Example

getify

In defense of blocks for local scopes (Part 1)

---

[EDIT: I've added a part 2 to this blog post, to address some of the feedback that has come up: https://gist.github.com/getify/706e5e10822a298375da40f9cc1fa295]

---

Recently, this article on "The JavaScript Block Statement" came out, and it received some good discussion in a reddit thread. But the general reaction seems to be against this approach. That saddens me.

valorin

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Vite;
use Illuminate\Support\Str;

/**
 * Simple Content Security Policy middleware.

surma

const LOOKUP =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

export function encodeBase64(buffer) {
  const view = new Uint8Array(buffer);
  let out = [];
  for (let i = 0; i < view.length; i += 3) {
    const [b1, b2 = 0x10000, b3 = 0x10000] = view.subarray(i, i + 3);
    out.push(
      b1 >> 2,

jonlabelle

Change GitHub default branch from master to main

5 simple steps that I tested and used to make the change in under 1 minute.

1. Move the master branch to main

   git branch --move master main

sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

reinink

<template>
  <input type="text" :value="address" @input="$emit('update:address', $event.target.value)">
  <input type="text" :value="city" @input="$emit('update:city', $event.target.value)">
  <input type="text" :value="region" @input="$emit('update:region', $event.target.value)">
  <input type="text" :value="country" @input="$emit('update:country', $event.target.value)">
  <input type="text" :value="postal" @input="$emit('update:postal', $event.target.value)">
</template>

<script setup>
import { defineProps } from 'vue'

wanderview

self.addEventListener('fetch', evt => {
  // Fallback for subresource requests or in browsers that do not
  // support navigation preload.
  if (evt.request.mode !== "navigate" || !evt.preloadResponse)
    return;
 
  evt.respondWith(async _ => {
    // Try to get the navigation preload response.
    let r = await evt.preloadResponse;