Самый длинный палиндром

Найдите длину самой длинной подстроки в заданной строке s, которая совпадает с ней в обратном порядке. В качестве примера, если вводимая строка была "I like racecars that go fast", длина подстроки (racecar) будет равна 7. Если длина входной строки равна 0, возвращаемое значение должно быть равно 0.

Пример:

 longestPalindrome("baabcd") = 4

👉 @seniorFront

React vs Vue – подробное сравнение и перспективы

В этой статье мы проведём подробный анализ современных практик frontend-разработки, сравним состояние React и Vue 5 лет назад и на текущий момент, а также попробуем спрогнозировать их перспективность в обозримом будущем с учётом развития LLM моделей и AI агентов. Посмотрим их экосистемы (например, Next.js и Nuxt, Zustand и Pinia), использование в бэкенде, популярность решений в энтерпрайзе и понимание разработчиками и LLM моделями.

👉 @seniorFront

Какие протоколы взаимодействия существуют в WEB?

В сфере веб-разработки и сетевых технологий существует множество протоколов взаимодействия, каждый из которых предназначен для решения определённых задач. Вот некоторые из наиболее распространённых и важных протоколов:

HTTP (HyperText Transfer Protocol)
Это основной протокол для передачи данных в интернете, используемый для загрузки веб-страниц (HTML, CSS, JavaScript и изображений) от сервера к клиенту, обычно веб-браузеру. HTTP определяет методы (например, GET и POST), которые клиенты могут использовать для выполнения запросов к серверам.

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

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

FTP (File Transfer Protocol)
Это стандартный протокол передачи файлов между компьютерами по сети. Он используется для загрузки и скачивания файлов с сервера, администрирования сайтов и управления содержимым сервера.

SMTP (Simple Mail Transfer Protocol)
Это протокол для отправки электронных писем. Он используется почтовыми серверами для доставки отправленных писем в почтовые ящики получателей.

MAP (Internet Message Access Protocol) и POP3 (Post Office Protocol version 3)
Это протоколы, используемые для извлечения электронной почты из почтового сервера. IMAP предлагает более сложные функции по сравнению с POP3, включая возможность работы с электронной почтой непосредственно на сервере, что позволяет пользователям доступ к почте с разных устройств.

TCP/IP (Transmission Control Protocol/Internet Protocol)
Это основные протоколы, лежащие в основе интернета, обеспечивающие передачу данных между различными устройствами в сети. Он отвечает за установление соединения и гарантию доставки данных, в то время как IP обеспечивает адресацию и маршрутизацию пакетов данных.

DNS (Domain Name System)
Это система, которая переводит доменные имена в IP-адреса, позволяя пользователям легко находить веб-сайты в интернете без необходимости запоминать числовые IP-адреса.

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

👉 @seniorFront

Carousel animated titles

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

👉 @seniorFront

​Про реальный опыт, и нужен ли он

Мой реальный опыт в Angular — почти 11 месяцев, а в общем во фронтенде около 2.5 лет. До этого я работал на React.

Теперь к сути статьи, недавно я решил пооткликаться на вакансии junior и middle Angular разработчиков, везде в сопроводительных письмах указывая, что у меня опыта 10 месяцев, но зато он настоящий а не накрученный.

Я принципиально против накрутки, с моими знаниями я бы мог без проблем добавить 2 года опыта и пройти собес на мидла, но мне такое не нравится, я за честность.

Угадайте результат. Конечно же одни отказы, даже на позиции джунов, некоторые из них требовали быть в офисах в других городах, но я писал, что готов к релокации.

В целом видна тенденция, где работодатели сами подгоняют накрутку опыта, так как не в состоянии разобраться с горой джунов, хотя в Angular пока их не так много, максимум видал в районе 450 откликов, когда на Реакте и больше 1000 бывает.

Но разве так правильно? Если идти дальше во вранье, то можно и собесы проходить с ИИ, и работать потом с gpt o3 или Claude 3.7 sonnet, самостоятельно мало что умея, разве такой квалификации нужны рабочие компаниям? Так может тогда уже в фильтрах не отсеивать джунов с 6–12 месяцев реального опыта, а концентрироваться на них? Ведь если накручивают опыт, то чаще уже от 2х лет, а вот джуны с полгода‑годом опыта, скорее всего имеют опыт реальный.

Знаю нескольких людей с курса который прошёл, они после него накрутили 2 года опыта, без проблем прошли собес и спокойно работают. Понятно что я бы тоже так мог сделать, для эксперимента даже один раз написал 2 года, и приглашения правда начали появляться, причём в крупные компании. Забавно, согласитесь. В целом такая тенденция в IT меня расстраивает, получается накрутка становится единственным способом попасть на работу. Хочется верить что со временем всё подуспокоится.

В целом я с этим уже смирился, так как делаю это не ради денег, а ради удовольствия. И думаю таких как я тут много.

👉 @seniorFront

Хороший, плохой, злой тимлид. Как говорить команде правду и выжить

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

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

👉 @seniorFront

interactive hungry bear

Вся интерактивность реализована на чистом JS. Анимировано в CSS.

👉 @seniorFront

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