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

Есть библиотека с открытым исходным кодом, которая оживляет карты с помощью 3D-рендеринга в реальном времени. Она добавляет реалистичную атмосферу и облака, поддерживает 3D-тайлы и геоданные, а также эффекты постобработки вроде тумана и свечения. Основана на Three.js и React Three Fiber Может пригодится ⌨️ @WebDev_Plus

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

📚Огромный набор практики для frontend-разработчика Подборка материалов для собеседований и прокачки навыков по JS, React, алгосам и Vue Автор собрал задачи со 100+ собеседований за последний год и упаковал в полноценные гайды и сборники 👩‍💻 Топ 200 вопросов по React 📕 Гайд по алгоритмам для frontend 📚 Promise, async/await, асинхронность: задачи и вопросы с собеседований 👩‍💻 Топ вопросов по Vue 👩‍💻 Задачи на React рефакторинг 📅 React-календарь с практикой на каждый день Материалы взяты из @devjora @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

Сегодня отмечается День программиста! 256-й день года выбран не случайно:

Дата праздника объясняется расчетом: 2 (двоичная система исчисления) в степени 8 (количество битов в байте). То есть 2^8= 256. Поэтому в обычный год день программиста 13 сентября, а в високосный — 12 сентября

С праздником, коллеги! ☺️ @IT_Portal

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