обнаружила, что в моих квизах чаще участвуют бекендеры. Фронты, поднимайте стату!

#meh

⚡ Notion Meetup

Давно я не звала вас на митапы 🤓 Пора исправлять!

Сегодня в копилке предложений не совсем фронтовая тема, но как мне кажется - очень любопытная. В конце июня команда популярного инструмента для ведения заметок Notion проводит первый саммит. В программе выступления разных членов команды. Из прикольного ребята покажут (по крайней мере обещают), как они сами используют ноушен, что в нем вкусного появилось, как внедрить этот «заметочник» в жизнь своей команды для повышения продуктивности.

В общем для меня звучит вкусно, особенно в свете появления публичного Notion API. Кому тоже любопытно, ссылку прикрепляю.

⚠️ online
⚠️⚠️ english

#meetup #noJS

В одном из предыдущих постов упоминала про обработку ответов Promise, что он не ловит коды ответов, отличных от 200. Тру стори в том, что только что я сама потратила минут 15 в тупую в попытке поймать 401 с помощью try… catch. No comments 🤦‍♀️

#meh

🐥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