Создавай SVG-графики для своего сайта без библиотек

Импортируй данные из Excel, CSV или вводи вручную.
Доступно 8 разных типов, и всё это можно сделать за пару секунд.

https://makegraph.app/

@WebDev_Plus

Не нужно разбирать строки через [...spread] или .split()

Используй Intl.Segmenter API — он доступен во всех JS-рантаймах.

@WebDev_Plus

Получить размеры экрана через простой calc()? Да, можно

https://css-tip.com/screen-dimension/

Мы всё ещё ждём, когда Firefox подтянется, и тогда этот кусок кода станет любимчиком у многих разработчиков.

(Пока что есть другой способ с лучшей поддержкой.)

@WebDev_Plus

Одна из самых крутых штук, которые можно сделать с TypeScript:

обрати внимание, что подсказки автодополнения зависят от входных данных функции-билдера.

@WebDev_Plus

Валидатор паролей с использованием HTML, CSS и JavaScript

Код: тык

@WebDev_Plus

Этот инструмент проверяет производительность твоего сайта.

Он сканирует все страницы и выставляет оценку каждой.

Похоже на Lighthouse, но с обзором всего сайта целиком.

Запусти вот так:

npx unlighthouse --site <твой-сайт>

@WebDev_Plus

В Chrome DevTools завезли классное обновление для CSS

Теперь, когда наводишь курсор на любое CSS-свойство в DevTools, отображается не только описание, но и информация из Baseline — она показывает, насколько хорошо это свойство поддерживается разными браузерами.

Появились метки вроде «Широко поддерживается», «Ограниченная поддержка» и «Недавно стало доступно».

Очень полезное обновление для фронтенд-разработчиков: можно мгновенно проверить поддержку нужного свойства, не покидая DevTools.

Спасибо команде ChromiumDev за этот апдейт. Маленькое изменение, а польза огромная :)

@WebDev_Plus

Этот крошечный утилитарный модуль на TypeScript делает твой код типобезопасным, переиспользуемым и полностью выводимым по типам

Паттерн TypeScript для чистой и типобезопасной выборки данных

type KeyOf<T> = Extract<keyof T, string>;

const mapData = <T extends object, K extends KeyOf<T>>(
  data: readonly T[],
  key: K,
) => data.map((item) => item[key]);

const categories = [
  { id: 1, name: "Clothing" },
  { id: 2, name: "Footwear" },
] as const;

const variants = [
  { id: 1, name: "Red - Large" },
  { id: 2, name: "Blue - Medium" },
] as const;

const sizes = [
  { id: 1, label: "Small" },
  { id: 2, label: "Medium" },
] as const;

// Типобезопасно, неизменно и полностью выводится по типам
console.log(mapData(categories, "name")); // ["Clothing", "Footwear"]
console.log(mapData(variants, "name"));   // ["Red - Large", "Blue - Medium"]
console.log(mapData(sizes, "label"));     // ["Small", "Medium"]

@WebDev_Plus

У тебя сейчас мозг взорвётся.

Кликаешь по компоненту в React, и сразу открывается его код в VS Code

С такой штукой пишешь код заметно быстрее

@WebDev_Plus

Библиотека Javascript для создания потоков данных без зависимостей

https://github.com/jerosoler/Drawflow/

@WebDev_Plus

С 34-м днем рождения, HTML-теги.

29 октября 1991 года Тим Бернерс-Ли опубликовал документ под названием HTML Tags.

В нем было описание первых 18 тегов HTML: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…, <address>, <hp1>…, <dl>, <dt>, <dd>, <ul>, <li>, <menu> и <dir>.

@WebDev_Plus

Поймал CORS-ошибку и она тебе всё ломает?
Тебе пригодится один трюк в DevTools.

@WebDev_Plus

Хотите отображать PDF-файлы на своем веб-сайте? Обратите внимание на это

Работает с React, Svelte, Solid и Vanilla JavaScript.

$ npm install @pdfslick/react

@WebDev_Plus

Мой любимый терминал — Warp. Я до сих пор нахожу в нём мелкие фишки, которые помогают работать быстрее. Знал, что там есть встроенный файловый менеджер?

@WebDev_Plus

Вот небольшой совет, не про Angular.

Не обязательно держать submit/reset кнопки прямо внутри формы. Можно повесить на кнопку атрибут form.
Этот атрибут связывает кнопку с нужной формой, и тогда её можно разместить где угодно в документе, независимо от её позиции.

Надеюсь, пригодится.

@WebDev_Plus

Array.with() для аккуратных неизменяемых обновлений

@WebDev_Plus

Разработчик экспериментирует с HTMX и нашёл способ комбинировать JSX, TypeScript и кастомные HTML-элементы… без привычной фронтовой сборки. Стили и небольшой клиентский код он просто инлайнит прямо с сервера. Звучит странновато, но есть плюсы: всё лежит рядом, не нужно возиться с бандлерами, а работа идёт быстрее.

Фокус в одном трюке: клиентские функции можно передавать в <script> как есть, забрав их исходник через Function.prototype.toString(). То же работает и для CSS. Получается, будто пишешь фронт прямо в браузере, но все плюшки TypeScript и JSX получаешь на сервере.

Метод, конечно, не для гигантских приложений. Но для маленьких виджетов, кастомных элементов или отдельных фич без тонны зависимостей — вполне себе вариант. Минификацию можно отдать CDN или вообще забить, если кода немного. С внешними библиотеками помогут import maps.

Автор задумки признаёт: это не серебряная пуля. Просто ещё один инструмент, который делает разработку чуть приятнее, когда он уместен.

@WebDev_Plus

Свежак в ChromeDevTools! Отладка полной performance-трейсы с помощью Gemini.

Записал трейс, а дальше просто общаешься с Gemini про весь этот трейс: связанные Performance Insights и даже данные из поля. И главное.. не надо заранее выделять контекст, Gemini сам разберется

@WebDev_Plus

Менять HTML на лету еще никогда не было так просто.

Bun HTMLRewriter API дает низкоуровневый контроль для парсинга, модификации и улучшения HTML через CSS-селекторы, и все это на бешеной скорости. Реализация в Bun основана на Cloudflare lol-html.

Можно переписывать контент из строк, Blob, ArrayBuffer, файлов или даже HTTP-ответов. Есть тонкое управление элементами, текстовыми нодами и комментариями. Идеально, когда нужно подправить HTML прямо в процессе обработки.

@WebDev_Plus