Frontend Developer

Нужно сравнить два изображения на своём сайте? Это официальный компонент Google. ✓ Занимает всего 3 КБ ✓ Имеет встроенные стили ✓ Работает на мобильных устройствах ✓ Совместим с любым фреймворком Установка → npm install two-up-element ➡️ @byFrontDeveloper

Вам на выходные: Игра Horizon Drive, сделанная на JavaScript и Three.js командой из Shopify 😍 Трудно поверить, насколько продвинут стал веб — теперь такие вещи работают прямо в браузере > https://www.shopify.com/editions/summer2025/drive ➡️ @byFrontDeveloper

TypeScript теперь работает с Go Вышла первая бета-версия нового нативного компилятора. Прирост скорости впечатляющий — до 10 раз быстрее. Чтобы попробовать новую версию, установите её отдельно: npm install -D @typescript/native-preview. После этого используйте tsgo вместо привычного tsc. Когда выйдет полноценный релиз (TypeScript 7), tsc и станет той самой Go-версией. Пока, для удобства тестирования, это отдельный бинарник Плюс расширение в VS Code: “TypeScript (Native Preview)”. После установки его нужно вручную включить через палитру команд: TypeScript Native Preview: Enable (Experimental) ➡️ @byFrontDeveloper

🔥 НОВИНКА в HTML: Закрывай модальные окна без JavaScript. Появился атрибут closedby — с ним всё делается суперпросто. Вот как это работает

<button id="openDialog">
  Abrir Modal
</button>

<dialog id="myDialog" closedby="any">
  <h2>Bienvenido</h2>
  <p>Este es un ejemplo de modal en HTML</p>
  <form method="dialog">
    <button>Cerrar</button>
  </form>
</dialog>

— Кнопка "Abrir Modal" предназначена для открытия модалки — <dialog> элемент с id="myDialog" содержит модальное окно. — Атрибут closedby="any" указывает, что окно можно закрыть любыми способами: > по нажатию кнопки с method="dialog" > по нажатию вне модалки (backdrop) > по клавише Escape Без единой строчки JS можно создать модалку, которая закрывается привычными способами — благодаря новому атрибуту closedby="any" Уже поддерживается Chrome, Edge, Chrome для Android, Android Browser - check ➡️ @byFrontDeveloper

Шикарная новая библиотека графиков для React 16+ видов графиков для твоего сайта ✓ Компоненты копипастой ✓ Полностью работают на сервере ✓ Поддержка Tailwind → http://rosencharts.com 😮 ➡️ @byFrontDeveloper

CSS-трюк, чтобы футер всегда был внизу страницы

div {
  display: grid;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
}

> min-height: 100dvh — делает контейнер не меньше высоты экрана > grid-template-rows: auto 1fr auto — делит его на: > auto — шапка (занимает столько, сколько нужно) > 1fr — основная часть (растягивается, чтобы заполнить всё) > auto — футер (прилипает к низу) Если на странице мало контента — футер всё равно будет снизу, а если много — всё естественно растянется Влепи лайк если пост понравился ❤️ ➡️ @byFrontDeveloper

Microsoft меняет всё! GitHub Copilot эволюционирует. Теперь это автономный кодовый агент, который работает за тебя. ✓ Назначь Copilot задачу (issue) ✓ Copilot сам создаст pull request с решением ✓ Доступно прямо из GitHub и Visual Studio Code Смотри, как это работает 💪 ➡️ @byFrontDeveloper

МЕГА-сборник кастомных хуков для React! Экономь время и не изобретай велосипед заново: ✓ 50 готовых хуков ✓ С примерами кода ✓ Поддержка TypeScript → http://usehooks.com Поддержи пост лайком 💳 ➡️ @byFrontDeveloper

Ты знал про такой трюк? Создай редактор CSS в реальном времени всего за несколько строк HTML: contenteditable — делает <style> редактируемым прямо на странице style="display: block" — заставляет тег <style> вести себя как блочный элемент, чтобы его было видно и можно было редактировать Когда ты меняешь текст внутри <style>, браузер тут же применяет новые стили ко всей странице Можно интерактивно менять стили без JS — крутой хак для обучения или демонстраций 😍 ➡️ @byFrontDeveloper

CSS-анимация "картинка-в-картинке" для видео с использованием container queries и position: stick

.container { container-type: scroll-state; }
@​container scroll-state(stuck: top) {
  video {
    translate: calc(50vw - 100%) calc(100vh - 100%);
  }
}

Cтавь лайк если круто ❤️ ➡️ @byFrontDeveloper

Крутой компонент для анимации чисел: ✓ Поддержка JavaScript, React, Vue и Svelte ✓ Доступный и кастомизируемый ✓ 0 зависимостей Лёгкий, гибкий и без лишнего — самое то для UI 😍 → http://number-flow.barvian.me ➡️ @byFrontDeveloper

Хватит допускать эту ошибку на своих сайтах 👊 Срочно оптимизируй изображения —> это сильно улучшает UX. Можно снизить вес картинок до 90%, и при этом они будут выглядеть так же https://squish.addy.ie — суперлегкий онлайн-сервис, который сжимает картинки до 90%, не теряя качества. Поддерживает PNG, JPEG, WebP и AVIF ➡️ @byFrontDeveloper

В VS Code подъехала обнова → v1.100 Одна из реально годных фич — автогенерация alt-текста для изображений Наводишься на тег с картинкой → Ctrl + . или лампочка → готово. Работает в HTML и Markdown. Удобно, быстро, нативно. Пользуйтесь! 🍷 ➡️ @byFrontDeveloper

Лучшее объяснение z-index в CSS Ставь лайк если понял ❤️ ➡️ @byFrontDeveloper

Сохраняем 10 сайтов для отработки навыков работы с фронтендом: 1. Frontend Mentor http://frontendmentor.io 2. Codewars http://codewars.com 3. Codewell http://codewell.cc 4. JavaScript30 http://javascript30.com 5. Кодербайт http://coderbyte.com 6. CSS Battle http://cssbattle.dev 7. FreeCodeCamp http://freecodecamp.org/learn/ 8. Frontend Practice http://frontendpractice.com 9. Задачи CodePen http://codepen.io/challenges/?re 10. Dev Challenges http://devchallenges.io ➡️ @byFrontDeveloper

Осторожно с vh в CSS На мобильных устройствах он не учитывает исчезновение панелей инструментов. Решение —> использовать dvh: он всегда подстраивается под реальную высоту окна. Так твой дизайн использует всё доступное пространство, избегает обрезаний и улучшает пользовательский опыт 😎 ➡️ @byFrontDeveloper

CSS progressive blur: стек пустых перекрывающих элементов с backdrop-filter: blur() — у каждого разная степень размытия и/или маска ❤️ — если нравится ➡️ @byFrontDeveloper

С Днём Победы!

Новый сайт GTA VI выглядит впечатляюще. Анимация при прокрутке с помощью JavaScript 😍 ➡️ @byFrontDeveloper