• Roundabout — фреймворк для создания карусели на основе JQuery

    Совсем недавно я начал изучать JavaScript, затем JQuery, и теперь потихоньку перехожу к плагинам и фреймворкам построенным на основе вышеупомянутых технологий. Параллельно с изучением JS верстаю небольшие сайты-визитки, и вот у меня возникла необходимость сделать “карусель” из картинок. Оказалось, есть уже готовые решения, и об одном из них я хочу вам рассказать. Данная статья является выдержками с оригинального сайта фреймворка RounAbout.
    Читать дальше →
  • Лайтпак 6. Обзор фоновой подсветки для монитора

      Прошло совсем немного времени после открытия предзаказа и поступления в продажу 6-го Лайтпака. Буквально на днях я получил заветную посылку с последней ревизией устройства. Если коротко, Лайтпак — это фоновая подсветка монитора или телевизора. В продаже есть 2 вида подсветки, это версия для монитора и версия для телевизора. В версии для телевизоров есть отдельный блок питания и вместо 10 отдельных светодиодов используются 30 светодиодов на лентах. В итоге получается по 3 диода на канал, и за счет этого площадь подсветки увеличивается. Подсветку я ставил на монитор диагональю 24". В будущем планирую покупать ТВ для фильмов, поэтому взял версию для ТВ с запасом. Для Лайтпака обязательно наличие компьютера!

      image

      Читать дальше →
    • PHP Console 3.0 — важнейшее обновление за 3 года



        Прошло 3 года с момента выхода первой версии, о которой вы могли читать в статье Как подружить PHP с консолью Google Chrome. За это время расширение набрало 43`000 активных пользователей, и, что не менее важно, в ноябре 2013 обновилось до версии 3.0. Несколько месяцев разработки, и получилась полностью переписанная, в несколько раз более функциональная версия.

        Новый функционал PHP Console 3.0

        • Отладка PHP ошибок и исключений (было в v1.1)
        • Дамп переменных любого типа
        • Выполнение PHP кода удалённо
        • Защита соединения по паролю
        • Группировка данных отладки по URL запроса
        • Открытие файла-строки ошибки в вашей IDE по клику на кнопку в уведомлении
        • Копирование данных ошибки/дампа в буфер обмена(для тестеров)
        • Новый клиент-сервер протокол без ограничений на размер данных
        • Новая PHP библиотека на GitHub
        • Новый плагин для Yii
        • Новый плагин для Laravel
        • Новый плагин для Silex
        • Новый модуль для Drupal (спасибо @Chi-teck)
        • И многое другое...

        В статье:

        • Скриншоты
        • Видео
        • Список функций Google Chrome расширения
        • Список функций PHP библиотеки
        • Голосование за портирование на другие языки

        Читать дальше →
      • jQuery.BEM — декларативный подход к работе с версткой по БЭМ методу

        Уже много всего сказано про БЭМ, чем он хорош, чем плох, и повторяться сегодня мы не будем. Ниже рассказ про то, как работать с БЭМ DOM из jQuery в небольших проектах, где совесть и время не позволяют прикрутить bem-tools, bem-bl и bemhtml, а поработать с удобной системой верстки все-же хочется, оставив позади длинные селекторы в js файлах.

        Заинтересованных приглашаю под кат, за подробностями и примерами использования.

        Читать дальше →
      • PhoneGap: как сделать приложение отзывчивым

        • Tutorial
        На сегодняшний день существует немалое количество обзорных статей о PhoneGap, но к сожалению, написаны они или front-end разработчиками, которые решили заняться мобильными платформами, или нативными программистами, которые решили попробовать себя в кроссплатформенной разработке. И именно с этих позиций рассматриваются достоинства и недостатки PhoneGap'а, возникают статьи о том, «насколько крута кроссплатформа», или об «ущербности кроссплатформенных решений».

        В качестве затравки — видео демо-приложения, написанного за 6 часов; готовым был взят UI-бутстрап, наверстанный за 3,5 часа; использовались библиотеки iScroll, backbone, underscore, Jquery, и небольшая обертка на backbone (RAD.js — rapid application development, архитектурный фреймворк, берущий на себя часть оптимизации, связанной с мобильной средой выполнения).


        Еще 2 часа было потрачено на фикс движка. Но сегодня речь не о том, что что-то тормозит, дергается, или самописный свайп не всегда вовремя отрабатывает на 14000 объектах данных; речь о том, что на PhoneGap можно и нужно писать.

        Выносим на Ваше рассмотрение мнение людей, которые занимаются кроссплатформеной разработкой на PhoneGap, дабы рассказать о том, какие тонкости мы находим нужными и важными при разработке на PhoneGap, и почему они так важны.
        Читать дальше →
      • Загадка выпадающего списка «Амазона»

          Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



          Запаздывание необходимо не только для того, чтобы сберечь ресурсы машины пользователя, но и по соображениям юзабилити: если не добавить задержку, то переводить курсор мыши на выпавшее подменю будет неудобно, придётся вести его сначала горизонтально в меню, не задевая другие пункты, и лишь после выбирать нужный подпункт.
          Читать дальше →
        • Интерактивная инфографика с анимациями CSS и SVG

          • Перевод
          • Tutorial
          Одной из наименее обсуждаемых функций, все чаще появляющейся в последних браузерах, является поддержка файлов формата SVG. Этот формат характеризуется абсолютной свободой в отображении: легко изменяется в размере, может быть отображен в любом разрешении без потери качества. Во многих случаях SVG весят гораздо меньше, чем, например, PNG или JPG.

          image

          Но самое клевое свойство SVG, о котором многие разработчики не знают, это то, что этот формат построен на спецификации XML. C помощью этого мы можем манипулировать элементами SVG файла используя технологии вроде CSS или JavaScript, с которыми разработчики уже знакомы.

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

            Часто меня спрашивают студенты: «Какой элемент сайта самый важный?», на что я им отвечаю — формы. Ведь с помощью форм пользователи совершают почти все конверсионные действия. Именно с этим элементом связано больше всего проблем. В этой статье я постараюсь рассказать, что можно улучшить при взаимодействии с формами. А заодно описать новые возможности работы с ними в браузерах.

            Однако, сначала я бы хотел обозначить свою позицию по разработке таких форм. По-моему мнению, правильным подходом при разработке интерфейсов является подход прогрессивного улучшения.
            Читать дальше →
          • Простая техника Parallax Scrolling

            • Tutorial
            Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

            HTML разметка


            Создаем два блока с атрибутами "data-type" и "data-speed":
            <section id="home" data-type="background" data-speed="10" class="pages">
                     <article>Простая техника Parallax Scrolling</article>
            </section>
            <section id="about" data-type="background" data-speed="10" class="pages">
                     <article>Простая техника Parallax Scrolling</article>
            </section>
            

            Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

            Читать дальше →
          • Делаем превью сайтов в стиле Yandex Браузера

            yandex browserПрошло уже почти два месяца как Yandex порадовал некоторых пользователей новым продуктом — Yandex Браузером. Несмотря на невероятную динамику развития продуктов в этой области (Chrome и Firefox), Яндексу удалось привнести в свой браузер ряд новых идей.

            Из всех особенностей этого браузера больше всего меня зацепило их дизайнерское решение относительно изображений сайтов в «быстрых закладках» (Speed dial). Люди любят глазами и поэтому приятно видеть у себя в новом табе не пустую белую страницу, а красочные картинки. Беда только в том, что лично я, чаще всего, смотрю на подпись под этой картинкой или же на favicon, так как по скриншоту сайта бывает очень сложно его узнать. Эту проблему дизайнеры яндекса, на мой взгляд, решили очень элегантно. В данном посте мы посмотрим, как реализовать эту идею на клиентской стороне.

            Читать дальше →