Frontend разработчик

Как работает 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 📲 Мы в MAX 👉 @frontend_1

Совет по CSS 💡 Знаете ли вы, что свойство gap можно использовать и для макета flexbox? ✨ 📲 Мы в MAX 👉 @frontend_1

💻Angular — один из самых строгих и системных инструментов разработки пользовательских интерфейсов. Его выбирают крупные компании, где важны масштабируемость, предсказуемость кода и возможность развивать продукт долгие годы. Мы расскажем вам как работать с этим инструментом. Записывайтесь на открытые уроки в преддверии старта курса «Angular-разработчик»: 📆26 марта в 20:00 МСК на открытом уроке разберём, как LLM ускоряют фронтенд-разработку. Покажем их развитие, подготовим Angular-проект к работе с ИИ, создадим приложение и обсудим, где ИИ реально помогает разработчику. 📆9 апреля в 20:00 МСК на открытом уроке разберём сигналы в Angular: создадим реактивную форму с валидацией, обсудим управление состоянием и сравним с подходом на RxJS. 📆21 апреля в 20:00 МСК разберём архитектуру Angular-приложения: слои, feature-подход, разделение UI, логики и API, а также паттерны и структуру реального проекта. Подробности об уроках и регистрация: https://vk.cc/cVBmDT Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы

Используйте свойство columns, чтобы разделить статью на отзывчивые колонки 🚀. 📲 Мы в MAX 👉 @frontend_1

Проект для начинающих на JavaScript – Урок по созданию игры Змейка В этом уроке программирования для начинающих вы научитесь создавать ретро-игру "Змейка", вдохновленную культовой игрой на Nokia, с использованием чистых HTML, CSS и JavaScript! С помощью JavaScript вы научитесь рисовать игровое поле, создавать змейку и случайно генерируемую еду, заставлять змейку двигаться, увеличивать её размер при поедании еды и ускорять её движение. Вы также научитесь вести счёт, отслеживать столкновения змейки и отображать ваш рекорд. ⌨️ (00:00) What we are building / Finished snake game ⌨️ (01:57) Setting up our HTML ⌨️ (10:25) Styling with CSS ⌨️ (27:05) Creating the snake game logic with JavaScript источник 📲 Мы в MAX 👉 @frontend_1

🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии 📌 https://max.ru/progjob Вакансии в IT Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Бонус 📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы

⚡️ Прощай, 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. Сначала читайте, потом пишите! 📲 Мы в MAX 👉 @frontend_1

Нативный View Transitions API Анимация перехода между страницами (или состояниями приложения) всегда была болью. Чтобы картинка из карточки товара плавно перелетела на страницу деталей, мы тянули тяжелые framer-motion, react-spring и писали горы логики, чтобы держать старый DOM-узел живым во время анимации. Теперь это делает сам браузер на уровне движка с помощью View Transitions API. В чем суть? Когда вы вызываете API, браузер буквально делает скриншот текущего состояния, замораживает его, дает вам обновить DOM, делает скриншот нового состояния и автоматически создает CSS-анимацию (по умолчанию crossfade) между этими двумя «кадрами». 🚀 Как это выглядит в коде (SPA): Вместо синхронного изменения стейта оборачиваем апдейт в один метод:

    
        
// Функция, которая меняет DOM (например, рендер нового роута)
function updatePage() {
  renderNewRoute();
}

// ❌ Как было:
// updatePage();

// ✅ Как теперь:
if (!document.startViewTransition) {
  updatePage(); // Фолбэк для старых браузеров
} else {
  // Браузер сам создаст плавный переход
  document.startViewTransition(() => updatePage());
}

{}
    

🧠 Senior-уровень: Анимация конкретных элементов Дефолтный crossfade всей страницы это скучно. Самое крутое, это Hero-анимации (когда элемент перелетает на новое место с изменением размера). Чтобы браузер понял, что маленькая аватарка в списке и большая аватарка в профиле - это один и тот же элемент, им просто нужно дать одинаковое CSS-свойство view-transition-name:

    
        
/* На странице списка */
.user-avatar-small {
  view-transition-name: user-avatar;
}

/* На странице профиля (после апдейта DOM) */
.user-avatar-large {
  view-transition-name: user-avatar;
}

{}
    

Всё! При вызове startViewTransition браузер сам рассчитает траекторию, скейл и плавно переместит аватарку. 🔥 А что с классическими многостраничниками (MPA)? Это самая бомба. Chrome уже поддерживает кросс-документные переходы (между реальными HTML-страницами вашего сайта). Не нужно никакого JS! Просто добавляем в CSS:

    
        
@view-transition {
  navigation: auto;
}

{}
    

И страницы начнут плавно перетекать друг в друга при клике на обычные ссылки <a href="...">. 📲 Мы в MAX 👉 @frontend_1

🧬 Иммутабельность из коробки: toSorted(), toSpliced() и with() Сколько раз вы ловили трудноуловимые баги в React или Redux из-за того, что методы sort(), reverse() или splice() незаметно мутируют оригинальный массив? Раньше, чтобы обновить состояние, нам приходилось плодить поверхностные копии через спред-оператор.

    
        
// ❌ Старая школа (много шума)
const sortedUsers = [...users].sort((a, b) => a.age - b.age);

// А замена элемента по индексу вообще выглядела как пытка:
const updatedUsers = [...users];
updatedUsers[index] = newUser;

{}
    

В стандарте ES2023 (Baseline 2023) JavaScript наконец-то получил нативные иммутабельные методы массивов. Они делают то же самое, но возвращают новый массив, оставляя оригинал нетронутым. 🚀 Как пишем теперь: 1. Сортировка и разворот

    
        
// ✅ Оригинал цел, получаем новый массив
const sorted = users.toSorted((a, b) => a.age - b.age);
const reversed = users.toReversed();

{}
    

2. Удаление/вставка (вместо splice)

    
        
const months = ["Jan", "Mar", "Apr", "May"];

// Вставляем "Feb" на индекс 1 (ничего не удаляя)
const fixedMonths = months.toSpliced(1, 0, "Feb");
// ["Jan", "Feb", "Mar", "Apr", "May"]

{}
    

3. 🔥 Метод with() - киллер-фича для React Заменяет элемент по индексу без мутаций. Идеально для обновления конкретного элемента в массиве состояния.

    
        
const state = ['apple', 'banana', 'cherry'];

// Меняем 'banana' на 'mango'
const newState = state.with(1, 'mango'); 
// ['apple', 'mango', 'cherry']

{}
    

💡Методы работают не только с массивами, но и с TypedArrays (например, Uint8Array). А метод with() отлично справляется с отрицательными индексами - arr.with(-1, newItem) заменит последний элемент массива без вычисления его длины! 📲 Мы в MAX 👉 @frontend_1