This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq
Используем функцию модуля:
Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.
2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:
Пример: https://codepen.io/alinaki/pen/VwRMpPY
Но... Chrome опять в обломе.
Да, и в первом и во втором вариантах на коне Firefox и Safari. Как я уже недавно писал, парни из Chrome взяли привычку реализовывать только то, что можно красиво оформить в пост. И реализовали тригонометрические функции, забыв про базу.
Потому нам ничего не остаётся кроме как...
3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR
И секрет будет в правиле:
Всем шахмат, котаны :)
#css #trick #math #бородач
Как заставить элемент изменять свою ширину... ступенчато?
Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.
И сегодня у нас аж несколько вариантов, как этого добиться.
1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq
Используем функцию модуля:
width: calc(95vmin + -1*mod(95vmin, 15px));
Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.
2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:
min-width: round(95vmin,15px);
Пример: https://codepen.io/alinaki/pen/VwRMpPY
Но... Chrome опять в обломе.
Да, и в первом и во втором вариантах на коне Firefox и Safari. Как я уже недавно писал, парни из Chrome взяли привычку реализовывать только то, что можно красиво оформить в пост. И реализовали тригонометрические функции, забыв про базу.
Потому нам ничего не остаётся кроме как...
3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR
И секрет будет в правиле:
grid-template-columns: repeat(auto-fill, 15px);
Всем шахмат, котаны :)
#css #trick #math #бородач
👍27❤1
#фишка дня
Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.
Потому что писать noopener не надо.
Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.
Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.
Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.
#eslint #security #anchor
Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.
Потому что писать noopener не надо.
Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.
Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.
Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.
#eslint #security #anchor
👍17❤1
#ссылка дня
Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!
Во всяком случае, так считает автор блога Comicss: https://comicss.art/
Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.
Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.
Максимально забавный подход.
#css #art #бородач
Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!
Во всяком случае, так считает автор блога Comicss: https://comicss.art/
Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.
Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.
Максимально забавный подход.
#css #art #бородач
👍13
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
И #тред дня, и #статья дня... Сегодня всё и сразу от Джоша Комо.
И речь пойдёт о недооценённом хуке в React: useDeferredValue.
Итак, некоторое время назад Джош выпустил свой инструмент для создания красиво выглядящих теней (да-да, drop-shadow просто уже недостаточно). И одной из проблем инструмента стала... дёрганая реакция на движение ползунков. Как будто мало FPS.
Начав разбирать проблему, Джош понял, что событие onChange происходит очень часто, за это время надо успеть сгенерировать тень, потом отрисовать её, потом вставить код в редактор для копирования. А редактор, естественно, ещё пытается этот самый код подсветить.
Но что нам нужно? Нам ведь сначала нужен результат, а уже потом — код. Так почему бы не заполнить код чуть позже, не нагружая систему?
И именно для этого и нужен хук useDeferredValue. Данные молучим только когда основной процесс рендеринга завершится. Буквально ленивое выполнение.
Собственно, тред и статья если кто предпочитает подробности. Там, как всегда, шикарно.
Будьте разумно ленивыми, котаны!
#react #hook
И #тред дня, и #статья дня... Сегодня всё и сразу от Джоша Комо.
И речь пойдёт о недооценённом хуке в React: useDeferredValue.
Итак, некоторое время назад Джош выпустил свой инструмент для создания красиво выглядящих теней (да-да, drop-shadow просто уже недостаточно). И одной из проблем инструмента стала... дёрганая реакция на движение ползунков. Как будто мало FPS.
Начав разбирать проблему, Джош понял, что событие onChange происходит очень часто, за это время надо успеть сгенерировать тень, потом отрисовать её, потом вставить код в редактор для копирования. А редактор, естественно, ещё пытается этот самый код подсветить.
Но что нам нужно? Нам ведь сначала нужен результат, а уже потом — код. Так почему бы не заполнить код чуть позже, не нагружая систему?
И именно для этого и нужен хук useDeferredValue. Данные молучим только когда основной процесс рендеринга завершится. Буквально ленивое выполнение.
Собственно, тред и статья если кто предпочитает подробности. Там, как всегда, шикарно.
Будьте разумно ленивыми, котаны!
#react #hook
👍14❤3
#инструмент дня
А приходилось ли вам, котаны, писать код, который должен был немного по-разноме реагировать на разные условия существования?
Не просто десктоп-мобила, а наличие, отсутствие и скорость сети, число процессоров, объём памяти, поддержку видеокодеков... далее — везде.
Так вот, если не приходилось — то обязательно придётся. И на помощь в этом придёт набор хуков от Google Labs под общим названием React Adaptive Loading Hooks & Utilities: https://github.com/GoogleChromeLabs/react-adaptive-hooks
Естественно, все эти хуки умеют определять, запущены они в SSR или нет.
Куча демок в наличии.
К слову, следует напомнить, что определение сети — штука не самая надёжная. Наш ультимейт фейл с React Query это только подтверждает: https://t.me/htmlshit/2347
#react #hooks
А приходилось ли вам, котаны, писать код, который должен был немного по-разноме реагировать на разные условия существования?
Не просто десктоп-мобила, а наличие, отсутствие и скорость сети, число процессоров, объём памяти, поддержку видеокодеков... далее — везде.
Так вот, если не приходилось — то обязательно придётся. И на помощь в этом придёт набор хуков от Google Labs под общим названием React Adaptive Loading Hooks & Utilities: https://github.com/GoogleChromeLabs/react-adaptive-hooks
Естественно, все эти хуки умеют определять, запущены они в SSR или нет.
Куча демок в наличии.
К слову, следует напомнить, что определение сети — штука не самая надёжная. Наш ультимейт фейл с React Query это только подтверждает: https://t.me/htmlshit/2347
#react #hooks
❤6🤩2
#молния дня
Доступен react-compiler. Только что представили на конференции ReactConf. Кто не понял, тот поймёт: https://react.dev/learn/react-compiler
Исходники: https://github.com/facebook/react/tree/main/compiler
Доступен react-compiler. Только что представили на конференции ReactConf. Кто не понял, тот поймёт: https://react.dev/learn/react-compiler
Исходники: https://github.com/facebook/react/tree/main/compiler
react.dev
React Compiler – React
The library for web and native user interfaces
🤩10❤2🤡1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Стопудово вы делали эффекты как на видео через три div-а или span-а. Ну просто потому что трансформации на SVG это абсолютная боль.
Типа такого: https://codepen.io/alinaki/pen/abXpvyQ
Да, пример очень простой, но даже это на SVG бывает проблемно санимировать.
Хотя, казалось бы, для этого и предназначено.
А вся проблема в том, что для SVG определение координат для преобразований происходит немного иначе, нежели чем для элементов. Выходов из ситуации есть несколько.
Первый, от Аны Тюдор: исправить viewBox, поставив вместо 0, 0 (левый верхний угол) — -width/2,-height/2, соответственно, исправив остальные координаты.
Второй, интереснее, от Джея: указать следующие правила в CSS:
Правило transform-box исправит положение координатной сетки, от которой мы уже сменим дефолтную точку отсчёта для преобразований — transform-origin.
По-умолчанию, кстати, transform-box установлен как view-box. То есть, в нашем примере, заполняет лишь 24 пикселя по каждой стороне🤡
А вот и, собственно, пример:
https://codepen.io/alinaki/pen/YzBNyEz
Не бойтесь анимировать SVG, котаны. Просто не полагайтесь на дефолт.
#css #transition #svg #бородач
Стопудово вы делали эффекты как на видео через три 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%;
Правило transform-box исправит положение координатной сетки, от которой мы уже сменим дефолтную точку отсчёта для преобразований — transform-origin.
По-умолчанию, кстати, transform-box установлен как view-box. То есть, в нашем примере, заполняет лишь 24 пикселя по каждой стороне
А вот и, собственно, пример:
https://codepen.io/alinaki/pen/YzBNyEz
Не бойтесь анимировать SVG, котаны. Просто не полагайтесь на дефолт.
#css #transition #svg #бородач
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#игра дня
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?
Вы по адресу!
Интерактивное руководство: https://bezier.method.ac/
Я, правда, так ничего и не понял. Ничего не получилось. 🙁
#vector #bezier #tool #learn #бородач
Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?
Вы по адресу!
Интерактивное руководство: https://bezier.method.ac/
Я, правда, так ничего и не понял. Ничего не получилось. 🙁
#vector #bezier #tool #learn #бородач
#баг дня
Один браузер для всех это же так прекрасно, не правда ли?
И... нет. К сожалению, этот мир не будет прекрасным. И характеризуется такое положение некоторыми багами, которые разработчики 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 #бородач
Один браузер для всех это же так прекрасно, не правда ли?
И... нет. К сожалению, этот мир не будет прекрасным. И характеризуется такое положение некоторыми багами, которые разработчики 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 #бородач
👍10🤬5🤩4
This media is not supported in your browser
VIEW IN TELEGRAM
#video дня
Видео с прошедщего ReactConf ещё только предостоит посмотреть, не получилось сделить за лайвом, но плюс-минус параллельно с ReactConf шёл же ещё Google I/O 2024! Меня, правда, там больше интересовала ситуация с Flutter, но тем не менее, новинки веба тоже были.
И одна из них — плавные/анимированные переходы скоро будут (да и уже) возможны не только между экранами одного приложения, но и между разными страницами и даже доменами! Т. н. Cross-document view transitions.
Видео с анонсом: https://www.youtube.com/watch?v=eY6C_-aDdTo
Документация: https://developer.chrome.com/docs/web-platform/view-transitions
Пример: https://view-transitions.netlify.app/stack-navigator/mpa-prerender/ (Chrome Canary)
Как всегда, в выигрыше разработчики ПО для киосков :) Им-то обновить движок легче всего.
#css #view #transition
Видео с прошедщего ReactConf ещё только предостоит посмотреть, не получилось сделить за лайвом, но плюс-минус параллельно с ReactConf шёл же ещё Google I/O 2024! Меня, правда, там больше интересовала ситуация с Flutter, но тем не менее, новинки веба тоже были.
И одна из них — плавные/анимированные переходы скоро будут (да и уже) возможны не только между экранами одного приложения, но и между разными страницами и даже доменами! Т. н. Cross-document view transitions.
Видео с анонсом: https://www.youtube.com/watch?v=eY6C_-aDdTo
Документация: https://developer.chrome.com/docs/web-platform/view-transitions
Пример: https://view-transitions.netlify.app/stack-navigator/mpa-prerender/ (Chrome Canary)
Как всегда, в выигрыше разработчики ПО для киосков :) Им-то обновить движок легче всего.
#css #view #transition
👍6
#такое дня
Парень с блеском справляется с тестовым заданием, но два раза подряд не появляется на техническом собеседовании.
Первый раз — часовые пояса, ок. Договорились, переназначили. И снова не пришёл.
Ну, думаю, нам не очень нужен кандидат, не умеющий в часовые пояса.
К слову, если ты считаешь себя лид-фронтом или добротным фуллстеком — нам очень надо 🙂
Парень с блеском справляется с тестовым заданием, но два раза подряд не появляется на техническом собеседовании.
Первый раз — часовые пояса, ок. Договорились, переназначили. И снова не пришёл.
Ну, думаю, нам не очень нужен кандидат, не умеющий в часовые пояса.
К слову, если ты считаешь себя лид-фронтом или добротным фуллстеком — нам очень надо 🙂
👍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 #svg #gif #animation
Тот случай, когда статья девятилетней почти давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/
1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.
Вечнозеленая, я бы сказал, статья.
#css #svg #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 script to ignore list: для пропуска конкретного скрипта
• Add all third-party scripts to ignore list: игнорировать все сторонние скрипты разом (Chrome 112).
Подробнее, как обычно, нужно читать в блоге разработчиков Chrome.
Рекомендую туда почаще заглядывать, котаны.
#devtools #ignore #sourcemaps #бородач
Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?
А надо чаще!
Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов node_modules, заканчивая средствами аналитики и журналирования.
В какой-то момент глубина погружения начинает раздражать. Мы же при разработке исходим из того, что сторонние скрипты протестированы, отлажены и, говоря об аналитике и журналировании, не влияют на окружение. Чистые в общем. Что же делать?
Очень просто! Смотрим иллюстрацию. У вас есть три варианта:
• Add directory to ignore list: для пропуска node_modules, если у вас, конечно, карта кода подключена.
• Add script to ignore list: для пропуска конкретного скрипта
• Add all third-party scripts 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