Елена Литвинова — Истории одного программиста

2023-06-19 09:10:19 Buka / Bagaimana

2023-06-18 12:41:38 Друзья, всем доброе утро!

Пост про рефакторинг

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

Первоначально я вчера накатала такой большой довольно пост. Больше это были истории с разных периодов. В коммерческой веб-разработке я с 2011 года и было много всякого. Но в итоге решила попробовать сконцентрироваться на важном и выводах, которые сделала для себя на текущий момент:

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

Если система большая и содержит много логики будьте аккуратны, чтобы переписывать всё. Оценивайте риски. Бизнес всегда будет в приоритете, а код под капотом может стать Франкенштейном. В погоне за самыми новыми технологиями, вы будете таскать за собой код динозавра и довольно долго, зависит от того насколько большая система. А потом ещё более новое и ещё более лучшее. В большой системе часть логики может быть потеряна, не описана документацией и вам, и вашей команде прийдется возвращаться и всё проверять и описывать. Из хороших плюсов, если справитесь, новая система действительно будет чище и удобнее. Однако, считаю важно, чтобы не стало: старая система → новая удобная система → ещё более новая удобная система → … о божечки ты мой, может к психотерапевту и с принятием поработать, или хотя бы с прошлым закончить?

Супер современное, ультрамодное, супер решение. Я разработаю и всё сделаю! Если вы один на проекте и заказчик готов вам платить — пробуйте. Если вы действительно имеете богатый многолетний опыт и точно знаете, что делаете и соотносите риски — обсуждайте с командой, договаривайтесь, пробуйте. Но всегда следите, чтобы каждый член команды понимал. Вы в лодке не один. В противном случае, вы можете уничтожить психику команды, особенно если вы очень продуктивный и горите своей затеей. У меня был опыт, когда проект переписывался очень быстро и по многу раз, и однажды за день до релиза ночью. Естественно не все кейсы были предусмотрены, а код бажил — это было плохо. Однако все баги были поправлены.

Любите свой код и себя в том числе. У меня был опыт, когда в прошлом я всё время хотела лучше, проще, чище. Однажды вернувшись к своим прошлым наработкам, я поняла, что… да нормальный код был. Да более старая версия JS, да jQuery, но он выглядит читаемо и хорошо. Я могу понять и поправить.

Кто важный: код или продукт? Иногда в погоне за более лучшим кодом, технологиями и самыми новыми новинками, продукт остаётся на втором плане. Я по прежнему считаю важен продукт, конечно код тоже не хочется обижать, но это инструмент для создания чего-то. Круто использовать что-то популярное и развитое, чтобы если вы покидаете проект, мог прийти новый человек и разобраться без вас. И продолжить работу над продуктом.

Конкуренция и ответственность. Чтобы оставаться на плаву, в любом случае нужно изучать и смотреть вокруг. Иначе можно и без хлеба. Умение выражать своё мнение, открыто прислушиваться к другим и пробовать, потому что идеального мира... не существует и правильного решения тоже, а может быть где-то и есть, кто знает. Встраиваться в команду, где есть свои правила и уметь быть учеником. Жизнь — это динамика. Проект — это жизнь. В динамике сложно всё расставить на логику. Возвращаться и пробовать ещё раз, ответственность и шаг за шагом опыт.

Вот такие вот дела. Всем хорошего дня воскресенья, пишите комментарии, ставьте реакции, всех целую-обнимаю, поки-доки! Buka / Bagaimana

2023-06-16 22:35:41 Добрый вечер пятницы, ребята.

Что ж уже пятница и нас ждут два выходных перед новой рабочей неделей.

Про Англию и традиции на работе.

Такая интересная вещь случилась, живу я в Англии уже 3 года, а так до сих пор и не расслабилась, не прочувствовала… атмосферу. Спокойствие людей, парков. Вы знали, что Англия — это лес по соотношению деревьев? Например, в городе очень и очень их много и довольно такое умиротворение здесь царит. А на работе люди всегда очень вежливые и спокойные, что порождает движение и настоящий энтузиазм, от того, что ты что-то делаешь. Я работаю с людьми в loveholidays.com, которые обожают свою работу… Иногда я даже чувствую себя снежной королевой, в сердце которой живёт льдинка, всё ещё не готовая поверить в то, насколько здесь хорошо. А может просто вот так мне надо идти.

Также на работе у нас есть традиции. Например, пятница — это pet Friday и ребята шлют фотографии своих питомцев в специальную группу. А ещё одна команда выбирает человека и он шарит свою любимую песню. И вся команда добавляет её в Spotify, при этом человек описывает почему эта песня ему нравится. А я шлю фотографию своего букета цветов каждое утро понедельника, которые я стала себе покупать, когда начала жить одна. Я каждую неделю покупаю себе свежие цветы.  И вместе с цветами я желаю хорошей, успешной или продуктивной недели. Иногда, я не знаю, всё ли я делаю правильно где-то… Но вот так вот есть. И это такой кайф.

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

А ещё сегодня вечерком я смотрела фильм Стажёр с Энн Хетуэй и Робертом Де Ниро. И боже, какой же классный фильм. Я смотрела его раньше.. Мне про него напомнил один из подписчиков, Антон привет! Спасибо! Знаете смотрела я этот фильм и подумала, что быть настолько опрятным, с глубокими ценностями мужчиной в возрасте 70 лет, который спокойно и ответственно всё принимает, и который проработал 40 лет на одном месте. Настолько любить своё, да вообще любое дело и постоянное обучение. Прекрасный фильм.

Ребята, ещё раз, всем замечательных выходных. Любите друг друга и не забывайте отдыхать и наслаждаться жизнью.

И, конечно же, пишите о своих традициях Buka / Bagaimana

2023-06-15 10:17:44 Друзья, всем доброе утро! И начало четверга.

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

Итак начнём с книги, дневник дизайнера-маньяка.

Недавно я прочитала книжку от Яны Франк. Вообще мне понравилась, читала с любопытством и интересом. Издательство студия Артемия Лебедева. Для меня это как группа Ленинград если честно. И то, и то я люблю. Границы между обесцениванием и невероятным творчеством. Что же понравилось. Было много историй там, иногда я даже думала, неужели это правда и все по-настоящему? Прямо настоящая настоящая история, а не выдумка. Т.к. иногда попадались истории людей, которые мешают кучу-кучную, колют себе в вены, но при этом работу свою делают отлично и на 5+ и хоть ночью и всегда в срок. Мой внутренний ребёнок, который хочет даже отказаться от единственной кружки кофе по утрам, шепчет, не ну нафиг. Однако профессионализм таких людей впечатляет.

Также были и очень интересные истории свободы.

Про ковры

Особенно запомнилась мне история Абдулы, владельца магазина ковров, который родился в 1904 году. Яна его встретила в Берлине и он рассказал истории как он научился делать ковры. 10 лет потраченные в школе, где учат ткать безупречные ковры. Где нет места фантазии и попыткам придумать что-то своё, потому что все дизайны ковров уже продуманы и стоит лишь на дюйм отступить и всё, крышка  — вы получите наихудший результат, любое отклонение от традиций режет глаз, покупатели и мастера не понимают. Спустя 10 лет из школы выходят великолепнейшие мастера ничем друг от друга не отличающиеся. Они владеют наивысшим мастерством, но при этом ткут обыкновенные ковры. Вывод сделанный в книге: великое мастерство состоит из ничего. Став настоящим мастером, каждый из учеников стал никем. Какой-то поразительный смысл для меня в век, когда в той же разработке есть куча делений, сеньор, мидл, джуниор, стаф, принсипал и того выше. Рождается конкуренция, ведь тоже хочется вырасти. И как с самым любимым платьем, когда вы его ищите, ни за что не найдёте, а иногда оно просто попадается на глаза, когда вы совершенно его и не искали.

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

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

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

Про энергию

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

И да, вокруг очень много людей, всё они такие разные. Уметь учиться у каждого человека — это ведь так круто. В себе люди разбираются жизни не хватит, а другой человек такая же вселенная.

Всем клёвого дня! До скорых встреч, постов, идей и видео!

Кстати такие посты интересны? Ставьте реакцию, пишите комментарии, соглашайтесь или не очень :D Buka / Bagaimana

2023-06-13 22:44:42 Добрый вечер, ребят!

Интересное CSS свойство mix-blend-mode, сочетание элемента с родительским элементом. Вот дока https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

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

{
background: white;
text-decoration: none;
color: black;
mix-blend-mode: screen;
}

Однако, решение на блюр фоне пока так и не нашла... Buka / Bagaimana

2023-06-13 10:08:26 Друзья, всем доброе утро.

Сегодня просто пост о… жизни одного программиста

Alert

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

GDE — возможно последнее собеседование и возможно…

Вчера было третье собеседование на GDE (Google Developer Expert), скоро поделюсь результатами. Почему третье? Ну там одна накладочка вышла, должно было быть два. Я наверно единственный человек на свете, который не сдал второе интервью, потому что не я виноватаЯ . Меня собеседовал интервьюер из другой категории и нужно было всё сначала. По крайней мере это было неожиданно  И как круто, что я написала и спросила. Плюсы: Web Vitals и Accessibility с Вами вновь повторила.  Ещё могу сказать третье интервью было наверно лучшим интервью, которое я когда-либо имела в своей жизни. Мне невероятно понравилось общаться с Adam Argyle (https://twitter.com/argyleink). Настолько вдохновлённый своей работой и он дизайнер первоначально, а сейчас CSS девелопер. Увлекается анимацией, ещё играми в свободное время, пишет небольшие игры используя физику с этой библиотеки https://fizzx.netlify.app.

Порекомендовал мне API для анимаций: https://developer.chrome.com/docs/web-platform/view-transitions/ — с вот этой можно играться.

И вот это АПИ с анимашкой для скролла — https://scroll-driven-animations.style/.

Как говорится, пока ты спал… и изучал реакт

Давайте про апатию к работе поговорим, почему?

Недавно мне написали вопрос, как бороться с апатией. Ответ здесь очень непростой, ведь я с ней жила долгое время и сейчас иногда случается… и я думаю, это нормально проходить через разное, ненормально, когда надолго и застойно. В моём случае помогла психотерапия, которая открыла мне вновь вкус к жизни, что жизнь — это офигенная штука, чтобы не случилось. Развязывает канаты психики, давая Вам возможность проявляться и быть собой, любить себя. Собственно, там должна быть очень сильная психологическая поддержка. И Ваша работа — движения на страхи. Это когда просыпаешься утром от стука сердца, а потом идёшь в реальность с ответственностью. А потом — это когда Вы не боитесь. Не боитесь себя, хммм, разного. Когда Вы можете пошутить и принимаете себя, когда Вы можете проявить гнев и принять себя, когда Вы извиняетесь если чувствуете, когда Вы принимаете свой перфекционизм и делаете своей фишечкой или напротив его убираете если вот надо вот сейчас. Принимаете неизвестность и учитесь с ней жить, с любой неизвестность. Когда вы живёте и не боитесь, потерять, не понравиться и, наверное, для меня самое главное, не боитесь любить. Умение ценить всё, что есть вокруг, потому что оно вот есть и оно вот такое вот. Потому что Вы есть, потому что в этом простом выражении Я Есть заключён весь смысл. Жизнь становится краской, как когда-то в детстве.

…

А у нас в Лондоне… хм, 31 градус, пожалуйста, кто выключил дождь!  Верните назад. ШУТОЧКА!!!!

Всем отличного вторника и wrecking ball от моей любимой певицы в исполнении моей любимой актрисы:

Buka / Bagaimana

2023-06-11 21:05:06 И ещё раз всем привет!

Давайте ещё покроем тему Accessibility. Хотя бы немножко.

Это уже более обширная наука — доступность Вашего веб-сайта. Есть какая-то абсолютно потрясающая техническая документация на (http://web.dev).

Первоначально думая о доступности, следует прежде всего задать вопрос:

Могу ли я использовать keyboard навигацию на своем сайте или screen reader?
Правильно ли размечены элементы страницы для программ чтения с экрана?

С программами чтения с экрана я еще не так знакома, но на работе уже начала посвящать время keyboard навигации и accessibility. Это моё, кстати, дополнительное увлечение. Чтобы элементы выделялись последовательно и даже имели хороший стиль. Т.к. до этого outline разный, местами обрезается. В общем, это невероятная тема и довольно много нюансов.

Но доступность — это не только про keyboard и screen readers. Это еще:

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

Про контраст побольше

Его можно проверить вот здесь: https://webaim.org/resources/contrastchecker/. Кстати, когда заканчивала курс по цифровой иллюстрации в Adobe Illustrator, то там была такая проверка: нужно было наложить cпециальный фон на картинку (она становилась чёрно-белой) и если картинка и все её детали читаются хорошо, значит контраст хороший.

Ведь не все могут воспринимать цвета хорошо, также цвета могут быть перепутаны. В общем, все это очень и очень важно. И чем крупнее становится Ваш продукт, тем важнее предоставлять его более широкому кругу людей. Buka / Bagaimana

2023-06-11 17:18:29 Друзья, добрый день!

Давайте еще поговорим про Web Vitals. Что это такое и с чем его едят.

Что такое Web Vitals — чтобы пользователи были довольны использованием Вашего веб-продукта, компания Google придумала специальные метрики, благодаря которым Вы сможете понять, насколько удобно пользоваться вашим сайтом. По факту эти метрики предоставляют отчёт о производительности Вашего веб-сайта.

Web Vitals = Core Web Vitals + Other Web Vitals

Core Web Vitals — это подмножество Web Vitals, которые применяются ко всем веб-страницам. Текущая установка с 2020 года учитывает три аспекта пользовательского опыта: загрузка (LCP), взаимодействие (FID) и визуальная стабильность (CLS).

LCP (Largest Contentful Paint) — измеряет производительность загрузки. Хорошее время до 2.5 секунд. Т.е. за 2.5 сек ваша страница должна отрисоваться.

FID (First Input Delay) — измеряет интерактивность. Хорошее время до 100мс. Т.е. ваши элементы должны реагировать быстрее чем 100мс.

CLS (Cumulative Layout Shift) — измеряет визуальную стабильность, что нет скачков. Т.е. при отрисовке страница не должна прыгать от каждого нового загруженного элемента. Для решения могут добавлять загрузчики (Skeleton), либо даже белый блок на всю страницу.

Для измерений хорошести используют 75-ый процентиль. Т.е. если для 75% пользователей эти метрики находятся в рамках допустимых значений, то все хорошо. Иногда также добавляют 95-ый процентиль.

Как можно измерить метрики.

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

https://github.com/GoogleChromeLabs/web-vitals-report — отправляет данные в гугл аналитику.

https://pagespeed.web.dev

Ещё есть https://www.webpagetest.org/ позволяет измерять не только core web vitals, на работе в Loveholidays мы его используем.

Через JavaScript тоже можно измерить, если хотите все самостоятельно. Библиотека https://github.com/GoogleChrome/web-vitals

Другие Web Vitals.

Как я написала вначале, Core Web Vitals, являются подмножеством Web Vitals. Они являются критически важными для измерения производительности. Однако существуют и другие метрики для более детального анализа.

Например, Time to First Byte (TTFB) и First Contentful Paint (FCP) обе метрики отвечают за загрузку и позволяют лучше понять проблемы с LCP.

Также метрики Total Blocking Time (TBT) и Time to Interactive (TTI) — отвечают за интерактивность и позволяют лучше понять проблемы с FID.

Метрики Web Vitals являются лучшими на текущий момент по измерению производительности. Однако они не идеальны и следует ждать улучшений в будущем.

Пост основан на официальной документации (https://web.dev/vitals/)

P.S. Никак не могу привыкнуть к механической клавиатуре. Так сложно печать с длинными ногтями, ох. Однако хочу как у Майли Сайрус, ногти длинные, самооценка высокая, всем отличного вечера воскресенья и начала недели. Buka / Bagaimana

2023-05-31 16:53:03 Друзья, уверена вы соскучились

Короче, в тему шрифтов вброс. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

Есть еще такое свойство.

Дескриптор CSS unicode-range устанавливает определенный диапазон символов, которые будут использоваться из шрифта, определенного @font-face и доступного для использования на текущей странице. Если на странице не используется ни один символ из этого диапазона, шрифт не загружается; если он использует хотя бы один, загружается весь шрифт.

Офигеть!

Всем клёвого рабочего дня! Buka / Bagaimana

2023-05-30 20:58:59 Друзья, всем добрый вечер, чирикаю я на клавиатуре

Про performance и предзагрузку шрифтов.

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

Так вот как начинается основной анализ:
Ставим медленный 3G во вкладке Network.
Вкладка в Google Chrome Performance.
Перезагружаем страницу и кликаем Performance на запись.

После ищем показать LS — Layout Shift, собственно это и есть метрика CLS и смотрим что же происходит. Вообще она довольно нестабильная особенно на локальном компьютере, но подсветить проблемы может, по факту нужно искать прыжок в чём-то. Сегодня я сосредоточилась на проблеме с прыганием шрифта, когда загружается новый. Из возможных вариаций решений, предзагрузка шрифта, которая в целом уже была реализована, делается это через дополнительный атрибут rel=”preload” (https://web.dev/codelab-preload-web-fonts/). Ещё сегодня узнала про такое свойство как font-display, до этого как-то его пропустила в изучении. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Это свойство имеет несколько значений. Например, если поставить block, то перед рендерингом шрифтов браузер немного подождёт 2-3 сек и покажет текст, не факт, что шрифт загрузится, но даётся такой буст. При значении swap происходит показ текста немедленно и потом уже когда догрузится шрифт, будут прыжки. Интересное свойство берите на заметку, если не знали.

Пишите использовали ли у себя на проектах? И как вообще справляетесь с предзагрузкой шрифта, чтобы не было скачков? Buka / Bagaimana