Нам нужно больше зависимостей. Или нет?
Фронтенд-проекты в 2020 начинаются с npm install. Со временем в проект попадают новые пакеты, за которыми следуют пакеты ещё новее. При этом большинство из нас понятия не имеет, что попадает в папку node_modules/, и почему-то всем с этим нормально живётся.
Ребята из HTML Academy рассказали, почему стоит по возможности отдавать предпочтение чистому JavaScript и следить, какие пакеты подключаются к проекту.
Ещё у HTML Academy есть рассылка — одно письмо в неделю с полезными статьями и туториалами по вёрстке и программированию.
Новые приключения в HTML Academy
Приём-приём, вызываем любителей приключений!
26 июля стартовала битва за кодий на Джаваскриптоне. Вступайте в одну из трёх команд, бесплатно проходите онлайн-тренажёры по вёрстке и программированию и зарабатывайте за это кодий. Чем больше участников, тем больше кодия у команды, и тем быстрее открываются новые курсы. Команда, которая к 31 июля наберёт больше всех кодия, станет победителем и получит шикарные призы.
Каждый попаданец из фракции-победителя получит:
- Доступ ко всем платным тренажёрам до 10 августа включительно.
- Скидку 50% на навыки.
- Скидку 70% на макеты и проекты
- Скидки от 1500 до 5500 рублей на курсы и профессии.
Ещё есть время подготовиться и заработать немного кодия, разгадывая загадки бортового компьютера. В общем, всех нас ждёт настоящая космоопера.
Как загрузить, настроить и запустить Телеграм-бота на сервере
Боты — будущее интернета! Недавно ребята из HTML Academy рассказали, как создать простого бота на Node.js,однако он работал только на локальном компьютере.
Сегодня вы узнаете, как загрузить бота на сервер, запустить его и проверить, что всё работает. Для этого нужно пройти 7 этапов:
- Выбрать хостинг.
- Заказать хостинг.
- Загрузить бота.
- Зайти на сервер по SSH.
- Установить Node.js
- Запустить и проверить бота.
- Обеспечить автоматический перезапуск бота.
Подробно о каждом этапе читайте в этой статье.
А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и туториалами.
Как подключить и оптимизировать нестандартные шрифты
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. Самый простой способ — использовать стандартные шрифты, например, 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 минут самообразованию.
И пусть живые позавидуют неживым!
Как HTML Academy делает онлайн-тренажёры
В Академии приоткрыли завесу тайны и рассказали, как в далёком 2013 году начали делать интерактивные курсы (они же тренажёры) для начинающих разработчиков и как они делаются сейчас.
Процесс непростой, но интересный. В нём участвуют авторы, дизайнеры, продюсеры и разработчики, редакторы, маркетологи — список довольно внушительный.
А чтобы курс получился, нужно собрать список типовых задач, разложить их на шаги, придумать теорию, запрограммировать испытание, доработать движок, всё посмотреть четыре раза (а то и больше), протестировать, а потом выложить на сайт.
Подробный рассказ обо всех этапах — в этой статье.
Введение в Chrome DevTools. Console, Sources, Network
Ребята из HTML Academy выпустили вторую часть цикла про Chrome DevTools — на этот раз статья о вкладках Console, Sources и Network. Рассказ о том, как просмотреть список ресурсов на странице, понять, куда делись шрифты, и выяснить, почему страница так долго грузится.
Все подробности — в этой статье.
Полезный телеграм-канал для фронтендеров
Хотите получать полезные статьи о веб-разработке, узнавать о лайфхаки для продуктивного обучения, быть в курсе акций и скидок HTML Academy — подписывайтесь на их телеграм-канал. Бонусом — чат, в котором можно задать вопрос коллегам, обсудить технологии, попросить помощи, если что-то не получается.
Как написать Телеграм-бота на JavaScript
Ребята из HTML Academy подготовили туториал о том, как сделать телеграм-бота. Это возможность отправить друзьям ссылочку со словами: «Смотри, это моё».
Для работы понадобятся:
- редактор кода, чтобы писать код;
- Node.js любой версии, выше 0.12;
- консоль. Или встроенный в систему вариант;
- VPN. Возможно но не факт, потому что Телеграм работает не везде.
Подробно о каждом шаге — по ссылке.
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени. Ребята из HTML Academy рассказали, какие комбинации использовать, чтобы упростить работу с Visual Studio Code.
Вы узнаете, как:
- быстро добавить комментарий;
- перейти к строке под номером;
- поменять строку местами с соседними;
- дублировать строку;
- перейти к парной сборке;
- переименовать переменную;
- отформатировать документ;
- перейти к объявлению переменной;
- включить/выключить перенос слов;
- включить дзен-режим.
Подробнее о каждой комбинации читайте в этой статье.
Введение в Chrome DevTools. Панель Elements
В каждый современный браузер встроены инструменты разработчика — они позволяют быстро отловить и исправить ошибки в разметке или в коде. С их помощью можно узнать, как построилось DOM-дерево, какие теги и атрибуты есть на странице, почему не подгрузились шрифты и многое другое.
Подробно о настройке Chrome DevTools и панеле Elements читайте в статье от HTML Academy.
