#такое дня
Парень с блеском справляется с тестовым заданием, но два раза подряд не появляется на техническом собеседовании.
Первый раз — часовые пояса, ок. Договорились, переназначили. И снова не пришёл.
Ну, думаю, нам не очень нужен кандидат, не умеющий в часовые пояса.
К слову, если ты считаешь себя лид-фронтом или добротным фуллстеком — нам очень надо 🙂
Парень с блеском справляется с тестовым заданием, но два раза подряд не появляется на техническом собеседовании.
Первый раз — часовые пояса, ок. Договорились, переназначили. И снова не пришёл.
Ну, думаю, нам не очень нужен кандидат, не умеющий в часовые пояса.
К слову, если ты считаешь себя лид-фронтом или добротным фуллстеком — нам очень надо 🙂
👍5
#фишка дня
Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.
Давайте сделаем свою. Для любого сайта.
Секунд за пять.
1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11
Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW
Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».
Впрочем, он же пишет, что повторить подобное поведение ему не удалось.
Я у себя включил этот сниппет в браузерное расширение, позволяющее применить любой CSS к любому сайту. И иногда включаю, по настроению.
#css #darktheme #filter #бородач
Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.
Давайте сделаем свою. Для любого сайта.
Секунд за пять.
1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11
Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW
Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».
Впрочем, он же пишет, что повторить подобное поведение ему не удалось.
Я у себя включил этот сниппет в браузерное расширение, позволяющее применить любой CSS к любому сайту. И иногда включаю, по настроению.
#css #darktheme #filter #бородач
👍15👎2
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.
Т. е. имея такую анимацию:
и
Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm
#css #animation #keyframes
Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.
Т. е. имея такую анимацию:
box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}
и
animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm
#css #animation #keyframes
👍12
#ссылка дня
Подробное руководствопо выгоранию входу во фронтенд в 2024 году.
Прекрасно оформленное и проиллюстрированое.
От базы сетей до популярных фреймворков и подготовки резюме. Все баззворды и их пояснение в одном месте.
Пользуемся:
https://frontendmasters.com/guides/front-end-handbook/2024/
#guide #frontend
Подробное руководство
Прекрасно оформленное и проиллюстрированое.
От базы сетей до популярных фреймворков и подготовки резюме. Все баззворды и их пояснение в одном месте.
Пользуемся:
https://frontendmasters.com/guides/front-end-handbook/2024/
#guide #frontend
👍10❤2🤩1
#фишка дня
Если вам не пофиг на удобство пользования формами и сайтами вообще, то вы хоть раз, но задумывались о порядке перехода клавишей Tab по полям, ссылкам и кнопкам. Сидели, расставляли tabindex, что-то игнорировали, где-то ставили ловушки фокуса... Потом сидишь, как дурак, табаешь. Так вот.
И в Chrome, и в Firefox можно включить отображение порядка tabindex! Причём, в Firefox проще: DevTools — Accessibility — Show Tabbing Order. Осторожно, на больших сайтах рендер занимает время!
А вот в Chrome называется и работает похожая опция иначе: Show source order. Почему не Tabbing? Потому что суть у неё малость иная.
В то время, как Tabbing order показывает порядок следования по всем интерактивным элементам, Source order показывает порядок следования узлов в выбранном родителе. Но свои задачи решает хорошо.
А так ещё можно воспользоваться расширениями вроде Polypane или Taba11y.
#a11y #firefox #chrome #бородач
Если вам не пофиг на удобство пользования формами и сайтами вообще, то вы хоть раз, но задумывались о порядке перехода клавишей Tab по полям, ссылкам и кнопкам. Сидели, расставляли tabindex, что-то игнорировали, где-то ставили ловушки фокуса... Потом сидишь, как дурак, табаешь. Так вот.
И в Chrome, и в Firefox можно включить отображение порядка tabindex! Причём, в Firefox проще: DevTools — Accessibility — Show Tabbing Order. Осторожно, на больших сайтах рендер занимает время!
А вот в Chrome называется и работает похожая опция иначе: Show source order. Почему не Tabbing? Потому что суть у неё малость иная.
В то время, как Tabbing order показывает порядок следования по всем интерактивным элементам, Source order показывает порядок следования узлов в выбранном родителе. Но свои задачи решает хорошо.
А так ещё можно воспользоваться расширениями вроде Polypane или Taba11y.
#a11y #firefox #chrome #бородач
👍26
#статья дня
Тот случай, когда статья девятилетней почти давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/
1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.
Вечнозеленая, я бы сказал, статья.
#css #noscript #gif #animation
Тот случай, когда статья девятилетней почти давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/
1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.
Вечнозеленая, я бы сказал, статья.
#css #noscript #gif #animation
👍10🤩1
#библиотека дня
Скажи мне, узнаёшь ли стиль на картинке, и я скажу, сколько тебе лет.
Ну или что ты учился в пост-советской школе, ха-ха.
Так или иначе, TuiCSS. Буквально — Turbo Vision UI CSS: https://github.com/vinibiavatti1/TuiCss
Не знаю, зачем оно. Но мало ли, приступ ностальгии или вечеринка в стиле.
Мне больше по душе NES.css, его для ретро-игр использовать милое дело: https://nostalgic-css.github.io/NES.css/ 😍
#ui #css
Скажи мне, узнаёшь ли стиль на картинке, и я скажу, сколько тебе лет.
Ну или что ты учился в пост-советской школе, ха-ха.
Так или иначе, TuiCSS. Буквально — Turbo Vision UI CSS: https://github.com/vinibiavatti1/TuiCss
Не знаю, зачем оно. Но мало ли, приступ ностальгии или вечеринка в стиле.
Мне больше по душе NES.css, его для ретро-игр использовать милое дело: https://nostalgic-css.github.io/NES.css/ 😍
#ui #css
❤15👍5
#заметка дня
Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?
А надо чаще!
Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов node_modules, заканчивая средствами аналитики и журналирования.
В какой-то момент глубина погружения начинает раздражать. Мы же при разработке исходим из того, что сторонние скрипты протестированы, отлажены и, говоря об аналитике и журналировании, не влияют на окружение. Чистые в общем. Что же делать?
Очень просто! Смотрим иллюстрацию. У вас есть три варианта:
• Add directory to ignore list: для пропуска node_modules, если у вас, конечно, карта кода подключена.
• Add noscript to ignore list: для пропуска конкретного скрипта
• Add all third-party noscripts to ignore list: игнорировать все сторонние скрипты разом (Chrome 112).
Подробнее, как обычно, нужно читать в блоге разработчиков Chrome.
Рекомендую туда почаще заглядывать, котаны.
#devtools #ignore #sourcemaps #бородач
Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?
А надо чаще!
Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов node_modules, заканчивая средствами аналитики и журналирования.
В какой-то момент глубина погружения начинает раздражать. Мы же при разработке исходим из того, что сторонние скрипты протестированы, отлажены и, говоря об аналитике и журналировании, не влияют на окружение. Чистые в общем. Что же делать?
Очень просто! Смотрим иллюстрацию. У вас есть три варианта:
• Add directory to ignore list: для пропуска node_modules, если у вас, конечно, карта кода подключена.
• Add noscript to ignore list: для пропуска конкретного скрипта
• Add all third-party noscripts to ignore list: игнорировать все сторонние скрипты разом (Chrome 112).
Подробнее, как обычно, нужно читать в блоге разработчиков Chrome.
Рекомендую туда почаще заглядывать, котаны.
#devtools #ignore #sourcemaps #бородач
👍22❤3
#ссылка дня
Хотите флагов? Их есть у меня!
https://flagpack.xyz/
Больше 250 флагов в комплекте с исходниками в Figma и Sketch. Ну и, понятное дело, компоненты для React, Vue и Svelte. PNG и SVG.
Присутствуют забавные модификаторы в виде разного вида градиентов, если основного стиля недостаточно.
Лицензированы по MIT.
#flags #icons #design
Хотите флагов? Их есть у меня!
https://flagpack.xyz/
Больше 250 флагов в комплекте с исходниками в Figma и Sketch. Ну и, понятное дело, компоненты для React, Vue и Svelte. PNG и SVG.
Присутствуют забавные модификаторы в виде разного вида градиентов, если основного стиля недостаточно.
Лицензированы по MIT.
#flags #icons #design
👍18
#codepen дня
Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.
Так вот.
Прелесть этой сетки логотипов в том, что она весьма сбалансирована.
Недостаточно просто взять и сделать все изображения одной ширины или одной высоты. Тут думать надо.
И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO
Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.
Кто-нибудь находил нечто подобное в виде плагина для Figma?
Где-то в закладках у меня лежала информация о подготовке изображений для такой сетки... завтра найду и закину.
#js #grid #img #бородач
Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.
Так вот.
Прелесть этой сетки логотипов в том, что она весьма сбалансирована.
Недостаточно просто взять и сделать все изображения одной ширины или одной высоты. Тут думать надо.
И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO
Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.
Кто-нибудь находил нечто подобное в виде плагина для Figma?
Где-то в закладках у меня лежала информация о подготовке изображений для такой сетки... завтра найду и закину.
#js #grid #img #бородач
👍14
#фишка дня
Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.
Кто-то добавит при этом, что скринридеры могут ассоциировать лейбл с элементом ввода и пользователи с нарушением зрения могут легко сориентироваться в вашей форме.
Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ
Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!
Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.
Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.
А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.
#html #button #label #бородач
Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.
Кто-то добавит при этом, что скринридеры могут ассоциировать лейбл с элементом ввода и пользователи с нарушением зрения могут легко сориентироваться в вашей форме.
Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ
Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!
Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.
Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.
А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.
#html #button #label #бородач
❤4
Media is too big
VIEW IN TELEGRAM
#статья дня
Если кто-то из вас ещё не знаком с комик-стрипами xkcd, я настоятельно рекомендую проникнуться.
Ещё можно пойти и проникнуться классическим Flash-мемом из 2005 года Blue Ball Machine (осторожно, звук).
А теперь к делу. Народу из xkcd показалось забавным на 1 апреля 2024 года выпустить нечто подобное, но помасштабней.
Виральности проекта хватило на то, чтобы буквально просто интегрировать интерактивную сумасшедшую машину в стандартную сетку комиксов: The Machine.
Так вот, авторы выпустили статью, описывающую создание машины начиная от прототипа и базовых решений до отладки: https://chromakode.com/post/xkcd-machine/
Естественно, уже никакого Flash :) Всем заправляет физический движок Rapier, написанный на Rust и собранный в WASM. Данные из движка транслируются в контекст React и, как можно догадаться, всё остальное приложение написано на React.
Да, всё, что вы можете увидеть в машине — это элементы DOM!
Им просто хотелось понять лимиты DOM. Не нащупали.
И самое крутое — проект открытый, можно посмотреть исходники, почерпнуть полезности и собрать: https://github.com/xkcd/incredible
В общем, моё почтение.
#machine #xkcd #react #rust
Если кто-то из вас ещё не знаком с комик-стрипами xkcd, я настоятельно рекомендую проникнуться.
Ещё можно пойти и проникнуться классическим Flash-мемом из 2005 года Blue Ball Machine (осторожно, звук).
А теперь к делу. Народу из xkcd показалось забавным на 1 апреля 2024 года выпустить нечто подобное, но помасштабней.
Виральности проекта хватило на то, чтобы буквально просто интегрировать интерактивную сумасшедшую машину в стандартную сетку комиксов: The Machine.
Так вот, авторы выпустили статью, описывающую создание машины начиная от прототипа и базовых решений до отладки: https://chromakode.com/post/xkcd-machine/
Естественно, уже никакого Flash :) Всем заправляет физический движок Rapier, написанный на Rust и собранный в WASM. Данные из движка транслируются в контекст React и, как можно догадаться, всё остальное приложение написано на React.
Да, всё, что вы можете увидеть в машине — это элементы DOM!
Им просто хотелось понять лимиты DOM. Не нащупали.
И самое крутое — проект открытый, можно посмотреть исходники, почерпнуть полезности и собрать: https://github.com/xkcd/incredible
В общем, моё почтение.
#machine #xkcd #react #rust
🤩4👍1
#заметка дня
Сегодня у моего коллеги случился aha moment. Ближайший перевод на русский... кто-то говорит "Эврика", но это не совсем то.
Короче, до него наконец-то дошло, почему я просил его не включать элементы-обёртки в компоненты. Аж "спасибо" написал и пожаловался на коллег в новой команде, куда его временно перевели.
Под элементами-обёртками я имею в виду, например, различные виды карточек.
Тут могла бы быть ссылка на компонент Card из Chakra UI, но это не совсем то.
В общем, карточка, Card, в неком UI представляет из себя контейнер, который имеет заголовок, границу и поля. Всё, что внутри — тело компонента, полезная нагрузка.
Что делают разработчики? Правильно, делают Card частью компонента, упихивая и полезную нагрузку и обёртку в одно целое.
Что делают разработчики когда им требуется использовать полезную нагрузку в другом месте?
Правильно, переопределяют стили Card! Кто кастомным классом, кто через css-проперти.
Я понимаю, дамы и господа, что сейчас скажу очевидную вещь, но я почему-то не вижу, что ей пользуются: обёртка не должна быть частью полезной нагрузки!
Тем более, стандартная обёртка из UI-кита.
Тем более, если эта обёртка каким-то образом влияет на положение элемента в пространстве: внешние отступы, позиционирование, прилепляемость.
И пример, конечно, вот так вот — не надо:
Надо вот так:
Сегодня у вас тут коробка, а завтра — sticky-коробка, а послезавтра — компонент участвует в вертикальном списке. Будете набрасывать стили на коробку? Конечно же нет. Используйте композицию.
Сегодня у моего коллеги случился aha moment. Ближайший перевод на русский... кто-то говорит "Эврика", но это не совсем то.
Короче, до него наконец-то дошло, почему я просил его не включать элементы-обёртки в компоненты. Аж "спасибо" написал и пожаловался на коллег в новой команде, куда его временно перевели.
Под элементами-обёртками я имею в виду, например, различные виды карточек.
Тут могла бы быть ссылка на компонент Card из Chakra UI, но это не совсем то.
В общем, карточка, Card, в неком UI представляет из себя контейнер, который имеет заголовок, границу и поля. Всё, что внутри — тело компонента, полезная нагрузка.
Что делают разработчики? Правильно, делают Card частью компонента, упихивая и полезную нагрузку и обёртку в одно целое.
Что делают разработчики когда им требуется использовать полезную нагрузку в другом месте?
Правильно, переопределяют стили Card! Кто кастомным классом, кто через css-проперти.
Я понимаю, дамы и господа, что сейчас скажу очевидную вещь, но я почему-то не вижу, что ей пользуются: обёртка не должна быть частью полезной нагрузки!
Тем более, стандартная обёртка из UI-кита.
Тем более, если эта обёртка каким-то образом влияет на положение элемента в пространстве: внешние отступы, позиционирование, прилепляемость.
И пример, конечно, вот так вот — не надо:
const CustomField = () => (
<Box mb={2}>
<input />
</Box>
<CustomField />
Надо вот так:
const CustomField = () => <input />
<Box mb={2}>
<CustomField />
</Box>
Сегодня у вас тут коробка, а завтра — sticky-коробка, а послезавтра — компонент участвует в вертикальном списке. Будете набрасывать стили на коробку? Конечно же нет. Используйте композицию.
👍14❤6🤩1
#тип дня
Что делать если вам нужно создать тип, параметры которого служат для передачи в библиотечную функцию? Aka тип аргументов не торчит наружу?
Не делайте это ручками, используйте служебный тип Parameters!
Песочница
#typenoscript #utility
Что делать если вам нужно создать тип, параметры которого служат для передачи в библиотечную функцию? Aka тип аргументов не торчит наружу?
Не делайте это ручками, используйте служебный тип Parameters!
const createPerson = ({
firstName,
lastName
}: {
firstName: string,
lastName: string
}) => ({
firstName,
lastName
})
type CreatePersonParams = Parameters<typeof createPerson>[0];
const params: CreatePersonParams = {
firstName: 'John',
lastName: 'Doe'
};
Песочница
#typenoscript #utility
www.typenoscriptlang.org
Documentation - Utility Types
Types which are globally included in TypeScript
👍13🤡3❤2🤬1
#библиотека дня
Мне очень нравится концепция командного интерфейса. Я даже не говорю сейчас о консоли (командной строке), я говорю о панели команд Sublime Text, VS Code и macOS Spotlight.
Если вы не знаете, что это — это комбинация клавиш, которая вызывает некое поле ввода, куда можно вводить названия пунктов меню, расширений, каких-то скрытых действий или настроек.
Почему нравится? Потому что поиск происходит в fuzzy-манере, мне не нужно помнить точное название пункта меню и/или команды. Я просто ввожу что примерно хочу сделать. Очень уютно.
Так вот, некоторые веб-приложения становятся настолько огромны, что было бы неплохо иметь подобный командный интерфейс. И вот сегодняшняя библиотека предназначена как раз для этого: https://github.com/albingroen/react-cmdk
Буду у себя внедрять, задолбало мышевозить и придумывать на каждый чих по горячей клавише.
#command #lib #ui #ux #бородач
Мне очень нравится концепция командного интерфейса. Я даже не говорю сейчас о консоли (командной строке), я говорю о панели команд Sublime Text, VS Code и macOS Spotlight.
Если вы не знаете, что это — это комбинация клавиш, которая вызывает некое поле ввода, куда можно вводить названия пунктов меню, расширений, каких-то скрытых действий или настроек.
Почему нравится? Потому что поиск происходит в fuzzy-манере, мне не нужно помнить точное название пункта меню и/или команды. Я просто ввожу что примерно хочу сделать. Очень уютно.
Так вот, некоторые веб-приложения становятся настолько огромны, что было бы неплохо иметь подобный командный интерфейс. И вот сегодняшняя библиотека предназначена как раз для этого: https://github.com/albingroen/react-cmdk
Буду у себя внедрять, задолбало мышевозить и придумывать на каждый чих по горячей клавише.
#command #lib #ui #ux #бородач
👍10👎1
#фишка дня
Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!
Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)
Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.
#devtools #chrome #performance
Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!
Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)
Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.
#devtools #chrome #performance
👍15❤3🤩3
#статья дня
Даже не одна статья, а целая серия из пяти. Автор — Артём Сапегин.
И серия статей эта — о тестировании в React. От лучших практик и ответа на вопрос, зачем тестировать вообще (кстати, зачем?), до описания работы с Jest, Enzyme, React Testing Library (ныне уже стандартный способ), Cypress и Playwright.
Ссылка на первую статью цикла: https://sapegin.me/blog/react-testing-1-best-practices/
Надо отметить, что начало цикла — это 2020 год (камень в огород Артёма: это было весьма сложно вычислить, нужны даты), но каждая из статей была не раз обновлена.
Ну и с тех пор Enzyme практически перестали использовать, во всяком случае в моём кругу. Если у вас иная информация — поделитесь.
В любом случае, труд масштабный, монументальный даже, и стоит ознакомления.
#react #testing
Даже не одна статья, а целая серия из пяти. Автор — Артём Сапегин.
И серия статей эта — о тестировании в React. От лучших практик и ответа на вопрос, зачем тестировать вообще (кстати, зачем?), до описания работы с Jest, Enzyme, React Testing Library (ныне уже стандартный способ), Cypress и Playwright.
Ссылка на первую статью цикла: https://sapegin.me/blog/react-testing-1-best-practices/
Надо отметить, что начало цикла — это 2020 год (камень в огород Артёма: это было весьма сложно вычислить, нужны даты), но каждая из статей была не раз обновлена.
Ну и с тех пор Enzyme практически перестали использовать, во всяком случае в моём кругу. Если у вас иная информация — поделитесь.
В любом случае, труд масштабный, монументальный даже, и стоит ознакомления.
#react #testing
👍20
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…
Не та ветка, не туда закоммитили, не те файлы, случайно грохнули ветку, зря запушили, не то сообщение, забыли вернуть работу из stash…
Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!
Ссылка: https://github.com/Bhupesh-V/ugit
КДПВ говорит сама за себя.
#git #бородач
Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…
Не та ветка, не туда закоммитили, не те файлы, случайно грохнули ветку, зря запушили, не то сообщение, забыли вернуть работу из stash…
Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!
Ссылка: https://github.com/Bhupesh-V/ugit
КДПВ говорит сама за себя.
#git #бородач
❤9👍3
#инструмент дня
Я сегодня решил написать пост, не отходя от кассы.
Итак, преамбула: проект развивается 10 лет, с 2014 года. Стек: Google AppsScript, JavaScript, TypeScript, jQuery, React, RSPack.
Когда я пришёл в 2019 году в компанию, основной JS-файл представлял из себя монстра на 40 000 строк. Да-да, монолитный файл, в котором люди ворочали селекторы с помощью jQuery!
И это только фронтенд-часть.
Сказать, что я офигел, устроившись на работу, это ничего не сказать. Но что делать.
Дождался Рождества, когда все разъехались и не могли бы мне помешать, а мне толком некуда было, и распилил монолит. Потом начали переводить какие-то части на React, собирать и рендерить их по-отдельности, внедрять feature-флаги для разделения пользователей, экспериментировать... весёлый хаос.
С последним редизайном проект окончательно перешёл на React в смысле рендера (не бизнес-логики и контроля, но это поправимо).
Поскольку, переход произошёл довольно таки радикально, с созданием новой точки входа (entrypoint), естественно, образовалась куча мёртвых экспортов, от которых даже WebStorm-у немного стало плохо.
И сегодня я, наконец, разрулил эту проблему инструментом Knip: https://knip.dev/
Отображает все мёртвые (неиспользуемые) файлы, мёртвые экспорты, зависимости. Легко конфигурируется, хотя прекрасно работает и без этого (конфигурация заключается в настройке точек входа, если у вас дефолтные — не парьтесь).
Итог — минус 10000 строк и 30 неиспользуемых файлов. Считаю, отличный результат. Стало легче ориентироваться.
Ну и по пути нашёл файл, который так-то стоило бы вернуть в оборот...🫠
Прежде чем вы скажете, что это задача ESLint, вот, почитайте: https://github.com/typenoscript-eslint/typenoscript-eslint/issues/371
ESLint справляется с определением мертвых импортов, но никак не экспортов и файлов вообще. И было решено этого не делать.
В общем, естественно, рекомендую, котаны!
#js #ts #cleanup #unused
Я сегодня решил написать пост, не отходя от кассы.
Итак, преамбула: проект развивается 10 лет, с 2014 года. Стек: Google AppsScript, JavaScript, TypeScript, jQuery, React, RSPack.
Когда я пришёл в 2019 году в компанию, основной JS-файл представлял из себя монстра на 40 000 строк. Да-да, монолитный файл, в котором люди ворочали селекторы с помощью jQuery!
И это только фронтенд-часть.
Сказать, что я офигел, устроившись на работу, это ничего не сказать. Но что делать.
Дождался Рождества, когда все разъехались и не могли бы мне помешать, а мне толком некуда было, и распилил монолит. Потом начали переводить какие-то части на React, собирать и рендерить их по-отдельности, внедрять feature-флаги для разделения пользователей, экспериментировать... весёлый хаос.
С последним редизайном проект окончательно перешёл на React в смысле рендера (не бизнес-логики и контроля, но это поправимо).
Поскольку, переход произошёл довольно таки радикально, с созданием новой точки входа (entrypoint), естественно, образовалась куча мёртвых экспортов, от которых даже WebStorm-у немного стало плохо.
И сегодня я, наконец, разрулил эту проблему инструментом Knip: https://knip.dev/
Отображает все мёртвые (неиспользуемые) файлы, мёртвые экспорты, зависимости. Легко конфигурируется, хотя прекрасно работает и без этого (конфигурация заключается в настройке точек входа, если у вас дефолтные — не парьтесь).
Итог — минус 10000 строк и 30 неиспользуемых файлов. Считаю, отличный результат. Стало легче ориентироваться.
Ну и по пути нашёл файл, который так-то стоило бы вернуть в оборот...
Прежде чем вы скажете, что это задача ESLint, вот, почитайте: https://github.com/typenoscript-eslint/typenoscript-eslint/issues/371
ESLint справляется с определением мертвых импортов, но никак не экспортов и файлов вообще. И было решено этого не делать.
В общем, естественно, рекомендую, котаны!
#js #ts #cleanup #unused
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤2
Мне кажется, Артём выстроил шикарную аналогию размера бандла с весом туристического снаряжения и отлично показал проблему затрат в целом. Читаем!
❤5