Они выкатили PHP 8.5. И среди новых фич появился отличный пайп-оператор |>.
А разве не говорили, что его похоронили?
@WebDev_Plus
А разве не говорили, что его похоронили?
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Context-aware CSS эффект свечения/блика на карточке
фишка такая: дублируешь и увеличиваешь иконку. двигаешь её через pointermove. вешаешь feGaussianBlur
https://codepen.io/jh3y/pen/WbwZaNa
@WebDev_Plus
фишка такая: дублируешь и увеличиваешь иконку. двигаешь её через pointermove. вешаешь feGaussianBlur
https://codepen.io/jh3y/pen/WbwZaNa
@WebDev_Plus
❤16👍3🔥2
«Создаёт интерфейсы визуального программирования на основе узлов»
https://github.com/retejs/rete/
@WebDev_Plus
https://github.com/retejs/rete/
@WebDev_Plus
❤6👍3
создал JavaScript за 10 дней
написал язык, который стал основой всего веба
соосновал Mozilla и участвовал в создании Firefox
никогда не выпячивал гений и не бегал за вниманием
всегда ставил инженерию выше хайпа
стал CEO, ушел через 11 дней из-за скандала
тихо вернулся с браузером Brave и перевернул тему приватности в интернете
до сих пор пишет код, до сих пор строит, доказывая, что талант не обязан шуметь
Брендан Айк — легенда, которой пользуются каждый день, но почти никогда не благодарят.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18🆒5
Лучшая библиотека для аутентификации в веб-проектах получила обновление и завезла новые фичи:
✓ работа без базы (stateless auth)
✓ более гибкая настройка OAuth
✓ ротация JWT-ключей
Поддерживаются React, Vue, Next.js, Nuxt, Astro и другие.
@WebDev_Plus
✓ работа без базы (stateless auth)
✓ более гибкая настройка OAuth
✓ ротация JWT-ключей
Поддерживаются React, Vue, Next.js, Nuxt, Astro и другие.
npm install better-auth
@WebDev_Plus
Это одна из самых полезных настроек VS Code:
Она показывает прямо в коде, где используется функция или переменная.
Удобно, когда проект большой и нужно быстро понять зависимости и связи в коде.
Ставь лайк. если давно пользуешься🩷
@WebDev_Plus
"typescript.referencesCodeLens.enabled": true
Она показывает прямо в коде, где используется функция или переменная.
Удобно, когда проект большой и нужно быстро понять зависимости и связи в коде.
Ставь лайк. если давно пользуешься
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
Это MicroCAD. Язык программирования для твоих 3D-проектов.
Ты можешь создать собственный LEGO-блок в нескольких строках кода и экспортировать его в STL для 3D-печати.
@WebDev_Plus
Ты можешь создать собственный LEGO-блок в нескольких строках кода и экспортировать его в STL для 3D-печати.
@WebDev_Plus
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Это одно из лучших расширений VS Code.
Копируйте все, что находится в скобках, с помощью горячей клавиши (Alt + a).
Не знаю, как разработчики могут работать без него.
@WebDev_Plus
Копируйте все, что находится в скобках, с помощью горячей клавиши (Alt + a).
Не знаю, как разработчики могут работать без него.
@WebDev_Plus
👍7❤1
JavaScript: когда использовать геттеры, а когда методы
@WebDev_Plus
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
Вдохновлен Effect.
@WebDev_Plus
❤4
"Ад из React Context" на самом деле не такой уж страшный, и в нём нет ничего плохого.
Если глубокая вложенность раздражает, просто поставь размер табуляции в 0, если можешь.
@WebDev_Plus
Если глубокая вложенность раздражает, просто поставь размер табуляции в 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
✓ Архитектура на 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
- используй маску по бордеру, слои + 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
- берем псевдоэлемент
- позиционируем его и задаем inset box-shadow
- маскируем под углом через linear-gradient
бонус: используем corner-shape: squircle и крутим рамку при движении курсора
https://codepen.io/jh3y/pen/WbwyGBb
@WebDev_Plus
❤6
Intl.ListFormat это удобный способ собрать список в строку с учетом локали, без самописных костылей.
По сути, он сам правильно ставит запятые, союзы и форматирует список в зависимости от языка. Удобнее, чем писать if users.length === 2 ... else ... и поддерживать всё вручную.
@WebDev_Plus
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
Оно называется Better SVG и делает работу с SVG удобнее.
Постоянный предпросмотр и оптимизация кода в один клик, не выходя из редактора.
@WebDev_Plus
🔥1