Антон Непша.js

Всем привет, начинаем второй irl стрим с конференции holyjs 📱

Благодаря jug.ru будем снова мучить людей.

Дима @siberiacancode ведёт стрим с территории конференции HolyJS

На вчерашнем стриме Дима вместе с Саней @jsforbeginners целый день общались с гостями конференции, и часто это перерастало практически в полноценные импровизированные доклады))

Присоединяйтесь, будет интересно и весело)

Сколько памяти ест ваша вкладка - материалы с доклада

Только что выступил на HolyJS 2024 с докладом «Сколько памяти ест ваша вкладка»

Презентация доступна на странице доклада (доступно без регистрации).

В презентации упоминались следующие материалы:

1) Статья и видео от разработчиков Garbage Collector в V8
2) Жизнь до и после React Compiler - Анна Ширяева
3) Партнёрство с Garbage Collector. Память в V8 и работа с утечками - Александр Зайцев
4) Kevin Shiener - Sneaky Memory Leaks
5) Флаги в v8
6) Heap::SetUpSpaces
7) Heap::HeapSizeFromPhysicalMemory
8) Про 15гб и Android
9) Ищем в снэпшоте топ 5 самых тяжелых React компонентов с помощью memlab - пример на github gist

Что ещё использовалось при подготовке доклада:

1) все статьи из https://v8.dev/blog/ с тегом memory
2) Chrome DevTools - Memory Terminology
3) Chrome DevTools - Fix Memory Problems
4) Chrome DevTools - Record heap snapshots
5) Виктор Хомяков - Память в браузере и в Node.js
6) Владислав Молоцило, Александр Зайцев - Снэпшоты памяти -- не страшно, снэпшоты -- полезно
7) Статья про memory management in V8
8) Поля React Fiber
9) Поля VNode
10) Kevin Shiener - Sneaky Memory Leaks - Closures Vs. React Query
11) Kevin Shiener - Sneaky Memory Leaks - How the React Compiler won't save you

Рандомные материалы разного уровня давности, которые тоже пришлось изучить. Но здесь только любимое))
1) https://github.com/thlorenz/v8-perf/blob/master/gc.md
2) https://jayconrod.com/posts/55/a-tour-of-v8--garbage-collection
3) https://dev.to/jennieji/memory-management-in-v8-garbage-collection-and-improvements-18e6
4) https://mrale.ph/blog/2012/09/23/grokking-v8-closures-for-fun.html
5) https://github.com/danbev/learning-v8/blob/master/notes/heap.md

Итоги первого года работы над личным брендом

Завтра исполняется ровно год с даты создания этого канала.

Если говорить цифрами, то итоги этого года выглядят так:
- написано 118 постов;
- подготовлено 13 выступлений с 7 разными докладами;
- посещено 3 подкаста;
- организована 1 мини-конференция и 1 митап;
- проведён 1 прямой эфир;
- был создан и отправлен в неоплачиваемый отпуск 1 телеграм-бот))

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

Личный бренд = стимул для саморазвития.

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

Главная ценность — это люди.

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

Есть ли минусы у личного бренда?

Во-первых, постоянный страх ошибиться чатом))

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

Станет ли технического контента меньше?

Определённо нет! Я всё ещё разработчик, которому всё ещё приходится постоянно учиться. Завтра, в день рождения канала, выступлю на HolyJS с докладом про память в браузере, и выложу сюда ссылки на все материалы, которые я использовал при подготовке доклада.

Выступлю, если на сегодняшнем техчеке презентация запустится. А то я ноут с собой не взял))

Accessibility в телеге

Одной папки с каналами мне стало мало и я завела ещё две!

Главная accessibility-папка по цифровой доступности и инклюзии. Очень рекомендую подписаться на всех!

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

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

#каналы

Решил поделиться отличной подборкой каналов по доступности.

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

Про React DevTools, Core Web Vitals и вкладку Performance

В конце октября в Лондоне прошла конфа React Advanced. Пока ещё не все доклады оттуда выложены в свободный доступ, но несколько видосов уже есть.

Лично мне понравился доклад Perfecting Your Profiling о разных инструментах дебага. Расскажу вкратце, о чём именно говорилось в докладе:

React DevTools

Автор показал, как пользоваться профайлером и как его настроить. В качестве примера был показан кейс, в котором установка ширины элемента из state давала 256 рендеров, а хранение этой же ширины в ref.current.style.width уменьшило количество перерисовок в 128 раз (шок).

Core Web Vitals

В Chrome DevTools 129 расширение Core Web Vitals переехало во вкладку Performance.

В этой вкладке автор демонстрирует, как использование хука useDeferredValue (который по смыслу похож на debounce, но со спецификой React) улучшает показатель скорости отклика интерфейса — Interaction to Next Paint (INP).

Про INP, кстати, у меня даже был отдельный пост.

Ещё про вкладку Performance

Далее в докладе автор показывает, что его element.innerHTML работает слишком долго и куда он смотрел во вкладке Performance, чтобы это понять. При этом, замена .innerHTML на .textContent может ускорить отрисовку интерфейса более чем в 2 раза.

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

Мой доклад с FrontendConf 2024

В этом году на FrontendConf я выступал с докладом о том, как важно выстраивать грамотный процесс найма в вашей команде или компании и что может случиться, если этого не сделать.

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

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

Запись доклада уже доступна по ссылке на youtube

Выступаю в Казани с докладом про память в JS

12 октября в Казани пройдёт IT Community Day Сбера.

Там я расскажу доклад о том, сколько весит ваша вкладка, затрону Garbage Collector, утечки памяти и инструменты для анализа Heap Snapshot’ов.

Этот доклад будет на HolyJS, поэтому если есть что-то, что вам было бы интересно узнать про работу браузера с памятью, пишите об этом в комментариях — постараюсь добавить это в доклад))

Ну а если вы будете в Казани 12 октября — регистрируйтесь на IT Community Day, ведь помимо Frontend-стрима там ещё будут доклады по Java, DevOps, системному анализу, софтам и даже HR.

Как узнать, что у пользователя зависла вкладка?

Есть браузерный Reporting API, позволяющий настроить отправку метрик в случае, когда браузер экстренно завершает работу вкладки.

Работает это при помощи заголовка Reporting-Endpoints от бэка, в котором надо прописать адрес для сбора ваших метрик. Браузер будет отправлять на этот адрес отчёты о различных событиях:

- при попытке использования устаревшего функционала
- при нарушениях Content Security Policy
- при экстренном завершении работы вкладки (как раз когда пользователь видит экран Aw, Snap!)

При этом, если во время возникновения такого события у вас были открыты девтулзы, то собираемую браузером статистику можно увидеть в разделе Application -> Reporting API.

Работает это, увы, не везде, но хотя бы по пользователям Chrome и Edge можно понять, как часто они видят Aw, Snap! на вашем сайте.

Что нового за последние пару месяцев?

С конца июля я довольно плотно был занят закрытием рядовых рабочих задач: то ли с планированием промахнулись, то ли просто «такой сезон», но задач было так много, что у меня совсем не было времени следить за новинками индустрии.

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

Из интересного:

- вышел [email protected], хоть это и не совсем «фронтенд», но событие знаковое: предыдущий мажор был 10 лет назад!
В новой версии удалили некоторые устаревшие методы, обновили синтаксис описания маршрутизации запросов, упростили обработку ошибок и подняли минимальную версию Node до 18. Подробнее можно почитать здесь. А ещё советую глянуть доклад Всеволода Деткина про Elysia и другие альтернативы express.

- вышел [email protected] с поддержкой часовых поясов. За неделю после релиза даже успели выпустить 4.1.0 :)

- вышел [email protected], в котором добавили обновлённый Environment API и, что самое важное, поменяли цвета в консоли)

- на сайте Vercel вышло неплохое описание нововведений React 19. Можно читать перед собесами. Туда же — шпаргалка по React 19 от Kent C. Dodds

- вышел [email protected], причем бета уже содержит стабильные компоненты: переработанный Content Layer для подгрузки контента и Server Islands, позволяющие отрисовывать статичные страницы со встроенными динамическими данными. Ну и свои собственные переменные окружения добавили.

- 18-ая Safari вышла. С выходом этой версии нам становятся доступны, например, Style Queries и content-visibility. Ну и View Transitions API, но про него вы уже слышали, и не раз.

Что я упустил? Наверняка произошло ещё что-то интересное за последнее время)

Самые популярные npm-пакеты

Делюсь ссылкой на гугл-таблицу с рейтингом npm-пакетов: можно отсортировать по количеству скачиваний в неделю, по весу и по трафику.

По этой таблице видно, что из 10 самых популярных npm-пакетов целых 3 отвечают за цвет текста в терминале))
Вот что, оказывается, у разработчиков является самой частой задачей))

Ещё я недавно писал, что qs не нужен. А у него 70-е место по скачиваниям! Его устанавливают даже чаще, чем eslint, у которого только 249-е место. Это как?)

Ну и лично меня удивило, какую позицию в рейтинге занимает модуль emoji-regex. У него 30-е место по количеству установок, хотя для всяких тривиальных задач, типа моего бота, достаточно было бы обычной регулярки /\p{Emoji}/ или /\p{Extended_Pictographic}/

В общем, любопытная статистика)

Чего нам не хватает в HTML и CSS?

Этим летом команда хрома на конференции CSS Day провела опрос о том, каких фич в HTML и CSS больше всего не хватает разработчикам. И вот опубликовали топ 10 наиболее недостающих всем фич CSS)

Там была забавная идея с ::nth-letter. Это как ::first-letter, только круче — позволило бы стилизовать любой отдельный символ в слове. Не знаю, правда, где бы я это применил, но если развивать эту идею, то было бы неплохо получить подсветку синтаксиса в CSS. Или она уже есть? Или у нас только highlight.js?

Что ещё мне точно понадобилась бы, так это возможность анимировать высоту с height: auto. И вот, оказывается, в Chrome 129 у нас появится такая возможность благодаря interpolate-size и calc-size()

Кстати, удивительно, но среди 10 наиболее желаемых фич CSS даже нашлось место для очередного способа отцентрировать div. А ещё, если вы не согласны с результатами опроса, в нём всё ещё можно поучаствовать))

Ну а в качестве бонусного контента на сегодня — видео докладов с этой самой конференции CSS Day.

Как провалить собеседование на программиста. Поможет ли накрутка опыта и нейронки? Роль HR в найме? Обсуждаем в новом выпуске подкаста "Программируй или умри" с Антоном Непшой.

https://www.youtube.com/watch?v=zmfybH1U2MY

Сходил в гости на подкаст «Программируй или умри» к Владимиру Евстратову!

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

Спасибо Вове за приглашение!

Наткнулся сегодня на забавный баг: скрываю одну svg — ломается другая.

И это не какой-нибудь React, а простой CSS. Причём, разные способы скрытия иконок ломают их по разному, да ещё и работает это только в одну сторону — вторая иконка не ломает первую)

Причиной оказались неуникальные значения атрибута id в <clipPath> у иконок. В Safari, кстати, всё работает норм, Safari такое прощает) А вот в FireFox и Chrome косяк становится сразу виден. Набросал в codepen демку для наглядности. Но мой проект выглядит не так, если что))

И да, в моём случае иконки тянулись с CDN, поэтому руками им так просто id не уберёшь)) Так что в демке в качестве условности я нарочно использовал одинаковые id прямо в вёрстке

Подключайтесь на трансляцию MoscowCSS

Только что послушали выступление Анастасии Ярош про shadcn ui — отличный доклад, и с пользой, и с юмором, очень рекомендую!

Сейчас слушаем про медиа-запросы, а в конце мероприятия выступает мой коллега Николай Константинов с докладом про View Transition API :)