#фишка дня

Волки тут? 😭Две фишки за день, праздник-праздник 🎉

Ладно, шутка. Это лев на картинке. В цирке выступает.

Просто совсем скоро в Firefox тоже появится поддержка backdrop-filter. А что это значит?

Что все разом кинутся делать frosted glass effect (эффект замороженного, матового стекла)!

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

Так вот, Louis Hoebregts (я не буду пытаться транслитерировать его фамилию) напоминает нам о существовании mask-image. Можно сделать переход пилой, а можно — градиентом.

Офигенно же! Для интерфейсов карт и всяких там игровых меню идеально.

https://codepen.io/Mamboleoo/pen/qBoqbVm

#css #filter #backdrop #glass

#ссылка дня

Даже несколько. Тема дня — доменная зона .new. Как бы ни было неожиданно, но, переходя по следующим ссылкам, вы создаёте:

pen.new — песочницу в CodePen
gist.new — GitHub Gist
repo.new — репозиторий на GitHub
react.new — React-песочницу в CodeSandBox

...ну и всем давно известные:

docs.new — документ Google Docs
sheets.new — таблицу в Google Sheets

О, я тут нашёл целый их awesome-список: https://github.com/yjose/awesome-new

P. S. Если вам не знакома концепция awesome-списков, это просто тематические сборники интересных репозиториев или просто ссылок, общее их название.

#new #github #codepen #sandbox

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

#svg #path

Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.

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

https://svg-path-visualizer.netlify.app/

#такое дня

Я бы даже сказал, боль дня. С которой я сталкиваюсь всё чаще и чаще.

Итак, дамы и господа. Тема сегодняшней боли — описания проблем.

1. Проблему нужно описать максимально полно.

Не пытайтесь выдумывать свои термины, если не знаете действующих.

Хорошо поставленный вопрос — равен половине ответа.

2. Приложите скриншот. А лучше не один. А ещё лучше — видео.

Важно! Скриншоты должны быть целыми!

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

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

3. Если вы на звонке или в чате и помогающий говорит вам последовательность действий — не пытайтесь гнать впереди паровоза даже если вам кажется, что вы всё давно поняли.

Не поняли. Строго выполняйте указания.

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

Ваше знание может не масштабироваться.

Дополняйте. Вспомню ещё — допишу.

#work #pain

#такое дня

Если вам кажется, что прототипы в 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('https://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('https://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.iss.one/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