Senior Frontend - javascript, html, css

@seniorFront

Kanal geosi va tili: Rossiya, Ruscha

Toifa: Texnologiyalar

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

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

Kanal geosi va tili

Rossiya, Ruscha

Toifa

Texnologiyalar

Statistika

Saralanganlar

Postlar filtri

O‘chirilganlarni yashirish

Repostlarni yashirish

Senior Frontend - javascript, html, css

16 Jun, 21:18

00:15

Выиграйте подписку на Яндекс Музыку

✨Ответьте на 1 вопрос и получите в подарок доступ к Яндекс Музыке до конца лета бесплатно!✨
Слушайте любимые треки и подкасты в HQ качестве без рекламы.
Для 4 аккаунтов и 10 устройств. Кинопоиск тоже в подписке!
Попробуйте!👍

Попробовать

#реклама 18+
music.yandex.ru
О рекламодателе

971 1 0

Senior Frontend - javascript, html, css

16 Jun, 19:05

Сбросить балласт. Аккуратное отключение лишних фич

Разработчики в целом склонны что-то добавлять, а не убирать, даже в ущерб результату. Исследования показали, что люди плохо справляются с поиском простых решений, которые противоречат шаблонному интуитивному мышлению (что-то добавить).

Что тут говорить, если самая простая программа сегодня весит под 100 МБ, как целая операционная система со всем софтом несколько десятилетий назад. Кто-то говорит, что причиной этого является закон Мура и рост производительности процессоров в геометрической прогрессии. В связи с этим даже интересно, каким был бы софт при замедлении CPU в двадцать раз.

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

👉 @seniorFront

Статья

1.3k 1 4 1

Senior Frontend - javascript, html, css

16 Jun, 12:03

Lazy Repeater

Создайте функцию makeLooper(). В эту функцию передайте строку. Вызов этой функции вернет другую функцию, каждый вызов которой должен возвращать символы переданной строки по очереди.

Пример:
var abc = makeLooper('abc');
abc(); // should return 'a' on this first call
abc(); // should return 'b' on this second call
abc(); // should return 'c' on this third call
abc(); // should return 'a' again on this fourth call

👉 @seniorFront

CodeWars

1.7k 1 8 3

Senior Frontend - javascript, html, css

15 Jun, 16:22

00:05

Glowy Text Button from Departures

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

👉 @seniorFront

CodePen

2.1k 1 31 10

Senior Frontend - javascript, html, css

15 Jun, 14:22

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

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

2.1k 1 8 7

Senior Frontend - javascript, html, css

15 Jun, 12:01

04:35

Video oldindan ko‘rish uchun mavjud emas

Telegram'da ko‘rish

Magnetic Mousemove Effect

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

👉 @seniorFront

Оригинальное видео

2.2k 1 17 6

Senior Frontend - javascript, html, css

14 Jun, 19:03

Какое ключевое слово сбрасывает все указанные значения свойства для конкретного блока до значений по умолчанию?

So‘rovnoma

initial
inherit
unset
revert

714 ta ovoz

2.5k 1 2

Senior Frontend - javascript, html, css

14 Jun, 12:02

00:06

3D Image Carousel

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

👉 @seniorFront

CodePen

2.6k 1 31 20

Senior Frontend - javascript, html, css

13 Jun, 21:00

00:06

Image Zoom

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

👉 @seniorFront

CodePen

2.8k 1 31 14

Senior Frontend - javascript, html, css

13 Jun, 13:00

00:25

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

👉 @seniorFront

2.9k 1 25 10

Senior Frontend - javascript, html, css

13 Jun, 12:00

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

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

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

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

Приступай к разработке решения уже сейчас, чтобы 23 июня представить лучший продукт - мы ждем: крутые решения в программном коде проекта, потенциал для рыночной масштабируемости и внедрения в бизнес.

📅Когда: 21 - 23 июня 2024 года
🌐Формат: Онлайн
🔥Дедлайн регистрации: 19 июня 2024 года, 23:59 (мск)

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

2.7k 1 2 3

Senior Frontend - javascript, html, css

12 Jun, 20:01

07:48

Video oldindan ko‘rish uchun mavjud emas

Telegram'da ko‘rish

Slider Controllable with Mouse Wheel

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

👉 @seniorFront

Оригинальное видео

2.8k 1 16 2

Senior Frontend - javascript, html, css

12 Jun, 12:01

00:05

LightShadowEffect

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

👉 @seniorFront

CodePen

3.1k 1 25 15

Senior Frontend - javascript, html, css

11 Jun, 23:00

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

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

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

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

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

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

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

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

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

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

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

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

👉 @seniorFront

Статья

3.2k 1 37 33

Senior Frontend - javascript, html, css

11 Jun, 19:02

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

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

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

👉 @seniorFront

Статья

2.8k 1 21

Senior Frontend - javascript, html, css

11 Jun, 12:00

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

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

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

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

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

3.2k 1 7 9

Senior Frontend - javascript, html, css

10 Jun, 19:03

00:05

Neon lights

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

👉 @seniorFront

CodePen

3.4k 1 33 7

Senior Frontend - javascript, html, css

10 Jun, 12:02

Как создать радиальный градиент в 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 — центр градиента в верхнем левом углу.

Статья

3.6k 1 21 18

Senior Frontend - javascript, html, css

9 Jun, 19:02

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

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

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

👉 @seniorFront

Статья

3.6k 1 9 1

Senior Frontend - javascript, html, css

9 Jun, 12:02

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

CodeWars