CSS box-sizing
box-sizing используется для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов.

Значения:
content-box (по умолчанию) - ширина и высота включают в себя только содержание элемента.
border-box - ширина и высота включают в себя содержание элемента, borders и padding.
padding-box - ширина и высота включают в себя содержание элемента и padding. Доступен только в Firefox!

Самый распространенный вариант использования:
*, *::before, *::after {
box-sizing: border-box;
}
Вы задаете ширину элементу, и вам не нужно производить вычисления при изменении границ, или внутренних отступов.

Largest pair sum in array

Дан массив чисел.
Необходимо найти сумму двух наибольших чисел в массиве

Во входном массиве содержится минимум два элемента.

Canvas анимации на JS

В данной подборке автор собрал много интересных анимаций на canvas, в том числе с применением сторонних библиотек, таких как:
particles.js, GSAP 3.0

CSS background

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

Свойства:
background-color устанавливает цвет фона элемента.

background-image устанавливает фоновое изображение.

background-repeat определяет, повторяется ли изображение по горизонтали или вертикали.

background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.

background-position устанавливает начальное положение изображения.

background-size устанавливает размер фоновых изображений.

Свойство background позволяет описать эти свойства в одном объявлении:

background:


  /* image */
  url(sweettexture.jpg)
  /* position / size */    
  top center / 200px 200px
  /* repeat */ 
  no-repeat
  /* attachment */                
  fixed
  /* color */                    
  red;

JavaScript классы

Класс представляет описание объекта, его состояния и поведения, а объект является конкретным воплощением или экземпляром класса.

Для определения класса используется ключевое слово class:
class Person{
}

После этого мы можем создать объекты класса с помощью конструктора:
let tom = new Person();
let bob = new Person();

Также класс может содержать свойства и методы:
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
display(){
console.log(this.name, this.age);
}
}

let tom = new Person("Tom", 34);
tom.display(); // Tom 34
console.log(tom.name); // Tom

Одни классы могут наследоваться от других. Наследование позволяет сократить объем кода в классах-наследниках.

Пример работы наследования, а также полное описание классов можно посмотреть в статье.

Ты опытный фронтендер или только начинаешь въезжать?

Добро пожаловать на канал FrontEndDev, где мы собираем годные материалы, чтобы сделать из тебя гуру!

От фишек JS/TS до лучших практик архитектуры приложений.

Кастомные чекбоксы на CSS

В данном примере автор стилизует input с типом checkbox. Для оформления он использует label чекбокса, а также, в некоторых случаях, псевдоэлементы.

Нужно найти длину самой длинной последовательности из гласных букв в строке.

Гласные буквы - a e i o u

Пример:
codewarriors - o, e, a, io - ответ 2

Фильтрация HTML элементов

В данной реализации при нажатии на ссылку, автор скрывает элементы на странице, которые не соответствуют данной ссылке. При этом, запускает анимацию.

Burger menu на CSS

В качестве кнопки для открытия меню автор использует тег label.
Label он стилизует с помощью вложенного элемента span, а также псевдоэлементов.
Открытие меню автор анимирует с помощью свойства transform.

Нужно создать функцию для форматирования даты.

На вход функция принимает дату в определенном формате и локализацию в виде строки.
Функция должна преобразовать дату в соответствии с локализацией.

Генераторы CSS кода

Генератор CSS-кода — весьма удобный инструмент, который может сэкономить веб-разработчику немало времени, а также уберечь от лишних ошибок. Кроме того, ваш код станет более читабельным.

CSS Click Chart - C помощью этого инструмента можно посмотреть, как реализуется действие на CSS. Также отображается поддержка браузерами.

Web Code Tools - Продвинутый инструмент работы с разными элементами CSS. Кроме того, можно генерировать код на HTML, JSON.

CSS CheatSheet - Динамическая шпаргалка для CSS.

Spritebox - Создаёт CSS-спрайты — с их помощью мелкие картинки объединяются в один файл и выводятся с помощью CSS.

Clean CSS - Позволяет форматировать, минимизировать или украсить свой код.

CSS Animate - Cоздаёт анимации на CSS.