Продолжая предыдущий пост:
Пользуюсь чем-то похожим уже около 8 лет — на базе Promise.
💡 Довольно крутая идея — использовать генераторы.
Кнопка может получать поток значений и со временем менять свой label.
@WebDev_Plus
Пользуюсь чем-то похожим уже около 8 лет — на базе Promise.
💡 Довольно крутая идея — использовать генераторы.
Кнопка может получать поток значений и со временем менять свой label.
@WebDev_Plus
Совет по JavaScript:
Используйте Web Share API, чтобы заменить все кнопки шаринга одной нативной кнопкой, которая открывает системное окно «Поделиться» на устройстве пользователя.
@WebDev_Plus
Используйте Web Share API, чтобы заменить все кнопки шаринга одной нативной кнопкой, которая открывает системное окно «Поделиться» на устройстве пользователя.
@WebDev_Plus
Разработчикам Laravel
Обычно загрузка файлов — одна из самых частых фич в типичном веб-приложении.
Но в реальных кодовых базах часто встречается неполная валидация загрузки файлов.
Как правило, разработчики используют только правило проверки расширения для определения типа файла.
Это может быть опасно, потому что расширение легко подделывается на стороне клиента.
Поэтому при загрузке файлов всегда стоит использовать правило валидации
Правило валидации
@WebDev_Plus
Обычно загрузка файлов — одна из самых частых фич в типичном веб-приложении.
Но в реальных кодовых базах часто встречается неполная валидация загрузки файлов.
Как правило, разработчики используют только правило проверки расширения для определения типа файла.
Это может быть опасно, потому что расширение легко подделывается на стороне клиента.
Поэтому при загрузке файлов всегда стоит использовать правило валидации
mimes вместе с проверкой расширения для дополнительной безопасности.Правило валидации
mimes фактически проверяет содержимое файла и выбрасывает ValidationException, если содержимое не соответствует заявленным типам.@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Посмотреть всё можно здесь: https://langsagne.vercel.app/
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, разработчики Laravel
Работа с адресами, локациями и геопозициями — ключевая часть современных веб-приложений.
Недавно я наткнулся на пакет для Laravel, который сразу поддерживает большинство этих фич, что может существенно ускорить разработку.
Возможности пакета:
- Добавление связей для адресов доставки и биллинга к любой модели Eloquent
- Возможность отмечать определённый адрес как основной
- Поиск адресов в заданном радиусе
Рекомендую попробовать и поделиться своим опытом.
#laravel #php
@WebDev_Plus
Работа с адресами, локациями и геопозициями — ключевая часть современных веб-приложений.
Недавно я наткнулся на пакет для Laravel, который сразу поддерживает большинство этих фич, что может существенно ускорить разработку.
Возможности пакета:
- Добавление связей для адресов доставки и биллинга к любой модели Eloquent
- Возможность отмечать определённый адрес как основной
- Поиск адресов в заданном радиусе
Рекомендую попробовать и поделиться своим опытом.
#laravel #php
@WebDev_Plus
Mapped types + generic indexing в TypeScript
Форма вашего payload привязана к имени события.
Обратились к неправильному полю внутри обработчика? Ошибка компиляции. 👇
#TypeScript
Форма вашего payload привязана к имени события.
Обратились к неправильному полю внутри обработчика? Ошибка компиляции. 👇
#TypeScript
Привет, разработчики Laravel
Все мы рады новым релизам фреймворка Laravel.
Но что если хочется опробовать изменения до официального релиза?
Не переживайте! В вашем
Это установит последнюю версию фреймворка с всех последних коммитов ветки 13.x, позволяя попробовать новые возможности заранее.
Важно: не коммитьте это и не используйте в продакшене — ветка может быть нестабильной до официального релиза.
#laravel #php
@WebDev_Plus
Все мы рады новым релизам фреймворка Laravel.
Но что если хочется опробовать изменения до официального релиза?
Не переживайте! В вашем
composer.json, в секции require, просто замените версию laravel/framework на 13.x-dev и выполните composer update.Это установит последнюю версию фреймворка с всех последних коммитов ветки 13.x, позволяя попробовать новые возможности заранее.
Важно: не коммитьте это и не используйте в продакшене — ветка может быть нестабильной до официального релиза.
#laravel #php
@WebDev_Plus
Руководство по современному вебу теперь в раннем превью.
ИИ-агенты для кодинга часто опираются на устаревшие паттерны, из-за чего получается перегруженный JavaScript. Google Chrome и Microsoft Edge совместно работают над тем, чтобы это исправить — помогая ИИ генерировать более чистый и современный код с использованием актуальных возможностей платформы. Итог — более качественные веб-приложения для всей экосистемы веба.
Публичный репозиторий: https://github.com/GoogleChrome/modern-web-guidance
@WebDev_Plus
ИИ-агенты для кодинга часто опираются на устаревшие паттерны, из-за чего получается перегруженный JavaScript. Google Chrome и Microsoft Edge совместно работают над тем, чтобы это исправить — помогая ИИ генерировать более чистый и современный код с использованием актуальных возможностей платформы. Итог — более качественные веб-приложения для всей экосистемы веба.
Публичный репозиторий: https://github.com/GoogleChrome/modern-web-guidance
@WebDev_Plus
GitHub
GitHub - GoogleChrome/modern-web-guidance
Contribute to GoogleChrome/modern-web-guidance development by creating an account on GitHub.
👍1
Напоминание: использовать
Функция широко доступна с марта 2022 года.
@WebDev_Plus
structuredClone вместо связки JSON.parse / JSON.stringify.Функция широко доступна с марта 2022 года.
@WebDev_Plus
👍1
🤔 Говорили, что CSS — это просто стилизация
Тем временем CSS с
@WebDev_Plus
Тем временем CSS с
:where() и :has() уже выглядит как SQL-запросы.@WebDev_Plus
👍3😁2
Сопоставленные типы и обобщённая индексация в TypeScript
Форма payload привязана к имени события.
Обратился не к тому полю внутри обработчика — получил ошибку компиляции.
#TypeScript
@WebDev_Plus
Форма payload привязана к имени события.
Обратился не к тому полю внутри обработчика — получил ошибку компиляции.
#TypeScript
@WebDev_Plus
Знаете, что в языке JavaScript можно писать тесты прямо в исходниках
Rstest поддерживает тесты прямо в коде — тесты пишутся рядом с реализацией. При сборке для продакшена тестовый код вырезается. Нулевые издержки на бандл.
Подход в стиле Раста для удобства разработки, теперь в тулчейне JavaScript🦀
https://rstest.rs/config/test/include-source
#JavaScript #Rstest #Rspack
@WebDev_Plus
Rstest поддерживает тесты прямо в коде — тесты пишутся рядом с реализацией. При сборке для продакшена тестовый код вырезается. Нулевые издержки на бандл.
Подход в стиле Раста для удобства разработки, теперь в тулчейне JavaScript
https://rstest.rs/config/test/include-source
#JavaScript #Rstest #Rspack
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Жёсткая графическая библиотека для твоего веба 😘
Кастомизируемая, цепляющая и простая в использовании.
✓ компоненты “скопировал-вставил”
✓ React + Tailwind
→ rosencharts.com
@WebDev_Plus
Кастомизируемая, цепляющая и простая в использовании.
✓ компоненты “скопировал-вставил”
✓ React + Tailwind
→ rosencharts.com
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Рад, что наконец появился markdown-редактор для React, который реально ощущается как отполированный 🔥
MDXEditor — редактор в стиле Notion с поддержкой расширенного markdown, MDX, JSX, таблиц, блоков кода и многого другого.
→ современный опыт редактирования rich-text
→ высоко настраиваемая система плагинов
→ создан для React и MDX-workflow
→ плавный и удобный для разработчиков
Идеально подходит для создания документации, блогов, CMS-платформ и инструментов для написания текста :))
github.com/mdx-editor/editor
@WebDev_Plus
MDXEditor — редактор в стиле Notion с поддержкой расширенного markdown, MDX, JSX, таблиц, блоков кода и многого другого.
→ современный опыт редактирования rich-text
→ высоко настраиваемая система плагинов
→ создан для React и MDX-workflow
→ плавный и удобный для разработчиков
Идеально подходит для создания документации, блогов, CMS-платформ и инструментов для написания текста :))
github.com/mdx-editor/editor
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Бро… хватит вручную писать скелетон лоадеры 🦴
Этот опенсорс веб-компонентс автоматически генерирует скелетоны лоадера из твоего реального UI с множеством настроек.
→ не нужны отдельные skeleton-компоненты
→ генерирует лоадеры из реальной DOM-структуры
→ настраиваемый shimmer-эффект и стили
→ работает с React, Vue, Svelte и другими
Твой реальный UI автоматически превращается в загрузочный skeleton :)
github.com/Aejkatappaja/phantom-ui
@WebDev_Plus
Этот опенсорс веб-компонентс автоматически генерирует скелетоны лоадера из твоего реального UI с множеством настроек.
→ не нужны отдельные skeleton-компоненты
→ генерирует лоадеры из реальной DOM-структуры
→ настраиваемый shimmer-эффект и стили
→ работает с React, Vue, Svelte и другими
Твой реальный UI автоматически превращается в загрузочный skeleton :)
github.com/Aejkatappaja/phantom-ui
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Изучите Clean Architecture, применённую к фронтенду
✓ Использует use case’ы, сервисы и репозитории
✓ Как организованы разные слои
✓ Без классов — всё на функциях
✓ Реализовано на TypeScript
https://dev.to/bespoyasov/clean-architecture-on-frontend-4311
@WebDev_Plus
✓ Использует use case’ы, сервисы и репозитории
✓ Как организованы разные слои
✓ Без классов — всё на функциях
✓ Реализовано на TypeScript
https://dev.to/bespoyasov/clean-architecture-on-frontend-4311
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Вау, это реально DOM 🤭
(Смотрите, я использую Chrome DevTools, чтобы инспектировать DOM)
HTML превращается в
ИСТОЧНИК
@WebDev_Plus
(Смотрите, я использую Chrome DevTools, чтобы инспектировать DOM)
HTML превращается в
<canvas> — это откроет новую эру веб-интерфейсовИСТОЧНИК
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
- Отключите автообновление расширений в VS Code, Cursor и других форках
(macOS:
Cmd + Shift + P → Disable Auto Updating Extensions)- Используйте статический анализатор zizmor для GitHub Actions, чтобы выявлять потенциальные проблемы безопасности
- Используйте actions-up для обновления GitHub Actions до актуальных версий с SHA-pinning
- Добавьте Socket Free Firewall или safe-chain при установке npm-пакетов, чтобы снизить риски атак через цепочку поставок (supply chain attacks)
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - zizmorcore/zizmor: Static analysis for GitHub Actions
Static analysis for GitHub Actions. Contribute to zizmorcore/zizmor development by creating an account on GitHub.
Они только что превратили Claude Code, Codex и Cursor в настоящего senior-разработчика.
Причём бесплатно.
Называется это Superpowers, и проект уже набрал 204 000 звёзд на GitHub.
Проблема агентных инструментов на достаточно крупных проектах всегда одна и та же:
- Они сразу лезут в код
- Отлаживают всё вслепую
- Игнорируют тесты
- А по мере роста проекта начинают галлюцинировать
Superpowers решает эту проблему, навязывая процесс работы senior-инженера:
→ Сначала брейншторминг, и только потом написание кода
→ Строгий TDD (Red → Green) без исключений — если теста нет, код удаляется
→ Параллельная работа через субагентов в изолированных Git worktree
→ Контекст остаётся под контролем даже во время многочасовой автономной работы
Теперь процесс выглядит не как:
Промпт → Код → Молиться
а как:
Brainstorm → Spec → Plan → TDD → Subagents → Review → Ship
Ни строчки кода до появления проходящих тестов.
Поддерживаются Claude Code, Codex, Cursor, Gemini CLI, OpenCode и Copilot CLI.
Полностью Open Source.
Лицензия MIT.
Теперь вам не нужно писать промпты вслепую.
Ваш агент работает как senior-разработчик.
@WebDev_Plus
Причём бесплатно.
Называется это Superpowers, и проект уже набрал 204 000 звёзд на GitHub.
Проблема агентных инструментов на достаточно крупных проектах всегда одна и та же:
- Они сразу лезут в код
- Отлаживают всё вслепую
- Игнорируют тесты
- А по мере роста проекта начинают галлюцинировать
Superpowers решает эту проблему, навязывая процесс работы senior-инженера:
→ Сначала брейншторминг, и только потом написание кода
→ Строгий TDD (Red → Green) без исключений — если теста нет, код удаляется
→ Параллельная работа через субагентов в изолированных Git worktree
→ Контекст остаётся под контролем даже во время многочасовой автономной работы
Теперь процесс выглядит не как:
Промпт → Код → Молиться
а как:
Brainstorm → Spec → Plan → TDD → Subagents → Review → Ship
Ни строчки кода до появления проходящих тестов.
Поддерживаются Claude Code, Codex, Cursor, Gemini CLI, OpenCode и Copilot CLI.
Полностью Open Source.
Лицензия MIT.
Теперь вам не нужно писать промпты вслепую.
Ваш агент работает как senior-разработчик.
@WebDev_Plus
GitHub
GitHub - obra/superpowers: An agentic skills framework & software development methodology that works.
An agentic skills framework & software development methodology that works. - obra/superpowers
Если хотите изучить Python, SQL или Machine Learning, у Kaggle есть бесплатные курсы с сертификатами.
Самое приятное — они сразу переходят к сути и подходят для обучения с нуля. Материал объясняется без предположения, что у вас уже есть какой-то опыт. Отличный вариант для старта.
Каждый курс занимает всего несколько часов. Благодаря этому можно быстро освоить новую тему без серьёзных временных затрат.
Найти их можно на сайте Kaggle в разделе Learn.
https://www.kaggle.com/
@WebDev_Plus
Самое приятное — они сразу переходят к сути и подходят для обучения с нуля. Материал объясняется без предположения, что у вас уже есть какой-то опыт. Отличный вариант для старта.
Каждый курс занимает всего несколько часов. Благодаря этому можно быстро освоить новую тему без серьёзных временных затрат.
Найти их можно на сайте Kaggle в разделе Learn.
https://www.kaggle.com/
@WebDev_Plus