UI Kit is an abstract conception to organize your user interface in modular way. It strongly relies on documentating design components. Learn how to build your team's workflow by implementing the UI Kit for next project.
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Ontico
Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.
Из предлагаемого доклада слушатели смогут узнать следующее:
– какие плюсы предоставляет декомпозиция дизайна;
– что такое UI Kit и какими свойствами он обладает;
– почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
– как можно реализовать UI Kit и организовать его хранение.
С ростом кодовой базы становится все более очевидной необходимость использования компонентного подхода, когда каждая логическая часть обособлена. Если говорить про JavaScript, то в нем есть области видимости, опираясь на которые можно соорудить изолированные компоненты. Но в CSS нет подобных механизмов, поэтому и придумываются Shadow DOM (Web Components) и различные методики вроде БЭМ.
Но что если взглянуть на проблему под другим углом? Адаптируя подходы, что уже используются для других задач, можно получить куда больше выгоды, чем просто изолированные стили!
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Ontico
По-моему, всем давно надоело, что дизайнеры и разработчики интерфейсов дублируют работу друг друга, причем постоянно. У каждого свой набор компонентов для сборки интерфейса, свои понятия о принципах его построения, и компоненты каждый делает, как знает, лишь бы выглядели хорошо.
Компонентный веб, современные методологии, такие как БЭМ, и инструменты, такие как Sketch и AI, вкупе с передовыми фреймворками, такими как React и Angular, а также шагающий по миру стандарт ES6, могут решить насущные проблемы создания интерфейсов.
Я покажу, как дизайнер может использовать компоненты в Sketch, сделанные разработчиком. Редактировать и изменять их. А также расскажу, насколько сильно это упрощает жизнь в команде, создающей невероятные продукты каждый день ;)
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Ontico
Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.
Из предлагаемого доклада слушатели смогут узнать следующее:
– какие плюсы предоставляет декомпозиция дизайна;
– что такое UI Kit и какими свойствами он обладает;
– почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
– как можно реализовать UI Kit и организовать его хранение.
С ростом кодовой базы становится все более очевидной необходимость использования компонентного подхода, когда каждая логическая часть обособлена. Если говорить про JavaScript, то в нем есть области видимости, опираясь на которые можно соорудить изолированные компоненты. Но в CSS нет подобных механизмов, поэтому и придумываются Shadow DOM (Web Components) и различные методики вроде БЭМ.
Но что если взглянуть на проблему под другим углом? Адаптируя подходы, что уже используются для других задач, можно получить куда больше выгоды, чем просто изолированные стили!
JavaScript завтра / Сергей Рубанов (Exante Limited)Ontico
За последние несколько лет в мире js-разработки особое внимание получили такие проекты как AtScript, TypeScript, SoundScript, Flow, Traceur, Babel, каждый из которых пытается предоставить разработчикам некую "улучшенную" версию JavaScript. Комитет TC39 также стал очень активен и разработал стратегию развития стандарта ECMAScript с более частыми релизами. Движки JavaScript стремительно приближаются к полной поддержке ES6. Огромное количество JS-фреймворков и библиотек выбирают следующую версию стандарта уже сегодня. Это означает, что необходимо уже сегодня обратить внимание на происходящее в мире JavaScript-разработки и разобраться, что ждет язык завтра.
В своем докладе я постараюсь дать ответы на следующие вопросы:
- почему такие фреймворки и библиотеки как Angular, Ember, React начали активно и кардинально меняться;
- почему новая версия стандарта языка ES6 так долго внедряется вендорами браузеров и как TC39 решил ускорить процесс стандартизации и внедрения последующих версий ECMAScript;
- почему CoffeeScript больше не "just JavaScript", и действительно ли он сделал такой значимый вклад в следующую версию JavaScript;
- почему были созданы AtScript, TypeScript, Flow, чем каждый из них отличается от остальных, и как они влияют на дальнейшее развитие JavaScript;
- что такое Strong Mode и SoundScript;
- как начать писать ES6+ код уже сегодня.
Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский...Ontico
Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.
Дорожная карта: к чему и когда готовиться?
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк",...Ontico
По-моему, всем давно надоело, что дизайнеры и разработчики интерфейсов дублируют работу друг друга, причем постоянно. У каждого свой набор компонентов для сборки интерфейса, свои понятия о принципах его построения, и компоненты каждый делает, как знает, лишь бы выглядели хорошо.
Компонентный веб, современные методологии, такие как БЭМ, и инструменты, такие как Sketch и AI, вкупе с передовыми фреймворками, такими как React и Angular, а также шагающий по миру стандарт ES6, могут решить насущные проблемы создания интерфейсов.
Я покажу, как дизайнер может использовать компоненты в Sketch, сделанные разработчиком. Редактировать и изменять их. А также расскажу, насколько сильно это упрощает жизнь в команде, создающей невероятные продукты каждый день ;)
Отладка кода в браузере / Антон Шувалов (Rambler&Co)Ontico
Чем плох console.log, и как сэкономить время на отладке в Dev Tools?
- Точки останова.
- Просмотр состояния стеков.
- Работа с repl в контексте активного стека.
- Как удобно следить за состояниями переменных и выражений с помощью watch expressions.
- Как поставить точку останова на события, мутации DOM, XHR, на обращения к полям объектов и на неперехваченные исключения?
- Pretty print и source maps.
- Немного о логах и debug.js.
О проектировании дизайн-систем от разработчика интерфейсов. Что такое композиции компонентов и с чего стоит начинать строить свою систему, чем плохи и хороши имеющиеся на рынке решения и почему их точно нельзя использовать. Все то как передать бренд через интерфейсы в CSS с параноидальным переиспользованием кода. Дизайнерские и разработческие сетки, высокоуровневое проектирование интерфейсов с ориентацией на решение задач. Верстка и дизайн уровня «бог». Живые примеры, годы работы, инсайды, вот это вот всё.
Во время разработки мы сталкиваемся с крайне странными решениями и нетривиальными подходами. Я попытался их собрать вместе, чтобы показать какие нестандартные решения мы применяем чтобы решать нестандартные задачи. Я покажу как можно использовать привычные инструменты не по прямому назначению и получать профит. Вот вам задачка: как можно построить структуру HTML по CSS? Правда ли, что postcss может все или как разобрать любой препроцессор?
Обзор продуктов theprotein.io
Живой keynote https://www.dropbox.com/s/e58zitfqyjpdsoz/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD.%D0%93%D0%BB%D0%B0%D0%B7%D0%B0%D0%BC%D0%B8%20%D0%B8%20%D1%80%D1%83%D0%BA%D0%B0%D0%BC%D0%B8%20%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B0.key?dl=0
В скором времени, Unity получит поддержку еще одной платформы — WebGL, что позволит запускать игры в браузере без каких-либо плагинов. Валентин покажет, как работает процесс паблишинга, подробно остановится на IL2CPP — внутренней разработке Unity, которая и делает всю основную магию, а так же расскажет о дальнейших планах внедрения этой технологии на другие платформы.
Преподаватель программы обучения «HTML-верстка», технический директор digital-агентства PLUS8 Дмитрий Демидовский составил для «Нетологии» словарь из 21 термина, с помощью которых вы сможете лучше понимать разработчиков.
Библиотека bem-components — Ангелина Сидорцова, ЯндексYandex
Мы строили-строили. Мы тестировали-тестировали. Мы писали документацию. Некоторые из вас принимали в этом активное участие и уже пользуются плодами работы. Теперь мы хотим поделиться нашими совместными результатами (18 готовых блоков!), рассказать о том, как вы можете ускорить разработку своих проектов, о том, что ждёт впереди, и о том, как сделать свою собственную библиотеку блоков такой же удобной и качественной, как это получилось с библиотекой bem-components.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
Отладка кода в браузере / Антон Шувалов (Rambler&Co)Ontico
Чем плох console.log, и как сэкономить время на отладке в Dev Tools?
- Точки останова.
- Просмотр состояния стеков.
- Работа с repl в контексте активного стека.
- Как удобно следить за состояниями переменных и выражений с помощью watch expressions.
- Как поставить точку останова на события, мутации DOM, XHR, на обращения к полям объектов и на неперехваченные исключения?
- Pretty print и source maps.
- Немного о логах и debug.js.
О проектировании дизайн-систем от разработчика интерфейсов. Что такое композиции компонентов и с чего стоит начинать строить свою систему, чем плохи и хороши имеющиеся на рынке решения и почему их точно нельзя использовать. Все то как передать бренд через интерфейсы в CSS с параноидальным переиспользованием кода. Дизайнерские и разработческие сетки, высокоуровневое проектирование интерфейсов с ориентацией на решение задач. Верстка и дизайн уровня «бог». Живые примеры, годы работы, инсайды, вот это вот всё.
Во время разработки мы сталкиваемся с крайне странными решениями и нетривиальными подходами. Я попытался их собрать вместе, чтобы показать какие нестандартные решения мы применяем чтобы решать нестандартные задачи. Я покажу как можно использовать привычные инструменты не по прямому назначению и получать профит. Вот вам задачка: как можно построить структуру HTML по CSS? Правда ли, что postcss может все или как разобрать любой препроцессор?
Обзор продуктов theprotein.io
Живой keynote https://www.dropbox.com/s/e58zitfqyjpdsoz/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD.%D0%93%D0%BB%D0%B0%D0%B7%D0%B0%D0%BC%D0%B8%20%D0%B8%20%D1%80%D1%83%D0%BA%D0%B0%D0%BC%D0%B8%20%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B0.key?dl=0
В скором времени, Unity получит поддержку еще одной платформы — WebGL, что позволит запускать игры в браузере без каких-либо плагинов. Валентин покажет, как работает процесс паблишинга, подробно остановится на IL2CPP — внутренней разработке Unity, которая и делает всю основную магию, а так же расскажет о дальнейших планах внедрения этой технологии на другие платформы.
Преподаватель программы обучения «HTML-верстка», технический директор digital-агентства PLUS8 Дмитрий Демидовский составил для «Нетологии» словарь из 21 термина, с помощью которых вы сможете лучше понимать разработчиков.
Библиотека bem-components — Ангелина Сидорцова, ЯндексYandex
Мы строили-строили. Мы тестировали-тестировали. Мы писали документацию. Некоторые из вас принимали в этом активное участие и уже пользуются плодами работы. Теперь мы хотим поделиться нашими совместными результатами (18 готовых блоков!), рассказать о том, как вы можете ускорить разработку своих проектов, о том, что ждёт впереди, и о том, как сделать свою собственную библиотеку блоков такой же удобной и качественной, как это получилось с библиотекой bem-components.
Евгений Батовский, Николай Птущук "Современный станок верстальщика"Yandex
Рассказ о том, что представляет собой наш «станок» верстальщика сегодня. Рассказывается с примерами, какие браузеры поддерживаем, как производим кроссбраузерное тестирование и какие инструменты используем, готовя проект к выходу в свет.
Андрей Михайлов. Vagrant. Быстрое развертывание средыDrupalSib
DrupalCafe#9@Novosibirsk https://vk.com/drupalcafe9
Чтобы избежать больших затрат на развертывание сред разработки и тестирования, приближенных к среде эксплуатации (development stage vs production stage parity), всё большую популярность приобретает виртуализация сред.
Доклад о том, как создавать соответствующую репродуцируемую среду разработки с использованием Vagrant.
-----
Сайт сибирского сообщества друпаллеров ДрупалСиб drupalsib.ru
Группа сибирского сообщества друпаллеров Вконтакте vk.com/drupalsib
Партнер Группа компаний И20 i20.biz
Рано или поздно возникает необходимость в собственных инструментах по разным причинам: либо не хватает готовых, либо есть какая-то особенность в проекте. Разработка инструментов, работающих в браузере, является непростой задачей. Самое сложное — чтобы они умели работать удаленно, вне страницы. Это многих пугает — нужно много сделать и во многом разобраться. Но если большая часть проблем уже решена, и можно сосредоточиться лишь на основной функции инструмента? Что если такие инструменты смогут работать в произвольном WebView, будь оно встроено в браузер, редактор или другое приложение на любом устройстве? Доклад про удалённые инструменты: какие есть сложности и как их обойти, как перестать бояться и начать делать инструменты под свои задачи и технологический стек.
Drupal: система для быстрой и комфортной разработки web-сайтовAlex Barkov
On October 30th, 2013 Alexander Barkov and Andrew Yun on behalf of the deWeb studio and Ukrainian Drupal community made a speech for the students and youth of Software Engineering club IT-master in the hall of the Academic Council "KPI". They talked about the benefits of using CMS / CMF Drupal, - the basic system, based on which we build our projects.
http://deweb.com.ua/blog/speech-students-community-it-master-kpi
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Когда проект делает один разработчик — все просто. Когда над ним работает небольшая команда, можно синхронизироваться и договориться. А вот когда проектов (сайтов и приложений) становится много, и над ними трудится множество команд с перекрестной функциональностью и смежными зонами ответственности, все становится сложным и запутанным.
Я расскажу о своем виденье архитектуры фронтенда, какой она должна быть, чтобы обеспечить её масштабируемость. На основе своего опыта и проблем, с которыми сталкиваются большие проекты.
Видео: https://www.youtube.com/watch?list=PLknJ4Vr6efQFtZmsXmGG64Rz_PHrcXCBL&v=z9y6PNC2FL0
Ігор Карпиленко — PHPStorm for drupal developerLEDC 2016
Розгляд та аналіз інфструментів PHPStorm для drupal розробника: QA tools, Xdebug, Issue Tracking System, Drush, інструменти для роботи з Vagrant, Docker і базами даних. Корисні плагіни.
User Experience 2011: Мастер-класс: Кросс-платформенное проектирование для мо...Yury Vetrov
Мастер-класс Юрия Ветрова "Кросс-платформенное проектирование для мобильных — Android, iPhone, Windows Phone 7, Symbian" с конференции User Experience 2011.
Юрий Василевский «Автоматизация в XCode»
Yandex Mobile Camp в Санкт-Петербурге 2012
http://events.yandex.ru/events/yamobcamp/spb-may-2012/
Xcode — основной инструментарий разработки приложений под Mac OS X и Apple iOS. Он обладает широкими возможностями как для редактирования кода, так и для автоматизации задач. Мы обсудим некоторые из аспектов автоматизации (Code Sense, Targets, Services, Help), связанные с нумерацией сборок билдов, форматированием и контролем стиля кода, анализом дублированных участков кода, управлением внешними библиотеками.
Similar to UI Kit and design developig workflow (20)
14. Концепция UI Kit
1. Абстрактный подход
2. Интерфейс — набор компонентов
3. Компоненты индивидуально документируются
4. Компоненты используются всеми участниками
разработки
14
21. Облачное хранилище
Пример: Seafile, ownCloud, Acronis Access
1. Иерархия — файловая структура
2. Доступно всем участникам процесса
3. Разворачивается внутри локальной сети
4. История изменений, группы доступа,
комментирование, wiki
21
22. Файловая структура
Webapps
│
├─
Common
components
│
│
│
├─
Global
nav
│
├─
Typography
│
├─
Icons
│
├─
Palette
│
└─
...
│
├─
Access
│
├─
Desktop
│
└─
Account
22
23. Файловая структура
Webapps
│
├─
Common
components
│
│
│
├─
Global
nav
│
├─
Typography
│
├─
Icons
│
├─
Palette
│
└─
...
│
├─
Access
│
├─
Desktop
│
└─
Account
Global
nav
│
├─
Links
group
├─
User
name
├─
Company
name
├─
Toggle
├─
mockup.png
├─
changelog.txt
└─
behaviour.txt
23
24. Файловая структура
Webapps
│
├─
Common
components
│
│
│
├─
Global
nav
│
├─
Typography
│
├─
Icons
│
├─
Palette
│
└─
...
│
├─
Access
│
├─
Desktop
│
└─
Account
Global
nav
│
├─
Links
group
├─
User
name
├─
Company
name
├─
Toggle
├─
mockup.png
(внешний
вид)
├─
changelog.txt
(история
правок)
└─
behaviour.txt
(use
cases)
24
28. Adobe Creative Cloud
1. Входит в подписку Adobe
2. Интегрируется в Photoshop, Illustrator, ...
3. Синхронизация файлов в облаке
4. Создание, обмен и просмотр
библиотек элементов
28
32. Style guide
1. Веб-страница с описанием визуальных
паттернов (как bootstrap)
2. Описывается при помощи KSS
3. Генерируется с помощью SC5 Style Guide
Generator
32
36. Состав UI Kit
Файловое
хранилище
Библиотеки
Creative Cloud
Style guide
Ревизии + - +
Документация + - +
Доступность
запись
и чтение
чтение чтение
Назначение
Хранение
эталонного
представления
о компонентах
Синхронизация
компонентов
между
дизайнерами
Состояние
реализованных
компонентов
36
37. Workflow подготовки макета
Время
Workflow подготовки макета
Менеджер Дизайнер Разработчик
Формулирование
задачи
Рисует новый компонент
Обсуждают компонент, добавляют его описание
и изображение в облачное хранилище
Собирает макет
из компонентов
Согласовывают макет
Реализует новые
компоненты и макет
37
38. Плюсы использования UI Kit
1. Точка соприкосновения разных проектов
2. Прозрачный рабочий процесс
3. Уменьшение порога вхождения
38