Мы на связи, заходите в эфир!

Чтобы услышать мою историю поиска работы и обсудить, как сейчас с трудоустройством за границу!

Подключиться можно ЗДЕСЬ

Спасибо большое всем участникам стрима и отдельно тем, кто задавал вопросы!

Завтра выкачу записи. Есть и видео, и просто аудио, как кому удобно 👍

#фишка дня

Отладка в Chrome только что стала проще, а вы и не знали!

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

Достаточно открыть девтулзы и жмакнуть по чекбоксу Emulate focused page на вкладке Rendering или Elements.

Как-то так:
https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page

Очень уютно!

#chrome #devtools

#стрим дня

Итак, запись вчерашнего стрима.

1. Мой путь к получению оффера в Финляндии, обсуждение необходимого уровня английского языка
2. Презентация @acceleracio (00:31:00)
3. Ответы на вопросы: Cover Letter, соответствие уровня занимаемой позиции, поиск работы в России (01:00:00)

Аудиоверсия и слайды в комментариях.

P. S. Ничего себе, в телеге распознаются таймкоды!

#статья дня

В заметке про работу с отменой запросов в React Query я лишь косвенно упомянул такую потрясающую штуку, как Abort Controller.

Зачем он вообще нужен?

Можно перестать слушать события, отменить ненужный запрос на сервер (и даже в девтулзах он пометится как canceled), отменить транзакцию, отменить вообще всё, что отменяется, да ещё сделать это стандартным способом!

Документация на MDN крайне скудна и не описывает и половину вариантов применения. Поэтому, нужно что-то ещё.

Про отмену событий мы уже писали, про React Query я упомянул выше... так что давайте для остальных примеров возьмём свежую статью Артёма Захарченко: https://kettanaito.com/blog/dont-sleep-on-abort-controller

1. Уже ставшие классическими примеры отмены событий и запросов
2. Отмена чего угодно вообще
3. AbortSignal.timeout для отработки, внезапно, таймаутов
4. AbortSignal.any для ситуаций, когда сигнал может поступить от разных контроллеров.

Учитывая, что для работы с Google AppsScript API у меня имеется самописный преобразователь коллбэков в промисы, мне и самому стоит дополнить реализацию поддержкой Abort Controller.

Так что статья как раз вовремя.

#javascript #abortcontroller

#статья дня

Как бы ты ни старался соблюдать гигиену кода в React, всё равно в какой-то момент получится тяжёлый для рендеринга компонент.

А что делают тяжёлые компоненты? Правильно, блокируют нам весь UI! И в этот момент мы понимаем, что же за конкурентный режим рендеринга такой, о котором постоянно твердят авторы...

Итак, чтобы вынести рендеринг в неблокирующий режим, в React имеются два хука: useTransition и useDeferredValue. И сегодня речь пойдёт о первом.

Конечно, можно просто посмотреть видеоиллюстрацию от Алекса Сидоренко, но и документация очень даже исчерпывающая: https://react.dev/reference/react/useTransition

Выглядит интересно? Не то слово! Но...

Всегда есть но :) Это же React. И господа-авторы на странице документации максимально схитрожопили (я не нашёл слова лучше), использовав мемоизацию на странице медленного компонента, и не пояснив, зачем.

А ведь без неё возврат из тяжёлого компонента на лёгкий будет происходить ровно так же медленно, как и переход на тяжёлый компонент!

Зато без блокировки. Гении, не иначе.

И по этому поводу имеется статья Нади Макаревич: https://www.developerway.com/posts/use-transition

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

В интересные времена живём.

#react #concurrent

#фишка дня

Да неужели! Да ну наконец-то!

Уже сколько нас кормят тем, что уже давно можно смело нативно валидировать формы, а нормального менеджера состояний в девтулзах так и не было. Пойди выставь что-то отличное от focus :)

Теперь же можно не только использовать тот же :user-valid, но и форсить его в девтулзах!

А ещё есть юзер-инвалид: https://www.tg-me.com/htmlshit/2760

Начиная с Chrome 129.

Вообще, секция про девтулзы — буквально моя самая любимая в блоге разработчиков Chrome: https://developer.chrome.com/blog/new-in-devtools-129

#chrome #devtools

#такое дня

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

А когда есть предубеждение, стараешься невольно найти подтверждение своим опасениям.

Например, у вас не возникало ощущения, что обязательное требование облачного аккаунта для использования такого продукта, как браузер, это как-то ненормально?

Или что концепция бустов, Boosts — это когда кто-то может сделать свой набор скриптов и правил для изменения поведения любого сайта — звучит как встроенный MITM?

Man in the middle, если что. Это вот: https://en.wikipedia.org/wiki/Man-in-the-middle_attack

И ведь так и оказалось! Автор xyzeva (я только знаю, что зовут её Ева) опубликовала результаты исследования безопасности Boosts и смогла воспроизвести атаку с подменой авторства буста на любое нужное ей.

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

Вот, почитайте: https://kibty.town/blog/arc/

TL;DR: они использовали Firebase максимально наивно.

Даже если не интересуетесь инфобезом, там прекрасная кошечка бегает за курсором.

Arc признали существование уязвимости, выкатили об этом пост и выплатили автору вознаграждение: https://arc.net/blog/CVE-2024-45489-incident-response

По счастью, предположительно никто не пострадал.

В общем, внимательно рассматривайте продукты, которые предлагают всё и сразу, just call my toll free number.

#security #browser

🚀 ИТМО назвал компании, которые активно развивают Open Source в России

Участники оценивались по количеству опенсорс-проектов в сфере ML/Data, их популярности, качеству репозиториев и активности контрибьюторов.

Лидером рейтинга с лучшими результатами стал Яндекс. Среди наиболее популярных решений:

CatBoost — библиотека для градиентного бустинга на деревьях решений, используемая для ускорения работы алгоритмов.
YTsaurus — мощная платформа для хранения и обработки больших данных, востребованная в различных отраслях.
YDB — отказоустойчивая распределённая SQL база данных, обеспечивающая высокую доступность и масштабируемость.

Также в топ вошли Сбер и Т-Банк, а в академической среде ИТМО, ВШЭ, МФТИ и Сколтех.

Подробности исследования на Хабре.

#статья дня

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

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

Да и вообще, интересно последить за ходом мысли при выборе технологий, поэтому, вот: https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/

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

Очень крутая работа, на самом деле.

#react #next #blog

#фишка дня

А заодно поддерживающая #статья.

Итак, анимация height до auto-значений!

Я не могу написать «я джва года ждал», потому что лично я ждал больше 12 лет!

Да, у нас была анимация min-height (максимально мерзко выглядящая). Да, год назад нам дали анимацию гридов, что скрашивало существование, но заставляло добавлять лишние обёртки.

И вот оно, свершилось! В Google Chrome 129 появилось свойство interpolate-size: allow-keywords, дающее возможность, полностью сохраняя обратную совместимость, включать интерполяцию контентозависимых свойств узлов до auto!

В них входят: width, height, min-content, max-content, fit-content и так далее.

Да, в остальных браузерах речи о поддержке пока не идёт, но это не та вещь, за которую стоит воевать. Ну не будет анимации и не будет, не страшно.

Кодпен с иллюстрации к посту: https://codepen.io/alinaki/pen/abezWpO

Только посмотрите, как просто:

:root {
  interpolate-size: allow-keywords;
}

p {
  transition: 1s;
  overflow: hidden;
}

p:not(:hover) {
  height: 5lh;
}

Да, мне ещё очень нравится единица измерения lh aka line-height. Ну просто красота.

И обещанная статья из блога разработчиков: https://developer.chrome.com/docs/css-ui/animate-to-height-auto

Будущее здесь, котаны!

#css #height #animation #auto

#рекомендация дня

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

Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.

Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.

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

Подход к обучению немного отличается от других курсов: сперва несколько уроков вас учат понимать алгоритмы и рисовать блок-схемы. После этого обучение становится более осмысленным.

Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂

Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.

Есть несколько бесплатных уроков, можно попробовать и пощупать.

Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.

Программа курса и бесплатные уроки доступны по ссылке.

#frontend #HTML #CSS #JavaScript

#codepen дня

К посту про interpolate-size: allow-keywords и о том, что теперь можно анимировать высоту, отлично подойдёт сегодняшний кодпен от Адама Аргайла.

Демо: https://codepen.io/argyleink/pen/BaXyJRL

Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).

Кстати, там же можно увидеть применение селектора :user-valid, а именно, концепции грязных полей: чтобы показать поле пароля в первый раз, надо сойти с поля ввода имени, blur; но после этого поле считается грязным и ввод пароля появляется моментально.

Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.

Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.

Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size

#css #animate #height

#статья дня

На картинке — не вырезка из учебника геометрии за 8 класс, а иллюстрация к описанию методики расчёта вырезания углов из ваших дивов и прочих секшенов.

И взято оно из очередной статьи Темани Афифа, посвящённой созданию различных фигур. У нас уже были звёзды, сердца, ленточки, треугольники.

И теперь пришёл черёд углов: https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask

И реализовано всё на CSS Mask: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Описываете маску, накладываете на фигуру — красота.

.shape {
  --r: 25px; /* the radius */
  --s: 40px; /* the size of the cut */
  
  --_m:/calc(2*var(--r)) calc(2*var(--r))
    radial-gradient(#000 70%,#0000 72%) no-repeat;
  mask:
    right calc(var(--s) + var(--r)) top 0 var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) 
     calc(-1*var(--r)) var(--r) no-repeat,
    conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);
}

Собственно, это весь код, дальше только параметры менять.

Как описать — прочитаете в статье. И да, геометрии 8-9 класса там достаточно :)

#css #figure #mask #clip

#фишка дня

Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.

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

Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.

Демо: https://codepen.io/alinaki/pen/abeOjKw

Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/

Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.

Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.

Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents

Спасибо Весу Босу за напоминание об этом.

#css #display #contents