CodeBase | Frontend

⚙️ Что такое свойство backdrop-filter в CSS и зачем оно используется? Свойство backdrop-filter применяет визуальные эффекты к фону за элементом, а не к самому элементу.

Чаще всего используется для blur-эффекта в модальных окнах и стеклянных интерфейсах

➡️ Пример:

    
        <div class="card">Контент</div>

<style>
  body {
    background: url(bg.jpg) no-repeat center / cover;
  }

  .card {
    width: 300px;
    padding: 20px;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
  }
</style>{}
    

🗣️ Популярные эффекты: • blur() — размытие • brightness() — яркость • contrast() — контраст • saturate() — насыщенность

backdrop-filter позволяет создавать современные UI-эффекты без изображений и JS, но требует полупрозрачного фона и поддержки браузером

CodeBase | Frontend | #Основы

На Stepik запустили курс «От новичка к уверенности в коде на Python» Курс создан для новичков, которым важно не заучить команды, а понять логику. Наглядные схемы и визуальные разборы показывают, что происходит внутри программы и как она работает Много практики, понятные объяснения решений не дадут застрять на теории. Материал предлагает вам не иллюзию знаний, а ощущение контроля: вы ясно видите как из нескольких строк кода рождается работающая программа Что внутри: ✅переменные и типы данных ✅условия и логика программ ✅циклы и рекурсия ✅функции и работа с вводом данных ✅списки, словари и множества ✅базовое ООП ✅работа с библиотеками Python ✅десятки задач и упражнений Эти знания фундамент для написания простых ботов и автоматизации задач Скидка 25%, действует 48 часов 🔗Пройти курс на Stepik

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

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

В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid: 2W5zFK47HsF ИП Галактионов Тихон Витальевич, ИНН 771618975809

Как работает SVG ViewBox Данная статья с интерактивными примерами поясняет, как применять атрибут viewBox в SVG. Raster vs. Vector Render Image Inline SVG Coordinates View Box Pan & Zoom Zoom to Square Animate React Spring Scaling Stroke Use Case https://svg.bradwoods.io/lessons/viewbox CodeBase | Frontend | #animate

Как превратить нейросеть в источник дохода без навыков кодинга? 🧠 Многие сейчас в панике: “ИИ отнимает мою работу!”, но умные знают, что “ИИ - это наш друг, и те кто не умеют им пользоваться теряют деньги и время!” Именно поэтому, чтобы собрать все самые топовые фишки нейросети, мы создали бот «Стань ИИ-гуру» с бесплатными уроками, чтобы не пришлось гуглить месяцами и сливать деньги на бесполезные курсы.  «Стань ИИ-гуру» - это твой персональный гид в мире денег на ИИ. Внутри ты найдешь:  🤖Короткие и простые уроки,которые ты не найдешь нигде,  о том какие навыки тебе нужны для заработка на ИИ, и какой формат подходит именно тебе, и все это абсолютно бесплатно 🪜Пройдешь по интересным интерактивным платформам и узнаешь, как внедрить ИИ в разные сферы свой жизни, значительно упростив ее 🧮Получишь расчет на умном калькуляторе, который основан на реальных данных по аналитике базы фриланса, который покажет сколько ты сможешь заработать в месяц, исходя из твоих возможностей 💼Как можно совмещать работу в найме, с заработком на ИИ, и как можно внедрить нейросеть в жизнь, для выполнения рутинных задач Переходи в «Стань ИИ-гуру»пройди интерактив и получи бесплатные уроки, которые доступны только пока висит этот пост. Не упусти возможность освоить навык, который в 2026 году приносит хороший доход 💰

Conform - это потрясающе - Валидация клиента + сервера из одной схемы Zod - Прогрессивное улучшение - Восхитительно простой API - Работает с Next.js ( server actions + useFormState) CodeBase | Frontend | #animate

Привет. Вот тебе самые топовые каналы по IT! ⚙️ Dev Boost — Самая огромная коллекция платных курсов, которые можно скачать бесплатно; 👩‍💻 IT Books — Самая огромная библиотека книг; 💻 Hacking & InfoSec Base — Крутой блог белого хакера; 🛡 CyberGuard — Всё про ИБ; 🤔 ИБ Вакансии — Всё, чтобы найти работу в ИБ; 👩‍💻 linux administration — Всё про Линукс; 👩‍💻 Программистика — Python, python и ещё раз python; 👩‍💻 GameDev Base — Всё про GameDev; 😆 //code — Самые топовые мемы по IT: Подпишись, чтобы не потерять!

⚡️ Прощай, FID. Привет, INP: Главная метрика Core Web Vitals First Input Delay (FID) официально ушел на пенсию в марте 2024 года. На его место пришел INP (Interaction to Next Paint). Если вы всё еще оптимизируете старую метрику, самое время пересмотреть свои подходы. В чем был обман FID? FID измерял только задержку (Input Delay) от клика до того момента, как браузер начал выполнять ваш обработчик событий. Если ваша функция onClick после старта зависала на 2 секунды, перебирая огромный массив, FID всё равно мог быть идеальным (например, 3 мс), хотя пользователь видел намертво зависший интерфейс. Что измеряет INP? INP фиксирует всё время до появления визуального отклика на экране: 1. Ожидание освобождения Main Thread (Input delay) 2. Выполнение вашего JS-кода (Processing time) 3. Пересчет стилей, Layout и саму отрисовку (Presentation delay) Хороший INP - это меньше 200 мс. Причем берется не среднее значение, а один из худших результатов за сессию (98-й перцентиль). 🛠 Как спасать INP (Senior level): 1. Разбивайте Long Tasks (Yield to Main Thread) Не заставляйте браузер делать всю тяжелую работу за один присест. Дайте ему возможность «вздохнуть» и отрисовать кадр. В современных браузерах для этого внедряется scheduler.yield().

    
        
async function handleHeavyClick() {
  // 1. Показываем лоадер (синхронно, легко)
  showSpinner();
  
  // 2. Отдаем управление браузеру, чтобы он успел отрисовать лоадер!
  // Если scheduler.yield недоступен, используем await new Promise(r => setTimeout(r, 0))
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  
  // 3. Теперь делаем тяжелую работу
  processHugeData();
}

{}
    

2. Используйте startTransition в React 18+ Если клик вызывает обновление состояния, которое требует тяжелого рендера (например, фильтрация большого списка), React может заблокировать отрисовку того же чекбокса, на который вы нажали. Оберните тяжелое обновление стейта в startTransition - React пометит его как низкоприоритетное и не будет блокировать UI. 3. Избегайте Layout Thrashing Если в обработчике клика вы сначала читаете размеры элемента (el.offsetHeight), а потом меняете классы, вы заставляете браузер синхронно пересчитывать стили (Forced Synchronous Layout). Это убивает фазу Presentation Delay. Сначала читайте, потом пишите! CodeBase | Frontend | #js

⚙️ Что такое свойство text-shadow в CSS и зачем оно используется? text-shadow — это CSS-свойство, которое добавляет тень к тексту, улучшая его визуальное восприятие. Оно позволяет задавать цвет, смещение, размытие и создавать эффекты, такие как свечение или объёмный текст. ➡️ Пример:

    
        <div class="text">Тень у текста</div>

<style>
  .text {
    font-size: 24px;
    font-weight: bold;
    color: darkblue;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Тень с размитием */
  }
</style>{}
    

🗣 В этом примере text-shadow делает текст более выразительным. Это свойство часто используется для стилизации заголовков, кнопок и декоративных элементов. CodeBase | Frontend | #CSS