Серия «Итоги недели в мире фронтенда и обзоры сервисов»

6

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🔮 10 полезных JavaScript-трюков

Деструктуризация с переименованием (алиасингом)

Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Зачем это нужно:

  • Улучшает читаемость кода.

  • Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.

  • Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.

Каррирование

Каррирование – техника преобразования функции с несколькими аргументами в серию функций, каждая из которых принимает только один аргумент. Это делает функции более гибкими и переиспользуемыми. Например, это обычная функция расчета скидки:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Та же функция, но с использованием каррирования:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Зачем это нужно:

  • Обеспечивает переиспользуемость функций.

  • Повышает читаемость и модульность кода.

  • Позволяет создавать новые функции на лету, используя уже существующие, например:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🤖🎓 Подтянуть свои знания по DS вы можете на нашем телеграм-канале «Библиотека DS для собеса»

debounce() и throttle()

Дебаунсинг и троттлинг – техники оптимизации, которые помогают контролировать частоту вызова функций. Они особенно полезны при работе с событиями, которые могут происходить очень часто, например, прокрутка страницы или ввод текста.

debounce() работает так:

  • Функция вызывается только после того, как прошло определенное время с момента последнего вызова.

  • Если функция вызывается снова до истечения этого времени, таймер сбрасывается.

В этом примере функция поиска будет вызвана только через 300 миллисекунд после того, как пользователь перестанет вводить текст. Это позволяет избежать лишних запросов к серверу при каждом нажатии клавиши:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

throttle() работает так:

  • Функция вызывается не чаще, чем раз в заданный интервал времени.

  • Если попытка вызвать функцию происходит до истечения интервала, вызов игнорируется.

В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Мемоизация

Мемоизация – техника оптимизации, связанная с кэшированием промежуточных результатов сложных вычислений. Вместо того чтобы каждый раз заново решать сложную задачу, мы записываем ответ и в следующий раз просто смотрим в наш кэш:

  • Когда функция вызывается с определенными аргументами, мы сначала проверяем, вычисляли ли мы уже результат для этих аргументов.

  • Если да, мы возвращаем сохраненный результат.

  • Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.

Пример мемоизации при вычислении ряда Фибоначчи:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.

  • С мемоизацией каждое число Фибоначчи вычисляется только один раз. При повторном запросе того же числа результат берется из кэша, что значительно ускоряет работу.

Когда использовать мемоизацию:

  • Для функций с очень сложными вычислениями.

  • Когда функция часто вызывается с одними и теми же аргументами.

  • Когда функция  возвращает один и тот же результат для одних и тех же входных данных.

Важно помнить, что мемоизация требует дополнительной памяти для хранения результатов, поэтому нужно учитывать этот компромисс между скоростью и объемом используемой памяти.

🐘🧩 Интересные задачи по PHP для практики можно найти на нашем телеграм-канале «Библиотека задач по PHP»

Proxy

Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Для чего еще можно использовать Proxy:

  • Валидация – проверка данных перед их установкой в объект.

  • Логирование – отслеживание использования и изменений свойств объекта.

  • Создание вычисляемых на лету свойств.

  • Безопасность – можно контролировать доступ к свойствам объекта.

Генераторы

Генераторы – особый тип функций в JavaScript:

  • Могут приостанавливать свое выполнение и возобновлять его позже.

  • Сохраняют свое состояние между вызовами.

  • Используют ключевое слово yield для возврата значений.

Пример итерации по свойствам объекта:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Преимущества генераторов:

  • Ленивые вычисления – вычисляют значения, когда они действительно нужны.

  • Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.

  • Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.

  • Создание кастомных итераторов для сложных структур данных.

Эффективное использование консоли

Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.

  • Ошибки и предупреждения:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Вывод табличных данных:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Группировка логов:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Измерение времени выполнения:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Условное логирование:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Трассировка стека:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🐍🎓 Подтянуть свои знания по Python вы можете на нашем телеграм-канале «Библиотека Python для собеса»

Структурированное клонирование

Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в  отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Структурированное клонирование стоит использовать, если:

  • Нужно создать полную, независимую копию сложного объекта.

  • Данные не должны изменяться (иммутабельность).

  • Необходимо избежать побочных эффектов при изменении данных.

Самовызывающиеся функции

Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Теговые шаблоны

Теговые шаблоны позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. Здесь, например, функция sanitize заменяет опасные символы на их безопасные HTML-сущности, предотвращая выполнение нежелательного кода:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Как можно использовать теговые шаблоны:

  • Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.

  • Форматировать числа, даты и т. д.

  • Безопасно формировать SQL-запросы, экранируя ввод.

  • Создавать теги для автоматического перевода строк с одного языка на другой.

🤖🧩 Интересные задачи по DS для практики можно найти на нашем телеграм-канале «Библиотека задач по DS»

📐 Единицы измерения высоты и ширины экрана в современном CSS

На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.

Large Viewport Units (lvh, lvw)

Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:

.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}

Small Viewport Units (svh, svw)

Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:

.header {
height: 10svh;
background-color: #642;
}

Dynamic Viewport Units (dvh, dvw)

Эти единицы измеряются с учетом динамических изменений видимой области при взаимодействии пользователя с интерфейсом (например, при прокрутке страницы или появлении виртуальной клавиатуры). Есть нюансы: использование этих единиц иногда приводит к неожиданным изменениям размеров контента и ухудшению производительности. Пример – элемент, который адаптируется к изменениям высоты видимой области:

.adjustable-element {
height: calc(100dvh - 10svh);
}

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

  • Современные JavaScript-фреймворки и библиотеки

  • HTML5 и CSS3: новые возможности и трюки

  • Оптимизация производительности веб-приложений

  • Тестирование и отладка кода

  • Лучшие практики UX/UI

  • Новые веб-стандарты и браузерные технологии

  • Тренды в веб-дизайне и интерфейсах

  • Прогрессивные веб-приложения (PWA)

✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами

  • HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.

  • HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.

  • StyleShout предлагает широкий выбор шаблонов для различных целей, включая SaaS, мобильные приложения, блоги, лендинги, портфолио и агентства.

  • One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.

  • Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🐍🧩 Интересные задачи по Python для практики можно найти на нашем телеграм-канале «Библиотека задач по Python»

  • Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.

  • ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.

  • Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.

  • Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.

  • TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.

  • Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.

  • Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.

  • Just Good UI – собрание бесплатных и платных шаблонов Astro.

  • Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.

  • Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.

  • Landify – красивые и современные шаблоны Gatsby.

  • Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.

  • Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.

  • Templated – продуманные шаблоны на HTML/CSS и Bootstrap.

  • Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.

  • Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.

  • MonsterOne – современные шаблоны с несколькими страницами.

  • TemplatesJungle – шаблоны для бизнеса, агентств, сервисов, портфолио, электронной коммерции и других целей.

  • 3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.

  • Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.

  • Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.

  • HTML Codex – широкий выбор шаблонов для бизнеса, курсов, продуктов, агентств, сервисов, портфолио, резюме и других целей.

  • W3Layouts отличается широким выбором шаблонов для бизнеса.

  • Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.

  • Untree – стильные шаблоны со сложными элементами.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Tailwind Toolbox – красивые шаблоны с продуманной структурой.

  • Pixelcave – современные шаблоны для сайтов и административных интерфейсов.

  • Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.

  • Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.

  • Red Pixel Themes – шаблоны с  хорошим дизайном и многими полезными компонентами.

  • Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.

  • Treact – бесплатная библиотека React-шаблонов.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.

  • UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.

  • AdminMart – профессиональные шаблоны со множеством секций и компонентов.

  • WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.

  • Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.

  • KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🎮 Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека разработчика игр | Gamedev, Unity, Unreal Engine»

  • EaseTemplate – подборка современных Bootstrap-шаблонов.

  • BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.

  • CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.

  • Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.

  • Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.

Автор рассылки: Наталья Кайда

Показать полностью 24
1

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

☕ 5 способов создания DOM-элементов из HTML-строк методами JavaScript

Создание DOM-элементов из строк обеспечивает:

  • Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.

  • Гибкость – можно легко генерировать HTML на основе данных, полученных от пользователя или с сервера.

  • Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.

  • Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.

Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами.

innerHTML

Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML-строках, что делает его безопасным при работе с непроверенным содержимым.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

innerHTML + template

Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML-структуру, включая элементы, связанные с таблицами – <tr> и <td>.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

insertAdjacentHTML

Как и innerHTML, этот метод обрабатывает только допустимые HTML-узлы и не выполняет скрипты.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

DOMParser

Этот метод работает медленнее остальных, поскольку он разбирает строку, создавая полный HTML-документ, и только потом извлекает узел из документа. Он также может обрабатывать только допустимые узлы HTML и не выполняет скрипты.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

Range.createContextualFragment

Самый простой, но не безопасный метод – выполняет скрипты. Поэтому при его использовании необходимо очищать данные для защиты от XSS – например, с помощью DOMPurify.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

🎓☕ Подтянуть свои знания по Java вы можете на нашем телеграм-канале «Библиотека Java для собеса»

🦮 Интерактивные гайды

Гайд по SVG

SVG-графика предоставляет нам стандартизированный способ создания изображений и иконок, которые можно отображать в любом размере без потери качества изображения. Но разобраться в методах SVG не так-то просто. На помощь придет интерактивный справочник SSSVG.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

SSSVG поможет быстро понять принцип работы всех основных атрибутов

К слову, возможности SVG простираются за пределы создания векторных картинок и лого: энтузиасты умудрились сделать «Тетрис» в виде одного SVG-файла.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

Этот «Тетрис» сделан полностью на SVG

Гайд по :has() в CSS

Псевдокласс :has() открывает новые возможности для творческих экспериментов в CSS, позволяя создавать сложные и интерактивные дизайны без использования JavaScript. Это первый родительский селектор, позволяющий стилизовать элемент в зависимости от его содержимого. Все невероятные возможности :has() продемонстрированы в интерактивном гайде CSS :has() Interactive Guide.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

В гайде подробно разобраны десятки примеров использования :has()

🐘🧩 Интересные задачи по PHP для практики можно найти на нашем телеграм-канале «Библиотека задач по PHP»

🪚 Инструменты

Plasmic – опенсорсный визуальный конструктор для создания сайтов и веб-приложений на React со множеством функций:

  • Можно интегрировать с существующими React-проектами.

  • Можно использовать как CMS.

  • Позволяет подключать разные источники данных и бэкенд-сервисы.

  • Совместим с Next.js и Gatsby.

  • Поддерживает оптимизацию производительности, включая статическую генерацию сайтов и оптимизацию изображений.

article-extractor – эта библиотека Node.js извлекает текст статей, метаданные и ссылки на изображения по URL.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

Протестировать article-extractor можно на демо-сайте

TurndownNode.js-библиотека для конвертирования HTML в Markdown. Отлично работает в связке с предыдущим инструментом.

Итоги недели в мире фронтенда и обзоры новых сервисов: Как выбрать стратегию рендеринга Программирование, Разработка, Рендер, Frontend, CSS, HTML, IT, Javascript, Markdown, Nodejs, Svg, Видео, Длиннопост, YouTube, YouTube (ссылка)

article-extractor + turndown подготовят контент для LLM

15 полезных расширений VS Code для фронтендера

  • Auto Rename Tag – при переименовании HTML-тега автоматически обновляет парный тег.

  • Code Spell Checker – находит опечатки в именах переменных и других идентификаторах.

  • DotEnv – добавляет цветовое оформление и улучшает читаемость файлов с переменными окружения.

  • Docker – добавляет вкладку для удобной работы с контейнерами, если вы используете Docker.

  • ESLint – выявляет проблемы в коде (нарушения форматирования или потенциальные ошибки) на лету.

  • Figma – позволяет встраивать и просматривать файлы дизайна Figma прямо в VS Code.

  • GitHub Copilot – предлагает AI-генерируемые подсказки во время набора кода.

  • Copilot Chat – предоставляет окно чата в стиле ChatGPT прямо в редакторе.

  • GraphQL – набор расширений, упрощающих работу с GraphQL.

  • Import Cost – показывает размер импортируемых пакетов, помогая выявить потенциальное раздувание кода.

  • Live Server – запускает локальный сервер с автоматической перезагрузкой, что удобно для предварительного просмотра изменений.

  • Live Share – позволяет программировать в команде с другими разработчиками, работая в одном редакторе в реальном времени.

  • Markdown Preview Enhanced – предоставляет живой предпросмотр Markdown-файлов во время редактирования.

  • Notes – удобный блокнот для хранения заметок по проекту, инструкций по настройке и т. д.

  • Hinty – предоставляет динамические подсказки в реальном времени. Помогает избегать повторения распространенных ошибок и соблюдать стандарты написания кода в команде.

🐍🎓 Подтянуть свои знания по Python вы можете на нашем телеграм-канале «Библиотека Python для собеса»

⚛️ Как выбрать оптимальную стратегию рендеринга

Рендеринг – это процесс превращения кода в контент. За годы развития интернета эта технология прошла долгий путь – от формирования простейших HTML-страниц на стороне сервера до динамического обновления интерактивных приложений без перезагрузки. Сейчас в ходу несколько методов рендеринга:

  • Генерация статических сайтов (предварительно генерирует HTML-страницы во время сборки приложения).

  • Генерация на стороне сервера (генерирует полный HTML для страницы при каждом запросе).

  • Генерация на стороне клиента (использует JavaScript для рендеринга контента в браузере пользователя).

  • Инкрементальная статическая регенерация (позволяет обновлять отдельные страницы после сборки сайта).

  • Частичный пререндеринг (экспериментальный подход, который стремится автоматически оптимизировать стратегии рендеринга).

Эти методы по-разному подходят к оптимизации работы приложения, SEO и пользовательского опыта. Их можно комбинировать – это позволяет по максимуму использовать сильные стороны, нивелировать недостатки и обеспечить оптимальный баланс производительности, свежести данных и интерактивности. Разработчики Vercel (эта компания создала Next.js) написали подробную статью о преимуществах и недостатках каждого подхода и о том, как их лучше комбинировать.

Генератор статических сайтов (SSG)

Идеально подходит для страниц с редко меняющимся контентом, макетов сайтов, документации и лендингов, для которых важна максимальная скорость загрузки.

Преимущества:

  • Самая быстрая загрузка страниц.

  • Отличные показатели SEO.

  • Самая низкая нагрузка на сервер.

  • Низкие затраты на инфраструктуру.

Недостатки:

  • Увеличенное время сборки для сайтов с большим количеством страниц.

  • Обновление контента требует новой сборки и развертывания.

Рендеринг на стороне сервера (SSR)

Идеально подходит для персонализированных дашбордов, лент соцсетей и визуализации данных в реальном времени.

Преимущества:

  • Всегда отдает свежий, актуальный контент.

  • Показатели SEO и времени загрузки данных лучше, чем при рендеринге на стороне клиента.

Недостатки:

Инкрементальная статическая регенерация (ISR)

Подходит для случаев, когда сборка с SSG занимает слишком много времени. Используется для страниц продуктов в e-commerce, новостных порталов и крупных контентных сайтов.

Преимущества:

  • Сохраняет быструю загрузку страниц, как у SSG.

  • Позволяет обновлять контент по требованию без полной пересборки.

  • Эффективно масштабируется на большое количество страниц.

  • Может быть экономичнее, чем SSR, в некоторых случаях.

Недостаток:

  • Требует тщательного управления стратегиями инвалидации кэша.

Рендеринг на стороне клиента (CSR)

Подходит для интерактивных элементов страницы, требующих немедленной обратной связи, админ-панелей с данными в реальном времени и приложений типа Notion, которые непрерывно синхронизируют вводимые пользователем данные с сервером.

Преимущества:

  • Самый интерактивный пользовательский опыт.

  • Плавные переходы между состояниями приложения.

  • Взаимодействие с внешними данными в реальном времени.

Недостатки:

  • Начальная загрузка может быть медленнее из-за необходимости загрузки JavaScript-бандла.

  • Оптимизация Core Web Vitals может быть сложной.

  • Требует тщательного управления состоянием на клиенте.

Частичный пререндеринг (PPR)

PPR призван объединить преимущества других стратегий рендеринга и потенциально может стать стандартным подходом для веб-приложений в будущем.

Преимущества:

  • Мгновенная загрузка страницы (как у SSG).

  • Плавная потоковая передача динамического контента.

  • Улучшенная производительность с меньшими затратами на разработку.

Недостатки:

  • Все еще находится в стадии исследований и разработки.

  • Может потребовать рефакторинга кода для включения в существующий проект.

Выбор стратегии рендеринга

При выборе стратегии рендеринга нужно учитывать следующие факторы.

Как часто обновляется контент?

  • Статический контент лучше всего обрабатывать генератором статических сайтов.

  • Для вывода периодически обновляемого контента отлично подходит инкрементальная статическая регенерация.

  • Обновление контента в реальном времени требует серверного или клиентского рендеринга.

Для повышения производительности нужно стремиться к максимальному использованию SSG и ISR, прибегая к SSR только в случае необходимости получения абсолютно свежих данных.

Насколько важно продвижение страницы в поисковых системах?

  • Хотя Google может рендерить JavaScript на стороне клиента, ключевые показатели Core Web Vitals все еще сильно влияют на ранжирование.

  • Высоких показателей CWV легче добиться на статических и серверных страницах, чем на страницах с клиентской загрузкой внешних данных.

Насколько активно пользователь будет взаимодействовать со страницей?

  • Если страница в основном статическая с минимальным взаимодействием, используйте SSG или ISR с небольшим количеством клиентского JavaScript.

  • В противном случае может потребоваться SSR (с гидратацией на стороне клиента).

Каковы требования к скорости загрузки?

  • Для максимально быстрой начальной загрузки используйте SSG или ISR с редкой инвалидацией.

  • Чтобы сбалансировать свежесть данных и скорость, используйте ISR или SSR (для актуальных данных).

  • CSR может обеспечить данные в реальном времени, но часто за счет начальной загрузки.

Нужно ли персонализировать контент?

  • Если вам нужен персонализированный контент, скорее всего, потребуется SSR или CSR.

  • ISR может работать в случаях, когда можно кэшировать персонализированный контент, например, настройки веб-приложения.

  • SSG не позволяет персонализировать контент.

🔤 Больше полезных материалов вы найдете на нашем телеграм-канале «Азбука айтишника»

Автор рассылки: Наталья Кайда

Показать полностью 10 1
Отличная работа, все прочитано!