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

Chrome DevTools теперь умеет тормозить сеть на уровне конкретных запросов. Этого давно хотели. Теперь можно эмулировать медленные сетевые условия не для всей страницы целиком, а для отдельных запросов. Это удобно для проверки как приложение ведет себя если, скажем, отваливается или долго грузится конкретный ресурс — картинка, скрипт или API вызов. @WebDev_Plus

Система управления SSL-сертификатами с поддержкой multi-DNS и REST API https://github.com/fabriziosalmi/certmate @WebDev_Plus

Невозможно распарсить HTML регулярками. Из этого родился самый известный пост на StackOverflow. Регулярные выражения это грамматика третьего типа по Хомскому. Идеально для линейных паттернов, но без способности считать. HTML это грамматика второго типа. Другими словами, там есть вложенность. Чтобы сопоставить закрывающий div, нужно знать сколько открывающих div было до этого. Поэтому идея соблазнительная, но технически регексы не способны корректно парсить HTML. Ты начнешь хитрить и все равно наломаешь дров. Но вам действительно стоит прочитать оригинал поста, он очень смешной и на данный момент является известной частью истории Интернета: https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags @WebDev_Plus

Пошаговые уроки с практическими примерами охватывают ключевые темы: от базовой структуры страницы и стилей до flexbox и адаптивного дизайна, что делает его идеальной отправной точкой для тех, кто хочет уверенно войти в мир веб-разработки ☀️ @WebDev_Plus

JavaScript Proxy сильно выручает, когда нужно ловить обновления стейта.

// Building a reactive store with Proxy
const createReactiveStore = (data, onChange) => {
  return new Proxy(data, {
    set(target, key, value) {
      const oldValue = target[key];
      target[key] = value;
      onChange(key, value, oldValue);
      return true;
    },
  });
};

// Usage
const state = createReactiveStore(
  { count: 0, status: 'idle', isOnline: false },
  (key, newVal, oldVal) => {
    console.log(`🔁 ${key}: ${oldVal} -> ${newVal}`);

    // You can handle business logic or UI updates here
  }
);

state.count = 5;          // 🔁 count: 0 -> 5
state.status = 'loading'; // 🔁 status: idle -> loading
state.isOnline = true;    // 🔁 isOnline: false -> true
state.status = 'error';   // 🔁 status: loading -> error
state.count++;            // 🔁 count: 5 -> 6

@WebDev_Plus

Собрал чат-бота за вечер → заработал 9 000₽ Ничего придумывать не надо. Открыл шаблон → Собрал бота как конструктор → Получил деньги. Сейчас каждый бизнес живёт в онлайне. Всем нужны чат-боты, авторассылки и другие онлайн-сервисы. Но предприниматели сами не будут разбираться в настройке сервисов. Значит тут появляется отличная ниша для заработка. — 9-15 тыс. ₽ за настройку (3–4 часа работы). — до 50 тыс. ₽ в месяц за сопровождение чат-бота и рассылок. Собирается любой чат-бот на конструкторе, где ты просто расставляешь текст клиента по блокам. Как новичку на создании чат-ботов накопить на отдых, машину, квартиру и все хотелки? Начни бесплатное обучение 👉 @other_digital_bot Там ты за пару недель научишься собирать ботов и сможешь получить клиента.

Только что вышла версия 1.4.0 расширения Laravel для VS Code, и в ней подъехала очень приятная штука: теперь artisan:make можно запускать прямо из Command Palette. Меньше переключений контекста, быстрее навигация и генерация — просто вызываешь палитру и создаёшь нужный класс/модель/контроллер на месте. @WebDev_Plus

TypeScript умеет вытаскивать типы через indexed access — помогает не дублировать типы и не объявлять всё заново.

interface UserAPIResponse {
  user: {
    id: number;
    name: string;
    email: string;
    roles: Array<{
      name: string;
      permissions: string[];
      scope: {
        resource: string;
        actions: string[];
      };
    }>;
    metadata: {
      createdAt: string;
      lastLogin: string;
    };
  };
}

// Extract types without redefining
type User = UserAPIResponse["user"];

// Extract Nested Object
type UserMetadata = UserAPIResponse["user"]["metadata"];

// Extract Array Element Type
type Role = UserAPIResponse["user"]["roles"][number];

// Extract from Nested Array
type Permission = Role["permissions"][number];
// OR (direct access)
type Permission2 = UserAPIResponse["user"]["roles"][number]["permissions"][number];

// Extract Nested Object from Nested Array
type RoleScope = UserAPIResponse["user"]["roles"][number]["scope"];
// OR (via Role type)
type RoleScope2 = Role["scope"];

@WebDev_Plus

Открытый и самохостящийся скрин-рекордер для Mac и Windows с неограниченной бесплатной локальной записью, плавными эффектами зума, поддержкой веб-камеры, автоматическими субтитрами и полноценным видеоредактором. Что выберешь ты? Открытый исходный код ✌️ @WebDev_Plus

пик JavaScript-безумия: если вызвать setInterval с таймаутом больше чем INT_MAX, вместо того чтобы кинуть ошибку (что было бы логично), setInterval молча начнет дергать твой колбэк каждую миллисекунду @WebDev_Plus

📱 Держите 6 хороших каналов по искусственному интеллекту и программированию для любого уровня! Выбирай направление: 📱 Нейросети — @neuro_prompt 🤖 AI-инструменты — @ai_prompt 📱 Python — @python_prompt 🤔 InfoSec & Хакинг — @infosec_prompt 👩‍💻 IT Новости — @it_news 😄 IT Мемы — @it_memes Промпты, обучение, шпаргалки и полезные ресурсы на каждую тему!

Знал ли ты? В Node.js есть встроенная утилита loadEnvFile. Она делает ровно то же самое, что и dotenv, но без единой зависимости. По сути, это рантайм-эквивалент CLI-опции --env-file. Вот как с её помощью можно воспроизвести порядок загрузки env-файлов, как это делает Next.js:

import { loadEnvFile } from 'node:process'

export function loadEnv() {
  const nodeEnv = process.env.NODE_ENV || 'development'

  // Load in order of precedence
  const files = [
    `.env.${nodeEnv}.local`,
    nodeEnv === 'test' ? null : '.env.local',
    `.env.${nodeEnv}`,
    '.env',
  ].filter((file): file is string => !!file)

  for (const file of files) {
    try {
      loadEnvFile(file)
      break // Stop after the first successful load
    } catch {}
  }
}

@WebDev_Plus

Крутой проект. Изучай что угодно с DeepTutor. Это персонализированный учебный ассистент на базе ИИ. Это далеко не просто чат-бот. Он помнит твой контекст, прогресс и подстраивается под твой стиль обучения. И в довесок ко всему, проект с открытым исходным кодом: https://github.com/HKUDS/DeepTutor @WebDev_Plus

Страница, на которой вам шаг за шагом объясняют любой код С визуальным руководством по выполнению. Для Python, JavaScript, C, C++ и Java → http://pythontutor.com @WebDev_Plus

Нашёл ещё одну новую фронтенд-игрушку на GitHub. Штука называется Its Hover с лозунгом “Moves for Intent”, хотя по факту она просто слегка дерзко подёргивается, когда наводишь курсор. Забавно выглядит. 🔗[https://github.com/itshover/itshover] @WebDev_Plus

REST API для отправки сообщений WhatsApp https://github.com/felipeDS91/whatsapp-api/ @WebDev_Plus

Сгенерируй headless-бэкенд для e-commerce за считанные секунды 🤯 Есть open-source проект Storecraft, который позволяет быстро поднять полностью AI-управляемый бэкенд интернет-магазина. Ты сам выбираешь стек, базу данных и все необходимые компоненты. @WebDev_Plus

Однострочный приём в JavaScript, чтобы вытащить уникальные значения из массива объектов.

const products = [
  { product: "Laptop", category: "Electronics", price: 999, brand: "Dell" },
  { product: "Mouse", category: "Electronics", price: 25, brand: "Logitech" },
  { product: "Shirt", category: "Clothing", price: 29, brand: "Nike" },
  { product: "Sneakers", category: "Footwear", price: 89, brand: "Adidas" },
  { product: "Watch", category: "Accessories", price: 299, brand: "Fossil" },
  { product: "Jacket", category: "Clothing", price: 179, brand: "Columbia" },
];

// Получить уникальные категории
const categories = [...new Set(products.map((item) => item.category))];
console.log(categories);

// ВЫВОД: [ 'Electronics', 'Clothing', 'Footwear', 'Accessories' ]

@WebDev_Plus

Создавайте красивые карты для вашего сайта или приложения. Бесплатно, без настроек и с помощью одной команды: → http://github.com/AnmolSaini16/mapcn @WebDev_Plus

Новогодний марафон по фронтенд-разработке. Основы вёрстки сайтов +ChatGPT. Участники бесплатного марафона от разработчика с 12-летним опытом Романа Чернова за 7 дней собирают сайт с нуля до публикации с поддержкой кураторов и оформляют портфолио, на которое слетаются клиенты. А главное, получают пошаговый план, как за 2–3 месяца развиться в профессии UX/UI-дизайнер до дохода 1000–2000$ на удалёнке. 👉 Регистрация открыта до 13 января — участие бесплатно. 🎁 В подарок — подборка от практикующих дизайнеров: «30 сервисов, без которых не обойтись в UX/UI».