Курс: фулстек-разработка веб-сервиса

Иногда хочется не просто писать код, а собирать из него что-то по-настоящему большое и работающее — как целый сервис. И вот тут становится важным не только знать технологии, но и уметь соединять их в одну стройную архитектуру.

Этот курс — настоящая энциклопедия по созданию веб-сервисов: от дизайна и форм до логирования, базы данных и отправки писем. Всё на TypeScript, всё с нуля, всё по делу. За кулисами — полный стек, чистый код и никакой воды.

#курс #web #fullstack #ru

Если хотите сделать необычный сайт, то ловите идею

Разраб сделал сайт с миллионом шахматных досок. Возможно, вы уже видели что-то подобное. Например, сайт с миллионом чекбоксов или с одним, но доступным абсолютно каждому пользователю. Это сделал тот же автор.

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

Как вам? Уже готовы сделать такие же шашки или придумали что-то интереснее?

#ненормальноепрограммирование

Зачем вам нужен Passive Event Listener

Passive Event Listener — это особый режим для обработчика событий, при котором браузер сразу знает, что внутри вы не будете вызывать preventDefault(). Узнав это заранее, движок может не ждать вашего решения и тут же приступать к прокрутке или другим действиям по умолчанию. В итоге интерфейс отзывается быстрее и анимация скролла становится плавнее. Это позволяет:

1. Бороться с «дёрганым» скроллом на мобильных устройствах. На touchstart/touchmove браузер вынужден приостанавливать прокрутку, пока не убедится, что вы не отменили её через preventDefault(). Если таких обработчиков много, задержка может достигать 100 мс и пользователь ощущает «тормоза». С passive: true пауза не требуется.

2. Снизить нагрузку на главный поток (main thread). Меньше блокирующих операций — меньше шансов, что UI «замёрзнет» на мгновение.

Как использовать:

Ключевой момент — в объекте опций passive: true.

function handleMove(e) {
  // Только читаем, не вызываем preventDefault
  const { clientX, clientY } = e.touches[0];
  // ...логика, например, показать координаты
}

window.addEventListener('touchmove', handleMove, { passive: true });

Если в пасcивном обработчике всё-таки написать e.preventDefault();, браузер выведет предупреждение в консоли и проигнорирует вызов. Поэтому добавляйте passive: true только там, где оно действительно безопасно, то есть где вы не собирались отменять действие по умолчанию.

Где это особенно полезно:
— touchstart и touchmove — для плавного скролла на мобильных.
— wheel и scroll — когда отслеживаете прокрутку, но не мешаете ей.
— Любые жесты, где вы просто читаете координаты.

#простымисловами #javascript

Адаптивный сайт значит, что пользователь может под него адаптироваться

RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

#фронтенд #react #api

Как сделать обтекание текста без лишней вёрстки

Используйте свойство shape-outside, которое позволяет добавить обтекание текста по фигуре. Весь текст вне обтекания сам подстроится под оставшееся место.

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

#советы #css

Как Node.js обрабатывает сотни тысяч запросов в одном потоке

Пошаговый разбор циклов событий, фаз timers → pending → poll → check → close и роли libuv. Вы узнаёте, кто будит коллбэки, почему промисы и таймеры попадают в разные очереди и как Node удерживает высокую производительность, оставаясь однопоточным.

#бэкенд #nodejs

меню «Пуск» в Windows 11 — это React Native приложение

И оно грузит процессор до 80%.

Тут пользователи Reddit и в X.com выяснили, что каждый вызов «Пуска» запускает тяжелый интерфейс, который обновляется как веб-страница: с анимациями, DOM-объектами и переработкой слоев.

Это приложение запускается на каждый клик и может загружать до 80% одного ядра процессора. В зависимости от конфигурации ПК, это приводит к ощутимым подлагиваниям, особенно на устройствах со слабым железом.

Microsoft уже давно использует React Native в интерфейсе Windows 11. Например, на этом же фреймворке построена страница «Ваша учетная запись» в настройках. Сделано это для унификации разработки, чтобы использовать один код и на десктопе, и в вебе.

Но зачем гонять процессор до 80% ради того, чтобы показать сетку ярлыков? Ничего не понятно, но очень интересно.

@your_tech

«Список покупок за 2 часа»: как AI сгенерировал дизайн, код и голосовой ввод на лету

Автор этой статьи поделился своим опытом разработки приложения с помощью ИИ, Он бросил в Google Stitch один промпт, а через 30 секунд получил готовый Figma-макет и HTML. Дальше — чистый JS без фреймворков, WebSocket-синхронизация, голосовой ввод через Gemini 2.5 Pro и живое демо, которым удобно пользоваться на телефоне. Теперь мы можем пошагово изучить промпты, архитектуру ванильного SPA и нюансы интеграции AI-моделей прямо в браузере.

#фронтенд #javascript #ai

​​Самые популярные вопросы на собеседовании фронтенд-разработчика

Это 55 выпуск видеокаста «Front-end. Вопросы на собеседовании».
В серии видео автор помогает подготовиться к собеседованиям на позицию джуниор и мидл фронтенд-разработчик.

Видеокаст представлять из себя коллекцию технических вопросов, которые можно получить на интервью: https://www.youtube.com/watch?v=PI1X5oFHou8

В этом выпуске:
— Что такое хвостовая рекурсия? Оптимизация рекурсии?
— Что такое и как работает debounce() и throttle() в JavaScript?
— Как в JavaScript работают декораторы? Как они могут быть использованы для модификации поведения классов и методов?
— Как можно создавать пользовательское событие (custom events) в JavaScript?
— Что такое IndexedDB? Как работает IndexedDB?
— Расскажите о методе requestAnimationFrame()?
— Как работают дефолтные параметры в ES6?
— Что такое «BigInt» в ES2020 и для чего он используется?
— Какие нововведения были представлены в ECMAScript 2021 (ES12)?
— Что такое fetch()? Как работает функция fetch()?
— Что такое JSON в JavaScript? Как его можно использовать?
— Что такое и как работает коэффициент сжатия (compression ratio) в контексте веб-разработки?

#собеседование #фронтенд

Чем отличается новичок от опытного разраба

​​Мегагайд: культура работы с Git

Git — это не только (и не столько!) знание самой технологии и конкретных команд, но и определённая культура взаимодействия, практики, подходы, договорённости. Всё это помогает участникам команды лучше понимать друг друга и работать быстрее и чётче.

В статье — как раз об этом. В ней раскрыли, что формирует культуру работы с Git: от конвенций именования коммитов и до практик работы в пуллреквесте. В конце статьи — полезные ссылки на интерактивные обучалки, шпаргалки и гайды: https://habr.com/ru/companies/yandex_praktikum/articles/812139/

#git #шпаргалки

16 стендов, 55 экспертов, 400+ участников: итоги GPB Conf

Газпромбанк провел свою первую конференцию и теперь делится результатами. Более 400 профессионалов из ведущих компаний смогли поделиться своими знаниями и экспертностью. А посетители погрузились в атмосферу работы в банке, прослушав доклады и приняв участие в активностях в экспозоне.

Подробнее о том, как все прошло, дальнейших планах, итогах и причинах ждать следующую конференцию — в статье.

20 версий Angular за 5 лет: «незаметные» фичи, которые спасают UI-киты

На этой неделе команда Angular отметила значимый юбилей в истории развития своего фреймворка — 20-ю мажорную версию! Самое время поностальгировать и вспомнит путь развития фреймворка.

Автор этой статьи прошёл всю эволюцию Angular и собрал чек-лист изменений, которые кажутся мелочью, но экономят часы на поддержке и открывают новые архитектурные трюки.

А какая фича Angular изменила ваш сценарий разработки?

#фронтенд #angular

Тюним стартовую страницу Firefox: убираем лишнее, добавляем своё

В свежем гайде автор показывает, как «причесать» новую вкладку Firefox без расширений: скрыть рекламные блоки, заменить «карточки» на собственные закладки, подправить отступы и фон с помощью пары строк пользовательского CSS.

Гайд в двух часть: первая и вторая. Если хотите довести до ума какую-то часть браузера или исправить ошибки разработчиков, то переходите по ссылкам.

#фронтенд #css #firefox

Оmatsuri

Это небольшой, но полезный набор инструментов. Здесь вы найдете декодер, генератор градиентов, разделитель страниц, генератор данных и многое другое.

Проект опенсорсный, поэтому можете заглянуть в репозиторий, чтобы изучить внутрянку.

#инструменты

Pug: HTML без скобок, с шаблонами и миксинами

Если вы устали от громоздкого HTML и хотите писать разметку быстрее и чище, Pug может стать отличным решением. Это препроцессор, который превращает лаконичный код без угловых скобок в полноценный HTML. В статье вы найдёте:

— Основы синтаксиса Pug: как писать разметку без закрывающих тегов и угловых скобок.
— Работу с шаблонами и миксинами: как переиспользовать код и создавать более модульную структуру.
— Преимущества и недостатки: когда стоит использовать Pug, а когда лучше обойтись без него.
— Инструкции по установке и компиляции: как начать работать с Pug на вашем проекте.

А вы используете Pug в своих проектах или нет?

#фронтенд #html #pug