#фронтенд_лайфхак
Александр Ламков — Friendly Frontend のテレグラム投稿
{ Frontend-разработка } простыми словами
Авторский канал с полезными материалами по фронтенду и новостями ютуб-канала
💬 Чат нашего коммьюнити:
https://t.me/friendlyFrontendChat
📺 YouTube:
https://www.youtube.com/@AleksanderLamkov
Авторский канал с полезными материалами по фронтенду и новостями ютуб-канала
💬 Чат нашего коммьюнити:
https://t.me/friendlyFrontendChat
📺 YouTube:
https://www.youtube.com/@AleksanderLamkov
2,677 人の購読者
61 枚の写真
1 本の動画
最終更新日 11.03.2025 07:37
類似チャンネル
4,371 人の購読者
4,146 人の購読者
2,123 人の購読者
Александр Ламков — Friendly Frontend によってTelegramで共有された最新のコンテンツ
#фронтенд_лайфхак
Нет, ну вы видели, что там творится, например, во фронтендерском roadmap sh!? Десятки и сотни (если нырять вглубь отдельных технологий) пунктов!
Роадмап — не маст-хэв список технологий для входа в профессию. Родмап — ориентир, чтобы было понятно, за какую технологию можно взяться, когда возникает желание «что-то поучить».
Но что на счет всего остального? Нужно ли начинающему фронту учить Docker? NextJS? А NodeJS? А может все фреймворки мира заодно?
Давайте начистоту. Мало какой даже опытный специалист изучил все технологии по роадмапу своего направления.
Я 4.5 года назад получал свои честные 25-40 тысяч рублей, зная HTML, CSS, немножко Sass и поверхностный JS вперемешку с jQuery. Спустя год на новой работе к списку технологий добавился WebPack и чуть позже — React с Redux. А дальше? А дальше вообще не важно. Там и TS и вся экосистема React подтянулась. Но всё это появилось в моем стеке без каких-то конкретных роадмапов. Я просто сталкивался с технологиями, которые стали мне нужны в работе и шаг за шагом учился применять их на практике.
И не важно как изменился рынок за эти годы. Подход к выбору технологий у меня до сих пор такой же — я начинаю учить что-то новое только, если того требует моя работа.
#совет_новичкам #рефлексия_о_фронтенде
👉 Мощная практика перед изучением React
🔥 Вас ждёт Vite / Minista, шаблонизатор JSX, Sass, БЭМ и очень много JavaScript!
#анонс_видео
Часто встречаю в CSS-коде новичков подобный сброс стилей:
*,
*::before,
*::after {
margin: 0;
padding: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
box-sizing: border-box;
}
1) Селекторы к псевдоэлементам с привязкой к универсальному селектору «звездочке» избыточны. Можно обратиться к
before и after напрямую — так селектор к ним будет менее специфичным. 2) Многие теги, которые выбираются таким обобщенным селектором, а так же оба псевдоэлемента, и так по умолчанию не имеют ни рамок, ни фона, ни внешних или внутренних отступов. Какой смысл сбрасывать
margin-left в ноль для элемента <h1>? Вот и я не знаю. Да и даже тем элементам, у которых есть, к примеру, внешние отступы сверху и снизу (а это теги заголовков всех уровней), сброс в 0 нужно делать иначе — выбирать нужно лишь элементы с атрибутом class и обрамлять селектор нужно псевдоклассом :where() для минимизации специфичности.
font и color относятся к категории наследуемых, а это значит, что можно задать их, например, для body и всё так же будет прекрасно работать. Да, есть элементы, для которых font браузером задается точечно — input, textarea, select и button. Для них не помешает отдельный селектор с перечислением этих тегов. С учётом вышеупомянутых правок «правильный» код будет таким:
*,
::before,
::after {
box-sizing: border-box;
}
input,
textarea,
select,
button {
font: inherit;
}
:where(
h1,
h2,
h3,
h4,
h5,
h6
):where([class]) {
margin-block: 0;
}
Да, чтобы сброс / нормализация стилей была более правильной, нужно больше кода.
Но если вы не хотите с этим всем заморачиваться, порекомендую вам мой собственный css-normalize, который я год назад написал в рамках курса по CSS и до сего момента внёс в код множество полезных правок. Каждая строчка объяснена, так что не потеряетесь, если будет желание разобраться подробнее.
#совет_новичкам
#фронтенд_лайфхак
#фронтенд_лайфхак
P. S. Все эти рассуждения нацелены на помощь с выбором нового устройства, если у вас сейчас нет никакого подходящего девайса «для кодинга». На самом то деле в начале карьерного пути совершенно не важно, макбук последней модели у вас или же древний ПК, собранный в далеком 2010-м. Если ваш комп тянет Chrome и VSCode (или хотя бы условный NotePad++ / Sublime), то прокачивать свои навыки во фронтенде вам ничто не мешает.
#совет_новичкам
#фронтенд_лайфхак
#фронтенд_новинка
На примере фронтенда.
Чет все ломается / ничего не работает, помогите!
*кидает фото со случайным кодом, сделанное на тапок*
В мобильной версии браузера Safari (iOS 17.4) ломается вёрстка в таблицах. Добавил на <tr> градиент на фон, а он почему-то применяется к каждой ячейке по отдельности (см. скрин №1). Пробовал решить вопрос через псевдоэлемент (сначала к <tr>, затем к первой ячейке таблицы) — это не срабатывает (см. скрин №2). В других браузерах всё ок (см. скрин №3).
*прикладывает скриншот изначальной проблемы при открытом DevTools*
*прикладывает скриншот попытки решения проблемы*
*прикладывает скриншот того как надо правильно*
#совет_новичкам
