Подкаст «Про код», эпизод 5. В этот раз больше говорили о разработке и почти уложились в час. Вот темы и таймкоды:

00:00:00 Начало
00:00:45 Зачем джуну новый отладчик в Chrome DevTools
00:20:42 Vite 4.3 и немного о судьбе Create React App
00:34:00 Rust быстрее Node.js обрабатывает CSV и другие невероятные открытия
00:46:31 Почему мы ничего не запоминаем из книг о разработке

—

💫️️️️Слушайте «Про код» на любимой площадке и подписывайтесь на «Доктайп»

Прямо сейчас в канале «Фронтенд-новости» в прямом эфире выходит 55 выпуск нашего легендарного еженедельного дайджеста. Формат новый и очень экспериментальный, так что подпишитесь на «Фронтенд-новости», но отключите там уведомления.

💫️️️️Как этим пользоваться. Читайте, голосуйте за статьи — так мы поймём, полезны ли они для вас, отключайте уведомления и добавляйте статьи в закладки в удобном поштучном формате.

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

Всё про деструктуризацию в JavaScript / от объектов до Map

Что это: новое большое видео про деструктуризацию в JavaScript от Игоря Антонова, автора курсов в Академии.

Где пригодится фронтендеру: Игорь объяснит

👉 https://youtu.be/x4isDxxHzCU

Фронтенд-новости 55. Дайджест новостей и полезных статей о фронтенде за неделю.

🔥 Главное за неделю
:root не является глобальным
Как сделать размытый фон камеры
Серверные компоненты против SSR в Next.js

💫 Релизы
Angular 16, Chrome 113, Chrome 114 beta, Chrome DevTools 114 Canary, Safari Technology Preview 169, NodeBB v3.0 (это система ф о р у м о в на Node.js), Axios 1.4.

🧬 HTML и CSS
Новое на web-платформе в апреле
Тестирование поддержки функций для современного CSS

🏝️ JavaScript
Интерактивное руководство по рендерингу в React
Bulletproof React: масштабируемая архитектура для приложений.
Типобезопасный Tailwind с помощью Vanilla Extract
Как создать карусель изображений с использованием WebGL, React Three Fiber и GSAP

Node.js
Теперь Node.js может работать во всех основных браузерных движках
Сравнение менеджеров версий Node: nvm, Volta и asdf
Написание модульных тестов в Node.js с использованием Jest

Общее
Обновление значка блокировки в Google Chrome

---
Полный выпуск с комментариями — в канале «Фронтенд-новости». Оставайтесь с нами, подписывайтесь на «Доктайп» и изучайте новое вместе с Академией.

🔎 Новый HTML-элемент <search>

Что это: перевод статьи Альваро Монторо о новом HTML-элементе для поиска, которого пока даже нет на caniuse.

Коротко: вместо role="search" можно будет использовать тег <search> и тратить три лишних символа. Зато семантика!

А ещё search была последней aria-ролью, у которой не было своего семантического тега. А теперь есть. Ура.

👉 https://tml.io/search

🔁 Стикерпак «Обнови»

Что это: известно, что все программисты очень любят помогать своим родственникам и друзьям с компьютерами, а знакомым джунам — с кодом.

Стикерпак «Обнови» ускоряет решение проблем и выводит жизнь программистов на новый уровень. Например, освободившееся время можно потратить на книги о тайм-менеджменте, которые вы всегда откладывали.

Где пригодится:
— Слушай, всё не работает, меня тут вообще не было, оно само
—

🎙 Подкаст «Про код», эпизод 6. Отказ от паролей, апдейт VS Code и менеджер версий Node.js

Коротко: обсудили длинный список обновлений в VS Code, поговорили про любимые темы оформления и поругались из-за C#. Поняли, почему :root — не глобальный и зачем переключаться между версиями Node.js. Бонус-трек — история о том, как Лёша собирал проект с Node.js 0.12 в 2023.

00:00:00 Начало
00:00:35 Обновки VS Code
00:21:30 Passcode в Гугл-аккаунтах
00:29:35 :root не является глобальным
00:36:51 Медиавыражение update
00:43:45 Менеджер версий Node.js
00:58:28 Памятка по доступным размерам элементов

💫️️️️Слушайте «Про код» на любимой площадке и подписывайтесь на «Доктайп»

Фронтенд-новости 57. Дайджест новостей и полезных статей о фронтенде.

💫 Релизы

jQuery 3.7.0 (что? да!). Добавлен метод .uniqueSort(), поддержка большего количества безблочных свойств CSS, исправление отрицательных полей в outerHeight(true) и изменились нативные события фокуса в IE. Срочно обновляйтесь!

Legend-State 1.0 — супербыстрая библиотека состояний React, основанная на Observables.

Safari Technology Preview 170. Обновления в CSS, макете, JavaScript, Media, Popover и Accessibility.


🧬 HTML и CSS

Что нового в CSS и UI: Google I/O 2023 Edition — обзор 20 самых классных штучек в веб-интерфейсах, которые недавно появились или будут доступны уже скоро.

Условный CSS с :has и :nth-last-child. :nth-last-child позволяет выбирать элементы, считая с конца, а селектор :has проверяет, имеет ли родительский элемент определенное количество элементов.

Семантика и атрибут popover: что и когда использовать? В HTML5 появился новый атрибут popover, который добавляет поведение, но не меняет семантику элементов.


🏝️ JavaScript

Нужна полная поддержка типов без TypeScript? Используйте аннотации JSDoc — они предлагают те же возможности статического анализа, что и TypeScript.

Предложение Promise.withResolvers stage 2 направлено на упрощение создания промисов с помощью статического метода в конструкторе Promise.

Ваши тесты Jest могут быть неправильными, а настройки clearMocks, resetMocks, restoreMocks и resetModules могут усложнить вам жизнь.

Учебник по React с TypeScript поможет вам освоить все необходимые навыки, включая типизацию компонентов, работу с хуками и многое другое.

Как разработчики Node.js снизили затраты на сериализацию строк при парсинге URL в Node.js, благодаря оптимизациям, которые привели к выпуску Ada v2.0.0.

В Chromium появился новый подход к headless.

Новый Bundler от Bun: в 220 раз быстрее, чем webpack? Новый бандлер отличается слаженностью, скоростью и предоставляет унифицированный API плагинов.


🦭 Общее

Как превратить Android-смартфон в веб-сервер, к которому можно получить доступ по общедоступному URL-адресу. Для этого понадобится Termux.

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

Если используете Web SQL, то уже начинайте планировать его замену. В Chromium 97 была удалена поддержка Web SQL для сторонних контекстов, а в следующих версиях функция будет удалена для всех контекстов.

—

Подпишитесь на @html_blog, чтобы не пропустить новые выпуски.

📚 9 книг по JavaScript для начинающих

Что это: обновлённая подборка книг, с которых стоит начать изучение фронтенда, если вам заблокировали Ютуб, Тикток и htmlacademy.ru

Коротко: Морган, Флэнаган, Хавербеке, Бхаргава, Маркис, Мартин, Симпсон, Фримен, Крокфорд, раунд!

👉 https://tml.io/9books

🅰️ Что нужно, чтобы поиграться со шрифтами?

Что это: интерактивная статья о CSS-свойстве font, где можно накрутить дизайна прямо внутри.

Коротко: шрифты в CSS легко настроить, даже если вы никогда этим не занимались. Нужно выучить всего шесть свойств — font-family, font-style, font-variant, font-weight, font-size, line-height.

Где пригодится фронтендеру: да практически везде, ведь веба без текста не бывает.

👉 https://tml.io/css-font

🎙 Подкаст «Про код», эпизод 7. WebGPU в Chrome 113, борьба с большим DOM и канареечный React

Коротко: разобрали Chrome 113, посчитали, сколько узлов в DOM у Академии, поругались на перекраску полос прокрутки и ужаснулись консольным приложениям на React. Классика!

00:00:00 Начало
00:00:26 Chrome 113 — что нового?
00:17:01 Большой DOM не всегда к добру
00:35:02 Канареечный React
00:46:57 Почему перекраска полос прокрутки — это плохо
00:54:39 Консольные приложения на React

💫️️️️Слушайте «Про код» на любимой площадке и подписывайтесь на «Доктайп»

🧦Как проверить тип интерфейса в TypeScript

Что это: небольшая заметка, которая поможет лучше разобраться в TypeScript, если вы пока немножечко путаетесь.

Коротко: чтобы в коде было меньше ошибок, нужно проверять типы интерфейса. Так вы будете уверены, что хотя бы эта часть кода работает правильно.

👉️️️️https://tml.io/interface-type

🥽 Насчёт AR-гарнитур

Пока все обсуждают маску от Apple, я решил вспомнить свои ощущения от AR-гарнитур. Правда, на примере Hololens, но всё одно. И, в общем, делюсь пользовательским опытом от просмотра сайтов, которые вы разработали. Мы же тут о сайтах.

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

Если вы хотите перетащить браузер, придётся дважды тапнуть по нему пальцем примерно так, как переключаются треки на Эйрподсах. Только в воздухе.
Говорят, что в этот момент для стороннего наблюдателя вы выглядите как Гарри Поттер, который не очень качественно вызывает патронуса.

Даже нашёл архивное фото: что я видел в AR-гарнитуре, когда пытался световым лучом подвигать объекты. Браузеров там нет, но это и не нужно.

То есть технология забавная, но на один раз. А морали не будет — пойдёмте лучше работать. За ноутбуками, так привычнее 🐈

Очень сложный тест про JS-фреймворки (даже не пытайтесь)

Нашли в архивах классический тест, в котором не получится набрать пять баллов (из пяти), даже когда знаешь все правильные ответы.

https://l.htmlacademy.ru/javascript-test

«Окей, Чатгпт, сделай мне кнопку»

История одного разговора, после которого понятно, что нет, не заменят.

🤖https://tml.io/chatgpt-vs-buttons

Кто здесь? Какой сейчас год?

Если тоже регулярно задаётесь этим вопросом и успешно с ним справляетесь, пройдите сложный тест про историю браузеров.

Потому что, как говорил классик, «пятнадцатый год — это важно».

👉 https://l.htmlacademy.ru/quiz/browsers

🅰️ Оформление текста на CSS

Собрали для вас подборку с интерактивными примерами, которая поможет быстро разобраться или вспомнить всё, что нужно для оформления текста.

11 основных свойств в одной статье: font-family, font-weight, font-style, text-transform, text-shadow, text-align, line-height, а ещё font, text-decoration, font-weight, blockquote, list-style-type

Добавьте в избранное, подписывайтесь на «Доктайп» и используйте полужирность с умом! 🐈

🤖ChatGPT уже не тот? Тестируем 10 плагинов для чтения URL и грустим

Мы тут поспорили на подкасте, сможет ли ChatGPT со своими двумя плагинами прочитать информацию в альт-тексте на странице и сделать по ней выводы. То есть, фактически, заменить поисковик и вот это всё.

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

👉 https://habr.com/ru/articles/751376/