Сохраняй себе 5 топовых тулз для веб-разработчиков
Эти штуки реально ускоряют работу, делают код чище и экономят время. Полезный набор, который стоит держать под рукой.
SVG Flag Icons — nucleoapp.com/svg-flag-icons
EmbedPDF — embedpdf.com
FliiipBook — fliiipbook.com
use-mcp — github.com/modelcontextprotocol/use-mcp
DayPicker — daypicker.dev
Пригодятся в любом проекте
@WebDev_Plus
Эти штуки реально ускоряют работу, делают код чище и экономят время. Полезный набор, который стоит держать под рукой.
SVG Flag Icons — nucleoapp.com/svg-flag-icons
EmbedPDF — embedpdf.com
FliiipBook — fliiipbook.com
use-mcp — github.com/modelcontextprotocol/use-mcp
DayPicker — daypicker.dev
Пригодятся в любом проекте
@WebDev_Plus
👍5❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Большинство разработчиков об этом даже не догадываются… любую веб-страницу можно превратить в текстовый редактор одной строкой JavaScript
Просто вбей в консоль браузера:
И сразу получаешь страницу, где весь контент можно редактировать. Можно включать и выключать этот режим в любой момент, работает во всех популярных браузерах — Chrome, Firefox, Safari, Edge.
Удобно для быстрых мокапов, теста идей по UI или просто чтобы поиграться.
Напоминание: некоторые из самых мощных фич в технике годами лежат прямо на поверхности🙂
@WebDev_Plus
Просто вбей в консоль браузера:
document.designMode = "on";
И сразу получаешь страницу, где весь контент можно редактировать. Можно включать и выключать этот режим в любой момент, работает во всех популярных браузерах — Chrome, Firefox, Safari, Edge.
Удобно для быстрых мокапов, теста идей по UI или просто чтобы поиграться.
Напоминание: некоторые из самых мощных фич в технике годами лежат прямо на поверхности
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
😁4❤3👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь выучить React, Svelte, Vue или Angular?
Вот страница, где сравнивается синтаксис всех четырёх фреймворков. Если уже знаешь один, то легко разберёшься в другом:
→ http://component-party.pages.dev
@WebDev_Plus
Вот страница, где сравнивается синтаксис всех четырёх фреймворков. Если уже знаешь один, то легко разберёшься в другом:
→ http://component-party.pages.dev
@WebDev_Plus
👍4
ml5.js — это библиотека машинного обучения для JavaScript, которая даёт доступ к ML-моделям прямо в браузере. С её помощью можно не только использовать готовые модели, но и обучать нейросети локально.
В этом курсе ты узнаешь, как работать с ml5.js, и закрепишь навыки на практике, собирая реальные проекты
@WebDev_Plus
В этом курсе ты узнаешь, как работать с ml5.js, и закрепишь навыки на практике, собирая реальные проекты
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь создавать лучшие анимации для своего сайта или приложения? Вот 12 принципов, которым нужно следовать:
① Эластичность: деформация для передачи веса и гибкости
② Антиципация: подготовка пользователя перед действием
③ Сцена: привлечение внимания к важному
④ Действие: покадровая анимация или ключевые позы
⑤ Непрерывность: ничего не останавливается и не начинается резко
⑥ Плавность: плавные входы и выходы
⑦ Арки: плавные движения для большего реализма
⑧ Контекст: детали, поддерживающие основное действие
⑨ Время: правильная продолжительность для плавности или скованности
⑩ Преувеличение: акценты для лучшего донесения идеи
⑪ Объем: добавление согласованности, глубины и реализма
⑫ Привлекательность: приятные, запоминающиеся анимации с характером
Вот полная статья с примерами: 12 принципов анимации
@WebDev_Plus
① Эластичность: деформация для передачи веса и гибкости
② Антиципация: подготовка пользователя перед действием
③ Сцена: привлечение внимания к важному
④ Действие: покадровая анимация или ключевые позы
⑤ Непрерывность: ничего не останавливается и не начинается резко
⑥ Плавность: плавные входы и выходы
⑦ Арки: плавные движения для большего реализма
⑧ Контекст: детали, поддерживающие основное действие
⑨ Время: правильная продолжительность для плавности или скованности
⑩ Преувеличение: акценты для лучшего донесения идеи
⑪ Объем: добавление согласованности, глубины и реализма
⑫ Привлекательность: приятные, запоминающиеся анимации с характером
Вот полная статья с примерами: 12 принципов анимации
@WebDev_Plus
❤7🔥3👍2😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Animate UI только что выпустила свою версию 1.0
✓ React, TypeScript, Tailwind CSS и Motion
✓ Полностью настраиваемая
✓ 170 анимированных иконок
Открытый исходный код: https://github.com/imskyleen/animate-ui
@WebDev_Plus
✓ React, TypeScript, Tailwind CSS и Motion
✓ Полностью настраиваемая
✓ 170 анимированных иконок
Открытый исходный код: https://github.com/imskyleen/animate-ui
@WebDev_Plus
👍4🔥3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Чувак создал супер-производительный CSV-редактор, полностью на HTML canvas
Инструмент масштабируется под гигабайты данных и работает, как Excel. Мгновенно обрабатывает огромные файлы с максимальной производительностью.🎉
@WebDev_Plus
Инструмент масштабируется под гигабайты данных и работает, как Excel. Мгновенно обрабатывает огромные файлы с максимальной производительностью.
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1🍌1
Эргономика мобильных интерфейсов
Важные кнопки, меню и CTA стоит располагать в «зелёной зоне», а верх лучше оставлять для второстепенных элементов.
@WebDev_Plus
Важные кнопки, меню и CTA стоит располагать в «зелёной зоне», а верх лучше оставлять для второстепенных элементов.
@WebDev_Plus
👌9❤2👍1
Как отцентрировать элемент с абсолютным позиционированием?
Использовать
В современном 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