Продолжаем запускать новые проекты по JavaScript. Сегодня вышел в релиз проект лёгкой сложности — «Бесконечная карусель товаров».
Вам предстоит программировать виджет — карусель с товарами интернет-магазина, позволяющий переключать карточки с товарами вперёд и назад.
В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.
Вам предстоит программировать виджет — карусель с товарами интернет-магазина, позволяющий переключать карточки с товарами вперёд и назад.
В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.
Короткий чек-лист на случай, если вам понадобится проверить работу сайта перед запуском, а тестировщика рядом не будет.
⠀
Первым делом нужно проверить, что всё соответствует техническому заданию, а сайт совпадает с макетом. Обратите внимание на то, чтобы на всех устройствах и браузерах сайт выглядел одинаково, кнопки и скрипты работали корректно, а контент отображался правильно.
⠀
Посмотрите на наличие ошибок в коде JavaScript в консоли разработчика. Также там можно обратить внимание на запросы и размер загружаемых файлов.
⠀
С помощью валидатора нужно убедиться, что код удовлетворяет стандартам HTML/CSS.
⠀
Обратите внимание на формы и правильность ссылок. Формы должны быть удобными для пользователя, а ссылки приводить на настоящие сайты.
⠀
Нужно проверить, чтобы сайт работал быстро, иначе пользователи не будут ждать долгой загрузки и уйдут к конкурентам.
⠀
Пройдитесь по критериям качества. Это не только то, что мы перечислили — существует гораздо больше мелочей, которые должен знать хороший фронтенд-разработчик. На курсах HTML Academy верстают и готовят к публикации сайты исключительно на основе критериев качества.
⠀
Первым делом нужно проверить, что всё соответствует техническому заданию, а сайт совпадает с макетом. Обратите внимание на то, чтобы на всех устройствах и браузерах сайт выглядел одинаково, кнопки и скрипты работали корректно, а контент отображался правильно.
⠀
Посмотрите на наличие ошибок в коде JavaScript в консоли разработчика. Также там можно обратить внимание на запросы и размер загружаемых файлов.
⠀
С помощью валидатора нужно убедиться, что код удовлетворяет стандартам HTML/CSS.
⠀
Обратите внимание на формы и правильность ссылок. Формы должны быть удобными для пользователя, а ссылки приводить на настоящие сайты.
⠀
Нужно проверить, чтобы сайт работал быстро, иначе пользователи не будут ждать долгой загрузки и уйдут к конкурентам.
⠀
Пройдитесь по критериям качества. Это не только то, что мы перечислили — существует гораздо больше мелочей, которые должен знать хороший фронтенд-разработчик. На курсах HTML Academy верстают и готовят к публикации сайты исключительно на основе критериев качества.
В любой сфере деятельности существует много мифов и стереотипов. IT не является исключением.
20 октября на лайве директор по развитию HTML Academy Алексей Симоненко расскажет всю правду о веб-разработке. А заодно ответит на важный вопрос — с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
20 октября на лайве директор по развитию HTML Academy Алексей Симоненко расскажет всю правду о веб-разработке. А заодно ответит на важный вопрос — с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
Webpack и Gulp — популярные сборщики модулей на JavaScript. Каждый инструмент имеет свои преимущества и недостатки. Возникает вопрос, какой сборщик лучше использовать. ⠀
Банально, но универсального ответа нет. Дело в том, что оба инструмента выполняют разные функции. Вы можете использовать и Webpack, и Gulp, но чтобы делать это корректно, нужно в первую очередь определиться с тем, какую задачу вам нужно решить. Для наглядности приведём пример из жизни. Вам нужно забить гвоздь. Это можно сделать любым подручным средством, но лучше взять более правильный инструмент — молоток. Так и в JavaScript — инструментов много, но использовать надо подходящий.
Может ли быть в одном проекте и Webpack, и Gulp? Да. Потому что вы решаете задачи проекта, для решения которых могут понадобиться оба инструмента.⠀
Gulp отвечает за сборку проекта. У вас есть исходные файлы, которые нужны разработчику для создания проекта, а на выходе вы хотите получить оптимизированные файлы для пользователя. Поэтому в Gulp удобно и быстро работать с препроцессорами, шаблонизаторами, оптимизацией всевозможных ресурсов — разметка, стили, шрифты, скрипты, картинки, иконки. В конечном счёте мы получаем оптимизированную сборку проекта, которую остаётся отправить на сервер.⠀
С помощью Webpack можно сделать практически всё то же самое, что может Gulp, но Webpack лучше всего подходит для работы с JavaScript-файлами. После работы над многочисленными JavaScript-файлами проекта Webpack создаёт билд — один файл со всей функциональностью сайта. ⠀
Этот билд также можно оптимизировать и разрезать единый файл на чанки — маленькие кусочки билда. Например, если на странице нет модального окна, то билд не будет загружать чанк modal.js.⠀
Не бойтесь экспериментировать. Благодаря этому вы сможете подобрать правильные инструменты.
Банально, но универсального ответа нет. Дело в том, что оба инструмента выполняют разные функции. Вы можете использовать и Webpack, и Gulp, но чтобы делать это корректно, нужно в первую очередь определиться с тем, какую задачу вам нужно решить. Для наглядности приведём пример из жизни. Вам нужно забить гвоздь. Это можно сделать любым подручным средством, но лучше взять более правильный инструмент — молоток. Так и в JavaScript — инструментов много, но использовать надо подходящий.
Может ли быть в одном проекте и Webpack, и Gulp? Да. Потому что вы решаете задачи проекта, для решения которых могут понадобиться оба инструмента.⠀
Gulp отвечает за сборку проекта. У вас есть исходные файлы, которые нужны разработчику для создания проекта, а на выходе вы хотите получить оптимизированные файлы для пользователя. Поэтому в Gulp удобно и быстро работать с препроцессорами, шаблонизаторами, оптимизацией всевозможных ресурсов — разметка, стили, шрифты, скрипты, картинки, иконки. В конечном счёте мы получаем оптимизированную сборку проекта, которую остаётся отправить на сервер.⠀
С помощью Webpack можно сделать практически всё то же самое, что может Gulp, но Webpack лучше всего подходит для работы с JavaScript-файлами. После работы над многочисленными JavaScript-файлами проекта Webpack создаёт билд — один файл со всей функциональностью сайта. ⠀
Этот билд также можно оптимизировать и разрезать единый файл на чанки — маленькие кусочки билда. Например, если на странице нет модального окна, то билд не будет загружать чанк modal.js.⠀
Не бойтесь экспериментировать. Благодаря этому вы сможете подобрать правильные инструменты.
Успейте записаться на лайв «Мифы о работе в IT и ошибки начинающих программистов», который пройдёт 20 октября.
На лайве Лёша Симоненко — директор по развитию HTML Academy — расскажет об основных стереотипах в сфере IT и ответит на вопрос, с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
На лайве Лёша Симоненко — директор по развитию HTML Academy — расскажет об основных стереотипах в сфере IT и ответит на вопрос, с какими ошибками сталкиваются начинающие программисты, и как их не совершать.
По исследованиям httparchive, загрузка сайтов становится всё медленнее и медленнее, несмотря на появление новых процессоров и расширение интернет-канала. Это связано с тем, что размеры и количество файлов с каждым годом увеличивается. Вполне логично, ведь сложность проектов с каждым годом возрастает.
📌 Поймите, какие проблемы есть у проекта. На этот вопрос поможет ответить Lighthouse, который встроен в браузер Google Chrome. Также можно воспользоваться его веб-версией.
📌 Определите приоритеты оптимизации. Посмотрите в отчёт Lighthouse и узнайте, где у вас больше всего проблем. Начните с проблемных мест, которые отнимают больше всего времени на загрузку. Обратите внимание, что в каждом отчёте есть ссылки на статью с подробной информацией о том, как делать оптимизацию по выявленной проблеме.
📌 Проанализируйте ваш сайт и решите, какие данные наиболее важны для вашего пользователя — текст, картинки или видео. Чаще всего это текст, но у вас может быть видеохостинг, который содержит только видео. В таком случае отдайте предпочтение видео.
📌 В голове составьте минимальную карту сайта. Она состоит из первого экрана и контента ниже него. Отдайте предпочтение по оптимизации ресурсам, которые попадают на первый экран.
Помните, что время загрузки сайта — один из наиболее важных показателей, которые влияют на поведение пользователя. Чем быстрее будет загружаться ваша страница, тем больше будет просмотров и кликов.
📌 Поймите, какие проблемы есть у проекта. На этот вопрос поможет ответить Lighthouse, который встроен в браузер Google Chrome. Также можно воспользоваться его веб-версией.
📌 Определите приоритеты оптимизации. Посмотрите в отчёт Lighthouse и узнайте, где у вас больше всего проблем. Начните с проблемных мест, которые отнимают больше всего времени на загрузку. Обратите внимание, что в каждом отчёте есть ссылки на статью с подробной информацией о том, как делать оптимизацию по выявленной проблеме.
📌 Проанализируйте ваш сайт и решите, какие данные наиболее важны для вашего пользователя — текст, картинки или видео. Чаще всего это текст, но у вас может быть видеохостинг, который содержит только видео. В таком случае отдайте предпочтение видео.
📌 В голове составьте минимальную карту сайта. Она состоит из первого экрана и контента ниже него. Отдайте предпочтение по оптимизации ресурсам, которые попадают на первый экран.
Помните, что время загрузки сайта — один из наиболее важных показателей, которые влияют на поведение пользователя. Чем быстрее будет загружаться ваша страница, тем больше будет просмотров и кликов.
Сейчас сфера IT является одной из самых востребованных. Рекрутеры выстраиваются в очередь, чтобы схантить квалифицированных кандидатов. Одна из специальностей, которая отлично подходит новичкам — фронтенд-разработка.⠀
Фронтенд-разработчики верстают на HTML и пишут код на JavaScript. Оба навыка востребованы как по отдельности, так и вместе, и относительно просты для изучения.⠀
Изучайте разработку вместе с нашим курсом по профессии «Фронтенд-разработчик», в котором вы получите все необходимые навыки и знания для трудоустройства: https://tml.io/717im
Фронтенд-разработчики верстают на HTML и пишут код на JavaScript. Оба навыка востребованы как по отдельности, так и вместе, и относительно просты для изучения.⠀
Изучайте разработку вместе с нашим курсом по профессии «Фронтенд-разработчик», в котором вы получите все необходимые навыки и знания для трудоустройства: https://tml.io/717im
Вышел в релиз новый проект по JavaScript лёгкой сложности — «Счётчик калорий».
Вам предстоит программировать одностраничное приложение, которое работает в браузере. Приложение позволяет рассчитать индивидуальную суточную норму калорий.
Интерфейс состоит из формы с полями ввода и блока для вывода результата. В эталонной реализации используются нативные браузерные API.
В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.
Вам предстоит программировать одностраничное приложение, которое работает в браузере. Приложение позволяет рассчитать индивидуальную суточную норму калорий.
Интерфейс состоит из формы с полями ввода и блока для вывода результата. В эталонной реализации используются нативные браузерные API.
В комплект проекта входит: техническое задание, готовая вёрстка и примеры эталонной реализации.