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 помощью шаблонов

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

Читать...

​Как создать и развернуть библиотеку компонентов Vue в NPM

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

В этой статье автор подробно разобрал, как использовать этот лайфхак на практике:

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

#vue

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

#css #transform #бородач

Yes, here are 3 ways to create a multiple layout system with Vue 3

https://itnext.io/3-ways-to-create-a-multiple-layouts-system-vue-3-b24c0736b7bb

#coding
#vue

Разработка приложений для всех категорий пользователей

Основные принципы веб доступности. Как семантическая верстка, дополнительные атрибуты элементов и инструменты для тестирования доступности помогут вам в этом.

https://www.sitepoint.com/designing-for-all-the-basics-principles-of-web-accessibility/

Архитектура универсальных веб-приложений

Смелый доклад Глеба Михеева на Innopolis Frontend Meetup о том, почему нативная разработка не нужна, что нет смысла разрабатывать сервисные проекты на нативном стеке, сжигая десятки миллионов, усложняя CI/CD и все процессы выкатки релизов. Смотрите доклад, если интересны ответы на вопросы:

🔸Как натянуть веб на мобилку?
🔸Как это работает?
🔸Какие основные сомнения и сопротивления возникают у разработчиков и какие изменения потребует ваша архитектура, чтобы разрабатывать универсальные веб-приложения?