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

🥺 React — фреймворк, не библиотека!

* и про подобные нюансы терминологии во фронтенде *

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

Собрал список любимых противоречивых терминов из мира фронтенда.

1) React — библиотека, а не фреймворк!

Фреймворком может называться, например, Angular, т. к. он жёстко контролирует структуру приложения, а React напротив — позволяет написание кода без особых строгих правил.

Я же считаю, что React можно назвать фреймворком, так как голый React сам по себе не использует примерно никто. Всегда идёт комбинация из стека Vite, TS, Router, Redux, Query, Next, FSD и много-много других штукенций. Вся это экосистема хоть и состоит из разрозненных кубиков, но собранные воедино они смотрятся вполне как самый настоящий фреймворк.

2) Параметры и аргументы функций — не одно и то же!

function fn(ehehe) {}
ehehe здесь — параметр

fn(ehehe)
А тут ehehe — аргумент

У меня появился бзик на этот счёт при составлении сценариев к своим урокам, но кажется, что всем плевать на это разграничение, ибо из контекста зачастую и так понятно, о чём идёт речь.

3) Элемент, тег, узел (нода) — не одно и то же! А до кучи ещё и давайте упомянем понятия БЭМ-блок и БЭМ-элемент...

<div> в HTML-коде
— тег и элемент

div между <> в HTML-коде
— имя тега

const divElement: HTMLDivElement = document.querySelector('div')
— в JS (TS) коде можно назвать и элементом и узлом

И про БЭМ:
<button class="button">
<span class="button__label">Click</span>
</button>

Здесь:
HTML-элемент с классом button — БЭМ-блок
HTML-элемент с классом button__label — БЭМ-элемент

Я полностью исключил из своего фронтендерско-объяснятельского лексикона слово "узел" (нода) и стараюсь по минимуму использовать слово "тег". Считаю, что словом "элемент" во фронтенде можно указать на любой кирпичик и в HTML-разметке и в DOM-дереве в контексте JS-кода. А вот когда в объяснении мне нужно пояснить что-то по методологии БЭМ, приходится чётко разделять понятия HTML-элемент и БЭМ-элемент (надеюсь, что хоть кому-то это разграничение в моих объяснениях помогло лучше усвоить материал).

🙂 И вдогонку ещё пару неочевидных терминов:

@media (width < 1024px) {}
— медиазапрос, медиавыражение, директива media и at-rule правило в одном флаконе

const obj = { wow: 'bla' }
— wow здесь можно назвать и свойством и полем и ключом, а ещё пропом (от слова property)

☺️ Ну а в конце то концов, какая разница, как обзывать ту или иную "штуку", если любая вариация термина будет понятна любому опытному разработчику? Ладно я, контент-мейкер, должен ещё заморачиваться, чтобы даже нулевой вкатун меня понял, но когда разработчик объясняет другому разработчику, то неужели так критично будет назвать React библиотекой или сказануть что-то вроде "этот тег div в DOM-дереве"?

😏 А у вас есть какие-то бзики по поводу терминов во фронтенд-разработке? Быть может есть что-то, что вас бесит в объяснениях других? Поделитесь в комментариях, будет интересно обсудить!

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

🖕 CSS Nesting — новая фича нативного CSS

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

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

🔢 Многоколоночная сетка наоборот — свойство column-count и break-inside avoid-column

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

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

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

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

😐 Где и как практиковаться фронтенд-разработчику?

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

😊 Фронтенд — это разработка интерфейсов. То есть это верстка совокупности компонентов с помощью HTML & CSS, затем последующее оживление сценариев взаимодействия пользователя с интерфейсом.

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

🥺 Но всё это — нюансы, о которых новичку задумываться рано. Сперва практикуемся по базе — HTML, CSS и JS.

По HTML & CSS практика одна — вёрстка чего-либо по макету / картинке / салфетке / галлюцинациям фантазиям из головы. Ищете для Figma макет (в гугле, телеграмм-каналах, в разделе Community самого приложения фигмы), а затем пытаетесь посредством написания разметки и стилей воссоздать что-то из макета. При том не обязательно пытаться сверстать макет целиком, от левого верхнего до правого нижнего угла страницы. Начните с самых маленьких компонентов, с кнопочек, полей ввода, затем переходите к карточкам товаров / категорий / новостей, менюшкам, затем переходите к верстке целых секций, а в финале — пробуйте все комбинировать в полноценную страницу сайта.

С JavaScript дела обстоят сложнее. Изучение этой технологии для фронтендера делится ровно на 2 внушительные части — базовый синтаксис (выражения и инструкции, переменные и типы данных, условия, циклы, функции и т. п.) и работа языка в браузерном окружении (DOM, BOM, обработка пользовательских событий, запросы к серверу, хранение данных в браузере и т. д).

Отрабатывать базовый JS можно на задачках codewars уровня Q8-Q7. Так вы получите как минимум практику с переменными, функциями, условиями, циклами, массивами и их методами, с объектами.

Браузерный же JS — это исключительно задачи с самопроверкой. Берёте любой макет (да-да, вот прям абсолютно любой) и думаете, в каких местах интерфейса можно применить JavaScript. Нашли кнопочку а-ля «бургер»? Клик по ней должен открыть какое-то изначально закрытое меню. Видите на макете форму? Вот вам шанс и написать валидацию вводимых пользователем данных и масочку прикрутить, а для любителей хардкора — сделайте кастомный селект и поле выбора даты с календарем 😈Я в принципе не встречал ещё макетов веб-приложений, где нельзя нафантазировать хотя бы десяток JS-модулей.

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

А как практикуетесь во время обучения вы? Поделитесь в комментариях 🙂

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