☕️ '${Вронтенд}'

Все чаще я встречаю людей во фронтенде, которые либо не понимают, либо плохо понимают как работают классы, как с ними работать, что это за такое ключевое слово "super" и как все это связанно с прототипами. Самое обидное, когда человек пишет на каком-нибудь react, а рассказать про "ComponentName extends React.Component" и что за React.component, не может. Не надо так! Вот отличная статья, в которой описаны все базовые и не только нюансы по классам в JS.

Learning Patterns Свежая книжечка, спасибо @maximgorbatyuk за наводку! PDF | EPUB

Я как то постил простую задачу и решение к ней, основанное на рекурсии. Если кто не понял: есть массив вида [1,2,[3,4,5,[6,7,8]]] и его нужно сделать "плоским" без использования метода flat. Но вот такое решение я увидел сегодня на собеседовании. А как тебе такое Илон Маск?

Операторы логического присваивания в ECMAScript2021 // Logical Assignment Operators В ECMAScript 2021 представили очень интересную штуку:

- Logical OR assignment operator ||=
- Logical AND assignment operator &&=
- Nullish coalescing assignment operator ??=

Ну и разберем маленький пример для тугокодеров:

let myFiles = {filesCount: 100, files:[]};
// проверяем наличие filesCount и если есть, то присваиваем 5
myFiles.filesCount &&= 5;
// log выводит 5
console.log(myFiles)

#ECMAScript #ECMAScript2021 #ECMAScript2021update

Доброго утра, господа ❤️

Что такое прокси в JavaScript? (Из серии личных заметок) Объект Proxy представлен в ECMAScript2015. С его помощью можно найти локального администратора для объекта и расширить исходные функции объекта. На самом простом уровне применение Proxy выглядит так: // Нормальный объект let obj = {a: 1, b:2} // Используем синтаксис Proxy в поиске администратора для объекта let objProxy = new Proxy(obj, { //Кастомный get для получение модифицированного результата (можно использовать set, apply, has и пр) get: function(item, property, itemProxy){ console.log(`You are getting the value of '${property}' property`) return item[property] } }) Когда мы читаем свойства объекта, выполняется функция get, где get принимает 3 аргумента: item — сам объект; property — имя свойства, которое нужно прочесть; itemProxy — только что созданный объект-администратор. Краткий итог: объект Proxy позволяет создать прокси для другого объекта, может перехватывать и переопределить основные операции для данного объекта.

А вы знали что styled компоненты можно использовать и во vue js? Подобный подход показался мне интересным и по началу я искал альтернативы, но оказалось что уже давно есть реализация для вуёв. Если кто-то еще не в теме, то представьте, что вместо обычных тегов с классами, мы пишем свою небольшую обертку:

const Wrapper = styled.div`
  padding: 4em;
  background: red;
`;

Далее используем обертку как обычный div:

<wrapper>
  <h1>Hello World!</h1>
</wrapper>

Ссылка на пакетик!

Ну все, лавочку с книжками прикрыли, звыняюсь ^^’

Тут на озоне можно выцепить книжки по нашей теме просто за смешные деньги, пользуйтесь! (не реклама, сам приобрел и делюсь). Чтобы найти еще книги за 140руб можно пойти в раздел издателя "Эксмо" и фильтровать по категории.

AutoCannon - интересный пакет позволяющий экспериментировать и замерять скорость ответа от ваших сервисов. Можно завести в несколько воркеров и коннекшнов.

Мало кто знает, но в JSе у нас есть асинхронные итераторы и генераторы, а чтобы пробегаться по ним, есть целый: for await...of. А вот простой пример использования:

async function sleep(ms){
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}

async function* asyncGenerator() {
  yield 1;
  await sleep(1000);
  yield 2;
}

(async() => {
  for await (const num of asyncGenerator()) {
    console.log(num);
  }
})().catch(e => console.error(e));

Очень частое явление, когда резюме кандидата не только плохо составлено, но и выглядит откровенно уродливо. Есть много сервисов которые решают эту проблему, (нет я не про выгрузку pdf с hh) но большая часть из них просит денег за очень примитивный функционал. Я предпочитаю использовать linkedIn, ну просто потому что мне лень заполнять новые освоенные навыки и все вот это каждый раз в куче разных мест. К слову отличная идея для пет-проекта: написать штуку, которая будет скрэппить линкедин аккаунт и генерировать красивую резюмеху без подводных камней. Вот удобная, бесплатная альтернатива на vue js - тык.

Если вы по какой то причине еще не прочли серию книг "ты не знаешь javascript" или у вас просто нет понимания как ваш код работает под капотом, то вот пару полезных ссылочек: - Интерактивная визуализация механизма работы DOM-событий - Интерактивная визуализация Event Loop

Не то что бы это что-то новое, но всегда было интересно и весело поковырять такие шутки.

const results = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors()

Детектинг лица, определение пола, эмоций, сопоставление по фото и многое другое на JS всего в пару строчек и даже в вашем браузере: face-api.js

А вы знали что на мобильные ОС есть JavaScript ide? И она называется Play.JS ! На самом деле я просто перебирал разные варианты править код на айпаде, но пришел к старому выводу о том, что устройство нужно использовать по назначению. В противном случае это будет швейцарский нож, где есть все и это все работает плохо. С другой стороны, можно запустить свое React/Vue приложение и поиграться с ним (приложение есть и на йосос и на ведроид). Из вариантов еще часто вижу облачный vscode, но тут вопрос делея и вообще подключения к интернету. (Ставь класс если это все не нужно и вообще, есть песочницы по типу codepen 👍🏻👍🏻) А вообще, расскажите как вы правите свой код on the go!?

Ну невероятно хорошо

Джуность - проект с объективными грейдами и необходимыми навыками от сообщества.

А вот и первый стольничек сабов в канале подъехал! Поздравим друг-друга и дальше формошлёпить..

Бесплатный frontend курс от жыдбрейнс (не реклама, один фиг каждый день спрашивают где учиться). Распространите среди жильцов вашего жэка.