Во многих статьях про анимации упоминается Timeline panel, но в современных девтулзах её нет. В 58 версии хрома её объединили с JavaScript CPU profiler и перенесли в Performance panel

Вот отличная статья с демкой о том как начать работать с Performance panel: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance

и вот расширенная статья — https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#record

Прошла курс от гугл про анимации (он классный и бесплатный) https://classroom.udacity.com/courses/ud860

единственный минус в том, что он был сделан в 2016 и с тех пор девтулзы изменились. Но после пары статей про вкладку performance я смогла перенести все измерения из девтулзов на видео в ирл девтулзы

советую

итак, что же важного я узнала про анимации:

- анимировать width и height — плохо
- анимировать clip и clip-path — тоже плохо

- анимировать только transform и opacity — хорошо
- использовать will-change — хорошо, но не стоит увлекаться

также следует помнить, что всё можно измерить

время для анимации на разных стадиях готовности приложения:
load 1000ms
idle 50ms
animation 10-12ms
response 100ms

на картинке — этапы обработки кода браузером

В JavaScript есть только примитивы и объекты.

Типы примитивов: boolean, null, undefined, bigint, number, string, и symbol.

Отличием примитива от объекта является то, что примитивы не имеют свойств или методов. Тем не менее, 'foo'.toUpperCase() преобразуется в 'FOO' и не вызывает TypeError. Это происходит потому, что при попытке получения свойства или метода у примитива (например, строки), JavaScript неявно обернет примитив объектом, используя один из классов-оберток (например, String), а затем сразу же уничтожит обертку после вычисления выражения. Все примитивы кроме null и undefined ведут себя таким образом.

вторым параметром JSON.stringify принимает replacer

replacer может быть массивом или функцией

- массив определяет набор свойств, включаемых в объект в окончательной строке

- функция принимает ключ-значение по ходу преобразования и может с ними взаимодействовать

const settings = {
  username: "anna",
  level: 19,
  health: 90
};

// массив

JSON.stringify(settings, ["level", "health"]);

// "{"level":19,"health":90}"


// функция

JSON.stringify(settings, (key, value) => {
  
  if (typeof value === 'number') {
    return undefined
  }
  
  return value;
});

// "{"username":"anna"}"

Обретение навыков

Мне всегда казалось, что классическое программистское деление на junior-middle-senior достаточно бессмысленное: оно сильно разнится от компании к компании, конкретных критериев нет, часто превращается в инструмент вычисления зарплаты из опыта работы.

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

#рост

различия extends и implements

extends — расширение класса

implements — реализация класса

С ключевым словом import все импортируемые модули являются pre-parsed. Это означает, что импортированные модули запускаются первыми, код в файле, который импортирует модуль, исполняется после.

В этом разница между require() в CommonJS и import! С помощью require() вы можете загружать зависимости по требованию во время выполнения кода. Если бы мы использовали require вместо import, в консоль были бы записаны running index.js, running sum.js, 3.

неплохой туториал по регуляркам с задачками

https://regexone.com

разница for in и for of



const arr = ['a', 'b', 'c', 'd']

for (let item of arr) {
  console.log(item)
}

// a b c d

for (let item in arr) {
  console.log(item)
}

// 0 1 2 3

статья про то как надо читать книги — не зацикливаться на одной непонятной, а фигачить сразу несколько с перерывами между

https://web.archive.org/web/20190308204248/https://ru.hexlet.io/blog/posts/how-to-read-books

https://youtu.be/omeYq2BGYTU?t=0

коллега скинул доклад, который произвел на меня сильное впечатление

это доклад про архитектуру фронтенда, а информации по этой теме вечно не хватает
очень хороший

https://javascript.christmas/

https://react.christmas/

адвент-календари 2019

в продолжение темы

https://m.habr.com/ru/post/491252/

разница между async/await и .then

С обещанием мы в основном говорим: "Я хочу выполнить эту функцию и откладываю ее, пока она выполняется, поскольку это может занять некоторое время". Только когда определенное значение разрешено (или отклонено), и когда стек вызовов пуст, я хочу использовать это значение.

Мы можем получить это значение с помощью ключевого слова .then и await в функции async. Хотя мы можем получить значение обещания с помощью .then и await, они работают немного по-разному.

В firstFunction мы отложили функцию myPromise во время ее работы, но продолжили выполнение другого кода, в данном случае console.log ('second'). Затем функция разрешается строкой I have resolved, которая затем логируется после того, как она увидела, что стек вызовов пуст.

Используя ключевое слово await в secondFunction, мы буквально приостанавливаем выполнение асинхронной функции до тех пор, пока значение не будет разрешено до перехода на следующую строку.

Это означает, что мы ожидали разрешения myPromise со значением I have resolved, и только когда это произошло, мы перешли к следующей строке: second была выведена в консоль последней.

https://github.com/lydiahallie/javascript-questions/blob/master/ru-RU/README.md#102-%D0%BA%D0%B0%D0%BA%D0%BE%D0%B5-%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D1%83%D0%B4%D0%B5%D1%82-%D0%BD%D0%B0-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D0%B5