Pull to refresh
5
9.1
Send message

Обновил пример с учетом prefers-reduced-motion.

Определенно, в настоящем проекте я бы остановился на JS решении.

Могу посоветовать почитать про то, как настроить prefers-reduced-motion для вашего браузера. Если разработчики сайта позаботились об этом, раздражающих анимаций должно остаться меньше.

Спасибо за комментарий!

Ну ок, вы сделали это не на javascript, а на css - вероятно это будет чуть меньше жрать процессор и память (не факт). Кроме как похвастаться другому дизайнеру - эти кнопочки полезнее не стали.

Вы же понимаете, что верстальщик ≠ дизайнер 😅 Моя задача выполнить поставленную задачу так, чтобы ваш вентилятор разгонялся чуть медленнее 😊

Вероятно также думали разработчики, которые писали на jQuery в своё время (не смотря на всю разницу между jQuery и TS). Предлагаю все таки придерживаться каких-то правил и указывать TS, если речь идёт о TS, и JS, если речь идёт о чистом JS. Иначе многие начинающие разработчики могут не понять неожиданный синтакс.

В заголовке указан JavaScript, а в примерах TypeScript. Наверное, не стоит подразумевать, что все JavaScript разработчики пишут на последнем. Тем более, что эту статью могут найти через много лет, когда TS может быть уже не таким популярным, и это введёт в заблуждение.

Так разве не для этого все разбивается на небольшие компоненты, чтобы из них можно было собрать хоть туду-лист, хоть космодром? Поддерживаю ответившего выше, про «ускорить разработку» заявление сомнительное. Prop-types обычно хватает за глаза.
По поводу анимации волны на CSS. Печально что приходится использовать JS для визуального эффекта. Могу предложить CSS only решение, которое использовал в одном проекте (разница лишь в том, что волна всегда будет начинаться в центре кнопки:

// Cначала задаете стили для "волны" и скрываете ее через transform

.btn:before {
    ...
    transform: scale(0,1);
}

// Имитируте клик по кнопке и добавляете необходимую анимацию

.btn:focus:not(:active):before {
    animation: wave-animation ...;
}

// Анимация

@keyframes wave-animation {
    0% {
        opacity: 0;
        transform: scale(0,1);
    }
    50% {
        opacity: 1;
        transform: scale(.5,1);
    }
    100% {
        opacity: 0;
        transform: scale(1,1);
    }
}


http://codepen.io/Deka87/pen/zNJyqg.
Т.е. тут действует правило вычитания, а не сложения (т.к. при смешении всех цветов получается белый).
Я не совсем разбираюсь в теме, но совсем давно вроде бы считалось, что основные цвета — это красный, синий и желтый, из которых можно было получить любой другой цвет. Всегда было интеренсо, почему желтый заменили на зеленый, и как из красного, зеленого и синего получить сложением желтый?
… если у сайта нет форм ввода, то последний сценарий не наступит.


Имеется ввиду любая форма ввода, или же не содержащая полей для ввода пароля и данных платежных карт?

Иногда достаточно просто подписаться на RSS ленту того же Upwork почти с мгновенным уведомлением.

Правильно! В моем случае я просто скопировал данный код для каждой страницы, но для больших проектов придется придумать более изощренное решение.
Не знаю, как это влияет на ранжирование в Google или поведение посетителей, но на оплату от клиента это влияет напрямую!
У заказчика в шаблоне не отображались социальные иконки типа Twitter, Facebook и т.п. Все стили перепроверил вдоль и поперек пока на SO не посоветовали заказчику отключить Adblock. Казалось бы они там еще даже ссылок не было на социальные сервисы, просто иконки типа:
<i class="fa fa-twitter" title="Twitter"></i><span class="sr-only">Twitter</span>
. После этого также взял себе на заметку проверять с/без Adblock.
А мне почему-то всегда было удобнее с парой Sign In / Sign Up. Сначала я ищу глазами Sign, а потом уже решаю, что я хочу — In или Up ;-)
Я говорил о персональных компьютерах в принципе в противоположность мобильным тач-устройствам.
До сих пор не понимаю, как можно работать с мобильного телефона полноценно. Читать — без проблем, а вот писать что-либо или выполнять другие задачи считаю проблемным.
1

Information

Rating
685-th
Registered
Activity