Как подключить и оптимизировать нестандартные шрифты

Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. Самый простой способ — использовать стандартные шрифты, например, Arial, Times New Roman и так далее. Эти шрифты называются веб-безопасными, достаточно просто указать их название в коде, и всё будет работать.

Но что если дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный? В статье HTML Academy вы узнаете, какие варианты подключения и настройки шрифтов нужны в таких случаях.

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

Туториал. Список задач с drag & drop

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

В этом туториале Саша Смыгина из HTML Academy покажет, как реализовать эффект drag & drop на ванильном JavaScript.

Drag & drop может понадобиться в разных ситуациях, например:

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

Подробнее об эффекте drag & drop читайте в этой статье. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и туториалами.

Интервью с Selectel: как устроен фронтенд, опыт выпускников HTML Academy

Как устроен фронтенд в Selectel?

Ответят Валерий Кондратьев, руководитель отдела разработки и тестирования интерфейсов, и младший фронтенд-разработчик Денис Соколинский.

Старт 17 июня в 12:00 в рамках live-сессии с HTML Academy.

Вы узнаете:

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

Зарегистрируйтесь, чтобы не пропустить трансляцию.

Как HTML Academy делает онлайн-тренажёры

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

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

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

Подробный рассказ обо всех этапах — в этой статье.

Полезный телеграм-канал для фронтендеров

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

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Ребята из HTML Academy рассказали, какие комбинации использовать, чтобы упростить работу с Visual Studio Code.

Вы узнаете, как:

• быстро добавить комментарий;
• перейти к строке под номером;
• поменять строку местами с соседними;
• дублировать строку;
• перейти к парной сборке;
• переименовать переменную;
• отформатировать документ;
• перейти к объявлению переменной;
• включить/выключить перенос слов;
• включить дзен-режим.

Подробнее о каждой комбинации читайте в этой статье.

Интерактивная SVG-диаграмма

Сейчас все активно обсуждают радости и гадости удалённой работы. Тем временем ребята из HTML Academy провели небольшой опрос и попросили пользователей рассказать, с какими трудностями они сталкиваются во время работы из дома (спойлер — все ленятся).

Статистику нужно было как-то красиво оформить, поэтому они подготовили туториал о том, как сделать интерактивный SVG-график. Очень подробная инструкция по ссылке.