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

Hello animation SVG картинка, анимированная библиотекой gsap. Автор реализации вдохновлялся screen saver от apple. 👉 @seniorFront

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

React State Animations! Небольшой компонент на React, в котором запускаются CSS анимации при нажатии на элементы. 👉 @seniorFront

👉 @seniorFront

Noise Marble Анимация, реализованная при помощи библиотеки Three.js. 👉 @seniorFront

Four/Seven Ваша задача - создать функцию, которая принимает на вход число (4 или 7) и возвращает 7, если приняла 4 и возвращает 4, если приняла 7. Выглядит легко, но есть подвох: вам нельзя использовать if, switch и тернарный оператор. 👉 @seniorFront

triangulation example Части картинки разбиваются на треугольники при помощи CSS свойства clip-path и затем анимируются в препроцессоре Less. 👉 @seniorFront

JavaScript теперь в телеграм! JavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, которые вообще существуют. Теперь у JS есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!

Псевдоклассы группы type Псевдоклассы -of-type позволяют выбирать из группы элементы одного уровня вложенности на основании их порядка: :first-of-type — первый; :nth-of-type(n-число) — каждый n-й элемент; :last-of-type — последний; :nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца». Допустим, мы имеем такую HTML-разметку: <ol class="list"> <li>Default означает «по умолчанию», цвет этого пункта без изменений.</li> <li class="list__item">Амбары красят в красный цвет, потому что красная краска...</li> <li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li> <li class="list__item">В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li> </ol> И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке. Этот пункт не имеет класса, всё, что мы о нём знаем — что он третий <li> по порядку: li:nth-of-type(3) { color: #49A16C; } 👉 @seniorFront

Floating Action Menu Using В этом видео автор создает меню с плавной анимацией открытия. 👉 @seniorFront

Minimal Portfolio Меню портфолио, состоящее из нескольких кнопок. Создано при помощи препроцессоров Pug и SCSS. 👉 @seniorFront

💥 Знание алгоритмов — это та самая база, которой должен владеть каждый разработчик. ❓ Что нужно знать о теории графов? Узнайте 14 апреля вместе с ведущим программистом с 20-летним опытом Евгением Волосатовым. ✅ На занятии мы рассмотрим теорию графов, познакомимся с терминами и определениями, разберем основные алгоритмы. 💪 Евгений проведет обзор первой половины программы онлайн-курса «Алгоритмы и структуры данных» от OTUS, к которому приурочено это занятие. ❗️ Этот курс подходит для любого языка программирования. 👉 Пройдите вступительное тестирование, чтобы зарегистрироваться на занятие https://otus.pw/JzmV/

Gooey loader Оригинальный loader, стилизованный и анимированный в CSS. 👉 @seniorFront

Событие unload Когда пользователь уходит со страницы, генерируется событие unload. Мы можем отреагировать на него, подписавшись на это событие у объекта window. window.addEventListener('unload', function () { // ... }) 🛠 Событие unload обрабатывают для отправки трекинговых запросов. 🛠 Не полагайтесь на событие unload для определения завершения пользовательской сессии. Например, в следующем сценарии оно не наступит: - Пользователь посещает страницу в браузере с мобильного телефона - Пользователь меняет активное приложение - Пользователь закрывает браузер через менеджер приложений 👉 @seniorFront

Через 48 часов эта информация станет недоступна. С 8 по 11 апреля в Glo Academy пройдет интенсив, на котором ты сможешь сверстать онлайн-кинотеатр (используя HTML, CSS и JS). Будешь писать код, задавать вопросы и получать обратную связь по своей работе. А заодно получишь план-схему что и как учить, чтобы быстрее освоить профессию. Подробная программа 📋 ✅ 1 День — знакомимся с макетом в Figma, делаем сетку на гридах и верстаем хедер — подключаем normilize — создадим папку с проектом и опубликуем код на GitHub и GitHubPages ✅ 2 День — подключаем шрифт к нашему проекту — сделаем блок центрального экрана ✅ 3 День — верстаем блок aside ✅ 4 День — верстаем модалку для воспроизведения трейлера, оживляем с помощью нативного JS — публикуем сайт Переходи по ссылке, жми “Начать” и получи приглашение: telegram.me/gloacad…demy_bot

Delete Button Micro-Interaction В этом видео автор создает кнопку удаления, при наведении на которую активируются CSS трансформации, создающие необычный эффект. 👉 @seniorFront

Shader Flower Loader Concept Необычный loader, созданный в препроцессорах Pug и SCSS. 👉 @seniorFront

Как фронтендеру уровня Junior начать зарабатывать от 250 000 рублей в месяц? Прокачивать навыки необходимые на рынке разработки и расти по грейдам🚀 Построение дизайн систем, TypeScript, понимание алгоритмов и структур данных, шаблонизаторы HTML, сложные анимации на CSS и JS — все эти навыки нужны в работе Middle разработчику, чтобы быть востребованным и получать от 251 000 в месяц (по данным исследования вакансий НН.ru). Чтобы помочь начинающим разработчикам HTML Academy подготовили курсы, необходимые для мидла, чтобы увеличить уровень заработка и проходить собеседования в крупные продуктовые компании.  Все наши курсы разрабатываются на реальных типовых задачах, то есть на выходе, вы будете уметь пользоваться новыми навыками в собственных проектах.   Чтобы понять с чего начать обучение, пройдите тест и мы предложим вам обучающие материалы, которые помогут вырасти до мидла🔥