Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
217 lines (110 sloc) 16 KB

Fronteers

2015-10-08, Амстердам, Голландия

Всем привет! Сегодня и завтра в Амстердаме проходит одна из самых крупных конференций в Европе — Fronteers 2015.

Я, @mista_k, буду пересказывать вам самые интересные идеи из презентаций. Подключайтесь!

В этом году в роли ведущего мероприятия выступает Брюс Лоусон и он хорошо подготовился к этому. pic.twitter.com/8s0ykVIsbk

Первый день открыл Скот Джел из Filament Group. pic.twitter.com/OlZ7z7Y9rv

Скот поделился практическими советами как улучшить производительность загрузки и начальной отрисовки страницы.

«Встраивайте „критический CSS и JS“ на страницу» — советует Скотт. Или используйте для них server push из HTTP/2, когда отдаёте HTML.

@gunlinux Нет. А что с состоянием фронтэнда не так? :-)

Для определения критического CSS есть специальные инструменты. pic.twitter.com/FvmetSXQ4y

Скоро в браузерах (возможно) появятся клинтские подсказки для сервера. Это заголовки в запросе. pic.twitter.com/vUEJ8zkvRh

Уже сейчас можно использовать <picture> и атрибут srcset в <img>, чтобы загрузить подходящее изображение.

В iOS9 появилась возможность блокировать рекламу в вебе. Блокировщики могут отключить скритпы, картинки и даже шрифты.

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

Тестируйте свои сайты с использованием блокировщиков рекламы потому, что пользователи любят ими пользоваться!

Тестируйте свои проекты в условиях плохого Интернета. Есть утилиты, которые имитируют разные условия (2G, 3G, потери пакетов и т.п.)

В следующем выступлении Лиза Велчман делилась опытом организации «Цифрового управления» pic.twitter.com/J7qB754XnZ

Она сделала акцент на том, что в компании должны быть установлены правила и все должны следовать этим правилам.

Компания в 50, 100 или 1000 человек не может работать как стартап из трёх человек. Тут она привела пример джаз-бенда и оркестра.

Затем Крис Эпштейн рассказал о Sass. Это уже не Ruby, а C++ с биндингами к Node.js pic.twitter.com/Loz2V0gOLm

Новые функции Sass вы можете писать на JS. Всё это будет прекрасно работать с libSass.

Сам Sass можно подключать из npm — require(‘node-sass’). Для управления зависимостями Sass-плагинов Крис представил eyeglass.rocks

Sass-стили имеют доступ к файловой системе. Вот как это может выглядеть. pic.twitter.com/v4QGXrCMyU

Крис упомянул, что последние версии libSass обгоняют @PostCSS по скорости парсинга и генерации. Обработку нельзя однозначно сравнить.

Я заметил из выступления, что Sass сейчас остро ощущает конкуренцию со стороны PostCSS.

Выводы по докладу Криса pic.twitter.com/KfjQyDQ9sn

Затем выступало трио менеджер-дизайнер-разработчик из компании Primat с истоиями о их работе. pic.twitter.com/EeSd9iGps2

Доминик Сзаблевски сейчас раскрывает секреты того, как декодировать видео на JS pic.twitter.com/T8ji5ExDx8

Доминик ещё известен благодаря своим играми в браузере impactjs.com и библиотеке impactjs.com/ejecta pic.twitter.com/HpR8PvM3t7

Очень технически насыщенный рассказ о внутреннем устройстве видео-потока: кадры, макроблоки, цветовое пространство pic.twitter.com/Bqo9Iv1WxQ

@denysbutenko @sapegin @kinday Да. Есть ещё в Xcode инструмент и много других симуляторов.

@miripiruni На доброе здоровье!

«Зачем декодировать видео на JS?» — спросите вы. Ответ на картинках: pic.twitter.com/xdhy799HYE

И скорости хватает чтобы делать потоковое вещание для игр на другие устройства. pic.twitter.com/JBulAtDgIr

phoboslab.org/fronteers15 ссылка на материалы презентации Доминика.

Анна Дебенгэм рассказывает про стайл гайды в дизайне и программировании. pic.twitter.com/86mYyQLxxC

Случается, что в одном проекте можно встретить вот такое разнообразие кнопок: pic.twitter.com/sDHPT1E1KI

Анна рекомендует почитать cssguidelin.es

Не важно какой инструмент использовать для документирования стиля. Используйте хоть какой-нибудь! pic.twitter.com/CS5L5I4DpW

На сессии вопросов-ответов Анну спросили: «Не кажется-ли, что стайлгайды убивают креативность?». А что вы думаете? pic.twitter.com/yPlD5dAdoZ

@webstandards_up Анна ответила, что не убивают. Мне удалось в перерыве немного поговорить с ней об этом и узнать детали.

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

На сцене Элис Бартлет. Она занималась проектами для gov.uk pic.twitter.com/ELXfgk7UdU

«Доступность контента. Бла-бла-бла… Локализуем проблему. Решаем её. Бла-бла-бла» Какие-то общие фразы. Мало конкретики. :-(

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

Люди с ограниченными возможностями почти никогда не читают всю страницу целиком. Они прыгаю по заголовкам, лэндмаркам и ссылкам.

Десяток ссылок «Click here» или «Read more» — это совсем не то, что они хотели бы обнаружить на странице. Делайте нормальный содержимое.

Инструменты:
1) w3.org/WAI/ER/tools/
2) tenon.io

@sapegin Согласен. Глаз цепляется за заголовки и яркие штуки.

Тестируйте сами и приглашайте людей с ограниченными возможностями тестировать страницы.

Элис сказала, что то кресло удобнее и села на место, где обычно сидел Брюс. pic.twitter.com/Izygpit6xo

Джейк Арчибальд и Брюс в лучших традициях разыграли целую сценку перед докладом. Сорвали аплодисменты. pic.twitter.com/zfpQm5vsLV

«Progressive enhancement — это очень круто», говорит Джейк.

Эскалатор — очень наглядный пример постепенного улучшения функциональности. Даже если он стоит, то им можно пользоваться как лестницей.

Вы можете играть на первом уровне. Тем временем в фоне могут загружаться ассеты для следующих уровней.

Разблокируйте ваши скрипты атрибутом async. Скрывайте блоки и показывайте их, когда они будут проинициализированы.

Обманывайте ваших пользователей чтобы выиграть немного времени. pic.twitter.com/d6hjXKzFNY

Производительность загрузки страницы может сильно страдать из-за css/js/шрифтов из других сервисов (DNS lookups, TLS negotiations, etc.)

На волне асинхронности для загрузки всего Джейк увлечённо рассказывает про akdubya.github.io/dustjs/ Стоит смотреть туда? +@jsunderhood

Как только загрузятся ресурсы из жёлтой зоны, пользователь сможет пользоваться основными функциями. pic.twitter.com/RHLKLGY3eY

@operatino Я могу спросить её позже.

@operatino В этом есть смысл, когда блок бесполезен без JS.

«Service workers». О них ребята из Гугла рассказывают много в последнее время. pic.twitter.com/6Abj8YxB3T

С их помощью ваша страница будет доступна даже при плохом соединении или вообще в оффлайне.

На странице может быть несколько сервис воркеров.

Присоединяйтесь к разработке спецификации github.com/slightlyoff/Ba… pic.twitter.com/ExJrCadLOn

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

@jsunderhood Ага. Мне тоже показалось, что проект скорее мёртв, чем жив.

На сегодня всё. Читайте продолжение завтра. А я пошёл в бар знакомиться с умными людьми.

@operatino Элис рассказала, что случаи были. Речь идёт о крупных медиа Британии. Но все они решились полюбовно. До суда дело не доводили.

RT @jsunderhood: . @webstandards_up ну там есть форк от Linkedin. Там уже интереснее.

RT @sudodoki: @jsunderhood потому что потом это перекочевало в github.com/linkedin/dustjs @webstandards_up