Я полюбил верстку после этого: Zeplin в бою
Иногда я спрашивал себя и Гугл: «Почему мне бывает стыдно быть верстальщиком». Ну, знаете, когда не мог на глазок определить, какой передо мной шрифт: open sans с font-weight: bold, или open sans bold с font-weight: normal — либо случайно узнавал, что «ой, забыли тебе сказать, масштаб был не 1920×1080, а 2560×1440».
Обычно ж как — скидывают .psd и крутись как хочешь.
Весной 2015-го, придя в uKit, я узнал о Sketch — и увидел, как шаблоны стали появляться с красивыми и одинаковыми метками размеров относительно друг друга и очень подробным описанием.
Тогда мне захотелось большего. И буквально через несколько месяцев вышел Zeplin 1.0. Это приложение изменило мое представление о верстке в целом — потому что оно по-настоящему делает жизнь верстальщика счастливой.
Что такое Zeplin и зачем он нужен
Это приложение под Mac и Windows с очень быстрой и неглючной веб-версией (альтернатива для Linux), которое сэкономит вам кучу сил, времени и нервов. Особенно при работе в команде — ведь у него есть интеграция со Slack.
В связке со Sketch вы можете окончить версионную войну файлов и удобно поддерживать макеты в живом состоянии. Когда сложные экраны не перегружены колоссальным количеством слоев и групп слоев, дизайнеру можно легко и на лету вносить мелкие правки — верстальщик увидит их сразу.
Но главное в Zeplin — он позволяет кликать по любому простому векторному объекту на холсте и смотреть всю доступную информацию о нем.
Ровно ту информацию, которую заложил дизайнер — будь то точный размер холста, точные размеры каждого элемента, точные отступы, тени, толщины линии, прозрачности или CSS-коды эффектов.
Еще одна приятность — работа с контентом. Например, можно кликнуть по тексту на макете, и Zeplin позволит скопировать текст. Также вы можете тегировать контент (холсты) внутри папки с проектом и делать в них пометки.
А еще эта штука идеально подходит для работы на трех мониторах:
Три монитора — меньше альт-табить.
Например: средний монитор всегда с кодом. Большой горизонтальный — отображает страницу и, при необходимости, еще одно окно с кодом. На третьем можно держать отладчик DOM-дерева или несколько окон консоли.
Но ведь.
Да, подобное приложение есть и у фотошопа. Но, как и у всего Ps, его юзабилити кажется чрезмерно громоздким. Плюс есть сложности с определением объектов — и если размеры некоторых элементов худо-бедно показываются, то относительные межэлементные расстояния — нет. А это фатальный недостаток.
Интерфейс того же Adobe Brackets содержит много ненужного и мешает фокусироваться на правильном переносе макета.
К великому счастью, в Zeplin есть поддержку фотошоп-макетов — специальный плагин требует минимума знаний о том, как это лучше экспортировать.
Кстати, в последней версии Ps плагин Zeplin встроен из коробки!
Для чистоты эксперимента скажу, что накладки с распознаванием фотошоп-макетов иногда встречаются и у Zeplin — например, он не всегда аккуратно распознает межстрочные интервалы в больших блоках текста.
Но такие моменты должны быть частью договора с дизайнером. Ведь разбивать большие куски на разные объекты правильнее — хотя бы потому, что так удобнее работать.
Как внедрить это в команду
Расскажу, как мы сделали у себя. У нас как: мой отдел верстальщиков — 4 человека — и равный по власти начальник дизайнеров, у которого толпа ребят в штате и на аутсорсе.
Задача облегчалась тем, что все дизайнеры уже сидели на Sketch.
N.B. Совет — предварительно убедите ваших дизайнеров делать макеты не в фотошопе. Например, наглядно показав им разницу отображения содержимого макетов при увеличении в Zeplin во время работы.
Слева — макет, сделанный в фотошопе. Справа — в скетче. В фотошопном видны следы размытия: вроде мелочь, а неприятно.
Дальше вам потребуется сделать три простых шага.
Шаг 1. Заинтересовать, сказав всем: «Пиксель-перфект — не миф и не утопия, а вполне себе реально при правильном инструментарии».
Шаг 2. Договориться с дизайнерами. Обсудить, что нужно прорисовывать и указывать в макетах, а что нет. Да, если ваш дизайнер все еще использует Photoshop, для загрузки в Zeplin достаточно преобразовать макет в смарт-объект и нажать еще 3 кнопки.
Шаг 3. Раздать верстальщикам инвайты, чтобы они вошли в проект и стали радоваться жизни — им больше не нужно помнить о масштабах и экранных линейках при проверке и разработке макета.
Как c ним работается
1. Открываем макет на одном экране. Набрасываем верстку на втором, просто смотря на макет, — продумываем, что делать, как делать, сколько делать.
При этом вы уже точно знаете, сколько потребуется div-элементов, и как это распарсить под React, JQ или просто лендинг. А значит, остается время прикинуть, что применить нового, чтобы немного вырасти на этой конкретной задаче.
2. Zeplin сам автоматически собирает в одном месте все цвета — и чаще всего даже дает им названия CSS-переменных. Остается зумить макет и рассматривать детали. Если же вам не по нраву новомодные нативные переменные CSS, всегда можно перенести их в любимый CSS-препроцессор и назвать через привычный спецсимвол вроде @ или $.
Функционал, который автоматически собирает все встречающиеся цвета в переменные, очень сильно экономит время. Например, если выяснится, что «нужен черный почернее», — достаточно будет просто поменять цвет в одной общей переменной, и он сразу применится ко всем.
3. Дальше разбираемся с версткой и стилями элементов — выбираем элемент в WYSIWYG-режиме на странице, жмем и сразу видим все или почти все, что нужно знать о нем.
Остается поэлементно обрамить верстку в стили. Я обычно иду сверху-вниз — от стилизации контейнеров к внутренним элементам.
Тут Zeplin заметно экономит время. Можно писать стили, просто смотря на макет, и редко отрываясь на использование браузера, чтобы проверить более-менее крупные сущности — не ошибся ли где синтаксически.
Также из приятного — экспорт сразу в готовый CSS, LESS, SASS, SCSS или Stylus. Удобно.
Как-то у меня потерялись буквы Ё и Й
Zeplin 1.0 — это молодое приложение и, по сути, еще находится в бете. А беты без багов не бывает.
Основные проблемы при работе связаны с переносом текста: в процессе он может потерять Й и Ё. Или заменить И на Й на кнопке. Иногда — но это скорее по ошибке дизайнера — внести значок вопроса или набор букв вместо пробела в тексте.
Особая любовь у Zeplin к замене пробелов и буквы И — примеры из разных проектов.
Но даже несмотря на это — копировать тексты одним кликом из макета и вставлять их в нужное место в коде куда быстрее, чем ковырять файлик с текстами где-то в облаке.
Случаются забавные моменты при отображении размеров — но это, опять же, человеческий фактор. Как-то один фриланс-дизайнер напутал с размерностью: он считал, что 1 условная единица это — 1px, а Zeplin — что 1pt.
Но вообще, дело в том, что Zeplin обычно в точности показывает макет, который сделал дизайнер. Так что вы легко можете встретить полпикселя в информации об элементе.
Дробные значения размеров (height: 105.5px) — некий ад перфекциониста.
Есть еще одна очень обидная особенность — нельзя просто в два клика скачать любой выбранный объект. Такая же проблема может возникнуть с картинками.
Конечно, если речь про стандартные иконки, их можно взять из иконочных шрифтов или подключить текстурой из открытых библиотек. А вот если это эксклюзивная картинка, иконка или логотип — тут сначала дизайнер должен в настройках исходника в Sketch указать экспорт конкретного ассета. Да, с фотошопом так, опять же, не получится.
Вот уже второй год, как я снова полюбил верстку. Делитесь своими рецептами и инструментами для получения удовольствия от рабочего процесса.
Задавайте вопросы про Zeplin. Это мировая вещь — на мой взгляд, самое светлое, что случилось между дизайном в клиент-сайдом за последнее время.
Apache Zeppelin
Web-based notebook that enables data-driven,
interactive data analytics and collaborative documents with SQL, Scala, Python, R and more.
Technologies
See more details in Zeppelin supports 20+ different interpreters. LEARN MORE
Deployments
What’s new in
Zeppelin SDK
Not only you can use Zeppelin as interactive notebook, you can also use it as JobServer via Zeppelin SDK (client api & session api)
Spark Interpreter Improved
Spark interpreter provides comparable Python & R user experience like Jupyter Notebook. For the details, click here.
Flink Interpreter Improved
Flink interpreter is refactored, supports Scala, Python & SQL. Flink 1.10 and afterwards (Scala 2.11 & 2.12) are all supported.
For the details, click here.
Yarn Interpreter Mode
You can run interpreter in yarn cluster, e.g. you can run Python interpreter in yarn and R interpreter in yarn.
Inline Configuration
Generic ConfInterpreter provide a way configure interpreter inside each note.
Interpreter Lifecycle Management
Interpreter lifecycle manager automatically terminate interpreter process on idle timeout. So resources are released when they’re not in use. See here for more details.
See more details in 0.10 Release Note
What is Apache Zeppelin ?
Multi-purpose Notebook
The Notebook is the place for all your needs
- Data Ingestion
- Data Discovery
- Data Analytics
- Data Visualization & Collaboration
Multiple Language Backend
Apache Zeppelin interpreter concept allows any language/data-processing-backend to be plugged into Zeppelin. Currently Apache Zeppelin supports many interpreters such as Apache Spark, Apache Flink, Python, R, JDBC, Markdown and Shell.
Adding new language-backend is really simple. Learn how to create a new interpreter.
Apache Spark integration
Especially, Apache Zeppelin provides built-in Apache Spark integration. You don't need to build a separate module, plugin or library for it.
Apache Zeppelin with Spark integration provides
- Automatic SparkContext and SQLContext injection
- Runtime jar dependency loading from local filesystem or maven repository. Learn more about dependency loader.
- Canceling job and displaying its progress
For the further information about Apache Spark in Apache Zeppelin, please see Spark interpreter for Apache Zeppelin.
Data visualization
Some basic charts are already included in Apache Zeppelin. Visualizations are not limited to SparkSQL query, any output from any language backend can be recognized and visualized.
Pivot chart
Apache Zeppelin aggregates values and displays them in pivot chart with simple drag and drop. You can easily create chart with multiple aggregated values including sum, count, average, min, max.
Learn more about basic display systems and Angular API(frontend , backend) in Apache Zeppelin.
Dynamic forms
Apache Zeppelin can dynamically create some input forms in your notebook.
Collaborate by sharing your Notebook & Paragraph
Your notebook URL can be shared among collaborators. Then Apache Zeppelin will broadcast any changes in realtime, just like the collaboration in Google docs.
Apache Zeppelin provides an URL to display the result only, that page does not include any menus and buttons inside of notebooks. You can easily embed it as an iframe inside of your website in this way. If you want to learn more about this feature, please visit this page.
100% Opensource
Apache Zeppelin is Apache2 Licensed software. Please check out the source repository and how to contribute. Apache Zeppelin has a very active development community. Join to our Mailing list and report issues on Jira Issue tracker.
Чем Apache Zeppelin лучше Jupyter Notebook для интерактивной аналитики Big Data: 4 ключевых преимущества
В этой статье мы рассмотрим, что такое Apache Zeppelin, как он полезен для интерактивной аналитики и визуализации больших данных (Big Data), а также чем этот инструмент отличается от популярного среди Data Scientist’ов и Python-разработчиков Jupyter Notebook.
Что такое Apache Zeppelin и чем он полезен Data Scientist’у
Начнем с определения: Apache Zeppelin — это интерактивный веб-блокнот (или «ноутбук» от notebook) с открытым исходным кодом, который поддерживает практически все этапы работы с данными в Data Science, от извлечения до визуализации, в т.ч. интерактивный анализ и совместное использование документов. Он интегрирован с Apache Spark, Flink, Hadoop, множеством реляционных и NoSQL-СУБД (Cassandra, HBase, Hive, PostgreSQL, Elasticsearch, Google Big Query, Mysql, MariaDB, Redshift), а также поддерживает различные языки программирования, популярные в области Big Data: Python, PySpark, R, Scala, SQL. Такая многофункциональность обеспечивается за счет интерпретаторов — плагинов для поддержки языка программирования, базы данных или фреймворка.
С точки зрения работы с большими данными, отдельного упоминания заслуживает встроенная интеграция с Apache Spark, что дает общие контексты (SparkContext и SQLContext), загрузку jar-зависимостей из локальной файловой системы или репозитория maven во время выполнения задачи, а также возможность отмены задания и отображение хода его выполнения. Также Цеппелин поддерживает работу с REST-API Apache Spark — Livy, о котором мы подробно писали здесь. Благодаря интерпретатору Python, Apache Zeppelin предоставляет все возможности этого языка, ориентированные на Data Science, например, специализированные библиотеки (Matplotlib, Conda, Pandas и пр.) для аналитики больших данных и визуализации. Это позволяет автоматически построить круговые, столбчатые и прочие наглядные диаграммы, чтобы визуализировать статистику датасета или результатов исследования. Также в Zeppelin можно создавать интерактивные дэшборды с формами ввода данных, которые будут выглядеть как веб-страницы, чтобы поделиться их URL-адресами для совместной работы. Для многопользовательского режима Zeppelin поддерживает LDAP-авторизацию с настройками доступа [1].
Впрочем, при всех этих достоинствах, на практике можно столкнуться со следующими ограничениями Apache Zeppelin, которые могут рассматриваться как недостатки [2]:
· нестабильная работа под высокой нагрузкой;
· интерактивный веб-интерфейс требует много оперативной памяти;
· отсутствие полного набора возможностей современных специализированных IDE;
· меньшая «зрелость» и популярность по сравнению с Jupyter Notebook.
Тем не менее, Apache Zeppelin завоевывает свою нишу, конкурируя с Jupyter Notebook в некоторых кейсах работы с большими данными. В каких случаях аналитику Big Data или Data Scientist’у следует предпочесть Apache Zeppelin вместо Jupyter Notebook, мы рассмотрим далее.
Apache Zeppelin vs Jupyter Notebook: что и когда выбирать для аналитики Big Data
Прежде всего, отметим, что оба инструмента относятся к open-source и являются веб-блокнотами для разработки и визуализации данных. Однако, Jupyter позиционируется как многоязычная интерактивная вычислительная среда, с поддержкой кода, уравнений, текстов, графиков и интерактивных дэшбордов. Apache Zeppelin не претендует на лавры IDE, хотя и включает некоторые функции для разработки ПО, фокусируясь на возможностях для интерактивного анализа больших данных. Разберем, как оба блокнота отличаются по следующим критериям, важных с точки зрения работы с Big Data [3]:
· безопасность и многопользовательские возможности, которые Jupyter не поддерживает по умолчанию, в отличие от Zeppelin. Кроме того, в Jupyter нет возможности обеспечения конфиденциальности конечных пользователей. Zeppelin позволяет гибко настраивать конфигурации безопасности, включая конфиденциальность программного кода, через LDAP/Active Directory и специально определенные группы безопасности. Он использует только один серверный процесс, аутентифицируя пользователей в настроенной системе, прежде чем разрешить дальнейший доступ, чтобы делиться информацией только с ограниченным кругом лиц с определенными правами.
· визуализация — благодаря возможности использовать разные интерпретаторы в одном блокноте, Zeppelin выигрывает по сравнению с Jupyter, в котором нет параметров построения диаграмм. В Jupyter есть библиотека plotly, которая выводит диаграмму в блокнот, тогда как Zeppelin поддерживает только содержимое Matplotlib — Python-библиотеку построения двумерных графиков, которая просто сохраняет вывод в HTML-файл.
· описание отчетов — оба инструмента поддерживают markdown-разметку, но Zeppelin быстрее создает интерактивные формы и визуализацию результатов. Кроме того, Цеппелин-отчеты более доступны для конечных пользователей и могут быть экспортированы в формат CSV или TSV. Zeppelin позволяет скрыть код, предоставляя читаемые интерактивные отчеты конечным пользователям.
· кластерная интеграция — Zeppelin является частью экосистемы Apache Hadoop и хорошо интегрируется со Spark, Pig, Hive и другими ее компонентами.
· удобство разработки — в отличие от Jupyter, Zeppelin позволяет комбинировать несколько параграфов в одну строку, однако, редактор кода и параграфов в Jupyter кажутся более эффективными, поскольку имеют больше быстрых комбинаций (т.н. «горячих клавиш») и функцию автозаполнения.
· производственная эксплуатация (production) — поскольку Zeppelin зависит от емкости кластера, то при недостатке ресурсов или большом количестве пользователей (более 10), возможны сбои и зависания, которые не характерны для Jupyter.
Подводя итоги, отметим, что Apache Zeppelin — отличный инструмент для аналитики больших данных в экосистеме Hadoop. Он упрощает разработку Spark-приложений и ориентирован на корпоративных пользователей, обеспечивая интеграцию с LDAP, управление разрешениями и интерактивную визуализацию при достаточном количестве ресурсов кластера. Поэтому неслучайно, отечественный разработчик Big Data решений для корпоративных целей, компания Аренадата Софтвер, включила Apache Zeppelin в свой новый продукт — Arenadata Analytic Workspace (AAW), который представляет собой самообслуживаемый сервис (Self-Service) DataScience и BI [4].
В свою очередь, Jupyter Notebook требует меньше накладных расходов на настройку и создание разработанных шаблонов благодаря автономному характеру. А благодаря большому количеству IDE-функций, расширений и поддержке фреймворков машинного обучения (Machine Learning) и других методов искусственного интеллекта, он стал весьма популярным среди индивидуальных Data Science-исследователей [3].
Как на практике эффективно использовать Apache Zeppelin со Spark и другими компонентами экосистемы Hadoop для аналитики больших данных в проектах цифровизации своего бизнеса, а также государственных и муниципальных предприятий, вы узнаете на специализированных курсах в нашем лицензированном учебном центре обучения и повышения квалификации для разработчиков, менеджеров, архитекторов, инженеров, администраторов, Data Scientist’ов и аналитиков Big Data в Москве:
Deliver on the Promise of Design
Bring designs to life in a workspace friendly for the entire team.
handoff+
Bring clarity to design intention
Publish finalized designs from Figma, Adobe XD and Sketch.
Define user journeys with Flows and use Annotations to document behaviors, share requirements, cite API endpoints and more!
Flows allows us to quickly identify missing use cases or predict interaction scenarios that we might not have caught before. This helps us create a product experience that’s seamless across touchpoints.
collaboration
Bring together the multidisciplinary team
An accessible workspace that is friendly to non designers such as developers, product managers, copywriters and more.
Zeplin also helps the team collaborate by providing much needed organization and structure to native design files, including screen variants.
Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.
styleguide
Extend your design system
Drive consistency by surfacing design system elements where developers can easily reuse them. Then, go even further by using Connected Components to extend designs to code!
Connect your tools and build custom workflows
Leverage your investments in tools like Jira, Trello, Slack and VS Code through deep integrations with Zeplin.
With the Zeplin open API and webhooks, you can also create custom workflows to support your specific needs.