Только что вышла версия 1.4.0 расширения Laravel для VS Code, и в ней подъехала очень приятная штука:

теперь artisan:make можно запускать прямо из Command Palette.

Меньше переключений контекста, быстрее навигация и генерация — просто вызываешь палитру и создаёшь нужный класс/модель/контроллер на месте.

@WebDev_Plus

JavaScript Proxy сильно выручает, когда нужно ловить обновления стейта.

// Building a reactive store with Proxy
const createReactiveStore = (data, onChange) => {
  return new Proxy(data, {
    set(target, key, value) {
      const oldValue = target[key];
      target[key] = value;
      onChange(key, value, oldValue);
      return true;
    },
  });
};

// Usage
const state = createReactiveStore(
  { count: 0, status: 'idle', isOnline: false },
  (key, newVal, oldVal) => {
    console.log(`🔁 ${key}: ${oldVal} -> ${newVal}`);

    // You can handle business logic or UI updates here
  }
);

state.count = 5;          // 🔁 count: 0 -> 5
state.status = 'loading'; // 🔁 status: idle -> loading
state.isOnline = true;    // 🔁 isOnline: false -> true
state.status = 'error';   // 🔁 status: loading -> error
state.count++;            // 🔁 count: 5 -> 6

@WebDev_Plus

Невозможно распарсить HTML регулярками.

Из этого родился самый известный пост на StackOverflow.

Регулярные выражения это грамматика третьего типа по Хомскому. Идеально для линейных паттернов, но без способности считать.

HTML это грамматика второго типа. Другими словами, там есть вложенность. Чтобы сопоставить закрывающий div, нужно знать сколько открывающих div было до этого.

Поэтому идея соблазнительная, но технически регексы не способны корректно парсить HTML. Ты начнешь хитрить и все равно наломаешь дров.

Но вам действительно стоит прочитать оригинал поста, он очень смешной и на данный момент является известной частью истории Интернета:

https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags

@WebDev_Plus

Система управления SSL-сертификатами с поддержкой multi-DNS и REST API

https://github.com/fabriziosalmi/certmate

@WebDev_Plus

Chrome DevTools теперь умеет тормозить сеть на уровне конкретных запросов.

Этого давно хотели. Теперь можно эмулировать медленные сетевые условия не для всей страницы целиком, а для отдельных запросов.

Это удобно для проверки как приложение ведет себя если, скажем, отваливается или долго грузится конкретный ресурс — картинка, скрипт или API вызов.

@WebDev_Plus

Вам сложно создавать дизайны для ваших веб-сайтов или приложений?
Google запустил Stitch, который генерирует пользовательский интерфейс с помощью искусственного интеллекта.
Он бесплатный, а результат впечатляет

@WebDev_Plus

Почему новички выбирают React вместо Angular?


@WebDev_Plus

Забавный факт про JavaScript: если передать строку с числом в конструктор Date, получится вполне безумный результат

new Date("0") дает Jan 1, 2000
new Date("1") дает Jan 1, 2001 (+1 год, ок...)
new Date("2") дает Feb 1, 2001 (+1 месяц, ??????)

@WebDev_Plus

Типобезопасные переходы между состояниями с корректным автодополнением

// Type-safe state transitions

type IdleState = {
  status: "idle";
  connect: () => ConnectedState;
};

type ConnectedState = {
  status: "connected";
  send: (data: string) => ConnectedState;
  disconnect: () => IdleState;
};

function createApi(): IdleState {
  return {
    status: "idle",
    connect() {
      const id = `${Date.now()}`;
      // establish connection
      return {
        status: "connected",
        send(data) {
          // send data
          console.log(`${data} (${id})`);
          return this;
        },
        disconnect() {
          // close connection
          return createApi();
        },
      };
    },
  };
}

// Usage
const api = createApi();

api.connect().send("Hello world!").disconnect();
// ✅ Works!

api.send("Send without connect");
// ❌ TypeScript Error: Property 'send' does not exist

@WebDev_Plus

«Есть ли тип для настройки промежуточного ПО/прокси в Next.js?»

Да

@WebDev_Plus

Классный браузерный ASCII-арт редактор

Позволяет рисовать и генерировать ASCII-арт прямо в браузере. По сути, это для кастомных баннеров в README, шапок для терминала, вывода CLI или хакерских визуалок для твоих проектов :)

https://files.littlebird.com.au/ascii-sketch.html

@WebDev_Plus

Этот анализатор сайтов дает тебе прям рентген-зрение для любого веба: кидаешь URL и за секунды видишь, что там происходит под капотом.

Это полностью опенсорсный тул, который собирает в одном месте техданные, инфру и базовую инфу по безопасности :)

@WebDev_Plus

Быстрое напоминание про React: useId() недооценивают.

Можно совместить useId(…) + атрибут form={…}, и тогда форма будет сабмититься кнопкой, которая находится вообще вне тега <form>.

И не нужно городить всю эту жонглёрку с useEffect() или useRef(), которую обычно приходится делать.

@WebDev_Plus

Архитектура кодовой базы карт по URL-адресу GitHub

https://github.com/braedonsaunders/codeflow

@WebDev_Plus

Если ты работаешь с React и Next.js, тебе нужен этот репозиторий!

10 лет знаний про оптимизации и best practices упакованы в скилл для AI-агентов.

40+ правил, отсортированных по влиянию
Срезать bundle, избегать waterfalls, избегать лишних rerender’ов...

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices

@WebDev_Plus

Chrome DevTools теперь поддерживает троттлинг отдельных сетевых запросов!

Люди просили это годами. Теперь DevTools позволяет симулировать медленную сеть для конкретных запросов, а не для всей страницы целиком.

Это помогает тестировать, как веб-приложение ведёт себя и переживает проблемы, когда конкретные ресурсы (например, картинки, скрипты или API-вызовы) грузятся медленно.

@WebDev_Plus

Справочник бесплатных публичных API для разработчиков

Совместимы с любыми языками программирования.

Доступно 1500 → http://publicapis.io

@WebDev_Plus

Эта система grid-layout для React: Она позволяет собирать перетаскиваемые, ресайзабельные и адаптивные сетки в React. Типа дашбордов, админок, аналитических страниц или page builder’ов, где пользователь сам двигает и меняет размер блоков.

Ты один раз описываешь сетку, а дальше библиотека сама разруливает drag, resize и брейкпоинты. Идеально, когда хочется интерактивный лэйаут без написания всей этой логики руками :)

Попробовать

@WebDev_Plus