Александр Ламков — Friendly Frontend

💎 Градиентный текст через CSS — 100% рабочий метод

➡️ https://youtube.com/shorts/y_3FDLEiHGg

#фронтенд_лайфхак

😡 Почему мне противен Tailwind [Часть 1 / 2]

Рефлексии пост. Меньше технического, больше про эмоции.

Сразу зайду с аналогии.

🤠 Вы научились читать, писать, говорить на своём родном языке. И вам это нравится. Вы получаете удовольствие от чтения книг, просмотра кино и от общения с родными и близкими. Вы получаете это удовольствие благодаря тому, что когда-то давным давно освоили базовый навык всех современных человеков — язык и речь в целом.

🥺 А теперь представьте, что внезапно читать / писать / говорить на вашем языке становится немодно, ведь есть способ гораздо «лучше» — многие вас в этом убеждают. И этот модный язык — дикий коктейль из зумерского, геймерского, возможно даже инопланетного, в общем-то, максимально неестественного для вас диалекта.

Tailwind для меня — нелепое переизобретение прекрасного CSS.

😠 Я считаю, что достаточно хорошо владею CSS и для меня он предельно прост и понятен. Я пишу его быстро, решая какие-либо задачи по разработке интерфейсов. Так же быстро я могу разобраться в чужом CSS-коде — да что там не понять то, ведь читается всё как книга. А из-за того, что у меня всё хорошо получается при работе с CSS, я получаю от взаимодействия с ним приличную порцию кайфа.

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

Претензия номер раз.

😑 А НИКОГО НЕ СМУЩАЕТ, что Tailwind — это отдельный язык, который НАДО учить, если хочешь выполнять свою работу быстро и качественно?

Да, формально это просто библиотека CSS-селекторов, но давайте начистоту...

Класс after:dark:via-[#0141ff] — это далеко не очевидный набор букв, символов и цифр, это шифр, который надо посидеть-поразбирать, прежде чем самостоятельно написать нечто подобное, чтобы получить определенный ожидаемый очевидный результат.

Спасибо, я не хочу учить новый язык. Я и так хорошо знаю CSS.

Претензия номер два.

🥺 А НИКОГО НЕ СМУЩАЕТ, что в DevTools вкладке Elements на DOM-дерево без слёз не взглянешь?

На минуточку: копошение в девтулзах — большая часть моей (и любого фронтендера) работы.

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

Я убеждён, что адепты Tailwind искренне ненавидят CSS и вёрстку как процесс. Понять я их могу, но в их рядах меня вы никогда не увидите. Я продолжу писать качественный CSS и получать от этого удовольствие.

P. S. В следующей части разберу технические преимущества TW и расскажу, почему для меня они — пшик.

P. P. S. Выскажите своё мнение на счёт этой библиотеки в комментах, пожалуйста! 🙂

#рефлексия_о_фронтенде

🥱 Скролл страницы через виджет карты — фронтенд-лайфхак

➡️ https://youtube.com/shorts/vdd5e2Fc_WE

[CodePen с примером проблемы]

#фронтенд_лайфхак

😬 Вы не так воспринимаете роадмапы по разработке!

Нет, ну вы видели, что там творится, например, во фронтендерском roadmap sh!? Десятки и сотни (если нырять вглубь отдельных технологий) пунктов!

👀 А в комментариях под видео на эти темы (в т. ч. под моим) вечно возникают почемучки «а правда надо всё-всё это учить???» и отчаянные отказники «да вы че, я это за всю жизнь не выучу же, лучше я останусь на своем заводе, шел бы этот фронтенд на три буквы!!1».

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

🥱 Да, первые парочку технологии в каждом таком списке — это, так называемая, база. Ну нельзя назваться фронтендером и претендовать на работу без знаний (а главное — умений) применять на практике HTML, CSS, JS и актуальный фреймворк, чтобы с помощью этих вещей решать задачи бизнеса.

Но что на счет всего остального? Нужно ли начинающему фронту учить Docker? NextJS? А NodeJS? А может все фреймворки мира заодно?

👎 Нет, нет и нет. Ничего не нужно учить бесцельно, лишь потому, что это указано в каком-то роадмапе.

Давайте начистоту. Мало какой даже опытный специалист изучил все технологии по роадмапу своего направления.

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

Я 4.5 года назад получал свои честные 25-40 тысяч рублей, зная HTML, CSS, немножко Sass и поверхностный JS вперемешку с jQuery. Спустя год на новой работе к списку технологий добавился WebPack и чуть позже — React с Redux. А дальше? А дальше вообще не важно. Там и TS и вся экосистема React подтянулась. Но всё это появилось в моем стеке без каких-то конкретных роадмапов. Я просто сталкивался с технологиями, которые стали мне нужны в работе и шаг за шагом учился применять их на практике.

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

😏 Вам советую постичь тот же дзен и перестать страшиться роадмапов — не нужно учить всё, учите только то, чего не хватает вам для разработки здесь и сейчас!

#совет_новичкам #рефлексия_о_фронтенде

🆕 React — что нужно знать до изучения фронтенд-разработчику? Пример практики

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Что начинающему разработчику конкретно нужно знать и уметь перед тем, как нырять с головой в изучение фреймворка, типа React / Angular / Vue? Важное из основных и промежуточных технологий, а так же пример практики, чтобы залететь в эту высшую лигу без боли и страданий от непонимания всего и вся вокруг – всё в этом видео.

👉 Мощная практика перед изучением 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() для минимизации специфичности.

3) Свойства 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 и до сего момента внёс в код множество полезных правок. Каждая строчка объяснена, так что не потеряетесь, если будет желание разобраться подробнее.

📂 [Загрузить через NPM]

💻 [Репозиторий в GitHub]

#совет_новичкам

📖 Список элементов с разделительными точками без боли

➡️ https://youtube.com/shorts/6fU_bUIfLyg

#фронтенд_лайфхак

✅ CSS Градиентная рамка со скруглениями — без костыльных псевдоэлементов!

➡️ https://youtube.com/shorts/V_h0dXLa5GQ

#фронтенд_лайфхак

💻 Какой компьютер подойдет для фронтенд-разработки? MacBook, виндовый ноут или настольный ПК?

💲 Если закладываете на покупку хотя бы 1500$, то можно рассмотреть MacBook любой модели комфортной вам диагонали (13-16") с процессором M1 и свежее, ОЗУ 8 Гб и более.

💸 Если бюджет ограничен, то можно присмотреться к ультрабуку на Windows. Обращайте внимание на процессор и ОЗУ. Остальное не так важно.

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

🖥 Настольный ПК в целом не рекомендую «для фронтенда», т. к. целиком и полностью убивается ваша мобильность. Да, возможно вам она и не нужна, но будьте готовы к моральному истощению от работы на одном и том же месте. Лично я уже не представляю не-автономную жизнь без ноута, чтобы я не мог пойти поработать целиком весь день из кофейни или уехать посреди рабочей недели в другой город без возможности выполнить срочную рабочую задачку.

🖥 По поводу мониторов. Многим мало одного, а кому-то даже и двух. Я не из таких. Был у меня опыт с тремя мониторами. Мобильность оказалась важнее, ну а 16 дюймов ноутбука всецело хватает для отображения того, что нужно в работе прямо сейчас (чего ради держать перед собой контекст всего и вся на паре мониторов — искренне не понимаю).

😑 По поводу особенностей MacOS. Сам я долго страдал после перехода с Windows, но спустя пару месяцев большинство непривычных UI / UX моментов сгладились и теперь я вижу лишь преимущества MacOS над другими системами.

P. S. Все эти рассуждения нацелены на помощь с выбором нового устройства, если у вас сейчас нет никакого подходящего девайса «для кодинга». На самом то деле в начале карьерного пути совершенно не важно, макбук последней модели у вас или же древний ПК, собранный в далеком 2010-м. Если ваш комп тянет Chrome и VSCode (или хотя бы условный NotePad++ / Sublime), то прокачивать свои навыки во фронтенде вам ничто не мешает.

#совет_новичкам

👀 Шпионим за пользователем или как через JS узнать откуда пришел пользователь?

➡️ https://youtube.com/shorts/P2b1lTKHs4k

#фронтенд_лайфхак

😑 CSS Будущее бескостыльной темизации — light-dark функция

➡️ https://youtube.com/shorts/u1XqMyZWtvI

#фронтенд_новинка

😨 Как результативно просить помощь в чатах по разработке?

На примере фронтенда.

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

🟡 Если проблему можно пощупать на готовом сайте, приложите к сообщению ссылку на веб-приложение (обязательно на конкретную страницу, где возникает проблема), опишите словесно и / или скриншотом куда смотреть.

🟡 Если нет возможности предоставить ссылку на готовое веб-приложение, попытайтесь воссоздать проблему в песочнице а-ля CodePen или CodeSandBox.

🟡 Если проблема возникает при выполнении определенных действий, опишите пошаговый алгоритм, вызывающий проблему и / или запишите скринкаст с воспроизведением проблемы.

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

🟡 При багах верстки не лишним будет приложить к сообщению скриншот интерфейса из браузера с открытой в DevTools вкладкой Elements и панелью Styles.

🟡 Если проблема из разряда «мне надо так, а получается так», то помимо скриншота с проблемой будет весьма полезен скриншот «как надо правильно» (ожидаемый результат).

🟡 Если проблема связана с багом на определенном устройстве / операционной системе / браузере, обязательно укажите название устройства / ОС / браузер и его номер версии.

🟡 Опишите какие решения проблемы вы уже перепробовали, чтобы помогающие вам люди не теряли свое и ваше время.

❌ Как НЕ надо просить помощи:

Чет все ломается / ничего не работает, помогите!

*кидает фото со случайным кодом, сделанное на тапок*

🥺 Никто не спешит помогать, т. к. проблема абстрактна и гадать по картинке без описания непросто.

✅ Как надо просить помощи:

В мобильной версии браузера Safari (iOS 17.4) ломается вёрстка в таблицах. Добавил на <tr> градиент на фон, а он почему-то применяется к каждой ячейке по отдельности (см. скрин №1). Пробовал решить вопрос через псевдоэлемент (сначала к <tr>, затем к первой ячейке таблицы) — это не срабатывает (см. скрин №2). В других браузерах всё ок (см. скрин №3).

*прикладывает скриншот изначальной проблемы при открытом DevTools*

*прикладывает скриншот попытки решения проблемы*

*прикладывает скриншот того как надо правильно*

🥰 Проблема описана достаточно понятно, ёмко, но в то же время не перегружено, без лишнего контекста (указана версия браузера и приложены лишь нужные скриншоты). Были произведены попытки решения проблемы и описаны результаты этих попыток. Приложен скриншот ожидаемого результата. С таким запросом помочь человеку будет гораздо проще.

😠 Если вам есть что добавить на эту тему, буду рад видеть ваши комментарии!

#совет_новичкам

🧬 CSS Анимация за N шагов — функция steps

➡️ https://youtube.com/shorts/jxCwnTqMda0

#фронтенд_лайфхак

😱 А правда, что ИИ заменит разработчиков?

* с нехилой такой задержкой подключаюсь к актуальной в последние годы теме *

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

Давайте взглянем на эту тему рационально.

За что разработчики получают относительно неплохую зарплату?

За написание кода к уже продуманному алгоритму? Или за продумывание этого самого алгоритма? А может быть за декомпозирование больших задач на маленькие? Или может за перевод задачи с менеджерского / заказчиского языка на язык технический? А может за погружение в дерьм плохой код и внесение в него корректировок или внедрение в него нового функционала? Или быть может самое ценное и нужное в таком специалисте — знания нюансов, от которых зависит качество финального продукта (а иногда и его работоспособность в принципе)?

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

😳 А кто ещё, кроме программиста, умеет писать код по четко расписанной задаче? Пррр-авильно — ИИ.

😎 ИИ как самый умный ботаник в классе, который в теории — может всё, но на практике — выдаст неудачное решение из не самой умной книжки и виду не подаст, пока лично не укажешь на ошибку в его результатах.

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

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

💻 Ну и как такому самоуверенному инструменту доверить большой проект? И кто вообще может провалидировать результаты работы ИИ в виде кода, чтобы оценить адекватность решения и возможность поддержки кодовой базы в дальнейшем? Только разработчик.

Ну и делаем выводы.

ИИ — не замена разработчика. ИИ — его инструмент, «более умный поисковик», не более того. Конечно, со временем ИИ поумнеет, но без умного «оператора ИИ», который сам знает разработку от и до, проект целиком и полностью ИИ не доверят.

😶 А как вы относитесь к ИИ? Сможем ли мы когда-нибудь делегировать ему, к примеру, всю фронтенд-разработку, как считаете?

#рефлексия_о_фронтенде

🤩 CSS Псевдокласс has — вы никогда не захотите верстать по старинке

➡️ https://youtube.com/shorts/EdHXZ-WJ6CI

#фронтенд_лайфхак #фронтенд_новинка

🎉 Настроение подвести итоги года. В цифрах (все же любят цифры?)

Да, выглядит как самохвальство, но почему бы и нет? Может вдохновлю кого 🥰

😊 В начале 2024-го завёл тут, в телеграмме, два канала, основной и чат коммьюнити, и разрослись они до 2000 и 3000 человек соответственно

🤪 На ютуб-канале аудитория выросла с 5000 до 40000 подписчиков

😘 Выпущено 59 полноценных видео и 70 шортсов

✅ Полностью закончен курс по JS из 42 уроков суммарно на почти 13 часов

⚠️ Выпущен 3-й мастер-класс по верстке аж на 12 часов концентрированного конента

🤪 Проведён 1 стрим, где ревьюил код участников платформы PREAX

😑 В связи с «замедлением» ютуба пришлось завести каналы на Дзене и Rutube, аудитории там набралось скромные 500 и 700 человек, а ещё там за полгода монетизации накапали солидные 3000 ₽ (ни в чем себе не отказываю)

🫥 Завёл TikTok, набрал там перезаливами шортсов аж 6000 подписчиков

😐 Провёл на GetMentor 78 частных менторских консультаций

👻 Посетил 14 фронтендерских митапов и конференций, завел множество полезных связей

Из личной жизни

🚙 Отдохнул в Бангкоке, Стамбуле, Дубае

🥰 Сделал предложение девушке на воздушном шаре, как в фильмах, как всегда мечтал

😔 Переехал с любимой кошкой к будущей жене (кстати, она тоже фронтенд-разработчица ☺️) в уютный район Москвы

🎸 Урвал билеты на ближайший концерт любимой группы Linkin Park в Токио, предвкушаю интереснейший отпуск

💬 А какие у вас успехи за этот год? Что интересного произошло? И ставите ли вы ежегодные цели или я один помешан на чеклистах?

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

📝 CSS Контроль висячих строк в тексте — свойство text-wrap pretty

➡️ https://youtube.com/shorts/LlY4XvzqX68

#фронтенд_новинка

🤸 CSS Грид-элемент на все колонки — трюк с grid-column

➡️ https://youtube.com/shorts/SLom4wkFQ7c

#фронтенд_лайфхак

🤪 Как я справляюсь с выгоранием?

За мои 4.5 года работы фронтенд-разработчиком у меня, как у большинства нормальных человеков в этой, да и, уверен, в любой сфере деятельности, случались периодические, пускай даже не полноценные выгорания, но припёки ⛽️ уж точно.

😐 На первой работе уставал от начальства, которое «само знало как лучше» и указывало как мне делать мою фронтендерскую работу.

🥣 На второй работе уставал от пустых обещаний крутых будущих проектов, которые всё так и не появлялись.

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

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

🤩 Но что самое интересное — со временем я четко распознал сценарий подобных моих выгораний и определил стратегию по восстановлению себя в строй.

На работе — делаю минимум, «лишь бы работало». Вне работы — даю себе волю на всё, ухожу в отрыв. Ну, нет, не в пьянки-гулянки или что похуже, а просто позволяю себе безудержное безделье без угрызений совести. Занимаюсь всем тем, чем не позволяю себе в обычном ритме жизни больше определенного количества часов в неделю. Сутками смотрю сериалы, играю в видеоигры, ем что хочется. Ну вот просто обычные человеческие приземленные хотелки.

🥱 И что по итогу? Спустя неделю-две такого режима жизни я и от него выгораю! Ну невыносимо скучно мне становится. Сериалы сливаются в единый пласт клишированного сюжета. Видеоигры перестают цеплять, начинаю видеть в них лишь репетативность одних и тех же действий. Ну а еда… любимые вкусы перестают быть желанными, когда весь рацион состоит исключительно из них.

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

😳 Выгорание в моей картине мира — естественный и регулярный процесс. Избежать его не получится. Надо смириться с тем, что такой этап когда-нибудь настанет вновь и нужно по уже известной мозгу схеме плавно выходить из этого состояния — безделье и получение легкого дофамина до момента, когда перестаешь его замечать, что вынудит запустить спринт продуктивности вновь во всех сферах жизни.

❕ А как у вас с этим обстоят дела? Вы целенаправленно избегаете «выгорание»? Или научились с ним бороться? А может подобного с вами не случалось вовсе? Поделитесь в комментариях!

😑 Как скринридер видит ваш сайт?

➡️ https://youtube.com/shorts/E_2wGVZA-kg

🆕 Третий мастер-класс: Вёрстка сайта с нуля • HTML, SCSS, JS практика • Подробное объяснение по шагам • Проект в портфолио

🫡 12 часов концентрированного контента, результат сотни часов моих трудов

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Пошагово профессионально верстаем многостраничный сайт по макету Figma. Разметку пишем по БЭМ методологии. В разработке используем препроцессор стилей Sass (SCSS) и активно применяем адаптивные rem-единицы измерения. Пишем много JavaScript и реализуем такие компоненты как BurgerButton, Tabs, VideoPlayer, ExpandableContent, InputMask и даже непростой кастомный Select.

🧑‍🍳 Каталог со всеми моими рецептами и лайфхаками фронтенд-разработки в формате Shorts

(буду актуализировать списки в этом посте по мере выхода контента)

HTML-теги
• <details>
• <dialog>
• <link>
• <output>
• <search>
• <summary>

HTML-атрибуты
• aria-labelledby
• enterkeyhint
• href="sms:+1234"
• href="#:~:text=lorem"
• inert
• reversed

CSS-свойства
• accent-color
• anchor-name
• appearance
• aspect-ratio
• box-shadow
• block-size
• caret-color
• content
• counter-increment
• counter-reset
• hyphens
• initial-letter
• inline-size
• inset
• line-clamp
• outline
• overscroll-behavior
• position-anchor
• rotate
• scale
• scrollbar-behavior
• scrollbar-color
• scrollbar-gutter
• scrollbar-padding
• scrollbar-width
• scroll-snap-align
• scroll-snap-type
• text-align-last
• text-overflow
• transform
• transition-behavior
• translate
• user-select

CSS связки свойство: значение
• background-attachment: fixed
• content: counter(custom-counter, decimal-leading-zero)
• display: contents
• fill: currentColor
• position: sticky [1]
• position: sticky [2]
• stroke: currentColor
• text-wrap: balance

CSS-псевдоклассы
• :empty
• :focus-visible
• :focus-within
• :is()
• :nth-child(* of selector)
• :nth-last-child()
• :picture-in-picture
• :placeholder-shown
• :user-invalid

CSS-псевдоэлементы:
• ::first-letter
• ::spelling-error
• ::target-text

CSS-функции
• anchor()
• calc(infinity)
• color-mix()
• counter()
• drop-shadow()
• rem()

CSS-директивы
• @media (hover: hover)
• @media (hover: none)
• @media (width <= 768px)
• @starting-style

JavaScript
• console.debug()
• mouseup и click

DevTools
• Break on: subtree modifications
• monitorEvents()
• Performance CSS Selectors

😠 Не фиксированный, а липкий хедер — CSS position sticky вместо fixed

➡️ https://youtube.com/shorts/YJKj6hGu41w

😐 Как эффективно потреблять видеокурсы или почему фоновый просмотр видео — самообман?

В недавнем посте я поведал о том, почему в моих курсах нет практики. Но на самом то деле она есть. Просто её нужно выцепить самостоятельно.

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

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

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

Изучая какую-либо тему, я следовал простому, но действенному пошаговому алгоритму:

1) Смотрю на ютубе первое популярное видео по теме у автора, который кажется мне авторитетным источником знаний.

2) Каждые 5-30 секунд проигрывания видео ставлю паузу, чтобы переварить последнюю информацию.

3) Если не понял с первого раза, проигрываю фрагмент видео повторно.

4) Если после неоднократных повторений услышанного в голове все равно лишь белый шум, то открываю видео на ту же тему, но от другого автора.

5) Если ни одно видео по изучаемой теме меня не устроило, то открываю -дцать вкладок по первым запросам из гугла и жадно поглощаю источники в текстовом формате.

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

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

Резюмирую.

👀 Подходите к процессу обучения осознанно. Не занимаетесь самообманом. Просмотр обучающего видео фоном — потеря времени. Ставьте паузы во время просмотра для осмысления материала, пересматривайте непонятные фрагменты. Поглощайте несколько источников по одной теме. Переписывайте код из урока своими пальцами и позволяйте себе выходить за рамки темы, эксперименты, имхо — лучшая методика обучения.

🫣 А у вас есть лайфхаки при просмотре видеоуроков? Буду рад услышать ваше мнение!

🎄 НОВОГОДНИЙ МАРАФОН ОТ PREAX

Ребята запустили марафон для участников у себя на платформе, ну а вы можете поучаствовать в отдельном марафоне (только для моей аудитории)

🥰 ЧТО ПРЕДСТОИТ

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

На время марафона рейтинг будет обновляться каждый день 😉

⏳ СРОКИ

Марафон 🚗 стартует с сегодняшнего дня и продлится до 26 декабря 20:00 по МСК, где на стриме подведут итоги и вручат призы.

🔥 ПРИЗЫ И ПОДАРКИ

В мешке подарков:

🥇 Полный курс тренировки – 1 комплект
🥈 Проект WeatherApp (2 платных спринта) – 1 комплект
🥉 Спринт QuizApp – 1 комплект

Но и остальные без 🎁 подарков не останутся: те, кто примет участие в новогоднем марафоне, получат скидку в размере 70% на весь курс тренировки.

Все подарки, включая скидку, будут доступны после подведения итогов.

🌲 УСЛОВИЯ УЧАСТИЯ

Важно выполнить всего два условия:

- подписаться на каналы в Телеграм и YouTube,
- зарегистрироваться или авторизоваться, перейдя по специальной новогодней ссылке.

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

Итоги ребята подведут на новогоднем стриме 🗓26 декабря 20:00 по МСК у себя на канале!

Реклама ООО «ПРЕАКС ПЛЭТФОРМ» ОГРН 1237700372755, ИНН 9727035595.

❕ CSS Функция rem… ч-чего?

➡️ https://youtube.com/shorts/uUOetZ8YYfw

🥰 Выучи через мемы HTTP статус-коды! Справочник http.cat

➡️ https://youtube.com/shorts/I56B9sQ-hTk

😏 Почему в моих курсах на ютубе нет практики?

За полтора года деятельности на ютубе я слепил как минимум 3 полноценных курса по HTML, CSS и JS. В них нет как таковой практики, нет задач на отработку конкретных тем. В каждом видео я лишь знакомлю зрителя с синтаксисом и рассказываю о какой-то функциональной возможности, параллельно кодом демонстрирую простейший пример.

🥺 Ну а зрители бывают спрашивают, мол, а где практика, чтобы всё лучше запомнить?

Давайте по порядку.

1) У каждой технологии есть собственный синтаксис, базовые механики и концепции. У HTML — теги и атрибуты, их сочетание друг с другом. У CSS — селекторы, свойства и значения, медиавыражения, каскад, специфичность и так далее. У JS — конструкции, присущие большинству языков программирования (переменные, условия, циклы и т. п.)

2) У каждой технологии есть конкретные функциональные возможности. В HTML есть тег <a>, для которого можно задать атрибут href, чтобы при взаимодействии с этим элементом произошел переход на другую страницу. В CSS есть свойство color, позволяющее придать тексту цвет. В JS есть функция setTimeout, позволяющая выполнить определенный код с указанной задержкой.

3) С помощью комбинирования технологий можно решить определенную, зачастую комплексную задачу — информационный лендинг на десяток секций, многостраничный интернет-магазин с пошаговой возможностью заказать определенные товары / услуги, SPA-приложение а-ля Photoshop-редактор прямо в браузере.

👆🏻 Зритель, как мне кажется, хочет практику именно такую.

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

Решение комплексных задач с помощью технологий — это чисто формат мастер-классов. Курсы по HTML / CSS / JS — про другое.

Сначала неофиту разработки нужно ознакомиться с синтаксисом и функциональными возможностями технологий, а уже сугубо после — можно пытаться комбинировать всё вместе.

🤝 Как можно вести диалог на иностранном языке, не зная буквы алфавита, конкретные слова и правила их комбинирования друг с другом? Вот с практикой по фронтенду так же.

Мои курсы — про синтаксис и возможности технологий. Мои мастер-классы — про практику, про решение комплексных задач.

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

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

📝 CSS выравнивание последней строки — свойство text-align-last

➡️ https://youtube.com/shorts/D3q0Vkjj-ak

✅ CSS Стилизация чекбокса и радиокнопки без костылей — свойство appearance

➡️ https://youtube.com/shorts/ZxHLFysZgsk

😭 Почему я не люблю UI-библиотеки?

🎼 Все подобные инструменты представляют собой мультитул, решающий "все" существующие в мире задачи.

Такой вывод можно сделать даже не по обширной документации несчастного простейшего компонента кнопки, а по тому мусору в DOM-иерархии, который можно наблюдать в DevTools по панели Elements. Ну не могут разработчики библиотеки сделать компонент условной кнопки так, чтобы в Elements мы наблюдали <button class="ui-lib-button" type="button">Клик</button> и более ничего. Там будет миллион внутренних div / span оберток, чтобы поддерживать все сто сценариев при работе с этим компонентом. А стили… ну, здравствуй, томик война и мир в класснейме.

😬 Дело даже не в том, что бессмысленно раздувается DOM и потенциально имеют быть просадки перформанса. И даже не в том, что всякий раз при инспектировании элемента глаз дергается и хочется скрипеть зубами от негодования. Сколько бы разработчики UI-либы не пытались предусмотреть все возможные сценарии взаимодействия с компонентом, они не добавят реализацию того, что нужно лично мне здесь и сейчас.

😳 Какой у меня есть выход? Если это задача верстки, то порождаем страшный CSS-селектор и все же решаем проблему. А если что-то про JS-логику, то степень костыльности может увеличиться в разы. Был случай: кнопка из сторонней либы при фокусировке на ней вместо активации состояния focus-visible генерировала в DOM (рядом с кнопкой) абсолютно позиционированный div, размерами с кнопку, имитирующий пунктирный контур. И это все ломало интерфейс моего приложения. Чтобы отключить этот бред, пришлось по-хитрому перехватывать событие focusin и отменять его дальнейшее погружение и последующее всплытие. Вот пишу это спустя годы и понимаю, насколько это всё дико ненормально.

Зафиналим.

😏 Есть UI-компоненты, которые довольно непросто сделать самому: слайдер, селект, дейт-пикер с календарем — использовать для такого рода вещей готовые UI-библиотеки абсолютно рациональное решение.

😐 Но вот кнопки… ну и подобные элементарные компоненты — зачем? Зачем нужен мультитул в виде универсальной UI-либы, если можно слепить это же своими руками, чтобы не плеваться от перегруженной реализации ради поддержки фич, которые лично вам и не нужны?

😎 Конечно, если UI-либа ваша (вашей команды / компании), вопросов нет — используйте на здоровье, ведь внести нужные вам правки в компонент будет куда проще, чем контрибьютить свою хотелку в условный MUI. Но в остальных случаях, если вы ещё не работаете в компании со своей UI-либой, сделайте себе одолжение — разработайте собственную библиотеку компонентов и переиспользуйте её во всех своих проектах. Так вы не только круто прокачаетесь в разработке интерфейсов, так ещё и прибавите "веса" своей кандидатуре на рынке труда (вы не поверите — среди разработчиков интерфейсов, ищущих работу, далеко не многие могут похвастать тем, что умеют разрабатывать интерфейсы, а реализация собственной библиотеки UI компонентов — лучшее доказательство наличия такого умения).

🥱 А как вы относитесь к готовым библиотекам? Любите готовые решения или предпочитаете собственные велосипеды?

🔎 Доступная форма поиска — новый HTML-тег search

➡️ https://youtube.com/shorts/KzbthdsTHVU

🆕 Пиксели в CSS не нужны — используй Rem! Адаптивный размер шрифта, Sass-миксин и функция Px to Rem

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Обсудим проблему пикселей и её решение — единицу измерения Rem, которую можно и нужно использовать буквально для всех свойств и даже для определения диапазонов медиазапросов. Разберём, как реализовать адаптивный размер шрифта через CSS-функцию clamp и единицы измерения rem + vw, обернём всё в удобный Sass-миксин fluid-text. Создадим функцию преобразования значения из пикселей в Rem через Sass-функцию.

❕ Какой HTML-тег использовать для уведомлений? HTML тег output!

➡️ https://youtube.com/shorts/DS1U9fi3ozA

🖥 [CodePen]

😑 Почему знать JavaScript важнее, чем React?

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

Отбросим тот факт, что условный React — маст-хэв для современного разработчика интерфейсов и что без знаний фреймворка на работу попасть в разы труднее. Я скорее про необходимый уровень погружения в JS до момента, когда начинаешь щупать React и etc.

🍴 Во-первых, любая JS-библиотека создана с целью решить определенные проблемы. Если разработчик ни разу не сталкивался с этими проблемами, то у него будет глобальное непонимание назначения инструмента. На примере реакта — чихать разработчик хотел на оптимизацию и устранение лишних рендеров, для него это ровным счетом не значит ничего.

🤪 Во-вторых, абсурд со смешиванием в голове сущностей и механик, напрямую относящихся к JS (import, return, map, FormData, подписка / отписка на событие, деструктуризация свойств, тернарный оператор) и вещей, относящихся сугубо к React и его экосистеме (className, Fragment, key, dangerouslySetInnerHTML, useState, Synthetic Event). Я не шучу, я видел эти вопросы а-ля «Как в React файлах использовать общую переменную из другого файла?» и «Почему useState не работает вне React?»

☺️ В-третьих, у разработчиков с курсов «React с 0 за 3 месяца» возникает ощущение, что JavaScript сам по себе бесполезный и донельзя беспомощный, что «нормальные фронтендеры всегда используют библиотеки». А потом такие начинающие кодеры тащат в проект библиотеку, складывающую 2 + 2.

😮 На обычном JS можно сделать абсолютно что угодно. Этот язык достаточно мощный и развитый, чтобы решать буквально любые задачи веб-интерфейсов. И нет, это не значит, что нужно хардкодить с нуля свой фреймворк, ни в коем случае. Но потыкаться неделю-другую в нулевом script.js файле, чтобы нацепить на готовую верстку интерактива — ну надо.

😠 Главный мой аргумент в пользу того, что «знания JS > знания React» — да плевать вам будет на то, какой фреймворк нужно будет «учить» на новой работе. Если вы владеете НЕ поверхностными знаниями JS, все сторонние JS-инструменты перестают быть для вас страшными демонами. Вы с легкостью поменяете стек и освоите что угодно, если наложите на имеющуюся у технологии документацию свои знания ванильного JavaScript.

Ну а если вы всё ещё не начали изучать JavaScript, то напоминаю, что недавно на моем канале вышло финальное видео к бесплатному курсу по JS. И теперь от и до весь курс можно просмотреть единым плейлистом.

💟 Модальное окно на чистом HTML — тег dialog

➡️ https://youtube.com/shorts/pznMUqqotpk

🖥 [CodePen]

🆕 NPM для начинающих. Полный гайд: установка, команды, флаги, разбор package.json, версионирование

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Узнаем что такое NPM и зачем он нужен. Установим NPM на компьютер и попрактикуемся в основных командах: init, install, uninstall и других. Обсудим назначение файлов package.json, package-lock.json и папки node_modules. Поговорим про семантическое версионирование и научимся устанавливать библиотеки с конкретной "фиксированной" версией. Узнаем о флагах в командах и о сокращенных версиях команд и флагов. Обсудим разницу dependencies и devDependencies зависимостей. Разберёмся, как запускать скрипты, описанные в package.json. Научимся использовать установленные зависимости. Узнаем, как очистить кэш NPM. Обсудим специфичные команды npx и npx create и их назначение. Поговорим о том, где искать существующие NPM-команды и флаги.

🟡 CSS isn't magic — канал с еженедельными материалами о нюансах и тонкостях CSS от автора, который с версткой "на ты" уже более 10 лет. Сам читаю и вам рекомендую 🙂

💎 Аккордеон на чистом HTML и CSS — теги details и summary, плавность закрытия

➡️ https://youtube.com/shorts/2iUrstAVdn0

🖥 [CodePen]

👊 Как заставить себя учить, ну, к примеру, JavaScript?

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

😳 Ровно 1549 дней назад, когда у меня ещё не было ни малейшего коммерческого опыта во фронтенд-разработке, когда я ещё не имел даже сотой доли от тех знаний, которыми владею сейчас, в 3 часа ночи мой неугомонный мозг выдал идею "А не написать ли мне игру «2048» на JavaScript?" Та механика соединения двух ячеек с цифрами в одну казалась мне гениальной, увлекательной и в то же время простой.

🧑‍🍳 В 10 утра наступившего дня я стартанул реализовывать свою ночную задумку. Корпел над кодом до глубокой ночи с перерывами на покормить котейку и свой организм. Перегуглил сотни глупых вопросов из разряда "JS cannot read property of undefined что делать" и "JS почему меняется оригинал объекта после его копирования???".

😎 По итогу слепил я это чудо. Плохо ли у меня получилось? Да наверняка. Сейчас я в этом уверен. Но тогда… тогда я был в восторге от своих способностей и поверил в то, что с помощью кода я смогу сделать что-угодно.

🎉 Той бессонной ночью я запустил этот маховик по накоплению знаний и вот уже пятый год во мне живет желание изучать что-то новое. Для меня это словно MMORPG с бесконечной прокачкой, где с каждой крупицей приобретенных знаний я становлюсь лучшей версией себя.

🤸 Не заставляйте себя учиться. Откопайте в своем разуме идею, которую вам будет интересно реализовать с помощью кода. Это не обязательно должен быть «стартап на миллион», это может быть что-то финансово ничтожно невыгодным — например то, что вызывает у вас чувство ностальгии.

🎸 Бесплатный курс по JavaScript полностью готов!

😐 На днях на канале вышло последнее видео в рамках курса.

☠️ За последние 9.5 месяцев выпущено 42 урока суммарной длительностью 12 часов, 42 минуты и 19 секунд. А сколько ушло чистого времени на подготовку сценария, съемку, монтаж, составление описаний, расстановку таймкодов — боюсь представить.

📖 В курсе есть вот буквально все темы, которые нужны фронтенд-разработчику: от базового синтаксиса (инструкции, выражения, переменные, типы данных, операторы, условия, циклы, функции, классы, обработка ошибок, модули) и основных концепций языка (ссылочный тип данных, контекст this, поднятие hoisting, event loop) до работы языка в браузере (BOM, DOM, события, fetch) и многое-многое другое (но только полезное).

😱 Если вы всё ещё не говорите бегло на JavaScript или имеете проблемы с акцентом, то настоятельно рекомендую вам пройти мой курс — он доступен полностью бесплатно на всех платформах.

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

🟢 Как отловить все события на странице? Функция monitorEvents в Chrome DevTools!

➡️ https://youtube.com/shorts/9jkmiyb1gwI

🆕 JavaScript в браузере: Location и History API, URL страницы и история браузера

⛔️ Это финальное видео курса!

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Разбираемся с Location и History API для работы с текущим URL-адресом и историей сессии, научимся применять класс URLSearchParams для удобной работы с GET-параметрами в URL-адресе.

📝 Ищем орфографические ошибки через CSS — псевдоэлемент spelling-error

➡️ https://youtube.com/shorts/BnPYJRGlyeU

🖥 [CodePen]

❕ Нужен ли 'cursor pointer' для <button>?

😰 Ох уж эти фронтендерские проблемы с кнопками…

👊 Недавно в чате нашего коммьюнити подняли этот вопрос.

😑 Я в своём курсе по HTML и в других материалах неоднократно высказывался против добавления курсора "руки" для кнопок.

📖 Так я считал потому, что однажды наткнулся на серию статей Buttons shouldn’t have a hand cursor (часть 1, часть 2 и часть 3). В голове у меня тогда была такая аргументация — разработчики браузеров ведь не дураки, сделали курсор-руку только для ссылок, чтобы пользователи могли различать, что триггернёт переход на новую страницу, а что нет.

😴 Сейчас же я считаю, что 'cursor pointer' для <button> всё-таки нужен.

Во-первых, большинство сайтов в интернете, в т. ч. проекты бигтехов, имеют курсор-руку на кнопках.

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

И в-третьих… А что есть ссылка, а что есть кнопка в современном вебе? Всё, что с фоном, внутренними отступами, рамками и скруглениями — кнопки, а текст с подчеркиванием — ссылки? Да ну нет же. Будет ли в разметке <a> или <button> — определяется по логике, выполняемой при взаимодействии с элементом. Если клик стриггерит переход на другую страницу (то есть браузер отдаст новую html-страницу и по итогу обновится URL в адресной строке браузера), то элемент делается ссылкой, а если в результате клика выполняется действие в рамках текущей страницы (и НЕ обновляется URL-адрес), то элемент делается кнопкой. А теперь ещё вспомним, что мы живём в эпоху SPA, где обновление URL-адреса — фикция и лишь триггер для JS-роутера, чтобы перерисовать часть DOM-дерева и предоставить пользователю "новую страницу".

😉 В общем, грани между ссылками и кнопками размыты. Любой кликабельный элемент может под капотом выполнять любое действие. Пользователь не думает, что "курсор-рука обновит, а курсор-стрелочка не обновит URL". Разработчикам лишь нужно продемонстрировать, что элемент "кликабельный" и при взаимодействии с ним "что-то произойдет". Курсор-рука — лишь один из способов сказать это. Добавляйте его, но и не забывайте про состояния hover и focus-visible для интерактивных элементов — они сделают интерфейс куда более понятным пользователю, чем простое изменение cursor.

🧬 Стилизация режима “картинка в картинке” для video на CSS — псевдокласс picture-in-picture

➡️ https://youtube.com/shorts/DrXGPvuUkI4

🖥 [CodePen]

🆕 Браузерные хранилища данных: localStorage, sessionStorage, cookie, IndexedDB. Смена темы на сайте

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Разбираемся с браузерными хранилищами данных: cookie, localStorage, sessionStorage. Научимся управлять куками в браузере, узнаем как читать, добавлять, обновлять и удалять записи из хранилища. На основе механики сохранения данных в localStorage реализуем классовый компонент смены темы ThemeSwitcher.

💻 Контроль буквицы на CSS — свойство initial-letter и псевдоэлемент first-letter

➡️ https://youtube.com/shorts/3zuyf0ZCqR4

🖥 [CodePen]

🥳 CSS-переменные VS Sass-переменные

🤪 Часто слышу от начинающих разработчиков непонимание, мол, зачем нужны CSS-переменные с "неудобным" синтаксисом var(--color-text), если можно юзать "удобные" Sass-переменные а-ля $color-text.

⁉️ Давайте расставим все точки над "i".

1) CSS-переменные работают в рантайме, а Sass-переменные — нет.

Это значит, что после компиляции SCSS => CSS в финальном CSS-файле не будет никаких $color-text, всё это будет заменено на конкретное значение цвета, прописанное в исходном коде. А работать с переменными стилей в рантайме — необходимость (пример покажу в конце).

2) CSS-переменные работают по принципу CSS-каскада, а Sass-переменные — нет.

Это значит, что объявив CSS-переменную --color-text в рамках селектора .box {}, все DOM-элементы, находящиеся внутри элемента с классом box, будут иметь доступ к CSS-переменной --color-text.

При работе же в файлах стилей препроцессора Sass, объявленная переменная $color-text в рамках селектора .box {}, будет доступна только в рамках конкретного селектора и во всех его вложенных селекторах.

На примере разметки:

<button class="button">
  <span class="button__label">Клик</button>
</button>

Так:

.button {
  $color-text: red;

  &__label {
    color: $color-text;
  }
}

— работать будет

А так:

.button {
  $color-text: red;
}
  
.button__label {
  color: $color-text;
}

— работать уже не будет

А с CSS-переменными получилось бы в обоих случаях!

3) Sass-переменные можно использовать в качестве параметров Sass-миксинов, функций и циклов, а CSS-переменные — нет.

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

🧑‍🍳 Теперь про конкретный кейс, который можно экстраполировать на все ему подобные.

Любая темизация (смена светлой темы на тёмную и наоборот) — работа в рантайме с CSS-переменными. В селекторе :root {} объявляется набор CSS-переменных а-ля color-text и color-bg, которые затем повсеместно используются в свойствах color и background-color. При нажатии на кнопочку смены темы, через JS добавляется условный класс is-dark-theme корневому элементу DOM-дерева <html>. Затем в CSS-коде подвязываются на этот класс в селекторе :root.is-dark-theme {}, в рамках которого меняют значения CSS-переменных color-text и color-bg. Использовать Sass-переменные таким же образом уже бы не получилось.

😑 Дополнение. Если для проекта нет нужды в динамической смене темы и в целом в управлении переменными стилей в рантайме, то попробуйте заменить все CSS-переменные на Sass. А когда столкнётесь с проблемами верстки и будете копошиться в девтулз браузера, пеняйте на себя, ведь все ваши красивые $color-text и $border-radius для браузера это уже #ff3636 и 24.5px, и он знать не знает о том, как всё выглядело в вашем исходном коде.

👀 Выводы? Нужно уметь пользоваться и Sass-переменными и CSS-переменными, но важно понимать их назначение, а не слепо пытаться заменить одно на другое. Используйте $variable для Sass-миксинов, функций и циклов, а --variable и var(--variable) — для всего остального, что важно сохранить в CSS.

✅ CSS свойство content и accessibility

➡️ https://youtube.com/shorts/U-RUD1jdsn4

🖥 [CodePen]

🆕 JavaScript запросы fetch — клиент-серверное взаимодействие на практике

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Ознакомимся с клиент-серверным взаимодействием, пощупаем сервис jsonplaceholder, научимся применять функцию fetch для выполнения запросов к серверу. Узнаем какие бывают статусы ответов от сервера, как обрабатывать ответы и ошибки запросов. Попрактикуемся с библиотекой json-server, научимся отправлять GET и POST-запросы. Разберёмся, как добавлять запросам GET-параметры в URL-адресе. Научимся пользоваться в девтулз вкладкой Network, с помощью которой можно удобно анализировать запросы.

🖱 CSS селектор выбора элемента с N-количеством соседей

➡️ https://youtube.com/shorts/wwAbJNgJVas

🖥 [CodePen]

💎 Baseline для фронтенд-разработчика — удобная замена caniuse

➡️ https://youtube.com/shorts/z9eABglPkG0

🆕 JavaScript валидация форм — validity свойство у полей формы. Классовый компонент валидации форм

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Напишем классовый модуль валидации форм, где используем современное свойство DOM-элементов полей ввода — validity, отражающее актуальное состояние всех возникших ошибок в поле ввода. Обсудим влияние HTML-атрибутов required, minlegnth, maxlength, pattern, title и novalidate на браузерную валидацию. Доработаем разметку формы a11y-атрибутами aria-errormessage и aria-invalid.

🙂 WebStorm стал бесплатным для некоммерческого использования!

💻 В своих видеоматериалах я пишу код именно в этой IDE. Считаю WebStorm удобнейшим инструментом, в разы функциональнее VSCode.

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

P. S. Спасибо за эту полезнейшую информацию моему подписчику 🩷!

😎 JS Логируй как профи — console debug VS log

➡️ https://youtube.com/shorts/anN_kLwnuqI

🆕 JavaScript формы — FormData, класс для сбора данных со всех полей формы

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Разберёмся, как грамотно собирать данные со всех полей формы через класс FormData, а так же рассмотрим специальные методы для работы с этой структурой данных.

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.

Присоединяйтесь: @FrontendPortal

🔘 A11y Доступные секции — section и aria-labelledby

➡️ https://youtube.com/shorts/uaadbgQuTSE

🆕 Формы в JS — доступ к элементам форм, чтение и изменение значений полей ввода, атрибут form

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Изучим, как получать доступ ко всем элементам form на странице и как можно по-разному обращаться к полям форм. Обсудим атрибут form, который позволяет связать внешнее поле с конкретной формой, независимо от его расположения в разметке. Научимся управлять элементами input, textarea и select, а именно, узнаем как правильно читать и изменять их значения через value, checked и другие свойства DOM-элементов.

🧬 Неизвестно полезный CSS. Часть 5

Делюсь свежей статьей одного из немногих авторов на хабре, кто активно и качественно вещает про CSS и HTML. И не поленитесь заглянуть в профиль автора, в ленте найдёте десятки занимательных материалов, посвященных нюансам базовых технологий фронтенда.

🟡 Самосчитающийся счётчик списка — counter и decimal-leading-zero, ведущие нули

➡️ https://youtube.com/shorts/d9fhZXJkqf0

🆕 JavaScript события фокуса: focus и blur, focusin и focusout | Методы focus и blur | activeElement

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Разберём события focus и blur, события взятия элемента в фокус и событие потери фокуса с элемента. Обсудим разницу между похожими на первый взгляд событиями change и blur. Затронем работу со специальными методами focus и blur для программного взятия определенного элемента в фокус и противоположного действия. Изучим события focusin и focusout — похожие на focus и blur, но, в отличии от них, всплывающие по DOM-дереву вверх. Обсудим задачу получения текущего фокусируемого элемента через DevTools и Live Expression выражение document.activeElement.

🔴 Кастомный счётчик нумерованного списка — counter-reset, counter-increment

➡️ https://youtube.com/shorts/-awVEMmacYY

📱 А вас оскорблял CEO крупнейшей онлайн-школы?

*раскатываю пасту*

😈 На днях в комментариях под одним из моих первых уроков курса HTML произошел диалог…

🥺 …с гендиром известной каждому фронтендеру школы, начинающейся на html, заканчивающейся на academy.

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

Пара скриншотов в посте, фулл — докину в комменты.

😏 Краткий цимес диалога в том, что формулировки не по спеке — чушь, не имеющая право на существование, а ты — не инженер, коим себя считаешь и называешь, фу таким быть, удали эту лычку с описания канала!

🫤 Я давно смотрю на критику с иронией. Чаще всего мне предъявляют за скорость речи, читку с экрана, нудную подачу и воду. Значительно реже — критикуют формулировки, ещё реже — приводят годные контр-аргументы моей позиции.

😱 Этот случай — алмаз среди всех негативных комментариев. Мне пишет не просто нонейм, а человек, познавший всё и вся (ни капли сарказма, я действительно так вижу человека со столь высокими регалиями).

Что я думаю на этот счет?

😎 Во-первых, я имею право называть себя как угодно, хоть генералиссимус фронтенда всея галактики. Инженер я де-юро (дипломированный магистр, я точно не дурак, документы есть, поверьте), кнопокрас-формошлёп я де-факто. Оскорбление «ты — не инженер, инженер знает госты и спеки, в отличие от тебя» смешно, словами не выразить.

🫢 Во-вторых, про формулировки. Поднимите руку, кто читал спеку w3c / whatwg и всё понял? В начале карьеры я читал. Пару минут. И сразу же закрыл. Ну не туп ли я? Да, наверное. Но что мне, фронтендером теперь не становиться? Ага, щаз… Я пошел обходным путём, послушал десяток-другой формулировок от «не-инженеров» на ютубе, преисполнился и… вы не поверите — пошел изучать следующую тему. И так я дошел до сего момента. Я не прочитал спецификацию и всё равно прошел эту игру.

🤨 Ну окей, речь же по-большему счету про мой стиль преподавания. Я должен быть ответственен за каждую букву, ведь мне доверяет зритель и если в произнесённом мною объяснении будет неточность, то я ой как подставляю своего слушателя.

😑 Категорически с этим не согласен. Да какая ответственность? Я не беру ни с кого ни копейки (привет, курсы за сотни тысяч рублей), трачу часы и чаще даже десятки часов на выпуск одного видео, трачу свое свободное время на помощь новичкам в комментариях на всех платформах и веду своё микро-коммьюнити с целью сделать мир лучше.

😬 Когда я буду продавать свои курсы, то цена ошибки за произнесенные мною формулировки будет больше (больше текущего нуля), но все равно не такой, чтобы хоть кто-то, да пусть даже Илон Маск, смел тыкнуть в меня пальцем и сказать, что я не инженер.

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

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

👀 Александр, дядь, не знаю зачем вам это нужно, нападать на «недо-инженеров» на ютубе, но что-то консенсуса мы с вами так и не нашли. Если вы это читаете — приглашаю в комменты, расскажите подрастающему поколению каким надо быть инженером.

🆕 JavaScript события клавиатуры: keydown и keyup. События ввода: input, change, cut, copy, paste

📺 [Смотреть на YouTube]

📝 [Смотреть на Дзен]

📺 [Смотреть на Rutube]

📝 Изучаем события клавиатуры keydown и keyup, учимся с помощью них отлавливать и программировать горячие клавиши. Разберёмся, какие действия браузера по умолчанию мы можем отменять, перехватывая нажатия на хоткеи. Изучим события ввода input и change, а так же события вырезания, копирования и вставки —cut, copy и paste.