🖥️ Как превратить портфолио в демо современных веб-технологий

Этот сайт полностью стилизован под старый CRT-монитор. Автор использовал Three.js, чтобы воспроизвести мерцание, геометрические искажения, цветовые аберрации и другие эффекты ЭЛТ-дисплея.

🔵 Внутри — полноценный интерфейс в стиле Windows 95 с браузером, резюме и мини-играми.

Хороший пример того, как WebGL может использоваться не только для 3D-сцен, но и для создания необычного пользовательского опыта.

🔗 Ссылка на сайт

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#read_watch

Их всех на одном заводе делают? 😒

🐸 Библиотека фронтендера

#pixel_pause

🧮 CSS-свойство, которое делает отображение чисел заметно лучше

Если в интерфейсе есть часы, таймер, счётчик или финансовые данные, числа могут «прыгать» при изменении. Причина — большинство шрифтов используют пропорциональную ширину символов.

Исправить это можно одной строкой:

font-variant-numeric: tabular-nums;

После этого все цифры занимают одинаковую ширину, поэтому значения перестают смещаться при обновлении.

Полезно для:

⏱️ часов и таймеров;
📈 дашбордов и аналитики;
💰 финансовых таблиц;
🏆 счётчиков и табло.

Свойство поддерживается всеми современными браузерами и не требует подключения дополнительных библиотек 💡

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #css

🐸 Библиотека фронтендера

#code_challenge

✅ Правильный ответ: fill() использует одну и ту же ссылку на объект

Array.fill() не создаёт новые массивы. Если передать в него объект или массив, все элементы будут ссылаться на один и тот же экземпляр.

🟢 Поэтому после:

arr[0].push(1);

🟢 результат будет:

[[1], [1], [1]]

👍 — ответил(а) правильно
🔥 — узнал(а) что-то новое

🐸 Библиотека фронтендера

#code_challenge

❓ Как настроить Lazy Loading для изображений и компонентов

Lazy Loading — отложенная загрузка ресурсов, которая ускоряет стартовую загрузку страницы и экономит трафик, особенно на медленных сетях.

Почему важно:

— Быстрая загрузка видимого контента
— Меньшая нагрузка на сеть и сервер
— Плавная подгрузка контента при прокрутке

➡️ Как внедрить:

1. Используем атрибут loading="lazy" для изображений:

<img src="image.jpg" loading="lazy" alt="Описание" />

2. Применяем Intersection Observer для кастомных элементов:

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      el.src = el.dataset.src;
      obs.unobserve(el);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

3. Используем динамический импорт компонентов:

🈂️ React:

const LazyComp = React.lazy(() => import('./Component'));
<Suspense fallback="Загрузка..."><LazyComp /></Suspense>

🈂️ Vue:

const LazyComp = defineAsyncComponent(() => import('./Component.vue’));

4. Предварительная загружаем критичные изображения:

Используйте <link rel="preload"> для важных ресурсов.

5. Тестируем производительность:

Chrome DevTools и Lighthouse помогут оценить эффект.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme

🤔 Вопрос с собеседования

Что такое Event Loop простыми словами?

👇 Правильный ответ (нажми, чтобы прочитать):

Event Loop — это механизм, который позволяет JavaScript выполнять асинхронные операции, несмотря на то что сам язык однопоточный.

Пока выполняется текущий код, асинхронные задачи (например, setTimeout, fetch или обработчики событий) ожидают своей очереди.

Когда стек вызовов становится пустым, Event Loop берёт следующую задачу из очереди и передаёт её на выполнение.

🔜 Идеальный короткий ответ:

Event Loop следит за стеком вызовов и очередями задач, чтобы запускать асинхронный код только тогда, когда основной поток свободен.

👍 — знал/а
🔥 — стало понятнее

💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#career_merge

📌 330+ вопросов по React для подготовки к собеседованиям

Если готовитесь к поиску работы или хотите освежить знания, сохраните эту шпаргалку.

• JSX, компоненты, props и state;
• Hooks и жизненный цикл;
• Virtual DOM и Reconciliation;
• Context API и Redux Toolkit;
• React Router;
• оптимизация производительности;
• тестирование (Jest);
• SSR и основы Next.js;
• распространённые ошибки и лучшие практики.

🔗 Источник

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #react #career_merge

😎 React Reconciliation под капотом

Разберемся, как работает сравнение виртуального DOM, зачем нужны ключи и как React сохраняет состояние при обновлении. Видео и статьи — от гайдовых до настоящего deep dive.

➖ Build Your Own Virtual DOM: Understanding React’s Reconciliation Algorithm — пошаговый гайд: строительство VDOM, diff, patch своими руками

➖ Understanding React’s Reconciliation Algorithm: How It Efficiently Updates the DOM — рациональные принципы: TypeMatcher, ContentWatcher, KeyMaster

➖ React Reconciliation: The Hidden Engine Behind Your Component — сильное deep dive с примерами про сохранение state, identity, key и позицию в дереве

➖ Under the Hood: Understanding React’s Reconciliation Algorithm — свежий доклад о внутренностях reconciliation (можно взять из плейлиста/таймлайн)

➖ The Heart of React || How React works under the hood — отличное объяснение reconciliation, Fiber, rebuilding/rendering механизмов

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#read_watch

♿️ Проверьте, насколько хорошо вы знаете веб-доступность

Появился A11y.quest — интерактивный тренажёр с 128 вопросами по accessibility.

Внутри:

• семантический HTML;
• ARIA;
• навигация с клавиатуры;
• формы;
• работа со скринридерами и другие темы.

Вопросы разделены по уровням сложности, их можно перемешивать, а сервис показывает статистику, точность ответов и текущую серию.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#тест_драйв #a11y #html

💡 Мини-лайфхак для VS Code

Часто пишете console.log() вручную?

В VS Code можно создать свой сниппет: например, набираете cc, нажимаете Tab — и редактор подставляет заготовку.

Полезно для быстрых логов, но не забывайте чистить их перед коммитом ✅

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme

🎨 Подборка готовых UI-анимаций для интерфейсов

Нашли библиотеку Transitions.dev с коллекцией плавных переходов для современных веб-приложений.

Внутри — готовые анимации для:

• карточек;
• модальных окон;
• выпадающих меню;
• табов и аккордеонов;
• уведомлений;
• скелетонов;
• загрузчиков;
• переключателей и других UI-компонентов.

Каждую анимацию можно сразу посмотреть в действии, изучить реализацию и адаптировать под свой проект ✅

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack