#css
вот такие прикольные алерты можно встретить, когда пытаешься завладеть информацией 😎

#докладик
Буквально сегодня проходит конференция Я 🧡 Фронтенд. С первым докладом выступал, на мой взгляд, один из самых ярких спикеров - Иван Бакаидов. И яркий не потому, что он обладает какими-то исключительными особенностями. А потому, что он делает нечто удивительное - помогает людям с ограниченными возможностями чувствовать себя полноценными членами общества.
Его доклад "Глазные интерфейсы" рассказывает о том, как с помощью зрения взаимодействовать с компьютером. Первый доклад в моей жизни, который поражает не только контентом, но и подачей. Советую даже просто из-за интереса к экшенам
Т.к. конференция еще идет, прикладываю линк на тот же доклад, но с конференции pitercss
Жмяк сюда 👉 https://www.youtube.com/watch?v=SLSjVOCwLm0

#производительность
Есть куча всяких разный статей про производительность. Позвольте поделиться одной из самых крутых статей, где прямо вот на картинках и примерах разбирают основные метрики производительности фронтенда. Еще и статья из подкаста Веб-стандартов (к - качество). Жмяк сюда 👉 https://medium.com/web-standards/performance-metrics-ff23c213164e Enjoy :P

#nodejs
Для тех, кто хотел осознать работу с переменным окружением node.js (на начальном уровне), приятная небольшая статейка с разными вариантами установки. Make server-side js great again! Жмяк сюда за подробностями 👉 https://medium.com/@hydrock/%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5-%D0%BE%D0%BA%D1%80%D1%83%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B2-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B8-node-js-e9ca2131e6b6

#env
Для интересующихся различными техническими решениями для своих фронтенд-проектов представляю достаточно милый сайтик с подборочкой. Тык по ссылке 👉🏻 https://tooling.js.org/

#html
Кто-то слышал про интересный атрибут tabindex?
Это штука, которая позволяет управлять последовательностью навигации по странице с помощью клавиатуры
Подробнее тут 👉 https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/tabindex

#meetup
Кто сказал, что мы не можем ходить по митапам? Можем и ходим! Встречаемся 25го апреля на онлайн Я.Субботнике! Поговорим про тестирование, послушаем истории про работу с TypeScript, перекинемся парой слов про стили, да и просто круто время проведем :) Подробности и регистрация по ссылочке 👉 https://events.yandex.ru/events/yasubbotnik/25-apr-2020

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

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