WebDev+ | Веб-разработка
8.31K subscribers
506 photos
242 videos
10 files
702 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Это MicroCAD. Язык программирования для твоих 3D-проектов.

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

@WebDev_Plus
👍5
CSS-переменные в Tailwind v4+

@WebDev_Plus
7
This media is not supported in your browser
VIEW IN TELEGRAM
Это одно из лучших расширений VS Code.

Копируйте все, что находится в скобках, с помощью горячей клавиши (Alt + a).

Не знаю, как разработчики могут работать без него.

@WebDev_Plus
👍71
This media is not supported in your browser
VIEW IN TELEGRAM
Генератор паролей в хакерской тематике на HTML, CSS и JavaScript

@WebDev_Plus
🔥5
JavaScript: когда использовать геттеры, а когда методы

class UserProfile {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.loginCount = 0;
}

// GETTER: используй для простых вычисляемых свойств без аргументов.
// Читается как существительное: "Какое полное имя?"
get fullName() {
return ${this.firstName} ${this.lastName};
}

// METHOD: используй для тяжелых вычислений, действий
// или когда нужны аргументы.
// Читается как глагол: "Дай форматированное имя."
getFormattedName(includeTitle = false) {
const name = ${this.firstName} ${this.lastName};
return includeTitle ? Mx. ${name} : name;
}
}

// Пример использования
const user = new UserProfile("Alex", "Rivera");

// Getter: лаконичный синтаксис (без скобок) — удобно для доступа к данным
// Не принимает аргументы
console.log(user.fullName); // "Alex Rivera"

// Метод: синтаксис явный (со скобками) — позволяет передавать аргументы
console.log(user.getFormattedName(true)); // "Mx. Alex Rivera"


@WebDev_Plus
6
Простой тип/модуль Redacted для предотвращения логирования/вывода чувствительных значений в логах и телеметрии в TypeScript.

Вдохновлен Effect.

@WebDev_Plus
4
This media is not supported in your browser
VIEW IN TELEGRAM
border-radius развивается в CSS!

Благодаря новому свойству corner-shape.

@WebDev_Plus
👍9
"Ад из React Context" на самом деле не такой уж страшный, и в нём нет ничего плохого.

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

@WebDev_Plus
3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Новая версия Ant Design! Один из самых крутых UI-компонентных наборов:

✓ Архитектура на CSS Variables
✓ Минус поддержка Internet Explorer
✓ Оптимизация под React Compiler
✓ Новый компонент Masonry

github.com/ant-design/ant-design

@WebDev_Plus
👍4👏2
This media is not supported in your browser
VIEW IN TELEGRAM
Это вообще спокойно делается на CSS

- используй маску по бордеру, слои + overflow: hidden или другие трюки.

- градиент анимировать не надо, просто крути слой с градиентом 1:1 🤙

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Css трюк для «блестящей» рамки

- берем псевдоэлемент
- позиционируем его и задаем inset box-shadow
- маскируем под углом через linear-gradient

бонус: используем corner-shape: squircle и крутим рамку при движении курсора

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

@WebDev_Plus
6
Intl.ListFormat это удобный способ собрать список в строку с учетом локали, без самописных костылей.

onst getMessage = (users) => {
const formatter = new Intl.ListFormat("en-US", {
style: "long",
// long (по умолчанию), short, narrow
type: "conjunction"
// conjunction (and), disjunction (or), unit
});
return `Hello ${formatter.format(users)}!`;
};

// Автоматически подстраивает грамматику
console.log(getMessage(["Alice"]));
// → "Hello Alice!"

console.log(getMessage(["Alice", "Bob"]));
// → "Hello Alice and Bob!"

console.log(getMessage(["Alice", "Bob", "Charlie"]));
// → "Hello Alice, Bob, and Charlie!"


По сути, он сам правильно ставит запятые, союзы и форматирует список в зависимости от языка. Удобнее, чем писать if users.length === 2 ... else ... и поддерживать всё вручную.

@WebDev_Plus
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
Мигель сделал расширение для Visual Studio Code

Оно называется Better SVG и делает работу с SVG удобнее.

Постоянный предпросмотр и оптимизация кода в один клик, не выходя из редактора.

@WebDev_Plus
🔥1
В следующей версии ArkType любой Standard Schema будет валидным определением.

Миграция с Zod станет куда проще

@WebDev_Plus
🔥3
Свежая партия апдейтов по TypeScript 7. Новый нативный порт уже подъехал, и выглядит очень бодро.

Что умеет:

• проверяет типы в любом проекте
• поддерживает флаги --build и --incremental
• уже завезли полноценные фичи для редакторов
• и при этом работает примерно в 10 раз быстрее

Короче, можно пробовать прямо сейчас — версия уже в состоянии «юзабельно и приятно».

@WebDev_Plus
👍41
This media is not supported in your browser
VIEW IN TELEGRAM
Нравится этот шрифт?

Это Glass TTY VT220. Ссылка на шрифт - https://github.com/svofski/glasstty

А финальный ретро-вайб дает Cool Retro Term с эффектом послесвечения.

@WebDev_Plus
11
This media is not supported in your browser
VIEW IN TELEGRAM
Эксперимент на WebGL, который показывает, как VAT может масштабироваться прямо в браузере.

Сотни цветов, у каждого тысячи анимированных вершин, и все это рендерится на GPU в реальном времени. Когда прокручиваешь сцену, срабатывает их цикл жизни: они распускаются, растут, задерживаются и постепенно увядают у тебя на пути.

Интересно наблюдать, как такой подход можно будет использовать в будущих WebGL-проектах.

@WebDev_Plus
Ресурс для создания диаграмм на основе вашего TypeScript.

http://tsdiagram.com

@WebDev_Plus
23❤‍🔥1
В React Server Components обнаружена критическая уязвимость, описанная как CVE-2025-55182, которая затрагивает React 19 и использующие его фреймворки.

Исправление опубликовано в версиях React 19.0.1, 19.1.2 и 19.2.1. Рекомендуем немедленно обновить версию.

@WebDev_Plus
1
This media is not supported in your browser
VIEW IN TELEGRAM
Сделай свой веб-интерфейс по-настоящему динозавровым 🦖

Меняй сложный JS на пару строк CSS, чтобы собрать карусели и оживить анимации.

Уже доступно в Chrome, скоро подтянутся и другие браузеры → https://goo.gle/44L646B

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
2