Senior Frontend - javascript, html, css. Страница 49

👉 @seniorFront

Стоит ли стремиться в финтех? И как писать фронтенд в банке без гипертонии? Разработчики Газпромбанка знают все ответы: на конференции HolyJS 2022 главный инженер разработки Максим Гиленко рассказал, почему нужно оценить все «за» и «против», прежде чем идти в финтех. А еще участники узнали, как замена жесткой бизнес-логики на абстракции может помочь предотвратить выгорание фронтенд-разработчиков в крупной компании. Если ты пишешь на JavaScript и ищешь команду единомышленников, смотри вакансии Газпромбанка > https://vk.cc/cfglyE

Card hover FX Вёрстка карточек, созданная с использованием препроцессора Stylus. 👉 @seniorFront

Ascend, Descend, Repeat? Вам даны 3 числа - length, minimum и maximum. Создайте строку из чисел, которая: 1. Начинается с minimum 2. Каждое следующее число увеличивается на 1, пока не достигнет maximum 3. После этого каждое следующее число убывает, пока не достигнет minimum 4. Повторять пока длина строки не достигнет length. Примеры: length: 5, minimum: 1, maximum: 3 ==> "12321" length: 14, minimum: 0, maximum: 2 ==> "01210121012101" length: 11, minimum: 5, maximum: 9 ==> "56789876567" 👉 @seniorFront

Gooey Navigation Элементы меню - это svg картинки, стилизованные в SCSS. 👉 @seniorFront

min() Функция min() возвращает наименьшее из перечисленных через запятую значений внутри круглых скобок. Она одно или несколько значений разделённых запятой, так же поддерживается вложенность других функций, например calc(): .selector { width: min(50%, calc(1000px / 2), 700px); } Использовать функцию можно в любых CSS-свойствах, значение которых является числом, например: .selector { background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db); } 👉 @seniorFront

Focus | CSS Text Hover Transition Effects В этом видео автор создает эффект размытия на сцене, а затем при наведении происходит фокусировка на отдельные буквы-элементы этой сцены. 👉 @seniorFront

Сколько стоит джун, мидл и сеньор? Часто молодые специалисты не чувствуют момент, когда их уровень вырос и можно брать более сложные задачи и просить повышения зарплаты. По каким признакам это понять? Какие цифры называть переходя на новое место или какого повышения можно ждать на старом? На эти вопросы отвечает skillmaps.ru — открытая база знаний для развития IT-специалистов. Навыки разбиты по классическим грейдам: Junior, Middle, Senior и привязаны к реальным зарплатам. По каждому навыку есть подборка ссылок-материалов, необходимых для освоения. На skillmaps.ru буквально в несколько кликов можно узнать сколько стоят твои навыки и смело выставлять кост руководству 😉

Split Card Создано при помощи препроцессоров Pug и SCSS. Эффект при наведении реализован библиотекой Splitting.js. 👉 @seniorFront

Space clock Положение планет устанавливается в зависимости от времени на устройстве пользователя. при помощи JS. 👉 @seniorFront

Знакомо чувство, когда сайт сверстан, все работает, но проверяешь этот сайт в Lighthouse или Google PageSpeed Insights и видишь желтые или того хуже красные цифры? Ещё страшнее, когда в эти цифры тебя тыкает заказчик или руководитель проекта, или вообще твой прямой начальник. Стыдно, страшно, и потом неделю исправляешь. Подписывайся на канал, и получай примеры кода, готовые наработки, кучу лайфхаков и полезных мелочей, внедрив которые сайт станет заметно быстрее. Кроме того, авторы активно отвечают на комментарии, где можно обсудить тот или иной вариант решения задачи. ✅ Подписывайся: @perfScan

border-image Свойство border-image пригодится в том случае, если вы хотите задать блоку необычную рамку, а не просто сплошную или прерывистую линию одного цвета. Это свойство позволяет использовать картинку в качестве «заливки» рамки. Пример <div class="element"> <span>Выход<br>за<br>рамки</span> </div> .element { border-left-style: solid; border-left-width: 65px; border-left-color: #1A5AD7; border-image: url("custom-border.svg") 66 / 66px 0 66px 66px / 0px 0 stretch; } 👉 @seniorFront

Broken | CSS Creative Image Hover Effects В этом видео автор создает эффект "разбития" картинки при помощи CSS clip-path. 👉 @seniorFront

VK Tech Talks · Front End Крутой митап для фронтенд-разработчиков от VK: про безопасный деплой на тысячи серверов, интеграцию B2B-почты в мессенджер и новейшую панель Performance Insights в Chrome DevTools. Митап пройдёт как онлайн, так и оффлайн в штабе VK в Москве 28 июля в 19:00. Зарегистрируйтесь на сайте, чтобы получить инструкцию, как добраться до офиса, и подключиться к закрытому чату с участниками и спикерами.

Book reviews Верстка реализована при помощи CSS Grid. Анимации созданы библиотекой gsap. 👉 @seniorFront

Spaceworm Реализовано при помощи canvas и чистого JS. 👉 @seniorFront

​Пять различных типов программистов 1. Агент 007 Быстро вникает в ваши проблемы и решает их. Не очень заботится о качестве кода. Ему не придет в голову исправлять отступы в чужом коде. Если необходимо, «воспользуется скотчем». Если такой сотрудник уволится, будет трудно исправлять проблемы во всем приложении. 2. Господин 90 % Доводит решение проблемы почти до конца, но всегда упускает что-то, без чего весь компонент бесполезен или нестабилен. Его больше волнует сам код, а не то, как будет работать конечный продукт. 3. Перфекционист Стремится сделать идеальным свой собственный код. Может тратить целые дни на задачи, которые Агент 007 решает за пару минут, но при этом готовый код будет безупречен. 4. Кодер-копипастер Получил свою работу очень давно, но понятия не имеет, что он делает. Каждый день благодарит высшие силы за бэкапы и системы управления версиями кода, потому что когда он пытается сделать что-нибудь, очень велика вероятность, что что-нибудь сломается. 5. Экспериментатор Постоянно пробует новые редакторы, фреймворки, средства сборки, языки программирования и клавиатуры. Может потратить неделю, настраивая приложение, только затем, чтобы на следующий день еще что-нибудь улучшить. 👉 @seniorFront

​В «Магните» работает 4000 разработчиков и ИТ инженеров, они решают интересные и амбициозные задачи, делая жизнь покупателя одного из крупнейших ритейлеров России технологичнее и удобнее. 27 июля в 13:00 (МСК) приглашаем вас на эфир Demo Day Magnit IT. Команда разработчиков, спецов по аналитике, ecom и другим диджитал-направлениям поделится крутыми кейсами и решениями непростых задач. Кроме того, они расскажут, как работает IT-подразделение огромного ритейлера. В этом им помогут ведущие одного из самых известных технологических подкастов @zavtracast Тимур Сейфельмлюков и Дмитрий Зомбак. На Demo Day Magni IT будет куча крутых спикеров, но точно нельзя упустить эти выступления: 🌩 Юрий Мисник (CTO) и Татьяна Коваль (System Architect) расскажут о мультиоблачной архитектуре и почему в «Магните» решили сфокусироваться на PaaS для большей отказоустойчивости. 📊 Павел Шорохов (Head of Data Management) расскажет, как «Магнит» в течение 12 лет строил корпоративную платформу сбора и анализа данных на 1 Петабайт, которой пользуется более 10 тысяч человек каждый день. А еще как они строят собственный облачный Data Lake. 💌 Алексей Четыркин (Head of Data Analytics) и Артем Селезнев (Head of CRM) расскажут про инхаус-решение «Магнита» по CRM-коммуникациям, гипергранулированным сегментациям аудиторий, предикативной модели пути покупателя и BI-алгоритме отслеживания тысяч критических параметров. Не пропустите! Зарегистрируйтесь на эфир, и вам придёт напоминалка 27 июля в 13:00 (МСК), а еще там будет куча интересных дополнительных материалов: https://magn-it.online