Senior Frontend - javascript, html, css
Відкрити в Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
Показати більше2025 рік у цифрах

26 776
Підписники
-1924 години
-917 днів
-28630 день
Архів дописів
Фото недоступнеДивитись в Telegram
Not very secure
В этом примере вам необходимо проверить, является ли строка ввода пользователя буквенно-цифровой.
Строка имеет следующие условия, чтобы быть буквенно-цифровой:
- Должен быть хотя бы один символ ( "" недопустимо)
- Разрешенными символами являются прописные/строчные латинские буквы и цифры от 0 до 9
- Никаких пробелов или подчеркиваний
Пример:
alphanumeric("Mazinkaiser") // true
alphanumeric("hello world_") // false
alphanumeric("PassW0rd") // true
alphanumeric(" ") // false👍 2
CodeWars
00:08
Відео недоступнеДивитись в Telegram
Perspective Menu
Меню, анимируемые при наведении, созданные с использованием препроцессоров Pug и Stylus.
👉 @seniorFront
2025-08-03 21-32-30.mp46.66 KB
👍 3❤ 2
CodePen
08:02
Відео недоступнеДивитись в Telegram
Awesome Image Effects
В этом видео анимируется картинка, распадающаяся на частицы на CSS и JS
👉 @seniorFront
Unbelievable_Awesome_Image_Effects_using_CSS_&_Javascript.mp450.32 MB
👍 2❤ 1
Оригинальное видео
Фото недоступнеДивитись в Telegram
Как перейти от журнала «Мурзилка», «Цикла Хайпа» и истории математической бесконечности к ESLint, обратной совместимости и архитектуре Serverless? Легко – за один скролл по блогу ПСБ на Хабр!
Что вас ждет:
Статьи по архитектуре приложений Банка
Живые истории команд, стажеров и наставников
Ностальгические находки: листаем журналы!
Исследуем математическую бесконечность научпоп и опыт коллег
Подписывайтесь на Блог ПСБ!
#Реклама
О Рекламодателе
👍 1
Подписывайтесь на блог ПСБ
Что такое TDD?Anonymous voting
- Методология написания кода без тестов
- Практика написания тестов после реализации функциональности
- Практика написания тестов до реализации функциональности
- Техника автоматического тестирования готового приложения
❤ 5
00:09
Відео недоступнеДивитись в Telegram
Curved Texts
Это анимированные SVG картинки. Анимация запускается через JS.
👉 @seniorFront
2025-08-03 21-31-37.mp45.44 KB
👍 4❤ 1
CodePen
Фото недоступнеДивитись в Telegram
Получи грант до 1,2 млн руб. на обучение в магистратуре
4 офлайн программы, онлайн-магистратура по ML. Гранты до 1,2 млн руб. Стажировки, диплом гос. образца и фокус на твоей карьере в ЦУ
Подать заявку
#реклама 16+
apply.centraluniversity.ru
О рекламодателе
👍 1
00:06
Відео недоступнеДивитись в Telegram
Minimal Clothing Catalogue
Оригинальные раскрывающиеся карточки, реализованные на HTML и SCSS.
👉 @seniorFront
2025-08-03 21-31-10.mp46.56 KB
👍 3❤ 1
CodePen
00:05
Відео недоступнеДивитись в Telegram
Тебя вообще кто-то спрашивал?
👉 @seniorFront
video_2025-01-16_11-59-25.mp43.75 KB
❤ 12👍 4🔥 4
Фото недоступнеДивитись в Telegram
Онлайн-магистратура с IT специальностями от Яндекса
Совместно с ИТМО, МИФИ, МФТИ.
Онлайн-магистратура с актуальными программами и гибким графиком обучения.
Получите высокооплачиваемую IT профессию, официальный диплом и практические знания.
Господдержка оплаты. Совмещение с работой!
Подать заявку
#реклама 16+
practicum.yandex.ru
О рекламодателе
👍 1👎 1
09:14
Відео недоступнеДивитись в Telegram
Border Animation Effects
В этом видео создаётся анимированная граница блока на HTML и CSS.
👉 @seniorFront
HTML CSS LOVE Border Animation Effects.mp427.51 MB
❤ 2👍 2
Оригинальное видео
Фото недоступнеДивитись в Telegram
🔥 Серверная разработка с Node.js: учитесь у практиков с реальным опытом
🎯 Пора выйти на новый уровень с курсом «Node.js Developer» от OTUS!
Это повышение квалификации для тех, кто хочет научиться разрабатывать мощные серверные приложения на Node.js с использованием Express, TypeScript, GraphQL, Apollo и Nest.js. Вы получите знания, которые востребованы на рынке, и навыки, которые можно сразу применять в реальных проектах.
🦾 Практические занятия, опытные преподаватели и поддержка на протяжении всего обучения — вот что делает курс уникальным. Вы освоите работу с базами данных MongoDB и PostgreSQL, научитесь строить архитектуру приложения и создавать серверные решения с нуля.
🎁 Дарим промокод, который дает скидку на обучение - NODE8
➡️ Пройдите вступительное тестирование и присоединяйтесь к группе: https://clck.ru/3NdwZ5
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
erid 2SDnjeifF7L
👍 2
00:09
Відео недоступнеДивитись в Telegram
Flipping Parallax Card
Создано и анимировано с использованием препроцессоров Pug и Stylus. Логика переключения типа анимации реализована в JS.
👉 @seniorFront
2025-08-03 21-32-07.mp44.14 KB
❤ 2👍 1
CodePen
Фото недоступнеДивитись в Telegram
Скетч системного дизайна: как одна схема решает множество проблем на старте проекта
Если в вашей практике на начальном этапе анализа проекта обозначаются все контексты и границы взаимодействия систем, то скорее всего у вас хорошо развита культура системного дизайна и данная статья для вас не имеет практического значения. В противном случае предлагаю уделить 5 минут вашего времени для ознакомления с материалом.
👉 @seniorFront
👍 2
Статья
Что творится с работой в IT в 2025?
Пару лет назад в компании выстраивались в очередь за кадрами, а рекрутеры искали сотрудников даже в сервисах знакомств. Сейчас страсти поутихли. Высокие ставки ЦБ заставили компании пересмотреть аппетиты: бизнес начал считать каждую копейку, реолаканты вернулись, новичков без опыта после курсов прибавилось. И как же изменения повлияли на рынок?
- Рост зп замедлился — новичкам теперь не светит прибавка, а в некоторых местах вилки и вовсе урезали.
- Джунам теперь нужен опыт — если раньше хватало теоретических знаний, сейчас требуют, чтобы ты уже поработал на реальных проектах.
- Плюшки порезали — бесплатные обеды, спортзалы и психологи теперь только в крупных компаниях, но и за эти привилегии еще нужно побороться.
- Глобальные сокращения — ИИ составляет конкуренцию действующим спецам, больше не нужна команда из 10 человек, достаточно 2-3, которые направляют новые технологии.
Но кадров всё равно не хватает!
На новые проекты собирают ресурсы из переполненных команд и не набирают новых сотрудников. Только теперь нужны не просто «айтишники», а профи в узких областях. Например, в защите данных нехватка — 20%, а в разработке под отечественные ПО для госструктур— 30%. Компании перестали брать «наугад» — нужен человек, который быстро подхватит все задачи.
А что с зарплатами и мировыми трендами?
- Мидлы в минусе — их зарплаты ниже, чем пару лет назад.
- Сеньоры выжимают максимум из бонусов — фиксированные ставки почти не растут.
- Джуны в тисках конкуренции — на одну вакансию приходится 200+ откликов (раньше было 20-30).
В мире тоже не сладко: Amazon, Microsoft и другие гиганты уволили десятки тысяч сотрудников. В России же проблема другая — катастрофически не хватает тех, кто разбирается в нашем софте (российские ОС, базы данных).
Итог
Сейчас в IT пробиваются только те, кто точно знает, чего хочет работодатель. Новичкам придется пахать за дешево, зато узкие спецы всё еще на вес золота.
👉 @seniorFront
❤ 4
Статья
Фото недоступнеДивитись в Telegram
🎯Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда
Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?
В новом сезоне Podlodka React Crew обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.
📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью
💡Все доклады — с практикой, кейсами и интерактивом.
📆 Реактим с 25 по 29 августа. Бегом за билетами: http://podlodka.io/reactcrew
❤ 2👎 2
00:05
Відео недоступнеДивитись в Telegram
Exploring UI Animation
Свёрстано на HTML и SCSS. Логика работы реализована в JS. Анимировано библиотекой TweenMax.
👉 @seniorFront
2025-08-03 21-30-26.mp42.28 MB
👍 3
CodePen
Атрибут autofocus
Атрибут autofocus позволяет автоматически установить фокус на элемент. Это особенно полезно в формах, где важно сразу начать ввод данных без лишних кликов.
Пример
<input name="name" autofocus>
Атрибут autofocus булевый: его присутствие означает true, а отсутствие — false. Чаще его применяют к интерактивным тегам, например, <input>, <button>, <select>, <textarea>.
На странице или в диалоговом окне может быть только один атрибут autofocus. Если же он применён к нескольким элементам, фокус получит первый из них.
Обратите внимание, что автофокус не будет применён к элементам <input> с типом hidden, потому что скрытые поля не могут получать фокус.
Следует также помнить, что использование этого атрибута может ухудшить пользовательский опыт. На мобильных устройствах автофокус вызовет клавиатуру, которая перекроет часть содержимого, что может сбить пользователя с толку и вызвать раздражение. Если элемент с автофокусом расположен не в начале страницы, произойдёт автоматическая прокрутка к нему, из-за чего пользователь может потерять контекст.
👉 @seniorFront👍 4❤ 3
Статья
Демо
Фото недоступнеДивитись в Telegram
Чистая архитектура фронтенд приложений
За свою карьеру я встречал достаточно много проектов, крупных и малых, которые страдали от огромной и запутанной кодовой базы с высоким уровнем зацепления и малой связностью, непонятной структурой, в которую весьма сложно погрузиться (на онбродинг нового сотрудника может уходить до трех месяцев) и большим количеством непонятных и громоздких компонентов, которые являются god object'ами. Стоит ли говорить, что у таких проектов имеются большие проблемы с поддержкой и развитием.
В данном цикле статей я хочу поделиться своими наблюдениями и дать советы и рекомендации, которые помогли мне и, по моему мнению, могут помочь другим разработчикам. Я не буду сразу разбирать типовые ошибки в коде или микроархитектуре, так как это лишь маленькие точки на радаре. Как говорится, рыба гниет с головы, так что я пойду от глобальных проблем к частным и буду каждый раз подводить итог в виде какого-то умозаключения.
👉 @seniorFront
❤ 3
Статья
Фото недоступнеДивитись в Telegram
Incrementer
Вам дан массив чисел. Создайте функцию, которая увеличит каждое число на его позицию в массиве.
Результат может содержать только однозначные числа, так что если добавление цифры с её позицией дает вам многозначное число, то должна быть возвращена только последняя цифра.
(массивы будут содержать только числа)
Пример:
[1, 2, 4] --> [2, 4, 7]
#[1+1, 2+2, 4+3]
[4, 6, 9, 1, 3] --> [5, 8, 2, 5, 8]
# [4+1, 6+2, 9+3, 1+4, 3+5]
# 9+3 = 12 --> 2
👉 @seniorFront❤ 3
CodeWars
