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

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
«Чайка-стайл» менеджмент: как не стать ураганом в офисе ?

TL;DR: «Чайка-менеджер» — это хаос, скоропалительные решения, перекладывание вины и отсутствие системы. Прилетел, наделал дел, улетел — а сотрудники в цейтноте. Как распознать и что делать? Что такое «чайка-стайл»?
Руководитель-чайка — как ураган: врывается, сеет хаос, исчезает, оставляя задачи «решить вчера».

Признаки:
- Внезапные появления с потоком вопросов и новых задач.
- Перекладывание ответственности за свои решения на сотрудников.
- Отсутствие системы: планы меняются ежечасно, делегирования нет.
- Единоличные решения, от которых компания «зависает», если босса нет.

Ключевые ошибки:
- Непонимание подчинённых из-за отсутствия опыта работы «внизу».
- Уклонение от ответственности: «раз я плачу, вы и разбирайтесь».
- Хаотичная коммуникация: сегодня — презентация, завтра — инфографика.
- Фаворитизм и конфликты: лояльных премируют, остальных игнорируют.
- Нет обучения и развития: ни для себя, ни для команды.
- Делегирование? Не, не слышал.

Влияние на бизнес:
Снижение эффективности, стресс, текучка кадров. Исследования (LinkedIn, Indeed) подтверждают: 7 из 10 уходят из-за некомпетентных боссов.

Роль HR:
HR может навести порядок: внедрить системность, прозрачность, культуру доверия. Но для этого «чайке» нужно отойти от оперативного управления и довериться профи. Увы, такие боссы редко готовы к переменам.

Итог:
«Чайка-стайл» — тормоз для бизнеса. Решение — в системности, коммуникации и развитии команды. Выбор за собственником: быть ураганом или строить стабильную компанию.

👉 @seniorFront
2
This media is not supported in your browser
VIEW IN TELEGRAM
Shoe Swap

Логика переключения слайдов реализована в JS. Анимировано в SCSS.

👉 @seniorFront
👍95
This media is not supported in your browser
VIEW IN TELEGRAM
SVG Animation

Это SVG картинка, анимированная в SCSS.

👉 @seniorFront
6
Media is too big
VIEW IN TELEGRAM
WebGL carousel

Создано и анимировано при помощи библиотеки gsap.

👉 @seniorFront
👍41
Media is too big
VIEW IN TELEGRAM
CSS Facial Recognition

В этом видео создается CSS анимация распознавания лица.

👉 @seniorFront
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Hover to reveal part of background image

При движении мыши JavaScript обновляет позицию элемента .magic, центрируя его относительно курсора, а CSS задаёт стили и анимацию.

👉 @seniorFront
👍31
Correct the time-string

Нужно создать метод, который корректирует заданную временную строку.
При добавлении возникла проблема, поэтому многие временные строки сломаны.
Время форматируется с использованием 24-часовых часов, то есть с 00:00:00 до 23:59:59.

Пример:
 "09:10:01" -> "09:10:01"  
"11:70:10" -> "12:10:10"
"19:99:99" -> "20:40:39"
"24:01:01" -> "00:01:01"


👉 @seniorFront
1
Кеширование Lottie-анимаций с помощью Service Worker

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

В проекте было около 30 Lottie-анимаций, некоторые весили ~100 KB, и нам нужно было оптимизировать их загрузку.

Как снизить трафик и нагрузку? Правильно - кеширование. Мы выбрали кеширование на стороне Service Worker.

👉 @seniorFront
👎41
Псевдоэлементы для подсветки текста

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

::selection: выделенный текст
::target-text: представляет собой конкретный текст, к которому браузер прокручивает страницу при использовании фрагментов текста (например, через URL с #:~:text=...).
::spelling-error: содержимое, которое было помечено user-agent как ошибочное
::grammar-error: содержимое, которое было помечено user-agent как грамматически не верное

Последние два псевдоэлемента еще не поддерживаются браузерами.

Эти псевдоэлементы могут принимать свойства:
- color
- background-color
- cursor
- caret-color
- outline
- text-decoration
- text-emphasis-color
- text-shadow

👉 @seniorFront
2👍1
Media is too big
VIEW IN TELEGRAM
Rotating 3D Slider

Логика работы слайдера реализована в JS. Стилизовано и анимировано в SCSS.

👉 @seniorFront
👍7
Почему ИИ в кодинге не панацея и как объяснить это менеджменту

Я — разработчик с 8 годами опыта, от C++ до ML и продуктовой разработки. Прошёл "ИИ-изацию" компании в 2023 и делюсь, почему не стоит слепо пушить ИИ в кодинг.

Проблемы ИИ в разработке:
1. Контекст. ИИ не знает историю проекта и продуктовые требования, которые живут в головах разработчиков. Он видит только код, теряя важные нюансы.
2. Иллюзия ускорения. Исследование METR показывает: ИИ замедляет разработку на 19%, хотя кажется, что ускоряет на 20%. Ощущения обманчивы!
3. Потеря фокуса. ИИ требует переключения внимания, разрывая рабочий поток и снижая продуктивность.
4. Посредственный код. ИИ, обученный на среднем коде из интернета, плодит техдолг, переписывает тесты, откладывая проблемы.
5. Баги и откаты. Стэнфордский рисерч: до 25% ИИ-кода содержит ошибки, которые ловят QA или пользователи, увеличивая цикл разработки.

Но есть нюанс
Исследования не идеальны. METR — выборка всего 16 человек, большинство без опыта с ИИ (например, Cursor). У тех, кто освоил ИИ, эффективность выросла, у лучших — почти в 2 раза! Главное — научиться использовать инструмент.

Итог: Менеджмент не должен пушить ИИ — рынок сам разберётся. Ключ к успеху — эксперименты и изучение лучших практик, чтобы ИИ стал помощником, а не обузой.

👉 @seniorFront
6👍2
Фронтенд с нуля — бесплатное обучение.

📅 Через 7 дней у тебя будет готовый проект для портфолио.

Вот что ты сделаешь за время интенсива:

- сверстаешь полноценную страницу на HTML + CSS;
- добавишь интерактив и логику на JavaScript;
- посмотришь, как используется фронтенд-фреймворк Angular;
- подключишь backend и загрузишь проект на хостинг;
- получишь разбор и рекомендации по доработке;
- добавишь готовый проект в портфолио;
- заберешь чек-лист с местами, где можно найти хорошие заказы или постоянную работу.

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

Интенсив ведет Роман Чернов - практикующий fullstack-разработчик с 12-летним опытом.
Объясняет понятным языком и фокусируется на реальных навыках, а не теории.

👉 Ссылка на бесплатный интенсив здесь
👎64
Айти “умирает”, вакансий нет, все говорят про кризис?
В канале “Frontend менторинг | Косилов” разбираю, что реально происходит на рынке и как всё-таки находить офферы.

Там: честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, без инфоцыганства и розовых обещаний. Я действующий фронтенд-разработчик и ментор, показываю, как адаптироваться к рынку, а не ждать “когда всё наладится”.

Для тех, кто придёт отсюда, — скидка 30% на менторство и разборы по промокоду Kosilov2026.
👎9🔥1
Ни одного лишнего блюра: хардкорная оптика IDE для тех, кто пишет код десятилетия подряд

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

👉 @seniorFront
3
Please open Telegram to view this post
VIEW IN TELEGRAM
👎41