JavaScript по традиции известен как однопоточный язык. Т.е код выполняется последовательно, и одновременное выполнение нескольких задач может быть проблематичным. Если код сталкивается с тяжелыми вычислительными задачами, это может привести к задержкам и замедлению интерфейса юзера. Поэтому один поток не для каких-либо интенсивных вычислений или обработки больших объемов данных.

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

Здесь помогают SharedArrayBuffer и Atomics.

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

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

Меня зовут Сергей Чикуёнок. Я ведущий разработчик в ОК. В этом материале я расскажу об основных этапах работы с анимацией для браузеров, ключевых сложностях и вариантах их нативной оптимизации. 

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

Весной на HolyJS Никита Дубко показал, что умеют современные PWA: как изменился их внешний вид, насколько они интегрированы в операционные системы и в каких случаях они решают пользовательские задачи не хуже нативных приложений.

Делимся расшифровкой доклада и видеозаписью. Повествование будет от лица Никиты.

Хотите узнать, как ускорить выполнение JavaScript в веб-приложениях? В этой статье я подробно расскажу о веб-воркерах, шине данных между основным потоком и веб-воркерами, и как это можно применить в Angular, React и Vue, используя мой npm пакет web-worker-bus. Вы узнаете, как вынести тяжелые вычисления в отдельные потоки, организовать обмен данными, и как это все собрать в единую архитектуру. Примеры кода, инструкции и советы внутри помогут вам сделать ваши проекты быстрее и эффективнее с помощью этого инструмента. Освоение этого подхода и использование web-worker-bus может стать значимым улучшением в ваших проектах. Загляните, если интересуетесь оптимизацией JavaScript и хотите узнать, как мой пакет может вам в этом помочь!

Для React разработано большое количество библиотек, которые позволяют без проблем работать даже с очень сложной анимацией, да и не только с ней. В подборку мы постарались добавить те из них, что способны в разы повысить скорость и эффективность работы специалиста. В статье собраны далеко не все библиотеки, которые заслуживают внимания, поэтому, если у вас есть собственный «фаворит», расскажите об этом инструменте в комментариях. Что же, приступим!

В довольно длинном и скучном посте описывается пример аутентификации пользователя в веб-приложениях при помощи биометрических средств (FaceID, отпечаток пальца), встроенных в мобильные телефоны. Код проекта - тут, рабочее демо - тут. Пример написан на чистом JavaScript и может быть отдебажен как на бэке (nodejs), так и в браузере.

В этой статье описаны основные этапы загрузки операционной системы Linux.  Эта тема которую неплохо бы было знать любому ИТ-специалисту.

Основные этапы загрузки хоста с ОС Linux:

Одни расширения добавляют в браузер новые функции, а другие предоставляют данные о посещаемых веб-страницах:

• Wappalyzer расскажет о технологиях, которые применялись в разработке сайта.
• Similar web показывает трафик и ранжировании сайта.
• Momentum изменяет содержание страниц или заменяет домашнюю страницу.

Я расскажу о разработке расширения для Chrome на Vue 3 и Quasar. Это расширение которое будет изменять размер шрифта на посещаемых веб-страницах. Подробности — к старту нашего курса по Fullstack-разработке на Python.

В этой статье поговорю про основы работы с Postman для начинающих тестировщиков. Сама я столкнулась с этим инструментом как раз на последнем проекте. 

Расскажу, как с его помощью создавать простейшие автотесты и уменьшать объем рутины с помощью переменных.

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

Привет, друзья!

Хочу поделиться с вами решением интересной задачи: записать экран компьютера пользователя.

Общие требования к реализации:

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

Если вам это интересно, прошу следовать за мной.

→ Исходный код проекта

Скриншот:

К слову, здесь можно почитать о том, как разработать приложение для записи звука.

Привет, меня зовут Александр, я старший разработчик ПО в Центре разработки Orion Innovation и я люблю делиться своими мыслями с людьми, разумеется, любимые форматы – статьи на Хабре и доклады на конференциях и митапах. Сложно представить доклад без презентации, о них и хочу поговорить.

Практически 10 лет слова презентация, слайды, PowerPoint(KeyNote) были для меня равносильны. Однажды мне необходимо было продемонстрировать большое количество кода (80 из 100 слайдов содержали код), и моя работа в PowerPoint превратилась в «День сурка»...

[Осторожно: много изображений]

MongoDB — это NoSQL-база данных, которую в том или ином виде используют более четверти разработчиков. MongoDB и другие NoSQL-базы данных привлекают своей гибкостью: вместо жесткой схемы и вертикального масштабирования, у вас есть возможность развивать схему постепенно и масштабироваться горизонтально. Компания MongoDB вышла на биржу в 2017 году и сегодня стоит более 17 миллиардов долларов.

Документные базы данных используют вместо реляционных таблиц и столбцов вложенные пары ключ-значение. Одно из преимущество такого подхода в том, что вам не нужно преобразовать данные для взаимодействия с фронтендом — данные уже хранятся в необходимом виде (плюс-минус .map или .reduce). 

Работа с MongoDB через командную строку не всегда удобна, и в этом посте мы рассмотрим доступные графические инструменты.

Ссылка на обучающее видео

Привет всем. Сегодня я вам расскажу как легко вы можете создать 3d игру прямо в вашем браузере и сделать вы сможете это очень быстро, примерно за минут 30.

За эти годы мне посчастливилось работать над некоторыми крупномасштабными проектами, написанными на React. Сегодня я соберу важные вещи, которые нужно учитывать при создании нового проекта или расширении функциональности любого крупномасштабного приложения. Мы начнём с самых основ, а затем пойдём глубже. Так что пристегнитесь!

Чем полезны хуки?

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…

В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.