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

Пошаговые уроки с практическими примерами охватывают ключевые темы: от базовой структуры страницы и стилей до 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».

Хватит использовать библиотеки для рейтингов. Я сделал компонент звездочного рейтинга только на CSS с поддержкой половинок звезд всего в 60 строк. Без JavaScript. Полностью доступный. С плавным hover. Я посмотрел существующие pure-CSS решения и почти везде одни и те же проблемы. Либо нет поддержки половинок, либо завязка на FontAwesome, либо дерганый и нестабильный hover. В итоге я сделал свое решение, используя только radio input’ы, label’ы и SVG-маски. Ключевая идея упирается в ограничение CSS: он умеет выбирать только элементы, идущие после текущего (через ~). А в рейтинге звезд нужно подсвечивать звезды до той, на которую навели курсор. Решение простое: переворачиваем DOM и визуально отражаем его через flex-direction: row-reverse.

.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Порядок в DOM: 5★ → 0.5★ Визуальный порядок: 0.5★ → 5★ Теперь ~ выбирает визуально предыдущие звезды. Для половинок я разделил каждую звезду на два <label> — левую и правую половину. Каждый label использует SVG-маску половинки звезды. nth-of-type(odd) — правая половина nth-of-type(even) — левая половина Почему маска, а не background-image? У background-image нельзя динамически менять цвет заливки SVG. А mask работает как трафарет — сквозь него просто просвечивает background-color. В итоге hover — это просто смена цвета.

/* Подсветка при наведении */
label:hover,
label:hover ~ label {
  background-color: goldenrod;
}

/* Подсветка выбранного */
input:checked ~ label {
  background-color: gold;
}

Простые селекторы. Никаких JS-обработчиков. Отступы между звездами ломают UX hover’а — появляются «мертвые зоны», где ничего не подсвечивается. Фикс такой: расширяем ширину label, но оставляем mask-size прежним. Зазор виден визуально, но зона hover остается непрерывной. Radio-кнопки визуально скрыты, но остаются в DOM. Скринридеры видят: * нормальные radio input’ы * label’ы с aria-label вроде 3 1/2 stars * полноценную навигацию с клавиатуры CSS-only — это не компромисс по доступности. @WebDev_Plus

Перестаньте использовать <select multiple> для выбора нескольких значений. Это худший контрол в HTML для таких задач. К счастью, есть паттерн получше и он вовсе не странный. Самые заметные проблемы у <select multiple>: * Нужно зажимать Ctrl/Cmd для выбора сразу нескольких (немногие вообще знают об этом) * Маленькое окно, плохо сканируется взглядом * Один неправильный клик и можно снять все выделения * Внешний вид сильно зависит от ОС * Стилизовать почти нереально Гораздо понятнее использовать <fieldset> с чекбоксами: * Интеракция очевидна (галка = выбрано) * Все варианты сразу видны и легко сравнимы * Случайно убрать выбор сложнее * Стилизуется как угодно * Отличная доступность для скринридеров

<fieldset>
  <legend>Выберите интересы</legend>

  <label>
    <input type="checkbox" name="interests" value="css">
    CSS
  </label>

  <label>
    <input type="checkbox" name="interests" value="html">
    HTML
  </label>

  <!-- ... -->
</fieldset>

На бэкенде вы получаете массив значений, так же как и с <select multiple>. Например, в Rails это будет примерно так: { interests: ["css", "html"] } По обработке данных ничего не меняется. Меняется только UX — и в лучшую сторону. А поскольку это чекбоксы, стилизовать можно как угодно: * чипсы/теги * карточки * тумблеры * любые кастомные варианты под дизайн Попробуйте сделать что-то подобное с <select multiple>. В следующий раз, когда потянетесь к <select multiple>, остановитесь. Используйте fieldset + checkboxes. Пользователям будет проще @WebDev_Plus

Асинхронное ожидание на разделяемой памяти без блокировки основного потока → [https://goo.gle/49q5wq5] Atomics.waitAsync() теперь доступен в Baseline (Newly Available) и позволяет делать неблокирующую синхронизацию потоков для более плавной производительности. @WebDev_Plus