Senior Frontend - javascript, html, css
الذهاب إلى القناة على Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
إظهار المزيد2025 عام في الأرقام

26 773
المشتركون
-1924 ساعات
-917 أيام
-28630 أيام
أرشيف المشاركات
Photo unavailableShow in Telegram
Истории нейросетей и истории о нейросетях, нюансы цифровизации работы банка, методы увеличения эффективности команд, ностальгия по старым играм и девайсам, разборы технологий разработки и тестирования...
Всё это (и не только) можно найти в блоге ПСБ на Хабре. Читайте, подписывайтесь и следите за развитием банка из топ-4 по размеру активов!
#Реклама
О Рекламодателе
👍 1
Подписывайтесь на блог ПСБ
Photo unavailableShow in Telegram
Истории нейросетей и истории о нейросетях, нюансы цифровизации работы банка, методы увеличения эффективности команд, ностальгия по старым играм и девайсам, разборы технологий разработки и тестирования...
Всё это (и не только) можно найти в блоге ПСБ на Хабре. Читайте, подписывайтесь и следите за развитием банка из топ-4 по размеру активов!
#Реклама
О Рекламодателе
👍 1
Подписывайтесь на блог ПСБ
Photo unavailableShow in Telegram
Find the odd int
В массиве целых чисел найдите то, которое встречается нечетное количество раз. Всегда найдется только одно целое число, которое встречается нечетное количество раз.
Пример:
[7]Должно вернуть 7, потому что оно встречается 1 раз (что нечетно).
[0]Должно вернуть 0, потому что оно встречается 1 раз (что нечетно).
[1,1,2]Должно вернуть 2, потому что оно встречается 1 раз (что нечетно).
[0,1,0,1,0]
Должно вернуть 0, потому что оно встречается 3 раза (что нечетно).
[1,2,2,3,3,3,4,3,3,3,2,2,1]Должно вернуть 4, потому что оно встречается 1 раз (что нечетно). 👉 @seniorFront
👍 1
CodeWars
00:06
Video unavailableShow in Telegram
Living Words
Сцена реализована на HTML и CSS. Слова добавляются через JS.
👉 @seniorFront
2025-07-20 12-46-32.mp42.58 MB
👍 2🤔 2❤ 1
CodePen
08:01
Video unavailableShow in Telegram
CSS Animation Effects
В этом видео создается анимированная граница блока на HTML и CSS.
👉 @seniorFront
CSS Animation Effects Tutorial Html CSS Animated Border.mp427.83 MB
❤ 6👍 2
Оригинальное видео
Что из перечисленного в JavaScript позволяет перехватывать операции чтения и записи свойств объекта?Anonymous voting
- Object.watch
- Proxy
- Object.observe
- MutationObserver
👍 3
00:07
Video unavailableShow in Telegram
Responsive Blog Card Slider
Карточка - слайдер, стилизованная в SCSS. Логика работы слайдера реализована библиотекой Swiper.
👉 @seniorFront
2025-07-20 12-46-49.mp41.01 MB
👍 3👎 3❤ 2
CodePen
Photo unavailableShow in Telegram
Методичка: как сделать онлайн-встречи эффективнее
Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать?
Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи.
Из методички узнаете:
- Как создать постоянную ссылку и подключаться на встречи в 2 клика,
- Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных.
- Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту.
Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч.
Получить гайд можно бесплатно на сайте.
Скачать
#реклама 16+
mts-link.ru
О рекламодателе
👍 1👎 1
00:13
Video unavailableShow in Telegram
Toggle Pill
Подборка переключателей с различными CSS анимациями.
👉 @seniorFront
2025-07-20 12-47-20.mp44.91 KB
👍 1
CodePen
00:38
Video unavailableShow in Telegram
Кто-то: не понимаю прикола сидеть на удалёнке
Удалёнщики:
👉 @seniorFront
епппввп.mp44.08 MB
👍 10
Photo unavailableShow in Telegram
Привет! 👋
21 августа в 19:00 (МСК) Health Samurai проводят онлайн-митап про современные цветовые пространства в вебе — Display P3 и OKLCH. Расскажем как добиться максимума от цветопередачи и не запороть проект.
Спикер — Василий Беляев, опытный фронтенд-разработчик.
В докладе раскроем подробнее:
🔈 Почему привычный sRGB уже не справляется и как использовать расширенные цветовые пространства;
🔈 Практические CSS-фишки для работы с современными цветами на веб-страницах;
🔈 Как создавать яркие иллюстрации для новых дисплеев и сохранять поддержку старых браузеров;
🔈 Реальные примеры и советы, чтобы цвета действительно выглядели "как на макете".
Будет полезно фронтендерам, дизайнерам и маркетологам, которые хотят создавать современные и яркие сайты. Минимум кода и максимум наглядных примеров! :)
Участие бесплатное, нужна регистрация! Подробности здесь 👈
👍 1
09:19
Video unavailableShow in Telegram
Animated Hot Cup of Tea
В этом видео создается анимированная чашка кофе на чистых HTML и CSS.
👉 @seniorFront
Animated_Hot_Cup_of_Tea_using_Html_&_CSS_only_CSS_Animation_Effects.mp432.86 MB
👍 1
Оригинальное видео
00:25
Video unavailableShow in Telegram
Регистрируйтесь на Yandex Ecom Open Air 8 августа
Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг.
Участие бесплатно!
Зарегистрироваться
#реклама 18+
ecomfest.ru
О рекламодателе
tmp1tgf89k7.mp492.99 MB
👍 1
00:07
Video unavailableShow in Telegram
Additive fireflies
Частицы создаются в JS и анимируются библиотекой anime.js
👉 @seniorFront
2025-07-20 12-46-16.mp43.59 MB
👍 2
CodePen
Photo unavailableShow in Telegram
⌨ Хотите научиться создавать полноценные API-серверы с использованием Node.js и TypeScript?
Приглашаем на открытый урок «Как создать API-сервер с TypeScript и Node.js».
🗓 4 августа в 20:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer».
На открытом уроке мы покажем, как быстро настроить сервер с помощью Express, создать маршруты для работы с данными и обрабатывать запросы от клиентов. Вы освоите основы TypeScript и API-разработки, получите знания для работы с типами данных и ошибок.
🎯 Погрузитесь в мир востребованной backend-разработки: создайте API-сервер, научитесь писать чистый и безопасный код и откройте для себя возможности Node.js.
🔗 Ссылка на регистрацию: https://clck.ru/3NJ5p3
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjcDaBSn
👍 1
Photo unavailableShow in Telegram
Ключевые понятия LLM
Современные языковые модели (large language models) стали ключевым элементом в развитии искусственного интеллекта и обработки естественного языка.
Модели, основанные на глубоком обучении и архитектуре трансформеров, способны генерировать текст, отвечать на вопросы, писать код, создавать художественные произведения и даже участвовать в логических рассуждениях.
Освоение ключевых концепций, лежащих в основе LLM, позволяет глубже осознать их возможности и ограничения. В этом материале мы рассмотрим базовые термины и идеи, необходимые для работы с LLM и понимания их роли в современном мире.
Знание фундаментальных принципов, лежащих в основе работы LLM, открывает двери как для исследователей и разработчиков, так и для бизнес-специалистов, студентов и всех, кто хочет эффективно использовать эти технологии в своей практике.
Приятного прочтения!
👉 @seniorFront
❤ 2👍 1🤔 1
Статья
Как перейти в IT без увольнения: опыт сотрудников Хабра и курсы для горизонтального перехода
Мечтаете сменить профессию и уйти в IT, но не готовы увольняться? Горизонтальный переход внутри компании — ваш вариант! Хабр Карьера делится историями коллег, которые сменили специализацию, не покидая компанию, и рассказывает, как курсы помогают в этом.
Почему горизонтальный переход — это круто?
- Вы уже знаете продукт и культуру компании.
- Софт-скилы на месте, осталось добрать хард-скилы.
- Меньше стресса, чем начинать с нуля в новой компании.
Истории успеха:
- Маша (маркетинг → QA): Заметила, что проверка фич ей интереснее, чем маркетинг. Попросила переход, прошла курс «Инженер по тестированию» от Яндекс Практикума и выросла в зарплате почти в 2 раза!
- Артём (продюсирование → продакт): Взял задачи продакта, потом прошёл курсы от Productstar и Gopractice. Зарплата выросла в 3 раза за 2 года.
- Ангелина (продажи → продакт → проджект): Настояла на переводе, училась на курсах Productstar. Оклад сначала упал, но через пару месяцев вырос выше прежнего.
- Настя (химик → PHP-разработчик): Ушла из химии, прошла курс от Geekbrains. Теперь зарабатывает на 40% больше и не жалеет!
Как договориться с руководителем?
- Чётко объясните, почему переход полезен компании.
- Узнайте, какие навыки нужны для новой роли.
- Покажите инициативу: начните с задач новой роли или выберите курс.
- Спросите про поддержку: компании часто оплачивают обучение или выделяют время.
А что с зарплатой?
- Сразу: Если у вас есть опыт, рост может быть ощутимым (как у Маши — х2).
- Позже: Новичкам платят как джунам, но за 6–12 месяцев можно вырасти (как у Артёма — х3).
- Переходный этап: Берите задачи новой роли с доплатой или без, пока учитесь.
Советы для успеха:
- Выбирайте структурированные курсы с практикой и код-ревью.
- Ставьте реалистичные цели и учитесь хотя бы по 30 минут в день, чтобы не выгореть.
- Найдите ментора в команде — это ускорит переход.
- Балансируйте работу и учёбу: просите тимлида разгрузить текущие задачи.
Зачем курсы?
Курсы — не билет в IT, но мощный старт: систематизируют знания, дают практику и портфолио. Лучше всего — программы с проектной работой и менторством.
👉 @seniorFront
❤ 1👍 1
Статья
00:07
Video unavailableShow in Telegram
ELC
Создано и анимировано на чистых CSS и JS.
👉 @seniorFront
2025-07-20 12-45-57.mp43.48 MB
👍 5❤ 1
CodePen
Photo unavailableShow in Telegram
Разработка через тестирование (TDD)
Разработка через тестирование (Test Driven Development, TDD) — практика разработки программ, при которой мы вначале пишем тесты для функциональности, которую хотим создать, затем — реализацию этой функциональности. Когда все заработает — рефакторим код.
Основной посыл TDD — в разбиении больших задач на маленькие. Стандартный цикл разработки состоит из трёх этапов и занимает 10–15 минут.
1. Красная зона. На нём мы пишем тест, который точно упадёт с ожидаемой причиной. Если причина падения теста не совпадает с ожидаемой, переходить к реализации функциональности рано.
2. Зелёная зона. На нём пишем функцию, которая проходит этот тест. Цикл короткий, поэтому реализация должна быть максимально простой.
3. Синяя зона. На этом этапе мы рефакторим код тестов и реализации. Проводить рефакторинг в синей зоне безопасно, потому что вся функциональность, которую рефакторинг затрагивает, уже покрыта тестами. Если что‑то по пути сломается, мы об этом тут же узнаем.
👉 @seniorFront
👍 3👎 2
Статья
Photo unavailableShow in Telegram
Vue: Composables и TS это вам не Mixins и JS. С ними сложнее
Пришел к хитрому паттерну. Делюсь.
Будет полезен тем кому нравиться или приходится работать с Vue.
В подходящей ситуации он сэкономит кучу времени и поможет избежать дублирования кода.
👉 @seniorFront
👍 7👎 1
Статья
