JavaScript Daily | Frontend
319 subscribers
354 photos
151 links
Всё самое интересное из мира веб-разработки за сегодня.

Для связи - art.diontev@ya.ru
Download Telegram
JavaScript | Практика #87

Каков правильный синтаксис JavaScript для открытия нового окна?
Anonymous Quiz
JavaScript | Теория #19

Внешний файл JavaScript должен содержать тег <script>.
Anonymous Quiz
50%
true
50%
false
JavaScript | Практика #88
#js_practice_medium
JavaScript | Практика #88

Какой будет вывод?
Anonymous Quiz
49%
"I made it!"
26%
Promise {<resolved>: "I made it!"}
21%
Promise {<pending>}
4%
undefined
JavaScript | Практика #89
#js_practice_medium
Анимация типографии с повторением

Интересный эксперимент с анимацией контента, где слова дублируются несколько раз.

Демо - http://tympanus.net/Development/RepetitiveTypography/
Производительность JavaScript в 2021

Статья поможет немного разобраться в работе компиляторов и интерпретаторов. Также информация может заинтересовать тех, у кого JavaScript — первый язык программирования. Автор поднимает вопросы Runtime производительности.
Новый рабочий процесс W3C из будущего

На сайте Консорциума уже опубликован документ, датированный 2 ноября этого года. Речь идет об основном документе, регламентирующем рабочий процесс W3C — «стандарте, по которому делают стандарты».
JavaScript | Практика #89
#js_practice_hard
JavaScript | Практика #89

Как мы можем вывести в лог значения, которые закомментированы после оператора console.log?
Anonymous Quiz
21%
game.next("Yes").value и game.next().value
41%
game.next.value("Yes") и game.next.value()
31%
game.next().value и game.next("Yes").value
7%
game.next.value() и game.next.value("Yes")
Подключение телеграм бота к гугл таблицам

Пишем бота в гугл скриптах на JavaScript. Статья для начинающих свой путь в гугл скриптах или телеграм ботах.
Async/await в TypeScript

Вспомним, как работают Promise, чем хорош async / await и применим их в примерах на TypeScript.
JavaScript | Практика #90
#js_practice_medium
JavaScript | Практика #90

Что будет в консоли?
Anonymous Quiz
20%
[1, 2, 4]
18%
[1, 2, 3, 4]
43%
[4, 1, 2, 3]
18%
[ 1, 2, 3, '-1': 4 ]
The New CSS Reset

В последние годы CSS приобрел ряд новых функций, позволяющих нам сбросить CSS более лаконично, чем раньше. Более того, теперь, в 2021 году, все
эти функции CSS имеют широкую поддержку во всех популярных браузерах. Автор предлагает посмотреть на его вариант современного "ресета" CSS.
JavaScript | Практика #91
#js_practice_easy
JavaScript | Практика #91

Какие из этих обработчиков сработают?
Anonymous Quiz
2%
Первый и третий
30%
Первый, второй и третий
30%
Второй и третий
37%
Только третий
Обнаружение ввода определенного текста с помощью HTML и CSS

Разбор трюка с примером кода.

Демо - https://codepen.io/propjockey/pen/NWjWwLo

Поставьте фокус на окне страницы, нажмите [Alt] + c (windows) / [Control] + [Alt] + c (osx) и введите "wow!".
#js_note

Разница между императивным и декларативным стилем программирования

Императивный стиль

Чтобы лучше понять разницу между императивным и декларативным стилей, давайте напишем небольшую функцию для нахождения всех нечётных элементов в массиве. Сперва сделаем это императивно:

function onlyOdd(array) {
let result = []

for (const element of array) {
if (element % 2 !== 0) {
result.push(element)
}
}

return result
}

То есть наша императивная функция — это набор конкретных команд, которые выполняются последовательно одна за другой.

Декларативный стиль

Теперь попробуем ту же функцию написать декларативно, то есть не вдаваясь в детали:

function onlyOdd(array) {
return array.filter((element) => element % 2 !== 0)
}

Мы говорим, что нам надо отфильтровать массив по указанному критерию. При этом нам не важно, как будет осуществлена эта фильтрация. Нам даже не важно, кто этим будет заниматься — нам лишь важно, какой массив на выходе мы хотим получить.

Разница между этими подходами — в деталях реализации. В первом случае детали описываем мы сами, во втором они от нас скрыты.