14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#тип дня
Вышел TypeScript 5.4.
А это что значит? Что у нас теперь есть служебный тип NoInfer.
Коротко, зачем он нужен: с его указанием TS больше не будет пытаться угадать тип передаваемого аргумента. Например, если не указать тип массива ["red", "yellow", "green"], TS определит его как string[] и разрешит запихнуть туда значение "blue" или, что хуже, позволить вашему коду попытаться, например, это самое значение в нём найти:
function createStreetLight<C extends string>(colors: C[], defaultColor?: C) {
// ...
}
createStreetLight(["red", "yellow", "green"], "blue");
function createStreetLight<C extends string, D extends C>(colors: C[], defaultColor?: D) {
}
createStreetLight(["red", "yellow", "green"], "blue");
// ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.
function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) {
// ...
}
createStreetLight(["red", "yellow", "green"], "blue");
// ~~~~~~
// error!
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.
#такое дня
Playwright-код на иллюстрации — это ваш знак свыше чтобы начать писать тесты.
Нет тестов? Сделай первый прямо сейчас. Просто возьми и напиши один. Юнит, интеграционный, e2e — неважно.
Собственно, соус: небезызвестный в фронтенд-сообществе Кент Доддс (Kent C. Dodds) написал, на первый взгляд, глупый тест.
Но не всё так просто. И этот тест его спас.
E2E тест что значит? Значит, end-to-end, от точки до точки. Он не проверяет как работает конкретно ваше приложение.
Задача проверить, как работает система целиком.
И тут оказалось, что Кент просто неправильно сконфигурировал редиректы на сервере :) Не было бы теста — упал бы продакшен. И сиди думай потом.
В общем, котаны. Нет тестов — прямо сейчас сделайте свой первый. Хватит откладывать. Иди уже.
P. S. Это, кстати, напомнило мне уже с точки зрения ведения блога: не бывает постыдных записей или находок. Нет ничего стыдного признаться в том, что ты что-то прочитал в документации или сделал какую-то глупость.
#tests #e2e #playwright
#такое дня
Крайне показательное чтиво на ночь: исследование российского опенсорса.
https://research.nplus1.ru/
Довольно длинный обзор, но меня очень смутили три вещи:
1. Человек, который сделал скролл на этом сайте, ты что покушал в тот день?
2. 58,4% Считают, что опенсорс не имеет границ и не существует «российского опенсорса»
В смысле, 58,4? Почему так мало?
К счастью, изоляционистская риторика пока всё ещё однозначно осуждается.
3. Эти глаза, они там зачем?
Вообще, если продраться сквозь очень плохую реализацию плавного скролла, исследование весьма полезное.
А вы, котаны, контрибьютите в опенсорс? Как часто? На каком уровне?
#opensource #longread
#фишка дня
Стопудово вы делали эффекты как на видео через три div-а или span-а. Ну просто потому что трансформации на SVG это абсолютная боль.
Типа такого: https://codepen.io/alinaki/pen/abXpvyQ
Да, пример очень простой, но даже это на SVG бывает проблемно санимировать.
Хотя, казалось бы, для этого и предназначено.
А вся проблема в том, что для SVG определение координат для преобразований происходит немного иначе, нежели чем для элементов. Выходов из ситуации есть несколько.
Первый, от Аны Тюдор: исправить viewBox, поставив вместо 0, 0 (левый верхний угол) — -width/2,-height/2, соответственно, исправив остальные координаты.
Второй, интереснее, от Джея: указать следующие правила в CSS:
transform-box: fill-box;
transform-origin: 50% 50%;
С 7 по 12 марта пройдёт леденящий душу марафон о самом устрашающем языке программирования — JavaScript. Марафон отлично подойдёт для всех, кто давно хотел научиться новому, но боялся начать.
На 6 дней вы получите бесплатный доступ к тренажерам и полезным материалам HTML Academy.
Выполняйте задания, знакомьтесь с JavaScript и побеждайте все страшные баги на своём пути. Ну или просто знакомьтесь с JavaScript, так тоже можно. На каждом этапе помощь наставника, а в конце марафона разбор всех вопросов и сложностей в прямом эфире.
Среди участников мы проведем розыгрыш крутых подарков и предоставим скидки на наши лучшие продукты.
Узнать подробнее.
#codepen дня
Кажется, мне пришла пора признать, что чекбоксы и радиокнопки официально стали полностью веб-элементами.
Что я имею в виду: поля ввода, чекбоксы, радиокнопки, кнопки вообще, филдсеты, селекты — они были (и частично до сих пор являются) замещаемыми элементами. Вы указываете браузеру "хочу тут видеть такой-то инпут", а рисуется инпут уже операционной системой, её виджетами.
Сейчас эта грань максимально размывается: поля ввода уже рисуются через Shadow DOM, кнопки каждый оформляет как хочет, fieldset недавно наконец-то избавился от родовых болезней.
И только select до сих пор рисуется совершенно отдельно. Кстати, это одна из причин, почему селекты не видно в трансляции экрана на митингах :)
Возвращаясь к чекбоксам и радио: до недавнего времени по вышеозначенным причинам к ним нельзя было применять, например, псевдоэлементы. Что весьма ограничивало возможности по стилизации.
Теперь же это не так. Google Chrome уже давно не стесняясь разрешает псевдоэлементы на ваших чекбоксах, Safari и Firefox тоже недавно подтянулись.
В итоге, в сочетании с appearance: none можно творить что-то такое: https://codepen.io/alvaromontoro/pen/OJqKGBz
Я, кстати, уже говорил ведь, что в стандарт пытаются пропихнуть атрибут switch, чтобы окончательно распрощаться с чекбоксами?
Вот такое (работает только в Safari TP): https://nt1m.github.io/html-switch-demos/
Не могу сказать, что я не скучаю по однозначности старых добрых галочек в квадратиках...
#css #switch #checkbox
#заметка дня
Интересно наблюдать, как с приходом Bun на сцену JavaScript-сред расшевелились все остальные.
Например, вот Parcel.js. Казалось бы, ну сборщик и сборщик, но начиная с его 2 версии каждая минорная удивляет!
В версии 2.12.0 появилась, например, поддержка макросов: https://parceljs.org/blog/v2-12-0/
Что такое макросы? Это код, который выполняется в момент сборки, оставляя за собой константы, регулярки и всё прочее, что можно сгенерировать. В примере выше (из новости) по переданным строкам генерируется регулярка. Удобно, если нужно создать кучку однотипных виджетов, баннеров, сборок под конкретных клиентов.
И вот появились они сначала как раз в Bun.
Ну и LightningCSS тоже не стоит на месте. Если раньше он успешно заменял собой PostCSS, то начиная с этой версии — понимает директиву import и собирает ваш CSS в кучу, без препроцессоров.
Очень ждём поддержку React Server Components, потому что это будет первая "ванильная" реализация. В смысле, не в составе фреймворка.
Пробуем, котаны!
#parcel #bundler #macros
🖥 45+ IT-компаний ищут стажёров и джунов
Карьерные форумы "Найти IT" — это шанс пообщаться с топовыми компаниями и получить оффер. Среди работодателей будут Сбер, Яндекс, Kaspersky, Avito и многие другие.
Что вас ждёт:
🔹 Мастер-классы, кейсы и Q&A-сессии.
🔹 Розыгрыш призов среди участников.
🔹 Обширное пространство для общения и обмена опытом.
🔹 Карьерные консультации от HR-ов.
Участие бесплатное!
Выбирайте город и регистрируйтесь👇🏻
📍 Москва — 6 марта
📍 Санкт-Петербург — 6 апреля
📍 Новосибирск — 10 апреля
#фишка и #статья дня
Надоело проигрывать битву z-index? Используй BFG от CSS: infinity.
Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: /channel/htmlshit/1565
Вместо
border-radius: 9999px;
border-radius: calc(infinity * 1px);
calc(infinity) = calc(1 / 0)
calc(1px / 0) = calc(infinity * 1px)
#заметка дня
Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.
Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.
К счастью, решение что для v5 React Router, что для v6 одинаковое:
function ScrollToTop() {
const { pathname } = useLocation();
useLayoutEffect(() => {
document.documentElement.scrollTo(0, 0);
}, [pathname]);
return null;
}
<BrowserRouter>
<Routes>
...
</Routes>
<ScrollToTop/>
</BrowserRouter>
Изучил CSS, но не знаешь JS?
Вместо кодинга дома ты играешь в CS?
Ты пытаешься прогать и часто тупишь?
Или на одном месте долго сидишь?
Подпишись на канал!
Стань сильнее всех тех,
Кто не начал сегодня,
Загубил свой успех!
Действуй чётко и быстро!
Не смотря на других!
Они сделали выбор...
Но ТЫ не из таких!
Ты бесстрашный Frontend'ер,
Программист всех миров!
IT-воин всесильный,
И властитель компов!
Я верю в тебя!
Я тебе помогу!
И ты станешь успешным, если я подскажу!
⭐️⭐️⭐️
Меня зовут - Андрей Шопинский и я ментор по Frontend-разработке.
🔴 1 марта в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале на тему:
⚠️ Как Junior-разработчику пройти собеседование по JavaScript?
❗️Подписывайся на мой канал, чтобы не пропустить эфир!
Реклама. Шопинский Андрей Олегович ИНН 312834439322. erid: LjN8KE4P7
#статья дня
Уже известный нам Ахмад Шадид продолжает выдавать шикарное.
Сейчас он осваивает интерактив в своих статьях. В прошлый раз это была статья о размере кликабельных областей в виджетах: https://ishadeed.com/article/target-size
А теперь — о :has(). Мне кажется, в CSS нет более популярного селектора в последние годы :)
Встречайте: https://ishadeed.com/article/css-has-guide
Да, стоит напомнить, что :has официально поддерживается во всех мейнстримных браузерах, но тот же Firefox ESR или Safari 15 его не поддерживают, так что применяйте вдумчиво.
#css #has
#такое дня
Каждый раз когда тебе кажется, что ты плохой разработчик, помни: скорее всего так и есть это текстовое поле в Google Maps делал разработчик из, очевидно, Google. С зарплатой много выше твоей.
Я, честно, не знаю, как это может кого-то успокоить. Но вдруг.
#видео дня
Я, конечно, не дизайнер, но Figma пользуюсь, естественно. И постоянно на связи с нашим штатным дизайнером команды.
Иногда мне кажется, что возможности Figma почти безграничны, а потом оказывается, что это и правда так.
Например, вы знали, что есть плагины, позволяющие синхронизировать ваши макеты с реальными данными? Например, из Google Sheets.
Вот и я не знал.
Пока не увидел это: https://www.youtube.com/watch?v=3nXbUH9YYgo
Ссылка на обучающий файл из презентации: https://www.figma.com/community/file/1207693268826001427
Сам плагин: https://www.figma.com/community/plugin/735770583268406934/google-sheets-sync
Это, конечно, просто взрывает мозг. Но, с другой стороны, я прямо сейчас нахожусь в ситуации, когда слишком продвинутые прототипы сильно мешают работать.
Расширенные прототипы великолепно подходят для проведения юзер-сессий, но без адекватного каталога виджетов и состояний они не имеют смысла и делают жизнь разработчиков сложнее.
В любом случае, подобные синхронизаторы отлично подходят чтобы сразу протестировать дизайн без кода и, вообще, понять, работает ли он.
Пользуемся, котаны! И делитесь вашим мнением о расширенных прототипах.
#figma #design #prototype
💙🎓Прокачайте скилы c Холдингом Т1! Запускаем программу найма в формате ИТ-интенсива.
Открытые школы Т1 — это новый образовательно-карьерный формат, объединяющий offer week и обучение без отрыва от работы.
🤚Поможем улучшить навыки и освоить новые перспективы, если вы готовы к переменам в карьере и хотите присоединиться к команде Холдинга Т1 — лидера* ИТ-рынка, а также имеете опыт работы от 1 года в одном из направлений подбора.
Направления:
📊Системный аналитик
☕️Разработчик Java
📱Разработчик JS+React
🪲Ручной и автотестировщик
📌Как это работает?
🔹Подайте заявку на сайте
⬇️Рассмотрим резюме, если твой профиль подойдет, то попросим пройти тестирование👌 При успешном прохождении — зачислим в группу
🔹Лучшим назначим интервью и направим оффер!
Формат обучения: онлайн (8 часов в неделю)
Программа длится 1 месяц
🏳️Принимаем заявки до 25 февраля!
*По версии CNews Analytics 2022, TAdviser 2021 и RAEX 2023
Реклама. ООО "Т1". ИНН 7720484492.
Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик».
⏰ Когда: уже 14 марта в 19:00 по мск.
Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».
Мы ищем молодого талантливого Support Frontend Developer'a на поддержку и развитие уже запущенных проектов в студию Chipsa.
Если ты:
Стремишься к постоянному росту;
Обожаешь создавать и развивать удивительные веб-приложения и сайты;
Внимателен к деталям;
Знаешь, что такое Barba.js, GSAP, и CSS-методология БЭМ;
Горишь желанием воплощать анимационные идеи;
Имеешь базовые знания TypeScript и опыт работы с React, Next.js, и API;
Хочешь работать над захватывающими проектами.
Хотим найти pre-junior / junior разработчика, ориентировочная вилка по з/п 45-65К, но рассмотрим все варианты.
Отправляй нам свое резюме на @chipsahr или на почту hr@chipsa.ru.
⁉️ Только начинаешь свой путь в IT, и для трудоустройства не хватает реального опыта работы?
Знакомая история? Тогда давай к нам! 🚀
PREAX — онлайн-стажировка для frontend-разработчиков.
Помогаем накопить реальный 💪 опыт, формируем кадровый резерв для работодателей и привлекаем лучших к коммерческим заказам.
ЧТО ВНУТРИ?
🔖 Пять больших проектов. Пополнишь портфолио крутыми кейсами.
🔖 Спринты и дедлайны. Научишься рассчитывать время и укладываться в сроки.
🔖 Работа с легаси. Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг.
🔖 Пачка код-ревью. Поделишься опытом и увидишь, как сделать свой код еще лучше.
🔖 Поддержка сообщества. Сможешь задать вопрос и получить совет, если нужна помощь.
🔖 Новый стек технологий. Закрепишь на практике и расширишь стек технологий.
🔖 Гибкий график. Сможешь выстраивать нагрузку, легко совмещая её с работой или учебой.
В итоге получишь реальный опыт работы в команде!
Попробуй! 1-й спринт — 🆓 БЕСПЛАТНО!
Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755
#codepen дня
Гори всё синим пламенем!
Эх, жаль, в своё время на проекте, где подобное было уместно, я не шибко много знал о шейдерах.
Впрочем Awwwards получили :)
Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.
Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa
Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂
Спасибо Ксении Кондрашёвой.
#webgl #shader #бородач
#такое дня
Сейчас ASCII-графика это такой арт и способ передачи некоторых мемов. Но в 80х и 90х символы, встроенные в шрифт, использовались сплошь и рядом.
Увидеть игру, собранную целиком на символах из разных шрифтов, было чем-то совершенно обычным. Да и до сих пор в консоли можно увидеть прогресс загрузки из символов "\/|-", образующих спиннер.
Вот казалось бы, 2024 год на дворе. Можно вывести любую картинку. Консоли тоже давно не работают только в текстовом режиме...
Оттого удивительнее, что в Windows до сих пор прогресс загрузки в момент установки системы отрисовывается шрифтами! Segoe Boot, если быть точным.
В Half Life и Counter-Strike символы граффити, кстати, тоже.
Раз они упаковали это в шрифт, значит нам можно и нужно это использовать!
Предлагаю посмотреть забавный пример использования: https://z2r-yt.github.io/Fake-Windows-Update-Screen/
Теперь вы знаете, что делать, когда кто-то забыл заблокировать экран.
P. S. Очень, очень, рекомендую почитать комментарии к коду выше. Это потрясающе.
#font #spinner
👉 Как прорубить хотя бы «форточку» за бугор специалистам в РФ?
Более 100 000 разработчиков уехало из России — это факт. И эта цифра только растет с каждым днем.
Но почему? Все они работали с зарубежными компаниями, которые платят в 3-4 раза больше.
А кто остался — либо стали меньше зарабатывать, либо вообще остались без работы.
Но разве нет другого компромисса?
💁♂️ Теперь есть.
🔥 Salary — сервис оплаты работы фрилансерам и разработчикам из-за рубежа, который:
— Соблюдает все законодательные требования, связанные с международными финансовыми операциями;
— Обеспечивает безопасность финансовых транзакций и защиту информации;
— Обрабатывает транзакции не более 24 часов в рабочие дни, как правило, 1-2 часа;
— Предоставляет документацию по каждой выплате.
➡️ Это ваша «форточка» для получения оплаты из Европы и США: https://clck.ru/39CSHu
#молния дня
Как нам всем уже известно, в Евросоюзе Apple даст возможность использовать не только разные браузеры (в смысле, на разных движках), но и разные магазины приложений.
Я, кстати, сильно удивлен, что не все в курсе, что все браузеры на iOS используют единый системный движок WebKit под капотом.
Мне иногда пытаются доказать, что Chrome рендерит иначе, но это лишь постобработка.
Ладно, давайте к делу. Какое-то время назад поступила информация, что Apple мстит за эти решения Евросоюзу и хочет отказаться от PWA (progressive web apps) под предлогом, что для разных движков они не могут гарантировать такой же уровень безопасности песочницы.
Следует отметить, что PWA и правда умеют работать абсолютно независимо друг от друга, обладая каждое своим кешем и сервисами. Так что можно смело держать несколько аккаунтов в банках и тех же соцсетях, например.
Так или иначе, решение вызвало неистовую бурю возмущения. В итоге буквально вчера прошло официальное заявление от Apple о том, что PWA останутся, но работать будут все так же на WebKit.
Тут следует отметить, что, хоть на Android прогрессивные веб-приложения могут работать каждое в своем браузере, в магазин могут быть загружены только те, что используют системный движок Chrome WebView.
Так что хотя и можно повозмущаться в сторону iOS, решение лично мне кажется достаточно адекватным.
Победа или нет, котаны?
#такое дня
Невозможно заниматься фронтендом и не знать о существовании ресурса css-tricks.com
Когда-то он был одним из крупнейших ресурсов по верстке, взлетев достаточно быстро и собрав вокруг себя огромное сообщество заинтересованных людей.
Автором проекта, кстати, был создатель codepen.io, Крис Койер
Так вот, два года назад он продал проект самому неожиданному покупателю — DigitalOcean.
Казалось бы, где виртуальные сервера, а где — верстка. Но в продаже была своя логика: вокруг DigitalOcean тоже имеется большое сообщество и их статьи-руководства очень хороши. Была надежда, что дело пойдет.
Ну и бабки, конечно, камон.
Но... нет. CSS-Tricks.com де-факто мёртв. Сначала убрали выпускающего редактора, потом и всю остальную редакцию. Последние статьи вышли в начале прошлого года и в них нет вообще никакого смысла.
И вот, наконец, Крис Койер приоткрыл завесу о том, как происходила покупка и как он пытался — внезапно — вернуть контроль над сайтом: https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/
Подобные материалы выходят не так часто. Понять, что стоит за успешным проектом и почему после продажи многие проекты умирают — это весьма интересно.
Просто иногда они умирают, растворяясь в новой организации. А иногда — абсолютно ни за что :(
Спасибо, что хоть не закрыли архив.
Фронтам в помощь⚠️
Изучающим фронт и уже знающим будет очень полезно
React, Vue, обучающие статьи, коды, мемы, работы с codepen, всё то, что тебе так нужно, ты найдешь тут — твой очаг разработки 💻
Запрыгивай в автобус на канал Frontend Гид, чтобы быть в тонусе разработки📊
#фишка дня
Сейчас возвращается мода (и, по-моему, это правильно) на сохранение состояния вашего веб-приложения в адресной строке браузера.
Буквально — используя параметры строки запроса (query string parameters).
Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.
А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.
А очень просто!<a href="">Reload</a>
Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108
В спеке буквально прописано, что такая ссылка ведёт на текущий документ, со всеми его параметрами запроса.
Не пишите лишнего, котаны!
#http #html #trick #бородач
#расширение дня
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
code --install-extension pomber.git-file-history
code недоступна, решение тут.
#инструмент дня
Думаю, все в курсе, что если нужно поставить изображение-заглушку, можно воспользоваться сервисами для т. н. плейсхолдеров: /channel/htmlshit/431
Но, помимо задачи поставить временное изображение, существует и задача отобразить что-то, пока грузится основная картинка.
Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip
Например, SQIP: https://github.com/axe312ger/sqip
Произносится сквиб, Гарри Поттер объяснит
Задача показать вместо оригинального изображения что-то передающее хоть какую-то информацию об исходнике.
И вот новое: BlurHash от Wolt: https://blurha.sh/
Для генерации используется хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов).
Плагины есть под любые мыслимые средства, от Eleventy до Flutter.
Если в вашем приложении или сайте требуется загрузить огромное число изображений — подобные техники очень вам помогут ускорить процесс загрузки для пользователя, попутно сделав его более, кхрм, цветным.
#css #img #placeholder
29 февраля 12:00 МСК
Вебинар «Надежное облако для команды разработки: как увеличить маржинальность проектов»
❓ Как облачные технологии могут стать одним из дополнительных источников заработка для команды разработки
❓ Как вы можете повысить маржинальность проектов ваших клиентов, расположив их в облаке ITGLOBAL.COM
Приглашаем разработчиков приложений, сервисов, сложных AI-проектов на вебинар, посвященный размещению проектов разработки в облачной инфраструктуре.
Вебинар будет полезен вам, если:
🔹 вы реализуете проекты по разработке;
🔹 вам требуются свободные ресурсы для тестирования и запусков;
🔹 вы хотите сократить time-to-market ваших проектов;
🔹 вам требуются более мощные ресурсы для работы с AI, HPC и графикой;
🔹 вам важно снизить издержки на инфраструктуру для разработки и production.
🔗 Регистрация
#тип дня
Говоришь такой коллеге: «Ты зачем столько классов насоздавал для такой простой вещи? Используй CSS-переменные».
А он приходит к тебе с картинкой выше и грустный весь.
Что мы делаем в таком случае?
Да очень просто, дополняем интерфейс CSSProperties, чтобы до реакта, наконец, дошло:
declare module 'react' {
interface CSSProperties {
[key: `--${string}`]: string | number
}
}
#заметка дня
Практически всегда в различных обучающих видео и курсах по React вы могли наблюдать следующую фразу: “В JSX надо писать className когда вы хотите задать класс HTML-элементу потому что слово class является зарезервированным”.
Это является правдой лишь отчасти. На самом же деле это просто большое упрощение.
Первый DOM API, построенный на ES3, действительно запрещал переопределение “el.class = smth“.
Но начиная с ES5 (года эдак 2009-11) это исправлено. Да, нельзя присвоить переменной имя class, но свойства объекта никто не запрещал.
Более того, в контексте JSX это не имеет смысла даже относительно ES3. JSX же будет транслирован, возможно даже в “аналоговый” setAttribute("class”, …), что, конечно, работает вообще везде.
А ещё можно вспомнить чёртов htmlFor…
Разработчики React решили отталкиваться не от атрибутов DOM-элементов, а от свойств объектов. Для большинства атрибутов разницы нет. Но есть исключения:
— многословные атрибуты (maxlength, contenteditable) преобразуются в camelCase (maxLength). Обратите внимание на отсутствие дефиса, это тоже легаси первых имплементаций DOM
— SVG не отражает атрибуты как свойства объекта
— Веб-компоненты тоже не отражают, и, более того, могут вообще не документировать свои атрибуты и свойства
— Поля форм могут иметь одинаковые атрибуты, несущие совершенно разную семантическую нагрузку.
Естественно, это очень важно для SSR, пересылать-то приходится атрибуты.
Но до тех пор пока всё "просто работает", люди привыкли считать эти случаи граничными, незначащими. Но это не так: работать с ними приходится чаще, чем кажется.
На самом же деле разработчики React в начале своего пути решили брать XML-подобные атрибуты, а не DOM. For the greater good.
А потом…
…случился ES6, где стало можно создавать объекты в сокращённой форме: {class}. И вот тут старая добрая проблема зарезервированных слов всплыла с новой силой.
Короче говоря, не доверяйте самым простым объяснениям, даже если они приводят к чему-то похожему на правду. Реальность веселее.
Это был вольный перевод треда от Yehuda Katz с включением Дэна Абрамова.
#react #jsx #бородач