🟧 Обзор Chrome DevTools. Решаем основные задачи разработчика

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

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools.

Cloudflare начинает тестирование Private Access Tokens вместо CAPTCHA. Неужели скоро мы перестанем выбирать все автобусы среди пожарных гидрантов? Или станет еще хуже?

Исследователи изучили 1 000 000 сайтов и говорят, что jQuery самый популярный. Почему тогда никто не признаётся, что использует его? Очень странные дела.

Figma начала поддерживать вариативные шрифты. Вариативные шрифты — это как на гифке.

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

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

В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.

Читать

Через 15 минут начинаем онлайн-собеседование верстальщика — покажем, как проходят собеседования в IT, и ответим на вопросы из чата.

Присоединяйтесь — https://tml.io/winjk

Распродажа — и точка

Скидка 60% на навыки, дерево навыков и проекты.

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

Вы сможете набить руки и начать верстать настоящие проекты, а не просто решать примеры.

Купить со скидкой — https://tml.io/pp22l

Отзыв Дмитрия Мутохляева — студента курса «HTML и CSS. Адаптивная вёрстка и автоматизация».

Оба курса по HTML открыли мне глаза на многие тонкости вёрстки: git, правильная разметка страниц, тестирование вёрстки, автоматизация, доступности и оптимизация. Курс будет полезен даже тем, кто давно изучает вёрстку.

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

Курс «HTML и CSS. Адаптивная вёрстка и автоматизация» стартует 25 июля, успейте записаться.

Мы уже разобрались со вкладкой Elements, а теперь продолжаем знакомство с другими важными частями DevTools — вкладками Console, Sources и Network.

А также приятный бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.

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

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

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

До 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
Непонятно — спросите. В этом нет ничего страшного🤗