#фишка дня

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

#тред дня

В Twitter проходит очередной челендж: требуется уместить паттерн в 280 символов.

https://twitter.com/anatudor/status/1479135302925041671

Примеры можно увидеть на иллюстрации, в треде есть ещё.

Ну коллекция кодпенов для вдохновения: https://codepen.io/thebabydino/full/OJmpzya

#twitter #css #pattern #contest #challenge

Давайте расслабимся немного и обойдёмся сегодня без поста о разработке.

Я тут отдал нашему CEO запоздалый рождественский подарок «со смыслом». Я ожидал чего угодно…

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

#фишка дня от Никиты Голубова

Как всегда самые интересные штуки в Google Chrome DevTools прячутся в неведомых панелях.

Вот и на этот раз: чтобы получить возможность поменять таймзону на странице, в девтулзах нужно добавить панель Sensors (см. More tools) и там выбрать или ввести нужную.

Почему Sensors? Пёс его знает. Часовые пояса всегда всех раздражали.

#tz #chrome #devtools

#codepen дня

Спирограф, слышали о таком развлечении? Если нет, крайне рекомендую найти себе, прокрастинация будет рада.

А пока давайте сделаем свой генератор спирограф-фигур в SVG на базе библиотек SVG.js, GSAP и generative-utils:

https://codepen.io/michellebarker/pen/GRMBVYX

Пакет generative-utils вообще довольно интересный, там приличное количество утилит для создания генеративного арта (не путать с дегенеративным, это что-то времён Хрущёва).

#svg #art #gsap

#статья дня

Информации по градиентам не бывает много. В дополнение к моему посту, прилетел неплохой перевод статьи Джоша Камю, опубликованный на хабре: https://habr.com/ru/post/645165/

Ну и там же и ссылка на очередной инструмент их создания, от автора: https://www.joshwcomeau.com/gradient-generator/

Крайне рекомендую ознакомиться и ещё больше рекомендую использовать.

#css #gradient #hsl

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

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

Чтобы знание было доступно всем.

В нашем 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

#статья дня

Цветовая схема... казалось бы, что может быть проще, не так ли?

Ну с точки зрения пользователя-то да, а с точки зрения разработчика этой самой цветовой схемы?

Мало определить токены и их значения, надо ещё подобрать цвета так, чтобы они были одной яркости, чтобы не выделить одну сущность больше, чем другую, но при этом — разнести в пространстве.

Чтобы в конце-концов на любом мониторе смотрелось сносно.

И вот Дима Семьюшкин создал целое руководство, посвящённое созданию цветовых схем: https://devgru.github.io/tutorial16/

Начинается с определения цветовых моделей RGB, HSL, HSV, цветовых пространств. И дальше — собственно — к схемам, в качестве примеров рассмотрена известная серия Solarized.

К сожалению, руководство полностью не закончено, но и той информации, что есть, вполне достаточно.

А если есть желание продолжить — от него же имеется #инструмент формирования и анализа палитр: https://devgru.github.io/palette16

Вполне себе неплохое дополнение.

#design #rgb #hsl #color

#фишка дня

TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?

Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill

npx codepen-prefill index.html

Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.

#codepen #npm #npx #utility

#игра дня

Я в курсе, что вы у нас бронтозавры и отписываетесь пачками, когда я выкладываю очередную игру для закрепления уровня разработки, но я продолжу это делать!

Потому что мне они нравятся :)

Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается :)

https://css-speedrun.netlify.app/

Я чота был невнимательный в паре заданий (или считал себя дофига умным) и прошёл в итоге аж за 07:25:7 :(

#css #game

#статья дня

Там на самом деле статья-то… #заметка скорее.

В общем, если вы в своих React-проектах часто используете логику отображения-скрытия чего-либо, то это всё превращается в повторение одного и того же кода: setOpen(true), setOpen(false) и так далее.

Напрашивается метод toggle, который переключал бы значение в зависимости от текущего на обратное.

Плюс, было бы неплохо добавить насильную установку значения, а не просто обратное.

И тут на ум приходит реализация хука вроде useToggle, который вынес бы весь повторяющийся код: https://levelup.gitconnected.com/react-custom-hooks-3-usetoggle-and-useboolean-af842c5b8b47

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

#js #react #toggle

#баг дня

Не каждый день простое if-условие чинит угрозу приватности миллиарду людей.

https://github.com/WebKit/WebKit/commit/f73005ed826014988f8ee447de23927749fb56e5

Ошибка в WebKit-реализации IndexedDB позволяет отслеживать поведение пользователей между сайтами: https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/

 #safari #webkit #privacy

#фишка дня

Обратите внимание на иллюстрацию, если я её не сильно зашакалил, конечно. Ничего интересного не замечаете?

Действительно, три раза гружу страницу и три же раза подгружается разное число изображений.

Все изображения при этом имеют атрибут loading=“lazy”, знаменитая “ленивая” загрузка. Грузятся только те изображения, что видны. И ещё те, до которых вы (вероятно) планируете скроллить.

Так вот, три раза — разное число. Почему же?

И тут кроется самое интересно: первый — без троттлинга (замедления) сети, второй — Fast 3G, третий — Slow 3G.

Т. е. Chrome грузит тем больше картинок, чем медленнее сеть. Казалось бы, где логика? Но давайте подумаем. Slow 3G редко значит “просто медленно”, скорее всего — ваше соединение нестабильно (поезд, метро). А ничего так не раздражает на нестабильном соединении, как ожидание ленивой подгрузки изображений.

Такая вот казалось бы вывернутая наизнанку логика, не лишённая изящества.

Попробуйте сами: https://mathiasbynens.be/demo/img-loading-lazy

#chrome #lazy #img

#видео дня

Тем временем, Илья Куликов упомянул в нашем @htmlshitchat свой доклад о работе с изображениями с канала Podlodka (хороший канал, между прочим).

Видео про работу с изображениями в вебе вообще. Думаю, будет хорошим дополнением к “Картинки как коробки” от Полины Гуртовой.

И да, в докладе есть часть про ленивую подгрузку (было-стало) и её пороги, почему и выкладываю сразу же. TL;DR: не всё так просто. В общем, рекомендую ознакомиться

Собственно: https://www.youtube.com/watch?v=yp3G0FUOQhM&ab_channel=Podlodka

#podlodka #video #img

#codepen года

Итак, рубрику "codepen дня" ждёт переформатирование, заморозим её. Но не выкатить итоги года (как в прошлый раз) просто нельзя.

Встречайте, лучшие работы на CodePen за 2021 год по версии пользователей сервиса: https://codepen.io/2021/popular/pens/

Первое место, конечно, неожиданное. Надо попробовать на Flutter переписать...

#top