#такое дня

Если вам кажется, что прототипы в Figma зашли слишком далеко — вам не кажется.

Как вам прототип в виде имитации восьмибитной игры?

А вот держите: «Figland. Find the forbidden scroll».

Практического смысла не больше, чем у любого другого «игрового» портфолио. Впрочем, заглянуть в исходный файл чтобы посмотреть, как оно сделано и почерпнуть знаний — очень стоит.

Если же желаете знать моё мнение о прототипах: всё хорошо в меру. Показать заказчику — прекрасно. Дать же глубоко проработанный прототип разработчику — высока вероятность, что тот обязательно упустит какие-то состояния из виду, запутавшись в экранах.

Короче, карту компонентов и нормальное ТЗ прототип не заменит, но прекрасно дополнит.

А вот поработать с фокус-группой — это завсегда.

Ну как там, добрались до забытого свитка? :)

#figma #prototype

никто:
theguardian.com: я веган

...
Вот кого-то распирало, вы поглядите.

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

Уметь пользоваться отладчиком должен каждый разработчик.

Особенно когда инструменты становятся всё дружелюбнее, да ещё и встроены в браузер.

Итак, как отследить, какой код вызвал изменение атрибута (или поддерева, или вообще удаления) элемента?

Находим элемент в инспекторе, правой кнопкой – «Break on» ➡️ «attribute modifications» и... и в общем, всё, смотрите видео.

Теперь исполнение остановится по условию и вы сможете посмотреть код, изменивший ваш атрибут, прямо во вкладке «Sources». Там же можно добавить больше точек останова или просто продолжить.

#js #debug #devtools

#такое дня

Мой любимый вопрос на собеседованиях теперь: как вы организуете получение данных в вашем веб-приложении раз в каждые пять секунд?

Для кого-то ответ очевиден, а кто-то не понимает сути.

Подожду ответов в комментариях и через несколько часов выкачу что-нибудь как раз на эту тему.

#статья дня

Итак, предыдущий пост всем видно, вопрос поставлен. Поехали.

То, что я описал, вполне себе называется polling (периодический опрос, поллинг).

Хорошо, если собеседник знаком с концепцией сокетов или long polling, но это — проактивные методы, когда сервер инициирует отправку данных (условно). Нас они сейчас не очень волнуют, хотя и являются очень даже правильным ответом.

А вот что волнует — это то, что слишком уж много людей предлагает использовать setInterval. Пугающе большое число, я б даже сказал.

Так что не так с setInterval? Задали себе 5 секунд и опрашиваем сервер:

setInterval(function () {
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data));
}, 5000);

Вот только вы забыли: мы работаем в ненадёжной среде. Сеть может отвалиться, а данные могут готовиться дольше, чем 5 секунд. Поезд вообще может въехать в туннель.

И вот тут setInterval показывает свою уродливую сущность: он создаст второй экземляр (замыкание, инстанс) функции, а потом ещё и ещё и ещё… Ему плевать. И запросы к серверу начнут множиться. Видео об этом из неправильного ответа к предыдущему посту приложу в комментарии.

И ладно бы только сеть вела себя таким образом. В моей практике мы опрашиваем Google Sheets и Excel, а они тоже могут данные готовить очень долго.

Решение? setTimeout.

Вот только не надо мне говорить, что он выполнится лишь раз. Да, и что? Что мешает запланировать выполнение ещё раз?

(function poll(){
setTimeout(function(){
fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => {
console.log(data);
poll();
});
}, 5000);
})();

Но появляется другая проблема: нарастающее отставание. К каждому из запросов будет прибавляться время на обработку данных. Надо ли это чинить? Ну тут решать вам, я приложу статью с несколькими вариантами коррекции: https://reallifejs.com/brainchunks/repeated-events-timeout-or-interval/

Кстати, если вы при этом считаете, что setInterval абсолютно точен в своей периодичности и не прочитали статью выше, вы будете неправы, язык-то однопоточный. Каждый из браузеров пытается исправить это поведение, но «дребезга» не избежать и ошибка начнёт накапливаться.

Даже если в своей работе вы будете использовать сокеты или long-polling, знать об особенностях периодического исполнения задач в JS очень полезно.

#js #polling

#codepen дня

Устроим перепись олдов на канале? Кто ЛогоМиры помнит?

Мой путь в программирование точно с них начинался. Ещё с Муравья, но он был гораздо сложнее.

Кэсси Эванс придумала, что ЛогоМиры забавно ложатся на правила отрисовки SVG-кривых и сообразила сегодняшний кодпен дня.

Так что если вам интересно, как происходит отрисовка SVG — а на самом деле, там реально очень всё похоже на команды той самой черепашки — милости просим: https://codepen.io/cassie-codes/pen/ZEvNBmX

#svg #logo

#фишка дня

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

А очень просто: указывайте чёткие границы продолжительности цвета — color-stop, в два числа. А учитывая, что background-image способен принимать несколько значений, возможности комбиринирования огромны. Например: https://codepen.io/natszafraniec/pen/JmQmBV

Заметка была бы неполной без одной маленькой детали: чтобы не разбираться в особенностях работы repeating-linear-gradient и понять всю мощь комбинирования свойств, чтобы заполнить весь блок, стоит указать размер фоновой картинки, background-size. В примере выше — это 20% от ширины блока и 100% высоты. Итого, градиент из двух вертикальных полосок повторится пять раз.

#css #gradient

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

Псс, чел, у тебя в проекте тоже пустой README?

I got u.

Гляди сюда: https://readme.so/

Берёшь такой, накидываешь секции, если не можешь придумать, какие нужны, пишешь чуток маркдауна и — 💥 — у тебя README индустриального уровня.

Не благодари.

#readme #tool #git #markdown

#статья дня

Злые Марсиане (Evil Martians, ну это там Андрей Ситник, Роман Шамин, Полина Гуртовая и ещё с десяток прекрасных людей, которые должны быть вам знакомы) выкатили большую статью, подытоживающую использование вариативных шрифтов во фротенде: https://evilmartians.com/chronicles/the-joy-of-variable-fonts-getting-started-on-the-frontend

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

К слову, нелишним будет напомнить, что шрифту Martians Mono очень нужна кириллица и авторы (всё те же Марсиане) обещали добавить её туда за 1000 звёзд на гитхабе. Ерунда осталась, смотрим тут: https://t.me/htmlshit/1296

#fonts #css

Ну что, дамы и господа. Мы с вами сделали это!

https://twitter.com/romanshamin/status/1550573833903538177

#статья дня

Интересно, как поп-культура мотивирует разработчиков на попытки повторить эффекты, обычно достигаемые с помощью инструментов моушн-дизайна вроде After Effects.

Вот и тут, вдохновение — титры сериала Upload.

Вообще, там целая серия статей, титры из: Killing Eve, Ozark, The Marvelous Mrs Maisel и вот Upload.

Прям рекомендую: https://dev.to/robole/how-to-make-a-slick-css-animation-from-upload-tv-series-title-sequence-2h8f

Рассмотрены -webkit-background-clip, clipPath, конвертация текста в кривые в Inkscape (тоже полезно, кстати, по нему мало доков), создание контура. В общем, если вы занимаетесь промо-сайтами, это прям оно.

#svg #animation #clip

#статья дня

npm, Yarn 1, Yarn 2 или pnpm?

Знакомые слова? Если нет, это всё — менеджеры пакетов (библиотек и т. п.) node.js. И каждый из них имеет свои особенности и по поводу каждого из них всегда идут баталии.

На чём запускать новый проект? На что переводить старый? Что быстрее? Что меньше места на диске съест? Что безопаснее?

Итого, сегодня тема — сравнение менеджеров пакетов: https://blog.logrocket.com/javascript-package-managers-compared/

Ну и заодно её перевод на русский язык на Medium.

У нас пока Yarn 1 aka Classic, а что у вас, котаны?

#node #npm #yarn #pnpm

11-12 октября пройдёт конференция ViteConf. Как несложно догадаться, от создателей сверхбыстрого бандлера (сборщика) Vite.

Я его использую в паре проектов и планирую перетащить на рабочие.

Вот, собственно, и на конфу зарегистрировался :)

Онлайн-регистрация бесплатная, к слову.

#vite

#статья дня

Как при помощи нескольких расширений и DevTools узнать, кто твой клиент?

Автор статьи – фронтент-разработчик, который строит свой юнит в компании. Ребята работают на Vue и не понимали спрос на стек.

Сначала они опрашивали лидов, что было долго, а иногда безответно. Потом озарило – поднастроили браузер, накатили несколько плагинов (вот они: Vue, React и Angular) и пошли по самым разным сайтам.

Всего просмотрели первые страницы 182 компаний. Всё собрали в одну таблицу, немного приправили аналитикой и запилили статью: https://habr.com/ru/post/679150/

Вот так распределились доли:
1. React — 74 или 39,36%
2. Vue — 62 или 32,98%
3. Other — 44 или 23,4%
4. Angular — 8 или 4,25%

Кстати, ребята приняли твердое решение оставаться на Vue.

#vue #devtools #react #angular

#фишка дня

Правило position: sticky в своё время было одной из самых желанных в CSS вещей, ведь что может быть более декларативно чем “закрепи элемент вот тут когда я доскроллил вот сюда”?

А вот много лет приходилось писать JS для этой цели. Sticky даже становился частью фреймворков.

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

Ответ прост! Поставить «прилипчивый» элемент последним, а родителю задать sticky на высоту контента перед ним. Не элементу!

Вуаля: https://codepen.io/alinaki/pen/rNdYajy

Дым и зеркала :)

#css #sticky

#фишка дня

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

https://codepen.io/serg-by/pen/MWVOeBg

Прикрепляем хлебные крошки наверху.

P. S. Господа сомневающиеся, сделайте это на вашем любимом position:fixed и предоставьте :)

#заметка дня

Только что релизнули обновление продукта, которое шло больше 8 месяцев. Чисто технически это примерно на полгода больше, чем стоило бы.

Поддерживать и чинить баги в легаси-коде — очень сложно. Но знаете что сложнее? Писать новое поверх или рядом.

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

А новый код — он в лучшем случае бездна. Ему ещё только предстоит доказать свою работоспособность. Да и гарантий, что вы перенесли всю бизнес-логику как надо, нет.

Так что же надо делать?

Тесты, господа. Тесты — они гораздо больше помогают в рефакторинге, чем можно подумать.

И покрывать тестами нужно в первую очередь именно старый код, если уж так охота вообще начать это делать (или потребовались новые фишки).

Протестированный легаси-код перестаёт быть чёрным ящиком. Можно начинать заменять его части или всё целиком на новые, можно пилить новые фичи и костыли не боясь всё неожиданно сломать.

Возвращаясь к нашему релизу — в какой-то момент мы стали одновременно с написанием новых фишек чинить поведение основной ветки и утонули в синхронизации.

Поэтому задачи такого плана надо локализовать как можно точнее. И не распыляться.

Ну а если ваш легаси «чёрный ящик» как-то влияет на своё окружение — вы жёстко попали :)

#legacy #tests

#til дня

Реально, самый короткий TIL (Today I Learn) на свете.

Итак, хоть буква μ (мю) и означает звук m, µs (микросекунды) обозначаются в ASCII как us, потому что ms уже занято миллисекундами.

Или потому что u похожа на μ. Надо уточнить 😅

Вот так вот, котаны.