🖐 Всем привет! Сегодня хочу порассуждать о различных библиотеках, которые упрощают верстку при создании приложений

Раньше я была категорически против них, топила только за чистую верстку. Мне казалось, что разные либы типо бутстрапа просто портят код и уважающий себя верстальщик должен писать все самостоятельно. Я не понимала frontend разработчиков, которые говорят, что не любят верстать. Как можно это не любить? Это же такой кайф, так интересно! — думала я 😀

Когда я начала изучать React и стала писать какие-то приложения, пусть даже совсем небольшие, мне удалось следовать моей логике какое-то время, но потом я поняла, что что-то тут не так)

Во-первых, на верстку уходило много времени (этому я не удивилась, потому что действительно, хорошая верстка не делается быстро) и она стала менять (как бы это ужасно не звучало для прежней меня) отвлекать… То есть ты пишешь логику, реализуешь какой-то flow, думаешь куда и зачем девать данные — тебя захватывает этот процесс, а потом смотришь — и вообще не вырисовывается никакая верстка

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

В-третьих, я понимаю, что бизнес платит деньги айтишникам за то, что они оптимизируют процессы и помогают предпринимателям зарабатывать больше. Какому-нибудь миллионеру плевать, сделана его платформа на SCSS или там используется Material UI. Если мы говорим про UI, то да, клиенту важно, чтобы это было удобно, красиво и не тормозило. Но как это сделано — пофиг! Бизнесу лучше, если ты потратишь час не на нативную верстку (если у него визуал не падает), а на решение более важных задач

Я сталкивалась с Material UI, Ant Design, и Radix UI. Вот последнее мне больше всего понравилось. Потому что в подобных рода библиотеках ты можешь очень многое редактировать и гибко настраивать. Ты имеешь полное право не для всего её использовать, ты можешь писать свои стили на свой вкус, там нет безумого количества лишних оберток и все хорошо с доступностью. Но ты экономишь время на том, что тебе не надо делать объемных и при этом шаблонных задач (типо модалок, радиокнопок, слайдеров и т.д.)

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

А что вы думаете?

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

Сегодня хочу рассказать о том, почему я пишу на scss, но использую css переменные

1️⃣ С css переменными можно работать в js, то есть считывать и присваивать им значения. Иногда это очень удобно и нужно

2️⃣ css переменными можно управлять в браузере. Можно использовать другую переменную или просто посмотреть, какие есть варианты

3️⃣ Мне всегда было интересно, как реализуется переключение между темами на сайте? И я была приятно удивлена, когда увидела, как это делается с css переменными. Просто в зависимости от data-атрибута переприсваивается значение переменной!

4️⃣ В css переменные позволяют указывать резервное значение. Узнала об этом недавно и пока не пользовалась, но звучит круто)

5️⃣ Область видимости. Создаём глобальную переменную, в блоке x переприсваиваем ей значение и оно будет оставаться таким только в блоке x

Единственное, что для меня является проблемой в css переменных — это то, что я не могу их использовать с rgba так, как scss переменные

$white: #fff
.block {
background-color: rgba($white, 0.5);
}

Вот если white будет css переменной, то такая запись не сработает

Но я уверена, что смогу найти оптимальное решение и может быть напишу об этом пост)

#верстка

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

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

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

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

#работа