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

API Popover выводит ваш UI на отдельный верхний слой, так что вам больше не нужно мучиться с управлением фокусом. Плюс оформление затемнения настолько короткое, что помещается прямо сюда:

[popover]::backdrop {
  background: rgb(52, 168, 83);
  backdrop-filter: blur(3px);
}

Создавайте больше, тратя меньше кода → https://goo.gle/3XvDUZk @WebDev_Plus

Google запустила CodeWiki — платформу, где можно выбрать любой GitHub-репозиторий и получить к нему нормальную документацию с визуализациями, объяснениями и даже видео. Там еще есть встроенный чат, где можно спрашивать что угодно про репозиторий: архитектуру, функции, связи файлов и прочее. Скоро появится поддержка приватных реп в GitHub, так что можно присмотреться заранее 🙂 codewiki.google @WebDev_Plus

GitFlow одна из самых старых и формализованных схем ветвления, про которую до сих пор говорят. Модель появилась в 2010 году и стала популярной, потому что чётко разделяла разработку, релизы, фичи и хотфиксы — то, чего многим командам тогда сильно не хватало. В GitFlow у каждой ветки есть своя роль: main — прод-готовый код develop — интеграционная ветка feature/ — разработка новых фич release/ — подготовка релизов hotfix/ — срочные правки в проде Такой подход отлично подходит командам с плановыми релизами, поддержкой нескольких версий продукта или строгими QA/Compliance процессами. Всё движется по понятной схеме, и долгосрочная поддержка становится проще. Но у GitFlow есть и минусы. Он добавляет лишнюю сложность, поощряет долгоживущие ветки и замедляет доставку, потому что каждый этап требует координации. Поэтому команды, которые работают быстро или практикуют continuous deployment, обычно его не используют. GitFlow всё ещё полезен, но сегодня это не универсальный вариант — он оправдан только там, где действительно нужен высокий уровень контроля и разделения процессов. @WebDev_Plus

Иногда я встречаю людей, которые слишком зацикливаются на количестве строк кода (и, если честно, у меня тоже такое бывает). Но посмотри на этот компонент. Он вроде бы длинный, НО: ✓ полностью изолированный редактор ✓ стандартные действия: сохранить / сбросить / закрыть ✓ три вспомогательных метода для работы со списками чипов Если свернуть детали и смотреть только на текущее состояние и API, он получается очень простой, понятный и легко читаемый. @WebDev_Plus

Довольно дико, насколько лучше Angular стал со временем благодаря treeshaking. 610 KB, но там уже есть всё, что нужно для нормальной разработки: ✅ NgRx signals store (с events plugin, по сути как redux) ✅ Tailwind для адаптивной сетки и стилей ✅ Angular Material 3 + тема ✅ Signal forms @WebDev_Plus

Стартап переписал весь свой Python-бэкенд на Node.js… всего через неделю после запуска продукта. Причина? Снизить латентность, улучшить асинхронность и лучше справляться с конкуренцией запросов. Значит ли это, что Node лучше Python? Нет. Это значит, что идеального стека не существует, но технические решения реально имеют значение, когда ты понимаешь их ограничения. И статья, в которой они объясняют причины, просто жемчужина. https://blog.yakkomajuri.com/blog/python-to-node Опять же, это их случай. Это не значит, что это ваш случай. Но аргументы очень убедительны, и я думаю, что из этих случаев можно извлечь немало полезного. @WebDev_Plus

⚡️ Бесплатное обучение фронтенд-разработке с нуля с поддержкой от наставника На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает разобраться во фронтенде С 15 ноября стартует обучение с практикой на JavaScirpt и Next.js Всего сделаете два проекта: 💡 фронтенд для магазина на JS + Next.js 💡 и ещё один уникальный пет-проект для каждого участника Объясняет так, чтобы понял даже человек, у которого нет опыта в программировании 🔖автор регулярно проводит собесы, нанимает новичков и показывает, что реально смотрят на резюме и GitHub, а что — лишнее. Если вы новичок сделаете первый проект и посмотрите, ваше это или нет корткий маршрут: план «Что учить во фронтенде» и в каком порядке  какие проекты положить в портфолио Если у вас есть опыт узнаете, какие проекты в портфолио повышают шансы на удачный собес тест знаний и навыков способы поиска заказов на фрилансе без бирж с конкуренцией Подписывайтесь, чтобы участвовать, осталось 24 места Учиться самостоятельно по ютубу, книжкам, сололёрнам можно бесконечно, если не знать, что нужно, а что нет На интенсиве сократите время на поиск информации и получите готовый маршрут и первый результат от разработчика, который нанимает новичков в команду ✅ Участвовать бесплатно

Похоже, маленькая скромная компания Apple забыла вырубить сорсмапы в проде, и в итоге энтузиасты раскопали полную структуру фронтенда App Store. В сеть попал исходник на Svelte и TypeScript — со всей логикой, компонентами, стилями и даже комментариями разработчиков Apple. Всё это аккуратно собрано и выложено на GitHub «для образовательных целей». Кто хочет поглазеть - вот: https://github.com/rxliuli/apps.apple.com @WebDev_Plus

Atomic React-ion По-прежнему один из моих любимых мемов React

Разработчик показал, как современные браузеры позволяют обходиться без фреймворков Один из разработчиков продемонстрировал, что даже сегодня можно писать сайты в духе начала 2000-х — на чистом HTML и CSS, без React, Vue или других фреймворков. Он собрал небольшой сервер на Deno, который рендерит обычные HTML-страницы без роутинга и сложной логики. Интересно, что навигация между страницами выглядит плавной: панель навигации не мигает при перезагрузке благодаря технологии paint holding, поддерживаемой браузерами уже много лет. Кроме того, разработчик добавил эффект перехода с помощью CSS-директивы @view-transition { navigation: auto; } что сделало переходы между страницами ещё приятнее. По его словам, современные браузеры стали настолько умными, что History API уже не нужен для плавной навигации — достаточно обычных ссылок и немного прогрессивного улучшения через HTML Custom Elements. @WebDev_Plus

Хватит использовать TypeScript enum'ы. Почему? Enum'ы добавляют скрытый код в итоговый файл, тогда как as const — вообще ничего не добавляет. Типы лучше, бандл меньше. @WebDev_Plus

⚠️ «Вложенные тернарные выражения могут усложнить понимание кода.» TypeScript: @WebDev_Plus

Сегодня узнал про предложение в JS под названием Declarations in Conditionals. Оно позволяет писать const или let прямо внутри if или while. Интересно, стал бы ты так писать? Мне кажется, идея неплохая — код станет чуть короче, но при этом останется понятным. (Сейчас это Stage 1 в TC39, на следующей неделе будут выносить на Stage 2.) @WebDev_Plus

🔥Горячие IT вакансии которых нет на HH. Вакансии, только с прямыми контактами в Telegram! Ноль автоотказов — живой диалог и быстрые объективные решения. 🤖 ML & DS 👩‍💻 DevOps 👩‍💻 Java 👣 Go 👩‍💻 Mobile 👩‍💻 C# 👩‍💻 Node.js 👩‍💻 Python 🔎 QA 👨‍✈️ CyberSec 👩‍💻 UX/UI 👩‍💻 Frontend 🖼️ PHP 📋 Analyst 💼 1C 🖥 SQL 👩‍💻 IT HR Подпишись чтобы не упустить свой шанс получить лучший оффер!

JavaScript может форматировать числа гораздо умнее, чем вы думаете

// Intl.NumberFormat — форматирование чисел: единицы измерения, сокращения, валюты

// Пример форматирования со скоростью (единицы измерения)
const numberFmt = new Intl.NumberFormat("en", {
  style: "unit",               // стиль "единица измерения"
  unit: "kilometer-per-hour",  // километры в час
});

// Пример форматирования в компактной форме (например, "15.3K" вместо "15320")
const compactFmt = new Intl.NumberFormat("en", {
  notation: "compact",          // компактная запись (K, M и т. д.)
  maximumFractionDigits: 1,     // максимум 1 знак после запятой
});

// Пример форматирования валюты (йены, без округления вверх)
const currencyFmt = new Intl.NumberFormat("en", {
  style: "currency",           // стиль "валюта"
  currency: "JPY",             // японская йена
  roundingMode: "floor",       // округление вниз
});

// Примеры вывода
console.log(numberFmt.format(88));        // "88 km/h"
console.log(compactFmt.format(15320));    // "15.3K"
console.log(currencyFmt.format(4999.99)); // "¥4,999"

@WebDev_Plus

CSS карточка с параллакс-эффектом через pointermove и кастомные CSS-переменные

<div class="ring" style="--i: 2">

.ring {
  translate: calc(var(--px) * (var(--i) * -2rem))
             calc(var(--py) * (var(--i) *  2rem));
}

Фишка: координаты курсора мапятся в поворот карточки по 3D-оси, а кольца двигаются по 2D-плоскости для создания иллюзии объёма 🤙 @WebDev_Plus

То, что доктор прописал! 9 самых необходимых IT-каналов, которые должен читать каждый айтишник: Доктор Python — коды, хаки и фичи. Доктор Techlogy — свежие технологии и их применение. Доктор Cyber — информационная безопасность без скуки. Доктор GitHub — лучшие репозитории от врача. Доктор IT — всё о цифровом мире и его инсайтах. Доктор GameDev — рецепты создания игр и гайды. Доктор GPT — лучшие промпты и сервисы ИИ. Доктор Memes — смех лечит лучше любых апдейтов. Доктор C++ — фичи, советы и код без боли. Подпишись, чтобы стать профессором, а не пациентом.

TypeScript: единый источник для значений, меток и сравнений

export const ORDER_TYPES = {
  product: "Product Order",
  service: "Service Order",
} as const;

// Тип, представляющий ключи ORDER_TYPES
export type OrderType = keyof typeof ORDER_TYPES;

// Опции для дропдауна
export const ORDER_TYPE_OPTIONS = Object.entries(ORDER_TYPES).map(
  ([value, label]) => ({ value: value as OrderType, label }),
);

// Пример использования:
// - Сравнение: if (type === "product")
// - Получить метку: ORDER_TYPES[type]
// - Для дропдауна: <Select options={ORDER_TYPE_OPTIONS} />

@WebDev_Plus

Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах. Позволяет освободить значительное количество места на диске Запускаешь команду:

npx npkill

Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация @WebDev_Plus

⚡️ Бесплатное обучение фронтенд-разработке с нуля: HTML/CSS, JavaScript, Next.js — с поддержкой от наставника Подойдёт и новичкам, и тем, у кого есть опыт во фронтенде На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 8 ноября стартует новое бесплтаное обучение, где он на практике поможет разобраться во фронтенде: новичкамм в HTML/CSS и JavaScript, а тем, кто с опытом — Next.js Всего сделаете три проекта: 💡 сайт услуг сборки ПК 💡 фронтенд для магазина на Next.js 💡 и ещё один проект полностью самостоятельно в формате соревнования с другими участниками Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё автор регулярно набирает людей в свою команду, проводит собесы и знает, почему прилетают отказы большинству джунов Что будет кроме уроков: Для новичков: пошаговый план изучения всего, что нужно современному фронтендеру с нуля какие проекты положить в портфолио Для тех, кто опытнее: какие проекты в портфолио повышают шансы на удачный собес тест знаний и навыков как искать заказы на фрилансе, когда биржи умерли Подписывайтесь, чтобы участвовать, осталось 39 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду ➡️Участвовать бесплатно