В среду ходил впервые на местный оффлайн фронтенд митап - SPB Frontend. Он был небольшой (всего 4 доклада) и поэтому проходил вечером после работы.

Впечатления смешанные, наверное потому, что из всех докладов мне зашел только один от Яндекс Практикума о том как они LCP метрику ускоряли. Было интересно послушать как они дебажили их BFF на ноде и ускорили выполнение одной функции с 600 мс до 1 мс. В остальном ребятам респект, организация и место проведения были топчик (вы только посмотрите на это фото, атмосферненько).

Следующим планирую посетить Субботник от Яндекса 12 августа. Все таки он проходит в моем офисе, грех не прийти. Да еще и целых 2 доклада от ребят из поиска, с которыми я в одном кабинете сижу. Приходите и вы, кто из Питера.

@dlents

Думаю у каждого фронтендера хоть раз в жизни была ситуация, когда ты сверстал на своем макбуке какой-то элемент, а потом к тебе приходят и говорят: "у тебя тут вообще-то горизонтальный скролл на всю страницу, иди переделывай". Вон даже у свежего лендоса от ребят из фигмы такие проблемы. У меня конечно же тоже было и не один раз.

Но недавно коллега поделился со мной как такое ловить еще на стадии верстки. А секрет прост: идем в настройки макбука -> основное -> выбираем "Показывать полосы прокрутки: всегда".

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

Так что летсгоу все менять настройки и делать веб капельку лучше!

@dlents

Вчера в Московском офисе проходил внутренний хакатон по написанию линтеров для всего проекта Поиска. Так совпало, что наша команда как раз собирались в командировку и было приятно решение задержаться на 1 день – совместить приятное с полезным.

Мы с коллегой (не из моей команды) впервые познакомились на хакатоне и для начала взяли, что казалось попроще, ибо никто из нас до этого не писал кастомные линтеры. И выбор наш пал на запрет !important в css. Да, в stylelint уже есть из коробки declaration-no-important, но специфика проекта требует своих кастомных велосипедов решений.

Минутка ликбеза. Общий принцип работы линтера выглядит примерно так:

1) Парсинг содержимого файла и формирование AST – абстрактное синтаксическое дерево, по сути объект с которым нам удобно работать.

2) Проход по всем по элементам дерева, в нашем случае по css декларациям и применение вашего правила (плагина).

3) Если правило решит, что видит ошибку - оно выбрасывает ее с помощью специального метода со всей мета информацией: на какой строке она произошла, описание и тому подобное. После IDE начинает подсвечивать вам проблему.

4) Отдельным пунктом, если вы пишите свой плагин, можно попробовать сделать автоисправление в дереве (например удалить !important, как это было у нас) и сформировать новое содержимое файла на основе измененного дерева. В таких случаех при запуске линтера в режиме fix он попробует применить ваше исправление и не выбросит ошибку, если у него это вышло.

Парсинг, формирование AST и содержимого файла из AST за нас решают уже написанные парсеры. Один из таких PostCSS, который использует stylelint. Наша работа как раз написать свое правило – найти что не так в дереве и предложить фикс, по возможности.

На хакатоне мы справились быстро, поучились писать линтеры (по крайне мере для css), понетворкали, а у меня сформировалось понимание как писать более сложные линтеры. Продуктивная суббота получилась.

На скрине вырезка из оригинального плагина declaration-no-important.

А вы писали когда-то линтеры?

@dlents

Наткнулся на npm пакет patch-package. С помощью него можно патчить нод модули и на postinstall применять эти изменения. Сам не пробовал, но знакомые говорят, что незаменимая вещь, если в чужом пакете нужно что-то подкрутить. Но сам пост вообще немного о другом.

Гуляю на улице и думаю: "Круто было бы написать похожее расширение, но для браузера, чтобы патчить сайты".

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

Называется User JavaScript and CSS. Поставил себе и почувствовал будто весь интернет это опенсорс, в который я могу комитить сразу в мастер. Первым делом пошел и изменил на Яндекс Поиске текст кнопки на «Загуглить», а потом в нашем аналоге гитхаба поменял текст кнопки, которая апрувит ревью реквест на «Это гениально».

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

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

@dlents

Ну и всех с праздником! Кто что отмечать будет из списка?)

Кстати день программиста празднуется именно сегодня, потому что сегодня 256 день в году.

@dlents

Никогда не задумывался, что Яндекс (поисковик) это такой же сайт, как и другие. Наверное «интеграция» с браузером в виде поисковой строки сделала свое дело и в подсознании отложилось, что поисковик это часть браузера. Кстати, поисковая строка в браузере называется омнибокс. Ну это так, лирическое отступление.

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

А буквально на днях, в очередной раз смотря на выдачу поиска, я глянул на адрес сайта и вместо ya.ru обнаружил localhost:3333.

Полгода пролетели незаметно, но они были невероятно насыщены. Ощущение будто ты пришел джуном на свою самую первую работу и в новинку абсолютно все. Эти полгода начались с сильного (и первого в моей жизни) синдрома самозванца, а закончились внутренней уверенность и предвкушением, что же будет дальше.

В одном посте кажется и не уместить всего, что было. Я попал в классную команду (привет моему бригадиру, который читает этот пост), впервые съездил в командировку (целых 3 раза), впервые понял, что такое брать на себя ответственность за важные вещи для команды, научился или даже адаптировался к работе в большой компании, где работают тысячи людей и много других вещей с приставкой «впервые».

Вообщем, в Яндексе клево. Вперёд в новое полугодие.

P.S на фото в Московском офисе во время командировки. С костылями. А как без них?)

@dlents

Готов ворваться в этот отпуск мечты. Надеюсь за такой «длительный» период коллеги не забудут меня 😂

А если серьезно, то взять отпуск длиною в 3 дня (я так делал, когда женился) и совместить его с выходными, чтобы вышло 5 дней подряд это попадание в яблочко. Вы успеете отдохнуть, при этом не сильно выпадете из рабочих задач и не нужно будет при выходе обратно вспоминать, что вообще происходит.

Мини отпуска топчик, не забывайте отдыхать.

@dlents

#рекомендую_подписаться

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

Сегодня речь пойдет о блоге Евгений Шушкова @frontengineer

Автора зовут Женя, работает он в Авито и как вы уже могли догадаться – фронтенд разработчиком. Вещает о жизни в бигтехе, новостях и трендах фронтенда и делится историями из своей жизни. Я сам начал читать Женю давно, еще не зная его лично, а потом познакомился с ним на курсе по фронтенду и удивился, узнав, что это он автор блога.

Пишет легко и интересно, а для любителей визуала Женя в своей инсте снимает вайбовые лайфстайл рилсы, так что мой вам рекомендасьон 🤌🏻

Кстати, интересный факт – до работы в айти Женя работал пожарным. Так что пожары на проде у него были и до карьеры в вебе :)

@dlents

#кайф

Пару недель назад телеграмм проводил контест для ML разработчиков, где нужно было из текста сообщения определить язык программирования. За первое место давали 15к долларов.

И вот уже сегодня в бета версиях телеграм стали замечать красиво оформленные блоки кода. Выглядит здорово. Наконец-то станет чуть приятнее получат куски кода от коллег в чатах.

Тот момент, когда за быстро и качественно следом стоит слово дорого.

UPD: автодетект кажется еще не работает и нужно руками указывать язык. Ждём результатов контеста 29 числа.

@dlents

#кайф

Сайт «Интернет артефакты», который собрал в себе коллекцию важных событий в истории развития всемирной паутины.

Первая спам рассылка в 1978, зарождение смайликов :-) в 1982 году, первый компьютерный червь (который оказывается не задумывался автором как вирус) в 1988 году.

Мне особенно понравилась история про студента, который сделал сайт, где можно было купить пиксель за 1 доллар. Всего их было миллион. Он успешно все продал и заработал денег на колледж, который потом в итоге бросил. NFT тех времен :-)

Короче очень залипательно и интересно. А с телефона вообще кайф, потому что хорошо сверстано.

https://neal.fun/internet-artifacts/

Кстати, у автора на главной странице куча других прикольных сайтов

@dlents