WebDev+ | Веб-разработка

Открой X.

Выполни этот JavaScript в консоли браузера:

s = document.createElement("style");
s.innerHTML = "*{font-family:comic sans ms!important}";
document.head.append(s);

Наслаждайся.

@WebDev_Plus

Если хотите, чтобы Claude нормально делал вам слайды, не используйте Claude Design.

Используйте Reveal.js. - https://github.com/hakimel/reveal.js

Пусть Claude генерирует презентации как обычные HTML + Markdown-файлы.

Это намного приятнее:

→ слайды лежат в коде
→ их легко редактировать
→ можно хранить в Git
→ можно версионировать
→ можно быстро менять структуру
→ можно деплоить как обычную веб-страницу

Вместо того чтобы возиться с визуальным редактором, вы просто описываете, какую презентацию хотите получить, а Claude собирает её как фронтенд-проект.

Для разработчиков это ощущается естественнее.

Слайды становятся не «файлом презентации», а частью нормального рабочего процесса.

@WebDev_Plus

#Laravel Tip

Автоматическое удаление записей из коробки 🪄

Иногда нужно автоматически удалять устаревшие записи из базы данных. Многие для этого пишут собственные Artisan-команды и настраивают cron-задачи.
В Laravel для таких случаев уже есть готовое решение — трейт Prunable.

Достаточно определить условие, какие записи считаются устаревшими:

use Illuminate\Database\Eloquent\Prunable;

class Flight extends Model
{
    use Prunable;

    public function prunable(): Builder
    {
        return static::where('created_at', '<=', now()->subMonth());
    }
}

После этого Laravel сможет автоматически находить и удалять подходящие записи через команду:

php artisan model:prune

Можно добавить её в планировщик задач и больше не думать об очистке старых данных.
Меньше кастомного кода. Меньше поддержки. Больше встроенных возможностей Laravel.

@WebDev_Plus

Блин... Этот визуальный инспектор для React просто шикарен 😍

React Trace от скромного разраба — это инспектор для разработки, который помогает находить React-компоненты, определять их исходные файлы и быстро разбираться в структуре приложения.

→ визуально инспектировать React-компоненты
→ мгновенно переходить к исходному коду компонента
→ понимать иерархию компонентов
→ передавать контекст компонента в AI-инструменты для программирования, такие как OpenCode

С ним отладка и навигация по крупным React-кодовым базам становятся намного проще :)
Исходник 🔗: http://github.com/buzinas/react-trace

@WebDev_Plus

⚡️Типобезопасная работа с формами множественного числа с помощью Intl.PluralRules и отображаемого типа (mapped type)

@WebDev_Plus

Можно сделать sticky-navbar, который меняется при скролле, на чистом CSS — без JS и библиотек анимаций.

header {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

@container scroll-state(stuck: top) {
  .nav-bar {
    max-width: 56rem;
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.92);
  }
}

Теперь браузер сам понимает, когда sticky-элемент «прилип» к верхней границе, и всё срабатывает через один container query.
Пока доступно только в Chromium-браузерах — без Firefox и Safari, что, конечно, обидно.

@WebDev_Plus

Подготовьте свой сайт к взаимодействию с ИИ-агентами с помощью Lighthouse → https://goo.gle/3ReK3JD
Если вы хотите, чтобы ИИ-агенты действительно корректно работали с вашим сайтом, новый экспериментальный аудит в Lighthouse позволяет проверить:

- Обнаруживаемость сайта для ИИ-агентов
- Интеграцию с WebMCP

Доступность для ИИ-систем
#GoogleIO

@WebDev_Plus

Наконец-то это происходит

npm планирует по умолчанию блокировать postinstall-скрипты в одном из будущих релизов.
В ближайшее время (через поэтапный rollout) пользователи, скорее всего, начнут сначала получать предупреждения.

Ссылка на implementation PR для первой фазы: https://github.com/npm/cli/pull/9360

Ссылка на RFC с описанием всех связанных изменений и трёхфазного плана rollout’а:
https://github.com/npm/rfcs/pull/868

Сейчас смержена только Phase 1 для npm v11.16, А вот настоящее блокирование по умолчанию планируется уже в npm v12 (Phase 2), и PR для этого ещё только готовится.

@WebDev_Plus

Сегодня узнал, что zsh умеет вызывать функцию для несуществующих команд. Поэтому если добавить это в .zshrc, можно буквально писать prompt’ы прямо в терминал:

command_not_found_handler() {
  codex "$*"
  return $?
}

Теперь любая неизвестная команда будет автоматически отправляться в Codex.
Это не очень хорошая идея.

@WebDev_Plus

#Laravel Tip

А вы знали, что Laravel понимает ваши связи между моделями и позволяет писать код намного чище 👇

@WebDev_Plus

Кто-то выложил в open source библиотеку со всеми тех-логотипами, которые вам когда-либо могли понадобиться — в виде чистых, оптимизированных SVG.

Называется developer-icons. Вот что в ней есть:
→ 200+ логотипов технологий (React, HTML, JS, Docker и другие) в виде полноценных компонентов
→ гибкая настройка размера, цвета и толщины stroke для каждой иконки
→ масштабирование под любое разрешение без потери качества
→ встроенные light/dark и wordmark-варианты
→ поддержка tree-shaking — в bundle попадут только импортированные иконки

Больше не нужно копаться в Figma-экспортах или вставлять случайные SVG, найденные на Stack Overflow.
npm i developer-icons — импортируете иконку, вставляете в JSX, и готово.
Полностью open source. Лицензия MIT. 2.1k звёзд.

@WebDev_Plus

Если хотите изучить Python, SQL или Machine Learning, у Kaggle есть бесплатные курсы с сертификатами.

Самое приятное — они сразу переходят к сути и подходят для обучения с нуля. Материал объясняется без предположения, что у вас уже есть какой-то опыт. Отличный вариант для старта.

Каждый курс занимает всего несколько часов. Благодаря этому можно быстро освоить новую тему без серьёзных временных затрат.

Найти их можно на сайте Kaggle в разделе Learn.

https://www.kaggle.com/

@WebDev_Plus

Они только что превратили Claude Code, Codex и Cursor в настоящего senior-разработчика.

Причём бесплатно.

Называется это Superpowers, и проект уже набрал 204 000 звёзд на GitHub.

Проблема агентных инструментов на достаточно крупных проектах всегда одна и та же:

- Они сразу лезут в код
- Отлаживают всё вслепую
- Игнорируют тесты
- А по мере роста проекта начинают галлюцинировать

Superpowers решает эту проблему, навязывая процесс работы senior-инженера:

→ Сначала брейншторминг, и только потом написание кода
→ Строгий TDD (Red → Green) без исключений — если теста нет, код удаляется
→ Параллельная работа через субагентов в изолированных Git worktree
→ Контекст остаётся под контролем даже во время многочасовой автономной работы

Теперь процесс выглядит не как:

Промпт → Код → Молиться

а как:

Brainstorm → Spec → Plan → TDD → Subagents → Review → Ship

Ни строчки кода до появления проходящих тестов.

Поддерживаются Claude Code, Codex, Cursor, Gemini CLI, OpenCode и Copilot CLI.

Полностью Open Source.

Лицензия MIT.

Теперь вам не нужно писать промпты вслепую.

Ваш агент работает как senior-разработчик.

@WebDev_Plus

🚨 Обязательно к внедрению 🚨

- Отключите автообновление расширений в VS Code, Cursor и других форках
(macOS: Cmd + Shift + P → Disable Auto Updating Extensions)

- Используйте статический анализатор zizmor для GitHub Actions, чтобы выявлять потенциальные проблемы безопасности

- Используйте actions-up для обновления GitHub Actions до актуальных версий с SHA-pinning

- Добавьте Socket Free Firewall или safe-chain при установке npm-пакетов, чтобы снизить риски атак через цепочку поставок (supply chain attacks)


@WebDev_Plus

Идеальная настройка лендинг-страницы


@WebDev_Plus

Вау, это реально DOM 🤭

(Смотрите, я использую Chrome DevTools, чтобы инспектировать DOM)

HTML превращается в <canvas> — это откроет новую эру веб-интерфейсов

ИСТОЧНИК

@WebDev_Plus

Изучите Clean Architecture, применённую к фронтенду

✓ Использует use case’ы, сервисы и репозитории
✓ Как организованы разные слои
✓ Без классов — всё на функциях
✓ Реализовано на TypeScript

https://dev.to/bespoyasov/clean-architecture-on-frontend-4311

@WebDev_Plus

Бро… хватит вручную писать скелетон лоадеры 🦴
Этот опенсорс веб-компонентс автоматически генерирует скелетоны лоадера из твоего реального UI с множеством настроек.

→ не нужны отдельные skeleton-компоненты
→ генерирует лоадеры из реальной DOM-структуры
→ настраиваемый shimmer-эффект и стили
→ работает с React, Vue, Svelte и другими

Твой реальный UI автоматически превращается в загрузочный skeleton :)

github.com/Aejkatappaja/phantom-ui

@WebDev_Plus

Рад, что наконец появился markdown-редактор для React, который реально ощущается как отполированный 🔥
MDXEditor — редактор в стиле Notion с поддержкой расширенного markdown, MDX, JSX, таблиц, блоков кода и многого другого.

→ современный опыт редактирования rich-text
→ высоко настраиваемая система плагинов
→ создан для React и MDX-workflow
→ плавный и удобный для разработчиков
Идеально подходит для создания документации, блогов, CMS-платформ и инструментов для написания текста :))

github.com/mdx-editor/editor

@WebDev_Plus

Жёсткая графическая библиотека для твоего веба 😘

Кастомизируемая, цепляющая и простая в использовании.
✓ компоненты “скопировал-вставил”
✓ React + Tailwind

→ rosencharts.com

@WebDev_Plus