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

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

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

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

🎙 Подкаст «Про код», эпизод 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/

У нас с разработкой возник небольшой спор на два часа, помогите разобраться

CSS-упражнение дня — свойство line-height

Потренируйтесь делать неужасную высоту строки в вёрстке. Это важный навык, если вас уже научили различать плохой кернинг и вы вошли во вкус со своей дизайн-жилкой.

Кстати, заодно самый важный опрос дня:

Культурный шок дня — Midjourney в версии 5.1 научился генерировать клавиатуры с реалистичными буквами и цифрами и почти правильной раскладкой. Сидели и всей редакцией не верили.

Теперь можно навоображать себе программистскую клавиатуру мечты. И кстати,