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

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

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

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

👊 Как заставить себя учить, ну, к примеру, 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

❕ Нужен ли '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

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

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

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

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

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

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

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

🥳 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

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

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

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

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

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

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

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

💎 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.