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

decodeURIComponent и decodeURI в JS

decodeURIComponent применяется для обработки отдельных компонентов URI и эффективно декодирует специальные символы, такие как &, =, +, ?. Этот метод подходит для получения точных значений параметров из строки запроса.

decodeURI предназначен для декодирования полных URI. Он сохраняет специальные символы, которые существенны для структуры URI, например & и = в запросах, тем самым поддерживая целостность URI.

Примеры:
// decodeURI сохраняет структуру запроса
console.log(decodeURI("http://example.com/?name=John%20Doe&age=30")); // "http://example.com/?name=John Doe&age=30"

// decodeURIComponent усиленно декодирует, что может изменить структуру
console.log(decodeURIComponent("name=John%20Doe%26age%3D30")); // "name=John Doe&age=30"

Используйте decodeURIComponent, чтобы извлекать точные значения из составных частей URI, и decodeURI, когда необходимо сохранить работоспособность всего URI.

👉 @seniorFront

Neumorphic Rocker Switch

Оригинальный переключатель, свёрстанный из кнопки на HTML и SCSS. Логика переключения реализована в JS.

👉 @seniorFront

​Проработал в IT больше 10 лет. Вот 5 вещей, которые я бы хотел знать, если бы начинал сейчас:

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

2. У вас будет не получаться, вы будете не понимать – и это нормально (и это пройдет со временем, но не совсем)
Со временем станет легче, но это не пройдет. Я прогуливал пары в универе, поэтому у меня остались дыры в фундаментальных знаниях о компьютерной науке, которые я не залатал с опытом. Но это не самое важное. Самое важное, что и в своей работе вы будете иметь пропуски в знаниях. Может быть, не в конкретной работе в конкретной роли на конкретном проекте – это лимитированные знания, проект можно изучить вдоль и поперек, особенно если работать на нем достаточно долго. Но это нормально не знать какие-то вещи о вашей профессии в целом.

3. Не держитесь за плохое место
Бывает такое – плохое рабочее место. Распознать плохое место просто – в конце дня вам хочется завернуться в одеялко и забиться в угол, и самое главное – на работе не с кем об этом поговорить, чтобы улучшить ситуацию. У плохого места бывают разные причины. Иногда это коллектив, иногда начальство, иногда дело может быть в вас – просто не подходите на это место, ошибка найма, и это нормально. Не нормально – держаться за это место.

4. Часто менять работу может быть полезно, но не всем
Я все еще вижу рекомендации для начинающих программистов: меняйте работу почаще. Так, мол, больше опыта наберетесь. Год там, полгода сям, и вот ты через три-четыре года опытный как сеньор помидор. Это может сработать. Но это не для всех.
Есть разные типы людей, по тому, как они умеют концентрироваться и удерживать внимание. Если у вас нет проблем с фокусом, вы легко можете проработать несколько лет на одном месте и изучить все процессы вдоль и поперек – это и цену в текущей компании повысит, и даст возможность в будущем рассказать о том, что узнали, на собеседованиях. Люди недооценивают понимание работы вглубь, а ведь много позиций и компаний, где это ценят.

5. Не упускайте возможности, даже если они кажутся мелкими или незначительными
Карьера в автоматизации тестирования изменила мою жизнь в лучшую сторону. Эта возможность всегда была у меня перед носом. Я не раз задумывался о том, чтобы попробовать, и даже начинал что-то учить, но бросал – мне казалось, что тестирование это несерьезно и вообще это какой-то позор переключаться на тестирование после нескольких лет опыта в веб-программировании (хаха). Оказалось, что я способен сделать серьезную карьеру в этом поле и даже без относительно серьезных усилий. Больших усилий для меня стоило переключиться с работы в баре на работу веб-разработчика.

👉 @seniorFront

Перформанс ревью

Перформанс ревью (performance review) — система оценки компаниями профессиональных качеств сотрудников. Это – популярный и эффективный инструмент, который используют крупные мировые и отечественные бренды, например, Google, Яндекс и Авито.

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

👉 @seniorFront

Team Profiles rotation with Theme Toggle

Стилизовано при помощи Tailwind. Каждая фотография - это input type="radio".

👉 @seniorFront

CSS Animation Effects Tutorial

В этом видео создаётся анимированная граница на HTML и CSS.

👉 @seniorFront