Flex (свойства flex-grow, flex-basis и flex-shrink) в сочетании с flex-wrap: wrap; — это невероятно мощный инструмент для адаптивной вёрстки веб-сайтов

⏩вот сам код

➡️ @byFrontDeveloper

Новая фича в VS Code Insiders!

Теперь можно кидать элементы прямо в Chat. Открываешь локальный сайт через встроенный Simple Browser, жмёшь «Start» на панели — и кликаешь по нужному элементу. В чат улетает:

• скриншот элемента
• его HTML
• и CSS

Удобно, если разбираешься с вёрсткой или дебажишь прямо в коде

➡️ @byFrontDeveloper

GSAP, одна из лучших библиотек JavaScript для веб-анимаций, теперь на 100% БЕСПЛАТНА, включая коммерческое использование.

Такие плагины, как SplitText, которые раньше были платными, теперь можно использовать бесплатно.

Теперь нет причин не использовать её 💪

➡️ @byFrontDeveloper

Мы неправильно используем CSS и отступы для абзацев

Не нужно использовать ни em, ни rem, ни px, и тем более %.

Лучше и проще использовать lh.

Это эквивалент высоты строки, значения свойства line-height.

Браузерная поддержка — 94%

Если тебе нужно поддерживать старые браузеры — добавь fallback:

p {
  padding: 1em; /* fallback для динозавров */
  padding: 1lh;
}

Вы можете поиграть с различными параметрами, чтобы увидеть, как lh влияет на внешние отступы у абзацев, в этой демке

Хорошая статья: Оттачивание типографики с помощью единиц line-height

➡️ @byFrontDeveloper

Когда только начинаешь копать вёрстку, рано или поздно натыкаешься на вопрос: а можно ли вот этот тег втиснуть внутрь вот того?

Чтобы не шарить по спецификациям и не гадать на кофейной гуще, есть полезный инструмент-шпаргалка по вложенности тегов.

Выбираете дочерний и родительский теги и сразу получаете результат ✌️

https://caninclude.glitch.me/

➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

Бомбическая новинка в HTML и CSS! Стилизуй элементы <select> без библиотек и максимально просто.

На видео показано, как сделать это всего в пару строк кода 😍

➡️ @byFrontDeveloper

Не злоупотребляй if в своём коде на JavaScript/TypeScript

Лучше используй optional chaining (?.), чтобы проверять наличие свойств.

А дальше — с помощью && или раннего return код выглядит чище и читается лучше 💖

➡️ @byFrontDeveloper

Новый сайт GTA VI выглядит впечатляюще.

Анимация при прокрутке с помощью JavaScript 😍

➡️ @byFrontDeveloper

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