​rxdb – быстрая, локальная БД для JavaScript приложений.

Реактивная база данных для работы в режиме реального времени с кучей дополнительных функций.

⤷ Ссылка на проект

GitHub | #Interesting #JS #DB

How to properly use Typescript, OOP and SOLID in modern web applications

https://medium.com/@aliafsah1988/how-to-properly-use-typescript-oop-and-solid-in-modern-web-applications-e4ef88761154

#coding
#typescript
#oop

Прощайте, useState и useEffect: революция в React

Многие разработчики продолжают использовать хуки useState и useEffect для обновления состояний, но мне такой подход не нравится. Проблема заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению.

Ссылка

#react

💡Для определения min-width и width в CSS достаточно одной функции max

➡️ Поиграть можно здесь

#css #tip by Shripal Soni

#фишка дня

Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.

Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB

Но он не остановился на достигнутом эффекте и пошёл дальше. Я не просто так сначала приложил простое демо. "Фонарик" — это радиальный градиент, координаты центра которого устанавливаются JS-ом. Собственно, база.

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

Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR

1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:

[data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.25), transparent
  );
  background-attachment: fixed;
}

3. Накладываем маску из псевтоэлементов так, чтобы подсветить границу чуть сильнее:

  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;

4. Вы великолепны.

#css #mask #var

Наткнулся на конфиги команды Vercel, которые они используют для Eslint, Prettier и TypeScript

https://github.com/vercel/style-guide

Git Rename Tag Guide

https://phoenixnap.com/kb/git-rename-tag

#coding
#git

Почему PASETO лучше для аутентификации, чем JWT

В веб-разработке одним из наиболее популярных решений является аутентификация на основе токенов. Чаще всего для создания системы аутентификации используют JWT (порой даже там, где это не нужно). Но несмотря на популярность, JWT имеет ряд недостатков. Поэтому появляются новые решения для аутентификации на основе токенов. В этой статье мы рассмотрим PASETO — токен, который был разработан для замены JWT.

Ссылка

#статьи

Основные плагины для пользователей PHPStorm

Это обзор нескольких полезных плагинов для PhpStorm:

1️⃣Nord Theme: Этот плагин предлагает стильную тему оформления для PhpStorm, созданную на основе палитры Nord, которая представляет собой арктические синие оттенки, обеспечивающие чистый и элегантный внешний вид редактора.

2️⃣Laravel Idea: Этот премиум-плагин предоставляет ряд продуктивных функций для разработки Laravel-приложений в PhpStorm, включая автозаполнение маршрутов, поддержку моделей Eloquent, подсказки для правил валидации и генерацию кода.

3️⃣.env Files Support: Плагин обеспечивает поддержку файлов .env, позволяя автозаполнять переменные окружения и легко перемещаться между их использованием в коде и объявлением в файле .env.

4️⃣EditorConfig: Этот плагин помогает обеспечить согласованный стиль кода для разработчиков, работающих над одним проектом, поддерживая конфигурацию кодирования через файл .editorconfig.

5️⃣Collector — A Collection Plugin: Плагин добавляет поддержку коллекций Laravel и предоставляет ряд удобных рефакторингов для улучшения работы с ними.

6️⃣Codeium: AI Autocomplete and Chat: Этот бесплатный плагин предлагает функцию автозаполнения кода с использованием искусственного интеллекта и доступен для различных редакторов, включая PhpStorm.

7️⃣IntelliVue: Данный плагин обеспечивает поддержку Vue.js Single File Components в PhpStorm, добавляя дополнительную функциональность и удобные инструменты для работы с ними.

​Моки, стабы, пустышки, шпионы и фейки. Полный гайд по тестовым дублерам

При написании тестов часто возникают ситуации, когда необходимо смоделировать или заменить определенные зависимости, чтобы изолировать поведение тестируемого кода. Для этого и предназначены тестовые дублеры (Test Doubles).

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

📉 Оптимизация JavaScript: гайд для фронтенд-разработчика

Оптимизация кода включает в себя баланс между улучшением производительности и сохранением читаемости.

Под катом — краткий обзор простых методов оптимизации с примерами и бенчмарками 👇

🔗 Читать

Git: Delete Multiple Branches

https://dev.to/lauragift21/git-delete-multiple-branches-5537

#coding
#git

Vue/Nuxt: Контекст

Контекст — это объект, который предоставляет доступ к различным данным и функциональности в приложении. Контекст может использоваться для передачи данных между компонентами, управления состоянием приложения и выполнения различных операций. Делимся статьей, где автор рассказывает про контекст.

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

#статьи

Lazy Load Vue Component When It Becomes Visible

https://mokkapps.de/blog/lazy-load-vue-component-when-it-becomes-visible

#coding
#vue

Vue Project Directory Structure: Keep It Flat or Group by Domain

https://markus.oberlehner.net/blog/vue-project-directory-structure-keep-it-flat-or-group-by-domain

#coding
#vue

Optimizing A Vue App

https://www.smashingmagazine.com/2022/11/optimizing-vue-app/

#coding
#vue

Improve Vue Performance with v-once + v-memo

https://learnvue.co/articles/v-once-v-memo

#coding
#vue

Remove unused brew dependencies and delete outdated downloads

https://pawelgrzybek.com/remove-unused-brew-dependencies-and-delete-outdated-downloads/

#macos

Deploying a Vite app on GitHub Pages using GitHub Actions with GitHub Secrets

https://dev.to/dwtoledo/deploying-a-vite-app-on-github-pages-using-github-actions-with-github-secrets-1hn0

#coding
#vite
#github
#github_actions