jakub-g

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

ilhamgusti

server {
         listen 80;
         listen [::]:80;
 
         # Log files for Debugging
         access_log /var/log/nginx/laravel-access.log;
         error_log /var/log/nginx/laravel-error.log;
 
         # Webroot Directory for Laravel project
         root /var/www/example.com/public;

aperture147

package main

import (
	"bytes"
	"io/ioutil"
	"log"
	"os"
	"os/exec"
)

kyleshevlin

// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:

function useBool(initialState = false) {
  const [state, setState] = React.useState(initialState)
  
  // Instead of individual React.useCallbacks gathered into an object
  // Let's memoize the whole object. Then, we can destructure the
  // methods we need in our consuming component.

gilbitron

<?php
# app/Http/Controllers/CaddyController.php

namespace App\Http\Controllers;

use App\Store;
use Illuminate\Http\Request;

class CaddyController extends Controller
{

ilhamgusti

import { useState } from "react";

function getInputOnChange(setValue) {
  return (val) => {
    if (!val) {
      setValue(val);
    } else if (typeof val === "function") {
      setValue(val);
    } else if (typeof val === "object" && "nativeEvent" in val) {
      const { currentTarget } = val;

ilhamgusti

/**
 * 
 * @param o Object to mutate
 * @param ks array of keys, or string of keys
 * @param v value to assign
 * @param sep custom separator if keys is string. ex: ks:"INIxxADALAHxxKEY", sep is: "xx"
 */
function mutableSet(o, ks, v, sep = '.') {
	ks.split && (ks=ks.split(sep));
	let i=0, l=ks.length, t=o, x, k;

ilhamgusti

  export function parseHotkey(hotkey) {
    const keys = hotkey
      .toLowerCase()
      .split('+')
      .map((part) => part.trim());
  
    const modifiers = {
      alt: keys.includes('alt'),
      ctrl: keys.includes('ctrl'),