#статья дня
Smashing Magazine — один из старейших онлайн-журналов по веб-разработке. Статьи там как правило подбираются весьма подробные и полные, объясняющие все аспекты даже, казалось бы, простых эффектов.
Сегодня в наш канал залетает как раз такая статья: 3D-эффекты для картинок. Блеск, параллакс и поворот.
Весьма впечатляющий разбор, включающий в себя даже немного геометрических расчётов, чтоб вы понимали, откуда ноги растут.
Сразу ссылки на кодпены с примерами, чтоб далеко не ходить:
1. https://codepen.io/t_afif/pen/VwEJqKV
2. https://codepen.io/t_afif/pen/qBJyXNy
3. https://codepen.io/t_afif/pen/yLRRBKj
Ну и, конечно, сама статья: https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/
Будет полезно не только лишь всем.
#css #3d #image #бородач
Smashing Magazine — один из старейших онлайн-журналов по веб-разработке. Статьи там как правило подбираются весьма подробные и полные, объясняющие все аспекты даже, казалось бы, простых эффектов.
Сегодня в наш канал залетает как раз такая статья: 3D-эффекты для картинок. Блеск, параллакс и поворот.
Весьма впечатляющий разбор, включающий в себя даже немного геометрических расчётов, чтоб вы понимали, откуда ноги растут.
Сразу ссылки на кодпены с примерами, чтоб далеко не ходить:
1. https://codepen.io/t_afif/pen/VwEJqKV
2. https://codepen.io/t_afif/pen/qBJyXNy
3. https://codepen.io/t_afif/pen/yLRRBKj
Ну и, конечно, сама статья: https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/
Будет полезно не только лишь всем.
#css #3d #image #бородач
👍10
#статья дня
Смотрим на иллюстрацию. Узнали? Согласны?
Да не врите, каждый из нас в какой-то момент карьеры создавал мега-компоненты со всеми возможными антипаттернами.
А ещё некоторые антипаттерны когда-то назывались просто паттернами...
В общем, статья, ради которой вам придётся заварить чаю или кофе и потом даже в термос перелить: Алекс Кондов и его статья о недавнем рефакторинге слишком большого React-компонента.
Вот: https://alexkondov.com/refactoring-a-messy-react-component/
1. Покрываем тестами
2. Линтуем
3. Чистим мёртвый код
4. Переделываем хранение состояния
5. Разбиваем условия
6. Применяем принцип единой ответственности
7. Выносим бизнес-логику наружу
8. Переделываем загрузку данных
9. Выносим хуки
10. Отрабатываем граничные состояния, например, отмену загрузки данных
11. Упрощаем отправку формы
12. Валидация
Естественно, без библиотек не обошлось. Чтобы не быть обвинённым в раздувании кодовой базы, автор выделил в отдельный блок обоснование их использования.
В общем, это отличный пример.
#react #refactoring
Смотрим на иллюстрацию. Узнали? Согласны?
Да не врите, каждый из нас в какой-то момент карьеры создавал мега-компоненты со всеми возможными антипаттернами.
А ещё некоторые антипаттерны когда-то назывались просто паттернами...
В общем, статья, ради которой вам придётся заварить чаю или кофе и потом даже в термос перелить: Алекс Кондов и его статья о недавнем рефакторинге слишком большого React-компонента.
Вот: https://alexkondov.com/refactoring-a-messy-react-component/
1. Покрываем тестами
2. Линтуем
3. Чистим мёртвый код
4. Переделываем хранение состояния
5. Разбиваем условия
6. Применяем принцип единой ответственности
7. Выносим бизнес-логику наружу
8. Переделываем загрузку данных
9. Выносим хуки
10. Отрабатываем граничные состояния, например, отмену загрузки данных
11. Упрощаем отправку формы
12. Валидация
Естественно, без библиотек не обошлось. Чтобы не быть обвинённым в раздувании кодовой базы, автор выделил в отдельный блок обоснование их использования.
В общем, это отличный пример.
#react #refactoring
👍21👎2❤1
#статья дня
Недавно мы обсудили ситуацию утечки памяти, с которой не справляется ни один сборщик мусора ни в одном из существующих браузерных движков: https://www.tg-me.com/htmlshit/3033
Закономерный вопрос, а как же вообще происходит эта самая сборка мусора и чистка памяти?
На это у нас есть ответ! Статья, конечно, хардкорная: https://blog.frontend-almanac.com/v8-garbage-collection
Но даже с целью общего образования работает очень хорошо. Зайти можно даже с минимальным пониманием принципов работы указателей в любом из системных языков.
Кстати, автора зовут Артем Антипин, у него есть и русскоязычная версия этой же статьи: https://blog.frontend-almanac.ru/v8-garbage-collection
#memory #cpp
Недавно мы обсудили ситуацию утечки памяти, с которой не справляется ни один сборщик мусора ни в одном из существующих браузерных движков: https://www.tg-me.com/htmlshit/3033
Закономерный вопрос, а как же вообще происходит эта самая сборка мусора и чистка памяти?
На это у нас есть ответ! Статья, конечно, хардкорная: https://blog.frontend-almanac.com/v8-garbage-collection
Но даже с целью общего образования работает очень хорошо. Зайти можно даже с минимальным пониманием принципов работы указателей в любом из системных языков.
Кстати, автора зовут Артем Антипин, у него есть и русскоязычная версия этой же статьи: https://blog.frontend-almanac.ru/v8-garbage-collection
#memory #cpp
👍22
#инструмент дня
Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.
React Switchboard: https://github.com/coryhouse/react-switchboard
Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.
Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos
Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.
#react #devtools
Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.
React Switchboard: https://github.com/coryhouse/react-switchboard
Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.
Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos
Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.
#react #devtools
👍10
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Итак, мне нужен был почти недельный перерыв, но я снова в строю и готов делиться шикарным.
И возвращаюсь я к вам с отличной статьёй о современной анимации SVG в CSS.
Встречайте: https://courses.nan.fyi/blog/svg/animating-figma-exports
Как это делать быстро, просто и учитывая современные тенденции в дизайне и разработке. Естественно, в статье упор на экспорт из Figma :)
И не просто экспорт, а адаптация под конкретные нужды! Кратко объясняется, как разделять контуры и как в принципе мыслить в рамках анимациеи, а не просто чёрточками на экране. На что влияют разные параметры экспорта и так далее.
Давно я с таким удовольствием не читал подобное.
#svg #css #animation
Итак, мне нужен был почти недельный перерыв, но я снова в строю и готов делиться шикарным.
И возвращаюсь я к вам с отличной статьёй о современной анимации SVG в CSS.
Встречайте: https://courses.nan.fyi/blog/svg/animating-figma-exports
Как это делать быстро, просто и учитывая современные тенденции в дизайне и разработке. Естественно, в статье упор на экспорт из Figma :)
И не просто экспорт, а адаптация под конкретные нужды! Кратко объясняется, как разделять контуры и как в принципе мыслить в рамках анимациеи, а не просто чёрточками на экране. На что влияют разные параметры экспорта и так далее.
Давно я с таким удовольствием не читал подобное.
#svg #css #animation
👍15🤩2
#статья дня
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/
И да!
Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.
Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!
В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.
Есть обсуждение на HackerNews, вдруг кому интересно.
И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv
Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts
В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.
#opentype #fonts #colr
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/
И да!
Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.
Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!
В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.
Есть обсуждение на HackerNews, вдруг кому интересно.
И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv
Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts
В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.
#opentype #fonts #colr
👍29❤5🤡4🤩2
#статья дня
Как анимировать появление элемента на странице?
Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например.
А можно написать т. н. стартовые стили! Буквально
Да, чтобы анимировать display none нужно в описание перехода добавить allow-discrete, поскольку display none не поддерживает плавные переходы, но это детали.
Ссылка на блог разработчиков Chrome: https://web.dev/blog/baseline-entry-animations?hl=en
И очень много примеров есть на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Технически, starting style поддерживается уже во всех браузерах (в Firefox вот только появился, в 129). Тем не менее, переходы и анимации на удаление элемента из DOM пока нать не везде, к сожалению.
В общем, можно потихоньку начинать использовать.
#css #transition
Как анимировать появление элемента на странице?
Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например.
А можно написать т. н. стартовые стили! Буквально
@starting-style. А в базовых стилях уже прописать нужное нам положение и переход. Например: /* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
Таким образом мы получаем анимацию из display: none или при изменении любого атрибута. Да, чтобы анимировать display none нужно в описание перехода добавить allow-discrete, поскольку display none не поддерживает плавные переходы, но это детали.
Ссылка на блог разработчиков Chrome: https://web.dev/blog/baseline-entry-animations?hl=en
И очень много примеров есть на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Технически, starting style поддерживается уже во всех браузерах (в Firefox вот только появился, в 129). Тем не менее, переходы и анимации на удаление элемента из DOM пока нать не везде, к сожалению.
В общем, можно потихоньку начинать использовать.
#css #transition
👍10🤩7
Будни разработчика
#статья дня Как анимировать появление элемента на странице? Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например. А можно написать т. н. стартовые стили! Буквально @starting…
Если кому интересно, я добрался до компа и анимировал пример с dialog[open] через keyframes.
Пруф: https://codepen.io/alinaki/pen/OJevjMY
У этого примера явно поддержка лучше, так что забывать не стоит.
Попрошу-ка я Уну Кравец что-нибудь написать по этому поводу 🙂
Пруф: https://codepen.io/alinaki/pen/OJevjMY
У этого примера явно поддержка лучше, так что забывать не стоит.
Попрошу-ка я Уну Кравец что-нибудь написать по этому поводу 🙂
codepen.io
Dialog animate-in example
...
👍13❤2
#видео дня
Все знают, что можно бесконечно наблюдать три вещи. И одна из них — как работает другой человек.
Все слышали: "В Blink добавили то-то, в WebKit добавили то-то, Firefox депрекейтнул то-то". О тяжёлой судьбе селектора :has слышали вообще чуть менее чем все.
Так как же происходит процесс этого самого добавления чего-либо? Кто и как пишет код в современных движках браузеров?
Какой тулинг используется, как выглядит код, как выглядят структуры данных, как проходят тесты? Вот было бы хорошо, если кто-нибудь провёл бы мастер-класс...
Ни слова больше! Кейт Сиркел как раз недавно этим занимался и выкатил видео про добавление селектора :has-slotted() в WebKit!
Вот: https://www.youtube.com/watch?v=vNuvEqs_TH4
А вдруг кто-то вдохновится и тоже станет контрибутором в какой-либо из движков? :)
#webkit #cpp #develop
Все знают, что можно бесконечно наблюдать три вещи. И одна из них — как работает другой человек.
Все слышали: "В Blink добавили то-то, в WebKit добавили то-то, Firefox депрекейтнул то-то". О тяжёлой судьбе селектора :has слышали вообще чуть менее чем все.
Так как же происходит процесс этого самого добавления чего-либо? Кто и как пишет код в современных движках браузеров?
Какой тулинг используется, как выглядит код, как выглядят структуры данных, как проходят тесты? Вот было бы хорошо, если кто-нибудь провёл бы мастер-класс...
Ни слова больше! Кейт Сиркел как раз недавно этим занимался и выкатил видео про добавление селектора :has-slotted() в WebKit!
Вот: https://www.youtube.com/watch?v=vNuvEqs_TH4
А вдруг кто-то вдохновится и тоже станет контрибутором в какой-либо из движков? :)
#webkit #cpp #develop
❤20👍7
#статья дня
Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.
Потому что выскакивают, как хлеб из тостера.
Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).
Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...
В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.
В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)
Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.
И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component
И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner
Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.
Сами же тосты реализованы на простой шине событий, что весьма надёжно.
В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.
#react #toasts #notification #animation
Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.
Потому что выскакивают, как хлеб из тостера.
Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).
Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...
В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.
В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)
Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.
И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component
И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner
Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.
Сами же тосты реализованы на простой шине событий, что весьма надёжно.
В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.
#react #toasts #notification #animation
👍20
#книга дня
Сегодня книгой дня выбрана API от Сергей Константинова. Доступна на двух языках, на русском и английском. И на английском название даже более точно звучит — The API Book. Куда уж однозначней.
Ссылка: https://twirl.github.io/The-API-Book/API.ru.html
Эта книга написана для того, чтобы поделиться опытом и изложить лучшие практики разработки API. Состоит из шести разделов, посвящённых:
• проектированию API,
• паттернам дизайна API,
• поддержанию обратной совместимости,
• HTTP API и архитектурным принципам REST,
• SDK и UI-библиотекам,
• продуктовому управлению API.
Сергей Константинов был главой инжиниринга в Яндекс.Лавка, а с 2020 года — занимается примерно тем же в Bolt, развивая их маркет.
Труд действительно объёмный и охватывает практически все аспекты от проектирования API до взаимодействия с ним.
Важно заметить, что она постоянно дополняется и автор не стесняется спрашивать вопросы у аудитории, что выливается в прекрасные рекомендации.
Кстати, доступна и для Kindle, и для Apple Books, но уже как спонсорский пакет :)
#book #api
Сегодня книгой дня выбрана API от Сергей Константинова. Доступна на двух языках, на русском и английском. И на английском название даже более точно звучит — The API Book. Куда уж однозначней.
Ссылка: https://twirl.github.io/The-API-Book/API.ru.html
Эта книга написана для того, чтобы поделиться опытом и изложить лучшие практики разработки API. Состоит из шести разделов, посвящённых:
• проектированию API,
• паттернам дизайна API,
• поддержанию обратной совместимости,
• HTTP API и архитектурным принципам REST,
• SDK и UI-библиотекам,
• продуктовому управлению API.
Сергей Константинов был главой инжиниринга в Яндекс.Лавка, а с 2020 года — занимается примерно тем же в Bolt, развивая их маркет.
Труд действительно объёмный и охватывает практически все аспекты от проектирования API до взаимодействия с ним.
Важно заметить, что она постоянно дополняется и автор не стесняется спрашивать вопросы у аудитории, что выливается в прекрасные рекомендации.
Кстати, доступна и для Kindle, и для Apple Books, но уже как спонсорский пакет :)
#book #api
❤23🤩1
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://www.tg-me.com/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://www.tg-me.com/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
👍15❤3
#инструмент дня
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в git инструмент бинарного поиска:
Если эта версия работает хорошо, сообщаем
Можно искать не только баги, но и любое изменение в коде. Так что вместо меток
Не так давно я не знал об этом инструменте и буквально повторил тот же алгоритм поиска сам. Ну, бывает.
#git #bisect #бородач
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в git инструмент бинарного поиска:
git bisect. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):$ git bisect start
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2
После чего bisect выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать. Если эта версия работает хорошо, сообщаем
bisect об этом: git bisect good. Ну или bad, если нет. И продолжаем; снова случится checkout коммита посередине. Можно искать не только баги, но и любое изменение в коде. Так что вместо меток
good и bad есть ещё old и new. Не так давно я не знал об этом инструменте и буквально повторил тот же алгоритм поиска сам. Ну, бывает.
#git #bisect #бородач
👍13🤩3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.
Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.
Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)
В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa
И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.
Короче, моё демо теперь тоже не за горами :)
#css #scroll #animation
Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.
Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.
Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)
В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa
И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.
Короче, моё демо теперь тоже не за горами :)
#css #scroll #animation
👍15
#статья дня
С чего начать построение своего веб-секвенсора?
Конечно же с изучения Web Audio и Web Midi API!
Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Демо: https://codepen.io/stoumann/pen/ZEjjyEp
Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!
#web #audio #grid #music #бородач
С чего начать построение своего веб-секвенсора?
Конечно же с изучения Web Audio и Web Midi API!
Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Демо: https://codepen.io/stoumann/pen/ZEjjyEp
Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!
#web #audio #grid #music #бородач
❤11👍2
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?
Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.
Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX
Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/
А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/
А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html
А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ
#css #mixblendmode #бородач
Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?
Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.
Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX
Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/
А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/
А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html
А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ
#css #mixblendmode #бородач
👍4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#cтатья дня
Возможность заменить кучу элементов интерфейса на промо-сайтах и обучающих ресурсах на видео с прозрачностью будоражит умы людей уже несколько лет.
А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.
Ну прекрасно же: дайте моушен-дизайнеру выполнить свою работу и просто вставьте результат в проект. Это во много раз лучше чередующихся картинок или реализации эффектов через холст.
Да, интерактивность будет минимальная, но всем и всегда ли она нужна?
В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.
И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: https://www.tg-me.com/htmlshit/2538
А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/
Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.
Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!
В общем, будущее тут, хотя и такое себе пока.
P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.
#video #transparency #tool
Возможность заменить кучу элементов интерфейса на промо-сайтах и обучающих ресурсах на видео с прозрачностью будоражит умы людей уже несколько лет.
А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.
Ну прекрасно же: дайте моушен-дизайнеру выполнить свою работу и просто вставьте результат в проект. Это во много раз лучше чередующихся картинок или реализации эффектов через холст.
Да, интерактивность будет минимальная, но всем и всегда ли она нужна?
В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.
И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: https://www.tg-me.com/htmlshit/2538
А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/
Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.
Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!
В общем, будущее тут, хотя и такое себе пока.
P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.
#video #transparency #tool
❤7👍4🤩2
#инструмент дня
Итак, задались вы целью сделать, например, генератор кастомных фигур и тем оформления для Google Slides. Вот чтобы бац-бац, скопировал — вставил и все довольны. Но возникает закономерный вопрос.
А что копировать-то? Какой формат данных внутри Google Slides?
И на этот вопрос нам ответит Clipboard Inspector: https://evercoder.github.io/clipboard-inspector/
Забавно смотреть, как разные программы рулят буфером обмена. Да и если самому реализовать придётся — очень полезно.
#tool #clipboard
Итак, задались вы целью сделать, например, генератор кастомных фигур и тем оформления для Google Slides. Вот чтобы бац-бац, скопировал — вставил и все довольны. Но возникает закономерный вопрос.
А что копировать-то? Какой формат данных внутри Google Slides?
И на этот вопрос нам ответит Clipboard Inspector: https://evercoder.github.io/clipboard-inspector/
Забавно смотреть, как разные программы рулят буфером обмена. Да и если самому реализовать придётся — очень полезно.
#tool #clipboard
👍5❤2
#такое дня
Итак, куда же переносить ваши драгоценные заметки из богоподобного Notion? Если вы следите за новостями, конечно.
Очевидный душный ответ: «Не надо было начинать пользоваться облачным сервисом вне зависимости от».
Но, если вас всё же угораздило, давайте подумаем, что же делать.
Ответ, на самом деле, простой: всё есть текст. А некоторые виды текста нынче являются индустриальным стандартом.
Чуете, куда я веду? Конечно же к Markdown. И Git.
Markdown легко читать, легко писать, легко переносить. Легко вести учёт ревизий, ну просто потому что это всего лишь текст. И любая платформа совместной разработки давно его поддерживает, не GitHub-ом единым, что решает проблему синхронизации и переноса.
Но сырой маркдаун всё же ещё недостаточен, чтобы назваться заменой полновесного сервиса заметок. И тут на сцену выхожит Obsidian.
Им пользуются буквально все, от разработчиков до писателей и стендаперов. Бесплатное приложение для всех платформ, включая мобильные. Если нужна синхронизация — приобретается отдельно, но можно и просто через Git, iCloud, Google Drive, Dropbox — да что угодно, файлы же у вас.
Про стендаперов не шутка, вон Денис Чужой вовсю его использует.
Огромное сообщество, поддержка плагинов, поддержка вики-стиля (если вы понимаете, о чём я), какое-то невероятное число хаков и секретов.
Да, Obsidian не открытый, но при этом максимально дружелюбный. А тот факт, что всё хранится в простых стандартизированных файлах — мощно накидывает ему плюсов в карму.
Пользуемся, котаны.
#notion #note #obsidian #tool
Итак, куда же переносить ваши драгоценные заметки из богоподобного Notion? Если вы следите за новостями, конечно.
Очевидный душный ответ: «Не надо было начинать пользоваться облачным сервисом вне зависимости от».
Но, если вас всё же угораздило, давайте подумаем, что же делать.
Ответ, на самом деле, простой: всё есть текст. А некоторые виды текста нынче являются индустриальным стандартом.
Чуете, куда я веду? Конечно же к Markdown. И Git.
Markdown легко читать, легко писать, легко переносить. Легко вести учёт ревизий, ну просто потому что это всего лишь текст. И любая платформа совместной разработки давно его поддерживает, не GitHub-ом единым, что решает проблему синхронизации и переноса.
Но сырой маркдаун всё же ещё недостаточен, чтобы назваться заменой полновесного сервиса заметок. И тут на сцену выхожит Obsidian.
Им пользуются буквально все, от разработчиков до писателей и стендаперов. Бесплатное приложение для всех платформ, включая мобильные. Если нужна синхронизация — приобретается отдельно, но можно и просто через Git, iCloud, Google Drive, Dropbox — да что угодно, файлы же у вас.
Про стендаперов не шутка, вон Денис Чужой вовсю его использует.
Огромное сообщество, поддержка плагинов, поддержка вики-стиля (если вы понимаете, о чём я), какое-то невероятное число хаков и секретов.
Да, Obsidian не открытый, но при этом максимально дружелюбный. А тот факт, что всё хранится в простых стандартизированных файлах — мощно накидывает ему плюсов в карму.
Пользуемся, котаны.
#notion #note #obsidian #tool
1👍16❤4🤡2