Pull to refresh
51
3.3
Alex Gusev @flancer

flancer32.com

Send message

Кэширование кода в веб-приложениях

Level of difficulty Medium
Reading time 4 min
Views 4.3K

Эта статья — изложение персонального опыта работы с кэшем на стороне браузера при создании веб‑приложений. В повседневной разработке я использую десктопный Chrome. У него есть панель инструментов и он в принципе удобен для разработчика. Но когда нужно проверять приложение на смартфонах, начинается геморрой — каким образом доставить на смартфон новый код, если там уже есть старый? Больше всего меня бесит Safari on iPhone. Если в Chrome есть возможность удалить все данные для отдельного сайта, то в iPhone все данные удаляются для всего Safari. Если и есть в iPhone какой‑нибудь способ удалить через конфигурацию смартфона/приложения данные для отдельного сайта, то мне так и не удалось его найти. Буду благодарен, если кто‑либо мне о нём сообщит в комментах.

Читать далее
Total votes 5: ↑4 and ↓1 +3
Comments 11

Web 3.0 и частные данные

Reading time 8 min
Views 1.5K

Эта публикация является развитием идей, сформулированных в предыдущей статье - "Идентификация пользователей в Web 3.0". После предыдущей публикации я понял, что в массах нет однозначного определения, что же именно называть Web 3.0 - виртуальную реальность, интернет вещей или децентрализацию на базе блокчейна. С моей точки зрения, Web 3.0 - это архитектура веб-приложений, обусловленная спросом пользователей на конфиденциальность их собственных данных.

Развитие идей Web 2.0 привело к тому, что пользователи сами стали товаром. Вернее, товаром стала информация об их связях и предпочтениях, которую собирают и монетизируют корпорации типа Google и Facebook. В ответ на это у многих пользователей появилось желание не делиться своими персональными данными с корпорациями, а хранить свои данные в недоступном для корпораций месте. Размышлениям о том, к каким последствиям может привести персонализация хранимых данных, и посвящена данная публикация. Сразу предупреждаю - это просто моё растекание мыслью по древу, а не "сборник рецептов" или разъяснения "как всё устроено". Не очаровывайтесь, чтобы не разочароваться :)

Читать далее
Total votes 4: ↑3 and ↓1 +2
Comments 4

Идентификация пользователей в Web 3.0

Level of difficulty Easy
Reading time 5 min
Views 6.3K

В данной статье я публикую свои размышления по поводу идентификации пользователей в плавно привходящей третьей версии веба - Web 3.0. Если коротко, то, в отличие от стремящегося к гипер-централизации Web 2.0 (в пределе - по одному веб-приложению разного типа на всё человечество с центром у какой-нибудь глобальной корпорации), Web 3.0 отличается как раз таки децентрализацией и повышенным вниманием к конфиденциальности пользовательских данных (хотя ничего не мешает тем же глобальным корпорациям контролировать функциональность этих децентрализованных приложений на уровне кода приложения или среды его выполнения - браузера или ОС).

Так какие же требования к идентификации могут предъявлять веб-приложения современного настоящего и ближайшего будущего?

Читать далее
Total votes 3: ↑2 and ↓1 +1
Comments 28

Так в чём же конечная цель программирования?

Level of difficulty Easy
Reading time 3 min
Views 7.7K

Написать этот пост меня побудила статья "В чем конечная цель программирования?" и её обсуждение в комментах. Я поставил свой плюс за статью сразу же, как прочитал первое предложение:

> В том, чтобы иметь код, который легко изменять.

Ведь это же очевидно любому, кто попрограммировал достаточно долго, чтобы столкнуться с необходимостью изменять свой собственный код через какое-то достаточно продолжительное время (более полугода от момента завершения проекта). Про чужой код я не говорю, потому что его, в массе своей, изначально пишут "криворукие ваш-любимый-эпитет" и нужно потратить кучу времени хотя бы для того, чтобы понять, что он делает, а чтобы что-то в нём изменить и не порушить всё остальное, времени нужно потратить в разы больше.

Но статья с таким очевидным (ну, лично для меня) выводом имеет, по состоянию на сегодня, оценку "-5" ("8" - в плюс, "13" - в минус). Под катом мои размышления о возможных причинах этого.

Читать далее
Total votes 30: ↑17 and ↓13 +4
Comments 42

Мы живем в компьютерной симуляции. Мнение другого программиста

Reading time 8 min
Views 18K

Этот пост не является прямым продолжением вот этого, скорее он является следствием. Как раз тот случай, когда “после” - таки значит “вследствие”. В оригинальном посте утверждалось, что Вселенная виртуальна, что прошлое вычисляется на лету, а случайности - псевдослучайны (что даёт возможность вычислять будущее). Я так широко не замахиваюсь, я лишь хочу изложить свою точку зрения, чем, на мой взгляд, Вселенная похожа на экран дисплея. Абсолютно ненаучное изложение, пригодное лишь для размягчения айтишных мозгов, утомлённых "греблей на галерах”. Заранее прошу прощения у тех, чей интеллект почувствует себя оскорблённым чтением сего опуса - я пока ещё не научился мыслить красиво. Тех же, кто не боится запачкать себя “псевдонаукой” - прошу под кат. Не волнуйтесь, длинных формул не будет.

Читать далее
Total votes 23: ↑19 and ↓4 +15
Comments 117

DI в JS: идентификаторы зависимостей

Reading time 9 min
Views 3.3K

В предыдущих публикациях (раз, два) я рассматривал возможности использования внедрения зависимостей в чистом JavaScript (без TypeScript, аннотаций и транспиляции). В данной публикации я продолжаю погружаться в вопросы использования DI в JS и более пристально рассматриваю роль идентификатора зависимости в создании объектов контейнером.

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

Читать далее
Total votes 1: ↑1 and ↓0 +1
Comments 2

Внедрение зависимостей в ES6+ «на пальцах»

Level of difficulty Medium
Reading time 8 min
Views 3.9K

В своём предыдущем посте я попытался объяснить, что такое "инверсия контроля" и в каких случаях использование внедрения зависимостей в JS (ES6+) становится оправданным (если у вас в кодовой базе десятки npm-пакетов, в каждом из которых сотни, а то и тысячи es6-модулей). В этом посте я шаг за шагом покажу, как можно построить собственный контейнер объектов, который будет загружать исходный код es6-модулей, создавать нужные зависимости и вставлять их в нужные места. Сразу предупреждаю, что для упрощения изложения в демо-коде будут использоваться определённые допущения, связанные с генерацией объектов. Целью статьи является демонстрация собственно технологии внедрения зависимости, а не готового "всепогодного" решения. По итогу у вас должно сложиться понимание, как в ES6+ можно сделать свой контейнер объектов, если он вам вдруг по какой-то причине понадобится.

Читать далее
Total votes 6: ↑5 and ↓1 +4
Comments 15

Зачем нужно внедрение зависимостей в JS

Level of difficulty Easy
Reading time 4 min
Views 5K

Этот пост является ещё одной попыткой сформулировать идею, зачем нужно внедрение зависимостей в ванильном JavaScript (именно в ES6+, а не в TS).

Основная сложность в том, что шаблон «внедрение зависимостей» (DI) есть следствие применение на практике «принципа инверсии зависимостей» (DIP). Классическая формулировка этого принципа выглядит так:

A. Модули верхних уровней не должны зависеть от модулей нижних уровней. Оба типа модулей должны зависеть от абстракций.

B. Абстракции не должны зависеть от деталей. Детали должны зависеть от абстракций.

Для JS‑программиста данная формулировка представляет определённую сложность в силу того, что в JS нет классических абстракций (в виде «интерфейсов» из других ЯП). В JS вообще нет абстракций, тут всё очень конкретно: вот объекты, вот примитивы — комбинируй.

Тем не менее, если спуститься с уровня теории на уровень практики, внедрение зависимостей вполне успешно может применяться даже в таком «конкретном» языке.

Читать далее
Total votes 6: ↑6 and ↓0 +6
Comments 17

Появится ли в браузере менеджер пакетов?

Level of difficulty Easy
Reading time 2 min
Views 1.7K

Введение менеджера пакетов в веб-браузеры является интересной идеей, и на самом деле такой функционал уже существует в некоторых формах. Однако, на данный момент он не является стандартной функцией браузеров.” (с) da Vinci, text-002, OpenAI

Чуть-чуть про идею...
Total votes 5: ↑1 and ↓4 -3
Comments 18

Remote Console для трассировки web-приложений

Level of difficulty Easy
Reading time 3 min
Views 2.8K

Я очень сильно уважаю отладчик (debugger) - он даёт возможность лучше понимать код, с которым ты работаешь. Даже если ты сам этот код и написал. Но отладчик - это очень низкоуровневый инструмент, зачастую хватает трассировки хода выполнения web-приложения (логирования). Самый простой способ логирования - console.log(). Он позволяет вывести сообщение на консоль браузера (DevTools по F12 в Chrome). Но что делать, если приложение отрабатывает в среде, где консоль для разработчика недоступна? Например, в мобильном устройстве клиента?

Ответ очевиден - перенаправить вывод с консоли браузера туда, где разработчик сможет видеть логи. Благо, что JavaScript позволяет это делать очень просто, достаточно вставить в HTML-файл в HEAD такой фрагмент:

Читать далее
Total votes 5: ↑4 and ↓1 +3
Comments 4

Пример биометрической аутентификации в веб-приложениях

Level of difficulty Medium
Reading time 6 min
Views 4K

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

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

Как перестать беспокоиться и начать жить в эпоху ИИ

Level of difficulty Easy
Reading time 7 min
Views 3.6K

Сам-то я “сварщик не настоящий” и в искусственных интеллектах ничего не понимаю, но когда “вокруг только и разговоров, что о море и о закате”, возникает непреодолимое желание разобраться хотя бы на бытовом уровне, “что такое, товарищи, море и что такое, товарищи, закат”. Если кому интересна (ещё одна) точка зрения дилетанта на то, что делать с приближающейся технологической сингулярностью - добро пожаловать под кат. Но сразу предупреждаю, ничего нового вы там не обнаружите, просто рефлексия одного естественного интеллекта.

Читать далее
Total votes 11: ↑6 and ↓5 +1
Comments 10

Распознавание речи через Deepgram API в PWA

Level of difficulty Medium
Reading time 5 min
Views 2.1K

Распознавание речи — штука довольно прикольная и не очень полезная. С одной стороны голосовой интерфейс для общения с роботами в фантастике является обычным, наверное, годов с 60-х, а с другой стороны — в наше время голосовой интерфейс не продвинулся сильно дальше "Алиса, а какая у нас погода на завтра?". Для того, чтобы самому составить мнение о текущих возможностях систем распознования речи, я попробовал использовать сервис Deepgram в браузерном приложении. Команда сервиса в ноябре прошлого года привлекла дополнительное финансирование в размере $47 млн. и с оптимизмом смотрит в будущее. Сервис хорош тем, что распознаёт русский язык (не все STT-сервисы это делают), даёт приличный кредит для тестирования возможностей (из 150 промо-денег я израсходовал меньше 0.50 "на поиграться"), не требует серверной части (всё работает из браузера). Готовая демка — тут, детали — под катом.


КДПВ

Читать дальше →
Rating 0
Comments 4

А какие версии HTTP поддерживают ваши nodejs-приложения?

Reading time 3 min
Views 2.1K

При анализе откликов на свою статью "HTTP/1 и HTTP/2 сервера на nodejs" пришёл к выводу, что поддержка версии HTTP/2 в настоящее время в nodejs-приложениях находится в этакой суперпозиции: с одной стороны http2-библиотека nodejs позволяет без проблем использовать HTTP/2 в своих приложениях, с другой - наиболее популярный web-сервер (express) до сих пор нативно не поддерживает HTTP/2, а другие популярные web-сервера (koa, hapi) требуют от разработчика дополнительно кодирования для работы с HTTP/2. Под катом опрос, какие версии HTTP-протокола используются в ваших nodejs-приложениях.

Читать далее
Total votes 8: ↑1 and ↓7 -6
Comments 8

HTTP/1 и HTTP/2 сервера на nodejs

Reading time 5 min
Views 5.5K

Экспериментальная поддержка HTTP/3 уже встроена в основные браузеры и начинает потихоньку пробираться на сервера. А это значит, что уже можно полностью отказаться от использования в своих nodejs-приложениях от http-библиотеки и переключиться на http2. Насколько же отличается реализация http2-сервера от обычного http-сервера?

Под катом пример простого web-приложения, выполняющего типовые задачи (получение статики GET'ом, upload файлов, POST-запросы, server sent events) на серверах HTTP/1 и HTTP/2. HTTP/2 Server Push в данном примере не затрагивался. Приложение не использует внешних зависимостей (npm-пакетов), всё сделано при помощи собственного функционала nodejs.

Читать далее
Total votes 9: ↑1 and ↓8 -7
Comments 0

PWA: не Chrome'ом единым?

Reading time 3 min
Views 7.9K

Я уже публиковал свою точку зрения, что Progressive Web Applications - это, прежде всего, технология для мобильных устройств. Основная особенность классических web-приложений - это клиент-серверная архитектура, а основная особенность "прогрессивных" web-приложений - возможность работы в offline. Понятно, что это очень сильно разные подходы в архитектуре - "всегда на связи" и "всё своё с собой". Совместить два таких разных подхода в одном приложении "это очень дорого и ни к чему".

Отталкиваясь от этой своей точки зрения, я решил посмотреть текущую статистику по браузерами - какие на данный момент у PWA-приложения возможности стать популярным и на какие браузеры оно должно ориентироваться. Данные для публикации взяты с сайта gs.statcounter.com

Читать далее
Total votes 7: ↑6 and ↓1 +5
Comments 27

PWA: управление service-worker'ом

Reading time 5 min
Views 5.7K

Прочитал я хорошую статью "Обновление вашего PWA в продакшене" и задался вопросом - а как часто при обновлении PWA нужно обновлять непосредственно сам service worker? Ведь что такое service worker по сути? "Прокладка" (прокси) между приложением, работающим в браузере, и внешними серверами, с которых это приложение тянет нужные ему ресурсы. По большому счёту, функционал service worker'а сводится к некоторому набору стратегий и пониманию того, к какому ресурсу какую стратегию применять и когда (я сейчас не рассматриваю push notifications и background sync, но изложенное в какой-то степени применимо и к ним).

То есть, код service worker'а более стабилен по сравнению с кодом приложения и во многих случаях для его "обновления" достаточно программно обнулить кэш-хранилище браузера и обновить "понимание того, к какому ресурсу какую стратегию применять" - обновить конфигурацию service worker'а. А для этого нужно приложению нужно иметь возможность каким-то образом управлять состоянием service worker'а и передавать ему данные, что осложняется тем, что приложение и service worker работают в различных потоках.

Под катом пример того, каким образом можно настроить управление service worker'ом из основного приложения при помощи Channel Messaging API.

Читать далее
Total votes 2: ↑2 and ↓0 +2
Comments 3

Устойчивость JS-кода к изменениям

Reading time 8 min
Views 4.5K

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


В этой публикации я пытаюсь поразмышлять на следующие вопросы: из каких элементов состоит JavaScript-код? каким образом эти элементы взаимодействуют друг с другом? можно ли как-то повысить устойчивость кода к изменениям?

Читать дальше →
Total votes 6: ↑5 and ↓1 +4
Comments 2

Декларативная схема данных: создание единой структуры из фрагментов

Reading time 6 min
Views 2.2K

В предыдущей статье я обозначил некоторые плюсы декларативного описания реляционных структур данных в web-приложениях с "WordPress-философией" (слабонагруженные, модульные, с единой БД). В этой статье я рассматриваю экспериментальную реализацию данного подхода. Сразу предупреждаю, что это не готовый рецепт того, как нужно делать (пусть даже и с моей точки зрения), а, скорее, публичные размышления. Ну нравится мне размышлять вслух, не пинайте сильно.


Реализуемая в приложении задача высосана из вакуума и практической пользы не имеет. Само приложение состоит из трёх npm-пакетов: основного и двух зависимых. Каждый пакет декларирует свою собственную структуру данных в JSON-формате. Основное приложение создаёт в двух различных базах данных две различные структуры, комбинируя свою собственную декларацию и декларацию из соответствующего пакета (own + pack1 & own + pack2). Совмещение различных фрагментов в общую структуру является типовой задачей модульных приложений с единой БД. Эту задачу я и рассматриваю ниже.

Читать дальше →
Rating 0
Comments 0

Декларативное описание структур данных в RDBMS

Reading time 5 min
Views 2.8K

Лет 6 назад я задавался вопросом "Как правильно организовать распределенное проектирование БД?" Тогда ответа на свой вопрос я так и не получил, но за прошедшее с тех пор время я встретился с вариантом, наиболее близко подобравшимся к моему видению "прекрасного" — это декларативная схема описания данных в Magento 2.


Мне нравится философия таких программных систем, как Magento, Odoo, WordPress, Drupal — базовый функционал, расширяемый за счёт сторонних плагинов. Она значительно отличается от философии FAANG. Философия FAANG направлена на построение уникальных высокопроизводительных решений, а философия WordPress — на адаптируемость к требованиям бизнеса. Каждый из этих подходов имеет свои плюсы и минусы, но мне ближе второй и рассматривать вопрос, вынесенный в заголовок публикации, я буду именно в рамках WordPress-подхода (WP-подхода).


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

Читать дальше →
Total votes 6: ↑5 and ↓1 +4
Comments 3

Information

Rating
872-nd
Location
Рига, Латвия, Латвия
Date of birth
Registered
Activity

Specialization

Fullstack Developer
Lead
From 3,000 €
JavaScript
HTML
CSS
Node.js
Vue.js
Web development
Progressive Web Apps
PostgreSQL
MySQL
GitHub