​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). Каждая хороша для своих задач. Какую выбрать для вашего проекта, рассказали в этой статье.

#фронтенд