Как сделать график на Canvas

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

Ещё у HTML Academy есть рассылка — одно письмо в неделю с полезными статьями по вёрстке и программированию.

Нам нужно больше зависимостей. Или нет?

Фронтенд-проекты в 2020 начинаются с npm install. Со временем в проект попадают новые пакеты, за которыми следуют пакеты ещё новее. При этом большинство из нас понятия не имеет, что попадает в папку node_modules/, и почему-то всем с этим нормально живётся.

Ребята из HTML Academy рассказали, почему стоит по возможности отдавать предпочтение чистому JavaScript и следить, какие пакеты подключаются к проекту.

Ещё у HTML Academy есть рассылка — одно письмо в неделю с полезными статьями и туториалами по вёрстке и программированию.

Новые приключения в HTML Academy

Приём-приём, вызываем любителей приключений!

26 июля стартовала битва за кодий на Джаваскриптоне. Вступайте в одну из трёх команд, бесплатно проходите онлайн-тренажёры по вёрстке и программированию и зарабатывайте за это кодий. Чем больше участников, тем больше кодия у команды, и тем быстрее открываются новые курсы. Команда, которая к 31 июля наберёт больше всех кодия, станет победителем и получит шикарные призы.

Каждый попаданец из фракции-победителя получит:

Ещё есть время подготовиться и заработать немного кодия, разгадывая загадки бортового компьютера. В общем, всех нас ждёт настоящая космоопера.

Подключайтесь!

Как загрузить, настроить и запустить Телеграм-бота на сервере

Боты — будущее интернета! Недавно ребята из HTML Academy рассказали, как создать простого бота на Node.js,однако он работал только на локальном компьютере.

Сегодня вы узнаете, как загрузить бота на сервер, запустить его и проверить, что всё работает. Для этого нужно пройти 7 этапов:

  1. Выбрать хостинг.
  2. Заказать хостинг.
  3. Загрузить бота.
  4. Зайти на сервер по SSH.
  5. Установить Node.js
  6. Запустить и проверить бота.
  7. Обеспечить автоматический перезапуск бота.

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

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

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

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

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

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

Изучаем многоколоночный текст

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

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

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

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

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

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

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

Что должен уметь верстальщик, чтобы его все хотели

Вот раньше было время! В нулевых, например, никаких фронтов не было, а человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно.

А что должен уметь верстальщик сегодня? Разбираться в HTML и CSS, немного знать JavaScript, использовать магию гридов, флоатов, знать системы сборки и точно кое-что еще.

О том, как выглядит идеальная вакансия для верстальщика в 2020 году, какие навыки и знания востребованы, и что обо всём этом думают специалисты из индустрии — читайте в блоге HTML Academy.

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

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

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

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

Вы узнаете:

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

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

Живые и неживые коллекции в JavaScript

Веб-разработка — это не только про вёрстку и знание HTML. Иногда приходится где-то что-то подпилить и написать код. А где код — там хранение данных. А где хранение данных — там переменные, хранение информации в массивах и другие странных словах.

Ещё информацию можно хранить в коллекциях (вспомните полку со старыми видеокассетами — это прям оно). Допустим, мы хотим получить информацию о всех картинках со страницы и что-то с ними сделать через JavaScript. Мы выполняем команду и получаем коллекцию объектов, которая вроде похожа на массив, но нет.

Дело в том, что коллекции тоже бывают разными — живыми и неживыми. HTML Academy провели целое расследование о том, чем они отличаются, когда программисту нужны динамические коллекции, а когда лучше подойдут статические.

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

И пусть живые позавидуют неживым!