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

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Material Design: Profile Card

Карточка создана и анимирована на чистых HTML и CSS.

👉 @seniorFront
5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
UI Motion

Вся сцена - это SVG картинка, анимируемая библиотекой TweenMax.

👉 @seniorFront
4👍1
Какой формат строки возвращает метод toISOString()?
Anonymous Quiz
6%
"Tue Feb 25 2025"
62%
"2025-02-25T12:34:56.789Z"
6%
"25.02.2025 12:34"
26%
"Tue, 25 Feb 2025 12:34:56 GMT"
👍3
Media is too big
VIEW IN TELEGRAM
How to Create Game in Javascript

В этом видео создается игра-пазл на JS.

👉 @seniorFront
4
This media is not supported in your browser
VIEW IN TELEGRAM
CSS slider with custom effects

Оригинальный слайдер, реализованный на HTML и SCSS.

👉 @seniorFront
👍6
Next smaller number with the same digits

Напишите функцию, которая принимает положительное целое число и возвращает следующее меньшее положительное целое число, содержащее те же цифры

Возврат -1, если не существует меньшего числа, содержащего те же цифры. Также верните -1, если следующее меньшее число с теми же цифрами потребует, чтобы первая цифра была равна нулю

Пример:
nextSmaller(21) == 12
nextSmaller(531) == 513
nextSmaller(9) == -1
nextSmaller(1027) == -1


- Некоторые тесты будут включать очень большие числа
- В тестовых данных используются только положительные целые числа

👉 @seniorFront
👍2
Vue: Composables и TS это вам не Mixins и JS. С ними сложнее

Пришел к хитрому паттерну. Делюсь.

Будет полезен тем кому нравиться или приходится работать с Vue.
В подходящей ситуации он сэкономит кучу времени и поможет избежать дублирования кода.

👉 @seniorFront
👍7👎1
Разработка через тестирование (TDD)

Разработка через тестирование (Test Driven Development, TDD) — практика разработки программ, при которой мы вначале пишем тесты для функциональности, которую хотим создать, затем — реализацию этой функциональности. Когда все заработает — рефакторим код.

Основной посыл TDD — в разбиении больших задач на маленькие. Стандартный цикл разработки состоит из трёх этапов и занимает 10–15 минут.

1. Красная зона. На нём мы пишем тест, который точно упадёт с ожидаемой причиной. Если причина падения теста не совпадает с ожидаемой, переходить к реализации функциональности рано.
2. Зелёная зона. На нём пишем функцию, которая проходит этот тест. Цикл короткий, поэтому реализация должна быть максимально простой.
3. Синяя зона. На этом этапе мы рефакторим код тестов и реализации. Проводить рефакторинг в синей зоне безопасно, потому что вся функциональность, которую рефакторинг затрагивает, уже покрыта тестами. Если что‑то по пути сломается, мы об этом тут же узнаем.

👉 @seniorFront
👍3👎2
This media is not supported in your browser
VIEW IN TELEGRAM
ELC

Создано и анимировано на чистых CSS и JS.

👉 @seniorFront
👍52
Как перейти в IT без увольнения: опыт сотрудников Хабра и курсы для горизонтального перехода

Мечтаете сменить профессию и уйти в IT, но не готовы увольняться? Горизонтальный переход внутри компании — ваш вариант! Хабр Карьера делится историями коллег, которые сменили специализацию, не покидая компанию, и рассказывает, как курсы помогают в этом.

Почему горизонтальный переход — это круто?

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

Истории успеха:

- Маша (маркетинг → QA): Заметила, что проверка фич ей интереснее, чем маркетинг. Попросила переход, прошла курс «Инженер по тестированию» от Яндекс Практикума и выросла в зарплате почти в 2 раза!

- Артём (продюсирование → продакт): Взял задачи продакта, потом прошёл курсы от Productstar и Gopractice. Зарплата выросла в 3 раза за 2 года.

- Ангелина (продажи → продакт → проджект): Настояла на переводе, училась на курсах Productstar. Оклад сначала упал, но через пару месяцев вырос выше прежнего.

- Настя (химик → PHP-разработчик): Ушла из химии, прошла курс от Geekbrains. Теперь зарабатывает на 40% больше и не жалеет!

Как договориться с руководителем?

- Чётко объясните, почему переход полезен компании.
- Узнайте, какие навыки нужны для новой роли.
- Покажите инициативу: начните с задач новой роли или выберите курс.
- Спросите про поддержку: компании часто оплачивают обучение или выделяют время.

А что с зарплатой?
- Сразу: Если у вас есть опыт, рост может быть ощутимым (как у Маши — х2).
- Позже: Новичкам платят как джунам, но за 6–12 месяцев можно вырасти (как у Артёма — х3).
- Переходный этап: Берите задачи новой роли с доплатой или без, пока учитесь.

Советы для успеха:
- Выбирайте структурированные курсы с практикой и код-ревью.
- Ставьте реалистичные цели и учитесь хотя бы по 30 минут в день, чтобы не выгореть.
- Найдите ментора в команде — это ускорит переход.
- Балансируйте работу и учёбу: просите тимлида разгрузить текущие задачи.

Зачем курсы?

Курсы — не билет в IT, но мощный старт: систематизируют знания, дают практику и портфолио. Лучше всего — программы с проектной работой и менторством.

👉 @seniorFront
1👍1
Ключевые понятия LLM

Современные языковые модели (large language models) стали ключевым элементом в развитии искусственного интеллекта и обработки естественного языка.

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

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

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

Приятного прочтения!

👉 @seniorFront
2👍1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Additive fireflies

Частицы создаются в JS и анимируются библиотекой anime.js

👉 @seniorFront
👍3
Media is too big
VIEW IN TELEGRAM
Animated Hot Cup of Tea

В этом видео создается анимированная чашка кофе на чистых HTML и CSS.

👉 @seniorFront
👍2
Привет! 👋
21 августа в 19:00 (МСК) Health Samurai проводят онлайн-митап про современные цветовые пространства в вебе — Display P3 и OKLCH. Расскажем как добиться максимума от цветопередачи и не запороть проект.
Спикер — Василий Беляев, опытный фронтенд-разработчик.

В докладе раскроем подробнее:
🔈 Почему привычный sRGB уже не справляется и как использовать расширенные цветовые пространства;
🔈 Практические CSS-фишки для работы с современными цветами на веб-страницах;
🔈 Как создавать яркие иллюстрации для новых дисплеев и сохранять поддержку старых браузеров;
🔈 Реальные примеры и советы, чтобы цвета действительно выглядели "как на макете".

Будет полезно фронтендерам, дизайнерам и маркетологам, которые хотят создавать современные и яркие сайты. Минимум кода и максимум наглядных примеров! :)

Участие бесплатное, нужна регистрация! Подробности здесь 👈
1👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Кто-то: не понимаю прикола сидеть на удалёнке

Удалёнщики:

👉 @seniorFront
👍12
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle Pill

Подборка переключателей с различными CSS анимациями.

👉 @seniorFront
1👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Responsive Blog Card Slider

Карточка - слайдер, стилизованная в SCSS. Логика работы слайдера реализована библиотекой Swiper.

👉 @seniorFront
👍3👎32
Что из перечисленного в JavaScript позволяет перехватывать операции чтения и записи свойств объекта?
Anonymous Quiz
41%
Proxy
31%
Object.observe
15%
MutationObserver
👍3
Media is too big
VIEW IN TELEGRAM
CSS Animation Effects

В этом видео создается анимированная граница блока на HTML и CSS.

👉 @seniorFront
6👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Living Words

Сцена реализована на HTML и CSS. Слова добавляются через JS.

👉 @seniorFront
👍3🤔32