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.

Анимация букв при печати.

При реализации использованы css анимации и JavaScript для определения цвета летящих букв, и их положения.
Кликните по «бумаге», чтобы взять ее в фокус, и начните вводить свой текст.

Айтишники, хорошая новость! 👾

Появился канал с удалёнными вакансиями в IT: @theyseeku_it

Здесь ищут девелоперов, разработчиков, проект-менеджеров, UX/UI-дизайнеров, SEOшников и других специалистов.

• Вакансии от известных IT-компаний;
• Заработная плата от 30 до 500 тысяч рублей;
• Должности для опытных и начинающих специалистов;
• Только удалённая занятость.

Присоединяйся и стань частью IT-индустрии с проверенным работодателелем.

CSS - Медиа запросы

Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений параметров устройств. Они предназначены для создания адаптивных сайтов.

Синтаксис:

 @media условие {
 /* стили (они будут выполняться, если устройство соответствует указанному условию)
 }

Логические операторы:
and - требует обязательного выполнения всех условий.
, - требует обязательного выполнения хотя бы одного условия.
not - предназначен для отрицания условия.

Медиа функции:
width - указывает требования к ширине области просмотра устройства.
min-width - задаёт минимальную ширину области viewport.
max-width - определяет максимальную рабочую область устройства.
height, min-height и max-height - задают требования аналогично, но в отношении высоты viewport.

Пример:
@media not screen and (orientation: portrait),
(min-width: 992px){ /* Стили CSS ... */ }

Мы теперь есть ВКонтакте, заходите, контент отличается от телеграма

Дан массив чисел.

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

maxDiff([1, 2, 3, 4]); //return 3, because 4 - 1 == 3
maxDiff([1, 2, 3, -4]); //return 7, because 3 - (-4) == 7

Анимация Canvas + Javanoscript

Автор использует Canvas, и в Javanoscript создает снежинки, которым добавляет анимацию падения.