WebDev+ | Веб-разработка
8.33K subscribers
504 photos
241 videos
10 files
699 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.


👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале.

Реклама, erid: 2W5zFGrysSZ ИП Галактионов Тихон Витальевич, ИНН 771618975809
This media is not supported in your browser
VIEW IN TELEGRAM
Сегодня узнал, что zsh умеет вызывать функцию для несуществующих команд. Поэтому если добавить это в .zshrc, можно буквально писать prompt’ы прямо в терминал:

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


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

@WebDev_Plus
👍1😁1🤡1
Наконец-то это происходит

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

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

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

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Можно сделать 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
⚡️Типобезопасная работа с формами множественного числа с помощью Intl.PluralRules и отображаемого типа (mapped type)

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Блин... Этот визуальный инспектор для React просто шикарен 😍

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

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1🤔1
#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
Please open Telegram to view this post
VIEW IN TELEGRAM
Если хотите, чтобы Claude нормально делал вам слайды, не используйте Claude Design.

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

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

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

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

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

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

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

@WebDev_Plus
Открой X.

Выполни этот JavaScript в консоли браузера:
s = document.createElement("style");
s.innerHTML = "*{font-family:comic sans ms!important}";
document.head.append(s);


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

@WebDev_Plus
😁4
npm install новый месяц

npm install возможности


Цитата с верой

@WebDev_Plus
Определи форму данных. Убери проверки 👇

#TypeScript
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Design Engineering Tip

Попробуйте делать textarea, которая растёт вместе с контентом, вместо вложенного скролла внутри поля.
Так пользователю проще писать длинный текст, а форму легче просматривать целиком.
CSS:
textarea {
field-sizing: content;
}


Маленькая деталь, но UX сразу становится приятнее.

@WebDev_Plus
👍1
Кейс большой frontend-миграции от ВКонтакте. Команда перевела ключевые разделы vk.com на SPA. В итоге получили ускорение первой отрисовки страницы на 25% и ускорение среднего времени перехода между разделами в 3,5 раза.

Переход был плавным: снаружи все привычно, внутри — новая платформа

https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu

@WebDev_Plus
😁2
Мой набор JavaScript-библиотек, без которых уже сложно представить разработку:

🛡 zod → валидация схем и типобезопасная проверка данных
📅 date-fns → работа с датами без боли и лишнего веса
📊 tanstack-table → мощные и гибкие таблицы для React
🔐 better-auth → аутентификация пользователей без лишней возни
🎞 motion → анимации на JavaScript с современным API
🔤 fontsource → подключение веб-шрифтов прямо через npm
📈 chart.js → доступные и удобные HTML5-графики
🐻 zustand → простое глобальное управление состоянием
🖱 pragmatic-drag-and-drop → drag-and-drop от команды Atlassian
⌨️ hotkeys-js → горячие клавиши и клавиатурные шорткаты

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Наткнулся на очень годный File Tree-компонент 🌳

Trees — open-source файловое дерево для приложений, которым нужен проводник уровня IDE.

Из коробки есть:

• поиск по файлам
• drag-and-drop
• выделение файлов и папок
• Git-статусы
• горячие клавиши
• всё, что обычно ожидаешь от нормального файлового проводника

Подходит для редакторов кода, девтулзов, файловых менеджеров и любых приложений, где нужно современное дерево файлов.

Выглядит настолько отполированным, будто его вытащили из готовой IDE, а не из очередного npm-пакета.

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👀 React Compiler на Rust: свежий апдейт

Кратко:

• Rust-версия компилятора выдаёт результат, который на 99.9% совпадает с оригинальной реализацией
• Команда уверена в стабильности и планирует влить PR в ближайшие недели
• Уже можно тестировать локально
• Команда Oxc уже работает над интеграцией, есть черновик PR

Похоже, React Compiler скоро получит полноценную Rust-реализацию, что может ускорить сборку и упростить интеграцию с современной экосистемой JavaScript-инструментов.

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM