DiTo97

CLAUDE.md: Field Notes on Getting a Language Model to Write Code You Will Not Rewrite

Index Terms. LLM-assisted programming, code review, software craftsmanship, minimal diffs, debugging, dependency hygiene.

I. Read Before You Write

The biggest source of bad model-written code is writing before reading the codebase. Read the files you are about to touch; read, not skim. Copy the patterns that already exist, and check the imports to see what the project actually depends on, so you do not reach for axios where everything is fetch. When you cannot find a pattern, ask instead of guessing.

II. Think Before You Code

Figure out what you are doing before you type. State your assumptions ("add authentication" is five different things, so name the one you picked) and name the tradeoffs. If something is genuinely confusing, stop and ask rather than filling the gap with plausible-looking code; that is exactly the code that passes a casual review and fails when it matters.

mmocny

// max-INP:
(()=>{let o=globalThis;return void 0===o.winp&&(o.winp=0,new PerformanceObserver(n=>{for(let e of n.getEntries()){if(!e.interactionId)continue;o.winp=Math.max(e.duration,o.winp);let r=o=>o<=200?"color: green":o<=500?"color: yellow":"color: red";console.log(`%c[Interaction: ${e.name.padEnd(12)}] %cDuration: %c${e.duration}`,"color: grey; font-family: Consolas,monospace","",r(e.duration))}}).observe({type:"event",durationThreshold:0,buffered:!0})),o.winp})();

// interactionCount
performance.interactionCount;

malchata

// Cribbed this from:
// https://web.dev/debug-web-vitals-in-the-field/#usage-with-the-web-vitals-javascript-library
export function getSelector(node, maxLen = 100) {
  let sel = '';

  try {
    while (node && node.nodeType !== 9) {
      const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
        (node.className && node.className.length) ?
        '.' + Array.from(node.classList.values()).join('.') : '');

pmeenan

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const host = request.headers.get('x-host');
  if(!host) {
    return new Response('x-host header missing', {status: 403});
  }

tkadlec

:root {
 --violation-color: red; /* used for clear issues */
 --warning-color: orange; /* used for potential issues we should look into */
}

/* IMAGES */

/*
 * Lazy-Loaded Images Check
 * ====

trmcnvn

export function sortObject(object) {
  Object.keys(object).reduce((prev, curr) => {
    if (object[curr] !== null && typeof object[curr] === 'object') {
      prev[curr] = sortObject(object[curr]);
      return prev;
    }
    prev[curr] = object[curr];
    return prev;
  }, {});
}

astoilkov

Async Operations with useReducer Hook

9 March, 2019

We were discussing with @erusev what we can do with async operation when using useReducer() in our application. Our app is simple and we don't want to use a state management library. All our requirements are satisfied with using one root useReducer(). The problem we are facing and don't know how to solve is async operations.

In a discussion with Dan Abramov he recommends Solution 3 but points out that things are fresh with hooks and there could be better ways of handling the problem.

Problem

DavidKuennen

(function (context, trackingId, options) {
    const history = context.history;
    const doc = document;
    const nav = navigator || {};
    const storage = localStorage;
    const encode = encodeURIComponent;
    const pushState = history.pushState;
    const typeException = 'exception';
    const generateId = () => Math.random().toString(36);
    const getId = () => {

radum

Articles

NOTICE: I moved most of this content that I no longer maintain within this gist over to its own repo here https://github.com/radum/performance-testing-framework

Performance API

// https://github.com/WICG/paint-timing
performance.getEntries();

jtrein

import React, { Component } from 'react';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch = (error, errorInfo) => catchFunc(error, errorInfo, this)