Как стать автором
Обновить
Владимир Гусев @vpacifist read-only

Коммуникации и забота о людях

  • Публикации
  • Комментарии

Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma

Разработка веб-сайтов *Интерфейсы *Дизайн мобильных приложений *Управление проектами *Управление продуктом *


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

Фигма и другие современные инструменты позволяют задавать взаимосвязи между элементами, упрощая редактирование отдельных компонентов или целых экранов; группировать их в библиотеки компонентов и давать желаемые права доступа.

Эти принципы теперь называют дизайн-языком или дизайн-системой. Мы закладываем алгоритм разработки всех графических модулей и можем бесконечно масштабировать проект на все типы устройств и разрешения экранов.

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

Всего голосов 12: ↑7 и ↓5 +2
Просмотры 47K
Комментарии 21

Фоторама

Разработка веб-сайтов *


Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.
Читать дальше →
Всего голосов 304: ↑295 и ↓9 +286
Просмотры 53K
Комментарии 111

Руководство по HTML/CSS/JavaScript

CSS *JavaScript *HTML *

Frontend Guidelines

Правила и руководства оформления, форматирования HTML, СSS и JavaScript кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

От переводчика

Приветствую всех снова, меня зовут Максим Иванов, и сегодня я подготовил перевод, который, возможно, окажется для вас полезным. Бенджамин Де Кук (Benjamin De Cock), разработчик из Бельгии, собрал некоторые указания по оформлению кода, которые позиционируют себя как лучшие практики по написанию HTML, CSS, JS. Конечно, существует множество рекомендаций, например, есть хороший гайдлайн от Google, наверное, есть еще что-то, однако, если следовать хотя бы некоторым из них, то можно надеяться, что ваш код станет лучше. В отдельных случаях следование этим гайдлайнам не полезно, а совсем наоборот. В общем и целом, все зависит от вашего опыта и виденья дела, если вы новичок, то скорее вам будет полезно оценить то, что пишут другие и в обществе считается верным, если вы гуру, то наверное вам и не нужны гайдлайны, которые написаны непонятно кем на ваш взгляд. Итак, приступим.
Читать дальше →
Всего голосов 38: ↑29 и ↓9 +20
Просмотры 179K
Комментарии 38

БЭМ-методология: с чего всё начиналось и зачем это всё нужно

Блог компании Яндекс Разработка веб-сайтов *Open source *JavaScript *Яндекс API *
На Хабре уже много писали о методологии БЭМ, выросшей в Яндексе. И мы решили, что пора системно рассказать о том, откуда она появилась и что сделало БЭМ таким, каким мы его знаем. Думаем, это будет интересно не только тем, кто уже использует БЭМ, но и тем, кто считает, что эта методология не подходит для их проектов. Возможно, они увидят, что мы решали проблемы, похожие на их собственные, и найдут что-то полезное для себя.

image

Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
Читать дальше →
Всего голосов 73: ↑58 и ↓15 +43
Просмотры 149K
Комментарии 100

Как оформлять коммиты, чтобы потом не было больно

Блог компании Voximplant Разработка веб-сайтов *Программирование *Git *
Перевод
Несколько дней назад David Demaree, главный по Typekit в Adobe, издал крутую книжку "git для людей". Чтобы привлечь к ней внимание, он опубликовал выжимку самой, на мой взгляд, интересной главы — как оформлять коммиты чтобы и волки были целы, и овцы сыты, и песец не пришел. А я за эти выходные подготовил выжимку из выжимки — сокращенный и адаптированный перевод, чтобы можно было быстро прочитать и добавить в копилку своего опыта самое ценное.
Читать дальше →
Всего голосов 48: ↑44 и ↓4 +40
Просмотры 94K
Комментарии 32

Советы по сетевой оптимизации веб-сайта

Блог компании Websitepulse
image
Оптимизация современного сайта состоит из многих различных аспектов. Все они носят ключевые значения для Вашего бизнеса. Что бы назвать сайт оптимизированным, он должен отвечать следующим требованиям:

– отвечать клиентским запросам как можно быстрее
– быть правильно сконструированным и простым в использовании
– иметь возможность быть использованным людьми с различными физическими недостатками
– иметь возможность быть использованным независимо от потребительского браузера
– быть легко находимым современными поисковыми машинами

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

Быстрая загрузка страницы зависит как от оптимизации клиентского кода HTML / CSS / JavaScript, так и от работы сервера.
Читать дальше →
Всего голосов 5: ↑1 и ↓4 -3
Просмотры 36K
Комментарии 0

Интерактивный прототип в Axure за 20 минут

Веб-дизайн *Usability *
Tutorial
Пока я писал о проектировщиках и прототипах, внезапно выяснилось, что многие читатели не представляют, о чём идёт речь. Поэтому сегодня я решил рассказать о том, что такое интерактивный прототип, сделанный в Axure (произносится как «Экшер», а я привык говорить «Акшура»). И не только рассказать, но и показать.

Если совсем грубо, то интерактивный прототип — это набор связанных друг с другом html-макетов. Только работали над этими макетами не дизайнер с верстальщиком, а проектировщик в специализированной программе, позволяющей сделать эту работу в разы быстрее. В чём будет различие в результате? Прототип, подготовленный проектировщиком, в отличие от макетов, подготовленных верстальщиком, не предназначен для разработки. Он призван очень быстро и наглядно продемонстрировать то, что исполнитель будет воплощать в жизнь на следующих этапах. Это всё равно, что трёхмерная модель готовящегося к строительству здания. На её создание уйдёт гораздо меньше времени, чем на постройку, и она позволит виртуально побродить по будущему проекту.
Читать дальше →
Всего голосов 21: ↑17 и ↓4 +13
Просмотры 144K
Комментарии 9

Приводим в порядок css-код. Опыт Яндекса

Блог компании Яндекс Разработка веб-сайтов *CSS *
Всем привет!

Я работаю над фронтендом огромного проекта — поисковой выдачи Яндекса. И у нас, как и у любого другого большого веб-проекта, есть огромное количество css-кода и немаленькая команда, которая с ним взаимодействует.

Когда много людей, используя разные инструменты, пишут и редактируют css, со временем этот css может получиться очень запутанным, неконсистентым и в целом начинает выглядеть плохо. Например, кому-то удобнее писать вендорные префиксы в одном порядке, кому-то — в другом, кто-то ставит кавычки вокруг url, кто-то — нет, а кто-нибудь фикся срочную багу к релизу мог бы, к примеру, написать position: relative в начале блока свойств, незаметив что где-нибудь внизу между color и box-shadow, уже есть position: absolute, и долго гадать, почему у него ничего не работает.



Но несмотря на то, что все пишут код по-разному, у нас в репозитории идеальный порядок: css-код полностью консистентен, и прекрасно выглядит. Весь.

Как мы этого добились, можно прочитать под катом.
Читать дальше →
Всего голосов 174: ↑169 и ↓5 +164
Просмотры 88K
Комментарии 70

Автопрефиксер — окончательное решение проблемы префиксов в CSS

Блог компании «Evil Martians» Разработка веб-сайтов *CSS *
Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:
a {
    transition: transform 1s
}


Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):
a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}


Эта утилита работает во время выкладки сайта на сервера (и на машине программиста во время разработки), так что не заметна для клиентов и не требует какой-то поддержки от браузеров.

Проблема


К сожалению текущие инструменты плохо решают задачу:
  • Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
  • В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
  • Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
  • Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
  • Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

Понятно, что языки препроцессоров не позволяют решить проблему полностью, нужен был фундаментально новый инструмент.
Читать дальше →
Всего голосов 72: ↑64 и ↓8 +56
Просмотры 48K
Комментарии 81

Чёрточки: только ли тире, минус и дефис?

Типографика *
Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.

Читать дальше →
Всего голосов 311: ↑288 и ↓23 +265
Просмотры 163K
Комментарии 208

300 потрясающих бесплатных сервисов

Веб-дизайн *Типографика *Интерфейсы *
Перевод


Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly.com Domain: Конструктор веб-сайтов.
  • Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
  • Withoomph: Мгновенное создание логотипов (англ.).
  • Hipster Logo Generator: Генератор хипстерских логотипов.
  • Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
  • Invoice to me: Бесплатный генератор счета.
  • Free Invoice Generator: Альтернативный бесплатный генератор счета.
  • Slimvoice: Невероятно простой счет.

Читать дальше →
Всего голосов 341: ↑325 и ↓16 +309
Просмотры 1.5M
Комментарии 107

Список полезных инструментов для CSS разработчика

Разработка веб-сайтов *
Перевод
Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.


Чтобы инструмент был по-настоящему полезен, у него должна быть хорошая документация и дружелюбный интерфейс. К сожалению, некоторые инструменты в списке не полностью попадают под данные критерии. Если кто-то знает лучшие альтернативы с более дружелюбным интерфейсом и большей функциональностью, пишите в комментариях.
Читать дальше →
Всего голосов 179: ↑170 и ↓9 +161
Просмотры 68K
Комментарии 65

Десяток ресурсов, которые помогают быть дизайнером

Веб-дизайн *
Работать дизайнером очень интересно. Это творческая работа. И как любому творческому человеку, дизайнеру нужна муза или вдохновение.

Я уверен, что у каждого дизайнера есть набор сайтов, на которые они периодически заходят для того что бы черпать это самое вдохновение. У меня так же есть такой список. И я хочу им с вами поделиться.

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).
Читать дальше →
Всего голосов 185: ↑166 и ↓19 +147
Просмотры 36K
Комментарии 94

Полупроводниковая электроника

Схемотехника *Научно-популярное Физика Электроника для начинающих
Tutorial


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



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





Иллюстраций: 34, символов: 51 609.



Читать дальше →
Всего голосов 488: ↑479 и ↓9 +470
Просмотры 182K
Комментарии 152

Breadboard — электронный конструктор для всех

DIY или Сделай сам
Привет, Хабр!
Не так давно здесь прогремела статья об Arduino, породившая холивар в комментариях. Многие сторонники Ардуины, по их словам, хотят просто чего-то собрать типа мигающих светодиодов с целью разнообразить свой досуг и поиграться. При этом они не хотят возиться с травлением плат и пайкой. Как одну из альтернатив товарищ dedsky упомянул конструктор «Знаток», но его возможности ограничены набором деталей, входящих в комплект, да и конструктор все же детский. Я же хочу предложить другую альтернативу — так называемый Breadboard, макетная плата для монтажа без использования пайки.
Осторожно, много фоток.
Читать дальше →
Всего голосов 44: ↑38 и ↓6 +32
Просмотры 80K
Комментарии 42

Доставляем голос в мобильной сети: шаг 1 — как голос превращается в электрический сигнал

Блог компании Билайн Бизнес Разработка систем связи *
Все мы пользуемся мобильной связью, и не задумываемся, насколько сложный путь приходится пройти нашему голосу, чтобы быть услышанным собеседником, за сотни и тысячи километров. Огромный объем задач выполняется самой простой телефонной трубкой, даже в момент ожидания вызова (когда она лежит у вас на столе), и поневоле проникаешься уважением к тем, кто все это разработал сначала в теории, а потом и воплотил в реальном оборудовании.



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


Начиналось-то все просто.
Читать дальше →
Всего голосов 40: ↑37 и ↓3 +34
Просмотры 35K
Комментарии 15

CAD для разработки снежинок: SnowFlaker

Delphi *CAD/CAM *

Привет всем.
Да да, это CAD, для разработки снежинок, написанный мной за пару дней.

Предисловие


Вырезая на днях очередную снежинку я задумался. Очень уж неудобно вырезать снежинку вслепую, разворачивать её, и убеждаться, что сделал не то что хотел.
Сначала я стал прибегать к карандашу. Сворачиваем снежинку, рисуем, вырезаем. Но мое воображение продолжало играть со мной злые шутки, я разворачивал и видел очередного уродца.
Почему бы не разработать CAD, чтобы поставить точку в этой ужасной несправедливости?

В статье не будет никакого процесса разработки и программирования. В ней я поделюсь с вами получившейся программой, и расскажу как ей пользоваться. Под катом много картинок.
Забрать сборку под win можно тут: sourceforge.net/projects/snowflaker
Там же исходный код в GIT. Сборки под linux пока нет, но программа написана на fpc, и должна собираться и работать под linux-ом. Добавлена сборка под Linux.
Читать дальше →
Всего голосов 127: ↑127 и ↓0 +127
Просмотры 61K
Комментарии 43

Новогодних баек инженера пост

Блог компании КРОК
image

Самое сложное перед Новым Годом — это составить график, когда инженеру нельзя бухать. Дело вот в чём: у «икс-команды» выездных инженеров есть стандартная дежурная смена, там бойцы просто сидят в офисе. А ещё у нас есть обычные проекты, и по тем, где есть услуга поддержки, всегда должен оставаться кто-то на связи. Поэтому мы и носим с собой ноутбуки и телефоны-модемы даже на вечеринки. И — обязательно — не пьём, если сегодня нужно страховать.

Из примеров — мой коллега как-то пошёл на свидание, и вместо общения с девушкой удалённо поднимал сервер.

А ещё на Новый Год резко меняется адекватность заявок в техподдержку. Один раз, например, 31-го у нас вылетело критичное оборудование: оказывается, заказчик «затушил» стойку, чтобы вызвать инженера. Понимали, заразы, что так его с дежурства не выпустят. Сделали сервисный случай именно под него. Приехал, а там поляна с водкой, довольной заказчик и подарок на Новый год за хорошую работу.

В общем, берите чай, печеньку — и заходите, буду рассказывать.
Читать дальше →
Всего голосов 105: ↑99 и ↓6 +93
Просмотры 80K
Комментарии 93

Откуда есть пошло комплексное число

Математика *
Из песочницы
В современной математике комплексное число является одним из фундаментальнейших понятий, находящее применение и в «чистой науке», и в прикладных областях. Понятно, что так было далеко не всегда. В далекие времена, когда даже обычные отрицательные числа казались странным и сомнительным нововведением, необходимость расширения на них операции извлечения квадратного корня была вовсе неочевидной. Тем не менее, в середине XVI века математик Рафаэль Бомбелли вводит комплексные (в данном случае точнее сказать, мнимые) числа в оборот. Собственно, предлагаю посмотреть, в чем была суть затруднений, доведших в итоге солидного итальянца до подобных крайностей.
Читать дальше →
Всего голосов 144: ↑139 и ↓5 +134
Просмотры 137K
Комментарии 59

Хороших книг пост

Блог компании Мосигра Гаджеты


А давайте давайте соберём здесь хорошие книги, которые просто стоило собрать.
Суть в том, что просто давно стоило сложить хорошие книги в одном посте, чтобы было что прочитать в дороге — или просто для души.
Читать дальше →
Всего голосов 84: ↑72 и ↓12 +60
Просмотры 69K
Комментарии 395

Информация

В рейтинге
Не участвует
Откуда
Санкт-Петербург, Санкт-Петербург и область, Россия
Дата рождения
Зарегистрирован
Активность