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

Идеальный SEO-инструмент для веб-разработчиков Он позволяет мгновенно проверить, имеют ли доступ к вашему сайту Google-боты и AI-краулеры. Просто введите адрес сайта — и инструмент прогонит несколько проверок, чтобы дать детальный инсайт о crawlability и accessibility. Лёгкий способ убедиться, что ваш сайт оптимизирован под поисковые системы и AI-платформы :) Источник : crawlercheck.com @WebDev_Plus

⚡️ На Stepik вышел курс по Linux Внутри 20+ модулей: от установки Linux и работы с файлами до сетей, прав, дисков, процессов, автоматизации на Bash и многого другого. Всё сразу закрепляется на практике (200+ заданий с автопроверкой). Материал подаётся понятным языком, шаг за шагом, на реальных примерах и с наглядными схемами. После прохождения вы получите сертификат, который можно добавить в резюме. Есть бесплатные демо-уроки для ознакомления. В ближайшие 48 часов курс доступен со скидкой 20%: открыть курс на Stepik (скидка применяется по этой ссылке)

Вышел новый плагин dither для Tailwind — чисто CSS-решение для создания дезеринг-эффектов. Лёгкий в подключении, настраиваемый, работает с разными компонентами и полностью open-source. Даже без глубоких знаний можно легко внедрить его в свой проект, например в Cursor. https://dither.floriankiem.com/ @WebDev_Plus

Если ты используешь Tailwind, не игнорируй селекторы для дочерних элементов. Они упрощают стили и убирают дублирование. Vibe агенты для кодинга до такого не дотягивают. Если ты работаешь с обычным CSS, листай дальше. Сегодня узнал, что некоторые Tailwind разработчики вообще не любят селекторы для потомков. После работы с CSS для меня дико, почему копипастить одну и ту же утилиту на каждый дочерний элемент считается лучше, чем одна аккуратная родительская правило. Хочешь, бери этот совет, хочешь, нет. Мне он сегодня оказался полезен. Даже просто знать о таком варианте уже неплохо. @WebDev_Plus

Я: "Привет, Джо! Что ты думаешь о современном PHP?" Джо: @WebDev_Plus

Есть библиотека с открытым исходным кодом, которая оживляет карты с помощью 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