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

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
🧪 Эксперимент по созданию минималистичного языка программирования. Основной фокус — парсинг и исполнение директив, а не набор возможностей самого языка. Проект вдохновлён легендарным c4.
Посмотреть всё можно здесь: https://langsagne.vercel.app/

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, разработчики Laravel

Работа с адресами, локациями и геопозициями — ключевая часть современных веб-приложений.

Недавно я наткнулся на пакет для Laravel, который сразу поддерживает большинство этих фич, что может существенно ускорить разработку.

Возможности пакета:

- Добавление связей для адресов доставки и биллинга к любой модели Eloquent
- Возможность отмечать определённый адрес как основной
- Поиск адресов в заданном радиусе

Рекомендую попробовать и поделиться своим опытом.

#laravel #php

@WebDev_Plus
Mapped types + generic indexing в TypeScript
Форма вашего payload привязана к имени события.
Обратились к неправильному полю внутри обработчика? Ошибка компиляции. 👇

#TypeScript
Привет, разработчики Laravel

Все мы рады новым релизам фреймворка 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
👍1
Напоминание: использовать structuredClone вместо связки JSON.parse / JSON.stringify.
Функция широко доступна с марта 2022 года.

@WebDev_Plus
👍1
🤔 Говорили, что CSS — это просто стилизация
Тем временем CSS с :where() и :has() уже выглядит как SQL-запросы.

@WebDev_Plus
👍3😁2
Сопоставленные типы и обобщённая индексация в TypeScript

Форма payload привязана к имени события.

Обратился не к тому полю внутри обработчика — получил ошибку компиляции.

#TypeScript

@WebDev_Plus
Знаете, что в языке JavaScript можно писать тесты прямо в исходниках

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
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
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
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
2
This media is not supported in your browser
VIEW IN TELEGRAM
Вау, это реально DOM 🤭

(Смотрите, я использую Chrome DevTools, чтобы инспектировать DOM)

HTML превращается в <canvas> — это откроет новую эру веб-интерфейсов

ИСТОЧНИК

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Идеальная настройка лендинг-страницы


@WebDev_Plus
💯8😁1
🚨 Обязательно к внедрению 🚨

- Отключите автообновление расширений в VS Code, Cursor и других форках
(macOS: Cmd + Shift + PDisable 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
Они только что превратили 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
Если хотите изучить Python, SQL или Machine Learning, у Kaggle есть бесплатные курсы с сертификатами.

Самое приятное — они сразу переходят к сути и подходят для обучения с нуля. Материал объясняется без предположения, что у вас уже есть какой-то опыт. Отличный вариант для старта.

Каждый курс занимает всего несколько часов. Благодаря этому можно быстро освоить новую тему без серьёзных временных затрат.

Найти их можно на сайте Kaggle в разделе Learn.

https://www.kaggle.com/

@WebDev_Plus
Кто-то выложил в open source библиотеку со всеми тех-логотипами, которые вам когда-либо могли понадобиться — в виде чистых, оптимизированных SVG.

Называется developer-icons. Вот что в ней есть:
→ 200+ логотипов технологий (React, HTML, JS, Docker и другие) в виде полноценных компонентов
→ гибкая настройка размера, цвета и толщины stroke для каждой иконки
→ масштабирование под любое разрешение без потери качества
→ встроенные light/dark и wordmark-варианты
→ поддержка tree-shaking — в bundle попадут только импортированные иконки

Больше не нужно копаться в Figma-экспортах или вставлять случайные SVG, найденные на Stack Overflow.
npm i developer-icons — импортируете иконку, вставляете в JSX, и готово.
Полностью open source. Лицензия MIT. 2.1k звёзд.

@WebDev_Plus
❤‍🔥1
#Laravel Tip

А вы знали, что Laravel понимает ваши связи между моделями и позволяет писать код намного чище 👇

@WebDev_Plus
👍1
Как frontend-разработчику вырасти в ЗП?

День сурка frontend-разработчика выглядит так

Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов

Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость».

И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

Ты тоже можешь получить оффер в компанию, в которой тебя будут ценить и хорошо платить.


👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

В своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

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

Реклама, erid: 2W5zFGrysSZ ИП Галактионов Тихон Витальевич, ИНН 771618975809