Senior Frontend - javascript, html, css
26.7K subscribers
1.29K photos
2.24K videos
712 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
Подсчет количества дубликатов

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

Пример:
"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
2
Чемпионат для подростков по 12 направлениям от «Алабуга Политех»☺️

Программирование и Битва роботов, Экономика и Юриспруденция, 3D моделирование и Английский язык и многое другое, чтобы каждый нашел свою дисциплину.

Для участия тебе нужно☺️
☺️Оставь заявку на сайте😀
☺️Пройди заочный этап на HR-платформе: Business Cats до 1,0 по «Общению» и «Аналитике» для оплаты дороги туда и обратно😀
☺️Приезжай на чемпионат😀

Мы предлагаем тебе☺️
☺️Общий призовой фонд турнира составляет 1 000 000 рублей😀
☺️Проживание и дорога бесплатно😀
☺️Возможность поступить в «Алабуга Политех»😀

Участвуй в турнире от образовательного центра мирового уровня и получай призы и преимущество в поступлении☺️
Please open Telegram to view this post
VIEW IN TELEGRAM
👎51🔥1
Какие структуры данных есть в 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
👍112
This media is not supported in your browser
VIEW IN TELEGRAM
Circular Animations Set

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

👉 @seniorFront
👍3
ООП — это скам

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

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

И вот почему:

👉 @seniorFront
👎6👍1
Чтение на выходные: «Иконы графического дизайна» Джона Клиффорда

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

👉 @seniorFront
3
This media is not supported in your browser
VIEW IN TELEGRAM
Crossy Road

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

👉 @seniorFront
👍91
Media is too big
VIEW IN TELEGRAM
Amazing Pixel Button Effects

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

👉 @seniorFront
1👎1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Microsoft: наши передовые ИИ-компьютеры изменят мир

Microsoft Word:

👉 @seniorFront
👍23🤔63🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
LetterMorph

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

👉 @seniorFront
👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Card Carousel

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

👉 @seniorFront
👍5
Какую область видимости имеют переменные, объявленные с помощью var внутри функции?
Anonymous Quiz
17%
Блочную
37%
Функциональную
41%
Глобальную
5%
Модульную
👍3
Media is too big
VIEW IN TELEGRAM
Stunning CSS SVG Animation Effects

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

👉 @seniorFront
This media is not supported in your browser
VIEW IN TELEGRAM
CSS 3D Bending Effect

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

👉 @seniorFront
👍52
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
👍1
Чистый код — красивая архитектура. А работает ли это?

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

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

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

👉 @seniorFront
🔥3🤔1
Что такое прототипное наследование?

Это механизм, с помощью которого объекты могут наследовать свойства и методы от других объектов. Это одна из основных особенностей языка 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
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Additive fireflies

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

👉 @seniorFront
👍4
Почему микро-сервисы редко взлетают?

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

Давайте дадим определение микро-сервису через аналогию: микро-сервис — как блюдо. Про него можно сказать следующее:

- Блюдо изолировано: каждое находится в свой тарелке. Или, если хотите, в контейнере.
- Блюда имеют ограниченный контекст. Плов — это плов, его не мешают с фруктами. Потребитель получает то, за что платит по меню.
- Блюда слабо связаны между собой. После тарелки любого супа можно взять любой гарнир. А можно и не брать. Бывают, конечно, ограничения: не стоит запивать селедку молоком. Но это — исключение.
- Блюда масштабируются. Мало одной котлеты — можно съесть две.
- Блюда легко тестируются. Их можно дегустировать по-отдельности.
- Блюда индивидуально конфигурируются. Можно взять борщ с пампушкой, можно — без.

По описанию получилось вполне съедобно, не так ли? Так почему же внедрение микро-сервисов так редко заканчивается успехом? Я не буду разглагольствовать про неверное разграничение контекста и другие пороки. Про них и так много сказано. Сфокусируюсь на одном.

Корень проблемы — неверная область использования микро-сервисов.

Микро-сервисы применяются не там и не так.
Микро-сервисы задумывались как альтернатива монолиту, который пилят десятки разработчиков. А сейчас все работают по Agile, команды маленькие. Работают или над своим небольшим продуктом, или над частью общего продукта компании.

Продукт (часть продукта) уже имеет изолированный контекст и слабые зависимости. С другими продуктами (частями) общается по API. Имеет свой технологический стек. Владеет отдельным хранилищем (базой). Независимо разворачивается. И даже имеет свою команду «на две пиццы».

По совокупности признаков, он уже микро-сервис! Продукт является готовым блюдом для потребителей.

Но нет! Каждая команда считает свой салатик монолитом. И поэтому берет, и делит на микро-сервисы. Что же у нее получается в итоге? Правильно: нано-сервисы!

Вместо того чтобы смешать все ингредиенты и приготовить блюдо, команда любовно расфасовывает ингредиенты по контейнерам. Но все-таки салат — это не то же самое, что запчасти для салата.

Если вам вместо трех блюд подадут тридцать ингредиентов в отдельных тарелочках, думаю, вы вряд ли посчитаете это хорошим обслуживанием.

Готовьте микро-сервисы правильно.
Многие компании целиком поражены болезнью чрезмерной декомпозиции. То и дело говорят: «у нас 30 команд и 1500+ микро-сервисов». И ведь искренне еще гордятся этим! Забывая рассказать про свои затраты на инфраструктуру. Рассказать, что новый разработчик до полугода погружается в эти сервисы. Что локализация обычного бага занимает у него неделю.

После всего сказанного позволю себе один совет:
Не дробите ваш маленький продукт на нано-сервисы. Это его убьёт. Он хороший. Дайте ему шанс повзрослеть.

👉 @seniorFront
5
«Кем Вы видите себя через 5 лет», или HRско-русский разговорник

Вас спрашивали «Кем Вы видите себя через 5 лет»? Меня тоже. За двадцать пять лет в IT я понял, зачем они так делают. Понял – это значит, что я «привык и научился пользоваться» (С). Но «неприятно удивлять» они меня не перестали.

Публикую свой личный русско-HRский разговорник. Он вряд ли поменяет ваше отношение к HRскому языку, но проходить собеседования вы будете проще и эффективнее.

👉 @seniorFront