Skill Blog: Веб-разработка

Новые продвинутые возможности в CSS Некоторые функциональные возможности, которые были добавлены в язык относительно недавно

Вот простая реализация мерцающего значка, который привлечет внимание вашей аудитории Важно учитывать предпочтения пользователей в отношении анимации и включать ее только в том случае, если они не против анимации. Проверить это можно с помощью медиазапросов prefers reduced motion

Hamburger Icon Animations Реализовано с помощью CSS Код: Codepen

Git Merge(слияние) VS Rebase(перебазирование) Основное отличие между ними в том, что слияние сохраняет историю в первозданном виде, а перебазирование ее перезаписывает

Современный синтаксис rgb() В новом синтаксисе функции rgb() её параметры перечисляются через пробел, а не запятую. При этом значения можно писать как в целых числах от 0 до 255, так и в процентах от 0% до 100% Также две функции rgb() и rgba() объединены в одну и значение альфа-канала пишется после косой черты. Его тоже можно писать как в числах, так и в процентах

Front-end-documentation – список обучающих материалов, статей и ресурсов для изучения фронтенда Он предлагает множество бесплатных книг по программированию, скринкастов, подкастов и даже видеоуроков. Список ссылок хорошо систематизирован и может стать отправной точкой для обучения профессии с нуля Ссылка: https://github.com/codesandtags/frontend-documentation

Градиентная закругленная рамка с помощью CSS Свойство background достаточно универсально и позволяет установить несколько фонов и задать их параметры. Так что делаем два фона: один с градиентом, другой сплошной черный в виде градиента и накладываем их друг на друга

.element {
  border: 12px solid transparent;
  border-radius: 24px;
  background: 
/* padding-box, чтобы он не рисовался под рамкой */
  linear-gradient(black, black) padding-box,
/* border-box, чтобы он начинался под рамкой */
  linear-gradient(
    45deg,
    #FF52E5,
    #F6D242
  ) border-box;
}

Репозиторий с задачами по TypeScript — 150+ вопросов с онлайн-проверкой Проект поможет тебе понять, как работает система типов, написать собственные утилиты или просто полезно провести время, решая задачи Ссылка: https://github.com/type-challenges/type-challenges

Аккордеон на чистом HTML или теги <details> & <summary> По умолчанию cодержимое скрыто, но если мы хотим, чтобы оно показывалось сразу при загрузке страницы, нужно добавить к нему атрибут open Мы можем изменить иконку треугольника на что-то другое, используя псевдоэлемент ::marker

summary::marker {
  content: "👉";
}

details[open] summary::marker {
  content: "👇";
}

Понятия JavaScript, которые должен знать каждый разработчик — типы значений, примитивные типы, стек вызовов, map, reduce, filter и многое другое Всего 33 пункта и к каждому есть множество статей и видео Сам репозиторий на русском языке Ссылка: https://github.com/gumennii/33-js-concepts

Мягкий перенос в HTML (&shy;) В отличие от элемента <wbr>, который также указывает браузеру место, где возможен разрыв слова, при использовании мягкого переноса к концу строки добавляется дефис

Способ затухания длинного текста Хитрость здесь заключается в том, чтобы поместить псевдоэлемент поверх текста и придать ему линейный градиент слева направо, переходящий от прозрачного к сплошному цвету, чтобы создать этот эффект затухания

Подборка 5-продвинутых JavaScript концепций Подробнее: 1. BigInt 2. Typed Arrays 3. Proxy & Reflect 4. Generators 5. WeakMap & WeakSet

Скобочные группы при замене Содержимое скобочной группы можно также использовать при замене str.replace(regexp, replacement): по номеру $n или по имени $<имя> Подробнее про скобочные

Новый синтаксис медиа-запросов Поддержка на данный момент составляет 90.84%

Пример использования ключевого слова max‑content Идеально подходит в ситуациях, когда нам нужна максимальная ширина содержимого, чтобы определить размер поля

Responsive Sidebar Menu Реализовано на CSS и немного JS Код: Codepen

CSS: svh, lvh, dvh — новые единицы измерения Рассказываем, зачем нужны новые единицы измерения svh, lvh и dvh в CSS для адаптивной верстки, и чем они отличаются от прежней единицы vh Хорошее видео на эту тему: YouTube Поддержка на данный момент составляет 93.21%

Шпаргалка по шорткату grid-area В шорткате значения указываются в таком порядке: row-start / column-start / row-end / column-end, то есть сначала указываем оба начала, а потом оба конца