1070
Сборная солянка про фронтенд. JavaScript, React, TypeScript, HTML, CSS — здесь обсуждаем всё, что связано с веб-разработкой! Связь: @pmowq
GitHub — это не просто репозитории, но и ваша визитная карточка. Круто оформленный профиль привлекает внимание и делает вас заметнее среди разработчиков.
📌 Как добавить README.md в профиль?
1. Создайте репозиторий с именем, совпадающим с вашим ником (например, github.com/your-username/your-username).
2. Добавьте в него README.md, и он появится в профиле.
📌 Генераторы профилей
— GitHub Profile Readme Generator
— ProfileMe.dev
— GPRM
Привет! Давно не было реакта. Давайте начнем эту неделю с него)
В React часто нужно привязывать id к элементам, например, для <label> и <input>. Хардкодить id или генерировать их вручную неудобно. В таких случаях поможет хук useId.
Как работает useId?useId — это хук, который генерирует уникальный идентификатор, оставаясь предсказуемым при ререндере.
import { useId } from "react";
export function Form() {
const id = useId();
return (
<div>
<label htmlFor={id}>Имя:</label>
<input id={id} type="text" />
</div>
);
}
id для <input> будет уникальным для каждого инстанса компонента, но при этом не будет меняться при ререндере, что важно для правильной работы формы.id, создавая уникальные идентификаторы для каждого экземпляра компонента.id.id, упрощая поддержку кода и предотвращая ошибки при масштабировании компонентов.<label> и <input>, чтобы корректно связать их aria-labelledby, aria-describedby) id в списках без конфликтов id, которые должны быть одинаковыми в разных компонентах useId полезен в формах, сложных UI-компонентах, списках и ARIA-атрибутах. Он избавляет от необходимости хардкодить id и снижает вероятность дублирования.
Каждый из нас хотя бы раз сталкивался с конструкторами в классах. Например, когда вы создаёте новый объект, используя new, конструктор автоматически инициализирует его свойства. Но знали ли вы, что до появления классов (ES6) в JavaScript существовали функции-конструкторы?
Обязательно дочитайте пост до конца! Это одна из базовых концепций JavaScript, которая помогает глубже понять, как работает язык. А если вы готовитесь к собеседованиям, эта тема точно пригодится: вопросы про функции-конструкторы и прототипы встречаются практически везде.
Что такое функция-конструктор?
Функция-конструктор — это обычная функция, которая используется для создания новых объектов. Она вызывается с помощью оператора new, и при этом:
1. Создаётся новый пустой объект.
2. Новый объект связывается с прототипом функции.
3. Выполняется код внутри функции, где this ссылается на созданный объект.
4. Возвращается созданный объект.
Пример:
function Car(model, year) {
this.model = model;
this.year = year;
this.info = function() {
console.log(`Модель: ${this.model}, Год: ${this.year}`);
};
}
const myCar = new Car('Tesla', 2023);
myCar.info(); // Модель: Tesla, Год: 2023
new, this будет указывать на глобальный объект(window).
function Car(model, year) {
this.model = model;
this.year = year;
}
const car = Car('Tesla', 2023); // Забыли new
console.log(car); // undefined
console.log(window.model); // 'Tesla' (в браузере)
this используется без new.
function Car(model, year) {
this.model = model;
this.year = year;
}
Car.prototype.info = function() {
console.log(`Модель: ${this.model}, Год: ${this.year}`);
};
new при вызове функции.
Нашел классную демку на чистом CSS. Сам никогда не умел такие штуки верстать и всегда впечатляюсь возможностями CSS. Возможно, у кого-то есть интересные примеры или свои работы? Делитесь в комментариях ☕️
Демо: CodePen 😮
Привет! Стартуем неделю с решения задач 🎹
Одной из часто задаваемых задач на собеседованиях является реализация функции debounce. Она помогает эффективно обрабатывать частые события, такие как ввод текста или прокрутка страницы. В этом посте мы разберем, что это за функция и как ее реализовать.
Что такое debounce?debounce — это техника, при которой мы ограничиваем частоту выполнения функции, даже если событие (например, клик мышью или ввод текста) происходит многократно за короткое время. Таким образом, мы не перегружаем приложение частыми вызовами функций, а ждем паузы между событиями.
Пример из реального приложения:
Представьте, что у нас есть поисковое поле. При каждом вводе текста мы можем делать запрос на сервер. Если ввод идет быстро, можно отправить запрос только после того, как пользователь закончит вводить текст, а не на каждую букву.
Задача:
Напишите функцию debounce. Эта функция должна задерживать выполнение другой функции до тех пор, пока не прекратится последовательность событий.
Реализация:
const debounce = (func, timeout) => { // 1
let timer;
return (...args) => {
clearTimeout(timer); // 2
timer = setTimeout(() => {
func.apply(this, args); // 3
}, timeout);
};
}
func) и время задержки (timeout)clearTimeout и setTimeout. Каждый раз, когда происходит новое событие, мы очищаем старый таймер с помощью clearTimeout(timer), чтобы отменить выполнение предыдущей функции. Затем мы устанавливаем новый таймер с помощью setTimeout, который вызовет функцию после задержки.apply(this, args) для того, чтобы вызвать переданную функцию с тем же контекстом (this), который был в момент вызова обернутой функции. Это важно, если func использует this, например, в методах классов.
const handleSearch = (query) => {
console.log(query);
};
const debouncedSearch = debounce(handleSearch, 500);
document.getElementById('search-input').addEventListener('input', (e) => {
debouncedSearch(e.target.value); // Вызовем функцию только через 500 мс после последнего ввода
});
debounce помогает избежать лишних вызовов функций, тем самым снижая нагрузку. Используя debounce, мы минимизируем количество запросов и повышаем производительность приложения.
Сегодня о концепции, которая уже сейчас вызывает много обсуждений – signals. Что это такое, почему это может изменить ваш подход к управлению состоянием.
Что такое Signals?
Signals – это реактивные примитивы, позволяющие:
1. Декларативно хранить состояние. Вместо традиционных хуков, таких как useState или useEffect, вы работаете с сигналами, которые автоматически отслеживают изменения.
2. Минимизировать лишние перерисовки. Обновляются только те компоненты, которые непосредственно зависят от изменившегося значения.
3. Упростить логику обновления интерфейса. Благодаря более явной зависимости между данными и представлением, ваш код становится чище и понятнее.
Такой подход уже применяется в фреймворках, как SolidJS или Preact, и его адаптация для React открывает новые возможности для повышения производительности и удобства разработки.
Как использовать Signals в реакте?
1. Установите пакет @preact/signals-react.
2. Настройте вашу сборку или используйте хук useSignals
3. Импортируйте функцию signal из пакета и создайте реактивное значение:
import React from 'react';
import { signal } from '@preact/signals-react';
const count = signal(0);
function Counter() {
return (
<div>
<h3>Счетчик: {count.value}</h3>
<button onClick={() => count.value++}>Увеличить</button>
</div>
);
}
export default Counter;
signal(0) создаёт реактивное значение count с начальным значением 0.count.value, избавляя вас от необходимости использовать setState или другие хуки для управления обновлением UI.@preact/signals-react предлагает новый способ управления состоянием, позволяя создавать более декларативный и эффективный код за счёт автоматического и точечного обновления компонентов.
Сегодня о том, как правильно клонировать объекты в JS.
При обычном (поверхностном) клонировании создаётся новый объект, но ссылочные типы данных (массивы, вложенные объекты и т.д.) всё ещё будут ссылаться на исходные данные. Если изменить что-то в скопированном объекте, это может повлиять на оригинал.
В случае глубокого клонирования мы полностью копируем все уровни вложенности, и изменения в новом объекте никак не затронут оригинальный.
Способы глубокого клонирования:
1. JSON.stringify + JSON.parse
Этот метод простой и часто используется, но имеет ограничения:
const original = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(original));
console.log(clone); // { a: 1, b: { c: 2 } }
Date, Map, Set и т.д.
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
const copy = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = deepClone(obj[key]);
}
}
return copy;
}
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
console.log(clone); // { a: 1, b: { c: 2 } }
structuredClone. Он встроен в JavaScript и поддерживает большинство типов данных, включая Date, Map, Set и даже циклические ссылки.
const original = { a: 1, b: { c: 2 }, d: new Date() };
const clone = structuredClone(original);
console.log(clone); // { a: 1, b: { c: 2 }, d: Date }
Всем хорошей пятницы и выходных!
Заканчивайте работать и учиться программированию. Проведите этот вечер со второй половинкой или с собой любимым ❤️
А еще напоминаю, что посты возобновятся в понедельник. На выходных у меня выходной 🏝
Как правильно указывать источник цитаты? Со стороны семантики будет правильно использваит cite. В этом посте постараемся разобраться как его использовать.
Что такое тег <cite>?
Тег <cite> предназначен для обозначения названия какого-либо произведения или источника. Это может быть:
— Книга
— Статья
— Ресурс в интернете
— Исследовательская работа
Основная идея — дать понять браузеру и поисковым системам, что данный фрагмент текста является названием творческого произведения или источника информации.
Пример использования:
<p> В своем посте автор ссылается на канал <cite>True Frontender</cite>, где подробно рассматриваются вопросы фронтенда. </p>
<cite> следует применять для обозначения названий произведений или источников информации. Его не стоит использовать для выделения имен авторов или других текстовых фрагментов, не являющихся названиями.<cite> помогает поисковым системам и вспомогательным технологиям (например, экранным ридерам) понять, что данный элемент содержит информацию об источнике. cite, который используется с тегами <blockquote> и <q> для указания URL источника цитируемого материала. Он никак не связан с тегом <cite>, предназначенным для оформления названий произведений.<cite> помогает:
На собеседованиях нередко встречаются вопросы, связанные с ссылочными типами. Сегодня разберём одну из таких задач:
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 — это готовое решение, которое позволяет избавиться от сложной логики, сделать код чище и нативные методы для форматирования времени.
На прошлой неделе мы разбирали(тык) метод call. Сегодня поговорим ещё об одном его применении — заимствовании методов.
Что такое заимствование методов?
Заимствование методов — это техника, при которой мы берём метод из одного объекта и используем его в другом, у которого этого метода нет. Такой приём пригодится, например, при работе с псевдомассивами (arguments, NodeList) или объектами, у которых отсутствуют нужные методы.
Заимствование методов массива
Бывает, что приходится работать с псевдомассивами, у которых нет методов массива.
Пример:
function logArguments() {
Array.prototype.forEach.call(arguments, (arg) => console.log(arg));
}
logArguments(1, 2, 3); // 1, 2, 3
Array.prototype.forEach — это метод массива. Обычные массивы могут вызывать его напрямую. arguments — это псевдомассив, у которого нет метода forEach. forEach у массива, вызывая его через call. call(arguments, callback) устанавливает this внутри forEach как arguments, и теперь каждый элемент передаётся в коллбэк, как если бы arguments был массивом.
Все закончили работать? Надеюсь, что да 🥪
Как вам посты на этой неделе? Если понравились, то поддержите реакциями на этот пост и проставьте на прошлые, если вдруг не ставили.
Ваши реакции и комментарии — это лучшая мотивация продолжать ❤️
А ещё снова напоминаю, что у нас есть чат @TrueFrontenderChat 👉
Всем хороших выходных 🫶
Когда нам нужно сравнить строки с учетом локали, метод localeCompare может стать идеальным инструментом.
Что такое localeCompare?
Метод localeCompare сравнивает две строки с учетом локали, то есть с учетом специфики алфавита и правил сортировки в определенном языке или регионе.
Синтаксис:
str1.localeCompare(str2, locales, options)
str1: первая строка, которую вы хотите сравнить.str2: вторая строка для сравнения.locales: (необязательный) строка или массив строк, представляющий локаль или локали, для которых будет выполнено сравнение.options: (необязательный) объект, который может включать такие параметры, как чувствительность к регистру и направление сортировки.localeCompare?str1 меньше str2.str1 больше str2.
const str1 = 'apple';
const str2 = 'banana';
console.log(str1.localeCompare(str2)); // -1 (apple < banana)
options можно настроить дополнительные параметры:base: игнорирует различия в регистрах и акцентах.accent: игнорирует только различия в акцентах.case: игнорирует только различия в регистре.variant: чувствительно ко всем различиям.localeCompare поможет правильно сортировать и сравнивать данные, поступающие от пользователя.
const words = ['ЯблОко', 'АнАнАс', 'ёж', 'грушА'];
words.sort((a, b) => a.localeCompare(b, 'ru', { sensitivity: 'case' }));
console.log(words); // ['АнАнАс', 'грушА', 'ёж', 'ЯблОко']
'ru', чтобы корректно отсортировать слова с учетом русской сортировки.sensitivity: 'case' указывает, что регистр символов имеет значение при сравнении строк.
В JavaScript есть несколько методов, которые позволяют управлять контекстом исполнения функции. Один из них — это метод call. Что он делает и зачем он нужен?call — это метод, который позволяет вам вызвать функцию с конкретным значением this и передать аргументы в неё. Простыми словами, он даёт возможность контролировать, в каком контексте будет выполняться функция.
Синтаксис:
functionName.call(thisArg, arg1, arg2, ...);
thisArg — объект, который будет использован в качестве this в функции.arg1, arg2, ... — аргументы, которые передаются в вызываемую функцию.
function greet() {
console.log(`Привет, ${this.name}!`);
}
const person = {
name: 'Иван'
};
// Вызовем функцию с использованием call, указав, что контекстом функции будет объект person
greet.call(person); // Привет, Иван!
call устанавливает this в контексте объекта person, что позволяет функции greet обращаться к свойствам этого объекта.call:call может принимать не только контекст, но и дополнительные аргументы, которые будут переданы в вызываемую функцию. Например:
function sum(a, b) {
console.log(a + b);
}
sum.call(null, 5, 3); // 8
null в качестве первого аргумента указывает, что this не будет использоваться в функции sum, и просто передаются значения 5 и 3.call — это способ контролировать контекст исполнения функции. Это полезно в случаях, когда нужно явно указать, какой объект будет использоваться в качестве this.
Читать полностью…
Всем хорошего вечера и отличных выходных!
Новые посты будут на следующей неделе, а на выходных отдыхаем 🙃
Если у вас есть вопросы или пожелания, всегда можете написать в нашем чате(перейти) 🧑💻
Привет! А вы заметили, что вчера не было поста? Причину отсутствия я написал в нашем чате(тык).
Сегодня продолжаем посты! Представьте, что вам нужно создать сложную строку с переменными, многострочным текстом или даже HTML-разметкой. Раньше для этого приходилось использовать конкатенацию (+) и \n для переноса строк. К счастью, начиная с ES6, у нас есть шаблонные строки которые решают все эти проблемы.
Что такое шаблонные строки?
Шаблонные строки — это способ создания строк с использованием обратных кавычек (`). Они позволяют:
1. Вставлять переменные и выражения прямо внутри строки.
2. Разбивать строки на несколько строк без использования специальных символов.
Синтаксис:
текст ${выражение} текст
const name = 'Кирилл';
const age = 42;
// Без шаблонных строк
console.log('Меня зовут ' + name + ' и мне ' + age + ' года.');
// С шаблонными строками
console.log(`Меня зовут ${name} и мне ${age} года.`);
// Без шаблонных строк
console.log('Это первая строка.\n' +
'Это вторая строка.\n' +
'Это третья строка.');
// С шаблонными строками
console.log(`Это первая строка.
Это вторая строка.
Это третья строка.`);
\n
const a = 10;
const b = 5;
console.log(`Сумма равна ${a + b}.`);
console.log(`Результат: ${a > b ? 'a больше b' : 'b больше a'}`);
${}
const user = {
name: 'Кирилл',
age: 42,
};
const html = `
<div class="user-card">
<h2>${user.name}</h2>
<p>Возраст: ${user.age}</p>
</div>
`;
document.body.innerHTML = html;
const channelName = 'True Frontender'; // Название канала
const subscriberCount = 1087; // Количество подписчиков
const theme = 'Frontend'; // Тематика канала
Канал: True Frontender
Тематика: Frontend
Подписчики: 1087
Привет! Отдохнули? А теперь можно и задачи порешать 👨💻
Сегодня у нас задача, которая проверит понимание работы блоков try, catch и finally. Я взял ее с собеседования на позицию мидла.
Рассмотрим следующую функцию:
function someFn() {
try {
if (Math.random() <= 0.5) {
throw new Error("error");
}
return 1;
} catch (e) {
return 2;
} finally {
return 3;
}
}
console.log(someFn());
try, catch и finally:Math.random() <= 0.5 истинно, выбрасывается ошибка с помощью throw new Error("error").return 1.try была выброшена ошибка.catch, где возвращается значение 2.finally всегда выполняется, независимо от того, произошла ли ошибка или нет.finally есть оператор return, он перезапишет любое значение, которое было возвращено ранее.try или catch, значение, которое вернёт функция, всегда будет определяться блоком finally. Поскольку в блоке finally стоит return 3, именно это значение будет возвращено функцией.
Вью или Реакт? Вот в чем вопрос!
Настало время выяснить, какой фреймворк лучше: Vue или React? Запускаю опрос ниже, чтобы узнать ваше мнение)
Делитесь своим опытом и аргументами в комментариях, а также вступайте(тык) в наш чат для обсуждения)
Нейминг — это большая наша проблема. Сегодня пост про нейминг классов)
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'
});
});