Как стать автором
Обновить

Хостинг сайта на Imgur

Блог компании ITSumma Хостинг Разработка веб-сайтов *Браузеры Софт


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

Если вкратце, то экспериментальный инструмент Web2img сначала перекодирует файлы вашего веб-сайта в формат изображений (для размещения на хостинге), а затем преобразует эту картинку в JS-скрипт для выполнения в браузере на лету (через service worker). Таким образом, контент сайта загружается с Imgur прямо в браузер.
Читать дальше →
Всего голосов 19: ↑19 и ↓0 +19
Просмотры 1.8K
Комментарии 2

Как собрать статистику с веб-сайта и не набить себе шишек

Блог компании Badoo Разработка веб-сайтов *JavaScript *Программирование *Клиентская оптимизация *

enter image description here


Привет, Хабр! Меня зовут Слава Волков, и я фронтенд-разработчик в Badoo. Сегодня я хотел бы немного рассказать про сбор статистики с фронтенда.


Мы знаем, что аналитика позволяет оценить эффективность работы любого веб-сайта, улучшить его работу, а значит, повысить уровень продаж и усовершенствовать взаимодействие пользователей с сайтом. Проще говоря, аналитика – это способ контроля над процессами, происходящими на веб-сайте. В большинстве случаев для обычных сайтов достаточно установить Google Analytics или «Яндекс.Метрику» – их возможностей вполне достаточно.


Но как быть, когда стандартных средств мониторинга недостаточно? Или когда собираемая статистика должна быть интегрирована в вашу собственную систему аналитики для отображения полноценной картины происходящего между разными компонентами? В таком случае, скорее всего, вам придется разработать свою систему. А вот как лучше отправлять статистику с ваших веб-сайтов, какие проблемы могут при этом возникнуть и как их избежать, я расскажу в этой статье. Заинтересовались? Добро пожаловать под кат.

Всего голосов 53: ↑48 и ↓5 +43
Просмотры 21K
Комментарии 0

PWA, «Зловещая долина» и стабильная работа в офлайне

Блог компании WEBO Group Анализ и проектирование систем *Клиентская оптимизация *Разработка мобильных приложений *Проектирование и рефакторинг *
Перевод
В июле прошлого года на Altitude 2016 Алекс Рассел (Alex Russell) из Fastly рассказал, как он видит будущее мобильных приложений с учетом PWA и service worker, как обеспечить надежную работу приложения в офлайне и как обойти «зловещую долину» в мобильном интерфейсе.

Сейчас service worker — это программируемое прокси внутри браузера


«В команде мы знаем, что быстрее всегда лучше», отметил Алекс. «Это обстоятельство подтверждено десятками исследований как нашей команды, так и другими».

Такая закономерность проиллюстрирована на рисунке 1. Хорошо видно, что с увеличением времени загрузки веб-страницы:

1) сильно падает количество обращений к странице;
2) постоянно растет процент отказов.


Рис. 1. Быстрее всегда лучше
В виде столбиковой диаграммы показана зависимость количества обращений к веб-странице за секунду от времени загрузки (этой страницы также в секундах.
В виде красного графика показана зависимость показателя отказов в процентах от того же времени загрузки в секундах веб-страницы

Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 8K
Комментарии 1

Анонс RamblerFront& #3

Блог компании Rambler&Co CSS *JavaScript *HTML *ReactJS *


26 октября на Мансарде Rambler&Co состоится третий внешний RamblerFront& meetup, на котором наши сотрудники поделятся прикладными знаниями в области frontend-разработки.
Читать дальше →
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 2.3K
Комментарии 8

«Быстрорастворимый» фронтенд. Лекция в Яндексе

Блог компании Яндекс JavaScript *Клиентская оптимизация *Интерфейсы *
Ускорить доставку элементов фронтенда на устройство пользователя можно несколькими способами. Разработчик Артём Белов из самарского офиса норвежской компании Cxense попробовал самые многообещающие: HTTP/2, Server Push, Service Worker, а также оптимизацию в процессе сборки и на стороне клиента. Итак, что же нужно сделать, чтобы сократить время отклика приложения до минимума?


Выясняется, что алгоритмы сжатия существуют уже давно. Это произошло где-то в июне — видимо, где-то над Самарой пролетал метеорит и идея проверить новые алгоритмы сжатия, Zopfli и Brotli, пришла мне и парню из соседней компании. Больше чем уверен, вы читали его статью, это Александр Субботин. Статья разошлась на Medium, и он известен, а я нет.

Всего голосов 71: ↑68 и ↓3 +65
Просмотры 24K
Комментарии 21

Frontend на CodeFest: React, Javascript и лучшие практики

Блог компании CodeFest Разработка веб-сайтов *JavaScript *Программирование *Разработка мобильных приложений *
image

Продолжаем рассказывать о программе CodeFest 2018. На очереди — мощный фронт докладов фронтенд-секции.
Читать дальше →
Всего голосов 22: ↑19 и ↓3 +16
Просмотры 5.6K
Комментарии 3

Генерация страниц сайта средствами сервис-воркеров

Блог компании VK Разработка веб-сайтов *JavaScript *HTML *
Tutorial

(С)

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

  • кэширование страниц сайта для офлайн доступа;
  • ведение учета страниц, доступных офлайн, проброс необходимых данных;
  • мониторинг статуса сети, онлайн или офлайн;
  • общение сервис-воркера со страницами и вкладками, которые он обслуживает;
  • перехват сервис-воркером запроса на открытие адреса /offline/ и генерирование новой страницы прямо на устройстве, без запроса к серверу.

Если тема сервис-воркеров и Progressive Web Apps (PWA) для вас новая, то перед чтением этой статьи необходимо познакомиться с ними поближе.

Меня зовут Рыбин Павел, я работаю во фронтенд-разработке Медиапроектов Mail.Ru Group. Это руководство мне помогали писать грабли, набитые шишки и подводные камни, попавшиеся мне при реализации PWA для мобильной версии Авто Mail.Ru.

В тексте будут встречаться небольшие примеры кода, иллюстрирующие рассказ. Расширенную же демо-версию можно посмотреть на GitHub.
Читать дальше →
Всего голосов 39: ↑39 и ↓0 +39
Просмотры 18K
Комментарии 12

JS DevDay: про титан, рабочих и гибриды

Блог компании 2ГИС JavaScript *Программирование *Конференции


Мы готовимся сделать то, что не делали вот уже два года, — 27-го апреля соберём на DevDay 150 неравнодушных к JavaScript. Научимся жить с Titanium, ускорять приложение с помощью service workers и напишем гибридное приложение на Angular.

Под катом явки, пароли и про трансляцию.
Что же там под катом?
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 2.6K
Комментарии 0

JS DevDay. Запись докладов

Блог компании 2ГИС JavaScript *Программирование *Конференции


27 апреля мы провели JavaScript DevDay — разговаривали и про мобилку, и про веб, и про гибридные приложения. Делимся записями трёх докладов.

Первый будет полезен, если вам понадобилась аргументация почему НЕ стоит использовать Аppcelerator Titanium. Второй повествует о том, как ускорить ваше веб-приложение с помощью service worker. Посмотрев третий доклад вы узнаете, как написать гибридное приложение на Angular.

Уже смотрю
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 4.7K
Комментарии 0

PWA — это просто

Разработка веб-сайтов *JavaScript *Клиентская оптимизация *Разработка мобильных приложений *Проектирование и рефакторинг *
image
Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.

Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.
Читать дальше →
Всего голосов 11: ↑9 и ↓2 +7
Просмотры 292K
Комментарии 32

PWA — это просто. Hello Joomla

Разработка веб-сайтов *JavaScript *Клиентская оптимизация *Разработка мобильных приложений *Проектирование и рефакторинг *
Продолжаем изучение Progressive Web Applications. После теоретической первой части и простого практического примера Hello Habr второй части попробуем перевести в PWA веб сайт на CMS Joomla.

Тип серверного фреймворка не важен. Задача данной статьи — показать перевод обычного сайта в PWA как концепцию, применимую к произвольным сайтам на любых фреймворках.

Читать дальше →
Всего голосов 9: ↑7 и ↓2 +5
Просмотры 6.5K
Комментарии 3

Почитать на каникулах. Лучшие посты в нашем блоге за 2018 год

Блог компании 2ГИС Программирование *Управление продуктом *Читальный зал


Привет! Грядут новогодние каникулы, а с ними и некоторое количество свободного времени Собрали подборку популярых статей из нашего блога. Внутри деление → бекенд, фронтенд, команда, мобильная разработка.

Приглядитесь, даже если почитываете наш блог время от времени.
Читать дальше →
Всего голосов 31: ↑30 и ↓1 +29
Просмотры 9.5K
Комментарии 0

SSEGWSW: Server-Sent Events Gateway by Service Workers

Блог компании TINKOFF JavaScript *Google Chrome
Из песочницы
Привет!

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

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

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

SSEGWSW
Читать дальше →
Всего голосов 29: ↑29 и ↓0 +29
Просмотры 6.1K
Комментарии 6

Рецепты по приготовлению офлайн-приложений

Разработка веб-сайтов *JavaScript *Программирование *
Перевод


Доброго времени суток, друзья!

Представляю вашему вниманию перевод замечательной статьи Джейка Арчибальда «Offline Cookbook», посвященной различным вариантам использования сервис-воркера (ServiceWorker API, далее по тексту — просто воркер) и интерфейса кэширования (Cache API).

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

Если не знакомы, то начните с MDN, а затем возвращайтесь. Вот еще неплохая статья про сервис-воркеры специально для визуалов.

Без дальнейших предисловий.
Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 6.1K
Комментарии 2

Обход блокировки РКН с помощью магии Service Worker'ов

Информационная безопасность *JavaScript *
✏️ Технотекст 2021
Tutorial


Приветствую, Хабр!

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

TL;DR


Суть способа в обыгрывании возможности Service Worker'ов проверять контент на подконтрольных ему страницам. Если воркер не находит определённого текста на странице — происходит редирект. Таким образом вместо заглушки провайдера о том, что сайт заблокирован пользователь переходит на незаблокированный домен.
Читать дальше →
Всего голосов 40: ↑37 и ↓3 +34
Просмотры 22K
Комментарии 33

JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API

Блог компании Timeweb Cloud Разработка веб-сайтов *JavaScript *Node.JS *



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


В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).


Мы с вами разработаем простое приложение на React, в котором используется несколько изображений, и добьемся того, что загружаемые изображения будут более чем в 10 раз легче (меньше по размеру) оригиналов (imgproxy), а также практически мгновенной загрузки (доставки) изображений (СВ и кеш).


Обратите внимание: в части, касающейся imgproxy, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.


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


Остальных прошу под кат.

Читать дальше →
Всего голосов 13: ↑13 и ↓0 +13
Просмотры 5.1K
Комментарии 13