Как программисту успешно проходить собеседования?

Я Андрей Шопинский — Frontend-разработчик из крупного Российского банка.

⚠️ 5 апреля в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале про Frontend-разработку!

На трансляции будут раскрыты следующие темы:
— Как представить себя и говорить о своих достижениях?
— Какие бывают красные флаги у работодателя?
— Как получить сочный оффер на хороший прайс?

🔥 Ты сможешь задать свои вопросы в прямом ЭФИРЕ!🔥

Подписывайся на канал, чтобы не пропустить!

Реклама. ИП Малев С.И. ИНН: 667101819072. erid: 2VtzqxXYTki

Читать полностью…

🖥 Microsoft представила инструмент для веб-разработки Babylon.js 7.0 с новыми опциями процедурной геометрии

⏩Microsoft представила инструмент для веб-разработки Babylon.js 7.0 с новыми опциями процедурной геометрии для создания сложных веб-игр.

⏩В своем блоге Microsoft объявила, что одним из крупнейших нововведений Babylon.js 7.0 является поддержка процедурной геометрии (Procedural Geometry) под названием Node Geometry, которая должна помочь создавать сложные игровые миры без необходимости создания огромных файлов для 3D-иллюстрации игры. Microsoft заявила, что эта опция позволяет локальному ПК создавать сложный графический контент.

⏩Microsoft открыла доступ к описанию Node Geometry Editor, демо работы Node Geometry и инструментарию новой опции.

⏩Пользователи, которые пытаются загрузить и поиграть в веб-игру с поддержкой Node Geometry, могут просто «загрузить данные Node Geometry объемом в несколько КБ и позволить своему собственному ПК или мобильному устройству создать геометрию». Очевидно, это означает более быструю загрузку сложной веб-игры и повышение общей производительности проекта.

⏩В Babylon.js 7.0 добавлена ещё одна опция, которая широко распространена в стандартных компьютерных и консольных играх. Это поддержка физики рэгдолла (Ragdoll Physics) для анимации тела персонажей. Microsoft заявляет, что эта опция позволит «любому скелетному ассету проявлять значительные изменения одним нажатием кнопки».

📎 Подробнее

@javascriptv

Читать полностью…

🔥 Совсем недавно был выпущен бенчмарк Speedometer 3.0 от Mozilla, Google, Microsoft и Apple для измерения скорости отклика веб-приложений.

Speedometer 3.0, созданный совместными усилиями разработчиков из Mozilla, Google, Microsoft и Apple, представляет собой инструмент для оценки скорости отклика веб-приложений в различных браузерах. В новой версии Speedometer 3.0 были использованы новейшие версии фреймворков Angular, Backbone, jQuery, Lit, Preact, React, React+Redux, Svelte и Vue. Также были применены современные шаблоны проектирования сайтов и веб-приложений, такие как Webpack, Web Components и новые методы работы с DOM.

В бенчмарк добавлены тесты для оценки производительности отрисовки при помощи элемента Canvas, генерации SVG, обработки сложных CSS, работы с очень большими деревьями DOM, а также использования методов, применяемых при редактировании контента в режиме WYSIWYG и работе с новостными сайтами.

▪Github

@javascriptv

Читать полностью…

🖥 DOM3D.js

Кодеры, ловите абсолютно безумный проект: разработчик написал инструмент для просмотра HTML/DOM, который позволяет оценить ваш сайт в 3D.

🖥 GitHub

@javascriptv

Читать полностью…

🚀 fetch-event-stream` 🥳

Крошечная утилита (745b) для обработки событий, отправляемых сервером через API "fetch" и/или WebStreams

🔹 Поддерживает все среды выполнения JS
🔸 Позволяет использовать WebWorker / ServiceWorker
🔹 Принимает AbortController для потоков, которые можно отменить

GitHub: https://github.com/lukeed/fetch-event-stream

@javascriptv

Читать полностью…

🖥 Хорошо ли ты знаешь JavaScript? Проверь себя

Кто-то думает, что JavaScript — это простой язык для несложных скриптов на странице. Но на самом деле современный JS умеет куда больше, чем это было раньше.
Проверь себя, насколько ты знаешь возможности JavaScript.

📎 Ссылка на тест

@javascriptv

Читать полностью…

🖥 Сравнение Bun.js и Node.js

Держите полезную статью, в которой сравнивается Bun.js и Node.js
А перед этим давайте немного поговорим о Bun.js

⏩Вот основные преимущества Bun.js:
— Почти полная совместимость с Node.js/Deno.
— В десятки раз быстрее Node.js и Deno.
— Нативная поддержка JavaScript.
— Богатый набор встроенных Web API.
— Самый эффективный менеджер пакетов.
— Встроенный dev-сервер.
— Встроенный раннер тестов.
— Встроенный бандлер.
— Возможность почти моментального перехода с Node на Bun.

⏩Откуда такая скорость? В первую очередь это современные технологии и тонны большого труда при профилировке и оптимизации.

⏩За счет чего достигается эффект Blazingly Fast, которым так известен Bun.js сегодня?
— Bun написан на языке Zig. Это альтернатива C++ и Rust. Zig предоставляет низкоуровневые возможности для ручной работы с памятью, за счет чего появляется возможность оптимизировать вообще все элементы платформы. К слову, это и было сделано: более 80% составных частей Bun, которые так или иначе уже были реализованы в Node, были переписаны на Zig с максимальной оптимизацией обращений к памяти.

— Bun использует движок JSCore. Конечно, напрямую на производительность это не влияет, поскольку многие бенчмарки вам скажут, что JSC почти идентичен по скорости V8. Однако в данном случае дело вовсе не в производительности. JSCore предоставляет более открытую и удобную платформу для выполнения JS-кода, в отличие от V8, который изолирует этот процесс, поэтому накладные расходы на многие процессы снижаются.

📎 Статья

@javascriptv

Читать полностью…

🖥 Создание приложения Node.js с TypeScript

⏩Полезная статья о том, как настроить TypeScript для создания приложений Node.js с pnpm, Node.js, TypeScript и ES Modules для удобной разработки.

План статьи
Понимание инструментов
Добавление файлов конфигурации
— package.json
— "type": "module" в package.json
— Зависимости
— Конфигурация TypeScript
— .gitignore
— Каталог src
Добавление скриптов
— Скрипт build
— Скрипт start
— Скрипт dev
—— tsc --watch
—— node --watch
—— run "/dev:/"

📎 Статья

@javascriptv

Читать полностью…

🖥 Понимание среды выполнения JavaScript

Хорошая статья, описывающая, как JavaScript работает под капотом. Описывается, как во всём этом процессе участвует куча, стек вызовов, цикл событий и т.д.
Особенно это актуально освежить перед собеседованием, скорее всего пригодится.

Некоторые факты из статьи:

⏩JavaScript имеет уникальную модель выполнения, основанную на движке.

⏩В среде выполнения JavaScript есть два основных компонента: куча (Heap) и стек вызовов (Call Stack).

⏩Куча предоставляет место для хранения переменных и экземпляров, создаваемых программой.

⏩Стек вызовов играет важную роль в выполнении кода, записывая точку в программе, где выполняются операции.

⏩JavaScript использует асинхронную модель для выполнения операций, которые могут занять непредсказуемое количество времени.

⏩Web API, Очередь Обратных Вызовов и Цикл Событий обеспечивают неблокирующее поведение JavaScript.

📎 Статья

@javascriptv

Читать полностью…

📌Годный контент по CSS и какие в нём появились нововведения

О чём говорится в статье:
🔘В CSS появились новые единицы измерения области просмотра, такие как vh, vw, vmin и vmax.

🔘Эти единицы не всегда учитывают особенности мобильных устройств, что приводит к проблемам с адаптивным дизайном.

🔘Были определены новые состояния: большой экран просмотра и малый экран просмотра, и введены новые единицы: svh и svw.

🔘Тригонометрические функции стали доступны прямо в CSS, что упрощает управление функциями трансформации и генерацию случайных значений.

🔘Трансформации теперь можно разделять и применять по отдельности, что делает код более компактным.

🔘Продвинутый синтаксис nth-child позволяет выбирать дочерние элементы по порядковому номеру и добавлять класс элемента.

🔘Ключевое слово @scope позволяет создавать пространства имён и задавать стили с ограниченной областью видимости.

📎 Статья

Enjoy)

@javascriptv

Читать полностью…

🖥 Факт дня — метод String.fromCharCode() в JS

⏩Статический метод String.fromCharCode() возвращает строку, созданную из указанной последовательности значений единиц кода UTF-16.

Синтаксис

String.fromCharCode(num1[, ...[, numN]]

num1, ..., numN
— Последовательность чисел, являющихся значениями единиц кода UTF-16. Диапазон составляет от 0 до 65535 (0xFFFF). Числа больше 0xFFFF усекаются. Проверка достоверности не производится.

Метод String.fromCharCode() возвращает примитивную строку, а не объект String.

Поскольку метод fromCharCode() является статическим методом объекта String, вы всегда должны использовать его как String.fromCharCode(), а не как метод созданного вами экземпляра String.


⏩Пример использования метода fromCharCode().

String.fromCharCode(65, 66, 67);  // "ABC"

📎 Полная таблица UTF-16


⏩Как заставить его работать с большими значениями

Хотя большинство распространённых значений Юникода может быть представлено одним 16-битным числом (как ожидалось на ранней стадии стандартизации JavaScript) и метод fromCharCode() может использоваться для возврата одного символа для самых распространённых значений (точнее, значений UCS-2, которые являются подмножеством самых распространённых символов UTF-16), для работы со всеми допустимыми значениями Юникода (занимающими до 21 бита) одного метода fromCharCode() недостаточно. Поскольку большие кодовые точки используют (самое меньшее) два «суррогатных» числа для представления одного символа, для возврата таких пар можно использовать метод String.fromCodePoint() (являющийся частью черновика ES6) и, таким образом, адекватно представлять эти символы.

@javascriptv

Читать полностью…

🖥 3D Scrolling Gallery/Timeline - 3D-прокрутка, выполненная с помощью SVG, CSS и библиотеки GSAP.js

https://codepen.io/creativeocean/pen/gOvYEgq

@javascriptv

Читать полностью…

🖥 Выполнение JavaScript кода, хранящегося в строке: методы

▶️Итак, если коротко, то для того чтобы выполнить JavaScript-код, записанный в виде строки, можно воспользоваться функцией eval():

eval("alert('Выполнено!');"); 

В результате появится всплывающее окно с текстом "Выполнено!".

Но будьте осторожны: функция eval() может выполнить любой скрипт, который ей будет предоставлен.

Функция eval() обладает большими рисками для безопасности. Важно убедиться в том, что JavaScript-строка правильно обработана перед ее использованием в eval(), так как инъекции кода могут иметь серьезные последствия.


Альтернативы для запуска строк JavaScript

▶️Использование функции конструктора `Function`

let func = new Function("return 'Привет, мир!';");
func(); // Привет, мир!

Этот метод умеет обходить внешний контекст.

▶️Модуль `vm` в Node.js
В Node.js существует модуль vm, который предоставляет отдельный контекст для выполнения JavaScript-строк.

const vm = require('vm');
const script = new vm.Script("console.log('Привет из VM');");
script.runInThisContext(); // Привет из VM

▶️Безопасное выполнение с помощью `vm2` в Node.js
vm2 предоставляет ограниченное окружение для запуска ненадежного кода.

const { VM } = require('vm2');
const vm = new VM();
vm.run("console.log('Выполнение в песочнице');"); // Выполнение в песочнице

Не забудьте следить за обновлениями в части безопасности и обратите внимание на устаревшие API в vm2, чтобы избежать проблем.

▶️Запуск скриптов с помощью jQuery
Ни одна замена не сможет заменить добрые старые теги <script>, которые можно использовать для запуска JavaScript-строк с помощью jQuery.

let code = "$('body').append('<p>Привет от jQuery!</p>');";
$('<script>').attr('type', 'text/javascript').text(code).appendTo('body'); // Привет от jQuery!

@javascriptv

Читать полностью…

🖥 Релиз Restate 0.8

🌟 Состоялся релиз системы для создания отказоустойчивых рабочих процессов Restate 0.8. Код проекта опубликован на GitHub под лицензией Put Restate under Business Source License от Restate Software.

Согласно пояснению разработчиков проекта, Restate отлично подходит для создания:
⏩рабочих процессов типа Lambda как код (Lambda Workflows as Code)
⏩транзакционных обработчиков RPC
⏩обработки событий с помощью Kafka

В версии Restate 0.8 разработчики уделили большое внимание доработке API, учтя отзывы пользователей, чтобы уменьшить трудности при создании сервисов Restate. Также там добавлены комбинаторы промисов (Promise combinators), которые позволяют детерминированно комбинировать промисы. Например, если вы хотите дождаться вызова службы A или вызова службы B, то Restate позаботится о записи того, какой из промисов был выполнен первым, и в конечном итоге воспроизведёт этот выбор, когда это необходимо. В новой версии проекта доступны все комбинаторы стандартной библиотеки JavaScript.

Всё это звучит многообещающе, посмотрим)

🖥 GitHub

@javascriptv

Читать полностью…

SCSS Washing machine

Стиральная машинка на HTML и SCSS.

https://codepen.io/Arkellys/pen/YoYNve

Читать полностью…

🖥 Основные тенденции развития JavaScript

Каковы основные тренды в JavaScript? На какие технологии и инструменты стоит обратить пристальное внимание?
Держите годный список от руководителя обучения JavaScript в EPAM Андрея Гордийчука — вот они, актуальные тренды:

⏩Переход к новым фреймворкам фронтенда
Одностраничные приложения (SPAs) и соответствующие фреймворки JavaScript, такие как React, Angular и Vue.js, все еще остаются популярными. Существует четкая тенденция перехода приложений с обработки на стороне клиента (CSR) на отрисовку на стороне сервера (SSR). Это требует от инженеров изучения новых фреймворков, таких как Svelte, Solid.js и Qwik.

⏩Производительность и рендеринг
Серверный рендеринг (SSR) и генерация статических сайтов (SSG) конкурируют в улучшении производительности и SEO. Последние несколько лет шаблоны рендеринга были относительно простыми, однако все более популярными становятся новые подходы, такие как Partial Hydration, Progressive Hydration и Island Architectures (Astro).

⏩Дизайн-фреймворки и дизайн-системы
Тенденции в дизайне пользовательского интерфейса (UI) включают:
— Minimal flat design и инструменты;
— Neo-brutalism on UI (контрастные цвета, мультяшная графика);
— Motion design.
Со стороны разработчиков такие инструменты, как Tailwindcss (API для вашей системы проектирования), PureCSS и Primer становятся популярнее, чем Bootstrap.

⏩Создание инструментов и монорепозиториев
На основе вышеупомянутых результатов, автоматизация процессов сборки, тестирования и развертывания приложений также будет претерпевать изменения. У Webpack более устоявшаяся экосистема и широкий спектр доступных плагинов, что делает его подходящим для более сложных проектов, но новые инструменты Vite и Turbopack становятся чрезвычайно востребованными благодаря своему более быстрому подходу встроенного модуля-скрипта и более простой конфигурации (что делает их более удобными в использовании), мгновенным обновлениям без полной пересборки, меньшим размером пакета.

📎 Читать подробнее

@javascriptv

Читать полностью…

Устроиться фронтендером в Яндекс за выходные

18–19 мая устраиваем Weekend Offer Frontend. До 15 мая решите одну задачу в Контесте, 18-го пройдите два собеседования, а 19 мая познакомьтесь с командами и получите офер.

В мероприятии участвуют 13 команд: Поиск, E-com Поиска, Реклама, Бизнес, Cloud, 360, Игры, Умный дом, Путешествия, Аренда, Недвижимость, Авто.ру и Авто.ру Бизнес. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным.

Нанимаем в офисы по всей России, помогаем релоцироваться внутри страны.

Узнать подробности и зарегистрироваться можно здесь.

Реклама. ООО "Яндекс". ИНН 7736207543

Читать полностью…

🖥 Список тестовых заданий на позицию JS-разработчика

⏩ Тестовое задание на позицию стажера-бекендера в юнит Авто (archived)

⏩ Тестовое задание для Javascript разработчика (JS, jQuery)

⏩ Тестовое задание на позицию cтажер-разработчик javascript HTML, CSS, JS)

⏩ JavaScript Developer (JS, Vue.js)

⏩ Frontend Developer (TypeScript/JavaScript, Angular/React/Vue)

Отличный вариант вспомнить основы перед собеседованием, пользуйтесь)

@javascriptv

Читать полностью…

🖥 Какие темы освещаются в статье?

⏩Вы же знаете про HTMX?
HTMX — это небольшая, свободная от зависимостей библиотека JavaScript, позволяющая создавать передовые пользовательские интерфейсы с лёгкостью языка разметки. Она предоставляет доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events напрямую в HTML с помощью атрибутов. Это стало переломным моментом для разработчиков, поскольку позволяет им добиться интерактивности (которую даёт JS), но непосредственно из HTML разметки.

И вот как раз о HTMX и идёт речь в этой статье

⏩Вот темы, которые освещаются:
• Установка HTMX
• Ajax-запросы с помощью HTMX
• Триггер запроса
• Модификаторы триггеров
• Фильтры триггеров
• Логирование и события в HTMX
• и ещё много всего

📎 Статья

P.S: Как думаете, какие перспективы у этой технологии? Из каких сфер HTMX может полностью вытеснить JS?

@javascriptv

Читать полностью…

🖥 Асинхронность в JS

Хорошая статья о том, как реализована асинхронность в JavaScript, когда и для чего её использовать

Содержание статьи:
⏩Синхронный код и его проблемы
⏩Асинхронный код
⏩Стек вызовов
⏩Цикл событий
⏩Колбэки
⏩Промисы (Promise)
⏩Асинхронные функции
— Связка async/await
— Плюсы async/await

Пару фактов из статьи:
⏩Асинхронный код включает функции обратного вызова (колбэки), которые вызываются в ответ на события.

⏩Ад колбэков — проблема, связанная с использованием большого количества обратных вызовов в асинхронном коде.

⏩Промисы — объект-обёртка для асинхронного кода, который содержит состояние и работает аналогично колбэкам.

⏩Асинхронные функции — функции, которые возвращают промисы и могут быть вызваны с помощью ключевого слова await.

⏩Связка async/await позволяет писать более чистый и короткий код, а также обрабатывать ошибки с try-catch.

⏩В Node.js и некоторых браузерах есть setImmediate(), который выполняет почти то же, что и setTimeout() с нулевым таймером.

⏩Promise.all() и Promise.race() используются для ожидания выполнения всех запросов или ожидания выполнения первого запроса из списка.

⏩Для обхода асинхронных итерируемых сущностей можно использовать for await...of.

📎 Статья

@javascriptv

Читать полностью…

Исследуешь айтишную тему, но пока нет большого опыта? Соревнуйся с равными и будь на код впереди в «Цифровом марафоне» Сбера и «Школы 21»! Три счастливчика отправятся отдыхать на премиум-курорты и прокачивать знания в СберУниверситете.

Конкурс проводят по всей России, а минимальный возраст для участия — от 18 лет. Отличная возможность оценить свои навыки и получить советы для дальнейшего развития. А главное — лучшие в своих категориях отправятся на очный финал в Москву с церемонией награждения.

Для успеха нужно пройти онлайн-игру на проверку логики и памяти, тестирование в соответствии с твоим уровнем подготовки и цифровой диктант. Здесь ты выбираешь язык, на котором будешь писать код. Заработай как можно больше очков, чтобы попасть в суперфинал, расправиться с более сложными задачами и выиграть главные призы!

Хочу участвовать!

Читать полностью…

Объект URL в JavaScript: полный разбор

⏩Итак, создать объект URL можно 2 способами:

— Конструктор URL():

const url = new URL("https://www.example.com/path?query=123#hash");

— Использование window.location:

const currentUrl = new URL(window.location.href);

⏩Из чего состоит URL
Вот некоторые составляющие URL :
— href: полный URL.
— protocol: протокол, например https:.
— host: хост (доменное имя и порт).
— hostname: только доменное имя.
— port: только порт.
— pathname: путь после доменного имени и порта.
— search: строка запроса, начинающаяся с ?.
— hash: якорь, начинающийся с #.
— origin: протокол + домен + порт.

⏩Допустим, у нас есть такой URL, включающий все эти части:

https://www.example.com:8080/path/page.html?query=123#section

⏩Тогда объект URL для него будет выглядеть так:

const url = new URL("https://www.example.com:8080/path/page.html?query=123#section");

⏩А если мы попытаемся вывести значения разных свойств, получим следующее:

console.log(url.href);     // https://www.example.com:8080/path/page.html?query=123#section
console.log(url.protocol); // https:
console.log(url.host);     // www.example.com:8080
console.log(url.hostname); // www.example.com
console.log(url.port);     // 8080
console.log(url.pathname); // /path/page.html
console.log(url.search);   // ?query=123
console.log(url.hash);     // #section
console.log(url.origin);   // https://www.example.com:8080

⏩Ещё вы можете изменить любую часть URL, изменяя соответствующее свойство.

url.search = "?newquery=456";
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456#section

⏩Объект URLSearchParams в сочетании с объектом URL упрощает работу с параметрами запроса.

const params = new URLSearchParams(url.search);
params.set("newparam", "value");
url.search = params.toString();
console.log(url.href); 
// https://www.example.com:8080/path/page.html?newquery=456&newparam=value

@javascriptv

Читать полностью…

🔥 Monolith - это инструмент CLI для сохранения полных веб-страниц в виде отдельных HTML-файлов. Он объединяет все ресурсы в один файл, обеспечивая автономный доступ и простое архивирование.

▪ Github

@javascriptv

Читать полностью…

🖥 Полезная статья о функциях высшего порядка в Javascript

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

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

Функции высшего порядка полезны по нескольким причинам:

⏩Абстракция: Инкапсулируя общие паттерны и операции, функции высшего порядка позволяют писать более абстрактный и многократно используемый код. Это облегчает сопровождение кодовой базы, а также рассуждения о ней.

⏩Композиция: Функции высшего порядка позволяют создавать сложные операции путём объединения простых функций. Это делает ваш код более модульным, гибким и лёгким для понимания.

⏩Лаконичность: Функции высшего порядка могут сделать код более лаконичным и выразительным, сократив объем кода, который вам нужно написать. Это облегчает написание и понимание сложной логики, а также отладку кода.

📎 Статья

@javascriptv

Читать полностью…

🖥 Несколько супер-полезных однострочников на JS

⏩Проверить, является ли путь относительным

const isRelative = (path) => !/^([a-z]+:)?[\\/]/i.test(path);

isRelative('/foo/bar/baz'); // false
isRelative('C:\\foo\\bar\\baz'); // false
isRelative('foo/bar/baz.txt'); // true
isRelative('foo.md'); // true

⏩Проверить, является ли строка шестнадцатеричным цветом

const isHexColor = (color) => /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

isHexColor('#012'); // true
isHexColor('#A1B2C3'); // true
isHexColor('012'); // false
isHexColor('#GHIJKL'); // false

⏩Подсчитать количество разных дней между двумя датами

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839

⏩Скопировать в буфер обмена

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

@javascriptv

Читать полностью…

🖥 Немного о замыканиях в Javascript

⏩Замыкание — это функция, которая имеет доступ к переменным, присутствующим в ее цепочке областей видимости, даже если внешняя функция перестает существовать.

Чтобы понять суть замыканий, мы сначала рассмотрим их характеристики:
— Даже если внешняя функция перестает существовать, замыкание по-прежнему имеет доступ к ее переменным.
— Замыкания не имеют доступа к параметру args своей внешней функции.

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

Чтобы увидеть это в действии, мы выполним вот эту функцию buttonProps:

let buttonProps = (borderRadius) => {
  const createVariantButtonProps = (variant, color) => {
    const newProps = {
      borderRadius,
      variant,
      color
    };
    return newProps;
  }
  return createVariantButtonProps;
}

let primaryButton = buttonProps("1rem"); 

Вызов функции buttonProps вернет нам другую функцию, которая является нашим замыканием.

Теперь давайте выполним это замыкание:

const primaryButtonProps = primaryButton("primary", "red");

В результате выполнения замыкание возвращает следующий объект:

{
   "borderRadius":"1rem",
   "variant":"primary",
   "color":"red"
}

⏩Итак, почему замыкания по-прежнему имеют доступ к переменным, которые определены вне их области видимости, даже если внешняя функция перестает существовать (например, borderRadius)?

⏩Ответ прост: замыкания не хранят статические значения. Вместо этого они хранят ссылки на переменные, находящиеся внутри цепочки областей видимости. Таким образом, даже если внешняя функция умирает, внутренняя функция, то есть замыкание, по-прежнему имеет доступ к родительским переменным.

📎 Читать подробнее

@javascriptv

Читать полностью…

🖥 Асинхронные итераторы в JavaScript

▶️Итак, кейс.
Мы работаем с Node.js, и нам нужно прочитать файл, строка за строкой. В Node есть API для такого типа функций, который называется readLine (полную документацию можно найти здесь).

Это API событий, которые вы можете прослушивать следующим образом:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./file.txt'),
  crlfDelay: Infinity
})

reader.on('line', (line) => console.log(line))

И допустим, у нас есть простой файл:

line 1
line 2
line 3

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


▶️Решение
В дополнение к API событий readline также предоставляет асинхронный итератор. Это означает, что вместо чтения строки через слушателей в событии line мы будем читать строку при помощи нового способа использования ключевого слова for.

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

async function readLine (files) {
  for (const file of files) {
    const line = await readFile(file) // Imagine readFile is our cursor
    console.log(line)
  }
}

Однако благодаря асинхронным итерациям (например, readline) мы можем сделать так:

const fs = require('fs')
const readline = require('readline')
const reader = readline.createInterface({
  input: fs.createReadStream('./xpto.txt'),
  crlfDelay: Infinity
})

async function read () {
  for await (const line of reader) {
    console.log(line)
  }
}

read()

Обратите внимание, что теперь мы используем новое определение for — for await (const x of y).

📎 Читать подробнее

@javascriptv

Читать полностью…

It's just CSS

Эффект при наведении на картинку, выполненный на чистом CSS, без использования JavaScript.

https://codepen.io/tiffachoo/pen/wvyXRzL

Читать полностью…

⚡️ Создание анимированной боковой панели с помощью HTML, CSS и JavaScript

Github

@javascriptv

Читать полностью…

🖥 JavaScript однопоточный или многопоточный? Ставим точку

Полезная статья для лучшего понимания JavaScript.
В ней описывается:
— внутреннее устройство host-среды
— расширяемость и встраиваемость
— асинхронность
— инструменты организации многопоточности
— и ещё много всего

📎 Статья
📎 Вот ещё годное видео в тему, доказательство мультипоточности JS

@javascriptv

Читать полностью…