Pull to refresh
15
0
Send message

Как устроены цикл событий и стек вызовов в JavaScript

Reading time6 min
Views57K

Цикл событий (event loop) — ключ к асинхронному программированию на JavaScript. Сам по себе язык однопоточный, но использование этого механизма позволяет создать дополнительные потоки, чтобы код работал быстрее. В этой статье разбираемся, как устроен стек вызовов и как они связаны с циклом событий.

Статья будет полезна как новичкам, так и опытным разработчикам. Первым она поможет понять, почему JavaScript настолько сильно отличается от других языков программирования и чем функция обратного вызова очень полезна на практике. Вторым — глубже разобраться в среде исполнения этого языка программирования.

Читать далее
Total votes 8: ↑7 and ↓1+7
Comments9

Marko.js — фронтенд от ebay.com

Reading time6 min
Views9.1K
Marko.js не так популярен, как Angular, React.js, Vue.js или Svelte. Marko.js — это проект ebay.com, который с 2015 года стал достоянием opensource. Собственно, именно на этой библиотеке построен фронтенд ebay.com, что позволяет сделать заключение о её практической ценности для разработчиков.

Ситуация с Marko.js, немного напоминает ситуацию с фреймворком Ember.js, который, несмотря на то что работает в качестве фронтенда нескольких высоко-нагруженных сайтов (например Linkedin) — о нем мало знает среднестатистический разработчик. В случае с Marko.js — можно утверждать, что совсем не знает.

Marko.js неистово быстр, особенно при серверном рендеринге. Что касается серверного рендеринга, то скорость Marko.js, скорее всего, останется недосягаемой для его неторопливых собратьев, и этому есть объективные причины. О них и поговорим в предлагаемом материале.
Читать дальше →
Total votes 6: ↑5 and ↓1+6
Comments32

7 + 1 способ анимировать спиннер

Reading time6 min
Views10K

Меня зовут Евгений Подивилов, я фронтенд-разработчик в команде «Лайфстайл». Я разрабатываю раздел «Развлечения». В этом разделе можно купить билеты на мероприятия или забронировать столик в ресторане.

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

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

Читать далее
Total votes 32: ↑32 and ↓0+32
Comments16

Protected методы в JavaScript ES5

Reading time9 min
Views14K
Про объектную модель в JavaScript написано много замечательных статей. Да и про различные способы создания приватных членов класса в интернете полно достойных описаний. А вот про protected методы — данных очень немного. Я бы хотел восполнить этот пробел и рассказать, как можно создать protected методы без библиотек на чистом JavaScript ECMAScript 5.

В этой статье:


Ссылка на git-hub репозиторий с исходный кодом и тестами.
Читать дальше →
Total votes 19: ↑15 and ↓4+11
Comments8

Шаринг сокет-соединения между вкладками

Reading time5 min
Views5.6K

В каждом современном сервисе должны быть сториз и чат, и для начала мы решили запилить в hh.ru переписки. Меня зовут Влад Коротун, я фронтенд-разработчик. В этой статье расскажу, как неординарный подход к использованию Web Workers помог нам решить эту задачу.

Для желающих посмотреть на предмет сабжа в динамике у нас есть видеоверсия этой статьи. 

Читать далее
Total votes 10: ↑9 and ↓1+10
Comments7

Как мы уменьшаем размер изображений на веб-страницах в 10 раз с помощью нашего оптимизатора

Reading time8 min
Views19K

Привет, Хабр! Меня зовут Евгений Лабутин, я из команды разработки продукта МТС Твой бизнес. Мы разработали свой рецепт приготовления картинок для нашего портала. Благодаря ему удалось сократить их вес на странице до 10 раз относительно уже оптимизированного jpg/png, сохранив при этом простоту разработки – как будто это стандартный img элемент. Разработанный микросервис называется ImageOptimize, из этой статьи вы узнаете, как он работает и что у него под капотом. Мы уже выложили код микросервиса в OpenSource (чему очень рады), поэтому вы тоже можете использовать такую компрессию, настроив ее в несколько простых шагов.

Читать далее
Total votes 31: ↑29 and ↓2+33
Comments28

SSEGWSW: Server-Sent Events Gateway by Service Workers

Reading time6 min
Views9.8K
Привет!

Меня зовут Саша и я работаю архитектором в Тинькофф Бизнес.

В этой статье хочу рассказать о том, как преодолеть ограничение браузеров на количество открытых долгоживущих HTTP-соединений в рамках одного домена при помощи service worker.

Если хотите — смело пропускайте предысторию, описание проблемы, поиск решения и сразу переходите к результату.

SSEGWSW
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments8

Вам посылка, или Как мы доставляем сообщения с сервера на клиент в реальном времени

Reading time8 min
Views14K

Меня зовут Алексей Комаров, я — старший frontend-разработчик в SuperJob. Хочу поделиться опытом реализации механизма обновления данных в реальном времени у нас на сайте. Под катом — подробности о выборе подхода, о проблемах, с которыми мы столкнулись при разработке, о наших кейсах оптимизации 
клиентской стороны и, конечно, немного кода и наглядных схем.

Читать далее
Total votes 21: ↑21 and ↓0+21
Comments27

Современный Frontend: проблемы и пути решения. Пишем React-like приложение со строгой типизацией без сборщиков

Reading time5 min
Views14K

Всем привет! Меня зовут Петр Солопов, я руководитель отдела фронтенд-разработки в SuperJob. Думаю, многие из вас видели популярную серию картинок в интернете про фронтенд и бэкенд: на бекенде всегда какой-то монстр, а на фронте — все мило, летают бабочки. На мой взгляд, это не соответствует действительности и все не так радужно и безоблачно: чего только стоят настройка Webpack, тона зависимостей, особенности фреймворков и многое другое. За подробностями под кат.

Читать далее
Total votes 32: ↑30 and ↓2+30
Comments55

Разбираемся в сортах реактивности

Reading time27 min
Views37K

Здравствуйте, меня зовут Дмитрий Карловский и я… прилетел к вам на турбо-реактивном самолёте. Основная суть реактивного двигателя изображена на картинке.



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


Это — текстовая расшифровка выступления на SECON.Weekend Frontend'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций.

Читать дальше →
Total votes 53: ↑45 and ↓8+50
Comments55

Научитесь создавать приложения на F#

Reading time2 min
Views8.6K

Вы можете быть новичком в .NET или опытным разработчиком C#/VB.NET, который хочет расширить свои горизонты. В любом случае, F# -- отличный язык для изучения.

F# позволяет легко писать сжатый, надежный и производительный код. Он имеет легкий синтаксис, который требует очень мало кода для создания ПО. Он поддерживается мощной системой типов, удобной библиотекой и средой выполнения .NET, которой вы можете доверять создание правильных, быстрых и надежных программ.

Если вы хотите изучить F#, сейчас идеальное время -- у нас есть много свежих видео, курсов и многого другого, чтобы помочь вам начать работу уже сегодня.

Читать далее
Total votes 4: ↑4 and ↓0+4
Comments7

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

Reading time6 min
Views18K

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

Оригинал состоит из 272 страниц, в которых приведены множества исследований, объяснений, историй и примеров того, что нужно делать, как это делать и почему.
Представляю вам всё самое важное, что, несомненно, должно помочь вам эффективно справляться с задачами.

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

Однако помните: знать и делать - кардинально разные понятия.

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

Читать далее
Total votes 13: ↑11 and ↓2+12
Comments9

Поддержка Touch в JavaScript

Reading time6 min
Views8.2K

image


Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?


Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.


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

Читать дальше →
Total votes 15: ↑15 and ↓0+15
Comments4

Максимально оптимизированная веб-загрузка изображений в 2021 году

Reading time6 min
Views29K

В этой статье я расскажу про 8 методик оптимизации загрузки изображений, которые уменьшают необходимую пропускную способность сети и нагрузку на процессор при выводе на экран. Приведу примеры аннотированного HTML, чтобы вам было легче воспроизвести. Какие-то методики уже давно известны, а какие-то появились относительно недавно. В идеале, ваш любимый механизм публикации веб-документов (например, CMS, генератор статичных сайтов или фреймворк для веб-приложений) должен всё это реализовывать из коробки.
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments71

Бесплатные хостинги для веб-разработчиков

Reading time4 min
Views195K

Привет, Хабр!

Одним из наиболее популярных направлений разработки сегодня является веб. И когда нужно разместить свой проект где-нибудь, кроме localhost, многие сталкиваются с трудностями, ведь хостинг должен быть быстрым, удобным и, желательно, бесплатным :)

В этом списке вы найдете 15 бесплатных сервисов, где легко сможете разместить свой проект и не заплатите ни копейки. Погнали!

Читать далее
Total votes 30: ↑29 and ↓1+38
Comments38

Пишем простой Path Tracer на старом добром GLSL

Reading time18 min
Views18K

На волне ажиотажа вокруг новых карточек от Nvidia с поддержкой RTX, я, сканируя хабр в поисках интересных статей, с удивлением обнаружил, что такая тема, как трассировка путей, здесь практически не освящена. "Так дело не пойдет" - сказал я и решил, что неплохо бы запилить что-нибудь небольшое из этой темы, да и так, чтобы другим полезно было. Тут как кстати API собственного движка нужно было протестировать, поэтому решил - запилю-ка я свой простенький path-tracer прямо во фрагментном шейдере. Что из этого вышло, думаю вы уже догадались по превью к этой статье

Читать далее
Total votes 70: ↑70 and ↓0+70
Comments10

Рейт лимиты с помощью Python и Redis

Reading time5 min
Views11K

В этой статье мы рассмотрим некоторые алгоритмы рейт лимитов на основе Python и Redis, начиная с самой простой реализации и заканчивая продвинутым обобщённым алгоритмом контроля скорости передачи ячеек (Generic Cell Rate Algorithm, GCRA).

Для взаимодействия с Redis (pip install redis) мы будем пользоваться redis-py. Предлагаю клонировать мой репозиторий для экспериментирования с ограничениями запросов.
Читать дальше →
Total votes 11: ↑10 and ↓1+21
Comments3

React: слоты как у сына маминой подруги

Reading time4 min
Views20K

При композиции компонентов очень часто возникает задача точечной кастомизации содержимого какого-либо компонента. Например, у нас есть компонент DatePicker, и в разных частях веб-приложения нам нужно отображать разные кнопки "Применить".

Для решения подобных задач в каждой популярной технологии сегодня применяется концепция "слотов". У Angular есть ngContent, во Vue, Svelte и WebComponents есть слоты.

А как же React?
Total votes 14: ↑10 and ↓4+10
Comments13

Опенсорсные альтернативы Google Analytics на своём хостинге

Reading time5 min
Views23K

Веб-интерфейс опенсорсного сервиса аналитики Matomo

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

С точки зрения системного администратора в этих списках отдельно выделяется категория веб-аналитики — замена сервису Google Analytics, который собирает детальную статистику о посетителях сайта. Все знают, как работает такой сервис. Внедряете на страничках JS-код отслеживания, и если человек не установил блокировщик следящих скриптов, то каждый раз при открытии страницы будет срабатывать этот скрипт. Дальше статистика по вашим пользователям отправляется на хранение в корпорацию Google.

К счастью, есть ряд свободных, опенсорсных альтернатив Google Analytics, которые к тому же работают быстрее, поскольку скрипты меньше по размеру и загружаются с вашего собственного хостинга, а не со стороннего сервера. Информация о пользователях никуда не отправляется, а многие сервисы не используют куки и соответствуют законодательству GDPR о защите личных данных.
Читать дальше →
Total votes 46: ↑46 and ↓0+46
Comments18

Правосторонний интерфейс: адаптируем контролы к right-to-left языкам

Reading time8 min
Views4.9K
C адаптацией приложений и сайтов под RTL-языки (right-to-left, справа налево) сталкиваются разработчики многих развивающихся и выходящих на новые рынки продуктов. Мы в Badoo тоже в какой-то момент оказались в этой ситуации: наши приложения переведены на 52 языка и диалекта. В этой статье я расскажу о нескольких интересных нюансах, которые мы обнаружили при адаптации форм на сайте Badoo.сом под иврит и арабский язык.


Читать дальше →
Total votes 23: ↑23 and ↓0+23
Comments0

Information

Rating
4,633-rd
Registered
Activity