Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Twitter обновил дизайн десктопной версии сайта

ДизайнСоциальные сети и сообщества


Twitter обновил десктопную версию сайта и убрал возможность перейти на старый дизайн. Протестировать новый внешний вид можно было в последнии месяцы, сейчас компания перешла в активную стадию и раскатывает обновление на всю аудиторию.
Читать дальше →
Всего голосов 12: ↑11 и ↓1 +10
Просмотры2.3K
Комментарии 9

Mozilla отказалась от поддержки PWA в Firefox 85

FirefoxРазработка веб-сайтовБраузеры

В обновлении Firefox 85 компания Mozilla отказывается от поддержки прогрессивных веб-приложений. Об этом в багтрекере Bugzilla рассказал разбрабочик Дейв Таунсенд.

Читать далее
Всего голосов 16: ↑15 и ↓1 +14
Просмотры14.7K
Комментарии 28

Progressive Web Apps: WhoAmI

JavaScriptРазработка мобильных приложенийРазработка под Android
Интерес к разработке приложений для мобильных операционных систем в сообществе разработчиков стабильно растёт, количество инструментов и подходов позволяющих создавать приложения становится всё больше. Сегодня я хочу написать о одном из новых подходов, а именно о Progressive Web Apps.



Читать далее
Всего голосов 17: ↑12 и ↓5 +7
Просмотры92.8K
Комментарии 13

Air Berlin: реализация Progressive Web App

Блог компании Google DevelopersРазработка веб-сайтовРазработка мобильных приложенийРазработка под Android
Перевод
Привет, Хабр! На прошедшей 18 мая в Калифорнии юбилейной конференции для разработчиков Google I/O было много всего. Серьёзные штуки для Android, монументальные изменения и интеграции в продуктах Firebase, да и просто множество анонсов и классных технологий. Но кое-что ещё мы пока не обсуждали. Речь идёт о Progressive Web App’ах (современных веб-приложенях) — сайтах, написанных так, словно это современные мобильные приложения: удобные, простые, интуитивно понятные и комфортные для использования на сенсорном дислпее.

Поэтому в ближайшие два месяца мы собираемся не только публиковать статьи по теме PWA, но и провести тематическую онлайн конференцию 11 октября — Progressive Web Apps Day. Пока же предлагаем вашему вниманию реальный кейс использования PWA от AirBerlin.


Читать дальше →
Всего голосов 22: ↑20 и ↓2 +18
Просмотры19K
Комментарии 7

Секреты Progressive Web Apps: часть 1

Блог компании Google DevelopersРазработка веб-сайтовJavaScriptРазработка мобильных приложенийРазработка под Android
Tutorial
Привет, Хабр! Мы продолжаем цикл статей по Progressive Web Apps. В прошлый раз мы познакомили вас с опытом разработчиков из Airberlin, ну а сегодня у нас в виртуальных гостях Jan Lehnardt, человек, стоящий за такими штуками, как Hoodie, Apache CouchDB и Greenkeeper i/o.

И пусть вас не смущает аббревиатура PWA (Progressive Web Apps): несмотря на то, что в заголовке есть Apps, принципы и технологии, используемые в PWA, применимы в целом к вебу и к приложениям. Лучшим вступлением к статье будет просмотр видео с Google I/O 2016, в котором Джейк Арчибальд рассказывает о PWA.



Я очень рекомендую посмотреть его, прежде чем продолжать читать статью, особенно если эта тема для вас в новинку.
Читать дальше →
Всего голосов 9: ↑8 и ↓1 +7
Просмотры24.5K
Комментарии 3

Онлайн конференция Google: Progressive Web Apps Day (11 октября)

Блог компании Google DevelopersРазработка веб-сайтовРазработка под AndroidТестирование мобильных приложений
Приветствуем! Приглашаем всех присоединиться 11го октября в 11:00 (МСК) к онлайн конференции Google по теме Progressive Web Apps.


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

Онлайн трансляция Progressive Web Apps Day начинается

Блог компании Google DevelopersРазработка веб-сайтовРазработка мобильных приложенийРазработка под Android
Друзья, присоединяйтесь к прямой трансляции онлайн конференции Progressive Web Apps Day.


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

Секреты Progressive Web Apps: часть 2

Блог компании Google DevelopersРазработка веб-сайтовРазработка под iOSРазработка мобильных приложенийРазработка под Android
Для тех, кто пропустил первую часть статьи: вам сюда. Ну а для всех остальных, как обычно, привет, Хабрахабр. Мы продолжаем тему PWA и изучение базового алгоритма синхронизации (не бросать же начатое?). В прошлой части мы закончили на том, что наше условное приложение умеет запрашивать статьи с сервера, получать только актуальные материалы, следить за изменениями и удалениями статей и грамотно всё это обрабатывать. Работало это всё через вычисление дельты: разницы между тем, что есть у приложения, и тем, что хранится на сервере.



В этой части мы изучим различные конкретные схемы по реализации описанных выше теорий, обсудим их сильные и слабые стороны. Ну а перед тем как мы начнём, давайте опишем требования к искомым алгоритмам.
Читать дальше →
Всего голосов 11: ↑11 и ↓0 +11
Просмотры6.4K
Комментарии 1

Некоторые тонкости использования Service Workers

Разработка веб-сайтовТестирование веб-сервисов


Предисловие


Сервис-воркеры (Service Workers, да простят меня читатели) сегодня являются полезным дополнением к основной функциональности сайта: тут и работа в оффлайне, и фоновая синхронизация данных, и модные пуш-уведомления.

Однако большое количество статей про сервис-воркеры выглядят достаточно сжато и описывают простые примеры. Я попробую обратить внимание на некоторые особенности работы сервис-воркеров, так что требуются какие-то базовые знания. Отправной точкой может быть эта статья (перевод) или чуть более подробная статья.
Читать дальше →
Всего голосов 36: ↑30 и ↓6 +24
Просмотры22.9K
Комментарии 7

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

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

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


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

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

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


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

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

Favicon сегодня: форматы, поддержка, автоматизация

Разработка веб-сайтовHTML
Из песочницы
Recovery mode
На сегодняшний день favicon — это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.



Читать дальше →
Всего голосов 53: ↑50 и ↓3 +47
Просмотры115.5K
Комментарии 24

Как сделать Progressive Web Apps: руководство новичка

Блог компании НетологияРазработка веб-сайтовРазработка мобильных приложений
Перевод
Tutorial
Светлана Шаповалова, редактор блога «Нетологии», адаптировала статью пользователя uve, в которой рассказывается, как сделать Progressive Web Apps.

Уверен, вы слышали о Progressive Web Apps, или сокращенно PWA. Не буду вдаваться в подробности о том, что это и как работает. Для наших целей подойдет простое определение PWA — сайт, который можно добавить на главный экран телефона, и он будет работать в автономном режиме.



Мне знакомы HTML, CSS, JavaScript и я умею пользоваться GitHub. Однако я все еще новичок в веб-разработке и мне не всегда охота глубоко вникать в принципы работы того или иного явления. Чаще всего мне просто нужен понятный способ сделать нужную вещь, не просматривая при этом тонны статей. Поэтому я надеюсь, что этот пост даст вам все необходимое для создания собственного PWA.
Читать дальше →
Всего голосов 7: ↑5 и ↓2 +3
Просмотры60.5K
Комментарии 3

Дайджест интересных материалов для мобильного разработчика #215 (31 июля — 5 августа)

Блог компании Productivity InsideРазработка под iOSРазработка мобильных приложенийРазработка игрРазработка под Android
В новом дайджесте мы разбираем Android на части, спорим с Apple по поводу PWA, смотрим, как делается новостной агрегатор, исследуем Firebase, учимся на дизайнеров интерфейсов, возвращаем и вознаграждаем пользователей.

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

Android Oreo откусывает кусочек от PWA

Блог компании Zfort GroupРазработка веб-сайтовGoogle ChromeHTMLGoogle API
Перевод


PWA (Progressive Wep Applications) – это название группы приложений, разработанных и продвигаемых компанией Google, которые используют стек Web технологий (JS + HTML + CSS) и позволяют соединить простоту использования Web сайта со специфичными для нативных приложений операционной системы UX и техническими возможностями. — прим. переводчика.

21 августа, после солнечного затмения, Google анонсировал выход финальной версии Android 8 под названием Android Oreo. Вместе с этим, у прогрессивных веб приложений появились новые проблемы.

Я установил Android 8 на свой Google Pixel и протестировал несколько вещей, касающихся, веб-сайтов и прогрессивных веб приложений, после чего у меня появились несколько плохих новостей.
Читать дальше →
Всего голосов 19: ↑18 и ↓1 +17
Просмотры13.1K
Комментарии 16

Современная Web-платформа: как расслабиться и получать удовольствие? Практическое руководство, часть 1

Разработка веб-сайтовJavaScriptБраузеры
Tutorial

Всем привет!


Помните эту статью? Раньше мы могли быстро собрать статичную HTML-страничку в каком-нибудь FrontPage и сайт был готов. С этим мог справится любой студент. В более сложном случае, мы писали пару строк на PHP и получали уже целый портал, собранный из разных элементов шаблона на сервере. Затем мы захотели, чтобы наш сайт как-то выделялся на общем фоне и умел чуть-чуть больше. Трон занял его-величество jQuery. Теперь же, мы оказались погребены под завалами фреймворков и библиотек, инструментов сборки, менеджеров зависимостей, препроцессоров и постпроцессоров, особых форматов, языков и стилей программирования, чтобы иметь возможность стряпать простые лэндинги. Все стало слишком сложно. Спикеры на конференциях стали соревноваться в изощренности того, каким еще образом можно сломать нам мозг. Как мы докатились до жизни такой? Чем «раньше» так сильно отличается от «сейчас»? Что нас ждет «потом»? Есть ли в современной веб-разработке некий дзен-стайл, блюдя который, можно, как в старые добрые времена, собрать себе уютный сайтик «на коленке» за пару вечеров, без ковыряния в документации десятка хипстерских технологий-однодневок? Насколько доступны нам простые решения в серьезной промышленной разработке? Куда движется веб-платформа? Предлагаю разобраться.
Читать дальше →
Всего голосов 18: ↑16 и ↓2 +14
Просмотры22.3K
Комментарии 73

Хакатон для всех от GDG & WTM Moscow

Блог компании Google DevelopersХакатоны


24-26 ноября в «Доме-Коммуне» состоится хакатон для всех, организованный IT-сообществами: Women TechMakers & Google Developers Group Moscow. Соорганизаторами мероприятия являются ВЭБ и МИСиС. Для участников будут доступны разные номинации от таких компаний партнеров как Google, App in the Air, ВЭБ. Участие в Хакатоне полностью бесплатное, но по предварительному отбору.

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

Впечатления от Angular Connect 2017

Разработка веб-сайтовJavaScriptAngular
Собрал в кучу свои впечатления от конференции, которая прошла 7-8 ноября.

В основном, на конференции речь шла про все что происходит вокруг фреймворка или что можно сделать с его помощью или на его основе. Это дает ощущение, что основная работа по развитию завершена. В 5 версии ребята здорово поработали над оптимизацией размера. Про какие-то изменения в ядре не упоминалось.

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

Хакатон в прямом эфире. Ускоряем мобильные сайты

Блог компании Google DevelopersРазработка веб-сайтовМонетизация веб-сервисов



В январе на страницах главного блога вебмастеров Google было объявлено, что с июля 2018 года скорость загрузки страницы станет ранжирующим сигналом в мобильном поиске. Исследования подтверждают важность быстрой загрузки мобильных версий сайта не только для поиска, но и для бизнеса в целом: при замедлении скорости загрузки с 1 до 7 секунд, показатель отказов увеличивается на 113%, уровень конверсии падает на 95% при увеличении числа элементов на странице с 400 до 6000.


Узнать о том, как оптимизировать скорость загрузки сайта можно будет 14 февраля на первом в России онлайн-хакатоне "Ускоряем мобильные сайты". Специалисты и инженеры Google расскажут какие критические ресурсы стоит оптимизировать в первую очередь, продемонстрируют как это можно сделать на реальном сайте, а также ответят на все интересующие вас вопросы. Для участия в хакатоне необходимо зарегистрироваться.

Читать дальше →
Всего голосов 26: ↑25 и ↓1 +24
Просмотры2.9K
Комментарии 1

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

Блог компании Mail.ru GroupРазработка веб-сайтовJavaScriptHTML
Tutorial

(С)

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

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

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

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

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

Service Workers: прозрачное обновление кэша

Разработка веб-сайтовJavaScriptПрограммированиеКлиентская оптимизация
Recovery mode
Service Workes как технология для создания offline приложений очень хорошо подходит для кэширования различных ресурсов. Разнообразные тактики работы в сервис воркере с локальным кэшем подробно описаны в Интернете.

Не описано одного — каким образом обновлять файлы в кэше. Единственное, что предлагает Google и MDN, это делать несколько кэшей для разных типов ресурсов, и, когда нужно, изменять в скрипте сервис воркера sw.js версию этого кэша, после чего тот весь удалится.
Читать дальше →
Всего голосов 11: ↑8 и ↓3 +5
Просмотры7.7K
Комментарии 4