Stunning Bleeding Button

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

👉 @seniorFront

А ты уже едешь за город на шашлыки.

👉 @seniorFront

Cards on a Carousel

Логика работы карусели реализована JS. Анимировано библиотекой gsap.

👉 @seniorFront

Формошлёп — сотни хаков для фронтендеров в одном месте

Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.

Card Glow | Bioluminescence

Светящиеся элементы - это SVG картинки, появляющиеся при наведении.

👉 @seniorFront

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