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

Важные привычки программиста Как только решили, что все сделано, проведите рефакторинг Перед тем, как вы перейдете к решению следующей задачи, просмотрите то, что вы написали. Подумайте о тех людях, которые будут читать ваш код в будущем. Сфокусируйтесь на бизнес-задачах Многие программисты склонны фокусироваться на изучении технической стороны своей работы. Только для того, чтобы стать действительно мастером своего дела, вы должны понять, зачем то, что вы делаете, потребовалось бизнесу. Небольшие коммиты У вас должна быть очень полезная привычка – делать коммиты как можно чаще и как можно меньшими порциями. При этом добавлять в каждом коммите осмысленные и полезные комментарии. Никогда не прекращать учиться Если в такой бурно развивающейся сфере перестать хотя бы раз в месяц знакомиться с новым инструментом, технологией или же интересной концепцией, то через некоторое время можно обнаружить, что вы буквально не понимаете, что происходит в настоящем. 👉 @seniorFront

Lost intro Логотип, анимированный библиотекой gsap. 👉 @seniorFront

Для тех кто просил, открываем доступ в секретный канал на 2 ЧАСА👇 https://t.me/+b5L_EP3SXSUyY2Qy

👉 @seniorFront

Shiny Debit Card Верстка банковской карты на HTML и CSS с бесконечной анимацией поворота. 👉 @seniorFront

String incrementer Создайте функцию, которая принимает строку. Если на конце строки есть цифра, то она должна увеличиться на 1. Если цифры нет, то к строке приписывается цифра 1. Примеры: foo -> foo1 foobar23 -> foobar24 foo0042 -> foo0043 foo9 -> foo10 foo099 -> foo100 👉 @seniorFront

3D Interactive Card Hover В JS создана логика, которая изменяет свойство transform со значением rotate в зависимости от положения курсора. 👉 @seniorFront

Генераторы в JS Обычные функции возвращают только одно-единственное значение (или ничего). Генераторы могут порождать (yield) множество значений одно за другим, по мере необходимости. Генераторы отлично работают с перебираемыми объектами и позволяют легко создавать потоки данных. Для объявления генератора используется специальная синтаксическая конструкция: function*, которая называется «функция-генератор». Выглядит она так:

 function* generateSequence() {
   yield 1;
   yield 2;
   return 3;
 }

Основным методом генератора является next(). При вызове он запускает выполнение кода до ближайшей инструкции yield <значение> ). По достижении yield выполнение функции приостанавливается, а соответствующее значение – возвращается во внешний код. Результатом метода next() всегда является объект с двумя свойствами: - value: значение из yield. - done: true, если выполнение функции завершено, иначе false. 👉 @seniorFront

CSS Animation & Hover Effects В этом видео автор создает анимированный лоадер на HTML и CSS, при наведении на который задействуются дополнительные анимации. 👉 @seniorFront

GSAP Easing Автор создал два текстовых блока с изменяемым CSS свойством clip-path. Анимация реализована библиотекой gsap. 👉 @seniorFront

Хотите научиться работать с React-hooks? 💻 1 и 2 марта ждем вас на двухдневном онлайн-интенсиве в OTUS. Вебинары проведет Никита Овчинников, специалист по архитектуре веб-приложений. – Разберемся, как работать с React-hooks – Создадим компонент с использованием hooks – Научимся делать кастомные hooks – Поработаем с react-testing-library – Научимся тестировать компоненты и кастомные hooks Открытый интенсив пройдет в рамках онлайн-курса «React.js Developer» и будет полезен frontend JavaScript разработчикам с опытом. Чтобы зарегистрироваться на занятие, пройдите тест. 👉 Регистрация на 1-й день интенсива: https://otus.pw/SPR4/ 👉 Регистрация на 2-й день интенсива: https://otus.pw/Zic7/

STAR WARS AT-AT Walker Анимированная сцена, реализованная без использования JS. 👉 @seniorFront

Error Objects В JavaScript предусмотрены такие объекты ошибок, как Error(), SyntaxError(), TypeError(). Их можно запускать как в виде конструктора, так и в виде функции. Объекты ошибок созданные конструктором имеют два главных свойства - имя ошибки и сообщение. Объект ошибок применяется совместно с конструкцией throw. Используя тот факт, что throw сработает с любым объектом или даже примитивом, можно создавать свои объекты ошибок. Преимущества своих объектов ошибок в том, что они могут содержать данные, которые помогут изящно разрешить аварийную ситуации и вернуть программу в рабочее состояние. Например: try { throw { name: "MyErrorType", // тип message: "oops", extra: "This was rather embarrassing", remedy: genericErrorHandler // обработчик }; } catch (e) { // информируем пользователя alert(e.message); // "oops" // обработка ошибки e.remedy(); // вызов genericErrorHandler() } 👉 @seniorFront

«Первые шаги в JavaScript» — создайте сайт и приложение за 3 дня На бесплатном интенсиве Нетологии вы познакомитесь с разработкой на JavaScript и с нуля создадите сайт и мобильное приложение — гайд по персонажам вселенной Marvel. А ещё получите рекомендации от экспертов по самостоятельной доработке проекта. Интенсив для тех, у кого нет опыта в разработке.  Попробуйте себя в роли разработчика и проверьте, насколько эта профессия вам подходит.   Зарегистрироваться на интенсив: https://netolo.gy/hGD

CSS Creative List Design & Hover Effects В этом видео автор создает список, элементы которого оригинально анимируются при наведении. Цвет для карточки задается через CSS переменную, значение которой устанавливается в атрибуте style в HTML. 👉 @seniorFront

Vertical image loop with scroll acceleration Автор создал вертикальный слайдер с картинками. Картинки прокручиваются автоматически, а при событии "scroll" скорость прокрутки ускоряется. 👉 @seniorFront

Привет! У нас прекрасные новости 🥰 26 февраля мы в четвёртый раз соберёмся на конференции «Я 🧡 Фронтенд», чтобы признаться в любви к вебу, поделиться друг с другом опытом и провести время в отличной компании. В этом году мероприятие станет ещё масштабнее: 14 февраля мы запустили две недели онлайн-активностей на любой вкус. Челленджи, воркшопы, лекции, CTF, котики, коллаборации и подкасты — каждый сможет найти себе любимое занятие. Всё бесплатно, потому что любовь к фронтенду не купишь за деньги. Боитесь пропустить всё самое интересное? Регистрируйтесь и мы заботливо напомним о том, что интересно именно вам: ilovefrontend.ru

Burger menu Оригинальная кнопка-бургер, при нажатии на которую открывается навигация. 👉 @seniorFront