WebDev+ | Веб-разработка

CSS-переменные в Tailwind v4+

@WebDev_Plus

Это MicroCAD. Язык программирования для твоих 3D-проектов.

Ты можешь создать собственный LEGO-блок в нескольких строках кода и экспортировать его в STL для 3D-печати.

@WebDev_Plus

Это одна из самых полезных настроек VS Code:

"typescript.referencesCodeLens.enabled": true

Она показывает прямо в коде, где используется функция или переменная.

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

Ставь лайк. если давно пользуешься🩷

@WebDev_Plus

Лучшая библиотека для аутентификации в веб-проектах получила обновление и завезла новые фичи:

✓ работа без базы (stateless auth)
✓ более гибкая настройка OAuth
✓ ротация JWT-ключей

Поддерживаются React, Vue, Next.js, Nuxt, Astro и другие.

npm install better-auth

@WebDev_Plus

создал JavaScript за 10 дней
написал язык, который стал основой всего веба
соосновал Mozilla и участвовал в создании Firefox
никогда не выпячивал гений и не бегал за вниманием
всегда ставил инженерию выше хайпа
стал CEO, ушел через 11 дней из-за скандала
тихо вернулся с браузером Brave и перевернул тему приватности в интернете
до сих пор пишет код, до сих пор строит, доказывая, что талант не обязан шуметь

Брендан Айк — легенда, которой пользуются каждый день, но почти никогда не благодарят. ❤️

@WebDev_Plus

«Создаёт интерфейсы визуального программирования на основе узлов»

https://github.com/retejs/rete/

@WebDev_Plus

Context-aware CSS эффект свечения/блика на карточке

фишка такая: дублируешь и увеличиваешь иконку. двигаешь её через pointermove. вешаешь feGaussianBlur

https://codepen.io/jh3y/pen/WbwZaNa

@WebDev_Plus

Они выкатили PHP 8.5. И среди новых фич появился отличный пайп-оператор |>.

А разве не говорили, что его похоронили?

@WebDev_Plus

Вкладка «Suspense» в React Devtools

@WebDev_Plus

Старая HTML-фича, о которой до сих пор многие не знают или просто не используют, хотя она может заметно упростить вёрстку.

Кнопка submit не обязана быть дочерним элементом своего <form>.

@WebDev_Plus

React Email 5.0 уже вышел

Лучший способ создавать электронные письма.

✓ Теперь с поддержкой темного режима!
✓ Совместимость с Tailwind 4
✓ 8 новых компонентов

Предварительный просмотр, линтер и многое другое:

→ npx create-email@latest

@WebDev_Plus

Боитесь говорить по-английски? Потренируйтесь с помощью этого ресурса!
Он позволяет вам вести естественные разговоры с искусственным интеллектом.

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

Это бесплатно → http://app.sesame.com

@WebDev_Plus

Проблема: нужно включить пару конкретных настроек VS Code для всех, кто работает над проектом.

Решение: положи настройки в .vscode/settings.json и они автоматически применятся к проекту.

Вот несколько, которые мне нравятся.

{
  // Форматировать при сохранении через Prettier
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    // Чинить все ошибки и предупреждения ESLint при сохранении
    "source.fixAll.eslint": "always",
    // Организовывать импорты при сохранении
    "source.organizeImports": "always"
  },
  // Использовать TypeScript из workspace, а не встроенный в VS Code
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  // Не автоподтягивать barrel-файлы MUI
  "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^@mui/[^/]+$"]
}

@WebDev_Plus

Рекомендация по производительности Postgres: индексируйте все внешние ключи.

Primary key в Postgres индексируется автоматически, но если этот primary key используется как внешний ключ в другой таблице, для него индекс там не создаётся сам по себе - его нужно добавить вручную.

@WebDev_Plus

В Next.js (с cacheComponents) ожидание данных во время выполнения, например params, задает границу между статической и динамической частью страницы.

Переноси await ближе к тому месту, где он реально нужен.

@WebDev_Plus

Await Dictionary продвинулся на Stage 2.7 в TC39

Команда разработки ECMAScript продолжает двигать язык вперед. Сегодня предложение Await Dictionary успешно дошло до Stage 2.7 в комитете TC39.

Одним из активных участников улучшения стал инженер Bloomberg Адам Кутмор, за что коллеги уже успели его поздравить.

Сейчас Promise.all возвращает результаты в виде массива по позициям, что удобно, но не всегда читабельно. Новое предложение Promise.allKeyed даст возможность получать результаты с именованными ключами в объекте. Это упростит код, особенно когда нужно обрабатывать несколько асинхронных операций с разными смыслами.

Фича всё еще в разработке, но выглядит как шаг к более чистому и выразительному асинхронному JavaScript.

@WebDev_Plus

Секретное слово ???, и насладитесь бесплатным кофе ;)

@WebDev_Plus

Хватит делать эти (до смешного простые) ошибки в TypeScript.

Не используй String. Серьезно.

String (с большой буквы) - объект-обертка из JS (плохая идея)
string (с маленькой) - примитивный тип (вот так правильно)

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

@WebDev_Plus

Next.js 16: cacheLife

Настройка времени, в течение которого:

• заранее подгруженные данные могут переиспользоваться на клиенте без повторного запроса
• заранее отрендеренные данные могут переиспользоваться на сервере без повторного рендера

Документация: https://nextjs.org/docs/app/api-reference/functions/cacheLife

@WebDev_Plus

API Popover выводит ваш UI на отдельный верхний слой, так что вам больше не нужно мучиться с управлением фокусом. Плюс оформление затемнения настолько короткое, что помещается прямо сюда:

[popover]::backdrop {
  background: rgb(52, 168, 83);
  backdrop-filter: blur(3px);
}

Создавайте больше, тратя меньше кода → https://goo.gle/3XvDUZk

@WebDev_Plus