Senior Frontend - javascript, html, css


Гео и язык канала: Россия, Русский
Категория: Технологии


Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Менеджер по рекламе: @Spiral_Yuri

Связанные каналы  |  Похожие каналы

Гео и язык канала
Россия, Русский
Категория
Технологии
Статистика
Фильтр публикаций


Glowy Text Button from Departures

В CSS созданы переменные, значения которых изменяются в JS при перемещении курсора.

👉 @seniorFront


Фронтенд задачки в картинках — просто, наглядно и понятно. Проверяй свои знания в интерактивном формате каждый день.

Присоединяйтесь: @Frontend_Task


Видео недоступно для предпросмотра
Смотреть в Telegram
Magnetic Mousemove Effect

В этом видео создаётся оригинальный эффект при наведении на карточку при помощи JS.

👉 @seniorFront


Какое ключевое слово сбрасывает все указанные значения свойства для конкретного блока до значений по умолчанию?
Опрос
  •   initial
  •   inherit
  •   unset
  •   revert
669 голосов


3D Image Carousel

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

👉 @seniorFront


Image Zoom

Анимировано библиотекой gsap при помощи плагина ScrollTrigger.

👉 @seniorFront


В конце концов всё равно берёшь

👉 @seniorFront


🚀Онлайн-Хакатон Practice & Scale AI 

Тебя ждут увлекательные мастер-классы, командная работа над актуальными кейсами, возможность представить свои результаты на захватывающей питч-сессии и доказать, что ты лучший из лучших! 🔝 

🧑‍💻Уникальные кейсы:
- Рерайтинг текста с помощью ИИ для прохождения фильтрации распознающих систем;
- Анализ звонка на соответствие скрипту для выявления отклонений;
- Создание видео на основе фото и текстового сценария.

🏆Призовой фонд 500 000 рублей!

Приступай к разработке решения уже сейчас, чтобы 23 июня представить лучший продукт - мы ждем: крутые решения в программном коде проекта, потенциал для рыночной масштабируемости и внедрения в бизнес.
 
📅Когда: 21 - 23 июня 2024 года
🌐Формат: Онлайн
🔥Дедлайн регистрации: 19 июня 2024 года, 23:59 (мск)

Подробности и регистрация: https://tglink.io/c89b4d2442e3


Видео недоступно для предпросмотра
Смотреть в Telegram
Slider Controllable with Mouse Wheel

В этом видео создаётся слайдер, переключаемый колесиком мыши. Для этого в JS создается обработчик события 'wheel'.

👉 @seniorFront


LightShadowEffect

В JS создан обработчик события mousemove, в котором изменяются параметры тени и положение источника света.

👉 @seniorFront


Памятка наемного айтишника

Взаимоотношения между работником и работодателем строятся на деловой основе. Приятная атмосфера в коллективе и дружеские отношения с руководством, безусловно, важны. Но не стоит забывать, что это коммерческие отношения, цель которых — обмен труда на вознаграждение.

В этой заметке перечислим, о чём важно помнить, работая по найму.

Ничего личного, просто бизнес. Работник и работодатель — это не семья. Конечно, доверительные отношения с руководителем полезны. Однако будьте осторожными, чтобы под предлогом сохранения хороших отношений не приходилось больше работать или меньше зарабатывать.

«Больше работы» не означает «больше денег». Не стоит делать больше работы за ту же зарплату. Возможным исключением является наличие в компании чёткого процесса повышения, который требует большего количества усилий. В противном случае, есть шанс за тяжёлый труд получить только благодарность в виде грамоты.

Единственные люди, которые помнят о вашей работе сверхурочно и в выходные, — это ваши дети. Работодатель не может в полной мере оценить и вознаградить за переработки. Потому что время, проведённое с семьёй, бесценно.

«Взять отпуск» — не значит «сбежать». Используйте отпуск и больничный, чтобы отдохнуть. Отпуск и больничные — гарантированный Конституцией отдых. Не использовать его — всё равно что не тратить зарплату.

Незаменимых людей нет. Не стоит рассчитывать, что получите прибавку к зарплате или повышение только потому, что делаете для компании так много. Вас заменят.

Документируйте работу. Сохраняйте электронные письма. Фотографируйте рабочие графики, журналы, тайминг задач в Jira. Сохраняйте переписку с работодателем. Это пригодится в спорах с работодателем, чтобы показать, что вы действительно работали.

Зарплата — не коммерческая тайна. Работодатель не имеет права запретить вам раскрывать сумму зарплаты. Единственной целью сокрытия размеров ЗП является желание работодателя платить меньше.

Работодатель должен не только зарплату. Ещё должен обеспечивать условия труда, регламентированные в Трудовом кодексе и в иных документах.

Вывод: на первое место ставьте себя и семью. Знайте и отстаивайте свои права. Работа не цель, она только даёт ресурсы на достижение ваших целей.

👉 @seniorFront


Шпаргалка по XPath и CSS-селекторам

Для написания автотестов используются XPath и CSS-селекторы. Они помогают найти элемент на странице, чтобы потом с ним как-то взаимодействовать (кликнуть, ввести текст, или что-то другое).

В этой статье представлены шпаргалки по разным селекторам, причем в разрезе «Вот он в CSS и он же в XPath» для сравнения.

👉 @seniorFront


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

На курсе мы поможем вам:

— освоить новые навыки и извлекать больше пользы из своих софт-скилов;
— углубить знания в алгоритмах, DevOps, бэкенд‑разработке и смежных сферах;
— сделать с нуля 2 проекта — до работающих приложений.

Если вы не уверены, подойдёт ли вам профессия, — пройдите бесплатную часть и тест в конце. Если понравится, платите за остальную часть как удобно: в рассрочку или целиком.

Начать курс бесплатно


Neon lights

Стилизовано в SCSS. В JS создана логика перемещения светящегося блока.

👉 @seniorFront


Как создать радиальный градиент в CSS?

Функция radial-gradient используется для задания фона в виде радиального (кругового, эллиптического) градиента.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.


Берем ответственность за вопросы: как задавать их правильно

Умение правильно задавать вопросы — это навык, который можно развить. И нужен он не только менеджерам и тимлидам, а всем, потому что мы задаем много вопросов по работе каждый день.

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

👉 @seniorFront


Check same case

Создайте функцию, которая принимает две буквы и проверяет, в одном ли они регистре (обе строчные или обе заглавные).

Примеры:
'a' and 'g' returns 1
'A' and 'C' returns 1
'b' and 'G' returns 0
'B' and 'g' returns 0
'0' and '?' returns -1

👉 @seniorFront


Accessible Horizontal Accordion

Свёрстано на HTML и CSS. Логика переключения реализована в JS.

👉 @seniorFront


Видео недоступно для предпросмотра
Смотреть в Telegram
Liquid Blast Effects

В этом видео создаётся эффект взрыва частиц при наведении. В JS генерируются частицы, которые затем анимируются в CSS.

👉 @seniorFront


Что делает атрибут novalidate у тега form?
Опрос
  •   Отключает пользовательскую JS валидацию формы браузером
  •   Отключает нативную валидацию формы браузером
  •   Добавляет кнопку для подтверждения отправки формы
  •   Скрывает подсказки об ошибках при заполнении формы
682 голосов

Показано 20 последних публикаций.