Десятичные числа с нулём в списке

Мы можем подставить ноль к одиночным цифрам нумерованного списка, установив decimal-leading-zero в значении list-style-type

ol {
  list-style-type: decimal-leading-zero;
}

➡️ @FrontendPortal | #CSS

Нашел классную штуку для практики — BigDevSoon

Это платформа с 100 челленджами для прокачки навыков. Здесь есть задачи на любой вкус: от верстки до сложных штук с JS, анимациями и прочими веб-фишками

Что круто:
🔸Разные уровни сложности — подойдет и новичкам, и профи.
🔸Фокус на практику, а не сухую теорию.
🔸Реальные задачи, которые развивают навыки, применимые в реальной работе.

👉 https://app.bigdevsoon.me/challenges

➡️ @FrontendPortal | #resourse

Свойство shape-outside

Определяет форму, вокруг которой должно обтекаться соседнее встроенное содержимое. Обычно это делается для того, чтобы текст мог перерисовываться по такой фигуре, как круг, эллипс или многоугольник

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

Подборка примеров использования этого свойства — Ссылка

➡️ @FrontendPortal | #CSS

JavaScript Visualizer 9000 — потрясающий инструмент, позволяющий наглядно видеть порядок выполнения JavaScript кода

Можно выбрать из предлагаемых примеров или запустить выполнение своего кода (думаю, часто встречали такие задачи - "в каком порядке выполнится код?")

Очень полезно для понимания JavaScript в целом

👉 https://www.jsv9000.app/

➡️ @FrontendPortal | #resourse

Градиентная обводка текста

Простой способ cоздать градиентную обводку для текста с помощью нескольких строк кода. В комментариях поподробнее 👇

.text {
/* Устанавливаем градиентный фон */
  background: linear-gradient(
    45deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%
  );
/* Устанавливаем цвет текста, равный цвету фона контейнера */
  color: black;
/* Используем свойство background-clip, при использовании значения text фон будет применен для текста элемента */
  background-clip: text; 
/* Используем webkit-text-stroke, чтобы добавить ширину и цвет обводки. Цвет нужно установить на transparent(прозрачный), чтобы цвет градиента из-за обрезки фона начал отображаться */
  -webkit-text-stroke: 6px transparent;
}

➡️ @FrontendPortal | #CSS

Когда используешь <div> как <button>:

➡️ @FrontendPortal | #memes

CSS свойство field-sizing

Позволяет манипулировать поведением полей формы при заполнении

При значение field-sizing: content; - отключит стандартное поведение и позволит подстраивать размер полей формы в зависимости от контента

field-sizing: fixed; сохранит текущее поведение, и поле ввода формы не будет изменяться в размерах

input,
textarea,
select{
  field-sizing: content;
  min-width: 50px;
  max-width: 250px;
  padding: 10px 20px;
}

Экспериментальная технология, поддержка 72.81%

➡️ @FrontendPortal | #CSS

💡 Совет для VS Code:

Используйте Ctrl + Shift + L, чтобы мгновенно выделить все вхождения выделенного текста в текущем файле.

Это отлично подходит для быстрых правок и массовых изменений

➡️ @FrontendPortal | #tip

Правило для анимации входа @starting-style

Используйте @starting-style, чтобы применить стиль, который браузер сможет найти до того, как элемент будет открыт на странице. Это состояние «до открытия» (из которого вы выполняете анимацию)

Что дает нам возможность придать микро анимацию даже для тех элементов, которые были скрыты с помощью свойства display: none;

Полезные ссылки:
🔸Наглядное видео-объяснение
🔸Хорошая статья
🔸Поддержка 88.9%

➡️ @FrontendPortal | #CSS

Держите крутой ресурс, где можно вытащить всю айдентику бренда в пару кликов

Тут можно найти логотипы, цвета, шрифты и прочие фишки более чем 22 миллионов брендов со всего мира

Полезно, быстро, современно. Проверяйте: brandfetch.com

➡️ @FrontendPortal | #resourse

База 🧠

➡️ @FrontendPortal | #memes

Моя новая любимая функция в VSCode — включение «inline values» во время отладки.

Проверка кода становится в разы проще

➡️ @FrontendPortal | #tip

Эта платформа предлагает более 500 вопросов, разбитых на 20 категорий, включая такие темы, как Git, CSS, JavaScript, React и многое другое.

Все вопросы отсортированы по категориям и курируются пользователями.

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

👉 https://quizzes.madza.dev/

➡️ @FrontendPortal | #resourse

Z-Index 🗿

➡️ @FrontendPortal | #memes

💡 Совет по JavaScript

Вы могли не знать, что мы можем настроить вывод JSON.stringify()

По умолчанию JSON.stringify(data) не сериализует Set, Map, BigInt и т. д. Но с помощью функции replacer можно управлять тем, какие данные попадут в итоговую строку

✔️ #tip by Shripal Soni

➡️ @FrontendPortal