Как отцентрировать элемент с абсолютным позиционированием?
Использовать
В современном CSS можно просто использовать
@WebDev_Plus
Использовать
auto-margin вместе с width/height?top/left в комбинации с translate?В современном CSS можно просто использовать
place-self: center@WebDev_Plus
👍7
Как работает DNS?
Если вы веб-разработчик или DevOps-инженер, важно понимать, что происходит, когда вы вводите в браузере
Первое, что нужно сделать, — это перевести текстовый домен в машинный числовой IP-адрес. Этим занимается DNS-сервер, который работает как телефонная книга в интернете.
Под капотом участвуют четыре типа серверов: recursive resolver, root name server, TLD name server и authoritative name server.
1. DNS Resolver
Когда вы вводите
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
Если вы веб-разработчик или 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
❤1
Шпаргалка по самым важным методам объекта в JS
👉 Гайды по JavaScript
// Получает собственные ключи объекта
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
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Разработчики тратят на чтение кода больше времени, чем на его написание
Вот лайфхак:
I. Открой любой репозиторий
II. Замени .com на .dev в URL
III. Просматривай код прямо в VS Code
Кодь с удовольствием😁
@WebDev_Plus
Вот лайфхак:
I. Открой любой репозиторий
II. Замени .com на .dev в URL
III. Просматривай код прямо в VS Code
Кодь с удовольствием
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤11
This media is not supported in your browser
VIEW IN TELEGRAM
Некоторые React-разработчики думают, что для использования тултипов нужно ставить библиотеку через npm install. Это не так
Для иконок-кнопок можно просто использовать комбинацию атрибута title и текста для скринридеров с классом sr-only из
tailwindcss. В итоге вы получите нативный тултип для лейбла и одновременно улучшите доступность (a11y).
Нюанс: не стоит злоупотреблять атрибутом title для элементов, у которых уже есть лейбл! Я использую его только для интерактивных элементов без лейбла (иконки-кнопки) или для элементов, где текст может обрезаться троеточием (например, ссылки в навигации).
@WebDev_Plus
Для иконок-кнопок можно просто использовать комбинацию атрибута title и текста для скринридеров с классом sr-only из
tailwindcss. В итоге вы получите нативный тултип для лейбла и одновременно улучшите доступность (a11y).
Нюанс: не стоит злоупотреблять атрибутом title для элементов, у которых уже есть лейбл! Я использую его только для интерактивных элементов без лейбла (иконки-кнопки) или для элементов, где текст может обрезаться троеточием (например, ссылки в навигации).
@WebDev_Plus
❤1👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Брось каплю дождя в любую точку и проследи её путь до океана.
Неожиданно увлекательный и познавательный сайт.
Источник: river-runner-global.samlearner.com
@WebDev_Plus
Неожиданно увлекательный и познавательный сайт.
Источник: river-runner-global.samlearner.com
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Новый сайт posthog просто крутой
Создаётся ощущение, что ты пользуешься полноценной операционной системой прямо в браузере.
Особенно радует, когда компании проявляют креатив и добавляют интересные фишки в свои продукты, вместо того чтобы придерживаться скучных стандартных шаблонов :)
@WebDev_Plus
Создаётся ощущение, что ты пользуешься полноценной операционной системой прямо в браузере.
Особенно радует, когда компании проявляют креатив и добавляют интересные фишки в свои продукты, вместо того чтобы придерживаться скучных стандартных шаблонов :)
@WebDev_Plus
❤6🔥3
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