Episoder

  • 028. ESLint без правил, CSS без препроцессоров и формы без кнопок

    028. ESLint без правил, CSS без препроцессоров и формы без кнопок

    · Про код

    Новогодняя игра «Код сурка»: отвечайте на вопросы, проходите тренажёры, зарабатывайте баллы и выиграйте профессию!

    ESLint отказывается от правил форматирования кода. Пора переходить на Prettier? Обсудили паттерн отключения кнопки при отправке форм — не всё так просто и сложней, чем кажется. Обсудили историю миграции с Preact на React: плюсы и минусы. Поговорили про CSS-вложенность и отказ от препроцессоров. Под занавес поговорили про базы данных и узнали почему стоит обратить внимание на SQLite.

    Ведущие: Коля Шабалин, Игорь Антонов и Лёша Симоненко.

    Ссылки и таймкоды:

    00:00:25 Код сурка
    00:01:06 ESLint 8.53 без правил форматирования00:18:25 Не отключайте кнопку00:30:06 Возвращаемся на React00:42:50 CSS-вложенность уже здесь или пора отказываться от препроцессоров00:54:28 Почему мы должны использовать SQLite

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 027. Быстрый Firefox, state of React и отладка в Node.js

    027. Быстрый Firefox, state of React и отладка в Node.js

    · Про код

    Обсудили зачем участвовать в опросе State of React 2023. Подсветили важность процедуры отладки приложений на Node.js и какими инструментами её производить. Разобрали стартовый шаблон для нового приложения на Node.js: зависимости, фреймворк Ts.ED, сценарии и так далее. Посмотрели что там с производительностью Firefox и много всякого другого.

    Ведущие: Коля Шабалин и Игорь Антонов.

    Ссылки и таймкоды:

    00:00:40 State of React 2023
    00:09:46 Приоритет индексации мобильных устройств в Google завершён00:17:24 Шаблон для Node.js с TypeScript00:28:00 Firefox стал быстрее00:35:04 Отладка в Node.js00:45:48 crypto-hash00:48:12 express-slow-down для Express

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • Manglende episoder?

    Klik her for at forny feed.

  • 026. Привет content-visibility и text-wrap, но прощай Buffer и Next.js

    026. Привет content-visibility и text-wrap, но прощай Buffer и Next.js

    · Про код

    Node.js 20 стала LTS релизом, а в следующий релиз завезли новый полезный флаг для автоматического определения модульной системы. Обсудили новые значения для свойства text-wrap: pretty, balanced и как они помогают улучшить выравнивание абзацев. Поговорили про чек-лист для начинающего React-разработчика и узнали почему пора переезжать с Buffer на Uint8Array. А в конце немного про Next.js.

    Ведущие: Коля Шабалин, Игорь Антонов и Лёша Симоненко.

    Ссылки и таймкоды:

    00:00:51 content-visibility в следующем Safari?
    00:11:48 Автоматическое определение CommonJS и ESM в Node.js00:19:27 text-wrap: pretty00:27:39 Прощай, Node.js Buffer00:35:34 Select element: теперь с разделителями00:40:40 Tao of React — всё самое важное для настоящих разработчиков00:57:02 Why I Won't Use Next.js

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 025. Потрясения Node.js 21, что скрывает CCC и вечная проблема с именованием

    025. Потрясения Node.js 21, что скрывает CCC и вечная проблема с именованием

    · Про код

    Обсудили свежий релиз Node.js. А там стабильные fetch и Web Streams API, экспериментальный WebSocket клиент, важный флаг experimental-default-type и небольшие, но приятные обновления встроенного модуля тестирования. А ещё разобрали базовые принципы оптимизации, напомнили зачем нужен package-lock.json и снова думали как назвать переменные, на этот раз в CSS.

    Ведущие: Коля Шабалин, Игорь Антонов и Лёша Симоненко.

    Ссылки и таймкоды:

    00:00:26 Node.js 21
    00:26:25 The Three C: Concatenate, Compress, Cache00:48:43 Stop using npm install in your CI/CD pipeline00:57:04 Именование переменных в CSS

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 024. Смотрим в будущее: Interop 2024, бета версия TypeScript 5.3, анти-паттерны конфигурирования в Node.js

    024. Смотрим в будущее: Interop 2024, бета версия TypeScript 5.3, анти-паттерны конфигурирования в Node.js

    · Про код

    Interop 2024: что это такое, почему важно и как участвовать в голосовании. Разберём улучшения в бета-версии TypeScript 5.3: import attributes, type narrow для switch, оптимизация производительности, более тщательная проверка Symbol.hasInstance и другие полезные новинки. Про Photoshop в браузере и как это поможет разработчикам. В очередной раз обсудим селекторы и разберёмся как :not объединяет несколько селекторов. И это ещё не всё.

    Ведущие: Коля Шабалин и Игорь Антонов.

    Ссылки и таймкоды:

    00:00:52 Будьте готовы к Interop 2024
    00:13:21 Бета-версия TypeScript 5.3, улучшений много00:40:33 Как :not() объединяет несколько селекторов00:48:08 Переменные окружения и анти-паттерны работы с конфигурацией00:57:02 Как Photoshop использует браузерные технологии на пределе возможностей01:11:00 Должны ли ESM модули быть по умолчанию?

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 023. Новинки Node.js 20.6, масштабирование адаптивных шрифтов, хайп вокруг Bun

    023. Новинки Node.js 20.6, масштабирование адаптивных шрифтов, хайп вокруг Bun

    · Про код

    Node.js 20 научилась работать с .env-файлами из коробки, dotenv больше не нужен? К каким проблемам может привести не знание о NODE_ENV, обсуждаем явное и неявное. CSS и адаптивные шрифты: много математики и новые функции. Знакомство с убийцей (нет) Node.js. Обсуждаем первую версию Bun.

    Ведущие: Коля Шабалин и Игорь Антонов.

    Ссылки и таймкоды:

    00:00:58 Встроенная поддержка .env в Node.js 20.6
    00:13:35 Ах этот вредный NODE_ENV или нет?00:24:20 Адаптивный шрифт масштабируется с помощью компонуемых утилит CSS00:40:55 Могут ли символы SVG влиять на производительность в интернете?00:58:42 Bun на хайпе

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 022. Я выкинул из проекта WOFF и вот что случилось, а также узнал как работает every и groupBy

    022. Я выкинул из проекта WOFF и вот что случилось, а также узнал как работает every и groupBy

    · Про код

    На этой неделе мы узнали, что WOFF больше не нужен. Вспомнили как использовать нативный lazy-loading и познакомились с типизацией кастомных свойств. В мире JS удивились от работы every() по спецификации, а также познакомились с новым методом groupBy().

    Ведущие: Коля Шабалин и Лёша Симоненко.

    Ссылки и таймкоды:

    00:00:40 WOFF покинул здание
    00:09:58 Прекратите ленивую загрузку продуктов и главных изображений00:24:30 Системы безопасного проектирования CSS с помощью @property00:34:23 Почему every() возвращает true для пустых массивов?00:43:56 Object.groupBy() теперь в JavaScript

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 021. Алгоритмы сортировки и большая О, зачем нужен @scope и прощай nodemon

    021. Алгоритмы сортировки и большая О, зачем нужен @scope и прощай nodemon

    · Про код

    В этот раз мы углубимся в разнообразные аспекты программирования. Узнаем, как эффективно сортировать данные, программировать с использованием CSS, и даже познакомимся с альтернативами хорошо известных инструментов. Также расскажем, как использовать JSX вне мира React, поделимся важностью альтернативного текста для изображений и дадим краткий обзор пересмотра библиотеки Lodash.

    Ведущие: Коля Шабалин и Игорь Антонов.

    Ссылки и таймкоды:

    00:01:10 Алгоритмы сортировки
    00:17:13 Краткое введение в CSS @scope00:31:54 Прощай, nodemon или нет?00:42:21 Прогрессивно улучшенная проверка формы, часть 2: многоуровневое представление в JavaScript00:59:08 JSX без React01:06:04 Зал славы альтернативного текста: чествование хорошо написанных описаний изображений01:10:19 Вам не нужен Lodash

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 020. TypeScript + React в документации, что есть в DevTools и как отменить подписку на событие

    020. TypeScript + React в документации, что есть в DevTools и как отменить подписку на событие

    · Про код

    Узнали как выбирать npm-пакеты с помощью Node.js Toolbox в контексте решаемой задачи. Обсудили возможности DevTools в разных браузерах. Узнали как применять API виртуальной клавиатуры в мобильных браузерах. Разобрали несколько способов как отметить подписку на события в DOM. Порадовались обновлённой документации по React (в неё добавили TypeScript). Подискутировали про Type Alias и Interface в TypeScript. А также узнали как улучшить проверку форм.

    Ведущие: Коля Шабалин и Игорь Антонов.

    Ссылки и таймкоды:

    00:01:02 Node.js Toolbox
    00:17:23 Могу ли я использовать DevTools00:31:02 API виртуальной клавиатуры00:40:33 You’ve Got Options for Removing Event Listeners00:58:56 React + TypeScript. Обновлена официальная документация по React01:04:21 Type vs Interface: Which Should You Use In 2023?01:14:15 Постепенно улучшенная проверка формы, часть 1: HTML и CSS

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 019. Форматеры объектов, новая Призма и repeat() в гридах

    019. Форматеры объектов, новая Призма и repeat() в гридах

    · Про код

    Обсудили форматеры в FF 116: зачем они нужны и кто ими пользуется. Вспомнили VanJS — микрофреймворк, который дорос до версии 1.0. Подробно разобрали функцию repeat() для использования в гридах. Устроили ликбез по ORM и разобрали нововведения в Prisma. Поговорили про новую спеку анимаций основанных на прокрутке и это ещё не всё…

    Ведущие: Коля Шабалин и Игорь Антонов.

    Ссылки и таймкоды:

    00:00:25 Пользовательские форматеры объектов в DevTools теперь и в Firefox
    00:08:51 VanJS дорос до версии 1.000:13:50 Как использовать функцию repeat() гридов00:34:09 Вышла Prisma версии 5.100:52:26 tsup00:58:24 Анимация прокрутки в CSS01:07:06 Бойлерплейты: Hackathon Starter для Node.js, Vite React Boilerplate

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 018. Дэн Абрамов ушёл из React, ужасы TypeScript и плохие нейроальты

    018. Дэн Абрамов ушёл из React, ужасы TypeScript и плохие нейроальты

    · Про код

    Обсудили уход Дэна Абрамова из React, книжку по TypeScript с 200+ главами, aspect-ratio нормального разработчика и поспорили насчёт генерации альт-текстов нейросетями.

    Ведущие: Коля Шабалин, Игорь Антонов и Женя Шкляр.

    Ссылки и таймкоды:

    00:00:38 Дэн Абрамов перестаёт заниматься React и меняет место работы
    00:03:41 Третье издание спецификации PNG было опубликовано как рабочий проект W3C00:14:13 Краткая книга TypeScript00:19:35 5 неудобных истин о TypeScript00:34:26 Как использовать aspect-ratio00:43:45 Проблема с автоматически сгенерированными альтернативными текстами для изображений

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 017. Проблемы с тегами, новая версия Node.js и обновление @font-face

    017. Проблемы с тегами, новая версия Node.js и обновление @font-face

    · Про код

    Самый исторический выпуск за всё время — обсудили историю TypeScript, HTML, XHTML и немного Node.js. А кроме этого обсудили немного новостей о свежих возможностях веба и поговорили о будущем спецификаций.

    Ведущие: Коля Шабалин, Игорь Антонов и Женя Шкляр.

    Ссылки и таймкоды:

    00:00:30 Визуально скрытые элементы единичной ширины
    00:05:03 Node 18.17 LTS00:07:08 Promise.withResolvers00:17:03 Новый синтаксис @font-face00:27:27 История TypeScript00:48:50 Дело против самозакрывющихся тегов

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 016. Обновки для Prettier и Vite, что принёс WCAG 2.2 и как выбрать фреймворк

    016. Обновки для Prettier и Vite, что принёс WCAG 2.2 и как выбрать фреймворк

    · Про код

    В этом выпуске обсудим состояние пакетов в NPM. Поворчим о работе с DOM. Узнаем про новые единицы измерения в CSS. Поговорим о новинках Pretier и Vite. Обсудим нововведения WCAG 2.2. Сравним примеры кода различных фреймворках и поговорим про Firefox 115.

    Ведущие: Коля Шабалин и Игорь Антонов.

    Ссылки и таймкоды:

    00:01:00 State Of npm 2023
    00:10:30 Plain Old JavaScript and the DOM00:19:13 Новые единицы измерения области просмотра00:29:43 Prettier 3.0. Hello, ECMAScript Modules00:41:00 Vite 4.400:51:40 WCAG 2.2: Быстрый и упрощенный01:03:20 Component Party Dev01:08:56 ECMAScript 2023 и Firefox 115

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 015. CommonJS мешает, using уже в Node.js, а атрибут decoding ничего не даёт

    015. CommonJS мешает, using уже в Node.js, а атрибут decoding ничего не даёт

    · Про код

    Теперь и в Node.js добавляют поддержку ключевого слова using и другие новинки версии 20.4. А также обсудим чем так вреден CommonJS и почему мы до сих пор не можем перейти на ECMAScript Modules. Попытаемся разобраться что делает атрибут decoding, обсудим новую документацию React.js, посмотрим на инструмент для подбора шрифтов, а закончим всё встроенным в Node.js модулем для тестирования. Поехали!

    Ведущие: Коля Шабалин, Игорь Антонов и Лёша Симоненко.

    Ссылки и таймкоды:

    00:00:28 Релиз Node.js 20.4.0 с новым using для TypeScript
    00:13:23 CommonJS вредит JavaScript00:33:07 Что делает атрибут decoding с изображениями?00:48:04 В документации React.js рекомендации по использованию TypeScript01:00:00 Как проверить кумулятивный сдвиг шрифтов01:06:35 Что ждать и чего не ждать от встроенного в Node.js Test Runner

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 014. Юбилейный NestJS, using в TypeScript и классный color-mix()

    014. Юбилейный NestJS, using в TypeScript и классный color-mix()

    · Про код

    В этом выпуске обсудим юбилейный релиз NestJS, разберёмся кому он нужен и в каких случаях не хватает Express.js. Разберёмся с новым ключевым словом using, который сначала заезжает в TypeScript, а потом и в спецификацию JavaScript. Попробуем понять как и где можно использовать функцию color-mix(). А в конце попробуем понять зачем команда React.js пыталась пропатчить Fetch API и чем всё закончилось. Начинаем!

    Ведущие: Коля Шабалин, Игорь Антонов и Лёша Симоненко.

    Ссылки и таймкоды:

    00:01:00 Юбилейный NestJS
    00:23:38 Ключевое слово using в TypeScript 5.200:43:11 Смешиваем цвета в CSS с помощью color-mix()00:53:42 color-mix() и непрозрачность00:54:45 Как использовать оттенки цветов с помощью HSL01:02:13 Зачем патчить Fetch API внутри React.js

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 013. Гифки всё, Sass всё, поля всё. Или нет?

    013. Гифки всё, Sass всё, поля всё. Или нет?

    · Про код

    CSS, CSS, CSS, CSS, CSS и гифки.

    Ведущие: Коля Шабалин, Лёша Симоненко и Женя Шкляр.

    Ссылки и таймкоды:

    00:01:12 Стартовал State of CSS
    00:06:12 Альтернатива анимированному GIF00:24:01 Обрезка полей и лучшие практики00:39:57 Не отказывайтесь от Sass ради CSS

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 012. Тупой автофокус, умные контейнейры, ещё один Chrome и опрос StackOverflow 2023

    012. Тупой автофокус, умные контейнейры, ещё один Chrome и опрос StackOverflow 2023

    · Про код

    В этом выпуске всё, как вы любите — удивляемся нелогичности фронтенда, радуемся логичности фронтенда, до лёгкой хрипотцы спорим про старые редакторы кода (привет, TextMate) и стараемся прогнозировать будущее на основе опроса StackOverflow. А Марк, который монтирует подкаст, сказал «Выпуск вышел замечательный, кстати. Очень забавный.». Пора проверять.

    Ведущие: Коля Шабалин, Лёша Симоненко и Женя Шкляр.

    Ссылки и таймкоды:

    00:00:39 Проблема с автофокусом и что делать с этим делать
    00:16:11 Отдельный Chrome для тестирования00:26:26 Лучшие практики для контейнерных запросов00:43:20 Результаты опроса разработчиков Stack Overflow за 2023 год

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 011. 20 лет вникуда, ужасы ch и TS 5.1

    011. 20 лет вникуда, ужасы ch и TS 5.1

    · Про код

    Формулируем «правило технического подкаста» — любой технический подкаст однажды начнёт обсуждать высшее образование для программистов. Мы не стали исключением и обсудили важность высшего образования, устаревшие технологии (которые раньше были хорошими), важность @scope (к которому есть вопросики) и большие вопросики к единицам измерения ch. В общем, всё как всегда.

    Ведущие: Коля Шабалин, Игорь Антонов, Лёша Симоненко и Женя Шкляр.

    Ссылки и таймкоды:

    00:01:22 Итоги двадцати лет работы — технический долг и неподдерживаемый код
    00:16:59 Введение в @scope в CSS00:34:41 TypeScript 5.100:45:05 Остерегайтесь сдвига макета с помощью единиц измерения ch00:56:59 React Server Components своими руками

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 010. Случайности не случайны, а цвета не цвета

    010. Случайности не случайны, а цвета не цвета

    · Про код

    В этом выпуске мы во всём сомневались — случайны ли случайности в JavaScript, достаточно ли цветны привычные нам цвета в CSS и считаются ли комментарии комментариями, если в них всего одна строка.

    Но все сомнения, конечно, разрешились. Слушайте, чтобы узнать, к чему мы пришли.

    Ведущие: Коля Шабалин, Игорь Антонов, Лёша Симоненко и Женя Шкляр.

    Ссылки и таймкоды:

    00:00:30 Отсутствующая библиотека случайностей JavaScript00:06:07 Две вещи, которые не очень хороши в OKLCH00:17:15 Какой метод для работы с массивами лучше00:28:43 Изменения, которые ухудшают производительность и что с этим делать00:41:00 Почему в CSS нет однострочных комментариев?00:52:00 Замена для React.js

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • 009. Быстрый Node.js, адаптация без медиавыражений, вертикальный ритм и практики отличных форм

    009. Быстрый Node.js, адаптация без медиавыражений, вертикальный ритм и практики отличных форм

    · Про код
    Смотрим графики и рефлексируем о производительности Node.js. Разбираемся с лучшими практиками создания хороших форм. Делаем адаптацию без медиавыражений, а вертикальный ритм с помощью новых единиц измерений. В очередной раз убеждаемся: сначала изучаем JavaScript, потом React.

    Ведущие: Коля Шабалин, Игорь Антонов и Лёша Симоненко.

    Ссылки и таймкоды:

    00:00:47 State of Node.js Performance 2023
    00:17:46 Одиннадцать лучших практик HTML для форм входа и регистрации00:35:12 Введение в popover API00:51:33 Адаптивные сетки CSS без медиавыражений00:59:22 Вертикальный ритм с использованием единиц CSS lh и rlh01:03:01 Its 2023, Please Stop Using operator && for Conditional Rendering in React

    Учитесь с нами в .html academy → https://htmlacademy.ru

    Узнавайте новое в журнале «Доктайп» → https://t.me/html_blog

    А все вопросы о подкасте пишите на почту → [email protected]

  • Vis mere