Веб-версияОткрыть в Telegram
SSenior Frontend - javascript, html, css

Senior Frontend - javascript, html, css

@seniorFront · канал · Технологии · в индексе с 2026-04-21
23 830подписчиков−28 за неделю
4 137постов в индексе
S
Senior Frontend - javascript, html, css
Видео
2025-10-05 21-14-40.mp4 · 1.1 МБ · нажмите — покажем
Shoe Swap Логика переключения слайдов реализована в JS. Анимировано в SCSS. 👉 @seniorFront
45 · 6.9K ·
S
Senior Frontend - javascript, html, css
Видео
2025-10-05 21-16-00.mp4 · 5.8 МБ · нажмите — покажем
SVG Animation Это SVG картинка, анимированная в SCSS. 👉 @seniorFront
24 · 7.8K ·
S
Senior Frontend - javascript, html, css
Видео
2025-10-05 21-15-03.mp4 · 17.9 МБ · нажмите — покажем
WebGL carousel Создано и анимировано при помощи библиотеки gsap. 👉 @seniorFront
20 · 7.6K ·
S
Senior Frontend - javascript, html, css
Видео
CSS_Facial_Recognition_Animation_Effects_Html_CSS_@OnlineTut · 32.0 МБ · нажмите — покажем
CSS Facial Recognition В этом видео создается CSS анимация распознавания лица. 👉 @seniorFront
20 · 8.6K ·
S
Senior Frontend - javascript, html, css
Видео
2025-10-05 21-15-42.mp4 · 749 КБ · нажмите — покажем
Hover to reveal part of background image При движении мыши JavaScript обновляет позицию элемента .magic, центрируя его относительно курсора, а CSS задаёт стили и анимацию. 👉 @seniorFront
31 · 8.6K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
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
9 · 7K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Кеширование Lottie-анимаций с помощью Service Worker Хочу рассказать о том, как мы решали проблему с высокой нагрузкой на сервер и большими расходами трафика при использовании тяжелых Lottie-анимаций. В проекте было около 30 Lottie-анимаций, некоторые весили ~100 KB, и нам нужно было оптимизировать их загрузку. Как снизить трафик и нагрузку? Правильно - кеширование. Мы выбрали кеширование на стороне Service Worker. 👉 @seniorFront
34 · 7.5K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Псевдоэлементы для подсветки текста Псевдоэлементы выделения представляют собой части документа, которым присвоен определенный статус, и обычно имеют другой стиль, чтобы указать этот статус пользователю. Например, выбранные части документа обычно выделяются (заданы альтернативные цвета фона и переднего плана или цветовая размывка), чтобы указать их выбранный статус. ::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
24 · 8K ·
Senior Frontend - javascript, html, css
Видео
2025-10-12 21-29-02.mp4 · 15.3 МБ · нажмите — покажем
Rotating 3D Slider Логика работы слайдера реализована в JS. Стилизовано и анимировано в SCSS. 👉 @seniorFront
27 · 7.3K ·
S
Ссылка
нажмите — покажем
​Почему ИИ в кодинге не панацея и как объяснить это менеджменту Я — разработчик с 8 годами опыта, от C++ до ML и продуктовой разработки. Прошёл "ИИ-изацию" компании в 2023 и делюсь, почему не стоит слепо пушить ИИ в кодинг. Проблемы ИИ в разработке: 1. Контекст. ИИ не знает историю проекта и продуктовые требования, которые живут в головах разработчиков. Он видит только код, теряя важные нюансы. 2. Иллюзия ускорения. Исследование METR показывает: ИИ замедляет разработку на 19%, хотя кажется, что ускоряет на 20%. Ощущения обманчивы! 3. Потеря фокуса. ИИ требует переключения внимания, разрывая рабочий поток и снижая продуктивность. 4. Посредственный код. ИИ, обученный на среднем коде из интернета, плодит техдолг, переписывает тесты, откладывая проблемы. 5. Баги и откаты. Стэнфордский рисерч: до 25% ИИ-кода содержит ошибки, которые ловят QA или пользователи, увеличивая цикл разработки. Но есть нюанс Исследования не идеальны. METR — выборка всего 16 человек, большинство без опыта с ИИ (например, Cursor). У тех, кто освоил ИИ, эффективность выросла, у лучших — почти в 2 раза! Главное — научиться использовать инструмент. Итог: Менеджмент не должен пушить ИИ — рынок сам разберётся. Ключ к успеху — эксперименты и изучение лучших практик, чтобы ИИ стал помощником, а не обузой. 👉 @seniorFront
12 · 9.6K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Айти “умирает”, вакансий нет, все говорят про кризис? В канале “Frontend менторинг | Косилов” разбираю, что реально происходит на рынке и как всё-таки находить офферы. Там: честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, без инфоцыганства и розовых обещаний. Я действующий фронтенд-разработчик и ментор, показываю, как адаптироваться к рынку, а не ждать “когда всё наладится”. Для тех, кто придёт отсюда, — скидка 30% на менторство и разборы по промокоду Kosilov2026.
2 · 8.2K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Ни одного лишнего блюра: хардкорная оптика IDE для тех, кто пишет код десятилетия подряд Чем больше строк кода за спиной, тем отчётливее чувствуется «песок в глазах» после вечернего ревью. Эта статья — попытка собрать в одном месте практические ходы — от выбора вариативных шрифтов до реактивного переключения тем по кривой солнечного спектра — которые позволят зрелым разработчикам продолжать писать осмысленный код, а не эпитафии своему зрению. 👉 @seniorFront
28 · 9.9K ·
S
Senior Frontend - javascript, html, css
Ссылка
нажмите — покажем
В канале “Frontend менторинг | Косилов” вы можете найти честные зарплатные вилки, разборы резюме и портфолио, стратегии поиска работы и роста в кризис, обзор технологий и мысли по этому поводу. Так же публикует в Инсте смешные ролики и полезный контент про АйТи. https://www.instagram.com/kosilllov?igsh=MXN1ZWxvN3JhaW5uMg%3D%3D&utm_source=qr Всем, кто подпишется и напишет в личку слово js в инстаграме, пришлет список вопросов по JavaScript с собесов + даст краткие ответы/подсказки, как лучше отвечать.
7 · 7.6K ·
S
Senior Frontend - javascript, html, css
Видео
2025-10-12 21-31-05.mp4 · 1.9 МБ · нажмите — покажем
dropdown concept Здесь создается интерактивное выпадающее меню с 3D-эффектами, используя HTML, CSS с радиальным градиентом и 3D-трансформациями (rotateY, perspective, transform-style: preserve-3d), а также JavaScript с плагином jQuery Makisu для реализации анимации сворачивания/разворачивания элементов меню, оптимизированной через CSS-ключевые кадры и динамическое управление стилями. 👉 @seniorFront
30 · 8.7K ·
S
Senior Frontend - javascript, html, css
Видео
Reveal_Elements_on_Page_Scroll_with_Animation_using_Vanilla_ · 26.0 МБ · нажмите — покажем
Reveal Elements on Page Scroll В этом видео создается эффект появления элементов при прокрутке страницы на чистом JS. 👉 @seniorFront
17 · 8.5K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Если ты хочешь войти во фронтенд-разработку — сейчас идеальный момент входа. ИИ не убил профессию. Он убрал самое страшное — барьер входа. Сегодня первый рабочий сайт можно сгенерировать через ChatGPT или DeepSeek, довести до ума на HTML и CSS, оживить JavaScript и выложить в продакшен. Всё это за одну неделю. Именно это мы и делаем на бесплатном 7-дневном практикуме. Ты пройдёшь путь от чистого листа до реального проекта в портфолио, с поддержкой кураторов на каждом шаге. Не один на один с туториалами. Стартуем завтра. 👉 Приходи на бесплатный практикум 🎁 Каждому участнику гайд «Фронтенд в 2026: что делать новичку в эпоху ИИ»
6 · 7.8K ·
S
Senior Frontend - javascript, html, css
Ссылка
нажмите — покажем
👀Что проще - зарабатывать 1 млн руб. в найме или в собственном проекте? Или все-таки сочетать? Автор этой схемы на своем опыте рассказывает, как сделать миллион в найме, где сейчас стоит учиться, с какой компании начать работу, надо ли «прыгать по компаниям» и как раскачивать личный бренд. 🔥Вот ТОП посты, которые точно пригодятся - Каких продактов выделяет рынок труда - Какие продакты сейчас самые востребованные на рынке - МОК-собес на product manager Ну и вот что нам особо интересно: 🔴45 офферов по разным ИТ ролям: от аналитика до тим тим лида за 850к 🔴Какой продакт лид получил 12 млн по году 🔴Оффер на Product lead в Яндекс Много полезненького )) 💬@proProject1
6.3K ·
S
Senior Frontend - javascript, html, css
Ссылка
нажмите — покажем
System Design - этап собеседования, на котором часто сыпятся даже сильные разработчики. Не потому, что они плохо пишут код, а потому что никогда не проектировали системы целиком и не знают, как уложить это в 40 минут собеса. В одном из гайдов собрана база, без которой сложно пройти System Design интервью: что именно проверяют на таких собеседованиях, почему плохой архитектурный дизайн может уронить продукт, какие требования собирают перед проектированием и как инженеры подходят к построению систем уровня Amazon. В первой части рассказывается: - что такое системный дизайн и кому он нужен - как в целом проектируются системы: монолиты, микросервисы, нагрузка, масштабирование, проектирование API - какие темы нужно понимать для продвинутого уровня: распределённые транзакции, 2PC, 3PC, TCC и другие. Во второй части планируют разобрать System Design во фронтенде, но для подготовки к собеседованию, по сути, достаточно уже первой. Ссылка на видео: https://youtu.be/PgC7LzIG29k
47 · 7.1K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
🧭 Разбираем React вместе с Podlodka React Crew Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Базового понимания фреймворка становится недостаточно для результативной работы. 💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React». С 23 по 27 марта ее участники: ⚙️ узнают, как устроен рендер и внутренние механизмы в современном React 🧠 познакомятся с архитектурой приложений, где применяются React Server Components 📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak 🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами. Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇 🎟Забрать early-bird билет: https://podlodka.io/reactcrew
4 · 7.5K ·
S
Senior Frontend - javascript, html, css
Видео
2025-10-12 21-31-26.mp4 · 1.5 МБ · нажмите — покажем
Apple TV Macbeth Poster Animation Анимированная карточка, реализованная на HTML и SCSS. 👉 @seniorFront
25 · 7.1K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Как работает JPEG: магия, обманывающая ваши глаза Вы когда-нибудь задумывались, почему JPEG при сжатии в 10 раз выглядит почти идеально, а при 100 — рассыпается на «кашу» из квадратов? Вот основные этапы этой инженерной магии: 🌈Цветовой обман (YCbCr): Человеческий глаз лучше видит яркость, чем оттенки. JPEG переводит картинку в формат, где яркость отделена от цвета, и... просто выкидывает половину цветовых данных. Вы этого даже не заметите! 🟦 Сетка 8x8: Изображение режется на блоки. Именно их мы видим как «артефакты», когда перебарщиваем со сжатием. 🔄 Магия частот (DCT): Каждый блок превращается из набора пикселей в набор «частот». 🎚 Квантование: Тот самый ползунок «Quality» в редакторах. На этом этапе алгоритм решает, сколько мелких деталей превратить в нули. Больше нулей — меньше вес файла, но хуже картинка. Потыкать интерактивные примеры и увидеть DCT в действии можно здесь 👇
12 · 8.7K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
📄 Эффект загнутого угла на чистом CSS Интересный разбор от Kitty Giraudel. Традиционно «загнутый уголок» на карточках создавали с помощью картинок или перегруженных псевдоэлементов. Автор статьи предлагает более изящный способ, который полагается исключительно на слоистые градиенты. Как это работает? Весь секрет в комбинировании двух линейных градиентов внутри одного свойства background: Первый слой - это крошечный треугольник, который имитирует загнутую часть бумаги. Второй слой - основной фон элемента, в котором сделан «срез» (прозрачная область) точно в том месте, где располагается наш треугольник. Это круто из-за легкой кастомизации: достаточно изменить пару CSS-переменных, чтобы моментально перекрасить уголок или изменить его размер во всем проекте. А еще браузер рисует градиенты быстрее, чем подгружает внешние ассеты, что экономит трафик и ускоряет рендеринг. Оригинал статьи ниже👇 👉 @seniorFront
26 · 8.6K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
SVG-фильтры: от «магии» к пониманию Если CSS-фильтры - это готовые инста-фильтры, то SVG-фильтры - полноценный Photoshop внутри браузера. Статья Аны Тюдор - Это фундаментальный разбор того, как устроены фильтры «под капотом». Автор не просто дает код, а объясняет механику: от того, где должен лежать тег <filter>, до логики работы с альфа-каналами. 🟢Конвейер данных (in и result): Фильтр - это не одна команда, а цепочка. Вы берете исходник, размываете его, сохраняете результат под именем «Layer1», а потом накладываете на него что-то еще. Полный контроль над потоком. 🟢Магия каналов: Автор объясняет разницу между SourceGraphic (весь объект) и SourceAlpha (только его форма). Хотите создать крутую тень или свечение? Работайте с Alpha-каналом, не трогая цвета. 🟢Борьба с «обрезкой»: Самая частая проблема - когда фильтр обрезается по краям. В статье четко расписано, как через атрибуты x, y, width, height расширить «холст» фильтра, чтобы эффектам было где разгуляться. Прочитать оригинал👇 👉 @seniorFront
24 · 10K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Валидация на чистом CSS: считаем поля через :nth-child(n of selector) Раньше для проверки «заполнено ли хотя бы 3 поля» нам обязательно нужен был JavaScript. Теперь с этим справляется нативный CSS. В чем суть? Синтаксис :nth-child(n of .selector) позволяет считать не все элементы подряд, а только те, что соответствуют определенному правилу. Как это работает для валидации: Мы определяем «заполненное» состояние (например, через :not(:placeholder-shown) или :valid). Используем селектор :nth-child(3 of .field:has(:valid)). Он «выстрелит» только тогда, когда в списке появится третий валидный элемент. Через комбинатор «тильда» (~) управляем состоянием кнопки отправки или показываем сообщение об успехе. Пример кода: CSS /* Разблокируем кнопку, когда заполнено минимум 3 поля */ .form:has(.field:nth-child(3 of :has(input:not(:placeholder-shown)))) button { opacity: 1; pointer-events: auto; } 👉 @seniorFront
33 · 9.3K ·
S
Senior Frontend - javascript, html, css
Фотография
нажмите — покажем
Нативный CSS-скоупинг: как изолировать стили без сборщиков Если вы работали с Vue или Svelte, то наверняка любите их локальные стили (scoping) — это когда код компонента заперт внутри него и не ломает верстку в других частях сайта. Раньше для этого приходилось настраивать CSS Modules или плагины для Webpack/Vite. Теперь браузеры учатся делать это сами. В Safari появилась интересная фича — контейнеры только по имени (Name-Only Containers). Обычно директива @container проверяет размеры экрана (например, «если родитель шире 500px»). Но если убрать условие размера и оставить только имя, мы получаем отличный инструмент для изоляции стилей: CSS /* Обозначаем границы нашего компонента карточки */ .my-card { container-name: card-container; } /* Пишем стили, которые будут работать ТОЛЬКО внутри этой карточки */ @container card-container { .title { color: royalblue; } } Теперь, даже если на сайте есть другие элементы с классом .title, наш цвет применится только внутри .my-card. 👉 @seniorFront
30 · 12K ·

Открытая публичная лента из поискового индекса ChatCrawler — «Google по публичному Telegram»; обновляется по мере обхода площадки. Время — UTC.

Только публичный контент, официальный API Telegram. О проекте · Вопросы · Границы индекса · Убрать страницу из выдачи · Каталог · Поиск · Как мы считаем