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

CSS-совет: создайте красивый портрет из текста всего несколькими строками CSS. 😄

@WebDev_Plus

Веб-дизайнеры, внимание

Появился новый плагин для Figma — “Figma to Replit”, который позволяет конвертировать ваши дизайны напрямую в HTML, CSS или React.

Ваш макет превращается в рабочее приложение без лишних танцев с кодом, а готовый проект можно сразу отправить в Replit, запустить и даже редактировать онлайн.

И да, всё это абсолютно бесплатно! Попробовать плагин можно здесь: Figma to Replit

@WebDev_Plus

Git & GitHub Command Cheat Sheet

🔸Базовый рабочий процесс

- git init — Инициализировать новый Git-репозиторий
- git clone [url] — Склонировать проект с GitHub
- git add [file] — Добавить конкретный файл в staged
- git add . — Добавить все изменения в staged
- git commit -m "сообщение" — Зафиксировать staged изменения
- git push origin [branch] — Отправить коммиты на удалённый репозиторий
- git pull origin [branch] — Получить последние изменения

🔸Работа с ветками

- git branch — Список всех веток
- git branch [name] — Создать новую ветку
- git checkout [branch] — Переключиться на ветку
- git merge [branch] — Слить ветку с текущей
- git branch -d [branch] — Удалить ветку локально
- git push origin --delete [branch] — Удалить ветку на удалённом репозитории

🔸История коммитов

- git log --oneline — Краткая история коммитов
- git log --graph --oneline --all — Визуальная история с ветками
- git show [commit] — Показать изменения конкретного коммита
- git diff — Показать несохранённые изменения
- git diff --staged — Показать staged изменения
- git blame [file] — Кто и когда изменял каждую строку

🔸Отмена изменений

- git reset --soft HEAD^ — Отменить коммит, оставить изменения в staged
- git reset --hard HEAD^ — Полностью удалить последний коммит
- git checkout -- [file] — Отменить изменения в рабочей директории
- git revert [commit] — Создать новый коммит, который отменяет изменения
- git clean -fd — Удалить неотслеживаемые файлы и папки

🔸Сотрудничество на GitHub

- git fork — Создать личную копию репозитория
- git remote add upstream [url] — Добавить оригинальный репозиторий как upstream
- git fetch upstream — Получить обновления с оригинального репозитория
- git push -u origin [branch] — Отправить ветку и привязать её к upstream
- git pull --rebase upstream main — Обновить fork через rebase

🔸Stash и очистка

- git stash — Временно сохранить изменения
- git stash pop — Восстановить последний stash
- git stash list — Просмотреть все stash
- git stash drop — Удалить последний stash
- git prune — Удалить недостижимые объекты

🔸Теги и релизы

- git tag [name] — Создать легковесный тег
- git tag -a [version] -m "сообщение" — Создать аннотированный тег
- git push origin --tags — Отправить теги на удалённый репозиторий
- git tag -d [name] — Удалить локальный тег
- git push origin --delete tag [name] — Удалить тег на удалённом репозитории

🔸Продвинутые инструменты

- git bisect — Бинарный поиск коммита с багом
- git rebase -i [commit] — Интерактивный rebase (правка истории)
- git cherry-pick [commit] — Применить конкретный коммит к текущей ветке
- git reflog — Показать журнал ссылок (инструмент восстановления)
- git worktree add — Добавить дополнительную рабочую директорию

🔸Конфигурация

- git config --global user.name "Имя" — Установить глобальное имя пользователя
- git config --global user.email "email" — Установить глобальный email
- git config --global core.editor "code --wait" — Сделать VS Code редактором по умолчанию
- git config --global alias.co checkout — Создать алиас для команды
- git config --list — Показать все настройки Git

@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

RIP всем веб-разработчикам

Сегодня веб-разработчики проснулись и узнали, что теперь нужно учитывать третий макет iOS Safari при растягивании контента на высоту экрана

Даже Apple пока не знает, как с этим справиться

Проблема с наложением хедера особенно заметна при использовании sticky или fixed навигации

Если кто-то найдёт способ заставить контент течь под «компактной» адресной строкой, дайте знать всем 😅

Больше информации от bramus о состоянии viewport, ситуация не радостная
https://bsky.app/profile/bram.us/post/3lyvpzesevs2u

@WebDev_Plus

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

смотреть

@WebDev_Plus

В следующем релизе React Aria раскрывающиеся блоки можно анимировать двумя строчками кода 🎉

height: var(--disclosure-panel-height);
transition: height 200ms;

Работает даже с поиском по странице в браузере

React Aria — это библиотека от Adobe для React, которая предоставляет набор доступных UI-примитивов.

@WebDev_Plus

WebGPU это круто.

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

@WebDev_Plus

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

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

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

$ pnpm install blendy

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

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

@WebDev_Plus

Разработчики тратят на чтение кода больше времени, чем на его написание

Вот лайфхак:

I. Открой любой репозиторий
II. Замени .com на .dev в URL
III. Просматривай код прямо в VS Code

Кодь с удовольствием 😁

@WebDev_Plus

Шпаргалка по самым важным методам объекта в JS

// Получает собственные ключи объекта
Object.keys({ a: 1, b: 2 })
// → ["a", "b"]

// Получает значения свойств объекта
Object.values({ a: 1, b: 2 })
// → [1, 2]

// Преобразует объект в массив пар [ключ, значение]
Object.entries({ a: 1, b: 2 })
// → [["a", 1], ["b", 2]]

// Преобразует пары [ключ, значение] обратно в объект
Object.fromEntries([["a", 1], ["b", 2]])
// → { a: 1, b: 2 }

// Копирует свойства одного или нескольких объектов
Object.assign({}, { a: 1 }, { b: 2 })
// → { a: 1, b: 2 }

// Замораживает объект (изменения запрещены)
const obj = { a: 1 }
Object.freeze(obj)
obj.a = 2
// → { a: 1 }

// Запечатывает объект (нельзя добавлять или удалять свойства)
const user = { name: "Ana" }
Object.seal(user)
delete user.name // игнорируется
user.age = 30 // игнорируется
// user → { name: "Ana" }

// Проверяет, является ли свойство собственным (не унаследованным)
Object.hasOwn({ a: 1 }, "a")
// → true

👉 Гайды по JavaScript

Как работает 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

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

Чувак создал супер-производительный CSV-редактор, полностью на HTML canvas

Инструмент масштабируется под гигабайты данных и работает, как Excel. Мгновенно обрабатывает огромные файлы с максимальной производительностью. 🎉

@WebDev_Plus