em и rem — нужны ли вообще?

Привет фронтендерам! 👋

♾ Сегодня разбираемся с em и rem: зачем нужны и нужны ли вообще.

EM:
➡️ Используется для указания размера шрифта, отступов или размеров относительно размера шрифта родительского элемента. Например, если у контейнера будет размер шрифта 20px, а у дочернего элемента — 2em, то у последнего он будет 40px. У дочернего элемента можно задавать эти единицы не только в размере шрифта, но и в отступах, размерах. Но зависеть они будут всегда от размера шрифта родительского элемента.

.parent {
    font-size: 20px;
}
.child {
    margin-top: 2em;
    /* 40px */
}

REM:
➡️ То же самое, но зависит от дефолтного размера шрифта браузера. Пример: если базовый размер шрифта 14px, а у любого элемента какой-либо из размеров 1rem, то он будет 14×1=14px.

/* Размер шрифта браузера — 14px */
.element {
    font-size: 2rem; /* 28px */
}

🤷 Я прочитал в Интернете, что эти единицы измерения идеальны для разработки сложных веб-приложений с автоматически подстраивающимися размерами... Я ничего не понял. Я их не использую в работе, но теперь и я, и вы будем о них знать. Напишу вам, когда понадобятся :)

em и rem все-таки нужны! :)

Привет фронтендерам! 👋

💬 Я никак не мог понять, что такое «хорошая практика», когда читал об использовании относительных единиц в CSS, но нашел на Reddit реальный пример: масштабирование страницы с помощью rem. Какой-то команде потребовалось уменьшить шрифт на всей странице, чтобы отображать больше контента. Благо, сайт был написан с помощью em и rem, так что им пришлось менять лишь одну строчку кода — размер шрифта html.

👍 По сути, ничего незаменимого эти единицы не делают — но как раз на таких мелочах и растет скорость разработки.

🔗 Пост на Reddit

#фишки
#CSS

git checkout VS git branch -M: разбираемся раз и навсегда

Привет фронтендерам! 👋

👆 Это очень частая путаница в Git, но эти команды разные.

git checkout:

Используется для переключения ветки, например с master на main. git checkout -b [имя ветки] создает новую ветку и сразу переключается на нее.

git checkout
git checkout -b [имя ветки]

git branch -M main:

Используется для форсированного переименования текущей ветки. Например, сейчас вы на ветке master, пишете:

git branch -M main

...и ваша ветка (та же самая!) теперь называется main.

👂 Меня это ну ооочень сильно запутало, так как при создании репозитория в GitHub предлагается написать git branch -M main, и когда я проверял текущую ветку командой git branch или git branch --show-current, я получал разные результаты, и думал, что я поменял ветку. Типа:

git branch
master
git branch -M main
git branch
main

#фишки
#Git

Как я макет захотел поверстать

Привет фронтендерам! 👋

💪 Решил я «подкачаться к лету» и вспомнить навыки верстки, сверстав три макета. Думал, что это самый легкий, но сразу же на первом экране пришлось учиться использовать CSS mask, заняло час.

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

🔗 Ссылка на Figma

#макет

Привет фронтендерам! 👋

🏓 Друг завел блог о себе и его папе — чемпионе России по настольному теннису.

Подпишитесь :)

Привет фронтендерам! 👋

🕛 Долго не постил, потому что не очень понимал, что происходит щас, ИИ заменяет всех. Кстати, я нашел сайт arena.ai, он вроде для тестирования LLM, но он спокойно генерит код от нейронок на выбор, хоть Gemini, хоть Claude Opus 4.6-Thinking. Не очень понял, в чем там прикол :)

🗿 Туториалы по фронтенду, которые я хотел выпускать, как-то обесценились, единственное, что вроде как актуально — Git. Хочу сделать туториал про его самую базу. Но еще можно сделать что-то вроде безумно быстрого курса по HTML и CSS, я в свое время так с ними долго мучился, что считаю себя почти экспертом в них :)

🧑‍💻 Возможно, это явление закономерно, и пережили же как-то люди появление калькуляторов, значит, и это переживем. Но у калькулятора новая версия каждый месяц не выходила, насколько я знаю.

🗿🗿🗿 Короче, мне еще непонятно, че делать с ИИ, кодить самому и просить у него помощи, ненавидить его и не следить за такой перспективой или ставить Cursor AI и удалять VS Code. Ну, поживем увидим.

💬 Делитесь своим мнением про ИИ в комментарии👇

#мысль

Привет фронтендерам! 👋

👨‍🏫 Давно хотел выучить TypeScript, сегодня наконец-то себя заставил. Пока что смотрю курс Юрия Ключевского, он легенда, рекомендую. Как я себя заставил, учитывая, что ИИ, даже если его не просить, всегда пишет на TS? А мне Gemini сказал, что для оркестрирования LLM (это типа ультра-продвинутый и умный вайб-кодинг) на JS нужен TS, React и Next (и Node). Работаем👌

🗿 Решил сделать в Obsidian шпаргалку, если смогу ее доделать, выложу в открытый доступ.

Всем удачи!

P. S. Я так и не понял пока что, нафиг мне эта ваша строгая типизация, горького опыта с продакшн у меня нет :)

#яУчусь

Привет фронтендерам! 👋

⌨ Сегодня ввожу новую рубрику 'учуTS'. Здесь я буду показывать, что прикольно, что не получалось, и мое видение, зачем мне вообще нужен TypeScript (я пока что так и не понял).

Итак, #учуTS день 0.

0⃣ Почему 0? Потому что я начал учить его еще месяц назад, но забросил. Сейчас расскажу почему.

👨‍💻 Итак, я начал смотреть курс, написал первые две строчки кода, скомпилировал в JS, настроил файл tsconfig.json для автоматической компиляции, а потом решил поиграться с типами сам, и что-то там не так получилось. Я удалил весь код, весь JavaScript и все в корне проекта. Создал заново, написал такой код:

let name = string: 'Mark';
console.log(name);

😬 И в терминале у меня сразу ошибка: name is deprecated в каком-то файле. Я сразу подумал, что это какая-то строгость TS типа я уже писал эту переменную до удаления. Зашел в указанный файл и удалил строчку с deprecation.

💻 В интернете прочитал, что TypeScript может не давать назвать переменную name из каких-то там умных соображений. Я расстроился и пошел играть в Minecraft. Вчера открыл курс еще раз, и понял, почему у Юрия не блокировалось, а у меня блокировалось: У НЕГО ПЕРЕМЕННАЯ НАЗЫВАЛАСЬ UserName!!! Ну вот я обрадовался и сделал себе контента на день 1, еще расскажу.

🙃 Но вот мне сейчас очень интересно: а что там с тем файлом, где я удалил строчку с name deprecated? Кажется, придется восстанавливать.

1⃣ Ну вроде все, увидимся в "дне 1" :)

Ну разве я мог не выложить это???

Привет фронтендерам! 👋

#учуTS день 1

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

Вот и все :)