CodeBase | Frontend

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

🦥Ленивый программист ©

👩‍💻 Что такое тег <section> Тег <section> создаёт независимый блок — например, блок новостей, блок с контактами или просто абзац с заголовком.

    
        <section>
  <h1>Заголовок первого блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>
</section>

<section>
  <h1>Заголовок второго блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p>
</section>{}
    

• Тег <section> всегда закрывается при помощи парного тега </section>. • Внутри <section> обязательно должен быть заголовок <h1>...<h6>. • Контейнеры <section> можно вкладывать друг в друга, как матрёшку. 💡 Если вы хотите просто объединить и стилизовать второстепенные элементы, которые не так важны для поисковика, лучше использовать <div>. Некоторые начинающие разработчики неверно понимают семантику этого тега и заменяют им большую часть дивов на странице. Так делать не стоит. Тегом <section> стоит оборачивать большие логические блоки на странице.

🛠 По спецификации допустимо размещать в каждом <section> заголовок первого уровня (<h1>). Несмотря на это, не стоит размещать на странице больше одного заголовка первого уровня. Это важно для правильной индексации сайта поисковыми роботами.

CodeBase | Frontend | #html

🚀 Обновление Telegram Теперь прямо в Telegram можно зарегистрировать доменное имя анонимно — за пару кликов, с оплатой в криптовалюте Выберите имя и зону, оплатите с помощью криптовалюты — и управляйте доменом через мини-приложение Telegram Domains

👩‍💻 Объект Кроме примитивных типов в JavaScript существуют и сложные — например, объект. 🗣️ Объект (object) — это набор свойств. Каждое свойство состоит из названия и значения. Название может быть строкой или символом, а значение может быть любым. ➡️ Объекты в JavaScript используются повсюду, особенно для хранения данных. Для уверенной работы с объектами необходимо знать, как создавать объект, как его изменять и как читать значения свойств. Пустой объект без свойств можно создать парой фигурных скобок:

    
        const cat = {}{}
    

✔️ Когда нужно создать объект со свойствами, то их описывают внутри фигурных скобок. Свойства указываются в формате имяСвойства : значение, между свойствами ставится запятая:

    
        const book = {
  title: 'Война и мир',
  author: 'Лев Толстой',
  pages: 1274,
  isFinished: true
}{}
    

CodeBase | Frontend | #js

🔥 БЕСПЛАТНЫЙ КУРС ПО КОМПЬЮТЕРНОМУ ЗРЕНИЮ 🔥 Компьютерное зрение уже используют в банках, ритейле, медицине, промышленности и безопасности И спрос на специалистов растёт каждый год 🌎🌟 В Университете искусственного интеллекта запустили бесплатный курс по Computer Vision Что разберёте на обучении: 🔹 Основы Computer Vision и виды задач 🔹 Популярные библиотеки и фреймворки для CV 🔹 Сбор и разметка данных для CV 🔹 Предобученные нейронные сети и их значение 🔹 Интеграция CV в реальный продукт 🚀 Подойдёт разработчикам, аналитикам, специалистам по данным и всем, кто хочет войти в AI 🤖 Присоединяйтесь к нашему бесплатному курсу и разберитесь в этой увлекательной теме с нами!