ml5.js — это библиотека машинного обучения для JavaScript, которая даёт доступ к ML-моделям прямо в браузере. С её помощью можно не только использовать готовые модели, но и обучать нейросети локально.

В этом курсе ты узнаешь, как работать с ml5.js, и закрепишь навыки на практике, собирая реальные проекты

@WebDev_Plus

Хочешь создавать лучшие анимации для своего сайта или приложения? Вот 12 принципов, которым нужно следовать:

① Эластичность: деформация для передачи веса и гибкости
② Антиципация: подготовка пользователя перед действием
③ Сцена: привлечение внимания к важному
④ Действие: покадровая анимация или ключевые позы
⑤ Непрерывность: ничего не останавливается и не начинается резко
⑥ Плавность: плавные входы и выходы
⑦ Арки: плавные движения для большего реализма
⑧ Контекст: детали, поддерживающие основное действие
⑨ Время: правильная продолжительность для плавности или скованности
⑩ Преувеличение: акценты для лучшего донесения идеи
⑪ Объем: добавление согласованности, глубины и реализма
⑫ Привлекательность: приятные, запоминающиеся анимации с характером

Вот полная статья с примерами: 12 принципов анимации

@WebDev_Plus

Чит-лист неизменяемых альтернатив 9 методов, изменяющих массивы в JavaScript

@WebDev_Plus

Animate UI только что выпустила свою версию 1.0

✓ React, TypeScript, Tailwind CSS и Motion
✓ Полностью настраиваемая
✓ 170 анимированных иконок

Открытый исходный код: https://github.com/imskyleen/animate-ui

@WebDev_Plus

Эргономика мобильных интерфейсов

Важные кнопки, меню и CTA стоит располагать в «зелёной зоне», а верх лучше оставлять для второстепенных элементов.

@WebDev_Plus

Как отцентрировать элемент с абсолютным позиционированием?

Использовать auto-margin вместе с width/height?
top/left в комбинации с translate?

В современном CSS можно просто использовать place-self: center

@WebDev_Plus

Как работает DNS?

Если вы веб-разработчик или DevOps-инженер, важно понимать, что происходит, когда вы вводите в браузере https://website.com и нажимаете Enter.

Первое, что нужно сделать, — это перевести текстовый домен в машинный числовой IP-адрес. Этим занимается DNS-сервер, который работает как телефонная книга в интернете.

Под капотом участвуют четыре типа серверов: recursive resolver, root name server, TLD name server и authoritative name server.

1. DNS Resolver

Когда вы вводите https://website.com, запрос сначала отправляется на DNS Resolver. Этот сервер общается с другими DNS-серверами, чтобы найти нужный IP-адрес.

2. Root Name Server

DNS Resolver обращается к Root-серверам (их 13), которыми управляют разные организации и делегированы ICANN. Они обрабатывают запросы для TLD (доменных зон верхнего уровня).

Если Root-сервер не находит запись в своих зонах, он указывает на сервер имен для нужного TLD, например .com.

3. TLD Server

Далее DNS Resolver опрашивает TLD-сервер, который возвращает IP авторитетного сервера домена.

4. Authoritative Name Server

После запроса к авторитетному серверу домена тот возвращает IP адрес исходного сервера. На финальном этапе DNS Resolver передаёт этот IP клиенту, и браузер использует его, чтобы загрузить страницу.

Кэширование

Чтобы ускорить загрузку, DNS-записи могут храниться в кэше на разных уровнях:

- браузер,
- ОС,
- роутер,
- провайдер.

Если IP есть в кэше, поиск через DNS Resolver не выполняется, что экономит время.

Подробнее: Что происходит, когда вы вводите URL

@WebDev_Plus

Некоторые React-разработчики думают, что для использования тултипов нужно ставить библиотеку через npm install. Это не так

Для иконок-кнопок можно просто использовать комбинацию атрибута title и текста для скринридеров с классом sr-only из
tailwindcss. В итоге вы получите нативный тултип для лейбла и одновременно улучшите доступность (a11y).

Нюанс: не стоит злоупотреблять атрибутом title для элементов, у которых уже есть лейбл! Я использую его только для интерактивных элементов без лейбла (иконки-кнопки) или для элементов, где текст может обрезаться троеточием (например, ссылки в навигации).

@WebDev_Plus

Брось каплю дождя в любую точку и проследи её путь до океана.

Неожиданно увлекательный и познавательный сайт.

Источник: river-runner-global.samlearner.com

@WebDev_Plus

Новый сайт posthog просто крутой

Создаётся ощущение, что ты пользуешься полноценной операционной системой прямо в браузере.

Особенно радует, когда компании проявляют креатив и добавляют интересные фишки в свои продукты, вместо того чтобы придерживаться скучных стандартных шаблонов :)

@WebDev_Plus

Blendy — это крутая библиотека для JavaScript

Создаёт плавные анимации между элементами.

Совместима с React, Angular, Vue, Svelte

$ pnpm install blendy

@WebDev_Plus

WebGPU это круто.

Код: https://github.com/matsuoka-601/WaterBall

@WebDev_Plus

Webflow + Rive + Taste = одна из лучших целевых страниц, которые я видел.

смотреть

@WebDev_Plus

Системы MCP — это будущее программирования ИИ.

На 30 строках кода на TypeScript вы можете создать такую систему.

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
import { z } from "zod"

// 1. Создаем сервер, который будет управлять коммуникацией между клиентом и сервером
const server = new McpServer({ name: "Weather MCP", version: "1.0.0" })

// 2. Определяем инструменты, чтобы LLM мог выполнять действия через наш сервер
server.tool(
  "fetch-weather", // Название инструмента
  "Tool to fetch the weather of a city", // Описание инструмента
  { city: z.string().describe("City name") }, // Валидация входных данных
  async ({ city }) => { // Колбэк, который вызывается при использовании инструмента
    // Формируем URL для поиска координат города
    const api = new URL("https://geocoding-api.open-meteo.com/v1/search")
    api.searchParams.append("name", city)

    // Получаем данные о городе
    const data = await fetch(api.toString()).then(res => res.json())

    // Извлекаем широту и долготу первого результата
    const { latitude, longitude } = data.results[0]

    // Формируем URL для получения прогноза погоды
    const weatherApi = new URL("https://api.open-meteo.com/v1/forecast")
    weatherApi.searchParams.append("latitude", latitude.toString())
    weatherApi.searchParams.append("longitude", longitude.toString())
    weatherApi.searchParams.append("current", "temperature_2m,precipitation,rain")

    // Получаем данные о погоде
    const weatherData = await fetch(weatherApi.toString()).then(res => res.json())

    // Возвращаем результат в формате JSON
    return {
      content: [{
        type: "text",
        text: JSON.stringify(weatherData, null, 2),
      }]
    }
  },
)

// 3. Прослушиваем соединения от клиента
const transport = new StdioServerTransport()
await server.connect(transport)

@WebDev_Plus