Вы когда-нибудь задумывались, чем отличаются Babel и Webpack, в чем преимущества Vite, почему все говорят о Turbopack и при чем здесь Rust?
Во множестве доступных ныне инструментов легко запутаться, но я постаралась разобраться и описала все в новой статье.

Погружаемся в мир сборщиков

А если у вас еще остались вопросы или появились новые после прочтения (лично у меня точно есть парочка!), пишите их в комментарии 💬

Вы когда-нибудь замечали, что при использовании якорей или скроллинга с JavaScript, контент может "прилипать" к верхней части окна, находясь под фиксированной шапкой или меню?

Свойство scroll-padding позволяет задать отступы внутри элемента, влияющие на прокрутку его содержимого.

📖 Пример:

.Container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.FixedHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #2d0094;
}

.Content {
  overflow-y: auto;
  scroll-padding-top: 50px;
}

Подробнее в документации

🔥 Мы пробуем новые форматы!

Это первый наш подкаст, ждем ваш фидбек в комментариях!

Таймкоды:
00:00 - Заменит ли GPT разработчиков
10:36 - Как можно использовать GPT уже сейчас, чтобы быть эффективным
18:20 - Страх всего нового - худший враг разработчика
22:50 - Что нужно знать, чтобы всегда оставаться нужным в профессии

#подкаст

Фронтенд-разработчикам полезно иметь набитый глаз в UI, чтобы делать удобные и красивые интерфейсы даже без дизайна.

https://cantunsee.space/ — это интересный квиз, в котором можно потренироваться искать проблемы в дизайне. Попробуйте и вы, это помогает расти как профи!

Слышали ли вы что-нибудь о таком хуке React, как useLayoutEffect?

Этот хук может быть очень полезен в разработке, однако он имеет и свои нюансы, про которые нужно знать.

Что такое useLayoutEffect

Удобное свойство inset в CSS!

Это сокращённое свойство, которое объединяет в себе определения для четырех других свойств: top, right, bottom и left.

Оно позволяет задавать отступы элемента от соответствующих сторон его родительского элемента одним коротким выражением.

А также можно использовать сокращенные варианты, как у свойств margin и padding. Например, если указать у абсолютно позиционированного элемента inset: 0, то этот элемент растянется по контейнеру.

Все вы знаете свойство text-wrap, с помощью которого можно указать, переносить текст в контейнере или нет. Однако у этого свойства есть два интересных параметра: balance и pretty.

Параметр balance помогает сбалансировать строки текста так, чтобы обеспечить равномерное распределение слов по строкам. Сравните отображение с text-wrap: wrap и text-wrap: balance. Однако, это свойство работает только для коротких текстов (меньше 6 или 10 строк, в зависимости от браузера).

Параметр pretty наоборот предназначен для длинных текстовых блоков, где хорошая типографика важнее производительности. Он делает множество улучшений, связанных с переносами, в частности предотвращает появление одиноких слов в конце абзаца. Сравните отображение с text-wrap: wrap и text-wrap: pretty для длинного текста.

Таким образом, значение balance можно использовать для заголовков, а значение pretty для основного текста. Однако, стоит учитывать, что сейчас данные возможности поддерживаются не всеми браузерами. Подробнее про поддержку можно посмотреть на MDN.

Если вдруг вам нужно полностью избавиться от специфических стилей элемента, и вернуть его к исходным настройкам браузера, all: initial; сделает это за вас. Это может быть полезно, когда вы работаете с внешними библиотеками и хотите избежать нежелательных стилей.

Читайте подробнее в документации

Как проверить поддержку css-свойства в браузере?

В одном из предыдущих постов мы обсуждали достаточно специфичные значения свойства text-wrap, который на данный момент поддерживаются не всеми браузерами. Но как убедиться в момент, что текущий браузер поддерживает ту или иную опцию?

@supports — это правило CSS, которое позволяет проверять, поддерживает ли браузер определённое свойство или его значение. Если свойство поддерживается, то стили, вложенные в @supports, применяются.

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

Таким образом, с помощью директивы @support вы можете не только проверять доступность свойств прямо в CSS, но и использовать фоллбеки при необходимости.

Как сделать свой контент интерактивным?

contenteditable — это атрибут HTML, который можно добавить к любому элементу, чтобы сделать его редактируемым. Когда этот атрибут установлен, пользователь может кликнуть по элементу и начать вносить изменения в текстовое содержимое.

export const EditableRow: FC = () => {
  return (
    <p className="EditableRow" contentEditable="true">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
      nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
    </p>
  );
};

Часто это свойство используют для реализации собственных текстовых редакторов или какого-то специфичного интерфейсного решения, связанного с редактированием. Но, конечно, не стоит забывать, что для обычных форм с заполнением данных лучше всего подходят нативные теги input и textarea.

Особенность клавиатурного управления в Safari

Основной способ обеспечения доступности в браузере — это возможность управления с помощью клавиатуры. Это позволяет пользователям без использования мыши беспрепятственно переходить по интерактивным элементам сайта, таким как кнопки и ссылки. Так, в большинстве браузеров для перемещения по элементам используется клавиша Tab, а для обратного перемещения — сочетание Shift + Tab.

Однако особое внимание стоит уделить Safari: в этом браузере по умолчанию не работает переход между кнопками и ссылками с помощью клавиши Tab. Вместо этого нужно использовать сочетание Option + Tab для переключения фокуса. Если же вы хотите использовать стандартный метод с Tab, необходимо включить эту функцию в расширенных настройках браузера.

Кастомизация ввода даты с помощью showPicker()

Иногда нам может понадобиться использовать стандартный ввод даты с помощью элемента input[type='date'], но при этом хочется кастомизировать триггер, который будет по клику открывать календарь для выбора даты.

Тут на помощь может прийти метод showPicker() – относительно новая возможность определённых видов элемента input открывать пикер программно. Таким образом, можно скрыть сам инпут за стилизованной кнопкой, но при клике на неё вызывать открытие календаря.

Данный метод существует для множества видов инпутов – date, month, week, time, datetime-local, color и file. Однако для каждого вида есть свои ограничения в поддержке различными браузерами. Например, выбор времени, недели и месяца не будет работать в Firefox. Подробнее с поддержкой можно ознакомиться на caniuse.

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

Используем debugger в JavaScript для эффективной отладки кода

Команда debugger; служит для того, чтобы приостановить выполнение кода и открыть инструменты отладки в вашем браузере. Когда интерпретатор кода встречает debugger;, он автоматически останавливает выполнение перед этой строкой, если режим отладки включен, и позволяет вам исследовать текущее состояние программы.

1. Добавьте debugger; в нужную строку вашего JavaScript-кода
2. Откройте DevTools, перейдите в раздел "Sources", и вы увидите, что выполнение остановилось в месте, где вы вставили debugger;

Также вы можете использовать debugger; в условных операторах для отладки только при выполнении определенных условий.

Одна из самых мощных функций DevTools - это возможность ставить точки останова в JavaScript-коде. В прошлом посте мы рассмотрели один из удобных способов это сделать - с помощью команды debugger; в JavaScript. Сегодня же поговорим поподробнее, как работать с точками останова в DevTools на примере Google Chrome.

Инструменты отладки: точки останова и дебаг в DevTools

Оптимизация хранения данных с помощью битовой маски в JavaScript

Битовые маски - это специальный инструмент в программировании, который позволяет использовать отдельные биты числа для хранения множественных булевых значений. Это особенно удобно, когда нужно оптимизировать память и получать быстрый доступ к данным.

Представьте, что у вас есть интерфейс, в котором у пользователя доступны различные флаги для конфигурации (например, показывать кнопку с новым функционалом или дать доступ к новой странице). Такое может понадобиться, когда вы разрабатываете большую фичу и хотите держать её код в основной ветке, но при этом не готовы открывать фичу всем пользователям, пока не протестируете.

Мы можем хранить данные об активных флагах в cookie, для того чтобы иметь к ним доступ во время SSR (server side rendering). Но максимальный объем хранимой информации в cookie сильно ограничен, а флагов может быть большое количество. Поэтому, вместо использования нескольких переменных, мы можем хранить все эти флаги в одном числе.

const NEW_BUTTON_FLAG = 1;  // 0001
const NEW_PAGE_FLAG = 2;    // 0010
const NEW_FORM_FLAG = 4;    // 0100
const NEW_API_FLAG = 8;     // 1000

let userFlags = 0;

// Включаем нужные флаги
userFlags = userFlags | NEW_FORM_FLAG | NEW_BUTTON_FLAG; // 0101

// Проверяем, активен ли флаг у пользователя
const showNewForm = (userFlags & NEW_FORM_FLAG) !== 0; // true
const showPageForm = (userFlags & NEW_PAGE_FLAG) !== 0; // false

// Убираем флаг
userFlags &= ~NEW_BUTTON_FLAG;
console.log(userFlags.toString(2)); // 100

С помощью побитовых операций (|, & и ~) мы можем добавлять, удалять, а также проверять флаги.

Несколько месяцев назад мы писали про новый экспериментальный компилятор от React - React Compiler.

И вот недавно команда анонсировала бета-версию этого компилятора в своем блоге.

Как они пишут, React Compiler будет работать в том числе на версиях React 17 и выше. Кроме того, разработчики Next.js уже поддержали новый компилятор в 15 версии, пока в экспериментальном режиме. Команда React также рекомендует установить плагин ESLint уже сейчас, невазисимо от использования React Compiler.

Ждем релиза, и готовимся внедрять в свои проекты, чтобы навсегда забыть про React.memo!)

Все мы часто используем в работе такие единицы измерения, как vh и vw, в основном, чтобы заставить какой-то блок растянуться на всю область видимости, указав для него width: 100vw; и height: 100vh;

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

Дело в том, что у мобильных браузеров есть два режима отображение собственного интерфейса - полноценная версия, и более компактная, которая появляется при скролле. Обратите внимание на панель браузера, когда скроллите какой-то сайт на телефоне - она в какой-то момент будет “ужиматься”.

Чтобы учесть это, лучше всего заменять vh и vw на dvh и dvw, единицы измерения для динамического вьюпорта. На десктопных браузерах они будут работать без изменений, а вот на мобильных при любом из вариантов отображения браузера - компактном или полноценном - будут подстраиваться под него. Если же все время использовать vh и vw, то при отображении полноценной навигации в браузере будет появляться дополнительный скролл. Этот эффект можно наглядно увидеть на примере с Doka (откройте его с мобильного браузера).

К тому же, если верить MDN, у новых значений на данный момент есть полная поддержка на всех современных браузерах. Пожалуй, стоит пойти и заменить все vh и vw на моих проектах на новые единицы.

P.S. На эту тему также есть интересная статья на dev.to.

Всем привет! На связи Настя)

В определенный момент развития своей карьеры фронтенд-разработчика я начала сталкиваться с вопросом «Куда мне расти?». С одной стороны, казалось, что все основные технологии я уже освоила. Но каждый раз, натыкаясь на новое для себя CSS-свойство или метод в JavaScript, я убеждалась в обратном. «Как же много всего я упускаю» - думала про себя.

С учетом того, что в разработке каждый год появляется что-то новое, то, если не менять проект на работе регулярно, риск застыть в старых технологиях казался для меня ощутимым.

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

Спустя какое-то время, мы с Машей и Олей собрались в Codeca Frontend, и в тот момент эта идея возродилась. К ней добавилась идея того, как полезно было бы новичкам иметь максимально подробный план со всеми ресурсами для изучения, чтобы, идя по нему, можно было оценить, на каком этапе ты сейчас находишься, и сколько еще тебе осталось до твоего первого собеседования.

Так появился наш проект - роадмап фронтендера. Честно, столько всего нового, сколько я узнала за время подготовки этого роадмапа, я давно не узнавала. И даже многие идеи постов для этого канала появлялись именно оттуда.

В этот роадмап мы вложили все наши знания (и даже чуть больше), собрали их в большой план по шагам, разделили по уровням и темам, и к каждой теме подобрали ссылки на проверенные ресурсы. И действительно, получилось очень объемное и крутое пособие!

Мы работали над ним несколько месяцев и вот наконец готовы представить его!

🔗 (тут была ссылка на роадмап, но он больше не доступен 🤷‍♀️)

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

А вы знали, что какое-то время назад в CSS появилась функциональность для каскадных слоев?

Все мы знаем принцип каскада в CSS. Но вот в CSS добавили новый механизм для работы с ним, основанный на каскадных слоях. Такие слои в теории могут помочь в управлении порядком применения стилей. Вы можете объявлять стили в одном или нескольких слоях, и они будут применяться в зависимости от порядка этих слоев.

При этом стили вне слоев все еще будут в приоритете над остальными. На картинке представлен небольшой пример, как это работает.

С одной стороны, такая возможность звучит многообещающе. Но лично я пока не вижу, как ее можно использовать в текущих проектах, разве что для переопределения стилей из импортируемых библиотек, примерно вот так:

@import url("https://cdn.com/bootstrap.min.css") layer;

@layer {
 .fs-1 {
  font-size: 3rem;
 }
}

Да, это отличная возможность избавиться от !important, правда если ваш проект не настроен так, что стили из библиотек подкладываются в общий style.css вместе со стилями проекта при сборке. Из-за того, что стили вне слоя всегда будут в приоритете, переопределение через слои не будет работать. Тогда получается, что нужно либо весь проект переводить на использование слоев, или же не использовать их.

Возможно, именно поэтому я до сих пор не сталкивалась с этой возможностью в реальной разработке.

Подробнее про каскадные слои можно почитать в статье на Doka.

Всем привет! На связи снова Настя)

Как вы знаете, этот канал являлся частью проекта Codeca Frontend. Мы втроем с Машей и Олей делали образовательный и развлекательный контент про программирование, не только здесь, в телеграм, но и на других площадках.

Однако, все в мире меняется, и наш тандем не стал исключением. Теперь каждая из нас уходит в свободное плавание (хотя какие-то совместные проекты все же планируются).

Этот канал переходит в мои заботливые лапки руки, так что в ближайшее время его ждёт ребрендинг. Но суть не поменяется - здесь по-прежнему будут выходить посты про фронтенд. Однако, я планирую добавлять больше историй из моей рабочей практики, и собственные рассуждения на IT-темы.

Кроме этого, у меня остается тикток с мемасами.

Машу и Олю вы можете найти на других площадках:
- ютуб-канал Маши
- телеграм-канал Маши
- ютуб-канал Оли
- инстаграм Оли

Это было непростое решение, хоть у нас и пока что не слишком большая аудитория, но, тем не менее, нам важна ваша поддержка и понимание 🙏

Вот такие вот предновогодние новости 🙊