Доброе утро! С вами @ihorzenich, я буду вести прямую трансляцию с #wstdays #Kyiv Программа: wsd.events/2016/11/26/ pic.twitter.com/HFR1nmfQzG
Зал переполнен. pic.twitter.com/jo6ia89tmD
RT @ihorzenich: Мы создали событие #wstdays на Foursquare, можно чекиниться. (@ Конференция "Веб-стандарты" - @webstandards_ru) https://t.c…
Вадим @pepelsbey Макеев извиняется за то что не оценил такой активности киевлян и забронировал зал всего на 200+ человек, а не на 500+.
Рега закрылась быстро, но многие писали: "ааа, я не успел, можно прийти?", Вадим отвечал "приходите, но никому не говорите". И все пришли :)
RT @PetrukhnovArtem: Спасибо за "дорегистрацию" на #wstdays ))
Вадим рассказывает про историю конференции. Это 31-ая конференция #wstdays. Говорит что не знает другой конференции с таким кол-вом проходов
Сегодня половина зала - пришедшие впервые и во многом это заслуга подкаста "Веб-стандартов": soundcloud.com/web-standards
Вадим благодарит Opera на которую он _пока_еще_ работает, за помощь в организации конфы, просит не стесняться писать отзывы, доклады и т.д.
Вы можете помочь нам донатом (50 грн) чтоб в следущий раз снимать помещение куда поместяться все желающие: wsd.events/2016/11/26/
Трансляция не взлетела:(, будет только запись позже. Да, на отдельный платный инет-канал для видео тоже нужны деньги.
Жаль, доклады супер.
Первый доклад - Роман @Realetive Галин рассказывает про <head>. Начинает с истории про ученого который чуть не погиб pic.twitter.com/zICedXdZZD
Голову (head) ученого прошиило гиганской долей радиации, когда он ремонтировал одно устройство. Но ему повезло. Что же мы знаем про head?
Роман рассматривает страницу как живого человека и рассказывает о том как разные теги влияют на ее поведение. pic.twitter.com/AlA3XaT6yt
Смотрите и завидуйте: куча крутой инфы о том как можно настраивать сайт через head. Роману явно не хватает времени. pic.twitter.com/TnfaJj7ZF8
Наличные веб-компоненты на чистом html: habrahabr.ru/post/230751 pic.twitter.com/Wq9RdwZcdz
RT @kastaneda: Доклад Романа Ганина (который идёт сейчас) на Github github.com/Realetive/lect… #wstdays
Роман Ганин на WSD в Киеве #wstdays pic.twitter.com/KhKKPQSWbn
Глядя на кучу крутых вещей, которые можно написать в HEAD мне вспоминается @h5bp в котором раньше тоже было много заготовок. Было.
Любимые 3 тега в HEAD:
- content-security-policy
- viewport
- humans.txt
RT @errorent: #wstdays есть бот в телеграмме с расписанием докладов в Киеве, telegram.me/wsdkievbot
Второй доклад - "Как незрячие люди видят ваш сайт". От того кто понимает о чем он говорит. Дмитро Попов. pic.twitter.com/KpjR6syYWy
В Украине около 70 000 незрячих людей. И 2/3 из них пользуются интернетом: совершают покупки, общаются в соцсетях, пользуются гос. услугами.
Если вы оптимизируете сайт под скринридеры - он станет автоматически оптимизирован и для поисковых систем.
Первая ошибка: старайтесь не использовать блоки недоступные с клавиатуры. Например Google-карты недоступны вообще.
Пример неудобного: оформление заказа на zakaz.ua - там нужно выбрать на карте регион доставки. Это невозможно сделать незрячему.
Почему не парсить этот регион из адреса? Или хотя бы не дать просто выдающее меню. Зачем это сделали, зачем?
Вторая ошибка: отсутствие подписей. Ссылки без анкора, кнопки без надписей, картинки без alt и т.д.
Третья ошибка: использование тегов не по назначению: div вместо заголовка, span вместо кнопки или ссылки.
Четвертая ошибка - использование только картинок для вывода информации. pic.twitter.com/IwpEhpgkVQ
Пятая ошибка: не используйте слайдеры и карусели без крайней необходимости.
В этом году Дмитро помогал Укрзализныце адаптировать форму покупки билетов. pic.twitter.com/Q9ipPOMmBf
Сайты для незрячих это не сложно! Это не сотни часов работы. Многие пилят на этом гранты. Просто проверяйте сайт с помощью NWDA и VoiceOver.
RT @kastaneda: Пользуясь случаем, выражу порицание современной моде постить в твиттер тексты скриншотами без ссылки. #wstdays
Если вас пугает необходимость "слушать" верстку сайта, то знайте - можно смотреть текстом, то что читает скринридер. В NWDA есть такая опция
RT @not_plasticine: Когда не в Киеве, но всё равно на WSD :) #wstdays pic.twitter.com/LsthFzjp19
Третий доклад, гастроли Юры @akella Артюха о его опыты верстки, истории работы и жизни. Премьера была на #KharkivCSS pic.twitter.com/B1gT7umNh7
Юра - математик по образованию, а это график "сколько разработчик готов потратить на Sublime" :) pic.twitter.com/EG2QY16x04
Чувак год(!) верстал эту задачу - "как замостить фотками сетку без обрезки фото и не чистом html/css". Полезный опыт pic.twitter.com/p072AJDVVy
Слайды доклада Юрия Артюха "Ленивый верстальщик": take.ms/X3YKQ
@evlogii программы которые зачитывают содержимое сайта незрячим людям.
Давайте жить в реальном мире, дизайнеры редко используют сетки, обычно "13px - мне показалось это оптимальный размер".
Юра много рассказывает о пользе PostCSS и наличия готовых сниппетов. Всего что помогает НЕ писать один и тот же код снова.
Юзайте Stylelint для проверки css на баги: stylelint.io
Это как CSSLint, но без OOCSS-фанатизма, с кучей доп. фич и на PostCSS.
RT @webstandards_ru: Слайды докладов постепенно появляются прямо в программе, уже есть: открытие, <head>, доступность и лень — https://t.co…
RT @ihorzenich: Но в этот раз у Юры таки вылез порно-баннер! Видео он скрыл, но тяжело учесть все!
Из зала подсказали что они грузятся чере…
Доклады отстают от графика всего на 10 минут, Антон @SilentImp Немцев выходит без перерыва после предыдущего докладчика чтоб нагнать ритм.
RT @SilentImp: Вы не знаете CSS!
Слайды: silentimp.github.io/youDontKnowCSS/
Репозиторий: github.com/SilentImp/youD…
#wstdays
RT @ardshock: На прошлой конференции мне объснили, что я не знаю #бэм, сегодня, что не знаю #css… Интересно я хоть что-то знаю?! #wstdays
Кто из вас знает Motion path? Это перемещение элемента по заданной траектории и он уже работает в Blink! pic.twitter.com/SjnnNAmoDY
Антон рассказывает про десятки крутых css-свойств и подводных камней с ними. Если у вас возникла нестандартная задача - ищите ее в слайдах.
У Антона 100+ слайдов(!), он провел огромную работу по изучению самых свежих, еще в черновиках спек, проверил их и объяснил простыми словами
Перерыв на час на обед.
@dcromster да, но придётся ждать. Возможно долго:(
Вадим рассказывает историю из своего детства, про то как он делал игрушечный домик на уроках физики с освещением. Детский InternetOfThings.
Популярные сейчас мысли: "В нашей работе и жизни не хватает реальности. Мы не оставим после себя реальных вещей, наши сайты исчезнут..."
Поэтому блютус. Не стесняйтесь называть его так. Вадим рассказывает о истории его развития. Актуальный сейчас - EDR. pic.twitter.com/CVuiooDq7C
Но недавно у нас появился новый блютус - Bluetooth LE. Low energy. Он потребляет оч мало энергии и работает на расстояния более 100+ метров.
Макеев подключается к одному из фитнес-трекеров в зале и пугает тем что можно легко узнать id этого человека и следить за ним.
Выключается свет, начинается магия. Вадим меняет цвет лампы из браузера по блютус Зрители успели хакнуть имя лампы:) pic.twitter.com/SS21OwKgMr
RT @ihorzenich: Вдохновившись докладом @pepelsbey заказал себе умную лампу на AliExpress.
Полеты имперских штурмовиков, управляемых из браузера! pic.twitter.com/i7NeBsMKkb
Эта штука называется Web Bluetooth, с поддержкой мне всё плохо но есть зелёный цвет надежды под флагами. Скоро будет pic.twitter.com/3JCRrSf1XO
Вопрос из зала:
- А что с безопасностью?
- Ну, вы сами видели - кто-то из зала успел подключиться к моей лампе и переименовал её до демки.
Блютус устройство на вашей руке постоянно транслирует какие-то данные. И вопрос времени, когда кто-то хороший или нехороший начнет это юзать
#KharkivCSS в гостях на #wstdays pic.twitter.com/Fqgyws9R8H
Это был пятый доклад: @pepelsbey про IoT. Вадим единственный докладчик, который был на всех 31 конференциях #wstdays pic.twitter.com/TdcfDHbXDd
Продолжаем без перерыва, 6-ой доклад: Артур @lifeasecond Пархисенко "Polymer, год вместе". pic.twitter.com/GZNf2X6OYX
Артур рассказывает про спецификации и своей опыт работы с веб-компонентами, shadow dom и custom elements.
Веб-компоненты = Custom Elements + Shadow DOM + Templates + HTML imports.
Это не фреймворк, а набор технологий в браузере.
А Polymer - это фреймворк от Google на основе всего этого + полифилы и наборы готовых компонентов.
Пример простого Polymer-компонента: pic.twitter.com/IzwVMR1cq1
Например логотип @webstandards_ru на Polymer. pic.twitter.com/9azmypwktz
В Polymer много html/css и мало js. pic.twitter.com/N8BcsYtPKS
Советы после года работы с Polymer: pic.twitter.com/8V32UvcdMv
"Даже обычный верстальщик поймет Polymer, ему не нужно знать js для этого"
Артуру три раза подряд задавали вопрос "если бы он вернулся на год назад, использовал ли бы он Polymer снова, может не надо?"
В конце 4-го вопроса:
-
А ты сам работал на проекте?
-
Теперь нас двое
-
Жаль что вас раньше не было двое, вы могли бы выбрать что-то другое
-
Если верстальщик не знает js, что ему лучше выбирать: Angular или Polymer?
-
Попробуйте Angular, а потом Polymer.
Вообще очень саркастичная реакция зала: "кто вам оплачивал все это время" и тд. Пора говорить о #фреймворкизм - дискриминации по фреймворку.
Перерыв. Тем временем @akella перезапускает локальный сервер, но по localhost:8000 упорно открывается порнохаб :) pic.twitter.com/t0hkXHMCJy
Функциональщина. Григорий @AGambit95 Шехет "Радуйся коду с ELM". pic.twitter.com/QuQ3NRE23y
"Если вы пишите на ELM, ваше приложение почти наверняка никогда не сломается".
Хотите писать JS без ошибок? Забыть про `undefined is not a function` и наслаждаться Redux из коробки? Elm для вас!
- Классный доклад... Ты тоже работаешь один в команде? 😂
Слайды доклада Вадима Макеева "Я и ИоТ": wsd.events/2016/11/26/pre…
Слайды доклада Артура Пархисенко "Polymer, год вместе": wsd.events/2016/11/26/pre…
Слайды доклада Григория Шехета "Радуйся коду с ELM": wsd.events/2016/11/26/pre…
Восьмой доклад - Виталий @var_bincom Рыбка "Консоль в массы. Переход на светлую сторону". pic.twitter.com/2zkoociAR8
Что интересно, все примеры работы с unix-консолью, Виталий показывает на Win10, где теперь есть линукс из коробки внутри.
Виталий говорит что раньше он не юзал консоль на винде, но его коллега показал ему насколько это может ускорить работу среди всех этих окон.
И теперь он делиться своим опытом с нами, рассказывает о типовых командах, которые помогают упростить разные рабочие задачи. Экскурс по bash
Слайды доклада Виталия Рыбки "Консоль в массы. Переход на светлую сторону": wsd.events/2016/11/26/pre…
Последний 9-ый доклад, Сергей @puzankovcom Пузанков "Тестирование UI с помощью Gemini" pic.twitter.com/b8YRdIPNAH
Сергей проработал 8 лет в Яндексе, потом пришел в Luxoft на проект "Getty Images" и прикрутил там Gemeni из Яндекса для регрессионных тестов
Gemeni - очень крутая тема, но её мало кто использует, непонятно же. Кому как не бывшему яндексоиду рассказать о ней простыми словами.
@beerjskyiv да, но есть одна проблема - паб до сих пор не забукан. Антон @SilentImp Немцев предлагает пойти в uk-ua.facebook.com/buenavista.kyiv
RT @Inviz: @webstandards_up ah what a treat to me eyes, seeing a dreadlock at tech conf
Слайды доклада Сергея Пузанкова "Тестирование UI с помощью Gemini": wsd.events/2016/11/26/pre…
RT @ihorzenich: #wstdays afterparty @ Golden Gate Irish Pub instagram.com/p/BNSNdYyg0Lo/
RT @ihorzenich: #wstdays post-party. That's like afterparty, but in train :) instagram.com/p/BNSWjleg34-/
Вместо вас в Киев ездил @ihorzenich и постарался передать дух конфы. Спасибо что читали, пишите мне реплаи что понравилось, а что нет. Пока.