Pull to refresh
  • by relevance
  • by date
  • by rating

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

Design Social networks and communities


Twitter обновил десктопную версию сайта и убрал возможность перейти на старый дизайн. Протестировать новый внешний вид можно было в последнии месяцы, сейчас компания перешла в активную стадию и раскатывает обновление на всю аудиторию.
Total votes 12: ↑11 and ↓1 +10
Views 2.4K
Comments 9

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

Firefox Website development *Browsers

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

Читать далее
Total votes 16: ↑15 and ↓1 +14
Views 15K
Comments 28

Progressive Web Apps: WhoAmI

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



Читать далее
Total votes 17: ↑12 and ↓5 +7
Views 93K
Comments 13

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

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

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


Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Views 19K
Comments 7

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

Google Developers corporate blog Website development *JavaScript *Development of mobile applications *Development for 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.



Я очень рекомендую посмотреть его, прежде чем продолжать читать статью, особенно если эта тема для вас в новинку.
Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Views 25K
Comments 3

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

Google Developers corporate blog Website development *Development for Android *Mobile applications testing *
Приветствуем! Приглашаем всех присоединиться 11го октября в 11:00 (МСК) к онлайн конференции Google по теме Progressive Web Apps.


Читать дальше →
Total votes 9: ↑9 and ↓0 +9
Views 5K
Comments 2

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

Google Developers corporate blog Website development *Development for iOS *Development of mobile applications *Development for Android *
Для тех, кто пропустил первую часть статьи: вам сюда. Ну а для всех остальных, как обычно, привет, Хабрахабр. Мы продолжаем тему PWA и изучение базового алгоритма синхронизации (не бросать же начатое?). В прошлой части мы закончили на том, что наше условное приложение умеет запрашивать статьи с сервера, получать только актуальные материалы, следить за изменениями и удалениями статей и грамотно всё это обрабатывать. Работало это всё через вычисление дельты: разницы между тем, что есть у приложения, и тем, что хранится на сервере.



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

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

Website development *Web services testing *


Предисловие


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

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

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

WEBO Group corporate blog System Analysis and Design *Client optimization *Development of mobile applications *Designing and refactoring *
Translation
В июле прошлого года на Altitude 2016 Алекс Рассел (Alex Russell) из Fastly рассказал, как он видит будущее мобильных приложений с учетом PWA и service worker, как обеспечить надежную работу приложения в офлайне и как обойти «зловещую долину» в мобильном интерфейсе.

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


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

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

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


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

Читать дальше →
Total votes 17: ↑16 and ↓1 +15
Views 7.7K
Comments 1

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

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



Читать дальше →
Total votes 53: ↑50 and ↓3 +47
Views 118K
Comments 24

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

Нетология corporate blog Website development *Development of mobile applications *
Translation
Tutorial
Светлана Шаповалова, редактор блога «Нетологии», адаптировала статью пользователя uve, в которой рассказывается, как сделать Progressive Web Apps.

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



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

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

Productivity Inside corporate blog Development for iOS *Development of mobile applications *Game development *Development for Android *
В новом дайджесте мы разбираем Android на части, спорим с Apple по поводу PWA, смотрим, как делается новостной агрегатор, исследуем Firebase, учимся на дизайнеров интерфейсов, возвращаем и вознаграждаем пользователей.

Читать дальше →
Total votes 15: ↑13 and ↓2 +11
Views 9.5K
Comments 0

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

Zfort Group corporate blog Website development *Google Chrome HTML *Google API *
Translation


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

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

Я установил Android 8 на свой Google Pixel и протестировал несколько вещей, касающихся, веб-сайтов и прогрессивных веб приложений, после чего у меня появились несколько плохих новостей.
Total votes 19: ↑18 and ↓1 +17
Views 13K
Comments 16

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

Website development *JavaScript *Browsers
Tutorial

Всем привет!


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

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

Google Developers corporate blog Hackathon


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

Читать дальше →
Total votes 8: ↑8 and ↓0 +8
Views 2.7K
Comments 2

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

Website development *JavaScript *Angular *
Собрал в кучу свои впечатления от конференции, которая прошла 7-8 ноября.

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

image
Total votes 16: ↑16 and ↓0 +16
Views 6.5K
Comments 0

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

Google Developers corporate blog Website development *Web services monetization *



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


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

Читать дальше →
Total votes 26: ↑25 and ↓1 +24
Views 2.9K
Comments 1

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

VK corporate blog Website development *JavaScript *HTML *
Tutorial

(С)

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

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

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

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

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

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

Website development *JavaScript *Programming *Client optimization *
Recovery mode
Service Workes как технология для создания offline приложений очень хорошо подходит для кэширования различных ресурсов. Разнообразные тактики работы в сервис воркере с локальным кэшем подробно описаны в Интернете.

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