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

Хотите отображать PDF-файлы на своем веб-сайте? Обратите внимание на это Работает с React, Svelte, Solid и Vanilla JavaScript.

$ npm install @pdfslick/react

@WebDev_Plus

Поймал CORS-ошибку и она тебе всё ломает? Тебе пригодится один трюк в DevTools. @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

Библиотека Javascript для создания потоков данных без зависимостей https://github.com/jerosoler/Drawflow/ @WebDev_Plus

У тебя сейчас мозг взорвётся. Кликаешь по компоненту в React, и сразу открывается его код в VS Code С такой штукой пишешь код заметно быстрее @WebDev_Plus

Javascript Tip Более удобный способ найти элемент с конца массива Чистый и быстрый способ найти элемент с конца массива — использовать метод findLast().

const logs = [
  { category: 'error', description: 'Error 1', timestamp: 1705276800000 },
  { category: 'warning', description: 'Warning 1', timestamp: 1705363200000 },
  { category: 'error', description: 'Error 2', timestamp: 1705449600000 },
  { category: 'info', description: 'Info 1', timestamp: 1707523200000 },
];

const lastError = logs.findLast(log => log.category === 'error');
console.log(lastError);
// 👉 { category: 'error', description: 'Error 2', timestamp: 1705449600000 }

Если нужен не сам элемент, а индекс, то можно использовать метод findLastIndex(). Оба этих метода поддерживаются всеми популярными браузерами и JS-рантаймами с сентября 2022 года 🎉 @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

👩‍💻 В сеть вывалилась гигантская куча курсов и книг Держи сотни гигабайт свежих уроков, и каждую неделю мы подкидываем ещё! • 1612 ГБ — DevOps • 1402 ГБ — Python • 1300 ГБ — C, C++ • 1815 ГБ — Frontend • 1515 ГБ — Backend • 898 ГБ — ИБ, Хакинг • 996 ГБ — Kotlin, Swift • 212 ГБ — JavaScript • 315 ГБ — Flutter • 820 ГБ — Go, PHP • 419 ГБ — Java, Rust • 648 ГБ — GameDev • 517 ГБ — Windows, Linux • 998 ГБ — Дизайн (UX/UI) • 617 ГБ — Нейросети (ML/RL) • 546 ГБ — БД (SQL & NoSQL) • 687 ГБ — Аналитика данных • 115 ГБ — QA-тестирование Подписывайся и не плати за то, что можно получить бесплатно

В Chrome DevTools завезли классное обновление для CSS Теперь, когда наводишь курсор на любое CSS-свойство в DevTools, отображается не только описание, но и информация из Baseline — она показывает, насколько хорошо это свойство поддерживается разными браузерами. Появились метки вроде «Широко поддерживается», «Ограниченная поддержка» и «Недавно стало доступно». Очень полезное обновление для фронтенд-разработчиков: можно мгновенно проверить поддержку нужного свойства, не покидая DevTools. Спасибо команде ChromiumDev за этот апдейт. Маленькое изменение, а польза огромная :) @WebDev_Plus

Этот инструмент проверяет производительность твоего сайта. Он сканирует все страницы и выставляет оценку каждой. Похоже на Lighthouse, но с обзором всего сайта целиком. Запусти вот так:

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

@WebDev_Plus

👩‍💻 IT теперь в Telegram! Программисты и TechLead'ы из FAANG создали этот канал для обучения их стажёров и джунов, чтобы подготовить их к работе в топовых компаниях. Курсы, новости, гайды, советы, мемы, книги — всё, что входит в дневной рацион разработчика. Забирай доступ: @it_matrix

Валидатор паролей с использованием HTML, CSS и JavaScript Код: тык @WebDev_Plus

Одна из самых крутых штук, которые можно сделать с TypeScript: обрати внимание, что подсказки автодополнения зависят от входных данных функции-билдера. @WebDev_Plus

Получить размеры экрана через простой calc()? Да, можно https://css-tip.com/screen-dimension/ Мы всё ещё ждём, когда Firefox подтянется, и тогда этот кусок кода станет любимчиком у многих разработчиков. (Пока что есть другой способ с лучшей поддержкой.) @WebDev_Plus

Не нужно разбирать строки через [...spread] или .split() Используй Intl.Segmenter API — он доступен во всех JS-рантаймах. @WebDev_Plus

Разработчик из factory droids сделал Chrome-расширение, которое помогает навести порядок в браузере. Tab Stash позволяет «спрятать» десятки (а то и сотни) вкладок, чтобы вернуться к ним позже и наконец-то добраться до заветного tab zero 😰 Установить: Tab Stash в Chrome Web Store Исходники: github.com/iannuttall/tab-stash @WebDev_Plus

Создавай SVG-графики для своего сайта без библиотек Импортируй данные из Excel, CSV или вводи вручную. Доступно 8 разных типов, и всё это можно сделать за пару секунд. https://makegraph.app/ @WebDev_Plus

Разбирай HTML-ввод с помощью нового метода parseHTMLUnsafe() → https://goo.gle/4mXOH9d Теперь этот статический метод входит в Baseline. Он создаёт новый экземпляр Document из HTML-строки и при необходимости может выполнять очистку (санитизацию) содержимого. @WebDev_Plus

Ранее Postman лёг, потому что упал AWS. Похоже, пора попробовать что-то полегче — Yaak. ✓ Сделан на React, Rust и Tauri ✓ Поддерживает REST, GraphQL и WebSockets ✓ Без облаков и трекинга ✓ Полностью оффлайн Работает на Windows, macOS и Linux → github.com/mountain-loop/yaak @WebDev_Plus

Бесплатные поддомены для персональных сайтов https://github.com/is-a-dev/register/ @WebDev_Plus