Яваскрипт

Просите кадры: пример

Недавно писал про то, что в джаваскрипте надо просить кадры. Решил сделать простой пример.

Задача: написать функцию, которая будет трясти элемент как МакОс трясёт окна авторизации с неправильным паролем.

Сначала надо написать математическую функцию. Для этого ищем сайт который строит график функции и пробуем. В моём случае функция вышла такая:

15 / (x1.25 / 20 + 0.5) * sin (x / 2)

Затем пишем эту функцию на джаваскрипте.

function draw(min, max){
    let pos = (15 / ((Math.pow(min, 1.15) / 10 + 0.5) - 0.05) * Math.sin(min / 2));
    min += 1;
    a.style.transform = 'translateX('+pos+'px)';
    if (min < max){
        requestAnimationFrame(function(){
            draw(min, max);
        });      
    }
}

Функция вызывается рекурсивно, таймеры писать не надо. Чтобы рассчитать длительность надо разделить количество кадров на 60. Я буду запускать эту функцию с параметрами 0 и 80, поэтому длительность анимации будет 1.33 секунды.

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

19 июня, 19:15   джаваскрипт
Аверто — красивые сообщения

В одном проекте понадобилось сделать вывод ошибки через alert(). Сама логика всплывающего уведомления мне понравилась, но то что это окно блокирует интерфейс меня расстроило. Да и внешним видом управлять нельзя.

Я решил сделать свой вариант всплывающих сообщений, так появился проект Аверто.

Аверто — красивый аналог alert(). Нажмите на кнопку чтобы увидеть.

Попробовать

Внешний вид, поведение и содержание сообщений задаётся через джаваскрипт: надо создать объект Averto и вызвать в нём функцию throw, задав параметры.

let Av = new Averto();
Av.throw({
       message: 'Тестовое сообщение'
});

Всего есть 6 параметров:

  • message — единственный обязательный параметр, текст сообщения

  • title — заголовок сообщения

  • color — шестнадцатеричный код цвета фона (по умолчанию красный)

  • autohide — скрывать ли сообщение автоматически (по умолчанию true)

  • timeout — таймаут скрытия в миллисекундах (по умолчанию 3000)

  • blocking — делает сообщение модальным, блокирует интерфейс и ждёт действия пользователя (по умолчанию false)

Цвет тени и текста рассчитывается сам. Приведённый выше пример — минимальный вариант, который запустится.

Объект стоит создавать единожды, т.к. он при инициализации приписывает ХТМЛ и ЦСС для сообщений.

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

Страницу проекта не успеваю оформить, поэтому скачать можно на гитхабе

22 июня, 18:29   джаваскрипт
Странности фронтенда

Веб–разработка свернула куда–то не туда. Сейчас сложно просто начать писать проект, так как надо настроить сборщики.

На первом моём серьёзном проекте галп–файл состоял из 2 задач, сборки цсс и скриптов. На этом сайте галп–файл состоит из 176 строк, сам следит за изменениями, собирает стили через цссо, расставляя префиксы, проходится по скриптам бабелем, настраивает права на файлы и папки. Этот конфиг я писал довольно долго и всё равно приходится периодически обновлять его.

И это далеко не самый страшный случай. Я не использую цсс–препроцессоры (пока) и возможно ещё какие–то интересные штуки.

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

P.S.
Чтобы легко начать писать проект — воспользуйтесь Изнанкой.

30 мая, 8:02   цсс   фронтенд   разработка   джаваскрипт
Просите кадры

Яваскрипт–разработчики, пожалуйста, используйте requestAnimationFrame. Эту крутую штуку поддерживают все браузеры кроме Оперы Мини.

В чём, собственно, соль: в современном вебе много анимаций, которые все любят. Все, кроме браузеров и процессоров. Чтобы отрисовать один кадр веб–страницы, браузеру надо проделать огромный путь по просчёту изменений. Об этом хорошо написано в статье  на Хабре.

Бразуры научились совмещать операции, чтобы сократить число перерисовок и разработчикам дали инструмент, которым можно отложить анимацию до следующей перерисовки,включив её в глобальную очередь. Если же других анимаций рядом нет, то браузер начнёт рисовать наши изменения.

requestAnimationFrame лучше setTimeout, так как учитывает что происходит в браузере. Эта анимация не будет рисоваться в неактивной вкладке и создавать конфликтующие потоки.

Эта конструкция не замедлит выполнение анимации, но при этом уменьшится нагрузку на процессор и выиграем заветные кадры.

16 мая, 23:07   джаваскрипт
Гугл АМП

Ради эксперимента решил прикрутить к этому блогу АМП. Если вкратце, то это приблуда, которая ускоряет загрузку веб-страниц на смартфонах. Пока у меня это не вышло, но все по порядку. Для того, что бы начать работать с АМП нужно выполнить несколько пунктов

  • Подключить джаваскрипт из инструкции

  • Добавить несколько строк в хтмл

  • Убрать из кода сторонний джаваскрипт-код

  • Убрать подргужаемые ЦСС

  • Заменить хтмл-теги на местные

  • Убрать все инлайновые стили

Если с первым и вторым проблем не возникло, то 3й пункт дал повод взрустнуть: для кнопок «поделиться» я использую Лайкли. По этой же причине невозможно реализовать аккуратные динамичные комментарии. С подгрузкой ЦСС ничего особо сложного, просто прописываем стили в заголовок. Замену тегов я реализовал в пхп скрипте, который получает заметки из базы, благо замене подлежат только два тега:img и video.

Сделал все вышеперечисленное, открыл блог ошибок в консоли не было, но все же решил открыть страницу с отладочным флагом #development=1 и увидел тонны совершенно не информативных ошибок. В конечном итоге, понял, что виной всему инлайновые стили, которые мой типограф использует для оптического выравнивания текста.

Так что АМП оставлю на будущее, если решусь изменить типограф (по сути, вместо добавления стиля, он может добавлять класс).

27 мая, 21:33   гугл   джаваскрипт