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

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

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

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

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

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

Frontend Guidelines

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

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

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

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



Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.

Несколько дней назад David Demaree, главный по Typekit в Adobe, издал крутую книжку "git для людей". Чтобы привлечь к ней внимание, он опубликовал выжимку самой, на мой взгляд, интересной главы — как оформлять коммиты чтобы и волки были целы, и овцы сыты, и песец не пришел. А я за эти выходные подготовил выжимку из выжимки — сокращенный и адаптированный перевод, чтобы можно было быстро прочитать и добавить в копилку своего опыта самое ценное.

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

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

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

Быстрая загрузка страницы зависит как от оптимизации клиентского кода HTML / CSS / JavaScript, так и от работы сервера.

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

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

Всем привет!

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

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



Но несмотря на то, что все пишут код по-разному, у нас в репозитории идеальный порядок: 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, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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

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

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

Автор оригинальной статьи 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: Невероятно простой счет.

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


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

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

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

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

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

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

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

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

Привет, Хабр!
Не так давно здесь прогремела статья об Arduino, породившая холивар в комментариях. Многие сторонники Ардуины, по их словам, хотят просто чего-то собрать типа мигающих светодиодов с целью разнообразить свой досуг и поиграться. При этом они не хотят возиться с травлением плат и пайкой. Как одну из альтернатив товарищ dedsky упомянул конструктор «Знаток», но его возможности ограничены набором деталей, входящих в комплект, да и конструктор все же детский. Я же хочу предложить другую альтернативу — так называемый Breadboard, макетная плата для монтажа без использования пайки.
Осторожно, много фоток.

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

Предисловие

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

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

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

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

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

В общем, берите чай, печеньку — и заходите, буду рассказывать.

В современной математике комплексное число является одним из фундаментальнейших понятий, находящее применение и в «чистой науке», и в прикладных областях. Понятно, что так было далеко не всегда. В далекие времена, когда даже обычные отрицательные числа казались странным и сомнительным нововведением, необходимость расширения на них операции извлечения квадратного корня была вовсе неочевидной. Тем не менее, в середине XVI века математик Рафаэль Бомбелли вводит комплексные (в данном случае точнее сказать, мнимые) числа в оборот. Собственно, предлагаю посмотреть, в чем была суть затруднений, доведших в итоге солидного итальянца до подобных крайностей.

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

Введение

Когда говорят о передачи видео по сети, в основном речь идёт о видео-кодеках и разрешении. Собственно о передаче видео слышно не так и много. Здесь я бы хотел пролить немного света на проблему борьбы с потерями в сети при передачи видео в режиме видеоконференций. Почему потери — это так важно? Да потому что нельзя просто так взять и пропустить хоть один видео пакет (в отличии от аудио), т.к. любой приличный видео-кодек основан на том, что последовательные кадры отличаются не сильно и достаточно закодировать и передать только разницу между кадрами. Получается, что (почти) любой кадр зависит от предыдущих. И картинка при потерях разваливается (хотя некоторым это даже нравится). Почему видеоконференции? Потому что есть очень жесткое ограничение на реальное время, ведь задержка в 500мс на круг (туда-обратно) уже начинает раздражать пользователей.
Какие же существуют методы борьбы с потерями видео-пакетов?