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

Появился классный тренажер по SQL на Stepik Там разберете все паттерны и шаблоны которые пригодятся для собеседований по SQL, Data Scientist, AI/ML Engineer, Data Engineer и Data Analyst Задачи в духе LeetCode, разбор живых кейсов, приёмы оптимизации. Всё, что позволяет уверенно чувствовать себя на собеседовании и дальше уже в команде. Для подписчиков канала, выдаётся скидка в 25%

Секретное слово ???, и насладитесь бесплатным кофе ;) @WebDev_Plus

Хватит делать эти (до смешного простые) ошибки в TypeScript. Не используй String. Серьезно. String (с большой буквы) - объект-обертка из JS (плохая идея) string (с маленькой) - примитивный тип (вот так правильно) То же самое касается Number и Boolean. Всегда используй типы с маленькой буквы. @WebDev_Plus

Next.js 16: cacheLife Настройка времени, в течение которого: • заранее подгруженные данные могут переиспользоваться на клиенте без повторного запроса • заранее отрендеренные данные могут переиспользоваться на сервере без повторного рендера Документация: https://nextjs.org/docs/app/api-reference/functions/cacheLife @WebDev_Plus

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