1070
Сборная солянка про фронтенд. JavaScript, React, TypeScript, HTML, CSS — здесь обсуждаем всё, что связано с веб-разработкой! Связь: @pmowq
Нейминг — это большая наша проблема. Сегодня пост про нейминг классов)
1. Имена классов в JavaScript пишутся с заглавной буквы и в PascalCase (каждое слово с большой буквы, без пробелов и подчёркиваний).
// Хорошо
class UserProfile {}
class ShoppingCart {}
class ProductItem {}
// Плохо
class userprofile {}
class shopping_cart {}
class productitem {}
// Хорошо
class Car {}
class Order {}
class User {}
// Плохо
class Drive {} // Глагол
class CalculateOrder {} // Действие
// Хорошо
class EventEmitter {} // Генерирует события
class DataFetcher {} // Загружает данные
// Плохо
class Ef {} // Что это?
class DF {} // Непонятно без контекста
HTTPClient или UIComponent).Object, Array, String. Избегайте их, чтобы не перезаписать стандартные объекты.
// Очень плохая идея
class Object {}
class String {}
class User {}
class AdminUser extends User {} // Расширенная версия User
class GuestUser extends User {} // Гость
class UserService extends User {} // Обслуживает пользователей
Всем привет!
Сегодня у нас CSS-функция clamp, которая позволяет задавать значения с учетом минимальных и максимальных границ.
Что такое clamp()?
Функция clamp принимает три параметра:
1. Минимальное значение — нижняя граница, меньше которой значение не опустится.
2. Предпочитаемое значение — основное, которое браузер старается использовать, если оно в пределах границ.
3. Максимальное значение — верхняя граница, больше которой значение не вырастет.
Пример:
.element {
font-size: clamp(1rem, 5vw, 2rem);
}
1rem — минимальный размер.5vw — значение, зависящее от ширины окна (предпочтительное).2rem — максимальный размер.400px: 5vw = 20px, используется 20px.200px: 5vw = 10px, меньше минимума применяется 1rem (16px).2000px: 5vw = 100px, больше максимума берётся 2rem (32px).clamp(5px, 10px, 20px), использование clamp() избыточно.
font-size: 16px; /* Fallback /
font-size: clamp(16px, 5vw, 32px);
clamp() идеально подходит для случаев, когда значение должно адаптироваться к размеру экрана, но не выходить за рамки:
Всех с пятницей 😏
Начали эту неделю с простой темы и закончим тоже)
Эта тема будет полезна как новичкам, которые только начинают разбираться в JavaScript, так и разработчикам с опытом. Ведь даже те, кто давно пишет на JS, могут забыть нюансы работы нестрогого равенства (==), так как в практике чаще используется строгое равенство (===). Освежим знания и разберем всё по полочкам.
Нестрогое равенство(==):
Этот оператор сравнивает два значения, пытаясь привести их к одному типу. JavaScript автоматически преобразует данные, чтобы попытаться сделать их равными.
Примеры:
console.log(1 == '1'); // true — строка '1' преобразуется в число
console.log(true == 1); // true — true преобразуется в 1
console.log(null == undefined); // true — специальное правило сравнения
console.log('' == false); // true
console.log(0 == false); // true
console.log(' ' == 0); // true
console.log(1 === '1'); // false — разные типы
console.log(true === 1); // false — разные типы
console.log(null === undefined); // false — разные типы
null и undefined равны при нестрогом, но не равны при строгом сравнении:
console.log(null == undefined); // true
console.log(null === undefined); // false
null или undefined или в ситуациях, где автоматическое приведение типов упрощает логику.
А вы знали, что текст в вебе можно писать не только горизонтально? Разберём, как использовать writing-mode для управления направлением текста.
Что такое writing-mode?writing-mode управляет направлением текста в вашем документе. С его помощью можно менять стандартный поток текста (слева направо, сверху вниз) на вертикальный или наоборот.
Поддерживаемые значения:
1. horizontal-tb (по умолчанию): текст идёт горизонтально, строки расположены сверху вниз.
2. vertical-rl: текст идёт вертикально, строки расположены справа налево.
3. vertical-lr: текст идёт вертикально, строки расположены слева направо.
4. sideways-rl: текст поворачивается на 90° и идёт горизонтально справа налево.
5. sideways-lr: текст поворачивается на 90° и идёт горизонтально слева направо.
Пример использования:
.vertical-rl {
writing-mode: vertical-rl;
}
<div class="vertical-rl">@TrueFrontender</div>
На всякий случай напоминаю, что у нас есть чат(тык). Присоединяйтесь 💪
Буду иногда напоминать про него 😉
Не переживайте, если что-то не работает. Если бы всё работало, вас бы уволили 😏
Эта фраза идеально отражает реальность работы разработчика. Каждый день мы ищем проблемы и решаем их. Давайте разберем, почему ошибки — это нормально и даже полезно.
Если в проекте всё работает идеально, это может означать:
— Вы просто ещё не нашли проблемы.
— Проект больше не развивается и требует обновлений.
В первом случае у вас точно есть задачи. Во втором — проект устарел и, скорее всего, требует доработок или новых решений.
Почему ошибки — это хорошо?
1. Ошибки помогают расти. Каждая исправленная проблема улучшает ваше понимание кода и систем.
2. Программирование — это решение задач. Даже самые опытные разработчики сталкиваются с проблемами, и это нормально.
3. Ваша ценность в умении решать. Неважно, сколько багов появляется. Главное, как быстро и качественно вы их устраняете.
Как правильно относиться к ошибкам?
1. Не принимайте их на личный счёт. Ошибки — это не показатель вашей некомпетентности, а часть рабочего процесса.
2. Учитесь на них. Каждая ошибка — это шанс понять, что пошло не так, и сделать выводы для будущего.
3. Не бойтесь пробовать. Программирование — это эксперименты. Если что-то не получилось, это не провал, а шаг вперёд.
Напоминание❗️
Ошибки — это то, что делает вас важным специалистом. Исправление багов помогает вам развиваться, улучшает проект и повышает вашу ценность на рынке.
Так что, если сегодня вы застряли на проблеме, помните: если бы всё работало идеально, вашей работы просто не существовало бы🧑💻
#Продуктивность #BestPractices
Хотите сделать скролл плавным и приятным? Вам поможет CSS-свойство scroll-behavior.
Что делает scroll-behavior?
Свойство scroll-behavior управляет тем, как браузер прокручивает контент. Оно позволяет переключаться между мгновенным и плавным скроллингом.
Какие значения бывают?auto (по умолчанию): Скролл происходит мгновенно, без плавности.smooth: Скролл становится плавным
Пример:
html {
scroll-behavior: smooth;
}
scroll-behavior также работает в сочетании с методами JavaScript, такими как scrollTo или scrollIntoView.
document.querySelector('#button').addEventListener('click', () => {
document.querySelector('#section').scrollIntoView({
behavior: 'smooth'
});
});
А как вы относитесь к чату? Он уже есть, но пока он используется только для комментариев к постам. Давайте попробуем сделать его более активным? Возможно, в нём вы сможете найти ответы на свои вопросы по фронту или, наоборот, помочь кому-то.
Если интересно, то предлагаю вступить в чат(тык). А еще его можно найти в профиле канала 😏
Завершаем эту неделю постом, который, возможно, вдохновит кого-то покопаться в интересном проекте на выходных.
Может быть, кто-то помнит бородатые времена UCOZ? У них был довольно прикольный интерфейс в виде рабочего стола.
Я нашел интересный проект, который написан на чистом JavaScript и может быть поднят локально.
Что интересно:
— Написан на чистом JavaScript.
— Можно поднять локально.
— Работает как полноценная операционная система в браузере.
Репозиторий проекта: GitHub
Демонстрация: Puter.com
#JavaScript #OpenSource
Разберём Intersection Observer — это API для отслеживания появления элементов в зоне видимости.
Синтаксис выглядит так:
const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);
root — Контейнер, в пределах которого отслеживается пересечение. По умолчанию — null (viewport). rootMargin — Отступы вокруг контейнера, например, 50px 0px отслеживает на 50px раньше. threshold — Уровень видимости элемента (например, 0.5 для 50% видимости или массив значений [0, 0.5, 1], чтобы отслеживать видимость элемента на 0%, 50% и 100%).observe() — Начинает отслеживать указанный элемент. unobserve() — Прекращает отслеживание элемента. disconnect() — Полностью останавливает работу Observer. takeRecords() — Возвращает список всех записей о пересечении, которые ещё не были обработаны.entries — это массив объектов, содержащих информацию о каждом отслеживаемом элементе. entry — один из этих объектов. Вот его свойства:isIntersecting — true, если элемент пересёк границы видимости.target — сам элемент DOM, за которым ведётся наблюдение.boundingClientRect — размеры и положение элемента относительно viewport.intersectionRect — область пересечения элемента с видимой частью контейнера.rootBounds — размеры контейнера (root), если он указан.
Редкий атрибут, про который многие даже не слышали, — это reversed для <ol>. Довольно простая и базовая штука, но, возможно, однажды пригодится)
Что делает reversed?
Вы, наверное, догадались по названию, но если нет — атрибут reversed позволяет отображать элементы списка в обратном порядке нумерации. Вместо того чтобы начинать с единицы, счёт стартует с максимального числа и идёт вниз.
Как работает?
Добавьте этот атрибут к <ol>, например:
<ol>
<li>Первое место</li>
<li>Второе место</li>
<li>Третье место</li>
</ol>
3. Первое место
2. Второе место
1. Третье место
Закончим неделю на лайтовом посте, но который поможет сделать вашу жизнь немного продуктивнее 🧑💻 Многие из нас ведут заметки, но не всегда их удобно организовать и структурировать. Сегодня пост как раз про приложение, которое поможет решить эту проблему.
Obsidian — это инструмент для создания заметок, который превращает информацию в настоящую базу знаний.
Почему стоит попробовать Obsidian?
— Все записи полностью локальны и создаются в формате Markdown.
— Обсидиан позволяет связывать заметки друг с другом. Просто пишите [[Название заметки]], и вы создадите связь. А встроенный Graph View визуализирует всю вашу базу знаний в виде сети.
— Обширная библиотека плагинов позволяет добавлять задачи, трекеры, канбан-доски, базы данных, аналитику и многое другое.
Для чего и почему я использую Obsidian?
Я использую Obsidian для работы, ведения этого канала и структурирования своих мыслей. Можно сказать, что это моя персональная вики.
Кстати, этот пост не исключение и он тоже хранится у меня в заметках)
Скачать и попробовать Obsidian можно тут obsidian.md
Кто-то уже пробовал? Интересно узнать ваше мнение и рекомендации.
#Markdown #Продуктивность
Это среда, мои чуваки 🐸
Сегодня предлагаю разобраться с загрузкой и выполнением скриптов. Этот вопрос частенько всплывает на собеседованиях, но на практике мы редко сталкиваемся с ним, ведь почти всегда у нас есть одна точка входа. Однако понимание того, как работает загрузка, всё же важно и лучше разобраться.
Как работает загрузка без атрибутов?
Если вы подключаете скрипт обычным способом:
<script src="main.js"></script>
<head>, это заблокирует загрузку страницы, пока скрипт не будет загружен и выполнен. Это критично для производительности и серьезно влияет на пользовательский опыт. Наши заказчики будут серьезно недовольны)async и defer можно избежать блокировки парсинга HTML.
<script src="main.js" async></script>
<script src="main.js" defer></script>
defer и async работают только с внешними скриптами (src). Если вы напишете инлайн-скрипт, атрибуты проигнорируютсяtype="module" автоматически включает defer. async подходит для независимых скриптов, таких как аналитика, рекламные библиотеки, виджеты и трекеры.defer используется для скриптов, которые зависят от DOM или должны выполняться строго в порядке их подключения. Например, это основной код вашего приложения или скрипты с полифилами.async и defer дают простой способ улучшить производительность и не блокировать страницу.
Всех с понедельником 😭
Сегодня разберём задачу с собеседования про пропущенное число в массиве.
Условие задачи:
У нас есть неупорядоченный массив n-длины, содержащий числа от 1 до n+1. Одно из этих чисел отсутствует. Нужно найти пропущенное число.
Решение с сортировкой
Самый простой способ — отсортировать массив и сравнить его элементы с ожидаемой последовательностью чисел.
Алгоритм:
1. Отсортировать массив.
2. Пройти по нему и найти, где последовательность нарушается.
function findMissingNumberSort(arr) {
arr.sort((a, b) => a - b); // Сортируем массив
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== i + 1) {
return i + 1; // Если число не совпадает с ожидаемым
}
}
return arr.length + 1; // Если пропущено последнее число
}
console.log(findMissingNumberSort([3, 1, 4, 6, 2])); // 5
function findMissingNumberSum(arr) {
const n = arr.length + 1; // Учитываем пропущенное число
const expectedSum = (n * (n + 1)) / 2; // Ожидаемая сумма
const actualSum = arr.reduce((acc, num) => acc + num, 0); // Сумма массива
return expectedSum - actualSum; // Пропущенное число
}
console.log(findMissingNumberSum([3, 1, 4, 6, 2])); // Результат: 5
Сегодня коротко про один малоиспользуемый HTML-тег — <base>.
Этот тег задаёт базовый URL или целевое окно для всех относительных ссылок в документе.
Как он работает?
Тег <base> вставляется внутри <head> и имеет два атрибута:
1. href — задаёт базовый URL.
2. target — задаёт целевое окно (например, _blank, _self, _parent, _top).
<head>
<base href="https://truefrontender.t.me/" target="_blank">
</head>
<body>
<a href="about.html">О канале</a>
<img src="images/logo.png" alt="Логотип">
</body>
<base>.<base> для тестирования.<base> работает только один раз на документ. Если их несколько, браузер берёт только первый.<base>?
На собеседованиях нередко встречаются вопросы, связанные с ссылочными типами. Сегодня разберём одну из таких задач:
let obj1 = { name: "name 1" };
let obj2 = obj1;
obj1 = { name: "name 2" };
console.log(obj2);
{ name: 'name 1' }, рассмотрим по шагам, что происходит в коде:
let obj1 = { name: "name 1" };
let obj2 = obj1;
obj2 получает ту же ссылку, что и obj1. Обе переменные указывают на один и тот же объект в памяти.
obj1 = { name: "name 2" };
obj1 присваивается ссылка на новый объект { name: "name 2" }. При этом переменная obj2 продолжает ссылаться на первоначальный объект { name: "name 1" }.
console.log(obj2);
obj2 всё ещё ссылается на первый объект, в консоли будет выведено { name: "name 1" }.
Всем хороших выходных!
У меня это была одна из тяжёлых недель. Надеюсь, у вас прошло чуть лучше! 😅
А если вдруг захотите что-то обсудить, задать вопрос или просто поболтать — не забывайте, что у нас есть чат(перейти) ☕️
Увидимся на следующей неделе!
В прошлом посте мы говорили о writing-mode и его влиянии на направление текста. Но это только половина дела — теперь давайте разберёмся, как управлять ориентацией символов с помощью text-orientation.
Что такое text-orientation?
Свойство text-orientation управляет тем, как отображаются символы в вертикальных текстах. Оно определяет, будут ли буквы и знаки "стоять" вертикально или "лежать" горизонтально.
Поддерживаемые значения:
1. mixed (по умолчанию): буквы латиницы поворачиваются вертикально, а символы восточных языков остаются прямыми.
2. upright: все символы остаются вертикальными, даже латиница.
3. sideways: символы поворачиваются на 90° и "лежат" горизонтально.
Когда пригодится?
— Настройка типографики для восточных языков.
— Создание креативных макетов, таких как карточки с вертикальным текстом.
— Добавление эффектных дизайнерских решений, которые выделяют текст визуально.
Все примеры можно посмотреть тут JSFiddle / CodePen
#CSS
Если вы уже работали с числами в JS, то наверняка сталкивались с NaN. Сегодня разберем, что это такое, откуда оно берется и почему его поведение может сбивать с толку.
Что такое NaN? NaN — это специальное значение, которое указывает на то, что результат вычисления не является корректным числом, хотя его тип всё равно — number. Проще говоря, это невалидное число.
Когда появляется?
1. При некорректных математических операциях:
console.log('abc' / 2); // NaN — строка не может быть поделена на число
console.log(Math.sqrt(-1)); // NaN — нет квадратного корня из отрицательного числа
console.log(parseInt('hello')); // NaN
console.log(Number('world')); // NaN
console.log(NaN + 10); // NaN
console.log(NaN * 2); // NaN
typeof NaN === 'number'?
console.log(typeof NaN); // 'number'
NaN — это часть числового типа. Это означает, что NaN является специальным невалидным числом.NaN не равен ничему, даже самому себе:
console.log(NaN === NaN); // false
console.log(NaN == NaN); // false
NaN используется для обозначения некорректного значения, а некорректные значения не должны считаться равными.NaN не равен даже самому себе, обычные проверки не сработают. Вместо этого используйте Number.isNaN:
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN('abc')); // false — строка не NaN
isNaN, но она менее точна, так как пытается преобразовать значение в число:
console.log(isNaN('abc')); // true — преобразует 'abc' в NaN
console.log(Number.isNaN('abc')); // false
NaN — это особое значение, указывающее на ошибку в вычислениях, когда результат не может быть представлен как число. Number.isNaN и не забывайте валидировать входные данные, чтобы избежать ошибок.
Привет! Снова начнем неделю с чего-то простого? 🕺
Я хочу признаться, что часто путаюсь, когда слышу "параметры" и "аргументы". Что из этого что? Почему одни названия в одном месте, а другие в другом? Именно поэтому я хочу вместе с вами разобраться в этом вопросе и поставить жирную точку.
Параметры — это имена переменных, которые вы указываете в круглых скобках при объявлении функции. Они как "контейнеры", которые показывают, какие данные функция будет использовать.
Пример:
function greet(name) {
console.log(`Привет, ${name}!`);
}
name — это параметр. Он задаёт, что функция greet ожидает какое-то значение, но пока не знает, какое именно.
greet('TrueFrontender');
TrueFrontender — это аргумент, который подставляется в параметр name. Теперь функция знает, с чем ей работать.
Большинство из нас сталкивалось с задачей, когда нужно отформатировать вывод даты. Например, показать, когда было последнее изменение или указать, когда что-то произойдёт. Часто на проектах для этого пишут кастомные решения, но можно не изобретать велосипед и использовать встроенный инструмент Intl.RelativeTimeFormat.RelativeTimeFormat - это часть API Intl, которая позволяет форматировать относительное время для разных языков. Он поддерживает локализацию, поэтому вы можете сразу получить перевод фраз на нужный язык. Больше не придётся подключать библиотеки вроде i18n или вручную писать переводы.
Пример использования:
const rtf = new Intl.RelativeTimeFormat('ru', { numeric: 'always' });
console.log(rtf.format(-5, 'minute')); // "5 минут назад"
console.log(rtf.format(2, 'day')); // "через 2 дня"
Intl.RelativeTimeFormat принимает следующие аргументы:localeMatcher:numeric:style:format(value, unit) — Форматирует относительное время, где value — числовое значение (например, -1 или 2), а unit — единица времени (например, 'day' или 'month').formatToParts(value, unit) — Возвращает массив объектов с разбиением форматированного времени на части, где каждая часть описывает, например, число или текст.resolvedOptions() — Возвращает текущие настройки объекта, такие как locale, numeric, style.Intl.RelativeTimeFormat — это готовое решение, которое позволяет избавиться от сложной логики, сделать код чище и нативные методы для форматирования времени.
Давно не было постов про React. Пора это исправлять) Сегодня про встроенную поддержку метаданных в 19 версии реакта. Теперь можно легко задавать <title>, <meta> и <link> прямо внутри компонентов, без сторонних библиотек.
Что это за фича?
Раньше для изменения метаданных страницы нужно было использовать такие библиотеки, как react-helmet. Но теперь всё стало намного проще, так как React позволяет добавлять метаданные прямо в код компонента, а обновление тегов выполняется автоматически.
Как это работает?
Метаданные можно описывать прямо в JSX, и React автоматически добавит их в <head> страницы.
Пример:
const Post = ({ post }) => {
return (
<article>
<h1>{post.title}</h1>
<title>{post.title}</title>
<meta name="description" content={post.description} />
<meta name="keywords" content={post.keywords.join(', ')} />
<link rel="canonical" href={post.url} />
<p>{post.content}</p>
</article>
);
}
Всем привет 👋 Начнем эту неделю с очень простой темы)
Если вы хоть раз верстали, то наверняка сталкивались с тегами, которые не нужно закрывать. Сегодняшний пост как раз о них 🙂
Что это за элементы и как они называются?
Void-элементы— это тип HTML-элементов, которые не требуют закрывающего тега. Такие элементы предназначены для случаев, когда контент внутри недопустим. Например, <img> используется для добавления изображений, а <br> — для переноса строки.
Полный список void-элементов:<area> — для создания активных областей в <map>.<base> — задаёт базовый URL для документа.<br> — перенос строки.<col> — определяет колонки в таблицах.<embed> — для вставки мультимедиа-контента.<hr> — горизонтальная линия для разделения секций.<img> — для добавления изображений.<input> — для создания полей ввода.<link> — подключение внешних ресурсов, например, CSS.<meta> — метаинформация о документе.<source> — источник для <audio> и <video>.<track> — субтитры и текстовые дорожки для видео.<wbr> — возможный разрыв длинного слова.
На что обратить внимание?1. Не закрывайте void-элементы вручную:
<img src="photo.jpg"></img> <!-- Ошибка -->
2. Void-элементы не могут содержать вложений:
<hr>---</hr> <!-- Так нельзя -->
3. В HTML5 не нужно добавлять слэш перед закрытием:
<img src="example.jpg" alt="Описание"> <!-- Добавляем без слэша -->
Вчера я рассказывал про Intersection Observer , а сегодня подготовил пример его использования. С помощью Intersection Observer будем "печатать" текст, когда он попадает в зону видимости, и скрывать при прокрутке вверх.
Посмотреть пример можно тут JSFiddle / CodePen
#CSS #HTML #JavaScript
Сегодня кажется, что почти каждая команда работает по Scrum или чему-то приближенному. Но довольно часто вижу, что у многих из встреч остаются только базовые. Однако есть одна практика, о которой знают далеко не все — особенно если в вашей команде никогда не было скрам-мастера. Это встреча «Три амиго».
Что это за встреча?
Это встреча на которой пересекаются бизнес, разработка и тестирование, чтобы превратить идеи в понятные, четко сформулированные задачи.
Кто учавствует?
1. Бизнес — задаёт контекст и отвечает на главный вопрос: «Зачем это нужно?».
2. Разработчик — оценивает технические аспекты и предлагает: «Как это сделать?».
3. Тестировщик — добавляет перспективу качества и спрашивает: «Как проверить, что это работает правильно?».
Что происходит на встрече?
1. Разбираются пользовательские истории или фичи, чтобы у всех было единое понимание.
2. Выявляются «узкие места» в реализации, чтобы избежать сюрпризов.
3. Определяются четкие критерии готовности (DoD), чтобы не допустить размытых требований.
Когда эта встреча пригодится?
— Если задачи слишком размыты, встреча помогает превратить абстрактные идеи в четко сформулированные задачи.
— Когда в команде есть разногласия. Если разработчики, тестировщики и бизнес понимают задачу по-разному, такая встреча устранит недоразумения.
— При работе над сложными или технически рискованными фичами можно заранее выявить узкие места, оценить риски и спланировать, как их избежать.
— Когда сроки поджимают, четкое определение критериев готовности и понимание объёма работ помогут сосредоточиться на главном и избежать потери времени на лишние доработки.
— Если важно качество, тестировщики на встрече могут заранее обозначить свои ожидания от задачи, предложить тестовые сценарии и уточнить, как проверить, что всё сделано правильно.
Что в итоге?
Такие встречи помогают синхронизировать участников процесса, предотвратить недоразумения и экономить время на доработках.
Кто-то из вас участвовал в таких встречах? В моем опыте это довольно редкая практика.
Запущу опрос ниже, чтобы понять, насколько популярна эта практика)
#Scrum #Продуктивность #BestPractices
Наступают выходные, а это значит, что пора отдыхать 🍻
На всякий случай хочу сказать, что посты выходят только по будним дням, и следующий будет уже в понедельник.
А пока небольшая подборка старых интересных постов:
1. Разбор задачи с собеседования про анаграммы
2. Отложенная загрузка изображений
3. Простой лоадер для вашего сайта
Спасибо за ваши подписки и активность 🫶 Обнял, поднял ☺️
Хороших выходных, увидимся в понедельник 🤜
Простая, но невероятно милая анимация пульсирующего сердца❤️
Посмотреть реализацию можно тут CodePen
Сегодня про проблемы начинающих (и не только) разработчиков — использование transition: all. Это может казаться удобным, но на практике часто приносит больше вреда, чем пользы.
Почему transition: all проблема?
CSS-свойств много, и когда вы используете all, вы переходите в режим «а пусть плавно изменится всё». Это может вызвать неожиданные эффекты, если вы добавите или измените свойства в будущем.
Например:
button {
transition: all 0.3s ease;
}
button:hover {
background-color: #ff5722;
transform: scale(1.1);
}
box-shadow или добавите border? Всё будет анимироваться, даже если вы этого не хотите. В результате — неочевидный баг на проде.
button {
transition: background-color 0.3s ease, transform 0.3s ease;
}
background-color и transform.transition: all — это как "универсальный ключ", который вроде как открывает всё, но может сломать половину замков. Не ленитесь и всегда указывайте только нужные свойства.
Наконец-то закончилась эта долгая и тяжелая рабочая неделя… Надеюсь, у всех получилось хоть немного влиться в работу после праздников. Я уже успел устать 🥲
Продолжаем отдыхать и морально готовиться к тому, что следующие длинные выходные будут только в мае.
Спасибо, что остаетесь здесь, читаете и поддерживаете 🫶
Всем хороших выходных 🍻
Привет! 👋
Мы довольно часто сталкиваемся с таблицами, и сегодня пост о свойстве table-layout, которое определяет, как браузер вычисляет ширину столбцов в таблицах.table-layout — это CSS-свойство, которое определяет, как браузер должен рассчитывать ширину столбцов в таблице.
Оно имеет два возможных значения:
1. table-layout: auto;
При значении auto ширина столбцов определяется на основе их содержимого. Браузер сначала анализирует данные в таблице, чтобы рассчитать ширину каждого столбца, а затем отрисовывает её. Ширина таблицы зависит от контента в каждой ячейке, а сама таблица подстраивается под содержимое динамически.
2. table-layout: fixed;
При значении fixed ширина столбцов определяется заранее — на основе ширины таблицы и возможных указанных ширин столбцов (<col> или <th>). Контент внутри ячеек больше не влияет на ширину столбца. Ширина столбцов фиксируется сразу после загрузки страницы. Контент, который не помещается, просто обрезается или переносится (в зависимости от свойств колонки).
Главное отличие:
При использовании table-layout: fixed таблица загружается быстрее, потому что ширина столбцов вычисляется сразу. А со значением auto браузер должен сначала обработать всё содержимое таблицы, чтобы вычислить ширину столбцов.
Я подготовил пример, где вы можете изменять ширину таблиц с помощью ползунка. Попробовать можно тут JSFiddle(клик)/Codepen(клик)
@TrueFrontender #CSS #HTML