Статьи

Совершенствуйте изучение JavaScript с помощью веселых экспериментов

Эта статья была рецензирована Марком Брауном . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

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

Удовольствие от экспериментов

Вы делаете побочные проекты? Если вы это сделаете, я уверен, что вы однажды сделали проект, который сначала был очень веселым, но быстро превратился в запутанный беспорядок. Заняться чем-то не очень весело и может реально повредить мотивации как для сторонних проектов, так и для вашей работы. Основными причинами этого часто являются ползучесть или давление, в то время как вы должны отдыхать в свободное время. Применяя некоторые правила, мы можем быть уверены, что не столкнемся с неприятными сюрпризами:

  1. Подготовь свою работу. Убедитесь, что вы точно знаете, насколько велик эксперимент и что он включает в себя. Если это слишком много, разделите его на управляемые куски, у каждого из которых есть начало и конец, или потяните за вилку.
  2. Расписание задач. Не ложиться спать поздно каждую ночь. Просто запланируйте час или два, один или два раза в неделю.
  3. Нет сроков. Все, включая вас, должны расслабиться. Устанавливать цели — это нормально, и пропускать их тоже должно быть.
  4. Позвольте себе повеселиться. Хотя вы не должны откладывать на потом, жизнь — это больше, чем куча проверок в списке дел. Найдите время, чтобы насладиться плодами своих трудов.

Проведение небольших экспериментов не означает, что они не могут быть частью чего-то большего. Взять, к примеру, проект визуализации данных. Это может занять некоторое время, но его легко разбить на более мелкие задачи:

  • Настройте рабочий процесс сборки
  • Находите и получайте интересные данные ( вот вам крутой список API, которые вдохновят вас )
  • Получать и обрабатывать данные с Node.js, используя функции ES2015
  • Сравните и выберите технологию (canvas, WebGL, DOM / SVG) или библиотеку (d3.js, p5.js, THREE.js) для визуализации данных.
  • Визуализируйте данные, используя ваш инструмент выбора

Я использую доску Trello, чтобы отслеживать все мои эксперименты. Именно здесь я перечисляю и планирую их, и добавляю соответствующую информацию, пока не наступит время начать эксперимент. Для более крупных проектов я склонен создавать новую доску специально для этого проекта и добавлять карты для каждой задачи. Любой альтернативы будет достаточно. Документирование вещей держит шум в голове!

Обзор эксперимента

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

  1. Можно ли избежать проблем во время казни при лучшей подготовке? Если да, то как?
  2. Каково было качество выполненной работы, и что я могу сделать, чтобы улучшить?
  3. Мог ли я подготовить свой эксперимент более эффективно?

Анализ и совершенствование того, что мы делаем, дает нам опыт, что очень ценно в нашей отрасли. Общение и документирование тоже. Многие обзоры экспериментов делают отличные посты в блоге.

Хотя это не очень связано с JavaScript, одним из моих особенно забавных экспериментов было создание векторной графики в Sass , где я преобразовал карту координат в контур и растеризовал ее в однопиксельную рамку-тень. Я не только изучил функциональность Sass, с которой я раньше не был знаком, но и исследовал некоторые алгоритмы.

Мальчик делает эксперименты в лаборатории. Взрыв в лаборатории.

В поисках вдохновения

Если вы не знаете, чему учиться дальше, всегда полезно иметь под рукой несколько ресурсов для вдохновения.

Если вам нравится графика и искусство, CodePen — отличное место для начала. Выборы часто полны удивительных ручек, которые стоит разложить, чтобы посмотреть, как они работают. Если вы чувствуете себя более предприимчивым, попробуйте Dribbble или Behance .

SitePoint работает на многих авторов из разных слоев общества. Из-за этого канал JavaScript полон всевозможных достоинств JavaScript.

Среды выполнения

Вы, наверное, уже знали, что JavaScript работает в браузерах, но знаете ли вы, что вы можете запускать JavaScript и вне браузеров?

  • Node.js , безусловно, самая популярная не браузерная среда исполнения JavaScript. С его помощью вы можете писать скрипты, интерфейс командной строки или настольные приложения и многое другое. Он работает на Windows, OS X и Linux.
  • Electron позволяет создавать кроссплатформенные настольные приложения, используя старый добрый HTML, CSS и JavaScript.
  • Cordova позволяет создавать мобильные приложения с использованием HTML, CSS и JavaScript.
  • React Native позволяет создавать мобильные приложения с использованием инфраструктуры React.

API браузера

За последние несколько лет в браузере появилось много новых API, позволяющих вам делать самые разные забавные вещи.

  • Service Worker API — это большой API, который позволяет нам выполнять различные действия, такие как предоставление поддержки в автономном режиме .
  • WebRTC — это API, который позволяет нам создавать соединения в реальном времени с другим компьютером и передавать аудио и видео данные.

Некоторые API-интерфейсы позволяют нам использовать аппаратное обеспечение устройства, например, считывать датчики или заставлять устройство выполнять какие-либо действия (например, вибрировать).

  • Датчик внешнего освещения предоставляет информацию о яркости внешнего освещения, которую мы можем использовать для адаптации нашего сайта или приложения.
  • Состояние батареи довольно очевидно; мы можем запросить состояние батареи. Более тяжелые приложения могут использовать это для включения режима энергосбережения .
  • Геолокация предоставляет нам информацию о местонахождении пользователя.
  • Мы можем использовать информацию о сети для предоставления клиенту небольших файлов.
  • Уведомления весьма полезны для многих приложений, таких как приложения чата.
  • Вы строите игру, в которой для ввода используется мышь? Блокировка указателя — ваш друг.
  • Близость позволяет узнать, насколько близко пользователь находится к устройству. Возможно, это можно использовать для обнаружения объятий?
  • Ориентация устройства позволяет нам определять, когда меняется ориентация.
  • Вибрация позволяет нам вибрировать устройство, которое отлично подходит для игр.

Библиотеки и рамки

Целью большинства библиотек является простое выполнение задач, поэтому никогда не помешает иметь некоторый опыт их использования. Более популярные библиотеки и фреймворки (такие как Angular и React) могут даже потребоваться для работы. Один или два эксперимента также могут стать отличным способом подготовиться к собеседованию.

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

Архитектура

  • Angular — это фреймворк MVC, все еще используемый многими командами.
  • React — это библиотека, используемая для визуализации представлений.
  • Polymer — это библиотека для создания веб-компонентов.
  • Lodash.js , Underscore.js и Ramda.js являются библиотеками функционального программирования. Некоторые команды любят их использовать, но многие этого не делают. В любом случае, хорошее понимание функционального программирования — очень ценный навык, поэтому любой из них стоит проверить.

визуальный

  • D3.js — это библиотека для работы с графикой и DOM, которая хорошо работает, если вы хотите визуализировать графику с помощью SVG или HTML.
  • p5.js — это библиотека, вдохновленная Processing (гибкий программный альбом и язык для изучения кодирования в контексте визуальных искусств). Он имеет богатый набор функций для рисования фигур и выполнения расчетов.
  • Three.js — это высокоуровневый 3D-API для абстрагирования от сложных кусочков WebGL

Физический Мир

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

  • Raspberry Pi — это одноплатный компьютер размером с кредитную карту, идеально подходящий для преподавания или обучения.
  • Arduino похож на Raspberry Pi, но больше ориентирован на электронику.
  • LEGO® MINDSTORMS® — это мини-компьютер, который может управлять оборудованием LEGO. Что не любить?
  • Johhny-Five — это JavaScript-фреймворк для робототехники и Интернета вещей, который можно установить на Arduino или аналогичных устройствах.

Все вышеперечисленное может быть запрограммировано или может работать с JavaScript.

Вывод

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

Для тех из вас, кто застрял в колее, я надеюсь, что эта статья дала вам мотивацию для начала нового веселого эксперимента. Для тех из вас, кто не знает, что делать дальше, я надеюсь, что эта статья вдохновила вас. Или, может быть, у вас есть отличные идеи для экспериментов? Или я что-то пропустил? В любом случае, я бы очень хотел услышать ваше мнение в комментариях ниже.