#jsdoc
Отличная шпаргалка по использованию jsdoc туть 👉 https://devhints.io/jsdoc

Программирование на node.js для чайничков 👇🏻

Fullstack Node.js: полное руководство по созданию приложений
Д. Гуттман, 2019

Научитесь создавать продакшн приложения Node.js. Книга Fullstack Node.js — это полное руководство по созданию быстрых, готовых к работе приложений Node.js.

Fullstack Node.js содержит все необходимое для быстрого создания производственного кода Node.js. В том числе:

- как создать высокопроизводительные API-серверы в Node;
- как использовать асинхронные возможности Node для максимальной производительности;
- соглашения сообщества для организации кода Node.js;
- сохранение данных в базе данных и предоставление их через API;
- когда Node.js - лучший выбор (а когда нет);
- и многое другое.

Скачать книгу | Больше книг

#book #js #web #node

#npm
Как известно, пакетов для Node.js есть бесчисленное количество. Один из них - приятная утилитка для склонения слов по родам, числам и падежам. Ловите ссылочку https://www.npmjs.com/package/morpher-ru

#animation
Каааак же красива 😍

#basics
И снова про преобразования типов. Кто решал задачку про a == a и a < a ? Помните магические трюки с toString и valueOf? Так вот - это старье! На смену древнейшим (но не сказать, что бесполезным) функциям пришел новый метод [Symbol.toPrimitive], который выполняет преобразование к примитиву и который можно переопределить для разных случаев приведения типов. Пример и объяснение можно почитать по ссылочке 👉 Преобразование объектов в примитивы

#jsonp#cors
Кто-то пытался обойти политику безопасности ajax? Есть метод))

#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