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

❤️ — если нравится

➡️ @byFrontDeveloper

Осторожно с vh в CSS

На мобильных устройствах он не учитывает исчезновение панелей инструментов.

Решение —> использовать dvh: он всегда подстраивается под реальную высоту окна. Так твой дизайн использует всё доступное пространство, избегает обрезаний и улучшает пользовательский опыт 😎

➡️ @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

Лучшее объяснение z-index в CSS

Ставь лайк если понял ❤️

➡️ @byFrontDeveloper

В VS Code подъехала обнова → v1.100

Одна из реально годных фич — автогенерация alt-текста для изображений

Наводишься на тег с картинкой → Ctrl + . или лампочка → готово.

Работает в HTML и Markdown. Удобно, быстро, нативно.

Пользуйтесь! 🍷

➡️ @byFrontDeveloper

Хватит допускать эту ошибку на своих сайтах 👊

Срочно оптимизируй изображения —> это сильно улучшает UX.

Можно снизить вес картинок до 90%, и при этом они будут выглядеть так же

https://squish.addy.ie — суперлегкий онлайн-сервис, который сжимает картинки до 90%, не теряя качества. Поддерживает PNG, JPEG, WebP и AVIF

➡️ @byFrontDeveloper

Крутой компонент для анимации чисел:

✓ Поддержка JavaScript, React, Vue и Svelte
✓ Доступный и кастомизируемый
✓ 0 зависимостей

Лёгкий, гибкий и без лишнего — самое то для UI 😍

→ http://number-flow.barvian.me

➡️ @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

Ты знал про такой трюк?

Создай редактор CSS в реальном времени всего за несколько строк HTML:

contenteditable — делает <style> редактируемым прямо на странице

style="display: block" — заставляет тег <style> вести себя как блочный элемент, чтобы его было видно и можно было редактировать

Когда ты меняешь текст внутри <style>, браузер тут же применяет новые стили ко всей странице

Можно интерактивно менять стили без JS — крутой хак для обучения или демонстраций 😍

➡️ @byFrontDeveloper

МЕГА-сборник кастомных хуков для React!

Экономь время и не изобретай велосипед заново:

✓ 50 готовых хуков
✓ С примерами кода
✓ Поддержка TypeScript

→ http://usehooks.com

Поддержи пост лайком 💳

➡️ @byFrontDeveloper

Microsoft меняет всё! GitHub Copilot эволюционирует.

Теперь это автономный кодовый агент, который работает за тебя.

✓ Назначь Copilot задачу (issue)
✓ Copilot сам создаст pull request с решением
✓ Доступно прямо из GitHub и Visual Studio Code

Смотри, как это работает 💪

➡️ @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

Лучшая шпаргалка по CSS Grid

Сохрани, чтобы не гуглить лишний раз ❤️

➡️ @byFrontDeveloper

Шикарная новая библиотека графиков для React

16+ видов графиков для твоего сайта

✓ Компоненты копипастой
✓ Полностью работают на сервере
✓ Поддержка Tailwind

→ http://rosencharts.com 😮

➡️ @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

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

Вам на выходные:

Игра Horizon Drive, сделанная на JavaScript и Three.js командой из Shopify 😍

Трудно поверить, насколько продвинут стал веб — теперь такие вещи работают прямо в браузере

> https://www.shopify.com/editions/summer2025/drive

➡️ @byFrontDeveloper

Нужно сравнить два изображения на своём сайте? Это официальный компонент Google.

✓ Занимает всего 3 КБ
✓ Имеет встроенные стили
✓ Работает на мобильных устройствах
✓ Совместим с любым фреймворком

Установка → npm install two-up-element

➡️ @byFrontDeveloper

Находка дня: инструмент для анализа производительности всей веб-страницы

Пробегается по всем страницам сайта и эмулирует полную навигацию, как обычный пользователь.

Запуск:

npx unlighthouse --site <твой-сайт>

Идеально для SPA, маркетинговых сайтов и больших проектов 💖

➡️ @byFrontDeveloper

ИНТЕРАКТИВНОЕ и наглядное руководство по CSS Grid

Хочешь легко создавать сетки для своего сайта?

Эта визуальная шпаргалка поможет быстро освоить CSS Grid:

→ https://joshwcomeau.com/css/interactive-guide-to-grid/ 💖

➡️ @byFrontDeveloper