#performance code explainers

ruby

module SlowQueryLogger
  SLOW_QUERY_THRESHOLD_MS = 200.0
  IGNORED_PAYLOAD_NAMES = %w[SCHEMA TRANSACTION].freeze

Logging slow SQL queries in Rails

instrumentation logging pub-sub

Intermediate 7 steps

typescript

type LazyImageOptions = {
  rootMargin?: string;
  loadedClass?: string;
};

Lazy-loading images with IntersectionObserver

intersectionobserver lazy-loading performance

Intermediate 7 steps

javascript

import { useRef, useState, useCallback, useMemo } from 'react';
 
export function VirtualList({ items, rowHeight = 40, height = 600, overscan = 5, renderRow }) {
  const [scrollTop, setScrollTop] = useState(0);

How a virtualized list works in React

virtualization performance memoization

Intermediate 8 steps

javascript

const express = require('express');
const compression = require('compression');
const zlib = require('zlib');

Tuning Express response compression

compression middleware http

Intermediate 9 steps

javascript

import { useRef, useCallback, useEffect, useState } from "react";
 
function useThrottle(callback, delay) {
  const lastRun = useRef(0);

Building a throttle hook in React

throttling custom-hooks refs

Intermediate 8 steps

javascript

function initLazyLoad(root = document) {
  const images = root.querySelectorAll('img[data-src]');
 
  if (!('IntersectionObserver' in window)) {

How lazy image loading works

lazy-loading intersectionobserver progressive-enhancement

Intermediate 8 steps