​Zustand как альтернатива Redux

Управление состоянием в React за последнее время значительно меняется. Одни перешли на Redux, другие — используют сторонние библиотеки, например: Zustand или Recoil.

Библиотека Zustand была разработана создателями Jotai и React-spring и позволяет легко управлять состоянием приложения, не усложняя разработку обилием кода.

В этом видео рассматривается, что такое Zustand, работа с этой библиотекой и оптимизация рендера компонентов:

https://youtu.be/l6WDSN-_HSI

#фронтенд

​А что если создать клон ChatGPT?

Нейросеть ChatGPT взорвала интернет и стала самой обсуждаемой темой в 2022. Интересно, как повторить такой проект?

Мы нашли видеоурок, в котором автор объясняет, как с нуля создать интерфейс ChatGPT для фронтенда и бэкенда, используя пакет от OpenAI:

https://youtu.be/qwM23_kF4v4

#ии #фронтенд #бэкенд

3 правила в веб-дизайне, которые упрощают жизнь разработчикам

Макет готов, дизайн сделан, а сайт что-то не верстается. Плохой дизайн? Сложный макет? Действительно, иногда сложно понять идеи дизайнера и воплотить их в жизнь.

В этой статье собраны стандарты и правила, которые помогут сделать веб-разработку чуть-чуть легче: Grid options, названия слоёв и отступы:

https://habr.com/ru/post/723198/

#web #фронтенд

MyJavaScript — полезный ресурс для начинающих фронтенд-разработчиков

На MyJavaScript собраны руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker.

Информация на сайте постоянно обновляется, поэтому вы также можете проверить все обновления и релизы в ЯП. Сохраняйте в закладки, чтобы не потерять:

https://my-js.org/

#фронтенд

​10 инструментов, упрощающих работу с CSS

Вчера публиковали подборку из 7 инструментов для веб-разработки. А вот ещё 10 самых популярных инструментов, которые здорово упростят работу с CSS: https://tproger.ru/articles/10-instrumentov-dlya-css-animaciya-setki-i-dizajn/

#инструменты #фронтенд #веб

​Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они взаимодействуют?

Вы наверняка уже слышали эти модные в сфере программирования слова «фронтенд» и «бэкенд», но что за ними стоит?

Давайте разбираться

#веб #фронтенд #бэкенд

​Muuri — продвинутые интерактивные макеты для ваших веб-страниц

Сегодня можно создавать довольно сложные макеты без единой строки JavaScript. Но иногда CSS просто недостаточно, тогда здесь появляется Muuri. По сути, Muuri — это движок для создания макетов, который ограничен только вашим воображением.

Он создает адаптивные, сортируемые, фильтруемые и перетаскиваемые макеты. Подробнее об инструменте:

https://muuri.dev/

#инструменты #фронтенд

​Интерактивная шпаргалка по CSS Grid Layout

CSS Grid Layout — это способ двумерной раскладки. Flexbox позволяет полноценно управлять элементами только по одной оси и чем-то похож на display: table.

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

И вот отличная шпаргалка, которую можно не только почитать, но и посмотреть, что будет, если изменить некоторые параметры. Есть подробности о том, как формировать сетки, изменять расположение элементов, делать выравнивание и интервалы.

#css #фронтенд

Фронтенд или бэкенд

Выбор стека, как и выбор класса в ММОРПГ, является сложным вопросом для всех начинающих программистов и игроков. Оба выбора предлагают уникальные возможности в своей области и требуют анализа личных предпочтений, навыков и интересов.

Узнать особенности фронтенда и бэкенда в формате выбора класса в ММОРПГ вы сможете в этой интересной статье.

Начать игру

#начинающим #фронтенд #бэкенд

Пользовательские директивы во Vue

Во Vue директивы представляют собой специальные html-атрибуты, позволяющие манипулировать DOM-элементами. Все директивы обычно начинаются с буквы v, а затем через дефис идет название директивы.

Помимо встроенных директив (таких как v-model и v-show), Vue также позволяет регистрировать ваши собственные пользовательские директивы. Подробнее о том, как можно создать свои директивы, вы сможете узнать в этом подробном уроке.

#js #vue #веб #фронтенд

​​​Полный курс по Vue.js

Vue.js — это JavaScript-фреймворк, который создал разработчик Эван Ю. В 2012 году Эван работал в Google, где успел попробовать Backbone.js и Angular.

Именно после этого он решил создать собственный фреймворк — сначала просто как пет-проект. И хотя популярность обрушилась на Vue.js ещё в 2015 году, он до сих пор по душе многим разработчиками.

И вот отличный видео-курс, в котором вы рассмотрите работу с Vue.js: https://youtu.be/6wYu4_6hcDY

#фронтенд #vuejs #курс

Полезный справочник для фронтенд-разработчика в 2024 году

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

Для тех, кто предпочитает самообучение, самое то: https://frontendmasters.com/guides/front-end-handbook/2024/

#фронтенд #обучение

Что должен знать начинающий фронтендер?
 
Собрали советы для достижения успеха в профессии от опытного фронтенд-разработчика в одну статью. А также ответили на частые вопросы новичков: от зарплаты и стека до перспектив карьерного роста.

https://tproger.ru/articles/frontend-razrabotka--chem-zanimayutsya-i-skolko-zarabatyvayut-specialisty

#фронтенд #советы

Дорожная карта для фронтенд-разработчиков

Здесь собраны основные темы и технологии, которые нужно изучить для становления настоящим фронтендером.

#дорожнаякарта #веб #фронтенд

Как создать приложение Todo на React

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

Стартуем здесь.

#фронтенд #javascript #react

Верстаем сайт-портфолио для Frontend-разработчика

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

Собственный сайт-визитка помогает продемонстрировать знания разработчика и может стать визуальным резюме с красивыми анимациями и переходами.

Как создать красивый личный веб-сайт на HTML, CSS и JavaScript с разными темами можно посмотреть в этом видео.

#html #js #фронтенд

Как выбрать наилучшую стратегию рендеринга для вашего приложения

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

Сегодня существует множество технологий таких, как генерация статических сайтов (SSG), рендеринг на стороне сервера (SSR), рендеринг на стороне клиента (CSR), инкрементальная статическая регенерация (ISR) и экспериментальный частичный предварительный рендеринг (PPR). Каждая хороша для своих задач. Какую выбрать для вашего проекта, рассказали в этой статье.

#фронтенд

Как правильно работать с DOM в JavaScript в 2025 году?

Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.

1. Получение элементов

Вместо старых getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.

const title = document.querySelector("#title"); // Получает 1 элемент (по id)
const buttons = document.querySelectorAll(".btn"); // Получает список всех кнопок с классом .btn

querySelector и querySelectorAll позволяют находить элементы так же, как в CSS (.класс, #id, input[type="text"] и т. д.). А также querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (NodeList), что логичнее при итерации.

2. Изменение текста и HTML

Всё зависит от того, что именно нужно поменять.

textContent — если надо изменить только текст (без HTML).

title.textContent = "Привет, мир!";

Не используйте innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется innerHTML, убедитесь, что данные проверены.

title.innerHTML = "<strong>Важное сообщение!</strong>";

insertAdjacentHTML — отличная альтернатива innerHTML, если нужно добавить HTML в определённое место, не перезаписывая весь элемент.

title.insertAdjacentHTML("beforeend", "<span> 👋</span>");

3. Изменение классов

Правильный способ через classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.

title.classList.add("highlight"); // Добавит класс
title.classList.remove("hidden"); // Удалит класс
title.classList.toggle("active"); // Переключит класс (если был — уберёт, если не было — добавит)

4. Изменение стилей

Не стоит вручную писать style.cssText, потому что он затирает всё, что было до этого. Используйте style для отдельных свойств.

title.style.color = "red";
title.style.fontSize = "24px";

Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.

title.classList.add("error"); // В CSS заранее определите .error { color: red; }

5. Создание и добавление новых элементов

Лучший способ — использовать createElement, а не innerHTML.

const newDiv = document.createElement("div"); // Создаём элемент <div>
newDiv.textContent = "Новый блок!";
newDiv.classList.add("box");  
document.body.appendChild(newDiv); // Добавляем в конец <body>

Если нужно добавлять элементы в разные места:

appendChild() — добавляет в конец родителя.

prepend() — добавляет в начало.

before() и after() — добавляют перед или после элемента.

title.after(newDiv); // Вставит newDiv сразу после title

// С помощью append() можно сразу добавлять текст и несколько элементов
const container = document.querySelector(".container");
container.append("Просто текст", document.createElement("span"));

6. Удаление элементов

Самый актуальный способ — remove().

newDiv.remove(); // Удалит элемент из DOM

Раньше приходилось делать так (и это было неудобно):

newDiv.parentNode.removeChild(newDiv); // Старый подход

7. Обработчики событий (современный подход)

Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте addEventListener.

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Кнопка нажата!");
});

Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.

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