CSS градиентный текст

Веб-разработчики знают, что мы все должны были улучшить шрифты в Интернете. Будь то время загрузки, странные стратегии использования пользовательских шрифтов (Cufon, кто-нибудь?) Или просто поиск правильного шрифта, украшение текста в Интернете никогда не было легким.
Это заставило меня задуматься о шрифтах и ​​CSS-градиентах, поскольку у градиентов также было сложное введение в веб. Давайте посмотрим, как мы можем использовать градиентные шрифты только с CSS!
Чтобы отобразить градиент для заданного шрифта вместо сплошного цвета, вам нужно использовать некоторые префиксные свойства old-school -webkit -:

.gradient-text { / * стандартный градиентный фон * / фон: линейный градиент (красный, синий);

  / * клип взломать * /
  -webkit-background-clip: текст;
  -webkit-text-fill-color: прозрачный;

Эта смесь CSS-специфичного для -webkit и общего градиентного фона была обнаружена десять лет назад, но остается лучшим способом получить чистый CSS-фон, даже с пользовательскими шрифтами. Обратите внимание, что несмотря на префикс -webkit, Firefox по-прежнему правильно отображает градиентный шрифт. Также обратите внимание, что удаление префикса нарушает правильную визуализацию - странно!

С настолько сложным, насколько это возможно со шрифтами, это здорово, что у нас есть довольно простой CSS-хак для создания градиентного текста. Жаль, что отказ от префикса -webkit нарушает функциональность, но добро пожаловать в мир CSS!

Мне нравится, что мультимедиа перешло от пользовательских плагинов (Flash… gross) к базовым элементам HTML <video> и <audio>. Рассматривая эти медиаисточники как еще один элемент, мы можем, например, использовать CSS-фильрты для настройки отображения. Чем меньше нам нужно делать с ffmpeg или плагинами, тем лучше.

Я заметил, что на многих сайтах видео реализована функция регулировки скорости воспроизведения видео, что замечательно, если вы пытаетесь быстрее пролистать некоторые спортивные моменты или увидеть, как монстр хлопает в супер медленном движении. Я надеялся, что не требуется какой-то особый тип сервера для отправки файла более медленными или быстрыми частями, и я был прав: все, что вам нужно, это свойство playRate!

const video = document.querySelector ("video");

// Замедляем скорость до 50%
video.playbackRate = 0,5;

// В два раза быстрее!
video.playbackRate = 2;

// Вернуться к нормальному
video.playbackRate = 1;
Использование числа меньше 0 замедляет видео, число больше 1 ускоряет видео, а 1 восстанавливает видео до нормальной скорости. Также обратите внимание, что воспроизведениеRate не является атрибутом HTML - это свойство.
Регулировка скорости воспроизведения - это не то, что вы хотели бы сделать для всех видео сайтов, но если вы думаете, что это понравится вашим пользователям, это всего лишь одно свойство HTML-элемента!
Сенсорная панель на MacBook с самого начала была предметом споров. Многие оплакивали потерю клавиши выхода, в то время как другие отказывались покупать новый ноутбук, чтобы полностью избежать сенсорной панели. У меня не было много проблем с сенсорной панелью, но в основном потому, что я ею не пользуюсь.
Одним из необходимых применений сенсорной панели является регулировка громкости. Недавно объемная часть сенсорной панели перестала работать на меня; хотя я даже не касался значков громкости. Некоторое время я менял громкость через командую строку но это расстраивало меня . К счастью, я нашел эту удобную команду для перезапуска регуляторов громкости и яркости:


killall ControlStrip 


После выполнения этой команды мои кнопки громкости на сенсорной панели снова заработали!
Очень неприятно, когда ошибки появляются только в удаленном браузере. Что-то в этом пользователе, устройстве или среде отличается, но я не знаю что! И, конечно, я не могу воссоздать его на своей локальной машине разработки.



Команда в TrackJS придумала классный способ подключения и отладки этих удаленных браузеров, которые мы называем RemoteJS . RemoteJS - это бесплатный сервис, где вы можете подключить упрощенный отладчик JavaScript к удаленному браузеру. Отладчик предоставляет удаленную консоль, где вы можете просматривать журналы, URL-адреса, сетевые события и выполнять команды. Вы даже можете вытащить удаленный скриншот.

Чтобы использовать его, просто создайте новый «канал отладчика», к которому агенты будут подключаться. Подключение агента осуществляется с помощью фрагмента JavaScript, который подключается к браузеру, и устанавливает соединение через веб-сокет с веб-отладчиком. Вы можете развернуть его условно, чтобы поймать надоедливого hesnboy , возможно, активировать, если присутствует строка запроса `? Debug`. Вы также можете выполнить его напрямую или в виде букмарклета, если не можете выполнить развертывание.