#заметка дня

Заменили уже node-sass в своих проектах на sass?

Нет? А чего ждём?

Чем больше в компании людей на Apple M1, тем веселее становится поддержка проектов, использующих node-sass (libsass, сиплюсплюсовая реализация): он компилируется нормально только когда Меркурий в ретрограде. Или если не дышать.

А ещё оно deprecated уже года полтора: https://sass-lang.com/blog/libsass-is-deprecated

Сегодня набралась критическая масса таких людей у нас, поэтому я дропнул node-sass в пользу sass (релизация, написанная на Dart, DartSass; не спрашивайте).

Заодно убрал normalize-scss в пользу modern-normalize, ибо старый normalize уже не нужен.

На Webpack 5 переходить не буду, уйду на Vite.

Обновляйтесь, котаны.

P. S. речь о node-пакетах. Оригинальный отдельный sass — он на Ruby, RubySass :)

#scss #m1 #yarn #npm

#ссылка дня

В рамках недели репостов!

Шучу. Сейчас будет не репост, а дополнение.

Помните статью Ахмада Шадида «Defensive CSS»? Если нет, напоминаю о ней и моем случае, с этим связанным: https://t.me/htmlshit/1179

Это, в общем, о том, как писать готовые к бою компоненты и макеты, не разваливающиеся от первого же длинного слова.

Я там упоминал, что Шадид делает из этого большой проект, включающий в себя сайт и цепочку выступлений на конференциях. Так вот, сайт уже даже готов: https://defensivecss.dev/

Примеры расширены и дополнены, будет больше.

Вы, кстати, можете даже пригласить Шадида к себе в компанию поговорить об этом всем, вполне официально :)

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

#html #css

#фишка дня

Я что-то подзабил на описывание возможностей селектора :has (он не родительский селектор, но им вполне можно так пользоваться). Давайте просто взглянем на это наглядное представление от Джима Нильсена: https://blog.jim-nielsen.com/2022/unlocked-possibilities-of-has-selector/

Статью можно не читать, картинка в целом всё за себя говорит, но если вы незнакомы с концепцией — там коротко разъяснено.

Ждём улучшенной поддержки, а потом ещё пару лет :)

#css #has

#статья дня

Если вы до сих пор не подписаны на блог Джоша Комо и не добавили его в RSS-читалки (олды тут?), то чего вы ждёте вообще?

У него вышла, как всегда прекрасно иллюстрированная интерактивными примерами, статья о CSS Transform: https://www.joshwcomeau.com/css/transforms/

Хотели заполнить пробелы в понимании, как трансформы работают? — самое время.

Перечислять, что конкретно он там описал, нет никакого смысла. Там есть всё.

#css #transform #animation

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

Пацаны, тут мне, а я вам, бомбу принесли! Эта штука перевернёт тестирование компонентов.

Мало кто пишет приложения без горячей перезагрузки, но при этом тесты многие пишут вслепую. Зачем?

Ведь можно взять Jest Preview: https://github.com/nvh95/jest-preview

И получить самую настоящую горячую перезагрузку, но заточенную под тесты!

КДПВ говорит сама за себя. Потрясающе просто 😻

Будем внедрять?

Будем внедрять.

#jest #react #js #test

#такое дня

Не буду из этого опрос делать. В Твиттере опять разгорается срач на тему, нормально ли вообще такое на собеседовании спрашивать, или нет: https://twitter.com/TatarinFrontend/status/1545341264928931841

Цитирую: «Прикиньте, выдать вот таких задач на собесе. А когда кандидат не смог точно овтетить, сказать «Ты не знаешь основ JS, нам не о чем с тобой дальше разговаривать».

Ну что, посрёмся и мы, на ночь глядя? Или все же лень?

Я прям такое, конечно, задавать не буду. Но близкое — вполне.

О чем говорить, когда люди async polling предлагают решить на setInterval…

#js #job #interview

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

Способов доставить нужную информацию, сохранив дизайн, шрифты, изначальную задумку вообще, да ещё на практически любое устройство, ужасающе мало. 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