WebDev+ | Веб-разработка
8.3K subscribers
508 photos
242 videos
10 files
703 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Брось каплю дождя в любую точку и проследи её путь до океана.

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

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

@WebDev_Plus
4
This media is not supported in your browser
VIEW IN TELEGRAM
Новый сайт posthog просто крутой

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

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

@WebDev_Plus
6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Blendy — это крутая библиотека для JavaScript

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

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

$ pnpm install blendy


@WebDev_Plus
4🔥2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
В следующем релизе React Aria раскрывающиеся блоки можно анимировать двумя строчками кода 🎉

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


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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Webflow + Rive + Taste = одна из лучших целевых страниц, которые я видел.

смотреть

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

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

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

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

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
😁8💊1
Системы 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
5
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
Please open Telegram to view this post
VIEW IN TELEGRAM
6
This media is not supported in your browser
VIEW IN TELEGRAM
Веб-дизайнеры, внимание

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

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

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
7
This media is not supported in your browser
VIEW IN TELEGRAM
Есть библиотека с открытым исходным кодом, которая оживляет карты с помощью 3D-рендеринга в реальном времени.

Она добавляет реалистичную атмосферу и облака, поддерживает 3D-тайлы и геоданные, а также эффекты постобработки вроде тумана и свечения. Основана на Three.js и React Three Fiber

Может пригодится ⌨️

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3💯2🤔1
Я: "Привет, Джо! Что ты думаешь о современном PHP?"

Джо:

@WebDev_Plus
😁6🤡1
Если ты используешь Tailwind, не игнорируй селекторы для дочерних элементов. Они упрощают стили и убирают дублирование.

Vibe агенты для кодинга до такого не дотягивают.

Если ты работаешь с обычным CSS, листай дальше.

Сегодня узнал, что некоторые Tailwind разработчики вообще не любят селекторы для потомков.

После работы с CSS для меня дико, почему копипастить одну и ту же утилиту на каждый дочерний элемент считается лучше, чем одна аккуратная родительская правило.

Хочешь, бери этот совет, хочешь, нет. Мне он сегодня оказался полезен. Даже просто знать о таком варианте уже неплохо.

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Вышел новый плагин dither для Tailwind — чисто CSS-решение для создания дезеринг-эффектов.

Лёгкий в подключении, настраиваемый, работает с разными компонентами и полностью open-source. Даже без глубоких знаний можно легко внедрить его в свой проект, например в Cursor.

https://dither.floriankiem.com/

@WebDev_Plus
4
This media is not supported in your browser
VIEW IN TELEGRAM
Идеальный SEO-инструмент для веб-разработчиков

Он позволяет мгновенно проверить, имеют ли доступ к вашему сайту Google-боты и AI-краулеры.

Просто введите адрес сайта — и инструмент прогонит несколько проверок, чтобы дать детальный инсайт о crawlability и accessibility.

Лёгкий способ убедиться, что ваш сайт оптимизирован под поисковые системы и AI-платформы :)

Источник : crawlercheck.com

@WebDev_Plus
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Visual Studio Code теперь умеет автоматически обрабатывать TODO-комментарии в коде. С новой функцией и помощью GitHub Copilot можно за два клика решать задачи и сразу создавать PR.

@WebDev_Plus
3
This media is not supported in your browser
VIEW IN TELEGRAM
Топ-ресурс для изучения алгоритмов программирования. Пошагово объясняет их, с кодом и в визуальном, наглядном виде.

Более 70 алгоритмов на JavaScript, Java и C++:

http://algorithm-visualizer.org

@WebDev_Plus
4
Если нужно импортировать API с пагинацией, движок воркфлоу не требуется. В Laravel это можно решить с помощью рекурсивного диспетчеризации через Job Batches:

@WebDev_Plus
4