Senior Frontend - javascript, html, css

Lighthouse Это svg картинка, анимируемая в CSS. Параметры анимаций задаются в JS. 👉 @seniorFront

Magic Navigation Menu Indicator В этом видео создается меню и указатель на выбранный пункт. При нажатии на пункт меню, указателю задаются определенные стили. 👉 @seniorFront

Work/Life - Variable Fonts animation Здесь анимируется CSS свойство font-variation-settings. 👉 @seniorFront

ClimaCode Анимировано в CSS. В JS прописана логика запуска множества анимаций и трансформаций. 👉 @seniorFront

👉 @seniorFront

Яндекс Практикум ищет авторов на курсы для Frontend-разработчиков Частичная занятость (2-3 часа в день) Яндекс Практикум — это сервис онлайн-образования, где каждый может освоить современные цифровые профессии.  Задача автора — создавать и улучшать образовательный контент, чтобы обучение было актуальным. Помимо теории нужно будет придумывать квизы, тесты, практические задания, дополняя это примерами из вашей профессиональной  жизни. Сейчас ищут авторов на курсы для Frontend-разработчиков Почему вам стоит стать автором курса?  ● Помощь тысячам людей получить востребованную IT-профессию. ● Прокачка себя и подтверждение своей экспертности. ● Дополнительных доход на удалёнке. Оставьте отклик на сайте, пройдите отбор и станьте проводником в мир IT-профессий.

Line Stripes Animation Effects В этом видео создаются линии в JS, которые затем анимируются в CSS и через 2 секунды удаляются. 👉 @seniorFront

For The Love Of Coffee Создано на HTML, CSS и JS. При нажатии запускаются CSS анимации. 👉 @seniorFront

🤖 Изоморфные React-приложения с React.js , Next.js и TRPC. Фуллстек разработка с SSR никогда не была такой простой и доступной! 🔵14 августа в 20:00 мск открытый урок онлайн курса «React.js Developer» от OTUS. На этом вебинаре мы: - научимся бутстрапить полноценные легко развертываемые приложения с клиентской и серверной частью - на примере разберем настройку сборки, процесс разработки и развертывания приложения - получим удобный набор для старта разработки любого веб-приложения на современном стеке! 🟠Это отличная возможность перенять опыт преподавателя и посмотреть на процесс обучения изнутри. Оплата курса возможна любым удобным для вас способом. ➡️ Для участия в вебинаре зарегистрируйтесь: https://otus.pw/9xEP/ Нативная интеграция. Информация о продукте www.otus.ru

Blend-Mode Sticky Nav & Hero Создано с использованием препроцессоров Haml и SCSS. Анимировано библиотекой gsap. 👉 @seniorFront

​Как определить свой уровень в программировании?⁠⁠ Один из главных вопросов, с которым сталкиваются начинающие программисты - это определение своего уровня в программировании. Это важно, чтобы знать, какие задачи вы можете решать, и какие еще нужно изучить. Существует несколько способов оценить свой уровень в программировании. Можно пройти онлайн-тесты по языкам программирования, которые помогут определить ваш уровень знаний. Также можно решать задачи на платформах для программистов, таких как HackerRank или Codewars. Эти задачи помогут понять, насколько вы уверены в своих знаниях и навыках. Если вы уже работаете программистом, то можно оценить свой уровень по проектам, которые вы реализовали. Если вы успешно разработали проекты с использованием сложных алгоритмов и технологий, то, вероятно, ваш уровень выше среднего. Также можно обратиться к опытным программистам и попросить их оценить ваш уровень. Они могут дать ценные советы и подсказки по тому, что еще нужно изучить и как развиваться дальше. Важно понимать, что уровень в программировании - это не постоянная величина. Он может меняться в зависимости от того, сколько времени вы уделяете изучению новых технологий и языков программирования, а также от опыта работы над проектами. Так что не останавливайтесь на достигнутом, постоянно развивайтесь и изучайте новые технологии, чтобы стать лучшим программистом! 👉 @seniorFront

Cursor particles challenge Частицы генерируются и анимируются в JS. 👉 @seniorFront

WeakMap Это коллекция из пар ключ-значение, позволяющая собирать свои ключи сборщиком мусора. Ключом могут быть объекты или символы. Значением может быть любой тип данных JavaScript. Коллекция не позволяет итерироваться по своим ключам, так как они могут быть удалены сборщиком мусора. Ключи хранятся как слабые ссылки, что позволяет сборщику мусора удалять их из памяти, если на них нет других ссылок. Это бывает полезно, если нужно связать какие-то данные с объектом-ключом, но не запрещать сборку мусора для этого объекта.

 const wm = new WeakMap();
 {
   const ref = {};
   const value = 'Булочка';
   wm.set(ref, value);
   wm.get(ref);
   // Булочка
 }

// Здесь сборщик мусора может удалить объект ref, несмотря на то, что он хранится в WeakMap 👉 @seniorFront

Page Rotator Вся сцена - это svg картинка, анимированная библиотекой gsap. 👉 @seniorFront

What century is it? Напишите функцию, которая принимает год, состоящий из четырех символов и возвращает век этого года. Пример: "1999" --> "20th" "2011" --> "21st" "2154" --> "22nd" "2259" --> "23rd" "1124" --> "12th" "2000" --> "20th" 👉 @seniorFront

Pizza Loader Это svg картинка, анимируемая библиотекой gsap. 👉 @seniorFront

Input Text Field Character Counter В этом видео создается поле для ввода с ограничением по количеству символов на чистом JS. Количество доступных символов отображается рядом. 👉 @seniorFront

Cyberpunk Error page Оригинальная страница 404 на HTML и SCSS. 👉 @seniorFront