• Анимации на GPU: делаем это правильно

      Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.


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

      Читать дальше →
    • Вышел Emmet v1.0

        Рад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.

        Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:

        section>h2+ul.nav>li.nav-item$*5>a

        простым нажатием клавиши превращается в:

        <section>
            <h2></h2>
            <ul class="nav">
                <li class="nav-item1"><a href=""></a></li>
                <li class="nav-item2"><a href=""></a></li>
                <li class="nav-item3"><a href=""></a></li>
                <li class="nav-item4"><a href=""></a></li>
                <li class="nav-item5"><a href=""></a></li>
            </ul>
        </section>
        

        Подробности