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

How can I refresh already deleted Git remote branches?

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360006539480-How-can-I-refresh-already-deleted-Git-remote-branches-

#coding
#git
#phpstorm

Move files in S3 bucket to folder based on file name pattern

https://stackoverflow.com/questions/60571081/move-files-in-s3-bucket-to-folder-based-on-file-name-pattern

#coding
#aws

Using custom events in React

https://blog.logrocket.com/using-custom-events-react/#building-custom-event-react

#coding
#react

Pure CSS Custom Checkbox Style

https://moderncss.dev/pure-css-custom-checkbox-style/

#coding
#css

Представляем атомарный дизайн в Vue.js

Атомный дизайн — это методология создания систем дизайна, которая разбивает пользовательские интерфейсы на небольшие повторно используемые компоненты.
Рассмотрим:
1. Атомы.
2. Молекулы.
3. Организмы.
4. Шаблоны.
5. Страницы.

👉 @sWebDev

Object.freeze

Статический метод Object.freeze() замораживает объект. Замораживание объекта предотвращает расширение и делает существующие свойства недоступными для записи и настройки. Замороженный объект больше нельзя изменить: нельзя добавить новые свойства, нельзя удалить существующие свойства, нельзя изменить их перечисляемость, конфигурируемость, возможность записи или значение, а прототип объекта нельзя переназначить.

#практика

Использование класса для работы с элементами DOM

Класс DOMHelper содержит методы для скрытия и отображения элементов на веб-странице.

JavaScript test

​​🔍Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов

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

Читать...