This media is not supported in your browser
VIEW IN TELEGRAM
Blendy — это крутая библиотека для JavaScript
Создаёт плавные анимации между элементами.
Совместима с React, Angular, Vue, Svelte
@WebDev_Plus
Создаёт плавные анимации между элементами.
Совместима с 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 раскрывающиеся блоки можно анимировать двумя строчками кода 🎉
Работает даже с поиском по странице в браузере
React Aria — это библиотека от Adobe для React, которая предоставляет набор доступных UI-примитивов.
@WebDev_Plus
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
RIP всем веб-разработчикам
Сегодня веб-разработчики проснулись и узнали, что теперь нужно учитывать третий макет iOS Safari при растягивании контента на высоту экрана
Даже Apple пока не знает, как с этим справиться
Проблема с наложением хедера особенно заметна при использовании sticky или fixed навигации
Если кто-то найдёт способ заставить контент течь под «компактной» адресной строкой, дайте знать всем😅
Больше информации от bramus о состоянии viewport, ситуация не радостная
https://bsky.app/profile/bram.us/post/3lyvpzesevs2u
@WebDev_Plus
Сегодня веб-разработчики проснулись и узнали, что теперь нужно учитывать третий макет 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 вы можете создать такую систему.
@WebDev_Plus
На 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
🔸 Базовый рабочий процесс
-
-
-
-
-
-
-
🔸 Работа с ветками
-
-
-
-
-
-
🔸 История коммитов
-
-
-
-
-
-
🔸 Отмена изменений
-
-
-
-
-
🔸 Сотрудничество на GitHub
-
-
-
-
-
🔸 Stash и очистка
-
-
-
-
-
🔸 Теги и релизы
-
-
-
-
-
🔸 Продвинутые инструменты
-
-
-
-
-
🔸 Конфигурация
-
-
-
-
-
@WebDev_Plus
-
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 — Удалить неотслеживаемые файлы и папки -
git fork — Создать личную копию репозитория -
git remote add upstream [url] — Добавить оригинальный репозиторий как upstream -
git fetch upstream — Получить обновления с оригинального репозитория -
git push -u origin [branch] — Отправить ветку и привязать её к upstream -
git pull --rebase upstream main — Обновить fork через rebase -
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
Появился новый плагин для Figma — “Figma to Replit”, который позволяет конвертировать ваши дизайны напрямую в HTML, CSS или React.
Ваш макет превращается в рабочее приложение без лишних танцев с кодом, а готовый проект можно сразу отправить в Replit, запустить и даже редактировать онлайн.
И да, всё это абсолютно бесплатно! Попробовать плагин можно здесь: Figma to Replit
@WebDev_Plus
❤9💯3
This media is not supported in your browser
VIEW IN TELEGRAM
Есть библиотека с открытым исходным кодом, которая оживляет карты с помощью 3D-рендеринга в реальном времени.
Она добавляет реалистичную атмосферу и облака, поддерживает 3D-тайлы и геоданные, а также эффекты постобработки вроде тумана и свечения. Основана на Three.js и React Three Fiber
Может пригодится⌨️
@WebDev_Plus
Она добавляет реалистичную атмосферу и облака, поддерживает 3D-тайлы и геоданные, а также эффекты постобработки вроде тумана и свечения. Основана на Three.js и React Three Fiber
Может пригодится
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3💯2🤔1
Если ты используешь Tailwind, не игнорируй селекторы для дочерних элементов. Они упрощают стили и убирают дублирование.
Vibe агенты для кодинга до такого не дотягивают.
Если ты работаешь с обычным CSS, листай дальше.
Сегодня узнал, что некоторые Tailwind разработчики вообще не любят селекторы для потомков.
После работы с CSS для меня дико, почему копипастить одну и ту же утилиту на каждый дочерний элемент считается лучше, чем одна аккуратная родительская правило.
Хочешь, бери этот совет, хочешь, нет. Мне он сегодня оказался полезен. Даже просто знать о таком варианте уже неплохо.
@WebDev_Plus
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
Лёгкий в подключении, настраиваемый, работает с разными компонентами и полностью 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
Он позволяет мгновенно проверить, имеют ли доступ к вашему сайту 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
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Топ-ресурс для изучения алгоритмов программирования. Пошагово объясняет их, с кодом и в визуальном, наглядном виде.
Более 70 алгоритмов на JavaScript, Java и C++:
http://algorithm-visualizer.org
@WebDev_Plus
Более 70 алгоритмов на JavaScript, Java и C++:
http://algorithm-visualizer.org
@WebDev_Plus
❤4
Если нужно импортировать API с пагинацией, движок воркфлоу не требуется. В Laravel это можно решить с помощью рекурсивного диспетчеризации через Job Batches:
@WebDev_Plus
@WebDev_Plus
❤4
Новый селектор if() в CSS позволяет писать условные стили прямо в строке.
Кроме того, можно переключать стили на основе пользовательских свойств
@WebDev_Plus
Кроме того, можно переключать стили на основе пользовательских свойств
@WebDev_Plus
❤1🤔1
I. Виртуальный DOM, reconciliation и производительность рендера в React и других фреймворках
II. Цикл событий в браузере, работа с асинхронностью и оптимизация долгих задач
III. Паттерны управления состоянием (Redux, Zustand, Context API) и их влияние на производительность
IV. Основы веб-безопасности: XSS, CORS, CSRF и работа с токенами
V. Оптимизация фронтенд-производительности: ленивые загрузки, разделение кода, кеширование и критический путь рендеринга
@WebDev_Plus
II. Цикл событий в браузере, работа с асинхронностью и оптимизация долгих задач
III. Паттерны управления состоянием (Redux, Zustand, Context API) и их влияние на производительность
IV. Основы веб-безопасности: XSS, CORS, CSRF и работа с токенами
V. Оптимизация фронтенд-производительности: ленивые загрузки, разделение кода, кеширование и критический путь рендеринга
@WebDev_Plus
💊4