This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу
Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!
Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂
Предыдущий пост был вот: https://t.me/htmlshit/1867
Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.
Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100
Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.
В общем, вдохновлять людей — приятно. Рекомендую!
#css #goo #filter #svg
Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу
Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!
Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂
Предыдущий пост был вот: https://t.me/htmlshit/1867
Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.
Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100
Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.
В общем, вдохновлять людей — приятно. Рекомендую!
#css #goo #filter #svg
👍9❤1
Журнал "XOR" – мастхев для любого программиста. Освещаем новости, обновления, мемы и много кодинга.
Присоединяйся к самому большому сообществу программистов: @xor_journal
Присоединяйся к самому большому сообществу программистов: @xor_journal
🤡10👍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 #бородач
❤4👎1
#инструмент дня
Что быстрее всех на свете?
Неправильно! Быстрее всех на свете Lightning CSS. В чём конкретно быстрее это сейчас не важно :)
Важно то, что это шикарный инструмент для парсинга, последующей обработки, сборки и минификации вашего CSS. Создан ребятами из Parcel и написан, как это нынче принято, на Rust. А ты уже учишь Rust?
Вот: https://lightningcss.dev/
Объединяет в себе возможности CSSNano, ESBuild и PostCSS. Кстати, не только быстрее, но ещё и размер сжатого файла получается меньше.
Основан на коде из Firefox, поэтому назвать его появившимся из ниоткуда просто невозможно. Lightning CSS обработает CSS точно так же, как браузер, построив правильную CSSOM (Object Model, по аналогии с DOM), с учётом типов токенов.
Естественно, имеется разлапистая поддержка плагинов и CSS-модулей.
Кстати, молния понимает
И вообще, сам Андрей Ситник предлагает мигрировать с PostCSS: https://web-standards.ru/podcast/381/#01:17:39
Пробуем?
#css #lightningcss #rust
Что быстрее всех на свете?
Неправильно! Быстрее всех на свете Lightning CSS. В чём конкретно быстрее это сейчас не важно :)
Важно то, что это шикарный инструмент для парсинга, последующей обработки, сборки и минификации вашего CSS. Создан ребятами из Parcel и написан, как это нынче принято, на Rust. А ты уже учишь Rust?
Вот: https://lightningcss.dev/
Объединяет в себе возможности CSSNano, ESBuild и PostCSS. Кстати, не только быстрее, но ещё и размер сжатого файла получается меньше.
Основан на коде из Firefox, поэтому назвать его появившимся из ниоткуда просто невозможно. Lightning CSS обработает CSS точно так же, как браузер, построив правильную CSSOM (Object Model, по аналогии с DOM), с учётом типов токенов.
Естественно, имеется разлапистая поддержка плагинов и CSS-модулей.
Кстати, молния понимает
@import, за бандл не беспокойтесь.И вообще, сам Андрей Ситник предлагает мигрировать с PostCSS: https://web-standards.ru/podcast/381/#01:17:39
Пробуем?
#css #lightningcss #rust
👍17❤5
#заметка дня
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react #бородач
Как разместить иконки на странице или в web-приложении?
Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.
По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.
SVG-файл становится контейнером таких символов:
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-circle" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" />
</symbol>
<symbol id="icon-square" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" />
</symbol>
</svg>
И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто: <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<use href="icons.svg#icon-circle" />
</svg>
Удобно отлаживать, меньше запросов. Сплошные плюсы. Понятно, что так можно не только иконки хранить.Но как этим пользоваться, например, в React?
Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js
Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.
Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)
Всем спрайт, котаны!
#svg #symbol #sprite #react #бородач
MDN Web Docs
<symbol> - SVG: Scalable Vector Graphics | MDN
The <symbol> SVG element is used to define graphical template objects which can be instantiated by a <use> element.
👍21❤3
#такое дня
Лучшее времяпрепровождение на выходных? Конечно же, некромантия!
Нет ничего лучше, чем привести старую железку к современным стандартам. Особенно, если это iPod 5 aka Video. Аж 2005 года. По-моему, некоторые мои знакомые подписчики тогда даже не родились.
Итак, имеем модель с жестким диском (настоящим! только очень маленьким) на 30 Гб. Покупаем переходник на MSATA SSD, в моем случае 256 Гб. Ну и батарею побольше, на освободившееся место. С 650 mAh до 2000. Забегая вперёд скажу, что надо было брать переходник на microSD, они менее энергопрожорливые.
Ну и сверху на это все залетает прошивка Rockbox. Эдакий Linux для плееров. Правда, пришлось опять же патчить под MSATA (ещё одна причина брать переходник под карточки).
Получилось круто! Лежит, тестирует батарею. Дальше планирую поставить другую фронтальную панель и вообще ещё немного поугарать.
Некромантия — дело хорошее :)
Лучшее времяпрепровождение на выходных? Конечно же, некромантия!
Нет ничего лучше, чем привести старую железку к современным стандартам. Особенно, если это iPod 5 aka Video. Аж 2005 года. По-моему, некоторые мои знакомые подписчики тогда даже не родились.
Итак, имеем модель с жестким диском (настоящим! только очень маленьким) на 30 Гб. Покупаем переходник на MSATA SSD, в моем случае 256 Гб. Ну и батарею побольше, на освободившееся место. С 650 mAh до 2000. Забегая вперёд скажу, что надо было брать переходник на microSD, они менее энергопрожорливые.
Ну и сверху на это все залетает прошивка Rockbox. Эдакий Linux для плееров. Правда, пришлось опять же патчить под MSATA (ещё одна причина брать переходник под карточки).
Получилось круто! Лежит, тестирует батарею. Дальше планирую поставить другую фронтальную панель и вообще ещё немного поугарать.
Некромантия — дело хорошее :)
❤21👍14
Не влезло в пост выше :)
👍23❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
Короче, рассказываю.
Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.
И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.
А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome
Там много чего такого есть, разбито по категориям. Видео, скриншоты, ссылки на подробности.
#devtools #chrome #бородач
👍24❤1