#фишка дня
Если вам в React потребовалось по требованию ESLint включить в зависимости useEffect не только нечто внешнее, но и текущий внутренний стейт, вы гарантированно получите бесконечный цикл и переполнение буфера.
Чтобы этого не произошло, ставьте ссылку на стейт, а не сам стейт. И всё. Пример на скриншоте.
Вышеупомянутое ESLint-правило react-hooks/exhaustive-deps действительно может раздражать (мы ведь все умнее машины, правда?), но количество ошибок проектирования, от которых оно избавляет, несчётно: https://typeofnan.dev/you-probably-shouldnt-ignore-react-hooks-exhaustive-deps-warnings/
#react #js #hooks
Если вам в React потребовалось по требованию ESLint включить в зависимости useEffect не только нечто внешнее, но и текущий внутренний стейт, вы гарантированно получите бесконечный цикл и переполнение буфера.
Чтобы этого не произошло, ставьте ссылку на стейт, а не сам стейт. И всё. Пример на скриншоте.
Вышеупомянутое ESLint-правило react-hooks/exhaustive-deps действительно может раздражать (мы ведь все умнее машины, правда?), но количество ошибок проектирования, от которых оно избавляет, несчётно: https://typeofnan.dev/you-probably-shouldnt-ignore-react-hooks-exhaustive-deps-warnings/
#react #js #hooks
#codepen дня
Почти по всей Европе Рождество, а поэтому…
Вот вам ёлка, которая выводит свой собственный код!
https://codepen.io/finnhvman/pen/abLVZNY
Скажите теперь, что CSS — это не язык программирования 😬
#css #trick
Почти по всей Европе Рождество, а поэтому…
Вот вам ёлка, которая выводит свой собственный код!
https://codepen.io/finnhvman/pen/abLVZNY
Скажите теперь, что CSS — это не язык программирования 😬
#css #trick
#дайджест недели
Пн. Баг в переносах в Chrome 96 на macOS Monterey: https://t.me/htmlshit/882
Вт. Пара забавных UI-китов: https://t.me/htmlshit/884
Ср. Находка недели, книга о паттернах проектирования: https://t.me/htmlshit/885
Чт. Как выглядят вообще все элементы HTML5? Вот так: https://t.me/htmlshit/886
Пт. Как правильно устанавливать стейт в React, зависящий от своего предыдущего состояния? Вот так: https://t.me/htmlshit/887
Сб. Ёлка на CSS, выводящая свой код: https://t.me/htmlshit/888
Stay tuned!
Пн. Баг в переносах в Chrome 96 на macOS Monterey: https://t.me/htmlshit/882
Вт. Пара забавных UI-китов: https://t.me/htmlshit/884
Ср. Находка недели, книга о паттернах проектирования: https://t.me/htmlshit/885
Чт. Как выглядят вообще все элементы HTML5? Вот так: https://t.me/htmlshit/886
Пт. Как правильно устанавливать стейт в React, зависящий от своего предыдущего состояния? Вот так: https://t.me/htmlshit/887
Сб. Ёлка на CSS, выводящая свой код: https://t.me/htmlshit/888
Stay tuned!
This media is not supported in your browser
VIEW IN TELEGRAM
#игра дня
Люблю я эту рубрику. Сегодня будет аж три примера.
Первая игра напоминает Лого Миры (олды тут?): проведите робота через уровни, программируя его шаги на JavaScript: https://lab.reaal.me/jsrobot/
Вторая сильно хардкорнее и не настолько красива визуально и состоит в программировании лифта: https://play.elevatorsaga.com/
Волк, коза и капуста на максималках, в общем.
Ну и на закуску — нечто максимально глобальное: ММО Screeps. Программируйте свои юниты и доминируйте: https://store.steampowered.com/app/464350/Screeps_World/
Игра открыта, платная версия поддерживает сообщество.
В общем, есть чем занять ближайшие выходные. Тем, у кого они есть, конечно же :)
#js #game
Люблю я эту рубрику. Сегодня будет аж три примера.
Первая игра напоминает Лого Миры (олды тут?): проведите робота через уровни, программируя его шаги на JavaScript: https://lab.reaal.me/jsrobot/
Вторая сильно хардкорнее и не настолько красива визуально и состоит в программировании лифта: https://play.elevatorsaga.com/
Волк, коза и капуста на максималках, в общем.
Ну и на закуску — нечто максимально глобальное: ММО Screeps. Программируйте свои юниты и доминируйте: https://store.steampowered.com/app/464350/Screeps_World/
Игра открыта, платная версия поддерживает сообщество.
В общем, есть чем занять ближайшие выходные. Тем, у кого они есть, конечно же :)
#js #game
#фишка дня
Новинки ESNext в stage 3 (короче, почти-почти): новые методы массива groupBy и groupByToMap.
На скриншоте прекрасно видно, для чего нужны. Больше не надо изголяться с reduce.
Уже доступны в полифилле core-js: https://github.com/zloirock/core-js#array-grouping
Скоро залетят и в TypeScript.
#js #array #esnext
Новинки ESNext в stage 3 (короче, почти-почти): новые методы массива groupBy и groupByToMap.
На скриншоте прекрасно видно, для чего нужны. Больше не надо изголяться с reduce.
Уже доступны в полифилле core-js: https://github.com/zloirock/core-js#array-grouping
Скоро залетят и в TypeScript.
#js #array #esnext
#статья дня
Хотите резко обновить свои знания вёрстки? Я бы даже сказал, актуализировать. Тогда Designcember — для вас: https://web.dev/how-we-built-designcember/
CSS Grid, спрайты, маски, прекрасно поданные контейнерные запросы с полифиллом, навигация с клавиатуры и общая прекрасная доступность, оптимизация изображений через консольный Squoosh, тёмная тема. Для совсем космополитов — компоненты и статика через Astro.
Очень качественный буст знаний.
#css #grid #squoosh #astro
Хотите резко обновить свои знания вёрстки? Я бы даже сказал, актуализировать. Тогда Designcember — для вас: https://web.dev/how-we-built-designcember/
CSS Grid, спрайты, маски, прекрасно поданные контейнерные запросы с полифиллом, навигация с клавиатуры и общая прекрасная доступность, оптимизация изображений через консольный Squoosh, тёмная тема. Для совсем космополитов — компоненты и статика через Astro.
Очень качественный буст знаний.
#css #grid #squoosh #astro
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.
Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.
Очевидно, на ум придёт Swiper, есть у него опция freeMode, но он, во-первых монструозный, во-вторых — бесконечный режим на нём столь же бесконечно баганутый.
Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.
Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel
freeMode уж сами допишете.
Острожно — геометрия! И CSS 3d-преобразования 🤪
Великолепная статья, такие в школе надо преподавать.
#css #js #carousel #3d
Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.
Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.
Очевидно, на ум придёт Swiper, есть у него опция freeMode, но он, во-первых монструозный, во-вторых — бесконечный режим на нём столь же бесконечно баганутый.
Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.
Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel
freeMode уж сами допишете.
Острожно — геометрия! И CSS 3d-преобразования 🤪
Великолепная статья, такие в школе надо преподавать.
#css #js #carousel #3d
Media is too big
VIEW IN TELEGRAM
#codepen дня
Больше снежинок богу снежинок!
С новым годом, товарищи подписчики :)
Как всегда, кодпен не столько эффектный, сколько полезный: WebGL на Three.js и максимально простой код генерации снежинок и физики на Cannon.js
Каждая снежинка уникальна, как же иначе.
https://codepen.io/terabaud/pen/NWaXvoy
Больше снежинок богу снежинок!
С новым годом, товарищи подписчики :)
Как всегда, кодпен не столько эффектный, сколько полезный: WebGL на Three.js и максимально простой код генерации снежинок и физики на Cannon.js
Каждая снежинка уникальна, как же иначе.
https://codepen.io/terabaud/pen/NWaXvoy
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
#игра дня
Такое развидеть нельзя. Нет, это не описание, это буквально — название игры: https://cantunsee.space/
Хорошая тренировка ваших UI/UX способностей. Но есть нюанс — она направлена сугубо на Material Design, потому некоторые моменты в целом могут быть спорные. Но впечатление не портится.
Удачи!
#game #ux #ui
Такое развидеть нельзя. Нет, это не описание, это буквально — название игры: https://cantunsee.space/
Хорошая тренировка ваших UI/UX способностей. Но есть нюанс — она направлена сугубо на Material Design, потому некоторые моменты в целом могут быть спорные. Но впечатление не портится.
Удачи!
#game #ux #ui
#статья дня
Понятие “доступности” включает в себя не только доступ с клавиатуры и контастные цвета, но и уважение к пользователям, не желающим или не могущим воспринимать анимации.
Да, некоторые ваши прекрасные анимации вполне могут вызвать приступ тошноты не в переносном смысле.
Поэтому к анимациям надо подходить ответственно. “Могу” не значит “надо”:
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
#codepen дня
Сколько div-ов на иллюстрации? Если ты ответил, что сколько и квадратов — ты ошибся.
Один там. И куча градиентов :)
А вот количеством и размером кубов легко можно управлять через пользовательские свойства: https://codepen.io/t_afif/pen/PoJeqwN
Пугающе гениальная штука :)
#css #var #gradient
Сколько div-ов на иллюстрации? Если ты ответил, что сколько и квадратов — ты ошибся.
Один там. И куча градиентов :)
А вот количеством и размером кубов легко можно управлять через пользовательские свойства: https://codepen.io/t_afif/pen/PoJeqwN
Пугающе гениальная штука :)
#css #var #gradient
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
#инструмент дня
Текучая типографика. Адаптивная типографика. Шлюзы.
Это все названия для одной крутой вещи — плавного изменения размера шрифта и вертикального ритма в зависимости от размера экрана. С одним нюансом: есть контрольные точки, где формула может меняться. Или нужно «зажать» размер в некотором диапазоне.
И это логично, ведь надо предотвратить слишком мелкий или слишком крупный шрифт.
И вот инструмент для этого: https://modern-fluid-typography.vercel.app/
#font #clamp
Текучая типографика. Адаптивная типографика. Шлюзы.
Это все названия для одной крутой вещи — плавного изменения размера шрифта и вертикального ритма в зависимости от размера экрана. С одним нюансом: есть контрольные точки, где формула может меняться. Или нужно «зажать» размер в некотором диапазоне.
И это логично, ведь надо предотвратить слишком мелкий или слишком крупный шрифт.
И вот инструмент для этого: https://modern-fluid-typography.vercel.app/
#font #clamp
#статья дня
Экспорты по-умолчанию это плохо, пнятненько? Сейчас поясню.
Дал я тут более опытному товарищу свой пет-проект на ревью и заставил он меня импортировать 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
Humanwhocodes
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.
#codepen дня
В этом весьма красивом и технически сложном кодпене по мотивам "Унесённых призраками" меня больше всего веселит ставший уже классическим приём наложения большой кучи полосок сверху чтобы по ховеру на них изменять параметры лежащих ниже узлов.
Казалось бы, обычный ~, а каков эффект: https://codepen.io/cobra_winfrey/pen/GRMdwwG
#css #hover
В этом весьма красивом и технически сложном кодпене по мотивам "Унесённых призраками" меня больше всего веселит ставший уже классическим приём наложения большой кучи полосок сверху чтобы по ховеру на них изменять параметры лежащих ниже узлов.
Казалось бы, обычный ~, а каков эффект: https://codepen.io/cobra_winfrey/pen/GRMdwwG
#css #hover
#фишка дня
Если вам не пофиг на удобство пользования формами и сайтами вообще, то вы хоть раз, но задумывались о порядке перехода клавишей 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
#тред дня
В 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
This media is not supported in your browser
VIEW IN TELEGRAM
Давайте расслабимся немного и обойдёмся сегодня без поста о разработке.
Я тут отдал нашему CEO запоздалый рождественский подарок «со смыслом». Я ожидал чего угодно…
Но только не того, что он парализует работу компании на пару часов 🤡
Я тут отдал нашему CEO запоздалый рождественский подарок «со смыслом». Я ожидал чего угодно…
Но только не того, что он парализует работу компании на пару часов 🤡