• Prerender on canvas 2D

    • Tutorial

    В попытках оптимизировать 2D анимацию созданную в canvas, был найден один интересный вариант.


    hero image


    Предварительная визуализация — prerender.


    "А что если записать все кадры заранее и показать их после окончания анимации?" — подумали мы с товарищем и вот что получилось на следующий день.

    Читать дальше →
  • Как создать макет для сайта и не остаться крайним

      Ниже я приведу краткий обзор обязательных моментов на которые нужно обратить внимание при создании web макета для дальнейшей передачи его на вёрстку.



      Они помогут вам:


      • глубже продумать свой макет
      • избежать лишних вопросов
      • получить более качественный результат
      • остаться друзьями с frontend-разработчиком
      Читать дальше →
      • +6
      • 6,2k
      • 9
    • CSS переменные и цветовая тема для сайта в несколько строк

      • Tutorial

      Один из способов использовать CSS переменные уже сегодня


      Создадим сайт который динамически поддерживает светлую, тёмную и цветовые темы.


      Интерактивное демо



      Создаём базовый цвет который будет меняться. Привязываем его к data-theme на html.


      в примерах кода используется & из less/scss синтаксиса


      html[data-theme='green'] {
          --theme-color: 110;
      }
      Читать дальше →
    • Тепловая карта кликов — как пользователи ведут себя на сайте

        Сегодня у нас в руках множество инструментов, исследований и статей по ux/ui и том как сайт будут читать и идентифицировать.


        Но главный вопрос остаётся открытым.


        А знаете ли именно вы, куда пользователи вашего (или сделанного вами) сайта тыкают?



        Сегодня поговорим о кнопках


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

        Читать дальше →
      • Sublime Text 3 жив. (Настройка и работа)

        Sublime Text 3 — кроссплатформенный текстовый редактор.

        Краткий гайд для начинающих работать в sublime и в сфере вёрстки. Тут собрано всё самое необходимое и важное. (По ссылкам найдёте больше, если это нужно)

        Будем рассматривать его для Вёрстки на Pug / Less, где нам не нужен огромный функционал отладки. Поэтому именно этот редактор (по моему мнению) побеждает своих конкурентов как в скорости работы так и в функционале.



        1. Установка программы и контроль за дополнениями (Package Control)


        1. Устанавливаем Sublime Text 3. Тут всё просто — качаем и запускаем.

        Теперь нажимаем ctrl/⌘+shift+p или в меню (Tool > Command Palette).

        Тут мы можем Скачивать, устанавливать, удалять, просматривать дополнения и т.д.

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