Эффекты мерцания с помощью CSS 🚀

1. Animate opacity
2. Use custom linear() timing 🔥

:root { --flicker: linear(0 0% 0.5%, 0.1723 0.7925% ... ); }
.flicker {
animation: dim 4s infinite var(--flicker) alternate;
}
@​keyframes dim { opacity: 0.25; }

Мы в MAX

👉 @frontend_1

⚡️Уже работаешь с Vue, но автотесты и UI-компоненты всё ещё вызывают стресс? Пора действовать! Записывайся на вебинары, которые проходят в рамках курса «Vue.js разработчик».

Бесплатный вебинар «Пишем Автотесты на Vue.js»
🗓 9 октября, 20:00

На вебинаре:
• Компонентное, 2E2, Unit-тестирование — разложим по полочкам
• Библиотеки Vue: Cypress и Vitest — разберём на практике
• Напишем первые автотесты — легко и без страха

Для разработчиков, которые хотят освоить автотесты во Vue и прокачать навыки, которые пригодятся на любых проектах.

Бесплатный вебинар «Почему во Vue проще: интерактивные UI-компоненты за минуты»
🗓 22 октября, 20:00

На вебинаре:
• Модальные окна, слайдеры, выпадающие меню — делаем с нуля
• Реактивность Vue в действии — управляем состоянием и анимацией
• Почему Vue быстрее и проще, чем React для UI

Для фронтенд-разработчиков, которые хотят ускорить создание интерфейсов и расширить портфолио практичными компонентами.

Записаться на вебинары: https://vk.cc/cQ0xAE

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Люблю использовать CSS-анимацию, например, такую

.ring {
  animation: float 2s infinite alternate var(--ease);
  animation-delay: calc(
    sin((var(--index) / var(--count)) * 45deg)
    * -2s
  );
}

Мы в MAX

👉 @frontend_1

CSS трюк для раскрытия текста при прокрутке? ✨

Объедините position: sticky с анимацией прокрутки.

Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙

Мы в MAX

👉 @frontend_1

Современный CSS очень хорош.

Отключить скролбар, когда этот диалог является одновременно модальным и открытым.
Никакого JS, никакого состояния, никаких классов, никаких меток aria — всего несколько строк CSS.

Мы в MAX

👉 @frontend_1

🛡TypeScript: почему без него не обойтись фронтендеру?

Фронтенд-разработка уже не мыслится без TypeScript. Сегодня это стандарт, который фигурирует почти в каждой вакансии и позволяет писать код, где ошибки ловятся до запуска. На открытом уроке OTUS «TypeScript простым языком: зачем он нужен и как с ним подружиться» вы узнаете:

– зачем компании требуют TS и какую пользу он даёт;
– как типизировать примитивы, интерфейсы, функции и компоненты;
– как добавить типы в рабочий код и сразу увидеть результат.

❗️ Будет полезен разработчикам на JavaScript, React и Vue, а также всем, кто готовится к собеседованиям.

📆 Урок пройдет 8 октября в 20:00 МСК в преддверие старта курса «JavaScript Developer. Professional». Все участники получают скидку на обучение.
👉 Регистрируйтесь и приходите — это ваш шаг к сильному портфолио: https://vk.cc/cQ8KVx

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Трюк по CSS ⭐

Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position.

.canvas {
  background: var(--gradient);
  mask:  var(--dots), var(--noise);
  mask-composite: intersect /* source-in, xor */;
  animation: flicker;
}
@​keyframes flicker {
  to { mask-position: 50% 50% , 0 50%; }
}

Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨.
Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение.

Маска dots — это базовый radial-gradient, который повторяется по всему элементу. Маска noise — сгенерированное изображение шума Перлина.

mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px;

mask: url("noise.png") 50% 50% / 256px 256px;

https://codepen.io/jh3y/pen/ExrWOJe

Мы в MAX

👉 @frontend_1

Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса

Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.

В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:

https://habr.com/ru/companies/ruvds/articles/754764/

Мы в MAX

👉 @frontend_1

Вы можете использовать CSS-анимацию с прокруткой, например, IntersectionObserver от JavaScript 🤙

img {
animation: reveal;
animation-timeline: view();
animation-range: entry 0% entry 150%;
}
@​keyframes reveal { 0% {
  opacity: 0;
  filter: brightness(2);
  scale: 0.9;
}}

Мы в MAX

👉 @frontend_1

Поговорим про деньги в IT?

Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.

Пройти опрос можно здесь

Записываем музыку при помощи CSS Grid

Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!

В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.

https://cruncher.ch/blog/printing-music-with-css-grid/

Мы в MAX

👉 @frontend_1

😨 Асинхронность в JavaScript — главный источник боли у разработчиков. Callback hell, ошибки в промисах, непредсказуемое поведение кода… знакомо?

❗️ На открытом уроке курса мы разложим по полочкам всю эволюцию подходов к асинхронности: от первых колбэков до современного Async/Await.

Вы научитесь работать с Event Loop, свободно комбинировать Promises и async-функции, обрабатывать ошибки правильно и писать код, который не ломается в продакшене. А ещё узнаете, как параллелить операции без ловушек и антипаттернов.

👉 Подключайтесь 20 октября в 20:00 МСК. Урок проходит в преддверие старта курса «JavaScript Developer. Professional». Все участники получат скидку на обучение. Регистрация открыта: https://vk.cc/cQozPv

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

staleTimes в Next.js

Мы в MAX

👉 @frontend_1

Обзор методов JavaScript DOM 👨‍💻

Мы в MAX

👉 @frontend_1

Совет по использованию инструментов Chrome Dev Tools 💡

Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?

Мы в MAX

👉 @frontend_1

👨‍💻 Пишете на JS, но чувствуете, что инструментов уже не хватает?

На практическом курсе от OTUS вы разберёте продвинутый React (Hooks, Redux Toolkit, Zustand, Query), SSR на Next.js, познакомитесь с Vue 3 и Nuxt 3, укрепите типизацию в TypeScript и выйдете на fullstack-уровень с Node/Nest.js.

❗️Программа составлена практикующими разработчиками, а занятия проходят в формате живых лекций и практики на реальных задачах. Вы научитесь проектировать REST API, подключать PostgreSQL, собирать и деплоить проекты с Docker и CI/CD. После обучения вы сможете уверенно работать в командах, разрабатывать сложные web-приложения и прокачаете навыки, которые востребованы в крупных компаниях.

🏃‍♂️‍➡️🏃‍♂️‍➡️🏃‍♂️‍➡️ Остались последние места. Пройдите короткое вступительное тестирование, получите скидку 5% по промокоду JSPRO_10 и закрепите за собой участие: https://vk.cc/cQxLjp

Подробности уточняйте у менеджеров
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Совет по Javascript 💡

Вы можете не знать об этом сокращенном синтаксисе для объявления метода в object literal

Мы в MAX

👉 @frontend_1

Узнайте о позиционировании CSS с помощью следующей шпаргалки 🚀

Мы в MAX

👉 @frontend_1

Визуализация методов массивов JavaScript 🚀

Мы в MAX

👉 @frontend_1

Совет по HTML 💡

Легко создайте красивый индикатор выполнения, используя элемент <progress>

Мы в MAX

👉 @frontend_1

Т-Технологии зовут на Стековку

1 ноября в Екатеринбурге, Новосибирске и Нижнем Новгороде стартует квест для ИТ-специалистов — с городским интерактивом, задачами на знание кода и смекалку.

Что нужно делать?
Решать онлайн- и офлайн-задания и получать за это баллы для своего города.

Какой приз?
В городе, который наберет больше всего баллов, устроят вечеринку. А самые активные участники смогут повлиять на выбор тематики и программы.

Как участвовать?
Просто зарегистрируйтесь до 31 октября