как покрасить точку над i

http://jsbin.com/urOtixog/1/edit?html,css,output

плагин для подсветки синтаксиса и автодополнения css-in-js

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

https://alphahydrae.com/2021/02/how-to-display-an-image-protected-by-header-based-authentication/

чего так сложно....... были же просто картинки..... господе

хотите добавить кнопочку для копирования текста?
можно сделать это одной строкой css

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

гитленс показывает красивое (называется visual file history)

чем отличаются авторизация и аутентификация

https://www.kaspersky.ru/blog/identification-authentication-authorization-difference/

сегодня я узнала что перед тем как рибейзить стоит использовать префикс -i, тогда можно будет клево отредактировать историю коммитов (собственно ради чего мы и затеваем всю движуху с рибейзами)

git rebase -i develop

Давайте регэкспам научу за один пост?

Регэксп описывает шаблон, который вы хотите найти внутри строки.

Самый простой — буквальный. Что написано, то и ищем:

/abcd/ => ✅ "abcd", ⛔️ все остальное

Какой-то символ может повторяться. Если сколько угодно раз (1 или больше), то плюсик:

/a+/ => ✅ "a", "aa", "aaa"

Если сколько угодно раз или ни разу (0 или больше), то звездочка:

/a*/ => ✅ "", "a", "aa", "aaa"

Если один раз или ни разу, то вопрос:

/a?/ => ✅ "", "a", ⛔️ "aa", "aaa", "aaaaaaa"

Все три применяются только к символу, который идет непосредственно перед:

/https?/ => ✅ "http", "https", ⛔️ "htt", ""

Теперь про сами символы. На одной букве далеко не уедешь, поэтому есть выбор. [abc] значит любой из a, b или c:

/[abc]/ => ✅ "a", "b", "c", ⛔️ "d"

Внутри квадратных скобок можно писать диапазоны:

/[a-z]+/ => ✅ "abc", ⛔️ "123", "ab12"
/[0-9]+/ => ✅ "123", ⛔️ "abc", "ab12"

Но в эпоху юникода использовать a-z не рекомендуется. Вместо этого есть Юникодный класс “Letter”:

/\p{L}+/ => ✅ "abc", "абв", "åbč", ⛔️ "1234"

У квадратных скобок есть еще одна особенность: можно сказать отрицание, то есть «что угодно кроме перечисленного»:

/[^a-z]+/ => ✅ "123", "абв", ⛔️ "a", "abc"

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

/[^:]*/ => ✅ "", "123", "абв", ⛔️ "a:b", ":"

Еще один важный класс: пробел. \s включает все возможные варианты пробелов (неразрывные, em/em spaces, табы и т.п.):

/\s*/ => ✅ "", " ", "   ", ⛔️ "abc"

\s* часто используется при парсинге «человекочитаемых форматов», т.к. люди любят пробельчиками отбивать все, или делать вид, что их не видят.

Точка. Точка значит «что угодно вообще»:

/.*/ => ✅ "", "123", "абв"

Крышечка и доллар — начало и конец строки. Обычно регрексп будет искать вам ПОДстроку. Чтобы проверить всю строку целиком, заверните ее:

/^[a-z]+$/ => ✅ "abcd", ⛔️ "abcd1"

Наконец, «или». Когда нужно выбрать из нескольких сильно разных вариантов — скобки и пайп:

/(http|ssh)/ => ✅ "http", "ssh", ⛔️ "htsh"

По использованию. В простейшей версии регэкспом вы просто проверяете, есть ли внутри строки подстрока, соответствующая шаблону:

/[a-z]+/.test("1abc2") => true
/[a-z]+/.test("123") => false

Но иногда строку хочется распарсить. Для этого интересующие вас части заверните в круглые скобки:

"__abc123__".match(/([a-z]+)([0-9]+)/) => ["abc123", "abc", "123"]

Штуки в скобках называются «capturing groups». match вернет вам сматчившуюся подстроку целиком плюс значения всех capturing groups.

Тут проблема, потому что скобки могут быть чисто техническими и использоваться просто для группировки. В этом случае пишут (?:), «non-capturing group». По сути те же скобки, но в результат match-а они не попадут.

"__abc123__".match(/(?:a|b|c)+([0-9]+)/) => ["abc123", "123"]

Теперь про недостатки. Самое неудобное — что каждый символ внутри значимый. То есть нельзя разбить регэксп для удобства чтения. Если вставите где-то лишний пробел, регэксп будет искать его в строке:

/( abc | def )/ => ⛔️ "abc", "def", ✅ " abc ", " def "

Второе — многие нормальные символы имеют специальное значение и их нужно эскейпить. Это очень трудно читать:

/(\(|\))/ => ✅ "(", ")"

Особенно легко попасть на точке:

/.*.jpg/ => ✅ "abcjpg"
/.*\.jpg/ => ⛔️ "abcjpg"

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

Поэтому простых регэкспов не бойтесь — их читать как раз несложно. Сложные иногда можно потерпеть ради компактной записи и перформанса.

Факультативно почитайте про lookahead/lookbehing, quantifier, named groups, greedy/lazy, флаги ignore case, unicode, multiline.

Как-то так.

когда-то я готовилась к собеседованиям по вот этому списку задачек

https://github.com/lydiahallie/javascript-questions/blob/master/ru-RU/README.md

задачки для собеседований от хекслета
https://ru.hexlet.io/blog/posts/kakie-voprosy-ob-otladke-chasto-zadayut-na-sobesedovanii-js-razrabotchikam-primery-i-ob-yasneniya

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

отличная статья про ивент луп

https://www.jsv9000.app/
песочница для ивент-лупа, макротасок/микротасок
красивое

мой код для примера

console.log('first')

Promise.resolve().then(function promise() { console.log('second')})

setTimeout(function time() {console.log('third'), 5000})

async
асинхронная функция возвращает промис

отличия map от weakmap

ключи
map любого типа
weakmap только объекты

итерация и методы keys(), values(), entries()
map поддерживает
weakmap не поддерживает

это происходит пушто garbage collector удаляет из weakmap пары ключ-значение если на ключ (который очевидно объект) больше нет ссылок
поскольку garbage collector делает это довольно непредсказуемо, weakmap не поддерживает итерацию

отличия set от weakset

set данные любого типа
weakset только объекты

weakset не поддерживает итерации, size, keys()

critical path

css is render blocking (because of the cascade)

https://cdn.searchenginejournal.com/wp-content/uploads/2022/01/critical-rendering-path-example-61f038a0a5944-sej.png