/dev/log — Заметки с рабочего стола программиста

// последние заметки

Свежие записи

все посты

01

JavaScript

11.12.24 — 8 мин чтения

О тихом насилии неявных преобразований

JavaScript позволит сложить [] с {} — и ещё скажет спасибо. Полевой справочник по граблям.

читать эссе →

02

Компиляторы

10.28.24 — 14 мин чтения

Лексер своими руками в воскресный вечер

Забудьте про регэкспы. Забудьте про генераторы. Двести строк switch — и вы поймёте что-то новое о каждом языке, которым когда-либо пользовались.

читать эссе →

03

Обработка ошибок

10.14.24 — 6 мин чтения

Почему я убрал все try/catch из своего кода

Типы Result, каналы ошибок и любопытное спокойствие, когда всё падает громко — хотя бы в разработке.

читать эссе →

// сниппет недели

useTypewriter() — хук, который оживляет первый экран этой страницы.

Мигающее приветствие наверху страницы — не CSS-анимация, а настоящий React-хук. Печатает, ждёт, стирает, повторяет. Нажмите «копировать» и вставьте в свой проект.

→ ноль зависимостей
→ ~30 строк, полная типизация
→ безопасная очистка при размонтировании

React TypeScript Хуки

useTypewriter.ts

// Самоочищающийся хук печатной машинки. Без зависимостей, ~30 строк.
import { useState, useEffect } from 'react';

export function useTypewriter(
  words: string[],
  speed = 80,
  pause = 1800,
) {
  const [text, setText] = useState('');
  const [i, setI] = useState(0);
  const [del, setDel] = useState(false);

  useEffect(() => {
    const word = words[i % words.length];
    const delay = del ? speed / 2 : speed;

    const t = setTimeout(() => {
      setText(del
        ? word.slice(0, text.length - 1)
        : word.slice(0, text.length + 1));
    }, delay);

    if (!del && text === word) {
      const p = setTimeout(() => setDel(true), pause);
      return () => { clearTimeout(t); clearTimeout(p); };
    }
    if (del && text === '') {
      setDel(false);
      setI(i + 1);
    }
    return () => clearTimeout(t);
  }, [text, del, i, words, speed, pause]);

  return text;
}

usage.tsx

function Hero() {
  const greeting = useTypewriter([
    'hello, traveler.',
    'you found /dev/log.',
    'console.log(love)',
  ]);

  return <h1>{greeting}</h1>;
}