🖐 Всем привет!

Сегодня речь пойдет о единицах измерения в css. Поговорим о том, какие и когда стоит использовать

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

✅ em
Это относительная единица измерения к размеру шрифта текущего или родительского элемента.  Здесь важно не запутаться, какой размер шрифта влияет на элемент. И еще одно неудобство связано с тем, что в большинстве макетов используются px и нам будет необходимо перевести их в em. Зато меньше кода потребуется для адаптива

✅ rem
Тоже относительные и тоже относительно размера шрифта, но уже шрифта в браузере по умолчанию или того font-size, что задан для тега html

✅ %
Думаю, с этой относительной единицей многие работали. Но тут нужно учитывать, относительно каких свойств они будут высчитывать. Например, если вы указываете ширину в процентах, то это значение будет относительно ширины родительского элемента. Высота — относительно высоты, высота строки — относительно размера шрифта 

✅ vw, vh
vw — относительно ширины окна браузера, vh — относительно высота. То есть 100vh — весь экран по высоте

✅ vmin, vmax
vmin — относительно наименьшего из vh и vw, а vmax — наибольшее. То есть 50vmin — будет половина от высоты или ширины экран (от того, что меньше)

✅ fr
Мало кто вспоминает об fr, когда речь заходит о единицах измерения, но мы их часто используем с гридами

Что из этого вы чаще всего используете?)

#верстка

Недавно пришлось плотно поработать с Яндекс картами, сделала вот такую штуку.

Вообще не имею большого опыта с ними. Раньше боялась таких столкновений и старалась всеми силами избегать их

Но несколько раз этого не удалось, пришлось разбираться) Видео, чат GPT, stack overflow, ютуб — всё шло в ход дела. Ну и вроде помогло, смогла перекрасить карту 😀

А в этом проекте задача еще больше усложнилась: перекрасить, убрать инструменты, добавить кастомные пины, сделать балуны и прикрутить фильтрацию 😱

Ну ничего. Глаза 👀 боятся, а руки делают. Проявила фантазию, подключила программистское мышление 🙇 и вот она, красота!

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

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

#карты #работа #верстка

Браузеры

Когда я только начинала погружение в IT (лет 7 назад), однозначным фаворитом был Chrome, для разработки все рекомендовали только его.

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

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

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

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

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

📌 Если правильно поняла, то хром поддерживает больше фич и одно из его основных преимуществ — магазин плагинов, но думаю, что в фаере этот вопрос тоже решается.

📌 И последнее, но не по важности. Chrome идеально (почти) настроен из коробки, а Firefox предоставляет огромное количество настроек и кастомизаций под любой вкус и цвет, но просто не всем оно надо.

Мой вывод таков. Лучшего решения нет. Нужно пользоваться тем, что удобно именно тебе. Я ради эксперимента попробую перейти на Firefox (хотябы частично) на некоторое время. Нет, я не разочаровалась в Chrome, просто мне чуток приелся его дизайн и хочется попробовать что-нибудь новенького.

А каким браузером пользуетесь вы? И что можете сказать про мои мысли, может дополните меня в комментариях?)

Недавно забила на codewars. Его задачи мне казались, как из другого мира, то есть очень отдаленными от того, чем люди занимаются на работе

И я перешла на leetcode. Там сложнее, но задачи более реалистичные и на собесах часто оттуда идеи берут

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

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

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

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

А еще один паттерн — стратегия, недавно применяли в рабочем проекте. Если интересно, могу поподробнее рассказать об этом кейсе

#книги #паттерны #теория

Посмотрела на выходных собеседование на канале Ulbi TV, нашла для себя несколько сфер для прокачки и зарядилась позитивом и уверенностью от собеседуемого)) Классный, веселый парень, думаю, подтянет харды и все будет у него хорошо

А еще Ulbi интересные задачки предложил, отвлеклась немного от руттиных тасок на работе 🧠

А как у вас выходные прошли?)

https://youtu.be/OZPOO79Y4jk?si=O6LW-F9Xea__095-

Дизайнеры готовят дизайн систему 🤣, чтобы на её основе мы начинали делать UI Kit)

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

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

Поэтому не знаю, чем и когда это все закончится, но если вам интересно, то могу периодически рассказывать, как у нас дела продвигаются (или не продвигаются))

#работа