Хочешь изучить React, Svelte, Vue или Angular?

Этот сайт сравнивает синтаксис каждого из них!

Если ты уже знаешь один из них, ты легко освоишь другой:
→ http://component-party.pages.dev

➡️ @byFrontDeveloper

Библиотека для создания многошаговых форм

Работает с React, Vue и Svelte.

Всё, что нужно — это JSON для настройки:

https://github.com/damianricobelli/stepperize

➡️ @byFrontDeveloper

Новый компонент для React — <ViewTransition />

Теперь мы можем легко создавать переходы в пользовательском интерфейсе.

Оборачиваешь элемент, который хочешь анимировать, и задаёшь ему уникальное имя.

Анимацию можно настраивать с помощью CSS.

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

➡️ @byFrontDeveloper

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