Grid Animation on Mousemove

В этом видео создается анимация движения блоков при движении курсора на JS.

👉 @seniorFront

Preloader

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

👉 @seniorFront

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

Найдите длину самой длинной подстроки в заданной строке 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