Замок

Адаптивное изображение замка, выполненное с помощью SVG, SCSS и библиотеки GSAP.js.

#css #js

Как можно задать задержку для CSS-анимации?

Свойство animation-delay задает задержку воспроизведения CSS-анимации.

Пример:

.element {
animation-delay: 1s;
}

Значением может быть любое число, как отрицательное, так и положительное. Если значение положительное, то будет задержка перед началом анимации. Если значение отрицательное, то анимация начнётся как бы за кадром.

#css

Интересный эффект при наведении мыши.

#css

Building Large-Scale Web Applications with Angular

Авторы: Chandermani Arora, Kevin Hennessy, Christoffer Noring, Doguhan Uluca
Год издания: 2020

#angular #english

Коллекция текстильных паттернов

Все паттерны созданы при помощи CSS-градиентов, без каких-либо изображений. И они очень маленькие!

#css

​7 + 1 способ анимировать спиннер

Иногда спиннер тормозит и забирает больше ресурсов, чем сама задача. Рассматриваем варианты решения проблемы с индикатором загрузки.

#css #js

Sliding Sign In Sign Up Page

Форма авторизации и регистрации с анимацией переключения между ними.

#css #js

Scroll-linked и ScrollTimeline анимация

Scroll-linked Animations — это экспериментальное дополнение, которое позволяет нам связывать анимацию с прокруткой: когда вы прокручиваете контейнер прокрутки вверх и вниз, связанный элемент также продвигается или перематывается соответственно.

#js #css

Плата Arduino

Анимированная плата Arduino, выполненная с помощью CSS, без использования JavaScript.

#css

Hands-on Nuxt.js Web Development

Автор: Lau Tiam Kok
Год издания: 2020

#nuxt #vue #english

Что такое арность? Как получить арность функции в JS?

Арность — это количество аргументов функции. Например — вот объявление пары функций:

 function fn(a, b) {
     //...

 }
 function fn2(a, b, c) {
     //...

 }

Функция fn принимает два аргумента (это бинарная или 2-арная функция), функция fn2 принимает три аргумента (тернарная, 3-арная функция).

В JS можно получить арность функции с помощью свойства length:

function foo(x, y, z) {
return foo.length; // Will return 3
}

#js

На ноль делить нельзя!

Калькулятор на JavaScript предупреждает, что на ноль делить не надо, но если все же попробуете, то увидите интересный эффект.

#js

​fuite - инструмент для поиска утечек памяти в веб-приложениях

Дебаггинг утечек памяти - непростая задача. Для этого есть инструменты, но они в массе своей сложные и неудобные. Поэтому многие разработчики не слишком активно мониторят утечки. Возможно, fuite это изменит?

#en

Hamburger Icons Animations

Несколько вариантов анимации иконки-гамбургера, реализованные с помощью CSS и JavaScript.

#js

Cross-Platform Desktop Applications

Автор: Paul Jensen
Год издания: 2017

#english

Как добавить HTML элементу обработчик события?

addEventListener() добавляет элементу действие, которое будет выполнено после срабатывания события. Например, после клика мыши или нажатия клавиши.

Найдем первую кнопку на странице и будем выводить сообщение в консоль, когда произошел клик по этой кнопке.

const element = document.querySelector('button')

element.addEventListener('click', function (event) {
console.log('Произошло событие', event.type)
})

При вызове функции в нее передаётся специальный объект (в примере выше — event), который у разных типов событий разный. Например, у событий нажатия клавиши есть код клавиши, а у событий перемещения мыши — координаты.

#js

Переключение тем

Темы оформления с возможностью переключения, выполненные с помощью PostCSS и JavaScript.

#css #js

27 основных однострочных функций JavaScript

Список из 27 однострочных функций JavaScript, которые используются ежедневно и необходимы каждому разработчику.

#js

CSS Loading Animations

Подборка оригинальных загрузчиков на чистом CSS.

#css