Cards animation

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

👉 @seniorFront

Liquid Blast Effects

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

👉 @seniorFront

Accessible Horizontal Accordion

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

👉 @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

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

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

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

👉 @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 — центр градиента в верхнем левом углу.

Neon lights

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

👉 @seniorFront

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

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

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

👉 @seniorFront

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

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

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

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

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

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

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

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

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

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

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

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

👉 @seniorFront

LightShadowEffect

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

👉 @seniorFront

Slider Controllable with Mouse Wheel

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

👉 @seniorFront

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

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

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

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

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

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

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

👉 @seniorFront

Image Zoom

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

👉 @seniorFront

3D Image Carousel

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

👉 @seniorFront

Magnetic Mousemove Effect

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

👉 @seniorFront

Glowy Text Button from Departures

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

👉 @seniorFront

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

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

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

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

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

👉 @seniorFront