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

Способов доставить нужную информацию, сохранив дизайн, шрифты, изначальную задумку вообще, да ещё на практически любое устройство, ужасающе мало. PDF один из них.

Задача сегодняшнего поста — от подписчика: выдать PDF выделенного DOM-узла.

Например, отсортировали вы таблицу, и хотите только её и получить.

Я бы, наверное, послал заказчика в Ctrl-P и накидал пару стилей для печати, но уж как есть. Подписчик же поступил иначе.

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

Зато есть html2pdf.js!

Автор библиотеки собрал jspdf и html2canvas в кучу и сообразил рабочий инструмент экспорта DOM в PDF.

В API пробрасываются опции обоих, можно даже адекватно настроить разбиение страниц!

Есть и минус: экспортируется-то картинка… слепок, так сказать. Но задача решена, в браузере!

Без примера вас не оставим, взята таблица из MUI: https://codesandbox.io/s/clever-sanne-7ddmcj?file=/src/App.js

Пользуйтесь, котаны!

#js #pdf #react

Я не собирался репостить это снова, правда, но почему-то Антон опять всплыл в моей области видимости.

Да и мемы про волков всё ещё никуда не делись…

А ты — волчист? 🤣

#статья дня

Есть такой скандально известный в HR-кругах iOS-разработчик: Антон Назаров.

Чем же он скандально известен? Ну, например, своей концепцией осознанной меркантильности.

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

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

Но я вот что принёс сегодня: статью о том, что волк не лев, но в цирке… ой, простите. Статья о волчистости в айти: https://boosty.to/m0rtymerr/posts/082000b6-c390-4d08-96b4-00c07d049d9c?share=post_link

А если точнее, о расчётливом подходе к получению желаемого.

TL;DR будь наглым.

Почитать полезно, мне по жизни чуток подобного не хватает.

#hr #work #cv

#новость дня

Народ, отложили волчистость, убрали руки от клавиатуры на минутку и срочно смотрим сюда: https://blog.reversinglabs.com/blog/iconburst-npm-software-supply-chain-attack-grabs-data-from-apps-websites

С декабря 2021 года около двух десятков пакетов NPM воровали данные из форм, встроенных в мобильные приложения и сайты.

Как происходило внедрение? По опечаткам :) Регистрировались похожие на уже существующие пакеты имена. А дальше человеческая невнимательность делала своё чёрное дело.

Пройдите проверьте, нет ли у вас по-глупости чего-либо подобного. Сверьте названия, версии и хеши.

Будьте внимательны, котаны!

#js #npm #security

#фишка дня

Ты настолько прокачался в веб-типографике, что используешь clamp?

font-size: clamp(1rem, calc(5vw + 1rem), 5rem);

Даю подсказку: calc там не нужен! Вот так просто:

font-size: clamp(1rem, 5vw + 1rem, 5rem);

Не бойся новых техник :)

P. S. всё то же самое с min, max и тригонометрией (в Safari).

#css #html #fonts

#тред дня

Мне приходится проводить всё больше и больше собеседований к нам в Supermetrics на позицию фронтенд-разработчика, поскольку компания растёт.

И я уже пересмотрел достаточно много тестовых заданий. Чаще всего они меня не устраивают с самого начала.

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

Мои мысли в целом схожи, так что дублирую его здесь без правок.

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

2. Проверяющий скорее всего будет смотреть на формальные признаки. Сам код будет прочитан по диагонали и если там нет цепляющих взгляд вещей то он пройдет “ревью”.

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

4. Первая мелочь - не пиши весь код в одном файле, даже если кода 50 строк. Проверяющий доебется что не умеешь декомпозировать и в прод будешь писать так же в одном файле.

5. Вторая мелочь - обязательно юнит тесты, даже если нечего тестировать. Нужно просто наличие - два-три теста которые проверяют ничего лучше чем их полное отсутствие. (Как писать юниты для фронта я не знаю, поделитесь в комментах)

6. Третья - подробное ридми. Просто код без описания никому не нужен, скорее всего чел забьет его вообще смотреть. Напиши что ты сделал, для чего, как запускать, как запустить тесты, как правильно посмотреть работоспособность. Представь что делаешь опенсорс проект.

7. Хорошо если ты заморочишься и сделаешь мейкфайл, а еще докерфайл. Делов на 15 минут а сразу бонусных очков заработаешь.

8. Если можешь - лучше пиши на английском - ридми, коммит месседжи, комментарии к коду. Добавит очков, у нас странное отношение к английскому.

9. Добавь файл с версией, пусть будет вечный 0.1.0-SNAPSHOT но проверяющий заметит что ты подумал о версии. Совсем мелочь на 10 секунд работы, а очень бросается в глаза.

10. Старайся форматировать код читабельно, чтоб он выглядел красиво. Не комментируй каждую строку. Код должен выглядеть прилично если его смотреть по диагонали. Однобуквенные переменные оставь для прода, в тестовом задании их писать нельзя. (Ну счетчики i,j можно)

11. Если просят задание в виде репозитории отформатируй git log. Он должен выглядеть прилично и показывать ход мысли. Даже если ты писал за один присест. Покажи что ты умеешь атомарно вносить изменения а не одним куском. Ну и автора не забудь поправить. Фамилия имя вот это все.

12. Вот тут можно посмотреть как делал тестовое я (2pizza, прим. редактора). Кода меньше чем обвязки в виде скриптов и описаний.

13. Главный принцип - тестовое задание должно выглядеть как настоящий проект, даже если там делов на час. Это все не гарантия стопроцентного прохождения, но сильно сильно улучшит мнение проверяющего.

#собеседование #тестовое #работа #личинкатимлида #twitter

#статья дня

Я давно такого удовольствия не получал. Технических знаний много не требуется, но при этом погружение в кишки браузеров и формат GIF с головой.

Это я об этом: https://www.biphelps.com/blog/The-Fastest-GIF-Does-Not-Exist

Правда, буду честен, я читал в переводе на хабре: https://habr.com/ru/post/676480/

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

Итак, в чём же история? История в том, что все браузеры и все программы просмотра GIF на свете совершенно неверно обрабатывают задержку между кадрами. Да так, что даже лишают нас многих возможностей формата.

Точнее, на всё есть свои причины. Исторические в основном. Chrome кивает на Firefox, тот на IE, тот на Netscape… беда.

И всё это снабжено, собственно, примерами кода. Прям как в двигателе покопался.

#gif #img #web

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

Что такое NLP? Гусары, молчать!

Это Natural Language Processing, а не то, что вы подумали. Обработка естественных языков.

Что такое RegEx? Это Regular Expressions. Регулярные выражения для поисков шаблонов в строках. Вещь, которую ненавидят, в общем, все.

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

Абсолютно прекрасная вещь: https://www.autoregex.xyz/

В глубокой бете, конечно ещё :) Почти все ответы — неправильные.

Осталось только английский свой прокачать…

#regex #nlp #gpt3

#фишка дня

Тут в чате вопрос прилетел, как делать такие сочетания скруглений, border-radius, как на картинке. Уж простите мне подбор цветов, хотелось поконтрастнее.

Кто-то предложил ставить уголки псевдоэлементами, кто-то — clip-path. Были варианты решений разделителей на SVG и даже что-то монстроподобное на пользовательских свойствах (надеюсь, авторы отметятся в комментариях).

Я же покажу, как это делалось всю мою сознательную жизнь.

А всё просто: концепция дыма и зеркал :) Ну, как у фокусников.

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

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

Я не считаю, что добавление контейнеров это плохой тон. Как минимум, он даёт лишний уровень свободы при добавлении отступов, псевдоэлементов и адаптации.

Более того, если совсем неохота брать контейнер — ну сделайте градиент-полоску в нужный размер, эффект будет тот же самый. Все же знают, как рисовать градиент-полоски, да? Если нет, потом покажу.

В общем, think outside the box, насколько банально бы это ни было, котаны.

Ах да, ссылка: https://codepen.io/alinaki/pen/XWENXJW

Модифицируйте по своему усмотрению.

#css #hack

#фишка дня

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

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

Просто совсем скоро в 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('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