Рады представить первый выпуск «Самого интересного из мира веб-дизайна». Мы постараемся делать такие выпуски регулярно. В сегодняшнем выпуске мы поговорим про дизайн как таковой: 1) Что должен знать дизайнер об отступах в заголовках; 2) Как иконка прелоадера влияет на наше отношение к сервису; 3) Азы адаптивного дизайна; 4) Использование «Photoshop Generator» для создания прототипов; 5) Руководство по стилю от Yelp. Расскажем о новых интересных и красивых сервисах: 1) Генератор случайных пользователей; 2) Сервис Peek. Видео-отзыв о сайте от реального человека; 3) Recordit.co. Сервис для записи скринкастов; 4) Peekcalendar. Карманный календарь. Покажем, что нового, у всем известных ребят: 1) Iconfinder. Версия 5.0; 2) Новый Ted.com 2.0

---

Что должен знать дизайнер об отступах в заголовках

В своей статье Артём Гобунов раскрывает простое «правило внутреннего и внешнего», которое является частным случаем теории близости. На конкретном примере демонстрируется, как нужно рассчитывать вертикальные расстояния между заголовком и подзаголовком, а также между ними и контентом страницы, чтобы все элементы не «смешивались в кашу».

http://artgorbunov.ru/bb/soviet/20140224/

Практически пять лет назад я опубликовал на Хабре пост про свой типограф: habrahabr.ru/post/67010. Прошло много времени, он несколько раз обновлялся и получал продолжения в модулях для движков и блогов. Пришло время задуматься о самом лучшем и грамотном инструменте, который будет за вас типографировать текст. Именно по этому я вернулся к своему типографу и все начал заново.

Типограф — инструмент для форматирования текста с использованием норм, правил и специфики русского языка и экранной типографики.

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

О продукте

1. Типограф получил поддержку Unicode (это позволяет получать на выходе сразу красивый и форматированный текст без HTML-мнемоники). По умолчанию он отключен, нужно вручную включить.
2. Включил около 70 правил, 30 дополнений и исключений к ним. На сайте есть раздел со всеми общими правилами, там можно подробнее прочитать. Но опять-таки они не все, т.к. есть множество под-правил и условий.
3. Теперь типограф занимаем всего один файл (EMP.php) и доступен для PHP, но в ближайшее время выйдут версии и для Python (в процессе), Ruby, Perl и JS.
4. Инструмент бесплатный и всегда будет оставаться таким. Открытый исходный код. При использовании мы не просим ничего указывать, но будет здорово, если расскажете об этом.
5. Каждое правило можно включить или выключить. Внутри много скрытых правил.
6. Реализована висящая пунктуация (некоторые это называют оптическим выравниванием).

Продолжение предыдущего поста

Предлагаем вашему вниманию очередную подборку с ссылками на новости и материалы.

Приятного чтения!

Коллеги, представляю вам перевод статьи про Супер-продуктивность, которая меня сильно зацепила. Надеюсь, что перевод будет вам полезен для организации своего рабочего времени.

Я познакомился с этой идеей где-то на Hacker News несколько недель назад и адаптировал концепцию для моего собственного образа жизни, и это изменило мой подход к работе.

Супер-продуктивность — как начать работать больше, чем когда-либо

Спустя годы библиотека jQuery стала неотъемлемой частью в работе каждого web-разработчика. Ведь она простая в использовании, быстрая и имеет очень широкие возможности. В этой статье я собрал список из более чем десяти сниппетов, которые вы можете свободно брать для использования. Их очень легко адаптировать под нужды ваших собственных проектов.

Введение

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

Вот уже как 3 года я работаю над одним очень крупным проектом в megaflowers. И, в какой-то момент разработки, когда классов стало слишком много, а их названия стали вида ContentDiscount, ItemDiscount, я понял, что надо с этим что-то делать, и решил ввести неймспейсы в наш проект. Ну, как говорится, гулять так гулять если вводить, то везде сразу, а не там чуть-чуть и там, а в остальных местах нет.

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

Быстрое изменение состояния посреди анимации

Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:

Предлагаем вашему вниманию очередную подборку с ссылками на новости и материалы.

Приятного чтения!

Привет %username%! У нас отличные новости: вышла официальная версия NinjaMock — онлайн-сервиса для создания прототипов. Теперь ты можешь рисовать отличные прототипы веб- и мобильных приложений совершенно бесплатно!

В продолжение моего предыдущего поста о таком интересном инструменте как Yiinitializr, я решил ответить на вопрос о возможностях работы API, предоставляемых шаблоном Advanced. В рамках комментария или дополнительного пункта к прошлой статье материал уместить не удалось, поэтому всех, кого интересует данная тема, приглашаю под кат. В ней мы не будем касаться принципов проектирования правильной архитектуры API, а разберёмся как воспользоваться трудами ребят из 2amigos, которые дали нам возможность быстро (после прочтения статьи — точно быстро) развернуть API для наших проектов на Yii.

Способ реализации работы с API в Yiinitializr

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

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

Следуя традиции, мы решили подвести итоги уходящего года и выделить самые значимые события в мире PHP, которых, к счастью, было немало. И, конечно же, подборка с ссылками на свежие материалы за последние три недели.

Под катом вас также ждет конкурс с призами от компании JetBrains!

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

Webflow

С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js

Функциональный и простой инструмент для создания параллакс эффекта.

Доброго времени суток! Сегодня я хочу поделиться шестью наборами социальных иконок ICON.PACK, которые отрисовал на днях. Все иконки разбиты на 6 групп, отличающихся по форме.

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

Колокольчик — дополнение, а струны — удаления.
Длина звучания зависит от того насколько большая правка.

Всем успешной пятницы!

Слушаем!

Исходники приложения доступны здесь: github.com/hatnote/listen-to-wikipedia

Предлагаем вашему вниманию очередную подборку с ссылками на новости и материалы.

Приятного чтения!

Иногда встречаю в файле .gitignore то, чего там быть никак не должно. Например, папка .idea, в которой лежат конфиги известных IDE от JetBrains. Это часть вашего рабочего окружения и она никаким боком не относится к проекту и репозиторию. Если над проектом работает несколько человек и каждый из них добавит конфиги своего окружения в .gitignore, то он превратится в нечитаемую помойку.

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

Буквально пару абзацев я уделю внимание особенностям взаимодействия этой библиотеки с фреймворком Yii, остальное же в полной мере универсально и будет интересно всем, кто использует или планирует использовать эту библиотеку.

Если вы уже хорошо знакомы с Purifier, то можете смело начинать читать отсюда

Немного о HTML Purifier

Если вы не слышали о такой прекрасной библиотеке (а поиск на Хабре говорит о не такой уж большой популярности) как HTML Purifier, то советую обязательно к ней присмотреться, особенно если ваши пользователи генерируют контент в html формате. Это может быть рядовой пользователь, модератор или даже администратор.
Что же делает эта библиотека?
Согласно конфигурации она очищает любой html код от всех вредоносных, невалидных, запрещенных (вашей конфигурацией) частей кода, в том числе отдельные атрибуты.