Senior Frontend - javascript, html, css
Open in Telegram
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront Канал в реестре РКН https://rknn.link/bsU
Show more2025 year in numbers

26 766
Subscribers
-1924 hours
-917 days
-28630 days
Posts Archive
Photo unavailableShow in Telegram
Открыть бизнес? Конечно, со Сбером!
За 0₽ любой тариф расчётно-кассового обслуживания на месяц, выбирайте тот, который больше всего подойдёт вашему делу.
А также:
✅ бесплатные сервисы для ведения бизнеса: бухгалтерия для ИП, юрподдержка, электронный документооборот, отчётность в госорганы и многое другое. Всё, чтобы вам было удобно!
✅ специальные условия для тех, кто ведёт бизнес на маркетплейсах: безлимитные переводы на счета физлиц без комиссии.
Откройте счёт онлайн или в любом нашем офисе.
Узнать больше
Финансовые услуги оказывает: ПАО Сбербанк.
#реклама
sberbank.com
О рекламодателе
❤ 1🤔 1
Photo unavailableShow in Telegram
Как спасти проект, если нашли баги перед релизом
Документация есть, тесты написаны, проверки закончили, даже QA не выгоревший. И всё равно за день до выкладки что-то ломается. Мы собрали истории — из больших и не очень команд — о том, как баги всплывают в последний момент и что с этим делать, если вы не Google, а просто хотите выкатиться без боли.
👉 @seniorFront
❤ 2👎 1
Статья
Photo unavailableShow in Telegram
Sum of two lowest positive integers
Создайте функцию, которая возвращает сумму двух наименьших положительных чисел для заданного массива, состоящего минимум из 4 положительных целых чисел. В массив не будут переданы числа с плавающей запятой или отрицательные целые числа.
Например, когда массив передается как [19, 5, 42, 2, 77] вывод должен быть 7.
👉 @seniorFront
CodeWars
00:05
Video unavailableShow in Telegram
Gooey Menu
Анимированное меню, реализованное на HTML и SCSS с использованием SVG фильтров.
👉 @seniorFront
2025-06-27 11-42-14.mp41.89 KB
👍 3
CodePen
04:50
Video unavailableShow in Telegram
Cursor in & Out Ripple Effects
В этом видео создается эффект при входе и выходе курсора на карточку на CSS и JS.
👉 @seniorFront
Cursor in & Out Ripple Effects (1).mp416.91 MB
👍 5
Оригинальное видео
Что будет значением this в функции, вызванной в строгом режиме ("use strict") без привязки к объекту?Anonymous voting
- window
- undefined
- null
- global
👍 6👎 6🤔 2
00:24
Video unavailableShow in Telegram
CSS scroll down button
Подборка анимированных кнопок прокрутки, реализованных на HTML и CSS.
👉 @seniorFront
2025-06-27 11-39-30.mp44.45 MB
🔥 4❤ 2👎 1
CodePen
Photo unavailableShow in Telegram
Введение в Angular: основы и практические навыки
В ходе занятия познакомимся с основными концепциями Angular, разберем его ключевые компоненты и научимся создавать интерактивные и структурированные приложения. Что такое модули, компоненты, директивы, пайпы и сервисы, а также освоите работу с данными через привязку, настроите маршрутизацию и создадите простую форму с валидацией.
👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Поймут, как устроен Angular и как с ним работать.
- Сумеют самостоятельно создать простое одностраничное приложение.
- Освоят основы архитектуры приложения: компоненты, модули и маршруты.
- Получат опыт настройки форм и базовой проверки данных.
- Будут готовы к дальнейшему изучению Angular и построению полноценных проектов.
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://clck.ru/3N4Yha
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Erid 2SDnjc2uSwx
❤ 2
Photo unavailableShow in Telegram
Гайд МТС Линк для CEO по эффективным онлайн-встречам
Как CEO сохранять фокус на стратегии и развивающих задачах и не терять договоренности с руководителями и топ-командой?
Гайд МТС Линк — чек-листы, кейсы и подходы для оптимизации совещаний с помощью онлайн-встреч и ИИ.
✅ В гайде:
- Как доносить цели, культуру и стратегию компании до каждого сотрудника;
- Как снижать затраты на корпоративное обучение без потери качества и вовлечения;
- Как сократить расходы на организацию имиджевых событий с помощью одного решения;
- Как не устроить хаос в коммуникациях между командами при расширении компании.
Бонус внутри: 5 способов не выгореть от бесконечных синков.
✨ Скачайте гайд бесплатно по ссылке
Скачать
#реклама 16+
mts-link.ru
О рекламодателе
00:05
Video unavailableShow in Telegram
Pizza
Анимированная 3D пицца, реализованная на HTML и SCSS.
👉 @seniorFront
2025-06-27 11-42-44.mp41.84 MB
👍 2🤔 2
CodePen
00:05
Video unavailableShow in Telegram
Поймали JavaScript за руку!
👉 @seniorFront
дж расисит.mp41.25 MB
❤ 12👎 1
11:10
Video unavailableShow in Telegram
Responsive Image Slider
В этом видео создается анимированная карусель картинок на HTML и CSS.
👉 @seniorFront
How to Create Responsive Image Slider using HTML and CSS.mp440.08 MB
🔥 3
Оригинальное видео
00:06
Video unavailableShow in Telegram
Direction-aware 3D hover effect
В JS создана логика определения стороны, с которой приходит курсор пользователя и установки соответствующего CSS класса.
👉 @seniorFront
2024-05-12 16-32-02.mp46.77 KB
🔥 3👍 2❤ 1
CodePen
Photo unavailableShow in Telegram
Наставничество — не работа. Это твой шанс стать тем, кого слушают и прислушиваются😀
Сейчас самое время чтобы стать наставником для поколения, которое изменит мир.
«Алабуга Политех» открывает двери экспертам направлений:
– Бизнес-информатика 1С;
– Бухгалтерский учет;
– Экономика;
– Русский язык как иностранный.
– И многих других 😀
Реализуйте собственный потенциал и обучайте лучших студентов России и СНГ. Не теряйте возможность присоединиться к команде мечты — пишите нашему специалисту 😀
Создавайте будущее уже сегодня! 😀
❤ 2👍 1🔥 1🤔 1
Photo unavailableShow in Telegram
UX не так прост. 18 примеров темных паттернов
Темные паттерны, также известные как обманные или манипулятивные, — элементы UX-дизайна, которые подталкивают (может и не умышленно) пользователей к действиям, которые те не планировали совершать.
Спонтанные покупки, потеря личных данных, оформление подписок — зачастую вызваны наивностью, доверчивостью или когнитивными искажениями пользователей. Но как правило, все в интересах бизнеса!
В краткосрочной перспективе такой подход вполне может принести выгоду вроде роста продаж или вовлеченности. А что в долгосрочной? Подрыв доверия и вред пользователям? В статье разбираем, что такое темные паттерны, оцениваем их распространенность и рассматриваем 18 конкретных примеров.
👉 @seniorFront
👍 1
Статья
Почему найти работу в 2025 году стало почти невозможно?
Раньше поиск работы был прост: обновил резюме, откликнулся на вакансии, прошёл пару собеседований — и вот оффер. Больше откликов — больше шансов. Но в 2025 году это уже квест на выживание. Требуют 5 лет опыта, возраст до 30, навыки работы за троих, знание нейросетей и TypeScript, готовность к стрессу и KPI без чёткого ТЗ. Найти работу стало не просто сложно — почти нереально. Разбираемся, почему.
"Низкая безработица" — миф?
Росстат рапортует: безработица на уровне 2,4% — исторический минимум. Но реальность другая. На hh.ru в мае 2025 вакансий на 28% меньше, чем в 2024, а резюме — на 29% больше. На одну позицию разработчика — 100–500 откликов. HR’ы тонут в резюме, а соискатели — в конкуренции.
Джунам дверь захлопнулась
Новичкам и карьеристам-свитчерам особенно тяжело:
- Стажировок почти нет — компании не хотят обучать, им нужны готовые мидлы+.
- На junior-позиции откликаются опытные специалисты, которых сократили.
- Рынок переполнен однотипными резюме от выпускников курсов.
IT уже не тот остров стабильности
До 2022 года IT-шники жили в раю: открой резюме на hh.ru — и отбивайся от рекрутеров. Уволился без плана? Найдёшь работу за пару недель. Теперь даже мидлы+ с 5 годами опыта ищут месяцами. Мои знакомые с сильным бэком сидят без офферов — и это норма.
Почему так?
- После 2022 года компании урезали бюджеты, многие уехали, рынок стал локальным.
- ИИ забирает простые задачи: джунам не дают шанса, ведь код пишут нейросети.
- Хайп «войти в IT» породил толпу одинаковых кандидатов.
- Зарплаты стагнируют, а требования растут: ждут многозадачности за скромные деньги.
Что ещё бесит?
- Собеседования превратились в марафон: 3+ этапа, тестовые, которые никто не смотрит.
- Работодатели предлагают проектные роли или частичную занятость, но с полной ответственностью.
- Обучение? Забудьте. Все хотят готовых спецов.
Что делать?
Рынок сузился, конкуренция бешеная, а требования запредельные. Устроиться в 2025 — это подвиг, а не норма. Но если IT — ваше, не сдавайтесь. Работайте над навыками, ищите ниши, где ИИ пока не рулит, и держите фокус. Прорвётесь!
P.S. Это не нытьё, а честный взгляд на рынок. Если вы в поиске работы — дело не только в вас. Рынок перегрелся и забыл про новичков. Но у тех, кто горит делом, шансы есть всегда.
👉 @seniorFront
❤ 6👍 4🤔 1
Статья
Photo unavailableShow in Telegram
🥾 Первый шаг в Angular - создаем приложение с нуля
Вводное знакомство с Angular - современным фреймворком для разработки веб-приложений. Мы расскажем о его основных концепциях, структуре и возможностях.
👉 Какие ключевые темы и вопросы будут рассмотрены на вебинаре?
- Что такое Angular и зачем он нужен
- Основные компоненты Angular:Модули, компоненты, директивы, пайпы, сервисы
- Работа с данными: привязка данных (data binding)
- Основы маршрутизации (routing)
- Простая форма и валидация
- Как запустить и протестировать приложение
- Какие результаты и навыки получат участники после вебинара?
Бесплатный вебинар проходит в рамках курса “Angular Developer“
Регистрация и подробнее о курсе Angular Developer - https://clck.ru/3MzM3S
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Erid 2SDnjeHB6ow
❤ 1👎 1
00:04
Video unavailableShow in Telegram
Canvas Loader
Реализовано на canvas и чистом JS.
👉 @seniorFront
2025-06-27 11-40-15.mp44.04 KB
👍 3
CodePen
Как можно работать с датами в js?
В JavaScript для работы с датами можно использовать:
-
Date – встроенный объект
- Библиотеку Intl.DateTimeFormat – для форматирования
- Библиотеки (moment.js, date-fns, luxon) – для удобной работы
Встроенный объект `Date`
Создание даты
const now = new Date(); // Текущая дата и время
console.log(now); // Например: 2025-02-25T12:34:56.789Z
Способы создания даты
new Date(); // Текущая дата
new Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)
new Date("2025-02-25"); // ISO строка
new Date(1708850400000); // Unix timestamp (в мс)
Получение значений
const date = new Date();
console.log(date.getFullYear()); // 2025
console.log(date.getMonth()); // 1 (февраль, потому что январь — 0)
console.log(date.getDate()); // 25
console.log(date.getDay()); // 2 (вторник, потому что воскресенье — 0)
console.log(date.getHours()); // Часы
console.log(date.getMinutes()); // Минуты
console.log(date.getSeconds()); // Секунды
console.log(date.getTime()); // Время в миллисекундах (Unix timestamp)
Изменение даты
const date = new Date();
date.setFullYear(2030);
date.setMonth(11); // Декабрь
date.setDate(31);
console.log(date); // 31 декабря 2030
Форматирование даты
const date = new Date();
console.log(date.toDateString()); // "Tue Feb 25 2025"
console.log(date.toISOString()); // "2025-02-25T12:34:56.789Z"
console.log(date.toLocaleString()); // Локальное представление
console.log(date.toUTCString()); // "Tue, 25 Feb 2025 12:34:56 GMT"
Форматирование с Intl.DateTimeFormat
const date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", {
year: "numeric",
month: "long",
day: "numeric",
weekday: "long",
});
console.log(formatter.format(date)); // "вторник, 25 февраля 2025 г."
Библиотеки (более удобные способы)
date-fns (легковесная альтернатива Moment.js)
npm install date-fns
import { format, addDays } from "date-fns";
const now = new Date();
console.log(format(now, "dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(addDays(now, 5)); // Дата + 5 дней
moment.js (устаревший, но популярный)
npm install moment
import moment from "moment";
const now = moment();
console.log(now.format("DD.MM.YYYY HH:mm")); // 25.02.2025 15:30
console.log(now.add(5, "days").format("DD.MM.YYYY")); // +5 дней
luxon (современная альтернатива Moment.js)
npm install luxon
import { DateTime } from "luxon";
const now = DateTime.now();
console.log(now.toFormat("dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(now.plus({ days: 5 }).toFormat("dd.MM.yyyy")); // +5 дней
Разница между датами
const date1 = new Date("2025-02-25");
const date2 = new Date("2025-03-01");
const diff = date2 - date1; // Разница в миллисекундах
console.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)
👉 @seniorFront👍 8
Статья
Photo unavailableShow in Telegram
Техники антипродуктивности
К чёрту продуктивность.
Лично я более 10 лет варился в супе техник продуктивности и борьбы с прокрастинацией, многое что пробовал. Искал ту технику, которая будет подходить лично мне. Ведь, кажется, что надо найти тот подход, который сработает для тебя. И тогда ты вдруг станешь успевать делать больше дел в срок.
Но это не так, и в этой статье я попробую донести смысл того, как действительно делать больше, не становясь более продуктивным.
👉 @seniorFront
❤ 7
Статья
