Какой будет вывод?
Anonymous Quiz
8%
1 2, 3 3 и 6 4
22%
1 2, 2 3 и 3 4
45%
1 undefined, 2 undefined, 3 undefined и 4 undefined
26%
1 2, undefined 3 и undefined 4
Пояснение к предыдущему посту
Первым аргументом, который получает метод reduce, является аккумулятором, в данном случае x. Второй аргумент - это текущее значение, y. С помощью метода reduce мы выполняем функцию обратного вызова для каждого элемента в массиве, что в конечном итоге может привести к единственному значению.
В этом примере мы не возвращаем никаких значений, мы просто регистрируем значения аккумулятора и текущее значение.
Значение аккумулятора равно ранее возвращенному значению функции обратного вызова. Если вы не передадите необязательный аргумент initialValue методу reduce, аккумулятор будет равен первому элементу при первом вызове.
При первом вызове аккумулятор (x) равен 1, а текущее значение (y) равно 2. Мы не возвращаемся из функции обратного вызова, мы регистрируем аккумулятор и текущее значение: 1 и 2 регистрируются.
Если вы не возвращаете значение из функции, она возвращает значение undefined. При следующем вызове аккумулятор равен undefined, а текущее значение равно 3. undefined и 3 будут зарегистрированы.
При четвертом вызове мы снова не возвращаемся из функции обратного вызова. Аккумулятор снова равен undefined, а текущее значение равно 4. undefined и 4 будут зарегистрированы.
В этом примере мы не возвращаем никаких значений, мы просто регистрируем значения аккумулятора и текущее значение.
Значение аккумулятора равно ранее возвращенному значению функции обратного вызова. Если вы не передадите необязательный аргумент initialValue методу reduce, аккумулятор будет равен первому элементу при первом вызове.
При первом вызове аккумулятор (x) равен 1, а текущее значение (y) равно 2. Мы не возвращаемся из функции обратного вызова, мы регистрируем аккумулятор и текущее значение: 1 и 2 регистрируются.
Если вы не возвращаете значение из функции, она возвращает значение undefined. При следующем вызове аккумулятор равен undefined, а текущее значение равно 3. undefined и 3 будут зарегистрированы.
При четвертом вызове мы снова не возвращаемся из функции обратного вызова. Аккумулятор снова равен undefined, а текущее значение равно 4. undefined и 4 будут зарегистрированы.
Вёрстка — это не тупо
Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.Мб кому-то этого и не хватало))
UI / UX / Code, 2018-2022г
Ссылка
#статьи
Небольшая сводка ошибок которые встречались во Frontende и Вёрстке за время работы с разными проектами. Конечно это очень малая часть и только те ошибки которые постоянно повторяются. Но всё же давайте пробежимся хотя бы по ним.Мб кому-то этого и не хватало))
UI / UX / Code, 2018-2022г
Ссылка
#статьи
Event Loop. Мифы и реальность
В сети есть довольно большое количество публикаций про Event loop и как он работает. Новые статьи появляются на популярных ресурсах и по сей день, в том числе на Хабре. Однако, к сожалению, далеко не вся информация, представленная в этих материалах является проверенной или достоверной. В связи с чем, само понятие обросло рядом мифов и догадок. Порой, даже опытному разработчику требуется немало внимания и опыта, чтобы понять, где истина, а где, чистой воды, вымысел.
В этой статье попробуем разобраться, где же, все таки, истина. Если вам кажется, что в статье имеется ошибка, неточность или чего-то не хватает, оставляйте свои комментарии, и мы попробуем совместно найти ответы на все возникающие сомнения и вопросы.
Ссылка
#js
В сети есть довольно большое количество публикаций про Event loop и как он работает. Новые статьи появляются на популярных ресурсах и по сей день, в том числе на Хабре. Однако, к сожалению, далеко не вся информация, представленная в этих материалах является проверенной или достоверной. В связи с чем, само понятие обросло рядом мифов и догадок. Порой, даже опытному разработчику требуется немало внимания и опыта, чтобы понять, где истина, а где, чистой воды, вымысел.
В этой статье попробуем разобраться, где же, все таки, истина. Если вам кажется, что в статье имеется ошибка, неточность или чего-то не хватает, оставляйте свои комментарии, и мы попробуем совместно найти ответы на все возникающие сомнения и вопросы.
Ссылка
#js
Хотел напомнить вам что у нас есть чат https://t.me/coderoll_chat
Telegram
CodeRoll Чат | Веб-Мастерская
Чат веб-разработки и веб-дизайна. В основном обсуждаем JavaScript, HTML, CSS, PHP, Python, Figma. А бывает и всякая дичь творится :)
Правила: https://telegra.ph/Pravila-chata-CodeRoll-07-17
Канал: https://t.me/joinchat/AAAAAEriu_n2fqTcid6pdg
Правила: https://telegra.ph/Pravila-chata-CodeRoll-07-17
Канал: https://t.me/joinchat/AAAAAEriu_n2fqTcid6pdg
// index.js
console.log('running index.js');
import { sum } from './sum.js';
console.log(sum(1, 2));
// sum.js
console.log('running sum.js');
export const sum = (a, b) => a + b;
Пояснение к предыдущему посту
С ключевым словом import все импортируемые модули являются pre-parsed. Это означает, что импортированные модули запускаются первыми, код в файле, который импортирует модуль, исполняется после.
В этом разница между require() в CommonJS и import! С помощью require() вы можете загружать зависимости по требованию во время выполнения кода. Если бы мы использовали require вместо import, в консоль были бы записаны running index.js, running sum.js, 3.
В этом разница между require() в CommonJS и import! С помощью require() вы можете загружать зависимости по требованию во время выполнения кода. Если бы мы использовали require вместо import, в консоль были бы записаны running index.js, running sum.js, 3.
Переход с Vue-CLI и Webpack на Vite: ускоряем разработку Vue 3
Vue.js - один из самых популярных JavaScript-фреймворков, который используется для создания динамических пользовательских интерфейсов. С появлением Vue 3, разработчики получили еще больше возможностей для создания мощных и эффективных приложений. Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.
Ссылка
#статьи
Vue.js - один из самых популярных JavaScript-фреймворков, который используется для создания динамических пользовательских интерфейсов. С появлением Vue 3, разработчики получили еще больше возможностей для создания мощных и эффективных приложений. Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.
Ссылка
#статьи
Сокращение типизации с помощью Util Types в Typescript
В данной публикации рассмотрим как можно сократить количество типов/интерфейсов в Typescript, сделать их более лаконичными и сэкономить время себе и своей команде. Все это будем делать с помощью Util Types - специальных типов, которые предоставляет Typescript.
Ссылка
#ts
В данной публикации рассмотрим как можно сократить количество типов/интерфейсов в Typescript, сделать их более лаконичными и сэкономить время себе и своей команде. Все это будем делать с помощью Util Types - специальных типов, которые предоставляет Typescript.
Ссылка
#ts
console.log(Number(2) === Number(2))
console.log(Boolean(false) === Boolean(false))
console.log(Symbol('foo') === Symbol('foo'))
Какой будет вывод?
Anonymous Quiz
44%
true, true, false
20%
false, true, false
10%
true, false, true
26%
true, true, true
Пояснение к предыдущему посту
Каждый Symbol совершенно уникален. Цель аргумента, переданного Symbol, состоит в том, чтобы дать Symbol описание. Значение Symbol не зависит от переданного аргумента. Когда мы проверяем равенство, мы создаем два совершенно новых Symbol: первый Symbol('foo') и второй Symbol('foo'). Эти два значения уникальны и не равны друг другу, Symbol('foo') === Symbol('foo') возвращает false.
HTML: плохие стороны
Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности, с точки зрения как accessibility, так и usability.
Ссылка
#html
Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности, с точки зрения как accessibility, так и usability.
Ссылка
#html
Утечки памяти, которые не утечки
Статью я захотел написать после работы над одним конкретным багом, который со всех точек зрения напоминал классическую утечку памяти, но на практике оказался чем то совершенно другим. Я нигде не встречал описание такого поведения и поэтому решил этой информацией поделиться.
В один прекрасный день боевое сопровождение приходит с ужасной проблемой — память в контейнерах Node.js течет, сервисы падают с OOM каждый день, все пропало!
Ссылка
#статьи
Статью я захотел написать после работы над одним конкретным багом, который со всех точек зрения напоминал классическую утечку памяти, но на практике оказался чем то совершенно другим. Я нигде не встречал описание такого поведения и поэтому решил этой информацией поделиться.
В один прекрасный день боевое сопровождение приходит с ужасной проблемой — память в контейнерах Node.js течет, сервисы падают с OOM каждый день, все пропало!
Ссылка
#статьи
async function getData() {
return await Promise.resolve('I made it!');
}
const data = getData();
console.log(data);Какой будет вывод?
Anonymous Quiz
32%
"I made it!"
25%
Promise {<resolved>: "I made it!"}
33%
Promise {<pending>}
11%
undefined
Асинхронная функция всегда возвращает обещание. await все еще должен ждать разрешения обещания: ожидаемое обещание возвращается, когда мы вызываем getData(), чтобы установить data равным ему.
Если бы мы хотели получить доступ к разрешенному значению "I made it", мы могли бы использовать метод .then() для data:
data.then(res => console.log(res))
Тогда это бы вывело "I made it!"
Если бы мы хотели получить доступ к разрешенному значению "I made it", мы могли бы использовать метод .then() для data:
data.then(res => console.log(res))
Тогда это бы вывело "I made it!"
Прогресс WebAssembly и будущее веба. Быстрые интерфейсы, пример Figma
WebAssembly (Wasm) — это бинарный формат для безопасного и эффективного выполнения портативных программ в стековой виртуальной машине (в браузере или на сервере). Как и ASM.js, представляет собой низкоуровневый код. Есть ещё WAT — WebAssembly Text, человекочитаемая версия бинарного кода.
Ссылка
#статьи
WebAssembly (Wasm) — это бинарный формат для безопасного и эффективного выполнения портативных программ в стековой виртуальной машине (в браузере или на сервере). Как и ASM.js, представляет собой низкоуровневый код. Есть ещё WAT — WebAssembly Text, человекочитаемая версия бинарного кода.
Ссылка
#статьи
Банки.ру: от монолита до микрофронтендов
В статье хочу поделиться нашей историей ухода от монолита к микрофронтендам. В Банки.ру большой отдел веб-разработки, за последнее время мы сильно выросли, ежедневно катим десятки релизов на прод. Расскажу, как мы относительно быстро внедрили микрофронтенды и перешли на архитектуру, которая позволила сократить время доставки обновлений на прод с двух дней до нескольких часов.
Ссылка
#статьи
В статье хочу поделиться нашей историей ухода от монолита к микрофронтендам. В Банки.ру большой отдел веб-разработки, за последнее время мы сильно выросли, ежедневно катим десятки релизов на прод. Расскажу, как мы относительно быстро внедрили микрофронтенды и перешли на архитектуру, которая позволила сократить время доставки обновлений на прод с двух дней до нескольких часов.
Ссылка
#статьи