• «Плохие» сайты разряжают батарею мобильных устройств

      Если вы любите серфить в интернете с мобильного устройства и периодически замечали, что при посещении Википедии ваш смартфон разряжается значительно быстрее, чем при чтении статей на Хабре, то теперь этому есть разумное объяснение.
      Команда исследователей из Стенфордского Университета провела работу по изучению зависимости разряда батареи от того, какой сайт при этом был открыт в мобильном браузере.
      В качестве тестируемого аппарата было выбрано устройство на Android с 3G-интернетом, на котором открывались популярные сайты, среди которых такие как CNN, BBC, Gmail, Amazon, Microsoft, eBay, Yahoo, Facebook, IMDB, Apple и Wikipedia.


      Читать дальше →
    • Adobe & HTML

        Несколько дней назад компания Adobe представила свой новый сайт html.adobe.com, посвященный HTML, CSS и другим инструментам веб-разработки.


        На данный момент сайт заполнен не до конца, кое-где красуется «coming soon», однако уже имеющийся контент представляет немалый интерес.
        Читать дальше →
      • Треугольники с тенью на CSS

        • Translation
        Скорее всего, вы уже знаете, как сделать треугольник на чистом CSS, использовав свойство border. Если же не знаете, то можно почитать, например, здесь. Но что, если вам понадобятся треугольники с тенью?



        Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман.
        Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, потому что получим что-нибудь в таком роде:



        Давайте посмотрим на несколько альтернативных решений.
        Читать дальше →
      • Подружите мобильный дизайн с пальцами: идеальные размеры для тачскринов

        • Translation
        Не так давно на глаза попалась занимательная статья, в которой автор размышляет о юзабилити мобильных интерфейсов. Некоторые его суждения — из разряда выводов Капитана Очевидности, однако есть там и ряд довольно полезных фактов и доводов, поэтому я решил поделиться ее переводом с хабраобщественностью. Тем более, эта тема может породить полезные дискуссии в комментариях — подозреваю, что многие дизайнеры сами неоднократно сталкивались с этим вопросом.


        Читать дальше →
      • Элемент Date Picker стал доступен в Chrome Canary и Chromium

          Последнее обновление билдов Chrome Canary и Chromium включило поддержку нового элемента для форм — Date Picker. Задав type="date" для input, мы увидим небольшой треугольник рядом с текстовым полем. Кликнув на него, пользователь сможет использовать date picker для выбора даты и ее параметров, и все это без использования JavaScript.

          <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
          



          В комментариях к новости Пол Айриш пояснил, что это не последний вариант имплементации этого элемента и что разработчики прислушаются к любому конструктивному фидбеку.

          Так как это нативный контрол браузера, пока нет никакой возможности, чтобы применить к нему пользовательские стили.
          Читать дальше →
        • Новая функциональность в Google Chrome Canary

            Многие наверное знают о Canary — девелоперской ветке Google Chrome, которая получает ежедневные обновления и которую можно поставить параллельно со стабильной версий Хрома.
            Сегодня в блоге Google Developers Blog появилась новость об очередном нововведении, которое коснулось нативных инструментов для разработчиков в Google Chrome.
            Теперь у нас появилась возможность посмотреть, как будет выглядеть и вести наш сайт или веб-приложение на мобильном устройстве, имитируя нужные нам размеры экрана и тач-ивенты с помощью мыши.
            Как это выглядит, можно посмотреть под катом
            Читать дальше →
          • Переменные в CSS

            • Translation
            Если вы разработчик, то вы точно хорошо знакомы с переменными, и возможно, они одни из ваших лучших друзей. По определению, переменная — это временное хранилище, которое содержит некое значение величины или информации.
            Но каким образом это относится к тому CSS, который мы все знаем? Год назад на Хабре был пост о планируемых новшествах в CSS, которые были оглашены членом рабочей группы CSS и команды Google Chrome. Среди этих новшеств было введение поддержки переменных.
            И вот, буквально на днях, поступили новости о выходе первого релиза рабочего черновика CSS Переменных (CSS Variables).


            Читать дальше →
          • Полезные ссылки для изучения CSS анимации

            • Translation
            Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.


            Читать дальше →
          • Знакомство с Parallax Scrolling

            • Translation
            Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

            Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

            Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.


            Читать дальше →
          • Звезды мирового фронтенда 3. Здесь русский дух, здесь Русью пахнет

              Продолжение предыдущих двух статей — Звезды мирового фронтенда и Звезды мирового фронтенда 2. JS Lovers.
              Я понимаю, что как во многих компаниях и веб-студиях, так и среди фрилансеров, есть отличные технологи, фронтендеры и js-кодеры, которые потенциально могут называться звездами фронтенда. Но опять же, нельзя точечно выбрать одних, а о других умолчать. Поэтому я принял решение рассказать о тех, чьи имена на слуху.
              Некоторых из них периодически можно встретить на Хабре, многие с ними знакомы. Если вдруг я упустил что-нибудь важное, или кто-то хочет что-то исправить или дополнить, отписывайте в коментариях и я буду оперативно обновлять статью.


              Читать дальше →
            • Звезды мирового фронтенда

                В любой профессии есть тонкая прослойка людей, которые являются действительно высококлассными специалистами. Не исключение и область фронт-енд разработки — здесь также есть выдающиеся личности. К их мнению прислушиваются, за ними следят в блогах и социальных сетях и читают их книги. В процессе своей работы они рождают различные оригинальные решения или техники, которые мгновенно расходятся по миру веб-разработки и остаются актуальными не один год. Они создают удобные онлайн-сервисы для верстки, пишут полезные js-библиотеки, совершенствуют браузеры, пропагандируют веб-стандарты и оказывают непосредственное влияние на их развитие. Они могут называть себя front end engineer, front-end developer, web developer, web designer, UI Designer, browser compatibility expert или просто css lover, но для большинства из нас они — звезды мирового фронт-енда, которые делают интернет таким, каким мы его знаем. На Хабре довольно часто появляются обзоры интересных решений, техник и новостей из мира веб-разработки с указанием западных авторов, однако далеко не все знают что-нибудь о них кроме имени. Мне захотелось вкратце рассказать для широкой публики о некоторых из этих товарищей.


                Читать дальше →
              • Креативные сайты с нестандартными элементами

                  Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр



                  Читать дальше →
                • Чего ожидать от WordPress 3.4

                  • Translation
                  Уже через пару недель в свет выходит бета WordPress 3.4, а в середине апреля ожидается ее официальный релиз, который получит довольно интересные нововведения. Предлагаю рассмотреть некоторые из них.


                  Читать дальше →
                • Microsoft выбирает Net Applications для подсчета браузерной статистики

                  • Translation
                  В первых числах каждого месяца в официальном блоге Internet Explorer Microsoft публикует актуальную статистику популярности браузеров. Таким же образом они поступили и первого марта, опубликовав отчет с графиком, на котором IE 9 опережает по популярности браузеры Google Chrome and Mozilla Firefox на ОС Windows 7.



                  Microsoft отталкивается от результатов, взятых у Net Applications. Однако, есть еще одна компания, StatCounter, которая также предлагает результаты статистики на рынке браузеров. В новой записи в блоге IE, Roger Capriotti объясняет причины, почему компания предпочитает использовать технику сбора информации от Net Applications, а не от StatCounter.
                  Читать дальше →
                • Нестандартное применение браузера, или спасибо, Mozilla, за 3d-будущее

                    Многие наверняка знают, что в последней стабильной версии Firefox обзавелся собственным веб-инспектором. Его появление было делом времени, он потенциально очень интересен, однако сейчас речь не конкретно о нем. В 11-ой версии браузера этот инспектор получит интересный апгрейд — 3d DOM Inspector — режим, который ранее можно было увидеть, установив аддон Tilt. Если в двух словах, эта штука может не только визуализировать компоненты сайта, но и взглянуть на них под разным углом, при чем в прямом смысле этого выражения. Примерно так:



                    Читать дальше →
                  • Новый метод замены текста картинкой, или избавляемся от -9999px

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



                      Немного об истории решения этого вопроса.


                      Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:
                      Читать дальше →