This media is not supported in your browser
VIEW IN TELEGRAM
#ссылка дня
Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/
Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально.
Все примеры с исходными кодами, есть и весьма практичные, вроде галереи.
#js #webgl
Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/
Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально.
Все примеры с исходными кодами, есть и весьма практичные, вроде галереи.
#js #webgl
👍13🔥7
#игра дня
Такое развидеть нельзя. Нет, это не описание, это буквально — название игры: https://cantunsee.space/
Хорошая тренировка ваших UI/UX способностей. Но есть нюанс — она направлена сугубо на Material Design, потому некоторые моменты в целом могут быть спорные. Но впечатление не портится.
Удачи!
#game #ux #ui
Такое развидеть нельзя. Нет, это не описание, это буквально — название игры: https://cantunsee.space/
Хорошая тренировка ваших UI/UX способностей. Но есть нюанс — она направлена сугубо на Material Design, потому некоторые моменты в целом могут быть спорные. Но впечатление не портится.
Удачи!
#game #ux #ui
👍15🔥5
#статья дня
Понятие “доступности” включает в себя не только доступ с клавиатуры и контастные цвета, но и уважение к пользователям, не желающим или не могущим воспринимать анимации.
Да, некоторые ваши прекрасные анимации вполне могут вызвать приступ тошноты не в переносном смысле.
Поэтому к анимациям надо подходить ответственно. “Могу” не значит “надо”:
1. Решает ли анимация проблему?
2. Отвлекает ли она от контента?
3. Может ли пользователь отказаться от неё?
На все эти вопросы нужно подготовить ответы заранее. И вот к слову, процесс отказа — принципиального или ситуационного — описывается в свежей статье Кэсси Эванс: https://css-tricks.com/empathetic-animation/
Не мешайте вашим пользователям. Помогайте им.
#css #animation #js
Понятие “доступности” включает в себя не только доступ с клавиатуры и контастные цвета, но и уважение к пользователям, не желающим или не могущим воспринимать анимации.
Да, некоторые ваши прекрасные анимации вполне могут вызвать приступ тошноты не в переносном смысле.
Поэтому к анимациям надо подходить ответственно. “Могу” не значит “надо”:
1. Решает ли анимация проблему?
2. Отвлекает ли она от контента?
3. Может ли пользователь отказаться от неё?
На все эти вопросы нужно подготовить ответы заранее. И вот к слову, процесс отказа — принципиального или ситуационного — описывается в свежей статье Кэсси Эванс: https://css-tricks.com/empathetic-animation/
Не мешайте вашим пользователям. Помогайте им.
#css #animation #js
CSS-Tricks
Empathetic Animation | CSS-Tricks
Animation on the web is often a contentious topic. I think, in part, it’s because bad animation is blindingly obvious, whereas well-executed animation fades
👍9
#codepen дня
Сколько div-ов на иллюстрации? Если ты ответил, что сколько и квадратов — ты ошибся.
Один там. И куча градиентов :)
А вот количеством и размером кубов легко можно управлять через пользовательские свойства: https://codepen.io/t_afif/pen/PoJeqwN
Пугающе гениальная штука :)
#css #var #gradient
Сколько div-ов на иллюстрации? Если ты ответил, что сколько и квадратов — ты ошибся.
Один там. И куча градиентов :)
А вот количеством и размером кубов легко можно управлять через пользовательские свойства: https://codepen.io/t_afif/pen/PoJeqwN
Пугающе гениальная штука :)
#css #var #gradient
👍17🤩4😱3🔥1🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Quine (квайн) — компьютерная программа, которая выдаёт на выходе точную копию своего исходного текста.
Ну что же, на JavaScript это проще простого: https://jsfiddle.net/fxi/1x3any9o/
А с setInterval превращается в нечто максимально новогоднее.
#js #quine
Quine (квайн) — компьютерная программа, которая выдаёт на выходе точную копию своего исходного текста.
Ну что же, на JavaScript это проще простого: https://jsfiddle.net/fxi/1x3any9o/
А с setInterval превращается в нечто максимально новогоднее.
#js #quine
👍7
#инструмент дня
Текучая типографика. Адаптивная типографика. Шлюзы.
Это все названия для одной крутой вещи — плавного изменения размера шрифта и вертикального ритма в зависимости от размера экрана. С одним нюансом: есть контрольные точки, где формула может меняться. Или нужно «зажать» размер в некотором диапазоне.
И это логично, ведь надо предотвратить слишком мелкий или слишком крупный шрифт.
И вот инструмент для этого: https://modern-fluid-typography.vercel.app/
#font #clamp
Текучая типографика. Адаптивная типографика. Шлюзы.
Это все названия для одной крутой вещи — плавного изменения размера шрифта и вертикального ритма в зависимости от размера экрана. С одним нюансом: есть контрольные точки, где формула может меняться. Или нужно «зажать» размер в некотором диапазоне.
И это логично, ведь надо предотвратить слишком мелкий или слишком крупный шрифт.
И вот инструмент для этого: https://modern-fluid-typography.vercel.app/
#font #clamp
👍12❤1
#статья дня
Экспорты по-умолчанию это плохо, пнятненько? Сейчас поясню.
Дал я тут более опытному товарищу свой пет-проект на ревью и заставил он меня импортировать React как пространство имён (namespace, неймспейс кто привык). Ну т. е. так:
Причина в том самом дефолтном экспорте: React импортируется целиком в ваш проект, даже когда нужно не все. И этим страдают многие библиотеки. Невозможно реализовать алгоритм т. н. treeshake — удаления ненужного из сборки.
Это, конечно, не единственный минус дефолтных экспортов. Подробнее почему не стоит их вообще использовать — эта статья:
https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/
Если коротко и отбросить тришейкинг: снижается когнитивная нагрузка.
#js #export #import
Экспорты по-умолчанию это плохо, пнятненько? Сейчас поясню.
Дал я тут более опытному товарищу свой пет-проект на ревью и заставил он меня импортировать React как пространство имён (namespace, неймспейс кто привык). Ну т. е. так:
import * as React from “react”;Причина в том самом дефолтном экспорте: React импортируется целиком в ваш проект, даже когда нужно не все. И этим страдают многие библиотеки. Невозможно реализовать алгоритм т. н. treeshake — удаления ненужного из сборки.
Это, конечно, не единственный минус дефолтных экспортов. Подробнее почему не стоит их вообще использовать — эта статья:
https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/
Если коротко и отбросить тришейкинг: снижается когнитивная нагрузка.
#js #export #import
Human Who Codes
Why I've stopped exporting defaults from my JavaScript modules - Human Who Codes
After years of fighting with default exports, I've changed my ways.
👍5
#codepen дня
В этом весьма красивом и технически сложном кодпене по мотивам "Унесённых призраками" меня больше всего веселит ставший уже классическим приём наложения большой кучи полосок сверху чтобы по ховеру на них изменять параметры лежащих ниже узлов.
Казалось бы, обычный ~, а каков эффект: https://codepen.io/cobra_winfrey/pen/GRMdwwG
#css #hover
В этом весьма красивом и технически сложном кодпене по мотивам "Унесённых призраками" меня больше всего веселит ставший уже классическим приём наложения большой кучи полосок сверху чтобы по ховеру на них изменять параметры лежащих ниже узлов.
Казалось бы, обычный ~, а каков эффект: https://codepen.io/cobra_winfrey/pen/GRMdwwG
#css #hover
👍5
#фишка дня
Если вам не пофиг на удобство пользования формами и сайтами вообще, то вы хоть раз, но задумывались о порядке перехода клавишей 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
👍24🔥8
#тред дня
В Twitter проходит очередной челендж: требуется уместить паттерн в 280 символов.
https://twitter.com/anatudor/status/1479135302925041671
Примеры можно увидеть на иллюстрации, в треде есть ещё.
Ну коллекция кодпенов для вдохновения: https://codepen.io/thebabydino/full/OJmpzya
#twitter #css #pattern #contest #challenge
В Twitter проходит очередной челендж: требуется уместить паттерн в 280 символов.
https://twitter.com/anatudor/status/1479135302925041671
Примеры можно увидеть на иллюстрации, в треде есть ещё.
Ну коллекция кодпенов для вдохновения: https://codepen.io/thebabydino/full/OJmpzya
#twitter #css #pattern #contest #challenge
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Давайте расслабимся немного и обойдёмся сегодня без поста о разработке.
Я тут отдал нашему CEO запоздалый рождественский подарок «со смыслом». Я ожидал чего угодно…
Но только не того, что он парализует работу компании на пару часов 🤡
Я тут отдал нашему CEO запоздалый рождественский подарок «со смыслом». Я ожидал чего угодно…
Но только не того, что он парализует работу компании на пару часов 🤡
👍39
#фишка дня от Никиты Голубова
Как всегда самые интересные штуки в Google Chrome DevTools прячутся в неведомых панелях.
Вот и на этот раз: чтобы получить возможность поменять таймзону на странице, в девтулзах нужно добавить панель Sensors (см. More tools) и там выбрать или ввести нужную.
Почему Sensors? Пёс его знает. Часовые пояса всегда всех раздражали.
#tz #chrome #devtools
Как всегда самые интересные штуки в Google Chrome DevTools прячутся в неведомых панелях.
Вот и на этот раз: чтобы получить возможность поменять таймзону на странице, в девтулзах нужно добавить панель Sensors (см. More tools) и там выбрать или ввести нужную.
Почему Sensors? Пёс его знает. Часовые пояса всегда всех раздражали.
#tz #chrome #devtools
👍13
Media is too big
VIEW IN TELEGRAM
#codepen дня
Спирограф, слышали о таком развлечении? Если нет, крайне рекомендую найти себе, прокрастинация будет рада.
А пока давайте сделаем свой генератор спирограф-фигур в SVG на базе библиотек SVG.js, GSAP и generative-utils:
https://codepen.io/michellebarker/pen/GRMBVYX
Пакет generative-utils вообще довольно интересный, там приличное количество утилит для создания генеративного арта (не путать с дегенеративным, это что-то времён Хрущёва).
#svg #art #gsap
Спирограф, слышали о таком развлечении? Если нет, крайне рекомендую найти себе, прокрастинация будет рада.
А пока давайте сделаем свой генератор спирограф-фигур в SVG на базе библиотек SVG.js, GSAP и generative-utils:
https://codepen.io/michellebarker/pen/GRMBVYX
Пакет generative-utils вообще довольно интересный, там приличное количество утилит для создания генеративного арта (не путать с дегенеративным, это что-то времён Хрущёва).
#svg #art #gsap
👍2
#статья дня
Информации по градиентам не бывает много. В дополнение к моему посту, прилетел неплохой перевод статьи Джоша Камю, опубликованный на хабре: https://habr.com/ru/post/645165/
Ну и там же и ссылка на очередной инструмент их создания, от автора: https://www.joshwcomeau.com/gradient-generator/
Крайне рекомендую ознакомиться и ещё больше рекомендую использовать.
#css #gradient #hsl
Информации по градиентам не бывает много. В дополнение к моему посту, прилетел неплохой перевод статьи Джоша Камю, опубликованный на хабре: https://habr.com/ru/post/645165/
Ну и там же и ссылка на очередной инструмент их создания, от автора: https://www.joshwcomeau.com/gradient-generator/
Крайне рекомендую ознакомиться и ещё больше рекомендую использовать.
#css #gradient #hsl
👍4
#инструмент дня
Когда я в очередной раз уронил продакшен, мне было сказано сесть и отрисовать диаграммы работы системы и пометить на них точки сбора логов, трекинга.
Чтобы знание было доступно всем.
В нашем Confluence (wiki) конечно же был инструмент для рисования, на базе draw.io. Штука хорошая, но мне хотелось создавать и хранить диаграммы в коде, если уж не на базе кода. Совместно с текущей документацией по развёртыванию.
И такой инструмент нашёлся! И назвывается он Mermaid:
https://mermaid-js.github.io/mermaid/#/
Прекрасно встраивается в Markdown, имеются и плагины для предпросмотра в VS Code, Confluence, WebStorm и так далее.
И конечно же, библиотеки для интеграции с различными языками.
Естественно, Mermaid не один такой, есть Kroki, blockdiag и ещё несколько. Но мне Mermaid зашёл больше всех.
Задачу я решил, CTO в восторге. Поддерживать легко.
А недавно поступило предложение о поддержке в GitHub Markdown, будет круто!
#markdown #mermaid #diagram
Когда я в очередной раз уронил продакшен, мне было сказано сесть и отрисовать диаграммы работы системы и пометить на них точки сбора логов, трекинга.
Чтобы знание было доступно всем.
В нашем Confluence (wiki) конечно же был инструмент для рисования, на базе draw.io. Штука хорошая, но мне хотелось создавать и хранить диаграммы в коде, если уж не на базе кода. Совместно с текущей документацией по развёртыванию.
И такой инструмент нашёлся! И назвывается он Mermaid:
https://mermaid-js.github.io/mermaid/#/
Прекрасно встраивается в Markdown, имеются и плагины для предпросмотра в VS Code, Confluence, WebStorm и так далее.
И конечно же, библиотеки для интеграции с различными языками.
Естественно, Mermaid не один такой, есть Kroki, blockdiag и ещё несколько. Но мне Mermaid зашёл больше всех.
Задачу я решил, CTO в восторге. Поддерживать легко.
А недавно поступило предложение о поддержке в GitHub Markdown, будет круто!
#markdown #mermaid #diagram
👍12🔥3
#статья дня
Цветовая схема... казалось бы, что может быть проще, не так ли?
Ну с точки зрения пользователя-то да, а с точки зрения разработчика этой самой цветовой схемы?
Мало определить токены и их значения, надо ещё подобрать цвета так, чтобы они были одной яркости, чтобы не выделить одну сущность больше, чем другую, но при этом — разнести в пространстве.
Чтобы в конце-концов на любом мониторе смотрелось сносно.
И вот Дима Семьюшкин создал целое руководство, посвящённое созданию цветовых схем: https://devgru.github.io/tutorial16/
Начинается с определения цветовых моделей RGB, HSL, HSV, цветовых пространств. И дальше — собственно — к схемам, в качестве примеров рассмотрена известная серия Solarized.
К сожалению, руководство полностью не закончено, но и той информации, что есть, вполне достаточно.
А если есть желание продолжить — от него же имеется #инструмент формирования и анализа палитр: https://devgru.github.io/palette16
Вполне себе неплохое дополнение.
#design #rgb #hsl #color
Цветовая схема... казалось бы, что может быть проще, не так ли?
Ну с точки зрения пользователя-то да, а с точки зрения разработчика этой самой цветовой схемы?
Мало определить токены и их значения, надо ещё подобрать цвета так, чтобы они были одной яркости, чтобы не выделить одну сущность больше, чем другую, но при этом — разнести в пространстве.
Чтобы в конце-концов на любом мониторе смотрелось сносно.
И вот Дима Семьюшкин создал целое руководство, посвящённое созданию цветовых схем: https://devgru.github.io/tutorial16/
Начинается с определения цветовых моделей RGB, HSL, HSV, цветовых пространств. И дальше — собственно — к схемам, в качестве примеров рассмотрена известная серия Solarized.
К сожалению, руководство полностью не закончено, но и той информации, что есть, вполне достаточно.
А если есть желание продолжить — от него же имеется #инструмент формирования и анализа палитр: https://devgru.github.io/palette16
Вполне себе неплохое дополнение.
#design #rgb #hsl #color
👍13🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?
Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill
npx codepen-prefill index.html
Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.
#codepen #npm #npx #utility
TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?
Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill
npx codepen-prefill index.html
Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.
#codepen #npm #npx #utility
👍13
#игра дня
Я в курсе, что вы у нас бронтозавры и отписываетесь пачками, когда я выкладываю очередную игру для закрепления уровня разработки, но я продолжу это делать!
Потому что мне они нравятся :)
Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается :)
https://css-speedrun.netlify.app/
Я чота был невнимательный в паре заданий (или считал себя дофига умным) и прошёл в итоге аж за 07:25:7 :(
#css #game
Я в курсе, что вы у нас бронтозавры и отписываетесь пачками, когда я выкладываю очередную игру для закрепления уровня разработки, но я продолжу это делать!
Потому что мне они нравятся :)
Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается :)
https://css-speedrun.netlify.app/
Я чота был невнимательный в паре заданий (или считал себя дофига умным) и прошёл в итоге аж за 07:25:7 :(
#css #game
👍12🔥4😱1
#статья дня
Там на самом деле статья-то… #заметка скорее.
В общем, если вы в своих React-проектах часто используете логику отображения-скрытия чего-либо, то это всё превращается в повторение одного и того же кода: setOpen(true), setOpen(false) и так далее.
Напрашивается метод toggle, который переключал бы значение в зависимости от текущего на обратное.
Плюс, было бы неплохо добавить насильную установку значения, а не просто обратное.
И тут на ум приходит реализация хука вроде useToggle, который вынес бы весь повторяющийся код: https://levelup.gitconnected.com/react-custom-hooks-3-usetoggle-and-useboolean-af842c5b8b47
А если вы любите более… литературный код с чётким значением названий методов, там же описывается и вариант useBoolean, который вернёт методы включения, выключения и переключения состояния, а дальше уж используйте как надо.
#js #react #toggle
Там на самом деле статья-то… #заметка скорее.
В общем, если вы в своих React-проектах часто используете логику отображения-скрытия чего-либо, то это всё превращается в повторение одного и того же кода: setOpen(true), setOpen(false) и так далее.
Напрашивается метод toggle, который переключал бы значение в зависимости от текущего на обратное.
Плюс, было бы неплохо добавить насильную установку значения, а не просто обратное.
И тут на ум приходит реализация хука вроде useToggle, который вынес бы весь повторяющийся код: https://levelup.gitconnected.com/react-custom-hooks-3-usetoggle-and-useboolean-af842c5b8b47
А если вы любите более… литературный код с чётким значением названий методов, там же описывается и вариант useBoolean, который вернёт методы включения, выключения и переключения состояния, а дальше уж используйте как надо.
#js #react #toggle
🔥9