Как упростить работу с React при помощи useLoaderData
Традиционный подход с использованием
Вместо этого стоит использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.
Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/
#react
Традиционный подход с использованием
useState и useEffect для получения данных в React часто приводит к проблемам. Загвоздка заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.Вместо этого стоит использовать хук useLoaderData из React Router. Он позволяет вынести логику загрузки данных в отдельную функцию-загрузчик. Это упрощает код, позволяет отделить логику загрузки от отображения и избавляет от необходимости отслеживать состояние загрузки.
Подробнее о том, как настроить useLoaderData: https://nuancesprog.ru/p/18962/
#react
👍11👎1
Переменные в CSS
CSS-переменные или пользовательские свойства — это значения, которые можно определить один раз и использовать многократно в коде.
В этой статье автор подробно рассмотрит, как они работают и приведёт примеры создания тем, адаптивного дизайна и повышения кроссбраузерной совместимости.
#статья #css
CSS-переменные или пользовательские свойства — это значения, которые можно определить один раз и использовать многократно в коде.
В этой статье автор подробно рассмотрит, как они работают и приведёт примеры создания тем, адаптивного дизайна и повышения кроссбраузерной совместимости.
#статья #css
👍7😁3
Создание приложения погоды на Vue.js
Отличный урок как раз к выходным. Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, Open Weather Map API и restful api для получения данных о погоде.
Подробнее:
https://youtu.be/JLc-hWsPTUY
#видео #vue
Отличный урок как раз к выходным. Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, Open Weather Map API и restful api для получения данных о погоде.
Подробнее:
https://youtu.be/JLc-hWsPTUY
#видео #vue
❤12👍1👎1
Короткий код для длиннокота
Зарядите ваш указательный палец и приготовьтесь крутить колёсико мыши. Проверьте насколько хватит вашего терпения. Этот длиннокот поможет вам узнать, сколько пикселей вы уже прокрутили листая страницу, а также подскажет вам его рост.
Он реализован на препроцессорах Pug и Scss, а также использует чистый JavaScript. Поиграться и посмотреть код можно здесь:
https://codepen.io/jkantner/pen/QdJMmr
#codepen
Зарядите ваш указательный палец и приготовьтесь крутить колёсико мыши. Проверьте насколько хватит вашего терпения. Этот длиннокот поможет вам узнать, сколько пикселей вы уже прокрутили листая страницу, а также подскажет вам его рост.
Он реализован на препроцессорах Pug и Scss, а также использует чистый JavaScript. Поиграться и посмотреть код можно здесь:
https://codepen.io/jkantner/pen/QdJMmr
#codepen
This media is not supported in your browser
VIEW IN TELEGRAM
Астрологи объявили неделю фронтенд-разработчика 🔮
🎃В канун Дня Всех Святых Старшие Арканы развернули инфраструктуру на ваших серверах — выясните, что они предсказывают!
Раскидать жизнь по ассетам или разобраться с техдолгом?
Сделайте скриншот экрана — узнайте, какая карта определит вашу судьбу в профессии и какой амулет поможет избежать бед 🧿
Скрин, скрин!
🎃В канун Дня Всех Святых Старшие Арканы развернули инфраструктуру на ваших серверах — выясните, что они предсказывают!
Раскидать жизнь по ассетам или разобраться с техдолгом?
Сделайте скриншот экрана — узнайте, какая карта определит вашу судьбу в профессии и какой амулет поможет избежать бед 🧿
Скрин, скрин!
😁12👎1
ИИ для конвертации Figma в код
Познакомьтесь с уникальным ИИ сервисом, который преобразует ваш дизайн из Figma в рабочий код на HTML + CSS и React.
Забудьте о ручной вёрстке элементов: этот инструмент справляется с любым дизайном и выдаёт качественный код всего за пару кликов.
#react #figma
Познакомьтесь с уникальным ИИ сервисом, который преобразует ваш дизайн из Figma в рабочий код на HTML + CSS и React.
Забудьте о ручной вёрстке элементов: этот инструмент справляется с любым дизайном и выдаёт качественный код всего за пару кликов.
#react #figma
🤣23👍3🔥1
Аутентификация в React с Firebase
Аутентификация — ключевая часть многих веб-приложений, обеспечивающая безопасный доступ пользователей к их учётным записям и данным.
В этой статье рассматривается, как с помощью Firebase и React создать базовую систему аутентификации.
#react #firebase
Аутентификация — ключевая часть многих веб-приложений, обеспечивающая безопасный доступ пользователей к их учётным записям и данным.
В этой статье рассматривается, как с помощью Firebase и React создать базовую систему аутентификации.
#react #firebase
🤔4👍1
Читатели Типичного прислали ну очень много работ для конкурса «Лучший пет-проект 2023»
Вчера мы закрыли прием работ и отобрала из них только 25 лучших. Голосование начнется 6 ноября, поэтому у вас есть время чтобы не торопясь ознакомится с нашим шорт-листом:
https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie-nachnyotsya-6-noyabrya
#diy #конкурс
Вчера мы закрыли прием работ и отобрала из них только 25 лучших. Голосование начнется 6 ноября, поэтому у вас есть время чтобы не торопясь ознакомится с нашим шорт-листом:
https://tproger.ru/articles/luchwij-pet-proekt-2023-golosovanie-nachnyotsya-6-noyabrya
#diy #конкурс
Tproger
Лучший пет-проект 2023: голосование начнётся 6 ноября
Перенесли голосование за лучший пет-проект на 6 ноября, на неделю вперёд, чтобы все успели ознакомиться с работами.
👍7
SSR и SEO в SPA
Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега
Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.
#spa #seo #vue
Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега
<head> менялось в зависимости от URL. Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.
#spa #seo #vue
❤5👎1
Интерактивный гайд по CRDT
Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.
В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.
#typescript #crdt
Благодаря CRDT можно легко создавать приложения с совместным редактированием, такие как Google Docs, но без необходимости подключаться к серверу.
В этой серии статей мы узнаем, что такое CRDT. Затем напишем простой редактор, объединим его с более сложными структурами данных и, наконец, применим то, что мы выучили, чтобы создать совместный редактор, похожий на Paint в онлайне.
#typescript #crdt
🔥7👍3😁2🤔2
Веб-компоненты в 2023
Большинство фронтенд-разработчиков не понимают, что такое веб-компоненты и зачем они нужны. Стандарту уже несколько лет, но разработчики продолжают его игнорировать.
Автор, который занимается веб-разработкой уже 20 лет и сейчас возглавляет команду по созданию открытой платформы на основе веб-компонентов, решил поделится опытом и раскрыть мифы об этой технологии.
#html #dom
Большинство фронтенд-разработчиков не понимают, что такое веб-компоненты и зачем они нужны. Стандарту уже несколько лет, но разработчики продолжают его игнорировать.
Автор, который занимается веб-разработкой уже 20 лет и сейчас возглавляет команду по созданию открытой платформы на основе веб-компонентов, решил поделится опытом и раскрыть мифы об этой технологии.
#html #dom
👍16👎1
Как типизировать Vuex Store
Лидерство среди глобальных хранилищ состояний занимает Pinia, и она даже стала стандартом по умолчанию для всей экосистемы Vue. Но Vuex все ещё жив и активно используется.
В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.
В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.
#vue #pinia #typescript
Лидерство среди глобальных хранилищ состояний занимает Pinia, и она даже стала стандартом по умолчанию для всей экосистемы Vue. Но Vuex все ещё жив и активно используется.
В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.
В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.
#vue #pinia #typescript
👍6👎2
Создание портфолио
В статье автор рассказывает о том, как он с нуля создал свой персональный сайт на React и Tailwind CSS. Он делится кодом основных компонентов: навигационной панели, главной страницы, разделов образования и проектов.
Прочитав статью, вы узнаете, как добавить анимацию текста, иконки социальных сетей и настроить маршрутизацию. Но самое главное — вы сможете вдохновиться и создать свой собственный уникальный сайт-визитку.
#react #tailwind #портфолио
В статье автор рассказывает о том, как он с нуля создал свой персональный сайт на React и Tailwind CSS. Он делится кодом основных компонентов: навигационной панели, главной страницы, разделов образования и проектов.
Прочитав статью, вы узнаете, как добавить анимацию текста, иконки социальных сетей и настроить маршрутизацию. Но самое главное — вы сможете вдохновиться и создать свой собственный уникальный сайт-визитку.
#react #tailwind #портфолио
🤣16🔥3👍1
Соединение без сервера
Если вы мечтаете создать сервис видеосвязи, совместного редактирования документов или онлайн-игру — вам необходимо разобраться с WebRTC.
Эта технология позволяет веб-браузерам и мобильным приложениям устанавливать соединения типа peer-to-peer напрямую, минуя центральный сервер.
Автор статьи рассказывает о технологии и даёт рекомендации о том, как с помощью сигнального сервера организовать обмен данными.
#webrtc #javascript #браузеры
Если вы мечтаете создать сервис видеосвязи, совместного редактирования документов или онлайн-игру — вам необходимо разобраться с WebRTC.
Эта технология позволяет веб-браузерам и мобильным приложениям устанавливать соединения типа peer-to-peer напрямую, минуя центральный сервер.
Автор статьи рассказывает о технологии и даёт рекомендации о том, как с помощью сигнального сервера организовать обмен данными.
#webrtc #javascript #браузеры
❤8🤔2👍1