Эта статья была рецензирована Марком Брауном . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Обучение никогда не останавливается — особенно в веб-разработке. Наша отрасль постоянно обновляется и совершенствуется, и мы тоже должны! К сожалению, не отставать может быть утомительным, но это не должно быть. В этой статье я покажу вам, как небольшие эксперименты могут быть увлекательным и эффективным способом изучения новых вещей и обеспечения того, чтобы обучение и поддержание актуальности оставалось интересным.
Удовольствие от экспериментов
Вы делаете побочные проекты? Если вы это сделаете, я уверен, что вы однажды сделали проект, который сначала был очень веселым, но быстро превратился в запутанный беспорядок. Заняться чем-то не очень весело и может реально повредить мотивации как для сторонних проектов, так и для вашей работы. Основными причинами этого часто являются ползучесть или давление, в то время как вы должны отдыхать в свободное время. Применяя некоторые правила, мы можем быть уверены, что не столкнемся с неприятными сюрпризами:
- Подготовь свою работу. Убедитесь, что вы точно знаете, насколько велик эксперимент и что он включает в себя. Если это слишком много, разделите его на управляемые куски, у каждого из которых есть начало и конец, или потяните за вилку.
- Расписание задач. Не ложиться спать поздно каждую ночь. Просто запланируйте час или два, один или два раза в неделю.
- Нет сроков. Все, включая вас, должны расслабиться. Устанавливать цели — это нормально, и пропускать их тоже должно быть.
- Позвольте себе повеселиться. Хотя вы не должны откладывать на потом, жизнь — это больше, чем куча проверок в списке дел. Найдите время, чтобы насладиться плодами своих трудов.
Проведение небольших экспериментов не означает, что они не могут быть частью чего-то большего. Взять, к примеру, проект визуализации данных. Это может занять некоторое время, но его легко разбить на более мелкие задачи:
- Настройте рабочий процесс сборки
- Находите и получайте интересные данные ( вот вам крутой список API, которые вдохновят вас )
- Получать и обрабатывать данные с Node.js, используя функции ES2015
- Сравните и выберите технологию (canvas, WebGL, DOM / SVG) или библиотеку (d3.js, p5.js, THREE.js) для визуализации данных.
- Визуализируйте данные, используя ваш инструмент выбора
Я использую доску Trello, чтобы отслеживать все мои эксперименты. Именно здесь я перечисляю и планирую их, и добавляю соответствующую информацию, пока не наступит время начать эксперимент. Для более крупных проектов я склонен создавать новую доску специально для этого проекта и добавлять карты для каждой задачи. Любой альтернативы будет достаточно. Документирование вещей держит шум в голове!
Обзор эксперимента
Помимо обучения на самом деле, делая новые вещи, эксперименты также являются отличной возможностью улучшить себя. Вспомните свой эксперимент и задайте себе следующие вопросы:
- Можно ли избежать проблем во время казни при лучшей подготовке? Если да, то как?
- Каково было качество выполненной работы, и что я могу сделать, чтобы улучшить?
- Мог ли я подготовить свой эксперимент более эффективно?
Анализ и совершенствование того, что мы делаем, дает нам опыт, что очень ценно в нашей отрасли. Общение и документирование тоже. Многие обзоры экспериментов делают отличные посты в блоге.
Хотя это не очень связано с 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.
Вывод
Небольшие эксперименты — отличный практический подход для изучения новых вещей. Еще одним преимуществом является то, что они могут помочь вам улучшить вашу работу, что является наиболее ценным в нашей отрасли. Соблюдая несколько правил, мы можем развлекать эксперименты, мотивируя себя учиться и становиться лучше.
Для тех из вас, кто застрял в колее, я надеюсь, что эта статья дала вам мотивацию для начала нового веселого эксперимента. Для тех из вас, кто не знает, что делать дальше, я надеюсь, что эта статья вдохновила вас. Или, может быть, у вас есть отличные идеи для экспериментов? Или я что-то пропустил? В любом случае, я бы очень хотел услышать ваше мнение в комментариях ниже.