• Новые 5 способов ускорить запросы API Facebook

      Прошлой осенью я публиковал на Хабре пост Пять способов ускорить запросы API Facebook на практике, который оказался неплохим сборником рецептов. За это время Facebook API сильно изменился, став еще лучше. Теперь я редко встречаю задачи, с которыми я бы не смог справиться за один HTTP запрос к API. А все благодаря новым возможностям, о которых я и расскажу сейчас.

      image

      Вот какие способы были в прошлый раз:
      1. Запрашиваем только необходимые поля
        me?fields=id,name,birthday
      2. Запрашиваем данные нескольких объектов в одном запросе
        ?ids=4,501012028
      3. Используем фильтрацию и пагинацию
        me/friends?limit=10&offset=10
      4. Используем запросы FQL
        fql?q=SELECT uid, name, birthday_date FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me())
      5. Отправляем Batch Request с несколькими запросами
        batch=[{«method»:«GET», «relative_url»:«me»},{«method»:«GET», «relative_url»:«me/friends?limit=50»}]

      Читать дальше →
    • Оптимизация графики для Retina-экранов

      • Translation
      После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

      Для начала разберемся в терминологии.

      Физические пиксели


      Читать дальше →
    • Google Analytics для сбора ошибок JavaScript

        image
        Не так давно на Хабре была статья про навороченный стартап, заточенный на сбор ошибок JavaScript. Далеко не всегда нужно столько возможностей, но оказалось, что многие просто не знают про старый бородатый способ с Google Analytics. Про него я и попытаюсь кратенько рассказать.
        Читать дальше →
      • Библиотечка datef — форматирование дат

          Разрешите представить datef — мини-JS-библиотеку вывода даты в разных форматах.
          Вкратце опишу имеющиеся фичи:
          • Выполняет одну и только одну задачу: вывод дат в разных, потребных юзеру форматах;
          • Работает в nodejs и в браузерах. В браузерах может работать как requirejs/amd-модуль;
          • Не мусорит в прототипах встроенных объектов;
          • Написана в strict mode;
          • Обильно аннотирована в js-doc-формате;
          • Не имеет внешних зависимостей.

          Примеры использования:
          datef('dd.MM.YY', new Date()); // "13.08.12"
          datef('dd.MM.YY'); // второй аргумент необязателен — берется «сейчас»
          
          var d = new Date();
          d.setFullYear(2045);
          datef('dd.MM.YYYY', d); // "13.08.2045"
          
          // есть несколько заранее заданных форматов:
          datef.formatters.ISODateTimeTZ(); // "2012-08-13T15:01:29 -04:00"
          
          // можно определить и сохранить свой…
          datef.register('myFormat', 'd.M.YY');
          datef.formatters.myFormat(); // "13.8.12"
          
          // или просто получить его как отдельную функцию
          var myFormat = datef.createFormatter('d.M.YY');

          Копание во внутренностях и лирические отступления
        • Leaflet 0.4 — новая версия открытой JS-библиотеки для интерактивных карт



            После пяти с половиной месяцев разработки с момента выхода предыдущей версии, очень рад наконец представить вам Leaflet 0.4 — новую версию легковесной JavaScript-библиотеки для интерактивных карт, которая одинаково хорошо работает и на десктопных браузерах, и на мобильных устройствах.

            Этот релиз, к которому приложило руку 33 разработчика, несёт в себе более простой, удобный API и громадное множество улучшений и исправлений вместе с масштабным обновлением документации, запуском официального блога и страничкой плагинов. Давайте рассмотрим улучшения по порядку.
            Читать дальше →
          • Moqups — новый сервис для создания макетов UI

              Как характеризуют сервис сами разработчики, Moqups — это «изящное HTML5-приложение для создания макетов, концептов пользовательского интерфейса, прототипов, в зависимости от того, как вы сами это называете».



              Для Chrome есть отдельное приложение.

              На данный момент доступно более 60 шаблонов элементов, экспорт в PDF и PNG, клавиатурные шорткаты, группировка объектов, привязка к сетке и проч.

              Проект находится в стадии активной разработки и открыт для критики, помощи и предложений.
            • Как создать видео-проигрыватель на JQuery, HTML5 и CSS3

              • Translation
              image

              В этом уроке мы будем создавать видео плеер, для этого будем использовать CSS3 для моделирования и библиотеку «MediaElement.js» для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который работает в старых браузерах имитируя MediaElement HTML5 API с помощью Flash и Silverlight.

              Демонстрационный вариант
              Исходные файлы
              Читать дальше →
            • 62 полезных инструмента для адаптивного дизайна (Responsive web design)

              • Translation
              UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

              Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

              Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

              Техники Responsive web design


              1. CSS Transitions and Media Queries
              CSS Transitions и Media Queries

              Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?



              Читать дальше →
            • oEmbed. Делаешь веб-сервис? — Делай и oEmbed



                Конечно вы видели этот эффект, когда вставляешь в фейсбуке или вконтакте ссылку, и в посте тут же начинает подгружаться какой-то контент с сайта, на который ведет ссылка. И я видел, но даже не представлял, насколько это легко можно сделать с oEmbed'ом.

                oEmbed.com — впринципе, на этом можно было бы и закончить читать тем, кто хочет провести самостоятельное мини-исследование.
                Но вот мой рассказ, как этим пользоваться и много ссылок
              • Реалистичные тени при помощи CSS3 без использования изображений

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

                  Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

                  image

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