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

CSS Button Hover Effects В этом видео автор создает кнопку, стилизует её и задает CSS трансформации при наведении. Стрелки сделаны при помощи псевдоэлементов ::before и ::after. При наведении один из псевдоэлементов скрывается, а другой показывается. 👉 @seniorFront

Хочешь стать мидлом быстро и безболезненно? Тогда тебе к нам! Канал JavaScript заметки позволит тебе прокачать навыки до уровня middle за считанные недели абсолютно бесплатно! Эксклюзивный, актуальный материал по современному JS каждый день. Расширяй свои знания с нами!

Light/Dark Toggle With Morphing Icon Переключатель темы на HTML и CSS. Иконка сверстана и анимирована автором вручную. 👉 @seniorFront

Animate Grid with FLIP Верстка карточек в стиле masonry. Анимации созданы при помощи библиотеки gsap. 👉 @seniorFront

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

Mobile - Gallery Небольшое приложение-галерея на чистом JS, анимации сделаны в SCSS. 👉 @seniorFront

👉 @seniorFront

game card hover effect При наведении на карточку изменяется значение свойства transform со значениям rotateX, translateY и scale. 👉 @seniorFront

Wrapped Function Создайте функцию-обертку, которая оборачивает существующую функцию. Сигнатура метода будет выглядеть примерно так: function speak(name){ return "Hello " + name; } speak = speak.wrap(function(original, yourName, myName){ greeting = original(yourName); return greeting + ", my name is " + myName; }) var greeting = speak("Mary", "Kate"); 👉 @seniorFront

Rating & Counter Звездочный рейтинг, созданный из радио-кнопок на HTML и CSS. 👉 @seniorFront

Атрибуты defer и async Обычно браузеры загружают <script> синхронно, во время разбора документа. Поэтому принято добавлять скрипты в конец документа, перед </body>, чтобы они не тормозили загрузку страницы. Но при помощи атрибутов defer и async можно явно управлять порядком загрузки и выполнения скриптов. Атрибут async Скрипт выполняется полностью асинхронно. Это означает, что файл будет выполняться без ожидания загрузки и отображения веб-страницы. При обнаружении <script async src="..."> браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен – он выполнится. <script src="script1.js" async></script> Атрибут defer Указывает браузеру что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded. Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация. <script src="script1.js" defer></script> <script src="script2.js" defer></script>

Dropdown Menu В этом видео автор создает меню в виде выпадающего списка, которое открывается при нажатии на кнопку-бургер. Плавность открытия достигается использованием CSS свойств transition и transition-delay. 👉 @seniorFront

Time Comparison Сделано на Vue. В зависимости от выбранной таймзоны, изменяется картинка. 👉 @seniorFront

Открытая трансляция главного зала HighLoad++ Foundation. ✅Для просмотра необходима только регистрация: https://bit.ly/3y6VtDs Программа охватывает такие аспекты веб-разработок, как архитектуры крупных проектов, базы данных и системы хранения, devops и системное администрирование, нагрузочное тестирование, эксплуатация крупных проектов и другие направления, связанные с большими и высоконагруженными IT-системами.

sliding checkbox Стилизованные переключатели на HTML и CSS. 👉 @seniorFront

​Подключение стилей От того, как вы подключаете стили на страницу, зависит, как быстро она отобразится, однако некоторые варианты подключения стилей могут привести к неожиданным последствиям. Разберёмся, какие у каждого способа достоинства и недостатки, и какой из них вам подойдёт. Внешний файл со стилями При этом подходе CSS пишется в отдельном файле с расширением .css. Такие стили ещё называют связанными. Для связывания страницы с файлом стилей используется тег <link> внутри <head>: <head> <link rel="stylesheet" href="main.css"> </head> Преимущества - Можно использовать один CSS-файл для нескольких страниц. Изменение стилей в таком файле автоматически применится ко всем страницам, к которым он подключён. - При первой загрузке страницы файл со стилями кэшируется, и в следующие разы она открывается быстрее. Встроенные стили Вариант, когда CSS-свойства описываются в самом HTML-документе внутри тега <style> в шапке страницы: <head> <style> h1 { color: tomato; } </style> </head> Преимущества - Поскольку код находится непосредственно в HTML-файле, браузер не загружает сторонние файлы. Это позволяет отрисовать страницу быстрее. - Встроенные стили работают изолированно и применяются непосредственно к странице, на которой прописаны. Недостатки - С каждым новым правилом вес HTML-файла будет увеличиваться и страница будет загружаться медленнее. - Со временем такие же стили могут понадобиться на других страницах, и CSS придётся дублировать. Инлайн-стили В этом варианте элементам, которые необходимо оформить, добавляется атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые и применятся к элементу: <h1 style="сolor: yellow; margin: 10px 20px">Заголовок</h1> Преимущества - Как и со встроенными стилями, браузеру не нужно запрашивать файл, что ускоряет рендеринг. - Не нужно писать селекторы, потому что стили применяются сразу к нужному элементу. Однако несмотря на преимущества, инлайн-стили — это антипаттерн. Недостатков у этого подхода слишком много. 👉 @seniorFront

Приглашаем разработчиков на пятую встречу Frontend Mix от ЮMoney 🤩 Фронтендеры из финтеха расскажут про: ▫️погружение в React 18; ▫️стандартизирование фронтовых приложений; ▫️управляемые формы JSON; ▫️генерацию готовых React-компонентов иконок; ▫️фишки грамотного технического интервью. Поделитесь с друзьями 🙌🏻 Все подробности — на сайте: https://events.yoomoney.ru/frontend-mix_2022 Чтобы посмотреть митап, зарегистрируйтесь.

Animated Video Popup on Click В этом видео автор создает попап с оригинальной анимацией открытия. Внутрь попапа он помещает видео, которое вставляет при помощи тэга video. 👉 @seniorFront