🐥Dev Week от Mail.Ru Group

Всем привет, ребяты)
Давно хотела поделиться еще одним вкусным митапом, но как-то организаторы тянули с рассмотрением заявки 🥺

Итак, с 15 по 18 июня разработчики из Mail.ru Group проводят серию митапов (C++, Python, Frontend и QA).

17 июня в 19-00 будет секция фронтенда, где можно послушать про дизайн-систему на фронтенде, распознавание лиц, оффлайн-режим и кое-что еще, о чем пока умалчивается. Из интересного эта же встреча считается митапом MoscowJS 49, так что определенно уровень будет огненный 🔥

А теперь о грустном - митапы пройдут онлайн 😢 Был анонс, что часть гостей можно будет принять оффлайн в офисе Mail.ru, но последние ограничения внесли коррективы. Поэтому категорически грустим и ждем лучшей эпидемиологической обстановки.

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

Всем рабочего веба 🤓

P.S. я еще и на QA пойду. Первый "выход в свет" как профессиональный тестировщик 😎

#meetup #noJS

​​🖥 Доступность интерфейса

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

Вот придумали ребята ещё в лохматом HTML3 тег <button>, думали, все им пользоваться будут. Ха!

К чему я это всё. Стандартные браузерные решения (button, form etc.) могут сильно помочь в UX, потому что они из коробки поддерживают доступность с клавиатуры. А значит, пользователи смогут с большей вероятностью осуществить целевое действие.

Нет, вы конечно можете играться с tabIndex и ставить швабры для удержания потолка. Если у вас есть время и вы можете аргументировать, почему так лучше 😉

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

Всем чистой консоли ✌️

#advanced

☝🏻если что, мысль выше взята не с потолка: ребята из команды мессенджера ВКонтакте активно прувят эту идею 🤓

​​🤯 Какой браузер мне нужен?

Mac OS + Google Chrome = 🤓

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

Чем хорош хром?
☑️ Поддержка современного JS
☑️ Удобные developer tools
☑️ Куча гайдов (в тч на learnjs)
☑️ Не сильные breaking changes между версиями
☑️ Довольно большое количество активных пользователей
☑️ Расширения

Что плохо?
❌ Не все пользуются им 🤗
❌ Мобильная версия иногда сильно отличается
❌ На iPhone он такой же Safari, нужно искать андроид
❌ Постоянно обновляющиеся настройки, особенно приватности (привет, CORS 🙋‍♀️)
❌ Следит за нами и сливает инфо Треккинг

Что по альтернативам?
Я сейчас переехала на Firefox. Ребят, лиса реально очень симпатичная. Инструменты разработчика a-ka Google. Побезопаснее (говорят). Из коробки удобно работать с кросс-доменными куками (не спрашивайте, локальная разработка без этого болит). Правда в симуляторе надо каждый раз обновлять страницу в ручную. Но зато цветопередача просто вишенка 🍒

Safari тоже классный, но как-то и багов много в консоли, и функции многие надо полифилить, да и инструменты там довольно сложные.

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

Вообще советую всё-таки регулярно выходить из зоны комфорта и по умолчанию использовать другой браузер. Чтобы не замыливалось. Я, например, сейчас все личные вопросы решаю через Safari. На Big Sur он просто космос 🚀

Все субъективно. Решать вам. Всем браузеров без багов 🤟🏻

#meh

✌️Про браузеры. Продолжение

На примере хотела показать отличие лисы от хрома. Я думала, это мелочь, но капец как оказалось важно.

Логирование переменной, в которой пустая строка.
Хром печатает примерно ничего. Не разберешь, он что-то напечатал или нет.
Лиса показывает, что строка пустая.

Фича? Фича! Классно? Классно! 😇

Выбирайте удобный браузер 😎 Всем хорошего дня 🙂

#meh

🥨 Конкатенация строк. Ускоряем фронтенд

Как бы решали задачу: "Объедините строки А и Б в одну строку"? Казалось бы, задача не самая сложная. Но есть "но"... 🙊

Мы знаем как минимум четыре способа соединить строки:

1. Шаблонные строки (моя любофф). Удобно, быстро, без экранирования кавычек, всё предельно понятно. Разве что бэктик на клавиатуре искать долго 😃. Пример: ${a}{b};
2. Join. Метод пришел от массивов и работает аналогично. Из приятного - можно указать разделитель и объединить строки, например, через запятую. Но можно и просто склеить без проблем. Пример:
[‘hello', ' world'].join();
3. Concat. По смыслу наиболее подходящий для нашей задачи способ. Из прикольного, можно объединять строку с массивом, и все автоматически преобразуется к строке. из не прикольного - нужна какая-то начальная строка, чтобы у нее вызывать этот метод. Пример: a.concat(b);
4. Оператор сложения (+). Наиболее прикольный в JS способ, как мне кажется. По сути "склеивает" две строки. И не только строки 😁 Пример: а + b

Вспомнили? А знаете, какой из способов самый быстрый?

#basics

👆К чему я это все. Про оптимизацию фронтенда.

Я провела небольшой ручной тест в консоли браузера и была в шоке 🤯

Вы молодцы, что угадали. Обычный плюс - это самая быстрая склейка строк. Хоть и самая опасная. Зато примитивная 😋

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

Всем шустрого веба 🔥

👀 Вы когда-нибудь задумывались, что ваши глаза могут вас обманывать?

А это может действительно искажать восприятие у пользователей. Но прежде, чем я расскажу, к чему это все, давайте проведём тест. Посмотрите внимательно на картинки выше ☝🏻

#meh

📐 Точность против UX

Оказывается, что объекты, математически точно выровненные по вертикали не являются таковыми для глаз пользователей. И чтобы это исправить, надо поднять объект немного выше геометрической середины. Не знаю, байка или нет, но мне квадрат на левой картинке сразу показался выровненным нормально 😂

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

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

Всем мир ✌️
С душой, с заботой, с 200 ОК 🎁

Пы.Сы. математически выровненным является квадрат на картинке 1

​​🎨 А где дизайн?

Когда работаете над своим проектом, чаще всего у вас нет навыков дизайна. Вы пришли кодить сайт, а не рисовать его прототип. У вас есть в голове идеи, и вы - окрыленные ими - сразу влетаете сразу в разработку. И… ничего не получается сделать! Бывало такое?

Всё потому, что лучше в начале пути задать себе (или команде) вопрос "а где дизайн?" и заняться его проработкой. Это не дороже ваших нервов 😉

Вот несколько простых вещей, на которые стоит обратить внимание при разработке своего первого дизайна:

⭐️ референсы (насмотренность помогает реализовать свои идеи в зародыше; обратитесь к Behance, Dribble или Pinterest)

⭐️ палитра (выбираем свои цвета, например с Adobe Color)

⭐️ цвет определяет действие (если пользователь должен нажать на кнопку, она должна бросаться в глаза, но если это не целевое действие - делаем ее менее заметной, неяркой)

⭐️ согласованность требований (рисуем только то, что будем реализовывать, без фанатизма)

⭐️ один цвет для активных контролов (он должен побудить к действию)

⭐️ ровные отступы (чтобы все 4 измерения были одинаковыми или похожими; исключениями могут быть кнопки)

⭐️ кратность отступов (лучше, если размер отступа делится на 4, реже на 5)

⭐️ читабельность (говорим "нет" - контрастным цветам для текста, особенно их комбинациям)

⭐️ единство композиции (шрифты одного размера, одинаковый форм-фактор у кнопок и т.п.)

⭐️ все состояния (например, active, hover, disabled для кнопок, выделенные табы, авторизованный/неавторизованный пользователь шапке, открытый/закрытый дропдаун, пустой экран, экран ошибки и т.п.)

⭐️ все размеры (десктоп, планшет, мобилка - минимум)

⭐️ качество картинок (если добавляем иконки/фото в макет - сохраняем их отдельно, чтобы можно было использовать на сайте в лучшем качестве)

⭐️ минимум шрифтов (не больше двух на проект)

⭐️ подложка под иконки на фоне (добавляем обводку/тень/подложку на иконки, которые используются, например, поверх картинок)

⭐️ иконки в размер шрифта (не вылезают за границы текста по высоте)

⭐️ ...

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

#NoJS #basics

❤️ Как веб помогает помнить

В этот день 10 лет назад мир потерял легендарного предпринимателя, одного из основателей огромной корпорации Apple - Стива Джобса. Этим сегодня говорит техническое сообщество, но я хотела затронуть другую его сторону. Сайт Apple - это витрина продуктов компании. Но не сегодня. Сегодня это ремайндер о великом человеке. И это сделано на сайте.

Вы задумывались, что создатели сайтов (как и любые другие создатели) - это создатели памяти? Мы делаем продукты, которыми (в лучшем случае) будут пользоваться и после нас.

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

📍Мы. Делаем. Историю. Спасибо.

#meh

🔥 Нет проблем, есть кросс-браузерность

Вы же помните, что фронтендер - это ниндзя в вебе? Почему? Да потому что ему то и дело надо успевать поддерживать новые браузеры и фичи в них.

Минутка историй. Сегодня с командой осознали всю боль новых фичей чудо-машины под названием Safari. iOS 15 предоставил пользователям возможность перенести адресную строку вниз браузера. И… сделал это поведение по-умолчанию! Эта адресная строка (внимание) находится поверх основного контента! Представляете, как классно быть разработчиком чата, в котором поле ввода всегда находится внизу? 🤩

Боюсь представить, что будет в Safari на новых маках, представленных сегодня. Челка явно даст о себе знать. Неужели придётся раздвигать топлайн… 🤔😱

#meh

🥇 Mobile First

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

Последнее время слышу много разговоров про концепцию Mobile First. Но так никогда не могла до конца понять, что это, кроме «ну мобилку надо сверстать». Погнали разбираться вместе 🙃

Mobile First в разработке = начинаем верстать сайт с версии для мобилки. Затем «растягиваем» верстку до размера планшета и десктопа.

Этот концепт можно осмысленно объяснить так. Мы привыкли, что мы читаем слева направо. Для нас точка отсчета всех стилей начинается с левого верхнего угла. Верстаем сайт с этой точки и постепенно растягиваем его вправо и вниз.

Какие профиты:
✅ сайт сразу адаптирован под все разрешения, не требуется чинить скролл для «убегающего» контента
✅ более осмысленные отступы между элементами. Не нужен margin-top в общем случае, т.к. мы соблюдаем направление верстки вниз и вправо. Это позволяет убрать любой элемент из верстки без случайных "прилипаний" других элементов
✅ четкие брейкпоинты в media queries. Если сказали, 1024px, значит и берем min-width: 1024px. Это означает, что с 1024px верстка будет перестраивается в то, что ожидает дизайнер. Всё четко, без всяких условностей и декрементов.

Проблемы:
💔 нужен дизайн мобилки, а он не всегда есть для MVP. Однако всегда можно покреативить и самому придумать мобильную версию 😜
💔 потенциально дольше верстать (хотя это спорно, когда знаешь сам принцип + в будущем экономия времени на адаптив)

Выглядит, как минимум, интересно…

#advanced

🎁 Бонус. Новичкам в копилку.

Дефолтные брейкпоинты для адаптивной верстки

- 320px (меньше мобилку сложно найти)
- 768px (iPad)
- 1024px (iPad landscape)

*дополнительно для широкоэкранных мониторов и особых случаев*
- 1200px
- 1440px

Всем красивого адаптива 🎨

#advanced

​​🛑 Strapi как замена бекенду

Ребяты, привет 👋

Если я скажу, что бекенд нам больше не нужен, как вы отреагируете? А если скажу, что нам не нужен фронтенд? Нет, нас не собираются заменять роботами (я надеюсь), но ситуация всё равно интересная. #щачёрасскажу

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

Strapi - это Handless CMS, open-source решение для таких горе-разработчиков, как я - не умеющих в разработку полноценного API. И он написан на JavaScript 😏

В чем смысл: вы поднимаете небольшой сервачок, который предоставляет вам админку. В этой админке вы можете создавать нужные сущности (как если бы вы это делали на настоящем бекенде), связи между ними, а также наполнять вашу БД данными. Да, БД сразу будет подключена без лишних танцев с бубнами (вы можете выбрать ту, которая вам больше нравится, по умолчанию подключается SQLite). Strapi на основе созданных сущностей САМ генерирует для вас "хвостики" API, за которые можно спокойно "дёргать" из фронта. Причем, дёргать можно как какие-то простые GET-запросы за списком, так и любые сложные фильтрации или патчи.

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

С меня однозначно лайк! А еще у ребят очень красивый сайт и куча подробных гайдов для новичков 😍 Линки прикрепляю. Всем быстрой разработки ✌🏻

#advanced #noJS

ку 🙃 я вернулась) и у меня есть немного много фронтендерского контента 🤓
сегодня поговорим про основу основ фронтенд-проекта - package.json!

пы.сы. в канале включены реакции, не держите в себе 😁