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

CSS Rulesets Это базовые строительные блоки CSS, которые определяют, какие элементы стилизовать и каким образом. Ruleset состоит из селектора и блока деклараций. Важные моменты: ▪️Селектор указывает, к каким HTML-элементам применяется стиль (например, div, .class) ▪️Блок деклараций содержит пары свойство–значение (color: red;) ▪️Каждая декларация заканчивается точкой с запятой ▪️В одном ruleset можно задать несколько деклараций @WebDev_Plus

hucre — zero-dependency движок таблиц на TypeScript Создан 8 дней назад и уже набрал 489 звёзд. Поддерживает чтение и запись XLSX / CSV / ODS, а полный gzip-бандл весит всего 18 КБ. Другими словами, XLSX-парсер упакован в dependency-free «гаджет» размером 18 КБ. https://github.com/productdevbook/hucre @WebDev_Plus

CSS Custom Highlight API позволяет подсвечивать результаты поиска — без изменения структуры DOM.

::highlight(search-results) {
    background-color: #ff0066;
    color: white;
}

@WebDev_Plus

CSS shape() теперь входит в Baseline (новодоступная фича) → https://goo.gle/47nnZBG Функция shape() позволяет создавать адаптивные (responsive) и сложные контуры (paths) для лэйаутов и анимаций, используя стандартные CSS-единицы, такие как %, rem и calc(). @WebDev_Plus

Метод массива some() в JavaScript Проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Если хотя бы один элемент проходит проверку — возвращает true, иначе false. Важные моменты: - Вызывает callback-функцию для каждого элемента массива - Прекращает итерацию, как только условие выполнено (early exit) - Возвращает boolean (true или false) - Пропускает пустые слоты в разреженных (sparse) массивах @WebDev_Plus

Одна строка кода, чтобы предотвратить layout shift при изменении видимости скроллбара @WebDev_Plus

Как начать зарабатывать в IT в 2026 году даже без опыта и образования Самое странное сейчас это пытаться вкатиться в IT по классике, когда опытные программисты давно кодят с нейронками даже в больших проектах. Поэтому в 2026 выигрывает тот, кто быстро делает рабочие решения без долгих лет обучения и максимально сокращает путь с нуля до первого реального проекта в IT. Андрей Ивашев запускает бесплатный 3-дневный интенсив: «Вайбкодинг: с нуля до первого IT-продукта» 📅 7-9 апреля в 19:00 МСК Для тех хочет начать программировать с нейронками, создать свой первый IT-продукт и заработать на этом первые деньги даже без опыта и образования. Программа 🔥 7 апреля Почему сегодня вход в IT стал сложнее и как вайбкодинг меняет правила игры 8 апреля 3 способа заработать на вайбкодинге в 2026 и где брать первого клиента, чтобы сделать проект за реальные деньги 9 апреля Эра агентов или программирование на автопилоте 🎁 Бонус за регистрацию: «Библиотека промптов для заработка на вайбкодинге», которые помогут упаковать портфолио и общаться с клиентами так, чтобы покупали. 50 бесплатных нейросетей, чтобы вы могли кодить без остановки + секретные бонусы Бесплатных мест для наших подписчиков всего 100. Зарегистрироваться бесплатно Зарегистрироваться бесплатно Зарегистрироваться бесплатно Тыкни на 🔥, если идёшь.

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

Изучайте программирование, играя в игры 1. Kubernetes http://k8sgames.com 2. DevOps http://devops.games 3. Linux http://overthewire.org 4. Git http://ohmygit.org 5. Python http://codecombat.com 6. CSS и HTML http://codepip.com @WebDev_Plus

Мгновенно извлекайте всю дизайн-систему любого сайта Dembrandt — это NPM-пакет, который сканирует сайт и вытаскивает его визуальные стилевые параметры: цвета, типографику, отступы и паттерны лейаута. Вместо того чтобы вручную инспектировать стили в DevTools, вы можете быстро понять, как сайт структурирован и стилизован GitHub тут, сайт здесь 👜

Если вы знаете эти строки CSS, вы можете сверстать 80% макетов 👇

display: flex;
justify-content: center;
align-items: center;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

position: relative;
gap: 1rem;

@WebDev_Plus

CSS-тени. Глубина, которая действительно ощущается реалистично. @WebDev_Plus

Вложенность CSS теперь является базовым стандартом! Теперь можно писать вложенные селекторы прямо в CSS, как в Sass, но без использования препроцессоров. Просто пишите чистый CSS Пример:

.card {
  color: black;
  &:hover { color: blue; }
  .title { font-weight: bold; }
}

Что изменилось? Теперь вам не нужно использовать препроцессоры, чтобы работать с вложенными селекторами. Всё доступно прямо в стандартном CSS @WebDev_Plus

На Stepik вышел первый курс по: Claude Code — вайбкодинг с нуля Изучаете всё шаг за шагом: CLAUDE.md → rules → commands → sub-agent → Skills → hooks: 🔴Оформите правила проекта через CLAUDE.md, подключение файлов через @ и разнесение логики в .claude/rules, чтобы не раздуло инструкцию. 🔴Сделаете свои slash-команды с frontmatter (description/allowed-tools/model) и аргументами через $ARGUMENTS и $1/$2/$3 для буста воркфлоу. 🔴Освоите саб-агентов: когда их запускать, как писать определения и как делегировать им расследования и проверки без засора основного контекста. 🔴Поднимете Hooks под реальный воркфлоу: /hooks, sh-скрипты, SessionStart/Stop/PreToolUse/PostToolUse, exit codes, matchers и env-переменные. 🔴Настроите Skills (SKILL.md + references), свяжете их с саб-агентами через skills-поле и подключите MCP, Web и headless (-p) для продвинутых случаев Скидка 25%, действует 48 часов ⬇️ Пройти курс на Stepik

Рарзраб прошёл через все круги ада, чтобы принести вам, на ближайшие годы, один из ключевых фундаментальных инструментов UI-инжиниринга (если не в реализации, то хотя бы в концепции): быстрый, точный и полный алгоритм измерения текста на стороне пользователя на чистом TypeScript, который можно использовать для верстки целых веб-страниц без CSS, обходя измерения DOM и перерасчёт reflow. Верстка и измерение текста были последним и самым большим узким местом для создания более интересных UI, особенно в эпоху ИИ. С этим решением больше не нужно выбирать между эффектностью GL-лендинга и практичностью статьи в блоге. Демки: тут Установить через npm или bun:

npm install @chenglou/pretext
# или
bun add @chenglou/pretext

И используйте его, чтобы дать волю своему ИИ и создавать крутые демки 😶 @WebDev_Plus

Это поможет вашим пользователям не уходить со страницы случайно — особенно при прокрутке таблицы или слайдера. Запомните мои слова 😁 @WebDev_Plus

React / JS / TS приём Используйте символы (Symbol) вместо null/undefined для представления отсутствующих значений. Этот пример провайдера в React: - позволяет передавать null - при этом всё ещё проверяет, что пользователь не забыл обернуть в <Provider> Бывают случаи, когда null — это вполне валидное значение контекста (ctx). @WebDev_Plus

CSS-совет: Используйте svh, чтобы мобильная адресная строка не скрывала ваш UI. Это гарантирует точное соответствие видимой области экрана. @WebDev_Plus

Свойство transitionType для ссылок (Links) в Next.js 16.2 (требует дополнительной настройки для <ViewTransitions />) <ViewTransitions> всё ещё является экспериментальной возможностью в Next.js и не рекомендуется для продакшена Полное демо 👇 https://github.com/SidKH/gist-of-next-demos/blob/cursor/view-transition-transition-types-demo/README.md @WebDev_Plus

Точно измеряйте производительность своего кода performance.mark() и performance.measure() позволяют вам инструментировать JavaScript, используя высокоточные тайминги. Узнайте больше 👇 https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark @WebDev_Plus