Зачем фронтендеру писать код по методологии БЭМ?

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

В работе над проектом такой навык поможет быстро создавать предсказуемую и надёжную вёрстку интерфейсов любой сложности. БЭМ-компоненты можно легко расширять и переиспользовать без дублирования кода.

До 23 июня навык «Разметка по БЭМ» и другие можно купить со скидкой 60%.

Посмотреть весь список и приобрести нужный — https://tml.io/p28ww

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

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

Читать статью

Распродажа навыков и проектов закончится сегодня

Отпуск — не повод лениться. Лучше выучите то, что откладывали весь год — разберитесь с БЭМ, DOM, Фигмой или научитесь верстать тексты, навигацию или карточки. А если отдыхать долго, то успеете выучить вообще всё — распродажа действует и на «Дерево навыков».

Так что план на отпуск такой: днём пляж, вечером код, а после отпуска просить зарплату побольше. Потому что ну как таким молодцам отказать?

Выбрать навык (или вообще все навыки) — https://tml.io/i6wfj

🧸 5 популярных песочниц для веб-разработчиков

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

CodePen
Онлайн-редактор и сообщество разработчиков. У CodePen гибкие настройки. Для CSS здесь можно выбрать препроцессор Less, Sass или PostCss. Для JavaScript — подключать библиотеки jQuery, Lodash и React.js, использовать фреймворки Angular и Vue.js и другие.

JSFiddle
Песочница с функциональностью, похожей на CodePen. Здесь также можно настроить редактор, включить валидатор для проверки кода, выбрать языки и препроцессоры. И главное — JSFiddle предлагает большой выбор библиотек и фреймворков. В JSFiddle нет блога с интересными работами, но зато её удобно использовать для совместной работы с другими разработчиками в режиме реального времени.

Plunker
Похож на стандартный редактор кода, в который добавили окно предпросмотра. Чтобы приступить к работе, сначала нужно выбрать библиотеку/фреймворк Angular, React.js, AngularJS или Preact либо остаться на VanillaJS. После этого откроется редактор кода, в котором можно подключать библиотеки и устанавливать пакеты npm. И главное — в Plunker простая загрузка файлов. Не нужно загружать изображения на сторонние ресурсы: достаточно перетащить их с компьютера в файловое дерево онлайн-редактора.

StackBlitz
Это песочница на базе Visual Studio. Здесь можно создавать приложения на Angular, Vue.js, React.js или использовать другие библиотеки и фреймворки. Плюс этого редактора — простая установка npm зависимостей и компиляции, можно устанавливать сразу несколько пакетов. А если скопировать кусок кода и вставить в редактор, песочница сама найдет пропущенные пакеты. Удобен еще и тем, что работает оффлайн: вы сможете заниматься проектом даже без интернета.

CodeSandbox
Песочница подходит как для создания небольших кусков кода, так и для работы над большим проектом с командой разработчиков. Сервис интегрирован с GitHub, поэтому можно импортировать файлы из существующего репозитория и работать с ними в песочнице. Или наоборот: создать в песочнице новый проект и загрузить на GitHub. Так же есть большой выбор фреймворков и удобный редактор кода. По желанию окно предпросмотра можно открыть в отдельной вкладке браузера.

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

Что было на уроке:
— Рассмотрели основные понятия и правила HTML и CSS. 
— Провели разбор макета и сверстали его семантично.
— Объяснили, какие теги использовать правильно, а какие нет.

Если ещё не смотрели, это можно исправить здесь.

🔮 случайный совет дня #501
Непонятно — спросите. В этом нет ничего страшного🤗

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

Следуя этим пунктам, вы точно не завершите ни один курс😍

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

В новой статье рассказываем про внутренности протокола HTTP и его версий, WebSockets, а также наглядно показываем, по каким правилам работает интернет.

Читать здесь — https://tml.io/hdb2r

А ещё сейчас действует скидка 30% на пакет курсов «Протоколы и сети». Закрепите полученные знания из статьи на практике — https://tml.io/cosq6

Генеральная ассамблея Ecma утвердила спецификацию языка ECMAScript 2022 — теперь он официально является стандартом. Что это значит? Как теперь будем писать код?

Все о favicon. Время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы.

Разберемся, как будет выглядеть веб только с Chromium

Больше новостей: https://tml.io/60onz

🤔 Когда display:none, а когда visibility: hidden

Видео-инструкция о том, как правильно прятать элементы на сайте в зависимости от ситуации.

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

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

Начните изучать материал в комфортном для вас режиме со скидкой 30% до 10 июля — https://tml.io/ny7y8