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

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

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

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

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

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

Сб. Библиотека «нарисованных вручную» элементов UI. DoodleCSS: https://t.me/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.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!

#игра дня

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

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