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

Public

Не можете присоединиться? @WebDev_Plus

8.4k Участники

Обновлено: May 14, 2026 at 3:43 AM

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

Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки Связь: @devmangx

Join @WebDev_Plus for exclusive devmangx content and discussions in 12

Рейтинг

Глобальный рейтинг

#456

Рейтинг по языку

#45

Рейтинг по категории

#23

-1

Рост участников (Последние 6 дней)

Всего: 8.4K

Рост за 24ч: -47 1%

Последние посты

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

25 мая 2026 г., 01:23

📷 Photo

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

Все мы рады новым релизам фреймворка Laravel.
Но что если хочется опробовать изменения до официального релиза?
Не переживайте! В вашем composer.json, в секции require, просто замените версию laravel/framework на 13.x-dev и выполните composer update.
Это установит последнюю версию фреймворка с всех последних коммитов ветки 13.x, позволяя попробовать новые возможности заранее.

Важно: не коммитьте это и не используйте в продакшене — ветка может быть нестабильной до официального релиза.

#laravel #php

444

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

25 мая 2026 г., 01:23

🎥 Video

🧪 Эксперимент по созданию минималистичного языка программирования. Основной фокус — парсинг и исполнение директив, а не набор возможностей самого языка. Проект вдохновлён легендарным c4.
Посмотреть всё можно здесь: https://langsagne.vercel.app/

456

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

25 мая 2026 г., 01:23

📷 Photo

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

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

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

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

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

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

#laravel #php

434

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

25 мая 2026 г., 01:23

📷 Photo

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

#TypeScript

421

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

25 мая 2026 г., 01:23

📷 Photo

Совет по JavaScript:

Используйте Web Share API, чтобы заменить все кнопки шаринга одной нативной кнопкой, которая открывает системное окно «Поделиться» на устройстве пользователя.

511

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

25 мая 2026 г., 01:23

📷 Photo

Разработчикам Laravel

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

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

Поэтому при загрузке файлов всегда стоит использовать правило валидации mimes вместе с проверкой расширения для дополнительной безопасности.

Правило валидации mimes фактически проверяет содержимое файла и выбрасывает ValidationException, если содержимое не соответствует заявленным типам.

515

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

25 мая 2026 г., 01:23

🎥 Video

Никакого isLoading. Никакого useState в родительских компонентах.
Просто делаете yield внутри обработчика onClick.

https://stackblitz.com/edit/ericclemmons-loading-button?utm_source=chatgpt.com

552

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

25 мая 2026 г., 01:23

📷 Photo

Продолжая предыдущий пост:

Пользуюсь чем-то похожим уже около 8 лет — на базе Promise.

💡 Довольно крутая идея — использовать генераторы.

Кнопка может получать поток значений и со временем менять свой label.

564

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

25 мая 2026 г., 01:23

📷 Photo

Совет по JavaScript:

Можно использовать метод console.table(), чтобы вывести табличные данные в виде таблицы в консоли.

Ты, скорее всего, каждый день пользуешься console.log().
Но знаешь ли ты, что у объекта console есть и другие полезные методы — например, console.table() и console.error()?

Подробнее — в https://markodenic.tech/use-console-log-like-a-pro/

Ещё больше трюков по JavaScript можно найти https://javascriptquiz.com/

550

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

25 мая 2026 г., 01:23

📷 Photo

⚡️ В TypeScript можно использовать labeled tuples, чтобы на этапе компиляции жёстко задавать точную длину массива.

#TypeScript

550

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

10 мая 2026 г., 14:13

📷 Photo

кто-то выложил в открытый доступ набор компонентов для карт в стиле shadcn для React.

проект называется mapcn. поддерживает темы, полностью композиционный, построен на MapLibre GL, поэтому даёт полный функционал картографии без оплаты Mapbox.

https://github.com/AnmolSaini16/mapcn

501

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

10 мая 2026 г., 14:13

🎥 Video

Переключаем режим редактирования для всего документа

Когда мы изменяем HTML, обычно нужно дождаться обновления страницы, чтобы увидеть изменения. Вы можете сэкономить время, используя designMode, который позволяет мгновенно изменять страницу

Чтобы переключить режим разработки, введите следующий код:
document.designMode="on"

#советы

470

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

10 мая 2026 г., 14:13

🎥 Video

Это https://marketplace.visualstudio.com/items?itemName=Fuzionix.file-tree-extractor для VS Code, которое за секунды превращает вашу структуру папок в правильно отформатированное текстовое представление

Идеально подходит для создания чистой и структурированной документации без лишних усилий

#ресурсы

465

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

10 мая 2026 г., 14:13

📷 Photo

В JavaScript появились немутабельные методы массивов ✨

toSorted(), toReversed(), toSpliced() и with() возвращают новый массив вместо изменения исходного.

Больше не нужен [...arr].sort(), чтобы избежать побочных эффектов.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted

503

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

10 мая 2026 г., 14:13

🎥 Video

Ты, скорее всего, уже гуглил что-то вроде этого:

«как сделать div, чтобы он сжимался под контент»
«ширина элемента по содержимому»
«автоширина, но не на всю ширину»

В CSS есть специальная штука, которая решает это — fit-content.

Что делает:
Заставляет элемент сжиматься под содержимое, но не становиться шире своего контейнера.

Элемент остаётся с display: block (занимает свою строку), но ширина подстраивается под контент вместо растягивания на всю ширину.

Карточка сжимается по ширине текста и идеально центрируется.

.alert-card {
/* 1. Сжать блок строго по содержимому */
width: fit-content;

/* 2. Центровка без вмешательства в родительский контейнер */
margin-inline: auto;

/* 3. Не допускать выхода за границы экрана на мобильных */
max-width: 90vw;

padding: 2rem;
background: var(--bg-surface);
border-radius: 12px;
}

Где это использовать:

- Центрированные кнопки, которые не должны растягиваться на всю ширину
- Карточки, которые подстраиваются под свой контент
- Модальные окна, которые увеличиваются вместе с текстом
- Теги и бейджи
- Элементы навигации

503

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

10 мая 2026 г., 14:13

📷 Photo

TypeScript официально отказывается от JavaScript. Грядущая версия (7.0) полностью переписана на Go, и скорость компиляции выросла в 10 раз.

Годами основной компилятор (tsc) был написан на самом TypeScript и выполнялся в среде Node.js. С точки зрения стратегии это было отличным решением для привлечения разработчиков, но с инженерной стороны — серьёзная проблема для крупных проектов. JavaScript по своей природе однопоточный и сильно ограничен в задачах с интенсивной нагрузкой на процессор.

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

Переход на Go (нативный порт) полностью устраняет эту проблему. Ключевой момент — многопоточность.
Компилятор теперь использует все ядра процессора через горутины. Большой код разбивается на части и анализируется параллельно. Накладные расходы V8 больше не участвуют в процессе.

Эффект не только в удобстве разработки. В корпоративной среде это означает более быстрые пайплайны CI/CD на серверах и заметное снижение затрат на облачные сборки.

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

10 мая 2026 г., 14:13

📷 Photo

Функция calc() в CSS

Позволяет выполнять вычисления прямо в CSS для задания значений свойств. Можно смешивать разные единицы измерения и считать значения на этапе рендеринга.

Важные моменты:
▪️поддерживает базовые операции: сложение, вычитание, умножение, деление
▪️можно комбинировать разные единицы (px, %, vw, rem)
▪️вокруг операторов нужны пробелы (100% - 20px)
▪️работает с множеством свойств: ширина, высота, отступы, паддинги и т.д.

Применение:
подходит для адаптивных интерфейсов, например когда ширина элемента задаётся как calc(100% - ширина боковой панели) или когда нужно делать пропорциональные отступы без хардкода значений.

534

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

10 мая 2026 г., 14:13

📷 Photo

Exclude в TypeScript позволяет вырезать подмножество из объединённого типа

#TypeScript

546

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

10 мая 2026 г., 14:13

📷 Photo

Преобразуй потоковые данные на лету

TransformStream https://developer.mozilla.org/en-US/docs/Web/API/TransformStream между читаемым и записываемым потоками и позволяет модифицировать чанки по мере прохождения через него. Подходит для кодирования, сжатия или парсинга.

523

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

10 мая 2026 г., 14:13

📷 Photo

Планирование выполнения в нужный момент через очередь микрозадач (queueMicrotask())

Запускает функцию обратного вызова после текущей задачи, но до отрисовки. Более предсказуемо, чем setTimeout(fn, 0), легче, чем Промис.

https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask

510

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

28 апр. 2026 г., 00:57

📷 Photo

image-set должен быть первым выбором при работе с фоновыми изображениями

Одна строка CSS решает:
→ переключение между 1x/2x и даже 3x разрешениями
→ фолбэки для современных форматов — AVIF, JPEG, WebP

Ноль JS. Чистый CSS! 💪

✅ Широко доступен с сентября 2023

487

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

28 апр. 2026 г., 00:57

📷 Photo

Генерируй криптографически стойкие UUID прямо в браузере 🔐

crypto.randomUUID() встроен в Web Crypto API, никакой пакет из npm не нужен.

Работает во всех современных браузерах и в Node.js 14.17+.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID

536

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

28 апр. 2026 г., 00:57

📷 Photo

Разбивайте текст на слова и предложения для любого языка

Intl. Segmenter выполняет сегментацию текста с учётом локали, включая CJK-языки, где слова не разделяются пробелами.

Подробнее : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter

532

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

28 апр. 2026 г., 00:57

📷 Photo

⚡️ Про-тип: используйте .at(-1) для более чистого доступа к последнему элементу в JavaScript

#JavaScript

503

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

28 апр. 2026 г., 00:57

📷 Photo

Автоматически балансируй заголовки

text-wrap: balance равномерно распределяет текст по строкам и убирает некрасивые висячие слова. Подходит для заголовков и коротких текстовых блоков.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

572

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

28 апр. 2026 г., 00:57

🎥 Video

Фиксированная ширина ломает адаптивный дизайн, делай так вместо этого:

564

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

28 апр. 2026 г., 00:57

📷 Photo

⚡️ Два подхода для расчёта количества дней в JavaScript: через Date и через Temporal

// ⚠️ Подход через Date — ручная арифметика, небезопасно при DST
const MS_PER_DAY = 1000 * 60 * 60 * 24;
const d1 = new Date("2026-01-01");
const d2 = new Date("2027-01-01");

const diffDays = (d2 - d1) / MS_PER_DAY;
console.log(diffDays); // 365

// ✅ Подход через Temporal — учитывает календарь, безопасно при DST
const t1 = Temporal. PlainDate.from("2026-01-01");
const t2 = Temporal. PlainDate.from("2027-01-01");

const totalDays = t1.until(t2).total({ unit: "days" });
console.log(totalDays); // 365

572

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

28 апр. 2026 г., 00:57

📷 Photo

Смешивай цвета прямо в CSS - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix

color-mix() позволяет смешивать два цвета в любом цветовом пространстве. Можно создавать оттенки, затемнения и динамические палитры без препроцессора.

566

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

28 апр. 2026 г., 00:57

CSS :has() — селектор родителя теперь реально существует 🎯

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

> .card:has(img) { grid-template-rows: auto 1fr; }

Подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has

558

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

28 апр. 2026 г., 00:57

📷 Photo

Проблема: .sort() в JavaScript мутирует массив.

Решение: использовать .toSorted() — он возвращает новый отсортированный массив.

#javascript

589

Showing 30 of 59 posts

Рейтинг

Требуется вход

Отзывы пользователей (0)

Пока нет отзывов. Будьте первым, кто поделится своим опытом!

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

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

Рейтинг

Рост участников (Последние 6 дней)

Последние посты

Рейтинг

Отзывы пользователей (0)

Похожие каналы Telegram

Монолит

Бесконечное Лето 🔰410🔰

Сибирский Гештальт

My Car

Канал Алексея Чепы

Bosfor pictures

Ахербия - все про iHerb 💚

Крупнов

Похожие каналы Telegram

Монолит

Бесконечное Лето 🔰410🔰

Сибирский Гештальт

My Car

Канал Алексея Чепы

Bosfor pictures

Ахербия - все про iHerb 💚

Крупнов

Отзывы пользователей (0)

Последние посты