REST API для отправки сообщений WhatsApp

https://github.com/felipeDS91/whatsapp-api/

@WebDev_Plus

Страница, на которой вам шаг за шагом объясняют любой код

С визуальным руководством по выполнению.

Для Python, JavaScript, C, C++ и Java

→ http://pythontutor.com

@WebDev_Plus

Крутой проект. Изучай что угодно с DeepTutor.

Это персонализированный учебный ассистент на базе ИИ.

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

И в довесок ко всему, проект с открытым исходным кодом: https://github.com/HKUDS/DeepTutor

@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

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

@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

Только что вышла версия 1.4.0 расширения Laravel для VS Code, и в ней подъехала очень приятная штука:

теперь artisan:make можно запускать прямо из Command Palette.

Меньше переключений контекста, быстрее навигация и генерация — просто вызываешь палитру и создаёшь нужный класс/модель/контроллер на месте.

@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

Невозможно распарсить HTML регулярками.

Из этого родился самый известный пост на StackOverflow.

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

HTML это грамматика второго типа. Другими словами, там есть вложенность. Чтобы сопоставить закрывающий div, нужно знать сколько открывающих div было до этого.

Поэтому идея соблазнительная, но технически регексы не способны корректно парсить HTML. Ты начнешь хитрить и все равно наломаешь дров.

Но вам действительно стоит прочитать оригинал поста, он очень смешной и на данный момент является известной частью истории Интернета:

https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags

@WebDev_Plus

Система управления SSL-сертификатами с поддержкой multi-DNS и REST API

https://github.com/fabriziosalmi/certmate

@WebDev_Plus

Chrome DevTools теперь умеет тормозить сеть на уровне конкретных запросов.

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

Это удобно для проверки как приложение ведет себя если, скажем, отваливается или долго грузится конкретный ресурс — картинка, скрипт или API вызов.

@WebDev_Plus

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

@WebDev_Plus

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


@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

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

// 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

«Есть ли тип для настройки промежуточного ПО/прокси в Next.js?»

Да

@WebDev_Plus

Классный браузерный ASCII-арт редактор

Позволяет рисовать и генерировать ASCII-арт прямо в браузере. По сути, это для кастомных баннеров в README, шапок для терминала, вывода CLI или хакерских визуалок для твоих проектов :)

https://files.littlebird.com.au/ascii-sketch.html

@WebDev_Plus

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

Это полностью опенсорсный тул, который собирает в одном месте техданные, инфру и базовую инфу по безопасности :)

@WebDev_Plus