Blinking Stars Animation

В этом видео создается анимация звездного фона на JS и CSS.

👉 @seniorFront

Butterflies

Оригинальная карточка, созданная и анимированная на HTML и CSS.

👉 @seniorFront

Подсчет количества дубликатов

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

Пример:

"abcde" -> 0 # no characters repeats more than once
"aabbcde" -> 2 # 'a' and 'b'
"aabBcde" -> 2 # 'a' occurs twice and 'b' twice (`b` and `B`)
"indivisibility" -> 1 # 'i' occurs six times
"Indivisibilities" -> 2 # 'i' occurs seven times and 's' occurs twice
"aA11" -> 2 # 'a' and '1'
"ABBA" -> 2 # 'A' and 'B' each occur twice

👉 @seniorFront

Почему одни шрифты читаются быстрее других и почему Comic Sans ненавидят

Вы когда-нибудь замечали, что одни тексты «проглатываете» за минуты, а другие читаете словно через силу или просто кидаете в закладки и забываете, даже если тема интересна? Дело не только в содержании — иногда главную роль играет шрифт. Одни буквы мозг расшифровывает мгновенно, а на других спотыкается и тормозит. Давайте разберемся, какие шрифты ускоряют усвоение информации, а какие годятся только для художественных заголовков — и как это используют в UX, издательском деле и digital-рекламе.

Спойлер: Comic Sans не просто так всех раздражает. Так что, если вы до сих пор тыкаете в Fonts Google наугад — готовьтесь к легаси-проблемам с юзабилити.

👉 @seniorFront

​Какие структуры данных есть в JS?

Существует несколько основных структур данных, которые используются для хранения и управления данными. Рассмотрим их подробнее:

1. Массивы (Arrays)
- Что это: Упорядоченные списки элементов.
- Зачем нужны: Для хранения коллекций данных, которые можно обрабатывать по индексу.
- Как использовать:

 let fruits = ["Apple", "Banana", "Cherry"];
 console.log(fruits[0]); // Apple
    

- Пример использования: Хранение списка товаров в корзине интернет-магазина.

2. Объекты (Objects)
- Что это: Наборы пар "ключ-значение".
- Зачем нужны: Для хранения данных в виде ассоциативных массивов, где ключами могут быть строки или символы.
- Как использовать:

let person = {
  name: "John",
  age: 30
};
console.log(person.name); // John
     

- Пример использования: Хранение информации о пользователе.

3. Map (Карты)
- Что это: Коллекции пар "ключ-значение", где ключи могут быть любого типа.
- Зачем нужны: Для хранения данных с уникальными ключами, с более гибкими возможностями по сравнению с объектами.
- Как использовать:

let map = new Map();
map.set('name', 'John');
map.set(1, 'one');
console.log(map.get('name')); // John
     

- Пример использования: Хранение настроек с ключами различного типа.

4. Set (Множества)
- Что это: Коллекции уникальных значений.
- Зачем нужны: Для хранения множества значений, где каждое значение уникально.
- Как использовать:

let set = new Set();
set.add(1);
set.add(1); // Значение не добавится, так как оно уже существует
console.log(set.size); // 1
     

- Пример использования: Хранение уникальных тегов из списка статей.

5. WeakMap (Слабые карты)
- Что это: Коллекции пар "ключ-значение", где ключи являются объектами и имеют слабые ссылки.
- Зачем нужны: Для хранения данных с автоматическим удалением неиспользуемых объектов.
- Как использовать:

let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, 'value');
obj = null; // Теперь объект может быть удалён из памяти
     

- Пример использования: Хранение метаданных объектов без риска утечек памяти.

6. WeakSet (Слабые множества)
- Что это: Коллекции объектов, где каждое значение может быть удалено автоматически, если больше не используется.
- Зачем нужны: Для хранения уникальных объектов с возможностью автоматического удаления.
- Как использовать:

let weakSet = new WeakSet();
let obj = {};
weakSet.add(obj);
obj = null; // Теперь объект может быть удалён из памяти
     

- Пример использования: Отслеживание объектов без риска утечек памяти.

7. String (Строки)
- Что это: Последовательности символов.
- Зачем нужны: Для хранения и обработки текстовых данных.
- Как использовать:

let greeting = "Hello, world!";
console.log(greeting.length); // 13
     

- Пример использования: Хранение и манипулирование текстовой информацией, такой как имена пользователей или сообщения.

8. Typed Arrays (Типизированные массивы)
- Что это: Массивы, которые предоставляют массивы с фиксированной длиной для различных типов данных.
- Зачем нужны: Для работы с бинарными данными и оптимизации производительности.
- Как использовать:

let buffer = new ArrayBuffer(16);
let int32View = new Int32Array(buffer);
int32View[0] = 42;
console.log(int32View[0]); // 42
     

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

👉 @seniorFront

Circular Animations Set

Подборка анимаций, реализованных на canvas и чистом JS.

👉 @seniorFront

ООП — это скам

На хабре и в остальном интернете хватает статей с критикой ООП. Кто-то ругает эту концепцию за излишнюю многословность, кто-то рассуждает о плохих аспектах ООП, кто-то сравнивает реализации ООП в разных языках.

После прочтения большинства этих статей и нескольких лет кодинга на C# я заявляю: «ООП - это один большой обман. Никто не понимает, что это такое. Люди просто говорят какие-то умные термины, их собеседники с умным видом кивают, хотя на деле трактуют эти же термины совершенно по-разному».

И вот почему:

👉 @seniorFront

Чтение на выходные: «Иконы графического дизайна» Джона Клиффорда

Нам нравятся книги про дизайн и мы периодически приносим их вам в ленту. Сегодня берем с полки достаточно известную работу практикующего графического дизайнера Джона Клиффорда об иконах индустрии разных времен. Эту книгу называют энциклопедией, однако так ли это и какие аргументы есть за и против, обсудим в нашем материале.

👉 @seniorFront

Crossy Road

Игра создана и анимирована при помощи библиотеки Three.js.

👉 @seniorFront

Amazing Pixel Button Effects

В этом видео создается пиксельный фон на кнопке при наведении на CSS и JS.

👉 @seniorFront

Microsoft: наши передовые ИИ-компьютеры изменят мир

Microsoft Word:

👉 @seniorFront

LetterMorph

Вся сцена - это SVG картинка, анимированная библиотекой gsap.

👉 @seniorFront

Card Carousel

Создано на HTML и CSS. Логика работы слайдера создана библиотекой Swiper.

👉 @seniorFront

Stunning CSS SVG Animation Effects

В этом видео создается SVG картинка, которая затем анимируется в CSS.

👉 @seniorFront

CSS 3D Bending Effect

Реализовано и анимировано на чистом CSS.

👉 @seniorFront

Is a number prime?

Создайте функцию, которая принимает целочисленный аргумент и возвращает логическое значение true или false в зависимости от того, является ли это целое число простым.

Согласно Википедии, простое число (или прайм) - это натуральное число больше 1, которое не имеет положительных делителей, кроме 1 и самого себя.

Требования
- Вы можете предположить, что вам будет задано целое число.
- Вы не можете предполагать, что это целое число будет только положительным. Вам могут быть даны и отрицательные числа ( или 0 ).
- Замечание по производительности: Не требуется никаких причудливых оптимизаций, но все же самые тривиальные решения могут выходить из строя. Числа доходят до 2^31 ( или аналогично, в зависимости от языка ). Циклы до n или n/2 будут слишком медленными.

Пример

is_prime(1) /* false */
is_prime(2) /* true */
is_prime(-1) /* false */

👉 @seniorFront

Чистый код — красивая архитектура. А работает ли это?

Вы пишете код не для компилятора — он съест любую абракадабру, если синтаксис верен. Вы пишете для людей, для того парня из соседнего отдела, который будет разбирать ваш код через полгода. Для себя, когда забудете, о чём думали в момент написания. Для тимлида, у которого нет времени расшифровывать ваши «фичи», замаскированные под техдолг.

Грязный код — это про непонятные переменные, запутанные модули и решения «на скорую руку». Вас ждёт после такого потеря во времени и в лучшем случае косые взгляды коллег. К сожалению, непонятный код часто пишут не только из-за спешки, но и из-за неопытности и чрезмерного энтузиазма тех, кто хочет всё переделать.

Давайте разберём, как превратить кошмар в конфетку — детали внутри.

👉 @seniorFront

​Что такое прототипное наследование?

Это механизм, с помощью которого объекты могут наследовать свойства и методы от других объектов. Это одна из основных особенностей языка JavaScript, отличающая его от классических моделей наследования, используемых во многих других языках программирования.

Как это работает
Каждый объект имеет специальное скрытое свойство [[Prototype]] (как правило, доступное как proto или через Object.getPrototypeOf()), которое ссылается на другой объект — его прототип. Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство/метод не найдено в самом объекте, поиск продолжается по цепочке прототипов, пока свойство/метод не будет найден или не будет достигнут конец цепочки прототипов (прототип null).

Пример:

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  proto: animal
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

В этом примере объект rabbit наследует свойство eats и метод walk от объекта animal через прототипную цепочку.

Основные принципы
- Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
- Object.prototype: В вершине прототипной цепочки находится Object.prototype. Он не имеет прототипа и содержит методы, доступные всем объектам, такие как toString(), hasOwnProperty() и другие.
- Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать Object.create(proto), где proto — объект, который должен стать прототипом для нового объекта.

Отличия от классического наследования
В отличие от него, прототипное наследование не использует классы как таковые (до введения class в ES6, которые являются "синтаксическим сахаром" над прототипным наследованием). Вместо этого объекты напрямую наследуют свойства и методы от других объектов.

👉 @seniorFront

Additive fireflies

Частицы генерируются и анимируются в JS.

👉 @seniorFront