Как frontend-разработчику получить оффер в Bigtech?

Ты уже давно в профессии, но до сих пор в компании, которая тебя не ценит. Зарплата не растёт, задачи скучные.

Хочешь сменить работу, но технические собеседования всё сложнее, а на отклики на hh только отказы и тестовые?

При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, Т-Банк. Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

На своем канале:
👉публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях
👉даю примеры по прохождению собеседований
👉разбираю резюме и докручиваю резюме подписчиков
👉И просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать вас

🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки.

Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks

Реклама, erid : 2W5zFGtLCTA ИП Галактионов Тихон Витальевич, ИНН 771618975809

Эффекты мерцания с помощью 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