#инструмент дня
Кто слышал о Modernizr? Поднимите руки 🙋
В общем, этот инструмент тестирует возможности браузеров на поддержку каких-либо фишек HTML5/CSS3 и далее и позволяет, например, условно подключать полифиллы или применять какие-нибудь иные методы обхода. Особенно удобно когда `@supports`-правила могут не работать или — сюрприз — не поддерживаться вообще.
Ну и одной из фишек является добавление классов со списком поддерживаемых фич. Вроде
На рынке он давно, потому интересно, какие же есть альтернативы.
И вот свежий проект SupportsCSS. Сфера его работы в целом такая же, как у модернайзера, но ориентирован уже на современные селекторы CSS. Так сказать, стряхнуть лишнее.
Как всегда, следует помнить, что оба инструмента не полифиллы, но подсказка.
#css #supports #modernizr #бородач
Кто слышал о Modernizr? Поднимите руки 🙋
В общем, этот инструмент тестирует возможности браузеров на поддержку каких-либо фишек HTML5/CSS3 и далее и позволяет, например, условно подключать полифиллы или применять какие-нибудь иные методы обхода. Особенно удобно когда `@supports`-правила могут не работать или — сюрприз — не поддерживаться вообще.
Ну и одной из фишек является добавление классов со списком поддерживаемых фич. Вроде
js flexbox flexboxlegacy canvas canvastext webgl и так далее.На рынке он давно, потому интересно, какие же есть альтернативы.
И вот свежий проект SupportsCSS. Сфера его работы в целом такая же, как у модернайзера, но ориентирован уже на современные селекторы CSS. Так сказать, стряхнуть лишнее.
Как всегда, следует помнить, что оба инструмента не полифиллы, но подсказка.
#css #supports #modernizr #бородач
👍12
#фишка дня
Так, котаны мои хорошие, чтобы начать процедуру отладки, например, по клику на элементе, вам вообще не надо идти в Elements 👉 Event listeners, искать там click, искать нужный файл, или, ещё хуже, сразу начинать ковыряться в коде... Сейчас всё расскажу.
Открываем девтулзы, ползём в Sources, открываем в сайдбаре справа раздел Event Listener Breakpoints и выбираем событие click в ветке Mouse. Всё, вы прекрасны, все довольны.
Пользуемся 💝️️️️️️
#devtools #debug #бородач
Так, котаны мои хорошие, чтобы начать процедуру отладки, например, по клику на элементе, вам вообще не надо идти в Elements 👉 Event listeners, искать там click, искать нужный файл, или, ещё хуже, сразу начинать ковыряться в коде... Сейчас всё расскажу.
Открываем девтулзы, ползём в Sources, открываем в сайдбаре справа раздел Event Listener Breakpoints и выбираем событие click в ветке Mouse. Всё, вы прекрасны, все довольны.
Пользуемся 💝️️️️️️
#devtools #debug #бородач
👍25❤8
У Вали шикарный канал, а rspack мы используем в продакшене и посматриваем на Rollup для бакенд-части проекта. Теперь будем посматривать и на Rolldown.
Forwarded from Валя читает ишью
Rolldown: a rust port of Rollup
У вебпака есть rspack, а у ролапа будет Rolldown.
Сейчас проходит ViteConf (я, кстати, не рекомендую смотреть такие штуки в лайве, лучше потом в 1.5× промотать на ютубе) и Эван Ю анонсировал Rolldown — порт ролапа на расте.
Основная цель — заменить esbuild и Rollup в Vite незаметно для конечных юзеров.
Интересно, что в разработке участвуют ex-rspack разработчики, а Лукас Таегерт-Акинсон, мэйнтэйнер ролапа, выступает в роли консультанта. Обещают в открытом доступе до конца года.
Меня долгое время смущало, что в JS-тулинге появилась двойственность: го и раст. Проектов на расте, конечно, больше, но esbuild очень успешный проект. Ну что ж, посмотрим как это повлияет на расстановку сил, но кажется раст начинает побеждать.
Слайды доклада вот тут.
А вот сам доклад.
P.S. За новость спасибо @Safort
У вебпака есть rspack, а у ролапа будет Rolldown.
Сейчас проходит ViteConf (я, кстати, не рекомендую смотреть такие штуки в лайве, лучше потом в 1.5× промотать на ютубе) и Эван Ю анонсировал Rolldown — порт ролапа на расте.
Основная цель — заменить esbuild и Rollup в Vite незаметно для конечных юзеров.
Интересно, что в разработке участвуют ex-rspack разработчики, а Лукас Таегерт-Акинсон, мэйнтэйнер ролапа, выступает в роли консультанта. Обещают в открытом доступе до конца года.
Меня долгое время смущало, что в JS-тулинге появилась двойственность: го и раст. Проектов на расте, конечно, больше, но esbuild очень успешный проект. Ну что ж, посмотрим как это повлияет на расстановку сил, но кажется раст начинает побеждать.
Слайды доклада вот тут.
А вот сам доклад.
P.S. За новость спасибо @Safort
👍9❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
Соскучились по хорошим дейтпикерам? Да по ним невозможно не соскучиться.
Итак, сегодня на обзоре https://easepick.com/
Чем хорош?
- Нет зависимостей
- Легковесный
- Написан на TypeScript
- Есть удобный конфигуратор
- Поддержка плагинов, изначально поставляется с прицелом на их использование
Стандартный набор любой библиотеки в 2023 году, в общем.
Чем плох?
- Мне не понравился выбор года. Ну его вообще нет, если на то пошло. В этом отношении bootstrap-datepicker непобедим.
Но это ерунда, на самом деле. Если посмотреть на примеры, становится ясно, куда ребята целились: в создание удобного отельного дейтпикера. И им определённо удалось!
API очень простой, несколько официальных плагинов как раз реализуют всё то, что необходимо для выделения диапазонов.
Конфигуратор песня, конечно: https://easepick.com/configurator/
В общем, моя рекомендация.
#datepicker #js #ts
Соскучились по хорошим дейтпикерам? Да по ним невозможно не соскучиться.
Итак, сегодня на обзоре https://easepick.com/
Чем хорош?
- Нет зависимостей
- Легковесный
- Написан на TypeScript
- Есть удобный конфигуратор
- Поддержка плагинов, изначально поставляется с прицелом на их использование
Стандартный набор любой библиотеки в 2023 году, в общем.
Чем плох?
- Мне не понравился выбор года. Ну его вообще нет, если на то пошло. В этом отношении bootstrap-datepicker непобедим.
Но это ерунда, на самом деле. Если посмотреть на примеры, становится ясно, куда ребята целились: в создание удобного отельного дейтпикера. И им определённо удалось!
API очень простой, несколько официальных плагинов как раз реализуют всё то, что необходимо для выделения диапазонов.
Конфигуратор песня, конечно: https://easepick.com/configurator/
В общем, моя рекомендация.
#datepicker #js #ts
👍30
#статья дня
Что больше всего бесит в рекламе на сайтах? Почему каждый второй ставит адблоки и прочие ублоки?
Ну, как минимум, назойливость. Во всяком случае, это то, что бесит лично меня. Вторая причина — количество баннеров.
Тем не менее, без рекламы бесплатный веб практически невозможен. Да, кто-то особо гордый скажет: "Я зарабатываю деньги в реальном мире, а не в интернете", но мы его и не спрашивали.
Так, вся эта сопливая подводка к чему, в блоге Google Chrome вышла хорошая статья на тему оптимизации рекламных вставок. Встречайте: https://web.dev/articles/loading-ads-page-speed
Как и в каком порядке размещать баннеры и контент, когда применять и не применять ленивую загрузку, как обновлять вставки. По пути немного про LCP, CLS и асинхронную загрузку.
Если вас в принципе тошнит от самой мысли о рекламе, воспринимайте статью как практическое руководство по производительности сайтов и приложений. Полезно.
#ad #lcp #cls #performance
Что больше всего бесит в рекламе на сайтах? Почему каждый второй ставит адблоки и прочие ублоки?
Ну, как минимум, назойливость. Во всяком случае, это то, что бесит лично меня. Вторая причина — количество баннеров.
Тем не менее, без рекламы бесплатный веб практически невозможен. Да, кто-то особо гордый скажет: "Я зарабатываю деньги в реальном мире, а не в интернете", но мы его и не спрашивали.
Так, вся эта сопливая подводка к чему, в блоге Google Chrome вышла хорошая статья на тему оптимизации рекламных вставок. Встречайте: https://web.dev/articles/loading-ads-page-speed
Как и в каком порядке размещать баннеры и контент, когда применять и не применять ленивую загрузку, как обновлять вставки. По пути немного про LCP, CLS и асинхронную загрузку.
Если вас в принципе тошнит от самой мысли о рекламе, воспринимайте статью как практическое руководство по производительности сайтов и приложений. Полезно.
#ad #lcp #cls #performance
👍6❤2
#ссылка дня
По какому принципу разделяются позиции Junior, Middle, Senior, Lead, Principle?
Что отличает Engineering Manager от Lead Developer?
Почему часто отказываются от именований, что я представил выше, используя старые добрые слесарь шестого разряда?
На все эти вопросы даёт ответ т. н. матрица компетенций. Суть — таблица, где прописаны желаемые знания и умения по каждому из уровней, в нашем случае, инженеров. Иногда с чёткими примерами (тесты пиши, да).
Я не могу поделиться матрицей компетенций нашей компании (разрешения не спрашивал), но наткнулся на весьма интересную и достаточно полную от некой австралийской консалтинговой компании.
Собственно, вот: http://eng-skills-matrix.expert360.com/
По подобной матрице проходят performance review и решения о повышении зарплаты или вертикальном/горизонтальном переводе сотрудников.
Ну и как роадмап вполне можно использовать (хотя ссылки на отдельные роадмапы тоже есть).
Развивайтесь, котаны!
#matrix #work #competence #бородач
По какому принципу разделяются позиции Junior, Middle, Senior, Lead, Principle?
Что отличает Engineering Manager от Lead Developer?
Почему часто отказываются от именований, что я представил выше, используя старые добрые слесарь шестого разряда?
На все эти вопросы даёт ответ т. н. матрица компетенций. Суть — таблица, где прописаны желаемые знания и умения по каждому из уровней, в нашем случае, инженеров. Иногда с чёткими примерами (тесты пиши, да).
Я не могу поделиться матрицей компетенций нашей компании (разрешения не спрашивал), но наткнулся на весьма интересную и достаточно полную от некой австралийской консалтинговой компании.
Собственно, вот: http://eng-skills-matrix.expert360.com/
По подобной матрице проходят performance review и решения о повышении зарплаты или вертикальном/горизонтальном переводе сотрудников.
Ну и как роадмап вполне можно использовать (хотя ссылки на отдельные роадмапы тоже есть).
Развивайтесь, котаны!
#matrix #work #competence #бородач
#статья дня
Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.
Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?
Я наткнулся на этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.
Очень грубо говоря — описан весь цикл создания дизайна продукта.
На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.
Вторая часть, кстати, вполне себе независима и говорит о том, как создавать словарь своего набора компонентов или, бери выше, дизайн системы. Всё есть список, дамы, господа и им сочувствующие.
В общем, рекомендую заварить чаю и погрузиться в чтение. Затягивает.
#design #ui #widgets #бородач
Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.
Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?
Я наткнулся на этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.
Очень грубо говоря — описан весь цикл создания дизайна продукта.
На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.
Вторая часть, кстати, вполне себе независима и говорит о том, как создавать словарь своего набора компонентов или, бери выше, дизайн системы. Всё есть список, дамы, господа и им сочувствующие.
В общем, рекомендую заварить чаю и погрузиться в чтение. Затягивает.
#design #ui #widgets #бородач
👍9
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Итак, сегодня в уютный канальчик™️ с ноги залетает уже всем известный Джей c кое-чем насколько потрясающим, настолько же и забытым.
И это API
Сразу кодпен: https://codepen.io/alinaki/pen/rNoEOwX
*с некоторых пор я начал форкать пены, потому что пропадают иной раз
Теперь о применимости.
Я нынче разработчик корпоративный, потому мне интересно это, например, с позиции совершения какой-нибудь операции по скрытию уведомления-тоста. Во время онбординга, например.
Ну а разработчикам промо-сайтов важность синхронизации действий и анимаций объяснять не надо.
Отличный пример забытых технологий 🙂
Не, ну серьёзно, оно с 75 Firefox доступно, как я мог его проглядеть?
А я знаю, как. Я же писал уже, что PR-служба Chrome работает прекрасно только в том случае, когда что-то появилось там первым...
#css #js #animations #promise
Итак, сегодня в уютный канальчик™️ с ноги залетает уже всем известный Джей c кое-чем насколько потрясающим, настолько же и забытым.
И это API
document.getAnimations(), позволяющий не только получить список всех CSS-анимаций, но и, внимание, выставить промис и дождаться их выполнения! 🤯const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)Сразу кодпен: https://codepen.io/alinaki/pen/rNoEOwX
*с некоторых пор я начал форкать пены, потому что пропадают иной раз
Теперь о применимости.
Я нынче разработчик корпоративный, потому мне интересно это, например, с позиции совершения какой-нибудь операции по скрытию уведомления-тоста. Во время онбординга, например.
Ну а разработчикам промо-сайтов важность синхронизации действий и анимаций объяснять не надо.
Отличный пример забытых технологий 🙂
Не, ну серьёзно, оно с 75 Firefox доступно, как я мог его проглядеть?
А я знаю, как. Я же писал уже, что PR-служба Chrome работает прекрасно только в том случае, когда что-то появилось там первым...
#css #js #animations #promise
👍5
#фишка дня
Какова цель абсолютного большинства веб-сайтов, виджетов и приложений?
Такова, какова она есть, и больше – никакова.
Если отбросить всю шелуху, это — загрузить данные, отобразить их и обновить (при необходимости).
Неудивительно, что инструменты вроде SWR и react-query aka TanStack Query стали дико популярны и вытесняют не то чтобы даже другие решения для загрузки данных, а целые стейт-менеджеры.
Более того, им не обязательно скармливать HTTP-запросы, понятие query в обоих случаях сводится к любому промису, будь то HTTP-запрос, запрос к базе данных, Firebase или даже к API Google Sheets (ну, мой случай). Это, кстати, позволяет очень легко всё тестировать.
Так вот, хуки для загрузки данных штука мощная, но мне при этом очень нравится именно вторая составляющая: кэш данных и состояния запросов.
Например, хочется показать глобальное состояние загрузки? В TanStack Query есть отдельный хук для этого: useIsFetching... но я не хочу просто показать статус загрузки, я хочу отфильтровать его лишь для некоторых!
И вот тут раскрывается настоящая мощь react-query: средства поиска и фильтрации по кешу и клиенту: useQueryClient и QueryCache.
Передав некий предикат поиска, я могу фильтровать запросы по их ключам, состоянию и ошибкам!
А после — уже отображать в любом месте приложения нужные мне действия. В моём случае это, например, отмена запроса и возврат к предыдущему состоянию.
Давайте таки покажу код: https://codesandbox.io/s/react-query-any-error-9lsjz3?file=/src/hooks/useIsFetchingPosts.ts
Уберите throw new Error из хука usePosts и получите обычную загрузку данных.
Ну а чтобы написать хук глобального состояния ошибки запроса, пришлось немного покопаться в исходниках стандартного хука useIsFetching, но это того стоило.
Задавайте ваши ответы, котаны :)
#swr #react #query
Какова цель абсолютного большинства веб-сайтов, виджетов и приложений?
Такова, какова она есть, и больше – никакова.
Если отбросить всю шелуху, это — загрузить данные, отобразить их и обновить (при необходимости).
Неудивительно, что инструменты вроде SWR и react-query aka TanStack Query стали дико популярны и вытесняют не то чтобы даже другие решения для загрузки данных, а целые стейт-менеджеры.
Более того, им не обязательно скармливать HTTP-запросы, понятие query в обоих случаях сводится к любому промису, будь то HTTP-запрос, запрос к базе данных, Firebase или даже к API Google Sheets (ну, мой случай). Это, кстати, позволяет очень легко всё тестировать.
Так вот, хуки для загрузки данных штука мощная, но мне при этом очень нравится именно вторая составляющая: кэш данных и состояния запросов.
Например, хочется показать глобальное состояние загрузки? В TanStack Query есть отдельный хук для этого: useIsFetching... но я не хочу просто показать статус загрузки, я хочу отфильтровать его лишь для некоторых!
И вот тут раскрывается настоящая мощь react-query: средства поиска и фильтрации по кешу и клиенту: useQueryClient и QueryCache.
Передав некий предикат поиска, я могу фильтровать запросы по их ключам, состоянию и ошибкам!
А после — уже отображать в любом месте приложения нужные мне действия. В моём случае это, например, отмена запроса и возврат к предыдущему состоянию.
Давайте таки покажу код: https://codesandbox.io/s/react-query-any-error-9lsjz3?file=/src/hooks/useIsFetchingPosts.ts
Уберите throw new Error из хука usePosts и получите обычную загрузку данных.
Ну а чтобы написать хук глобального состояния ошибки запроса, пришлось немного покопаться в исходниках стандартного хука useIsFetching, но это того стоило.
Задавайте ваши ответы, котаны :)
#swr #react #query
❤10👍3
#фишка дня
Как сделать вывод консоли красивеньким?
Очень просто, использовать спецификаторы преобразования!
Прямо как sprintf в Си, ну как вы можете этого не знать?
Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.
А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX
Для тех, кто по ссылкам не ходит, сокращённая версия:
Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.
Полный список спецификаторов есть на MDN.
Красота спасёт мир, котаны!
#console #js #sprintf
Как сделать вывод консоли красивеньким?
Очень просто, использовать спецификаторы преобразования!
Прямо как sprintf в Си, ну как вы можете этого не знать?
Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.
А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX
Для тех, кто по ссылкам не ходит, сокращённая версия:
console.info(
"%c %cAdobe %cPhotoshop Web%c %c2023.20.0.0%c %c1bba617e276",
"padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)
Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.
Полный список спецификаторов есть на MDN.
Красота спасёт мир, котаны!
#console #js #sprintf
👍10
This media is not supported in your browser
VIEW IN TELEGRAM
#новость дня
Стоило мне вчера рассказать, как ловить глобальные ошибки и состояние загрузки в react-query aka TanStack Query, как вышла его пятая версия!
Стоит ещё раз отметить, что начиная с 4 версии react-query стал называться TanStack Query и поддерживать не только React, но и Vue, Svelte, Solid.
Из интересного: поддержка Suspense, улучшенные т. н. бесконечные запросы (для пагинации и скроллинга), новые девтулзы. Но изменение, которое вызвало бурю разного рода эмоций это, конечно, исключение onSuccess и onError событий из определения запросов.
Впрочем, они по этому поводу полгода назад разродились большой статьёй: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose, которую я всем рекомендовал прочитать примерно тогда же.
В общем, обновляемся?
#react #query #tanstack
Стоило мне вчера рассказать, как ловить глобальные ошибки и состояние загрузки в react-query aka TanStack Query, как вышла его пятая версия!
Стоит ещё раз отметить, что начиная с 4 версии react-query стал называться TanStack Query и поддерживать не только React, но и Vue, Svelte, Solid.
Из интересного: поддержка Suspense, улучшенные т. н. бесконечные запросы (для пагинации и скроллинга), новые девтулзы. Но изменение, которое вызвало бурю разного рода эмоций это, конечно, исключение onSuccess и onError событий из определения запросов.
Впрочем, они по этому поводу полгода назад разродились большой статьёй: https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose, которую я всем рекомендовал прочитать примерно тогда же.
В общем, обновляемся?
#react #query #tanstack
👍7
#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь:
shape-outside.Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить:
shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило
shape-margin, без него текст начинает прилипать к объекту.Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img
❤16🤬1
#инструмент дня
Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!
Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.
Большинство повторяет заученные когда-то команды и сочетания
sudo rm -rf /*, например
Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/
И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂
#console #shell #bash
Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!
Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.
Большинство повторяет заученные когда-то команды и сочетания
sudo rm -rf /*, например
Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/
И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂
#console #shell #bash
👍13❤7
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
👍19
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
Ладно, раз уж подняли тему адаптивных таблиц, есть ещё большое количество применимых техник.
Один из наиболее полных сборников таких техник, это jQuery-плагин https://github.com/filamentgroup/tablesaw
1. Stack aka "вытягивание" таблиц в колонку.
2. Отображение только выбранных колонок
3. "Карусель" по колонкам, которые помещаются в экран.
Ну и в качестве бонуса, сортировка и "карта" отображаемых колонок, чтобы хоть как-то сориентироваться по ним.
Этот плагин официально неактивен с 2018 года, хоть и всё ещё работает. Это же веб, камон.
Но создатели вдохновили автора веб-компонента table-saw на свою реализацию stack-режима: https://github.com/zachleat/table-saw
И вот эта штука уже очень интересная и современная Ну и, из определения веб-компонентов, фреймворконезависимая. И именно ей мы звание библиотеки дня и присуждаем. Интересный вариант для тех, кто хочет написать свой первый веб-компонент.
Есть поддержка медиазапросов, есть — контейнерных.
Впрочем, я в любом случае предпочту предложенный мной в предыдущем посте вариант. Но я же не один на свете.
#css #table #adaptive
Ладно, раз уж подняли тему адаптивных таблиц, есть ещё большое количество применимых техник.
Один из наиболее полных сборников таких техник, это jQuery-плагин https://github.com/filamentgroup/tablesaw
1. Stack aka "вытягивание" таблиц в колонку.
2. Отображение только выбранных колонок
3. "Карусель" по колонкам, которые помещаются в экран.
Ну и в качестве бонуса, сортировка и "карта" отображаемых колонок, чтобы хоть как-то сориентироваться по ним.
Этот плагин официально неактивен с 2018 года, хоть и всё ещё работает. Это же веб, камон.
Но создатели вдохновили автора веб-компонента table-saw на свою реализацию stack-режима: https://github.com/zachleat/table-saw
И вот эта штука уже очень интересная и современная Ну и, из определения веб-компонентов, фреймворконезависимая. И именно ей мы звание библиотеки дня и присуждаем. Интересный вариант для тех, кто хочет написать свой первый веб-компонент.
Есть поддержка медиазапросов, есть — контейнерных.
Впрочем, я в любом случае предпочту предложенный мной в предыдущем посте вариант. Но я же не один на свете.
#css #table #adaptive
👍5
Хотели бы начать работать в иностранной компании, но не уверены, что вы сможете пройти интервью на английском?
Приходите на бесплатную диагностику к преподавателю английского языка Игорю, где он оценит ваши шансы успешно пройти интервью на английском, а также даст вам рекоммендации, что вам необходимо улучшить.
Игорь:
- специализируется на преподавании английского IT и digital специалистам. В его канале DIGITAL АНГЛИЙСКИЙ вы можете найти много полезного для прокачки вашего языка;
⁃ преподаёт английский с 2018 года. За это время он провёл более 3000 уроков и помог более 40 студентам повысить уровень языка и подготовиться к интервью. Например, его студенты работают в S&P Global, Bosh, а также в других иностранных компаниях;
- официально имеет уровень С1 (IELTS - 7.0);
- проходил международную преподавательскую стажировку в Румынии;
⁃ обучался в университетах Швейцарии,США и Германии.
Записывайтесь на бесплатную диагностику и проверьте вашу готовность к интервью.
Приходите на бесплатную диагностику к преподавателю английского языка Игорю, где он оценит ваши шансы успешно пройти интервью на английском, а также даст вам рекоммендации, что вам необходимо улучшить.
Игорь:
- специализируется на преподавании английского IT и digital специалистам. В его канале DIGITAL АНГЛИЙСКИЙ вы можете найти много полезного для прокачки вашего языка;
⁃ преподаёт английский с 2018 года. За это время он провёл более 3000 уроков и помог более 40 студентам повысить уровень языка и подготовиться к интервью. Например, его студенты работают в S&P Global, Bosh, а также в других иностранных компаниях;
- официально имеет уровень С1 (IELTS - 7.0);
- проходил международную преподавательскую стажировку в Румынии;
⁃ обучался в университетах Швейцарии,США и Германии.
Записывайтесь на бесплатную диагностику и проверьте вашу готовность к интервью.
👎4👍2🤡2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#такое дня
Я всё-таки решил поделиться интересным трешаком, что случился со мной на днях.
Итак, многие знают, что на маках есть выделенная кнопка переключения языка — она совмещена с Fn. Всем этим многим ровно так же известно, что переключает язык она очень плохо. Даже туповато.
В итоге я настроил её на отображение панели символов и эмодзи. И это успешно погубило мой рабочий день.
Я случайно нажал на неё в PhpStorm и ткнул в эмодзи. Шторм решил скачать все недостающие шрифты на свете. С подтверждением.
После обращения в JetBrains мне было сообщено, что это в принципе известный косяк! И от них там мало что зависит.
Я полез копаться в ссылках, что они мне скинули, и наткнулся на шикарную особенность макоси. Итак, мякотка!
macOS поставляется с десятками шрифтов из коробки и ещё многие десятки их можно официально скачать. Интересно здесь то, что для других систем эти шрифты могут быть платными, но уж как есть.
Но некоторые из этих наборов имеются на том же Google Fonts. И вот здесь начинается самое интересное.
Если вы на условной macOS Catalina открыли бы в Safari сайт с установленным Google-шрифтом Mukta, браузер предложил бы вам его скачать через такое же окошко, как на моем видео!!
Вы не ослышались: не с сервиса Google Fonts, а с ресурсов Apple!
Вот, смотрите: https://www.reddit.com/r/divi/comments/f3h6dk/safari_and_google_fonts_problem/
Естественно, такое выпавшее окно может резко подорвать доверие посетителей к ресурсу. К счастью, это исправили. Ну, в Safari.
А в десятках других программ — нет...
Я всё-таки решил поделиться интересным трешаком, что случился со мной на днях.
Итак, многие знают, что на маках есть выделенная кнопка переключения языка — она совмещена с Fn. Всем этим многим ровно так же известно, что переключает язык она очень плохо. Даже туповато.
В итоге я настроил её на отображение панели символов и эмодзи. И это успешно погубило мой рабочий день.
Я случайно нажал на неё в PhpStorm и ткнул в эмодзи. Шторм решил скачать все недостающие шрифты на свете. С подтверждением.
После обращения в JetBrains мне было сообщено, что это в принципе известный косяк! И от них там мало что зависит.
Я полез копаться в ссылках, что они мне скинули, и наткнулся на шикарную особенность макоси. Итак, мякотка!
macOS поставляется с десятками шрифтов из коробки и ещё многие десятки их можно официально скачать. Интересно здесь то, что для других систем эти шрифты могут быть платными, но уж как есть.
Но некоторые из этих наборов имеются на том же Google Fonts. И вот здесь начинается самое интересное.
Если вы на условной macOS Catalina открыли бы в Safari сайт с установленным Google-шрифтом Mukta, браузер предложил бы вам его скачать через такое же окошко, как на моем видео!!
Вы не ослышались: не с сервиса Google Fonts, а с ресурсов Apple!
Вот, смотрите: https://www.reddit.com/r/divi/comments/f3h6dk/safari_and_google_fonts_problem/
Естественно, такое выпавшее окно может резко подорвать доверие посетителей к ресурсу. К счастью, это исправили. Ну, в Safari.
А в десятках других программ — нет...
🤬8🤡5👍4
#фишка дня
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
a, и всё, потерялись. Нет, кнопки тоже нельзя. Нет, любой интерактивный контент нельзя.Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation
👍16❤1
#фишка дня
Продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.
В чём же проблема?
А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.
Продакшен-релиз, полученный из стабильного мастера (trunk), обзывается как минорный в рамках модели семантического версионирования.
Когда нужен релиз, а транк не считается стабильным — выбираем нужные коммиты и релизим патч-релиз из своей ветки.
Очень важный момент здесь: время, когда транк считается нестабильным, должно быть сведено к минимуму. В любой момент команда должна иметь возможность релизить текущее состояние проекта.
Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.
Естественно, такое состояние удерживать не всегда просто, потому череда патч-релизов может быть очень длинной. Это не то чтобы плохо само по себе...
Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).
Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.
Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:
Причём, сообщение не надо вспоминать полностью!
В итоге, git выберет ближайший к вам такой коммит. Уютно!
В общем, соблюдайте гигиену репы, котаны. Не долбитесь весь день в черрипики.
#git #til #commit
Продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.
В чём же проблема?
А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.
Продакшен-релиз, полученный из стабильного мастера (trunk), обзывается как минорный в рамках модели семантического версионирования.
Когда нужен релиз, а транк не считается стабильным — выбираем нужные коммиты и релизим патч-релиз из своей ветки.
Очень важный момент здесь: время, когда транк считается нестабильным, должно быть сведено к минимуму. В любой момент команда должна иметь возможность релизить текущее состояние проекта.
Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.
Естественно, такое состояние удерживать не всегда просто, потому череда патч-релизов может быть очень длинной. Это не то чтобы плохо само по себе...
Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).
Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.
Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:
git checkout ':/add multiselect to ui kit'Причём, сообщение не надо вспоминать полностью!
В итоге, git выберет ближайший к вам такой коммит. Уютно!
В общем, соблюдайте гигиену репы, котаны. Не долбитесь весь день в черрипики.
#git #til #commit
🤩11👍6