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

Типобезопасные переходы между состояниями с корректным автодополнением

// Type-safe state transitions

type IdleState = {
  status: "idle";
  connect: () => ConnectedState;
};

type ConnectedState = {
  status: "connected";
  send: (data: string) => ConnectedState;
  disconnect: () => IdleState;
};

function createApi(): IdleState {
  return {
    status: "idle",
    connect() {
      const id = `${Date.now()}`;
      // establish connection
      return {
        status: "connected",
        send(data) {
          // send data
          console.log(`${data} (${id})`);
          return this;
        },
        disconnect() {
          // close connection
          return createApi();
        },
      };
    },
  };
}

// Usage
const api = createApi();

api.connect().send("Hello world!").disconnect();
// ✅ Works!

api.send("Send without connect");
// ❌ TypeScript Error: Property 'send' does not exist

@WebDev_Plus

Забавный факт про JavaScript: если передать строку с числом в конструктор Date, получится вполне безумный результат

new Date("0") дает Jan 1, 2000
new Date("1") дает Jan 1, 2001 (+1 год, ок...)
new Date("2") дает Feb 1, 2001 (+1 месяц, ??????)

@WebDev_Plus

Почему новички выбирают React вместо Angular?


@WebDev_Plus

Вам сложно создавать дизайны для ваших веб-сайтов или приложений?
Google запустил Stitch, который генерирует пользовательский интерфейс с помощью искусственного интеллекта.
Он бесплатный, а результат впечатляет

@WebDev_Plus

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

Только что вышла версия 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

Знал ли ты?

В 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