​​🧑‍💻Многооконное веб приложение — решение для перегруженных интерфейсов

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

Читать...

​​😍Анти-легаси архитектура для UI приложений

В этой статье мы рассмотрим практический пример того, как реализовать шаблон MVU, сделав UI интерактивным.

Читать...

Линтер Oxlint

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

https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html

Improve how you architect webapps

https://www.patterns.dev/

#coding
#architecture

​​🫥Валидация формы с помощью AJV, Vue.js и TypeScript

В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы.

Читать...

Positronx.io

Positronx.io provides free coding solutions for various programming languages and frameworks such as HTML, CSS, JavaScript, PHP, React, Angular, Laravel, CodeIgniter, and more.

https://www.positronx.io/

#coding

​​​Пишем игру на JS/TS и развиваем навык работы с кодом

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

Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #javascript #петпроект

🔥 Вышла третья часть перевода учебника 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