CSS overflow

Свойство overflow управляет поведением содержимого блочного элемента, если его размер превышает допустимый.

Возможные значения:
visible - переполняющее содержимое отображается за границами блока.
hidden - переполняющее содержимое не отображается.
auto - при переполнении отображается полоса прокрутки.
scroll - полоса прокрутки отображается всегда.

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

 {
  overflow-x: auto;
  overflow-y: hidden;
}

Text Scramble Effect

Эффект перемешивания текста на JavaScript.

Автор выводит на экран заранее записанные фразы, а между ними вставляет символы в случайном порядке, появление которых он анимирует.

JS метод forEach

Этот метод используется для перебора массива

Он для каждого элемента массива вызывает функцию callback и ей он передаёт три аргумента:

1. item – очередной элемент массива.
2. i – его номер.
3. arr – массив, который перебирается.

Пример:
let arr = ["Яблоко", "Апельсин", "Груша"];

arr.forEach((item, i, arr) => {
alert( i + ": " + item + " (массив:" + arr + ")" );
});
Выведет по очереди номер каждого элемента, сами элементы и весь массив.

Метод forEach ничего не возвращает, его используют только для перебора, как более «элегантный» вариант, чем обычный цикл for.

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 элементов

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