#дайджест недели

Пн. Будьте осторожны, копируя код из интернета. Можете нарваться на скрытые символы: https://t.iss.one/htmlshit/869

Вт. Popper.js — библиотетка тултипов и слежения за блоками — переименовалась во Floating UI: https://t.iss.one/htmlshit/871

Ср. Есть такие объекты в JS — thenable. Довольно забавная штука: https://t.iss.one/htmlshit/873

Чт. The State of CSS 2021: https://t.iss.one/htmlshit/874

Пт. Ruby on Rails 7.0 доказывает, что Node.js для гибридных приложений не особо-то и нужен: https://t.iss.one/htmlshit/876

Сб. Библиотека «нарисованных вручную» элементов UI. DoodleCSS: https://t.iss.one/htmlshit/878

Stay tuned!

#баг дня

Давно багов не было! Встречайте: в Chrome 96 на macOS Monterey символы переноса отображаются квадратиками: https://codepen.io/bramus/pen/57d328f32cbc657a3d7a3f4a59506e02

Баг официально зарегистрирован: https://bugs.chromium.org/p/chromium/issues/detail?id=1267606

Обходится просто:

html {
    -webkit-hyphenate-character: '-';
}

Исправлено в Chrome 98.

#chrome #bug

#библиотека дня

Второй забавный UI-набор за неделю.

Скажите мне, узнаёте ли вы стиль на картинке, и я скажу, сколько вам лет.

Ну или что вы учились в пост-советской школе, ха-ха.

Так или иначе, TuiCSS. Буквально — Turbo Vision UI CSS: https://github.com/vinibiavatti1/TuiCss

Не знаю, зачем оно. Но мало ли, у вас приступ ностальгии или вечеринка в стиле.

Мне больше по душе NES.css, его для ретро-игр использовать милое дело: https://nostalgic-css.github.io/NES.css/ 😍

#ui #css

#книга дня

Какой материал подъехал, вы не поверите!

https://www.patterns.dev/

Бесплатная, прекрасно иллюстрированная и снабжённая подробными примерами книга о паттернах проектирования и их применении в React-приложениях.

Просто огонь 🔥

#book #react #js

#ссылка дня

Среди новичков (да и не только) зачастую отсутствует понимание того, как же всё-таки выглядят вообще все HTML-теги. Но это-то ладно.

А вот для чего нужен normalize? sanitize? reset? bootstrap? Что происходит-то вообще?

Почему нельзя просто на одной странице всё наглядно показать и сравнить?!

Так можно!

HTML5 Kitchen Sink. Всё в кучу!

https://github.com/dbox/html5-kitchen-sink/

Заходим, переключаем, сравниваем. Разрабатываем своё.

#html #css #reset #normalize

#фишка дня

Если вам в 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

#дайджест недели

Пн. Баг в переносах в Chrome 96 на macOS Monterey: https://t.iss.one/htmlshit/882

Вт. Пара забавных UI-китов: https://t.iss.one/htmlshit/884

Ср. Находка недели, книга о паттернах проектирования: https://t.iss.one/htmlshit/885

Чт. Как выглядят вообще все элементы HTML5? Вот так: https://t.iss.one/htmlshit/886

Пт. Как правильно устанавливать стейт в React, зависящий от своего предыдущего состояния? Вот так: https://t.iss.one/htmlshit/887

Сб. Ёлка на CSS, выводящая свой код: https://t.iss.one/htmlshit/888

Stay tuned!

#игра дня

Люблю я эту рубрику. Сегодня будет аж три примера.

Первая игра напоминает Лого Миры (олды тут?): проведите робота через уровни, программируя его шаги на 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

#статья дня

Хотите резко обновить свои знания вёрстки? Я бы даже сказал, актуализировать. Тогда Designcember — для вас: https://web.dev/how-we-built-designcember/

CSS Grid, спрайты, маски, прекрасно поданные контейнерные запросы с полифиллом, навигация с клавиатуры и общая прекрасная доступность, оптимизация изображений через консольный Squoosh, тёмная тема. Для совсем космополитов — компоненты и статика через Astro.

Очень качественный буст знаний.

#css #grid #squoosh #astro

#статья дня

Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.

Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.

Очевидно, на ум придёт Swiper, есть у него опция freeMode, но он, во-первых монструозный, во-вторых — бесконечный режим на нём столь же бесконечно баганутый.

Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.

Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel

freeMode уж сами допишете.

Острожно — геометрия! И CSS 3d-преобразования 🤪

Великолепная статья, такие в школе надо преподавать.

#css #js #carousel #3d

#codepen дня

Больше снежинок богу снежинок!

С новым годом, товарищи подписчики :)

Как всегда, кодпен не столько эффектный, сколько полезный: WebGL на Three.js и максимально простой код генерации снежинок и физики на Cannon.js

Каждая снежинка уникальна, как же иначе.

https://codepen.io/terabaud/pen/NWaXvoy

#ссылка дня

Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/

Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально.

Все примеры с исходными кодами, есть и весьма практичные, вроде галереи.

#js #webgl

#игра дня

Такое развидеть нельзя. Нет, это не описание, это буквально — название игры: https://cantunsee.space/

Хорошая тренировка ваших UI/UX способностей. Но есть нюанс — она направлена сугубо на Material Design, потому некоторые моменты в целом могут быть спорные. Но впечатление не портится.

Удачи!

#game #ux #ui

#статья дня

Понятие “доступности” включает в себя не только доступ с клавиатуры и контастные цвета, но и уважение к пользователям, не желающим или не могущим воспринимать анимации.

Да, некоторые ваши прекрасные анимации вполне могут вызвать приступ тошноты не в переносном смысле.

Поэтому к анимациям надо подходить ответственно. “Могу” не значит “надо”:

1. Решает ли анимация проблему?
2. Отвлекает ли она от контента?
3. Может ли пользователь отказаться от неё?

На все эти вопросы нужно подготовить ответы заранее. И вот к слову, процесс отказа — принципиального или ситуационного — описывается в свежей статье Кэсси Эванс: https://css-tricks.com/empathetic-animation/

Не мешайте вашим пользователям. Помогайте им.

#css #animation #js

#codepen дня

Сколько div-ов на иллюстрации? Если ты ответил, что сколько и квадратов — ты ошибся.

Один там. И куча градиентов :)

А вот количеством и размером кубов легко можно управлять через пользовательские свойства: https://codepen.io/t_afif/pen/PoJeqwN

Пугающе гениальная штука :)

#css #var #gradient

#фишка дня

Quine (квайн) — компьютерная программа, которая выдаёт на выходе точную копию своего исходного текста.

Ну что же, на JavaScript это проще простого: https://jsfiddle.net/fxi/1x3any9o/

А с setInterval превращается в нечто максимально новогоднее.

#js #quine

#инструмент дня

Текучая типографика. Адаптивная типографика. Шлюзы.

Это все названия для одной крутой вещи — плавного изменения размера шрифта и вертикального ритма в зависимости от размера экрана. С одним нюансом: есть контрольные точки, где формула может меняться. Или нужно «зажать» размер в некотором диапазоне.

И это логично, ведь надо предотвратить слишком мелкий или слишком крупный шрифт.

И вот инструмент для этого: https://modern-fluid-typography.vercel.app/

#font #clamp

#статья дня

Экспорты по-умолчанию это плохо, пнятненько? Сейчас поясню.

Дал я тут более опытному товарищу свой пет-проект на ревью и заставил он меня импортировать React как пространство имён (namespace, неймспейс кто привык). Ну т. е. так:

import * as React from “react”;

Причина в том самом дефолтном экспорте: React импортируется целиком в ваш проект, даже когда нужно не все. И этим страдают многие библиотеки. Невозможно реализовать алгоритм т. н. treeshake — удаления ненужного из сборки.

Это, конечно, не единственный минус дефолтных экспортов. Подробнее почему не стоит их вообще использовать — эта статья:

https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/

Если коротко и отбросить тришейкинг: снижается когнитивная нагрузка.

#js #export #import

#codepen дня

В этом весьма красивом и технически сложном кодпене по мотивам "Унесённых призраками" меня больше всего веселит ставший уже классическим приём наложения большой кучи полосок сверху чтобы по ховеру на них изменять параметры лежащих ниже узлов.

Казалось бы, обычный ~, а каков эффект: https://codepen.io/cobra_winfrey/pen/GRMdwwG

#css #hover