Привет доблестным фронтендерам! Скучали? 😜

Прошло больше года с момента рождения канала и ещё больше - с момента становления меня как фронтендера. Спустя такое количество времени у меня накопилось огромное количество всяких разных идей и мыслей, примеров и историй, что я решила на 90% реформировать свой канал. Надеюсь, вы меня поддержите, потому что это дело несколько волнительное 🙈

Итак, если вы забыли...

Меня зовут Лиза и я #умамыфронтендер. Несмотря на то, что я даже не думала становиться веб-разработчиком, судьба столкнула меня лицом к лицу с безумно интересной и противоречивой клиентской разработкой, которая меня в буквальном смысле поглотила и вдохновила делать что-то полезное для людей. На сегодняшний день в копилке моих достижений несколько собеседований в известные компании (Mail.ru, Яндекс, Google, Сбер, ВКонтакте), два места работы, несколько интересных проектов и красный диплом МГТУ им. Н.Э. Баумана 😎 В самом начале пути мне было очень сложно разобраться во всяких разных тонкостях, поэтому я решила создать этот канал, где я могу делиться всякими разными наработками для новичков, которые помогут понять и полюбить фронтенд во всех его проявлениях.

Чтобы тернистый путь по изучению веба не был таким сложным, мы будем его структурировать 😉 А именно: будет несколько тематик, каждую из которых вы сможете с легкостью найти по соответствующему тегу и в любой момент почитать интересный пост.

#basics

Основы JavaScript. Поговорим про основные моменты в JS, которые нужно must-know каждому уважающему себя фронтендеру. Посмотрим отличия одной реализации от другой. Соопровожу всё своими коментариями и объяснениями

#article

Почитаем статьи крутых ребят, вынесем основные поинты, примем на вооружение

#video

Обзор видео-контента. Кратко расскажу суть темы, поделюсь своими впечатлениями. И ссылочкой конечно же 🙂

#NoJS

Not only JavaScript. Здесь всякий разный контент по вебу, не связанный конкретно с клиентским JS. Например работа с серверной часть, python, настройка окружения, дополнительные инструменты разработки и прочее

#meetup

Приглашаю на всякие разные фронтендовые встречи, в том числе онлайн. Тусы комьюнити 😜

#advanced

Разбор сложных тем, которые могут быть не сразу понятны новичкам. Расширяем границы ✨

#meh

Поболтаем за жизнь, обсудим сложные и обидные «ррррр»-моменты, немного побомбим и повзыхаем..

#test

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

В общем энтузиазма много, поэтому хватит уже заниматься болтологией, пошлите творить историю! Настало наше время делать крутой веб 💫

👋 Привет, Effector! Привет, Habr!

Последний месяц уходящего года увенчался у меня значимым событием - я написала первую статью на Хабре ✨

Статья раскрывает встреченные мной плюшки и боли стейт-менеджера Effector. Она будет полезна для тех, кто хочет поднять проект в стеке React + TypeScript + Effector. Есть иллюстрированные примеры с тестовым проектом на GitHub, который каждый может запустить и потыкать локально. Так что заглядывайте на Хабр, оставляйте реакции и комментарии, пробуйте новые фронтовые штуки! Давайте делать крутой веб вместе 😉

#article #advanced

​​✨ Деструктуризация

В современном коде одним из ваших инструментов является деструктуризация.

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

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

Давайте сразу к примерам

1. Деструктуризация массивов
const arr = [1, 2, 3];
// получаем доступ к нулевому и первому элементам массива
const [first, second] = arr;
// first === 1
// second === 2

Если у нас есть элементы массива, которые мы хотим пропустить, можем воспользоваться запятой:
const arr = [1, 2, 3];
// получаем доступ к нулевому и второму элементам массива
const [first, , third] = arr;
// first === 1
// third === 3

2. Деструктуризация объектов
С объектами всё работает аналогично:
const user = {
name: 'Mick',
age: 24,
city: 'Moscow'
};

// обращаемся к полям объекта по имени, поэтому
// порядок не имеет значения
const { name, city, age } = user;

3. Деструктуризация параметров функции
Удобно использовать деструктуризацию в качестве параметров функции. Это позволяет избавиться от ненужных "пустых" аргументов, передаваемых в функцию. Например:
const options = {
name: 'Mick'
};

// Деструктурируем параметры функции
const helloFunc = ({ name, age }) => {
console.log(Hello, ${name});
console.log(Your age: ${Number(age)});
};

// Передадим в функцию объект с параметрами, где одного поля нет
helloFunc(options);

// Вывод:
// Hello, Mick
// Your age: NaN

Т.к. в объекте с параметрами не было поля age , функция напечатала NaN. Это не очень хороший вариант взаимодействия с пользователем. Для опциональных параметров можно и нужно использовать значения по умолчанию, о которых мы поговорим далее 💫

🤓 Деструктуризация. Часть 2

Давайте разберемся с некоторыми нюансами в деструктуризации.

1) Дестуктуризация работает с любыми перечисляемыми объектами. Т.е. Set, Map тоже можно.

2) Присваивать можно к чему угодно слева. Например к полям объекта:
const user = {};
[user.name, user.surname] = "Mick Jagger".split(' ');
// user.name === "Mick"

3) Значения по умолчанию. Т.к. при деструктуризации могут возникнуть undefined, эта штука отлично выручает. Примеры:
const [first = 1, second = 2] = [3];
// first === 3 (присвоили значение из массива)
// second === 2 (без значения по умолчанию было бы undefined)


const user = {
name: 'Mick'
};

const { name, city = 'Moscow' } = user;
// name === 'Mick'
// city === 'Moscow' (без значения по умолчанию было бы undefined)

4) Дестуруктуризация объекта может быть вложенной

5) Переименование переменных при деструктуризации. Пример:
const { name: n } = user;
// n === 'Mick'

6) Для параметров функций удобно использовать комбинацию деструктуризации с параметрами по умолчанию:
const options = {
name: 'Mick'
};

// Деструктурируем параметры функции
const helloFunc = ({ name = 'Test', age = 10 } = {}) => {
console.log(`Hello, ${name}`);
console.log(`Your age: ${Number(age)}`);
};

// Передадим в функцию объект с параметрами, где одного поля нет
helloFunc(options);
helloFunc();

// Вывод:
// Hello, Mick
// Your age: NaN
// Hello, Test
// Your age: 10

Вот такая удобная штука деструктуризация. Не забываем использовать, чтобы наш код выглядел модно и молодежно 🤗

За подробностями бежим на learn-js по ссылочке 🐾

#basics

☝️Проверка возможностей браузера

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

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

Во-вторых, если вы в коде используете какую-то фичу, можно проверить ее наличие в глобальном объекте Window и добавить заглушку, если фичи нет. Это так и называется feature detection (определение возможностей браузера). Как это работает:

if ("Notification" in window) {
   // Можно использовать Notification и его методы
 } else {
   // Обработка отсутствия возможности
 }

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

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

И наконец, в-пятых, можно использовать feature inference (предположение возможностей). Эта штука работает аналогично тому, как работает feature detection, но со своими особенностями. Использование предположения возможностей означает, что мы в своем коде предполагаем (логично), что наша фича реализована и мы ее просто вызываем. Например:

let element;
if (document.getElementsByTagName) {
  element = document.getElementById(id);
}

Этот подход менее надежный, чем feature detection. Поэтому лучше по возможности его не использовать. Можно, но баловство.

Вот и всё, довольно простой набор. Если вы знаете какие-то еще способы, пишите мне @emdobryanskaya, я их обязательно включу в список. Хорошего кодинга! 😉

​​🙏🏻 Promise. Часть 1

Решила освежить в памяти и разобрать нюансы с "обещаниями" в JavaScript. В первой части обозревательно познакомимся со страшным зверем по имени Promise и разберемся, зачем он в принципе нужен.

Дисклеймер: каждый уважающий себя фронтендер должен знать, как работает промис.

Что это?
Promise - это объект. Согласно документации он предназначен для работы с результатами отложенных (в основном, асинхронных) вычислений. Он предоставляет огромные возможности, главным образом - для работы с сетью.

Как это работает?
У Promise есть состояния. И их три:

- fulfilled. Состояние "выполнено успешно" и получен результат выполнения.
- rejected. Состояние "выполнено с ошибкой" и получена ошибка.
- pending. Состояние "ожидания", т.е. вычисление/операция выполняется прямо сейчас и мы ждем результат.

При работе с промисами мы ориентируемся на эти состояния.

При организации работы с промисами мы используем функции-коллбеки, т.е. "когда промис будет в состоянии X, вызови функцию Y". Коллбеки вешаются через методы промиса then, catch и finally. Но разберемся мы с ними позже 😉

Как создать промис?
Т.к. промис это объект, то его можно просто создать с помощью конструктора. В конструктор надо передать функцию-исполнитель (executor), которая выполняется сразу же и принимает в себя два коллбека - на успех и на ошибку. Выглядит это так:

const myPromise = new Promise((resolve, reject) => {
    // здесь выполняется
    // асинхронная операция.
    // по результату вызовется 
    // одна из функций:
    // при успехе
    // resolve(result); 
    // при ошибке
    // reject('Smth wrong'); 
});

❗ Еще до создания инстанса функция-исполнитель выполняется, т.е. моментально. Это важно помнить. Поэтому обычно создание промиса оборачивают в функцию, которую можно управляемо вызвать.

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

#basics

​​🙏🏻  Promise. Часть 2

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

Обработчик успеха
Функция-обработчик в случае успеха может быть передана в метод .then. В себя эта функция принимает данные, с которыми Promise выполнился ("зарезолвился"). Пример:

const myPromise = new Promise((resolve, reject) => {
    const name = 'Liza';
    resolve(name);
});
// выведется "Hi, Liza!"
myPromise.then((data) => 
    console.log(`Hi, ${data}`));

Обработчик ошибки
Функция-обработчик ошибки может быть передан двумя способами.

1 - через метод .then вторым аргументом. Формат работы такой же, как и в предыдущем случае. Пример:

const myPromise = new Promise((resolve, reject) => {
  reject('custom error');
});

const onSuccess = (data) => 
    console.log(`Hi, ${data}`);

const onError = (error) => 
    console.error(
        `Error: ${error}`
    );

// выведется 
// "Error: custom error"
myPromise.then(
    onSuccess, 
    onError
);

2 - через специальный метод .catch. Работает аналогично предыдущему пункту.

⚠️ Важно помнить: ошибки Promise - это исключения. То есть с каким-то логически ошибочными историями Promise не справится самостоятельно. Например, если запрос упадет с кодом ответа, отличным от 200, catch не поймает эту ошибку, т.к. это штатное поведение, а не исключение.

⚠️ ⚠️ При оффлайн запросах Promise сразу падает в catch. Важно помнить это, например, при настройке оффлайн взаимодействия

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

Финальная обработка

Если нам нужно, чтобы какая-то обработка была выполнена в любом случае, как бы Promise не выполнился, то можно использовать метод .finally. Формат такой же - передаем функцию, но она не принимает в себя данные.

Можно использовать finally до основных обработчиков then/catch. Например, для организации индикаторов загрузки. Finally пропустит все данные (результат или ошибку) дальше к следующим обработчикам.

Вот и всё про стандартное использование обработчиков Promise. В следующих частях мы посмотрим на цепочки промисов, а также разберем альтернативные способы асинхронной работы. Бегом делать веб! 🏃🏻‍♀️

#basics

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

#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

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