Обзор: Курс "Продвинутый Debug во Frontend"

Прошла небольшой, очень классный курс "Продвинутый debug во Frontend" от Димы Холстинина (в Kobezzza.lab).

〰️ Почему вообще решила попробовать

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

Спасибо коллеге, что выручил, но что-то я от этой истории погрустнела, и захотелось закрыть пробелы. С Kobezzza.lab мы уже сотрудничали, я с большим теплом отношусь к курсам Андрея Кобеца, так что залетела, особо не раздумывая. Ни пожалела ни на минуту.

〰️ Что внутри курса

10 лекций общей суммой примерно часов на 7, покрывающие всю необходимую для юного дебагера инфу:

🔵 собственно, разбор debugger; и что с ним делать, чтобы было осмысленно и полезно;

🔵 здоровенный разбор всего, что есть в девтулзах Chrome, включая самые нишевые и неочевидные вещи. Я даже про вкладку Elements, в которой каждый рабочий день сижу, узнала кучу нового.

Из самого любопытного: узнала, что есть классная штука для раздебаживания анимаций, CSS Overview с удобной статой по всей странице (цвета, типографика итд), как просто и комфортно овер-райдить и блокировать реквесты (вместо вот тех костылей, какими я сама пользовалась всю жизнь);

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

🔵 дебаг разных сред: ноды, андроида и iOS. Со второй и третьей очень ценно: рассказано, как завести эмуляторы для live-like тестирования, потому что бывает, что просто суженного браузера не хватает, и нужно попробовать вот именно Сафари конкретной версии на конкретной версии iOS;

🔵 отладка в проде: разница между dev и prod-сборками, сорсмапы, циклические импорты и что с ними делать, очень кратко затронуты штуки для логирования;

🔵 всякие некатегоризированные, но полезные мелочи: введение в eslint, анализаторы бандлов, чтобы оптимизировать ассеты, lighthouse;

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

〰️ Впечатления

Мне зашло. Материал подан в меру подробно, четко, внятно: лектор старался, качественно готовился, записано достойно.

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

〰️ Кому подойдет

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

〰️ Кому не подойдет

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

➡️ Если вам стало интересно и кажется полезным, приходите на сайт "Продвинутый debug во Frontend", посмотрите поподробней программу. По промокоду DAVYDOVA будет скидка на 500р

Завершилась активная часть благотворительного React-ивента для джунов

В сентябре я анонсировала благотворительный React-ивент для джунчиков-фронтов в пользу "Старость в радость".

Ребята полчаса назад завершили двухдневную разработку проекта на React (с авторизацией, MUI, запросами на бэк итд).

Заходите посмотреть, какие у них классные результаты получились ❤️

🗓 стартуем сегодня, 27 октября, в 18:00 по Мск

🎙 запись трансляции останется по той же ссылке

➡️ больше об ивенте тут

🔥 Senior Backend Developer ищет работу

Нетипичный для канала пост, но у меня дружище ищет работу, и я хочу, чтоб он нашел самый вкусный оффер.

✨ Кто ищет

Слава, Senior backend с 10 годами опыта работы на разных стеках (Java + Spring, Scala + Akka, Clojure, так же работал с Python, JS без стека).

Человек охренических скиллов с широченным кругозором, который может въехать в любой стек.

📎 Резюме и контакты

🔸 резюме тут;
🔸 tg: https://t.me/via_l0ft
🔸 email: [email protected]

💻 Что может и умеет

Работал на проектах разной сложности: были и монолитная система документооборота на Java7; и проекты на ранней стадии; и проекты на 4-5 сервисов общавшихся между собой через Кафку, которые должны быть доступны 24/7.

🔸 Пишет тесты (включая даже e2e).
🔸 Написал desktop приложение, отработавшее 5 лет без ошибок
🔸 Проводил интеграции c внешними сервисами.
🔸 Делал деобфускатор стектрейсов с мобилок
🔸 Писал фронт на ClojureScript (и ему это нравилось)
🔸 Пишет антиспам-бота для чата джунов (офигенный бот! нас перестало заливать спамом);

Качает экспертизу как вширь (тестирование, БД, анализ и имплементация бизнес задач, мониоторинг, контейнеризация, кубер in progress), так и вверх (system design и архитектура), чтобы понимать системы от и до.

По софтам: спокойный, комфортный, дружелюбный, исключительно адекватный.

🔍 Что ищет

Удаленку по РФ (с территории РФ) на Go, Elixir или Clojure.

Особенно любит задачи по автоматизации ручной работы, инфраструктурные проекты.

❌ Что не ищет

Не очень склонен к оптимизационной алгоритмике.
Вообще не склонен к gambling, crypto, b2g.

➡️ Порефайте Славу, пожалуйста, в хорошие компании! Он, реально, крутой хардово и очень приятный человек 💙

❗️Друзья, осталось 3 места на Благотворительный React-ивент для Junior-разработчиков

Это благотворительный онлайн ивент, чтобы помочь джунам получить проект в портфолио и собрать деньги в пользу НКО "Старость в радость" (или любого зарубежного аккредитованного НКО, если вы не в РФ).

Подробности и как записаться - в посте

Выкладываю задание с благотворительного HTML-ивента

Для тех, кто тоже хочет попробовать поработать с задачкой, которую я дала джунам на верстку в рамках благотворительного ивента для джунов.

〰️ Суть задания

Сверстать макет на HTML/CSS/JS без фреймворков. Для слайдеров и эффектов можно брать готовые либы, а можно пробовать написать самим.

〰️ Макет

🔵 макет в фигма-формате лежит вот тут. Когда вы зайдете, вы увидите 2 темплейта. Почему так: покупные макеты всегда идут без картинок, чтобы не мучиться с авторскими правами.

Поэтому слева у вас полноценный макет без картинок (со слоями и ассетами), а справа шакальный jpg, как пример, как это должно быть с картинками. Картинки вы будете вставлять на ваше усмотрение (откуда брать бесплатные hi-res иллюстрации, смотрите в разделе поста "Ассеты и тексты");

🔵 макет потребует специальных шрифтов (откуда их брать, смотрите в разделе поста "Ассеты и тексты");

🔵 к макету оставлены мои комментарии. Часть из них про какие-то обязательные моменты, часть - про то, как усложнить себе задачу, если хочется больше челленджа;

🔵 макет идет только на десктоп. (что делать с адаптивом, смотрите в разделе "Адаптив");

〰️ Ассеты и тексты

🔵картинки в высоком разрешении вы можете скачать бесплатно на Unsplash (например, по запросу Construction). Картинки будут много весить, не забудьте минифицировать их любым удобным вам способом (например, на сайте TinyPng);

🔵 в макете используются бесплатные шрифты из Google Fonts. Вы можете подключить их отсюда: Jost, Barlow (если в макете найдутся еще какие-то семейства шрифтов, ищите тоже на Google Fonts, а если там нет, заменяйте на любые понравившиеся оттуда);

🔵 если нужны дополнительные бесплатные иконки, берем с Flaticon;

🔵 местами, вам понадобятся отсутствующие тексты, например, для элементов слайдеров. Лучше генерировать разные через ChatGPT или аналоги, чем вставлять в Lorem Ipsum;

〰️ Адаптив

🔵 его в макете нет, остается на ваше усмотрение.

Попробуйте сделать так, чтобы прилично работало на стандартных брейкпойнтах (≥1400px, ≥1200px, ≥992px, ≥768px, ≥576px, <576px);

〰️ Как усложнить, если все слишком легко и быстро делается

🔵часть комментов про усложнения оставлена в самом макете;

🔵 кроме этого, можно:

▫️сделать анимации блоков на скролл (хотите - полностью кастомные, хотите - через библиотечки, например, можно подключить Animate.css и через js приделать коллбэк на скролл);

▫️перевести все на Astro / любой фреймворк;

▫️разобраться, как через сборщик автоматически минифицировать картинки;

▫️ попробовать сделать SVG-спрайты для части ассетов;

▫️добавить всякие микроанимации на ховеры и клики;

▫️написать кастомный слайдер вместо подключаемой библиотеки;

▫️ поиграть с оптимизациями (тег , critical css итд);

〰️ Ревью работ команд

Я в этих ревью много рассказывала про хорошие практики верстки:

🔵 часть #1

🔵часть #2

〰️ Мои вебинары про БЭМДва больших вебинара про БЭМ и нейминг, могут вам пригодиться по ходу работы:*🔵Структура HTML-страницы (часть #1)🔵Структура HTML-страницы (часть #2)
*Если у вас есть любые вопросы, задавайте в комментах!

4 софт-скилловых совета, которые облегчат вам жизнь на работе

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

1️⃣ Не шутите над потенциально больными для собеседников темами

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

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

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

2️⃣ Задавайте вопросы и задавайте их правильно

Задавать вопросы коллегам - это нормальная часть рабочего процесса. Лучше спросить, чем два дня тупить над какой-то ерундой, решаемой за 15 минут.

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

Например, если какая-то неочевидная штука не выходит (вылетает странная бага / не ясно, как двигаться по плохой документации / вопрос по смежному сервису итд) за 1.5-2 часа, идем писать запрос;

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

3️⃣ В ревью/фидбеках отделяйте важное от неважного

Это очень ценный навык: проверять все правки, которые оставляете людям к коду/дизайнам/документации/чему угодно на реальную важность.

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

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

4️⃣ Отказывая, всегда предлагайте альтернативу

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

Пример

К вам приходит менеджер и говорит: "надо срочно сделать вот эту задачу за 2 часа". Задача в 2 часа не впихнется, даже если уминать ногами.

❌ ответ "не успеем, вообще нереально" не поможет двинуться дальше и поставит собеседника в крайне неудобную позицию;

✔️ ответ: "не успеем в полном объеме, но можно выделить самое критичное и сделать за 3 часа, а остальное доделать еще потом за 3" уже даст место для переговоров;

Важно: это не 100%-я гарантия успеха, многое зависит от того, насколько сам собеседник решит идти на компромисс, но, по крайней мере, вы от себя сделаете первый шаг. А кроме того, вы можете таким образом продвигать те условия компромисса, которые лично вам выгодны.

Вывод

Как по мне, успех коммуникаций, во многом, зависит от уважительного отношения к нуждам и потребностям собеседника (но и на свои забивать не надо, разумеется).

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

❗️Благотворительный React-ивент для Junior-разработчиков (с опытом тоже можно)

Делаю благотворительный онлайн ивент, чтобы помочь джунам получить проект в портфолио и собрать деньги в пользу НКО "Старость в радость" (или любого зарубежного аккредитованного НКО, если вы не в РФ).

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

📘 Что будет

🔸 мы соберемся 8 командами по 4-5 человек (можно заявиться и одиночкой, и несколькими людьми: команды я соберу);

🔸 после аппрува участия участник вносит 1500 рублей сразу в "Старость в радость"/зарубежное НКО (❌мне ничего переводить не надо) и присылает чек;

🔸 мы готовим ТЗ + макет в Figma;

🔸 команды тратят выходные в околохакатанном формате и реализуют ТЗ на React (дополнительный стек каждая команда выберет сама);

🔸 мы с Женей делаем публичное код-ревью всем командам. Каждая команда получит 2 ревью: верстки от меня и логики от Жени;

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

🗓 Когда будет

Ивент будет длиться все выходные 26-27 октября, с 10:00 утра субботы до 17:00 воскресенья. Далее - код-ревью в течение 4 дней.

⭐️ Кто может участвовать

Все, у кого есть базовые или выше знания React (+ HTML/CSS/JS). Если вы можете набросать на Реакте простую тудушку - можно участвовать;

✉️ Как участвовать

🔸написать мне в личку (@natti_davydova) письмо, начать его с "хочу участвовать в React-ивенте", обязательно рассказать там, какой у вас опыт (чтобы я смогла сделать сбалансированные команды);

🔸заявляться можно и по одиночке, и сразу несколькими людьми;

🔸после аппрува вашего участия, вы вносите 1500 рублей в НКО "Старость в радость" (или $15 в любое аккредитованное НКО, если вы не в РФ) и присылаете мне чек;

🔸 до 20 октября включительно будут сформированы команды, и вы успеете познакомиться, подготовить репозиторий для работы и договориться по стеку (стейт-менеджер итд);

🔸26 октября получите инструкции, и начнем;

🙁 А если у нас ничего не получится?

🔸 по организационным вопросам я буду поддерживать вас в течение всего ивента;

🔸 даже если у вас не получится закончить ТЗ, вы получите код-ревью и понимание, куда самостоятельно двигаться дальше;

В любом случае, вы унесете с собой новый опыт, красивый уникальный проект и получите возможность поработать в команде (либо поменторить новичков и возглавить команду);