• Несколько интересностей и полезностей для веб-разработчика (выпуск 4)

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

      Pace.js — это самый простой способ (документация здесь) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще два универсальных проекта на GitHub: Vex и Messenger — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.

      imageFlat UI Free 2.1
      Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.

      Framer
      Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template.
      Читать дальше →
    • Третья версия типографа Муравьёва

        Типограф Муравьева 3.0

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

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



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

        О продукте


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


        Читать дальше →
      • Я построю свой почтовый сервер с Postfix и Dovecot

        • Tutorial
        image

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

        Мануал пошаговый, основывается на внутренней документации компании и затрагивает совершенно очевидные вопросы. Гуру могут не тратить время, ноу-хау здесь нет – руководство является сборной солянкой и публикуется только потому, что все найденные руководства по развёртыванию почтовика напоминали картинку о том, как рисовать сову.
        Очень много текста
      • Сказ о том, как бы я продвигал сайт или не так страшно SEO как его малюют

        • Tutorial

        Сначала предметная область


        SEO стратегия
        Изначально была мысль написать очень подробный мануал, но потом решил остановиться на стратегиях.

        Ключи/запросы


        Это фразы, которые набираются в поиске, для достижения результата (ответа на вопрос, покупки, получения информации…)
        По частотностям
        НЧ – низкочастотные (величина вычисляется логарифмически относительно самого большого числа запросов по ВЧ запросу из категории), для простоты пусть будет все что ниже 300 запросов (хотя в каждой группе по разному).
        СЧ – среднечастотные (величина вычисляется логарифмически относительно самого большого числа запросов по ВЧ запросу из категории), для простоты пусть это будет все что выше 300 и ниже 2000 запросов (хотя в каждой группе по разному).
        ВЧ – максимальное значение количества поисков простого запроса, к примеру «Светильник».
        По конкуренции
        НК – низкоконкурентные запросы, по которым есть шанс двинуться в топ (мало точных вхождений поисковой фразы, мало главных страниц, низкое количество результатов в поисковой выдаче)
        СК – средне конкурентные запросы, по которым есть шанс продвинуться в топ, но есть и конкуренция (весь топ занят или главными или точными вхождениями, но показатели ссылочной массы конкурентов низкие)
        ВК – высококонкурентные запросы, по которым необходимо из кожи вон вылезти чтоб продвинуться (и топ весь занят, и ссылочная масса ужасающая) при средних бюджетах ВК топ недостижим, но можно долго работать, чтоб кардинально поменять выдачу (закупка сателлитов, ссылочной массы, грамотное внутренне СЕО).

        Семантическое ядро


        Предполагает, что будет оптимизироваться каждая страница сайта. Это значит, что страница конечно будет давать ответ на запрос пользователя, но при этом на ней должен быть материал, который включает в себя эти ответы. То есть признаки, по которым ПС сможет выдать именно эту страницу на это запрос…
        Пока что это сами запросы пользователей – они же «КЛЮЧИ»
        Ключевые фразы подбираются для каждой страницы персонально.
        Для главной страницы берутся общие запросы (описывающие общую категорию и выделяющие общую тематику сайта).
        Для страницы категории выбираются запросы более узкой тематики, выделяющие отдельную категорию в общей всего сайта.
        Для страницы товара/услуги – берутся максимально конкретные запросы, отражающие ее суть и позволяющие максимально точно ее/его идентифицировать.

        0 Стратегия: Тариф Беззаботный


        Минимум затрат, так как трафик тупо покупается у ПС. Других вариантов нет.

        1 Стратегия: На халяву


        Низкоконкурентный трафик – занимается ниша, где есть спрос, но нет конкурентов – классический «кто первый встал – того и тапки».
        Схема до боли проста – ищем свободные ниши, подбираем НК запросы, пишем материал (даем полезное на запрос пользователя) – попадаем в ТОП, для усиления эффекта можно закупить по парочке ссылок.
        Посмотреть нормальные стратегии...
      • Чем тестировать адаптивный дизайн?

        • Перевод
        image

        Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

        Целью ваших движений является имитация экранов различных устройств.

        В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.

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

        Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
        Читать дальше →
      • Командная строка WordPress

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

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

        О преимуществах использования командной строки хорошо известно. Существует ли подобный инструмент для управления WordPress? Оказывается, да. Это wp-cli, интерфейс командной строки для WordPress.
        Посмотрим, что это такое
        • +21
        • 12,5k
        • 9
      • Новое для веб-дизайнера за июнь 2013

          Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"

          Инструменты




          Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу
          Читать дальше →
          • +70
          • 50,4k
          • 9
        • 20 вопросов про веб-шрифты


            Привет, Хабр!

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

            Много текста и картинок
          • Коллекция ресурсов для frontend и backend разработчиков

              image

              Некий dypsilon выложил на GitHub огромную коллекцию ссылок на ресурсы по веб-разработке, за что ему огромное спасибо.

              Список состоит из ссылок на библиотеки, руководства и статьи.

              Frontend: github.com/dypsilon/frontend-dev-bookmarks
              Backend: gist.github.com/dypsilon/5819528 (много node.js)

              Ссылок много, но все — строго по делу и упорядочены по группам (пример для фронтенда):
              1. Архитектура
              2. Фреймворки
              3. Cross Browser
              4. Cross Device
              5. Паттерны и сниппеты
              6. Манипуляция с DOM
              7. … и многое другое

              matmuchrapna советует еще frontdesk Вячеслава Олиянчука.
              Настоятельно рекомендуется добавить в закладки, а лучше — почитать.