addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

ksimka

<?php

$a = [];
//$s = 123456;
$s = 's6tbdfgj222dJGk';
$rs = str_repeat("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", 10);

$numGen = function() {
    return rand(1, 9999999);
};

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

ibraheem4

Installing Postgres via Brew

Pre-Reqs

Brew Package Manager

In your command-line run the following commands:

1. brew doctor
2. brew update

Danziger

import React, { useEffect, useRef } from 'react';

/**
 * Use setInterval with Hooks in a declarative way.
 *
 * @see https://stackoverflow.com/a/59274004/3723993
 * @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
 */
export function useInterval(
  callback: React.EffectCallback,

rbuckton

Range Types (T[X:Y]) for TypeScript

A Range Type is a type that produces a new tuple or array type that derives from T by dropping the excess ordered elements of T outside of the range starting at offset X (inclusive) through offset Y (exclusive).

A Range Type is denoted using a : operator in what would otherwise be an Indexed Access Type:

type T = [1, 2, 3][0:2];

eldh

import * as React from "react";
import { useMousePosition } from "~/hooks/useMousePosition";

/** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */
export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) {
  const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {};
  const [mouseX, mouseY] = useMousePosition();
  const positions = { x, y, h, w, mouseX, mouseY };
  return (
    <div

b0gdanw

#!/bin/zsh
#Credit: Original idea and script disable.sh by pwnsdx https://gist.github.com/pwnsdx/d87b034c4c0210b988040ad2f85a68d3

#Disabling unwanted services on macOS 11 Big Sur (11) and macOS Monterey (12)
#Disabling SIP is required  ("csrutil disable" from Terminal in Recovery)
#Modifications are written in /private/var/db/com.apple.xpc.launchd/ disabled.plist and disabled.501.plist


# user
TODISABLE=()