Загрузка...
Использование JavaScript SpeechSynthesis API для синтеза речи, то есть для преобразования в браузере текста в речь и его многочисленные особенности.
Преобразование текста в речь c помощью JavaScript
Уменьшающаяся при прокрутке «шапка» страницы без JavaScript
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
Выезжающая боковая панель (sidebar)
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
Календарь с помощью CSS-grid в несколько строк кода
Макет сетки календаря — идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
Адаптивная CSS-grid сетка в 3 колонки с помощью 3-х CSS-свойств
Как сделать простой адаптивный макет с сеткой в 3 колонки с помощью CSS-grid и всего 3 CSS-свойств grid-area, grid-gap и grid-template-area.
Float-блоки по углам контейнера c текстом вокруг
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
Поиск в DOM ближайшего родителя с position: relative
Отладка взаимного позиционирования HTML-элементов и поиск ближайшего родителя с CSS-свойством position: relative с помощью JavaScript в консоли браузера.
Передача данных между CSS и JavaScript с помощью CSS-переменных
Практические примеры обмена данных между CSS и JavaScript с помощью CSS-переменных. Передача значений настраиваемым CSS-свойствам из Javascript.
CSS-свойство aspect-ratio
Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.
Node.textContent и Element.innerText для получения и установки текста
Оба метода Node.textContent и Element.innerText используются для получения и установки текста в HTML-элементе, рассмотрим их сходство и отличие.
Event Loop, Callbacks, Promises, и Async/Await, часть 4 из 4
Функция async позволяет обрабатывать асинхронный код таким образом, чтобы он выглядел синхронным. Функция async под капотом по-прежнему использует обещания (promise), но имеет более традиционный JavaScript-синтаксис.
Event Loop, Callbacks, Promises, и Async/Await, часть 3 из 4
Обещание (promise) представляет собой завершение асинхронной функции. Это объект, который может вернуть значение когда-нибудь в будущем. Он выполняет ту же миссию, что функция обратного вызова (callback), но с множеством дополнительных фич и более читаемым синтаксисом.
Event Loop, Callbacks, Promises, и Async/Await, часть 2 из 4
Функции обратного вызова (callback) не имеют специального синтаксиса; это просто функция, переданная в качестве аргумента другой функции.
Event Loop, Callbacks, Promises, и Async/Await, часть 1 из 4
Рассмотрим работу цикла событий (event loop), а также разберём два элемента цикла событий: стек (stack) и очередь (queue).
Руководство по CSS-переменным
Настраиваемые CSS-свойства для каскадных переменных, о которых давно просили, но которые всё ещё недостаточно используются, предлагают революционные возможности для совместной работы и повторного использования кода.
CSS Scroll Snap
Ключевые свойства спецификации Scroll Snap. CSS-cвойство scroll-snap-type используется в контейнере со скроллом для определения его типа и направления.
Градиент для текста
Как с помощью CSS сделать градиентную заливку текста.
Текст внутри круга с помощью CSS
Вписать текст в окружность можно с помощью CSS-свойства shape-outside и несложной HTML-разметки.
Асинхронный доступ к буферу обмена
Безопасный доступ к буферу обмена для текста и изображений с помощью JavaScript методов Async Clipboard API.
Как с помощью CSS определить полноэкранный режим
CSS медиа-запрос (@media) display-mode можно использовать для проверки режима отображения приложения.