Будни разработчика

2023-05-11 19:01:55 Нашли кое-что действительно интересное для тех, кто хочет создавать тренды в мире технологий. 
South HUB — кэмп для руководителей в ИТ, который пройдет с 12 по 16 июня в Сочи. 
400 настоящих и будущих CTO соберутся на Курорте Красная Поляна, чтобы обменяться знаниями, опытом и найти партнеров. Нетворкинг начинается ещё до кэмпа: все CTO уже собрались здесь. 
Кэмп про профессиональное развитие с акцентом на work-life-balance. Программа включает в себя обширную конференц-часть, отдельный день спорта, серию вечеринок и детскую научно-исследовательскую конференцию. 

Где встречаемся?
На высоте 960 всесезонного горного Курорта Красная Поляна
Вся информация тут. Открыть/Комментировать

2023-05-11 16:07:02 #статья дня

Каким-то образом View Transition API ещё ни разу не освещался на канале. Пришло время это исправить! Особенно учитывая, что соответствующая статья разработчиков Chrome как раз недавно обновилась: https://developer.chrome.com/docs/web-platform/view-transitions/

Итак, что такое View Transitions API?

Это, собственно, то, что раньше называли page transition: анимации перехода между страницами сайта. Реализовывалось по разному в разных системах, помните PJAX? Хорошая была штука.

Ну да ладно, в общем, суть в том, что теперь можно браузеру объяснить, как конкретно применять изменения к DOM, какой элемент за каким закреплять и что делать с остальными.

В статье огромное число примеров, от простейших патчей дерева до анимирования нескольких элементов разом.

Бебебе анимации замедляют работу! Да, но замедляют, отвлекая пользователя. Об этом, впрочем, будет выложен видосик.

Ну и ещё пример анимации грида: https://codepen.io/bramus/pen/VwEXmqd

Никаких плагинов! Будущее здесь

#css #view #transition Открыть/Комментировать

2023-05-10 11:36:17 #баг дня

Один браузер для всех это же так прекрасно, не правда ли?

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

Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451

TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах.

К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти

Зачем это было сделано? Ну им нужно было продвигать свои фичи для логина, управления паролями, адресной книги.

Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete.

Дискуссия ещё и перегибает палку там и очень часто. Потрясающее чтение, рекомендую.

#chrome #google #evil Открыть/Комментировать

2023-05-09 13:29:29 #фишка дня

Является ли CSS языком программирования?

Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко.

Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo

Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции.

Тригонометрические вон завезли недавно, а математические пока только в Safari.

Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля:

--abs: max(var(--a), -1*var(--a));

Поняли, что тут произошло? Выбрали максимальное между a и -a. Очевидно, что положительное всегда будет максимальным, его и берём.

Теперь к сути дела. Давайте реализуем round:

@property --round {
syntax: '';
initial-value: 0;
inherits: false;
}

--round: var(--a);

Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание).

А как сделать floor — округление вниз? Как-как:

--floor: calc(var(--a) - .5);

А ceil — округление вверх?

--ceil: calc(var(--a) + .5);

Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа.

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

Пока можете подумать, где это применить

#css #types

1.5K viewsSergey Bekharsky, edited  10:29

Открыть/Комментировать

2023-05-08 18:46:45 #ссылка дня

"The journey of the React Component" — "Путь компонента в React", буквально — вот так незамысловато называется интерактивный проект Алекса Сидоренко: https://alexsidorenko.com/react-journey

Его цель — провести вас по всем основным процессам, происходящим во время рендера компонента, включая хуки. На данный момент рассмотрен только useState, но начинание уже очень крутое. Кому-то, возможно, будет понятнее, чем чтение статей и исходников React.

Правда, я не сразу понял, что где-то можно кликать, а где-то нет... ️️️️️ Но то такое.

#react #render #tutorial Открыть/Комментировать

2023-05-08 14:02:25 Не удержался, простите. Открыть/Комментировать

2023-05-07 21:48:14 #ссылка дня

Я не особо люблю монстров вроде Next.js. В особенности, он и ему подобные фреймворки вводятся как дефолт, но, надо признать, для индустрии они делают достаточно много.

Итак, все же любят примеры, верно? Давайте взглянем на подборку и статью от Адди Османи. Что же в ней такого?

А тем, что тут и Next.js-роутер и Server Components, с пылу с жару от Next.js 13: https://addyosmani.com/blog/react-server-components-app-router/

Пора осваивать гибридный подход, господа! :)

#react #nextjs #servercomponents Открыть/Комментировать

2023-05-06 11:29:03 #книга дня

Я уже писал года два назад о книге
Web Browser Engineering, описывающей разработку простого браузера с нуля: https://browser.engineering/

Но они же не останавливались, и последняя на данный момент часть — про встраиваемые элементы — вышла в марте.

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

Но в любом случае, чтение достаточно хардкорное :)

#python #dev #browser Открыть/Комментировать

2023-05-05 10:05:41 #фишка дня

Полтора года назад я разгонял тему про реализацию виджета аккордеона. Ну или collapsible, иначе говоря: https://t.me/htmlshit/591

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

Но тут такое дело... в Firefox уже достаточно давно можно было анимировать высоту ячейки грида через grid-template-rows: https://t.me/htmlshit/834

И вот теперь, наконец, можно и в Chrome и в Safari! Ура, дамы и господа!

Codepen c примером: https://codepen.io/chriscoyier/pen/wvxwgae

Счастье есть, короче говоря.

#css #accordion #collapsible #бородач Открыть/Комментировать

2023-05-04 17:22:33 #codepen дня

May the Fourth be with you!

https://codepen.io/jh3y/pen/abzvyXG Открыть/Комментировать