И всё время залезаешь в консоль разработчика, чтоб посмотреть как сделан сайт

Оптимизация работы с DOM. Ещё кое-что

Мы дали уже много советов по работе с DOM в прошлом посте, но кое-что не поместилось, но всё ещё осталось важным.

Как вы знаете, каждое изменение DOM вызывает его «перерисовку», что может тормозить сайт. Чтобы избежать лишних обновлений:

Используйте фрагменты при массовых изменениях. Фрагмент сначала наполняется в памяти, а потом добавляется в DOM одним движением. Это значительно быстрее, чем изменять страницу 100 раз подряд.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let li = document.createElement("li");
  li.textContent = `Элемент ${i}`;
  fragment.appendChild(li);
}
document.querySelector("ul").appendChild(fragment); // Один раз добавляем всё в DOM

Вы также можете кэшировать элементы, если используете их многократно

const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
  document.querySelector("#output").textContent = "Кнопка нажата!";
});

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

document.querySelector("#myButton").addEventListener("click", () => {
  document.querySelector("#output").textContent = "Кнопка нажата!";
});

#простымисловами #фронтенд

Стоит ли фронтенд-разработчикам переходить на фриланс в 2025 году

Извечный вопрос студентов, джунов, а иногда и опытных фронтендеров — какой формат работы выбрать? Можно попробовать уйти во фриланс и попытаться самому находить проекты, либо работать «на дадю», который обеспечит тебя работой. А можно попытаться попасть в крупную IT-компанию.

Для принятия решения нужно разобраться в нюансах. В этой статье мы собрали все плюсы и минусы каждого варианта с поправкой на 2025 год.

А что вы думаете? Поделитесь своим мнением в комментариях

#фронтенд

Делаем приложение погоды на Vue.js

Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, с использованием Open Weather Map API и restful api для получения данных о погоде.

#видео #vue

Как работать с <qr-code> — настраиваемым элементом HTML с возможностью анимации

Алгоритмы генерации QR-кода превращают текстовые данные, такие как URL-адреса, электронные письма, номера телефонов и сведения о подключении Wi-Fi, в динамически генерируемые визуальные матрицы QR-кода, которые каждый сможет отсканировать с помощью мобильного телефона.

Opensource-библиотека qr-code предлагает анимируемый веб-компонент <qr-code> на основе SVG, который можно использовать для рендеринга стильных QR-кодов на чистом HTML. Как с ней работать, рассказали в этом материале.

#qr #фронтенд #библиотека

Интересная анимация загрузки с помощью CSS

Можете попробовать повторить такой лоадер, если хотите потренироваться в создании CSS-анимации. Здесь всего несколько DIV'ов, которые анимированы с помощью @keyframes.

Посмотреть код можно на codepen.

#codepen #css

Современный способ разработки серверов на JS

Ели вы когда-нибудь заходили на главную страницу Node, то наверняка видели этот кусок кода с картинки. Это самый простой веб-сервер, с которого сегодня начинается почти каждый сервер, написанный на JS. Да, это всё может быть прикрыто фреймворком, но по сути, все такие сервера делают примерно одно и то же.

Но сегодня существует более современный способ создания сервера, которому не нужно привязываться к сокету. О нём в этой статье.

#nodejs #javascript #бэкенд

Флексим и создаём GUI на Python с веб-технологиями рендеренига

В этом нам поможет Flexx — набор инструментов, сделанных на чистом Python. Он позволяет писать код графических интерфейсов прямо на питоне и на ходу генерировать JavaScript с помощью транслятора PScript.

Узнать подробности о возможностях и изучить инструкцию можно на странице проекта.

#инструменты #python #javascript #gui

Товарищи разрабы, жиза?

@mobi_dev

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

• Вся база по HTML, CSS, JS, React.
• Шпаргалки, пособия и документация.
• Множество видео-гайдов.
• Пошаговый разбор пет-проектов для вашего портфолио и работа с GitHub.
• Материалы к собеседованиям и даже записи реальных технических созвонов.
• Наиболее удобные сервисы для хостинга проектов и работы фронтендера.
• Профессиональные блоги, книги и статьи для ежедневного чтения и просвещения.

Ультимативные знания берем — тут.

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

Современная бэкенд архитектура: Как сегодня создаются масштабируемые и высоконагруженные приложения

Бэкенд — это не только API. Это еще и множество сервисов и приложений, помогающих делать крутые высоконагруженные приложения. Здесь вы:

— познакомитесь с современным стеком, использующимся в коммерческой разработке;
— узнаете различия между маленькими, средними и большими приложениями;
— рассмотрите архитектуры современных веб-приложений, фокусируясь на бэкенд-части.

#видео #бэкенд

Отладка JavaScript в Chrome DevTools для начинающих фронтендеров

Поиск и исправление ошибок в JS может быть весьма ресурсозатратным мероприятием. Новичкам этот процесс может показаться неподъёмным камнем.

Но только до знакомства с отладкой в инструментах разработчика, встроенных в браузер. О ней вы узнаете в этой статье. Причём не о привычной всем console.log, а куда более эффективной альтернативе.

#javascript #qa

JSON4U — универсальный инструмент для работы с JSON

С помощью JSON4U вы в режиме онлайн можете форматировать, валидировать, сравнивать JSON, при этом сразу визуализируя его в таблицах или графах.

Помимо онлайн составляющей вам также понравится его интерактивность. Попробуйте сами: https://json4u.com/

#инструменты #json

Борьба с перерендерами в React

На тему мемоизации написано много статей, и все они хорошо раскрывают суть. Но если вам, как и автору этой статье, не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?», то вы по адресу.

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

#react

​​Когда пытаешься доказать, что это фича, а не баг: