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

"схлопывание марджинов" по-английски будет collapsing margins

вот отличная статья про эту особенность:
https://css-tricks.com/what-you-should-know-about-collapsing-margins/

то что я иногда забываю: марджин между двумя элементами по вертикали будет равен большему марджину одного из элементов

типы инпутов о которых я не знала

<input type="date" /> — календарик
<input type="time" /> — времечко
<input type="color" /> — колор пикер

спасибо Вадиму Макееву
https://youtu.be/eLlULhNNthI?t=5592

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

Простой способ применения адаптивных изображений

#frontend #webdev #responsive #perf #jsarticle

upd: это не работает, если элементы находятся во флекс-контейнере

лучший хоткий для девтулзов


https://twitter.com/cjamcl/status/1250700753011793920

очень очень хорошие статьи по верстке

https://every-layout.dev/

все прочитала и по второму разу читаю

JS is backwards-compatible only

HTML and CSS is forwards-compatible only

So what do these nitty-gritty details boil down to? Step back and consider the entire flow of a JS source program:

1. After a program leaves a developer's editor, it gets transpiled by Babel, then packed by Webpack (and perhaps half a dozen other build processes), then it gets delivered in that very different form to a JS engine.

2. The JS engine parses the code to an AST.

3. Then the engine converts that AST to a kind-of byte code, a binary intermediate representation (IR), which is then refined/converted even further by the optimizing JIT compiler.

4. Finally, the JS VM executes the program.

эвристический — не являющийся гарантированно точным, но достаточный для решения задачи

what is closure

closure is when a function remembers and continues to access variables from outside its scope, even when the function is executed in a different scope.

what is hoisting

when all variables declared anywhere in a scope are treated as if they're declared at the beginning of the scope

JS programs are parsed before any execution begins

картинка про скоупы