Professional JavaScript

Авторы: Hugo Di Francesco, Siyuan Gao, Vinicius Isola, Philip Kirkbride
Год издания: 2019

#javascript #english

Cubic Clock

Кубические часы, выполненные с помощью Haml, SCSS и JavaScript.

#css #js

​Погружаемся в CSS: как использовать :where()

Функция :where() помогает писать меньше кода, применять стили ко всему списку и снимает головную боль при использовании CSS reset. В статье разберёмся, как это работает, и посмотрим на примеры использования.

#css

Shiny Debit Card

Верстка банковской карты на HTML и CSS с бесконечной анимацией поворота.

#css #html

JavaScript for Gurus

Автор: Ockert J. Du Preez
Год издания: 2020

#javascript #english

Задача

Напишите функцию-конструктор Accumulator(val).

Объект, который она создаёт, должен уметь хранить текущее значение в свойстве value. Начальное значение устанавливается в аргументе конструктора val.
Метод read принимает один параметр (число) и прибавляет его к свойству value.

Ответ

Social Media Icons with Popups

Иконки с всплывающими подсказками, выполненные на чистом CSS, без использования JavaScript.

#html #css #js

Electric strings

Электрический "паук", который следует за движением курсора. Реализован с помощью JavaScript.

#js

Задача

Реализуйте функцию isTwinPrime, которая возвращает true, если:

1. number является простым числом
2. number+2 или number-2 является простым числом.

Если хоть одно условие не выполняется, возвращать false.

Пример:
Возьмем число 7.
1. 7 - простое число.
2. 7+2 = 9, 7-2 = 5. 5 - простое число.
Результат: true

Ответ

​Темная сторона шрифта

Шрифт—это не только дизайн. Современный шрифт—это сложный цифровой продукт, который объединяет данные разных типов. Это и математика описания кривых, и программный код, и инструкции по настройке отображения знаков на экране.

Out-of-Bounds

Генерация теннисных мячиков при клике, выполненная с помощью CSS и библиотек Three.js и Cannon.js

#html #css #js

JavaScript: The Definitive Guide

Автор: David Flanagan
Год издания: 2020

#javascript #english

Directionally aware hover

Эффект hover, который открывается с той стороны, с которой на него навели мышкой. Реализовано без использования JS.

#css #html

​Полезные приемы работы с DevTools

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

#en

Rubber Slider

range slider с "резиновым" эффектом, реализованный с помощью jQuery, GSAP и TweenMax.js.

#js