🔥 Вышла третья часть перевода учебника Patterns.dev, в котором представлен современный взгляд на паттерны проектирования, рендеринга и производительности JavaScript.

🤩 Третья часть посвящена паттернам производительности. Вы узнаете, как оптимизировать последовательность загрузки, чтобы повысить скорость использования вашего приложения.

Самые частые ошибки в TypeScript

Программисты придумали типы, чтобы из-за них страдать — так описал статическую типизацию мой коллега. Но он не совсем прав. Они сильно упростят работу, если знать, как ими пользоваться.

В этом ролике ошибки, которые часто допускают новички, а потом мучаются из-за них (и/или удаляют TypeScript). Также рассказывается о том, как их избежать.

📺 YouTube

WebDEV #видео #TypeScript

​​🚀Oxlint — более быстрая альтернатива ESLint

В этой статье автор расскажет, какие преимущества Oxlint предоставляет по сравнению со своим предшественником ESLint.

Читать...

Шаблоны проектирования JS полный гайд

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

Ссылка

#js

🤔 Вам могут быть не нужны Lodash/Underscore

Обширная коллекция, вдохновленная популярной книгой You Might Not Need jQuery, предоставляет чистые JS-альтернативы почти 100 различным функциям, которые вы найдете в популярных библиотеках, таких как Lodash.

👉 GitHub

Laravel Octane и FrankenPHP

🌐Laravel Octane использует подход жизненного цикла приложения, запуская его один раз и храня его в памяти для быстрого ответа на запросы. Основной мощью Octane является использование серверов приложений, таких как Swoole, OpenSwoole, Roadrunner и FrankenPHP.🚀

🤖FrankenPHP — это сервер приложений, созданный специально для PHP, предлагающий продвинутые функции, такие как поддержка PHP 8.3, режим работников, поддержка современных форматов сжатия, поддержка HTTPS, HTTP/2 и HTTP/3, автоматическая генерация, обновление и отзыв сертификатов HTTPS, а также плавная перезагрузка.

⚙️Процесс установки Laravel Octane с FrankenPHP включает создание нового приложения Laravel, установку Octane и выбор FrankenPHP в качестве сервера. После установки можно запустить сервер с указанием числа работников для эффективной обработки конкурентных запросов.

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

🔘Вёрстка классических радио-кнопок с плавными переходами между состояниями с помощью градиентов: мини-гайд от Софии Валитовой.

👉 Читать

Генерируем компоненты вуюшные нейросеткой

https://www.vue0.dev/

​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: гайд для фронтенд-разработчика

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

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

🔗 Читать