Предположим, что мы хотим использовать самую простую регулярку для поиска подстроки «кот» в строке «который раз одно и то же».

Вот она:

const reg = /кот/g

Флаг g (global) означает, что регулярка применяется ко всей строке, то есть поиск не прекращается после обнаружения первого совпадения.
Звучит как что-то полезное.
Но если мы запустим это выражение на нашей строке, то каждый второй раз оно будет возвращать false.

const str = "который раз одно и то же"

reg.test(str)
true
reg.test(str)
false
reg.test(str)
true
reg.test(str)
false

При первом вызове test() совпадение обнаруживается, но в следующей итерации поиск начинается с индекса 3 (конец первого совпадения) (wtf) и завершается ничем. После достижения конца строки и перехода к следующей итерации метод test() снова начинает поиск с начала строки.

Проверить это можно через свойство lastIndex

reg.lastIndex
0
// мы еще не запустили проверку и lastIndex равен нулю

reg.test(str)
true

reg.lastIndex
3
// вот здесь-то и начинаются непонятки

Избежать этого можно несколькими способами:

- не указывать флаг g
- присваивать 0 свойству lastIndex после каждого вызова reg.lastIndex = 0
- каждый раз перед проверкой создавать новую регулярку

https://www.youtube.com/watch?v=IHPjaECmtCo&feature=youtu.be&t=953

доклад, после которого я установила tldr в консоль и сделала бесполезного бота

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

npm install -g tldr

постоянно путаю function declaration и function expression

function declaration

function sayHi() { }

function expression

const sayHi = function() { }

в чём же разница:

declaration всплывает, expression не всплывает

иногда стоит почитать комментарии на лерн.джаваскрипт

статья, которая напомнила мне про функции

https://overreacted.io/what-is-javascript-made-of/

как дэн абрамов из студента бонча с дутым макбуком стал самым популярным прогромистом в твиттере. люблю такие истории

https://overreacted.io/my-decade-in-review/

читаемость важнее краткости (насчет стрелочных функций не соглашусь)

https://gomakethings.com/readability-is-more-important-than-brevity/

css

чтобы зеркально отразить объект, можно использовать transform: scaleX(-1);

список анимируемых css-свойств

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

как разные движки отрисовывают изменение css-свойств


https://csstriggers.com/

да уж, от вебкита я ожидала большего...

Во многих статьях про анимации упоминается 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 — реализация класса