Вот вам схема жизненного цикла страницы в Nuxt 3 которую прислал @zohan333

How to Compare Objects in JavaScript

https://dmitripavlutin.com/how-to-compare-objects-in-javascript/

#coding
#javascript

Введение в Page Visibility API

Читайте статью ниже, чтобы узнать, что такое Page Visibility API, его назначение, принцип работы и область применения.

👉Читать статью

#javascript #полезное

​​🧑‍💻10 советов по TypeScript для продвинутых пользователей

В этой статье автор расскажет как стать более искусным и эффективным разработчиком TypeScript.

Читать...

SOLID Principles in Vue

https://medium.com/@moein.mirkiani/solid-principles-in-vue-29ecc988f968

How to Add a Single File to GIT LFS?

https://linuxhint.com/add-single-file-to-git-lfs/

#coding
#git

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

1⃣ Templated — коллекция простых HTML/CSS шаблонов
2⃣ Zerotheme — коллекция HTML/CSS шаблонов от дизайнера #Mik
3⃣ Html5up — коллекция элегантных, адаптивных и настраиваемых HTML/CSS шаблонов
4⃣ W3layouts — инициатива Hidayath по предоставлению бесплатных адаптивных шаблонов с поддержкой WordPress
5⃣ html5xcss3 — коллекция шаблонов, разработанных с учетом совместимости с экранами разных размеров

Responsive background images with image-set, the srcset for background-image

https://dev.to/ingosteinke/responsive-background-images-with-image-set-the-srcset-for-background-image-259a

#coding
#css

Build a progressive web app (PWA) with React

https://blog.logrocket.com/building-pwa-react/#from-web-app-pwa-using-workbox

#coding
#react

How to Pass Data Between Pages in react-router-dom V6?

https://plainenglish.io/blog/how-to-pass-data-between-pages-in-react-router-dom-v6

#coding
#react

Sharing Logic Between Components in Different React Renderers

https://www.braingu.com/blog/share-react-component-logic

#coding
#react

How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images

https://webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015t#toc-ghtu-how-to-use-srcset-for-a-set-of-images

#coding
#html

​​🧐Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса

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

Читать...

Канареечный релиз



Одна из ключевых концепций, позволяющих снизить проблемы при деплое кода это канареечный релиз. Работает он так. Новый релиз выкатывается рядом со старым, затем на него переводится какой-то очень небольшой процент пользователей. Если ошибок нет, то постепенно происходит полное перетекание пользователей и остановка старой версии кода. Что нужно чтобы реализовать такой механизм?

Zero Downtime Deploy
Подход при котором запуск новой версии кода происходит без остановки старой. С точки зрения пользователя выглядит так, что сайт не останавливается, а при очередном обновлении страницы начинает работать новая версия. Для реализации требуется правильная работа с балансировщиком нагрузки. Лучше всего такой вид деплоя автоматизирован в Kubernetes, который позволяет настроить его буквально несколькими настройками. Все остальные способы как правило более затратны и требуют либо ручных действий, либо необходимости написания автоматизации самостоятельно.

Обратная совместимость по структурам данных в базах, очередях и т.п.
Zero Downtime Deploy, а следовательно и Канареечный Релиз не может работать без изменения подходов в разработке. Например в таком случае нельзя делать изменения в базе данных без обратной совместимости, иначе будет невозможно одновременно запустить старую и новую версию кода. Совместимость нужна не постоянная, а только на ближайший релиз. Дальше можно менять или удалять то что требовалось для предыдущих релизов.

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

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

Vue3 + TS + Vue Query + Express + tRPC: setup example

https://dev.to/alousilva/vue3-typescript-express-trpc-setup-example-2mlh

#coding
#vue
#typescript

useDelayedRender hook and its usage

const useDelayedRender = delay => {
  const [delayed, setDelayed] = useState(true);
  useEffect(() => {
    const timeout = setTimeout(() => setDelayed(false), delay);
    return () => clearTimeout(timeout);
  }, []);
  return fn => !delayed && fn();
};

const DataComponent = ({ url, fallback, fallbackDelay }) => {
  const [data, setData] = useState(null);
  const delayedRender = useDelayedRender(fallbackDelay);

  useEffect(() => {
    let unmounted = false;
    fetch(url)
      .then(res => res.json())
      .then(data => !unmounted && setData(data))
      .catch(console.error);
    return () => (unmounted = true);
  }, []);

  return data ? <pre>JSON.stringify(data, null, 2)</pre> : delayedRender(() => fallback);
};

#coding
#react

react-query vs SWR и избавимся ли мы от Redux?

Давайте сначала познакомимся с обоеми библиотеками, чтобы сравнить их и убедиться, что лучше. react-query и SWR — это две популярные библиотеки для управления состоянием данных в React-приложениях. Они обе предназначены для облегчения работы с данными, получаемыми с сервера, но имеют некоторые различия в функциональности и подходах.

https://habr.com/ru/articles/758360/

#js #react #ru

💬 Чат фронтендеров

Navigate to a URL with Query Strings (Search Params) in React Router

https://ultimatecourses.com/blog/navigate-to-url-query-strings-search-params-react-router

#coding
#react

SSR в React

https://cyberkesa.ru/react-ssr/

#coding
#react

Рендеринг в интернете (Rendering on the Web)

https://vladislaveremeev.gitbook.io/qa_bible/seti-i-okolo-nikh/rendering-v-internete-rendering-on-the-web

#coding
#web