#фишка дня

Посмотрите на этот код; ничего странного не замечаете?

А здесь происходит ого-го какая драма!

Итак, этот, казалось бы, невинный кусок кода очень даже содержит в себе бэкдор. Посмотрите внимательно на GitHub Gists: https://gist.github.com/bekharsky/fa4c071ce657e37f6d0f3e7f4a91799b

Да, это на скриншоте сложно заметить, но в деструктурировании req.query вторым параметром лежит невидимый символ \u3164. Заполнитель, буквально.

То есть:

const { timeout,\u3164} = req.query;

Добавляете символ как параметр запроса с командой на выполнение ну и дальше он передаётся в список ниже. А уж там...

Доклад по методу: https://certitude.consulting/blog/en/invisible-backdoor/

Вообще, таких символов очень много (очень рекомендую почитать статью). Не копируйте все подряд из сети себе.

#node #js #security #unicode

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

Иногда видишь такой радостное описание новой крутой библиотеки для позиционирования тултипов и вообще разных элементов друг относительно друга. Например, этой: https://floating-ui.com/

Смотришь примеры, не покидает лёгкое ощущение дежа вю. Но все эти библиотеки одинаковые же. Вроде всё устраивает.

Заходишь на их гитхаб и по привычке собираешься жмякнуть звезду. А там уже жмякнуто...

Короче, оказалось, Floating UI это старый добрый Popper.js. Это не хорошо и не плохо, Popper отлично справлялся и справляется с работой. Но на мой взгляд, новое название такое себе.

Впрочем, сути дела не меняет. Штука — отличная.

#popper #js #tooltip

#такое дня

Иногда мне кажется, что JavaScript это такая шутка. Но если бы его не было — его стоило бы придумать.

P. S. Конечно же это поведение закреплено спецификацией https://javascript.plainenglish.io/the-benefit-of-the-thenable-object-in-javascript-78107b697211

#js #async #await

#ссылка дня

А если бы Валерий следил за The State of CSS, такого удивления бы не возникло.

Вот так вот неожиданно я прислал вам ссылку на новый альманах. CSS в 2021 году, очевидно.

В этот раз на русский переведено почти всё :)

Претензии к качеству перевода отправляйте в issues, мне они тут не нужны

#css #book #almanac

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

Сегодня я решил напомнить уважаемому сообществу, что за инфраструктурой Node.js нет монополии на средства разработки фронтенда. Ну как минимум, вы можете просто сесть и начать. Но как насчёт чего сложнее? Можно ли жить без node_modules в 2021 году?

Можно. Команда Ruby on Rails это доказывает, выпуская Rails 7.0: https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision

Для них это был долгий путь, RoR давно уже не на хайпе и стал вполне себе повседневным инструментом множества компаний. Но звёзды сошлись именно в этом году. Гибридное приложение без React и Node на одном языке — реальность.

Я очень рекомендую обратить внимание на Rails и постараться выбросить хайп из головы.

#ruby #ror

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

Заметили переименование канала? Неудивительно. Верстальщики тоже разработчики :)

На самом деле, просто тесно в рамках темы. Иронично, что этот пост всё равно про вёрстку.

Скучали по Comic Sans MS? Да ладно, не врите. Точно скучали.

А может, вам нужно набросать прототип, в котором никто не докопается до дизайна? Нет ничего лучше «нарисованного вручную» макета!

Вот свежий UI-кит: https://chr15m.github.io/DoodleCSS/

И фраза «Sketching with CSS» уже не кажется такой глупой.

#css #ui #kit

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

Пн. Будьте осторожны, копируя код из интернета. Можете нарваться на скрытые символы: 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