paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

im4aLL

<?php
// Used in https://github.com/im4aLL/roolith-event

class Event {
    private static $events = [];

    public static function listen($name, $callback) {
        self::$events[$name][] = $callback;
    }

gvergnaud

Promises, under the hood

You all know that to create a new Promise you need to define it this way:

  new Promise((resolve, reject) => {
    ...
    resolve(someValue)
  })

You are passing a callback that defines the specific behavior of your promise.

maxivak

We want to upload file to a server with POST HTTP request. We will use curl functions.

// data fields for POST request
$fields = array("f1"=>"value1", "another_field2"=>"anothervalue");

// files to upload
$filenames = array("/tmp/1.jpg", "/tmp/2.png");

tkh44

import styled, { css } from 'emotion/react'
import { space, width, fontSize, color, responsiveStyle } from 'styled-system'


export const display = responsiveStyle('display')
export const flex = responsiveStyle('flex')
export const order = responsiveStyle('order')
const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
const direction = responsiveStyle('flexDirection', 'direction')
const align = responsiveStyle('alignItems', 'align')

sebmarkbage

let cache = new Map();
let pending = new Map();

function fetchTextSync(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  if (pending.has(url)) {
    throw pending.get(url);
  }

Artistan

#!/bin/sh

########################################################################################
# I do not need to use the ngrok subdomains...
# start ngrok for my local box (vagrant homestead) in th background
# get the cname from command line for the ngrok alias
# update my subdomain cname to point at new ngrok name 
# use it!!!
########################################################################################
# requires ngrok and jq installed.

slikts

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

• Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
• Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

janzikmund

/**
 * Postman Pre-Request script to append CSRF token in header for POST requests in Laravel
 * Sanctum authenticated SPA. Requires active environment with {{url}} variable defined
 * for main app domain.
 *
 * Postman Interceptor allows appending cookies from browser, but Laravel CSRF middleware
 * only validates CSRF in headers or in _token form field, not in cookies. Axios automatically
 * appends the CSRF from cookie to headers, but Postman cannot access intercepted cookies
 * and use them, so we have to do one pre-request to get the CSRF token, store it
 * in environment so it can be reused, and then append it to headers.

kyle-mccarthy

import type { GetState, PartialState, SetState, State } from "zustand";

const noop = (..._: unknown[]): void => {
  /* noop */
};

export type Setter<T extends State> = (
  s: Partial<T> | ((prev: T) => Partial<T>),
  replace?: boolean
) => void;