Создавайте волшебство с помощью JavaScript

На курсе Critical Making на прошлой неделе я столкнулся с HTML и CSS и предоставил рецензию своего первого проекта по программированию. В приключении по программированию на этой неделе я занимаюсь JavaScript, который является веб-языком того, как происходит волшебство.

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

На занятии RJ показал нам магию JavaScript и работу с библиотеками и фреймворками, создав список фильтрации. Он загрузил обсуждение в классе и последующее руководство, которые помогли осветить концепции, которые я медленно просматривал, создавая свой проект.

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

Из класса и моей заметки на доске (выше), поиск среди предложенных библиотек (Google Fonts, Animate.css, Draggable.js, masonry.js, p5.js, D3.js , и Three.js) казались подходящими, потому что мне нужно было одно — упорядочить имена (что-то, что мы изучали в классе) и, возможно, включить изображение (что-то, чего мы не сделали, но я мог бросить себе вызов). Я бегло взглянул на masonry.js и подумал, что это выглядит чертовски круто.

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

Первое, что я сделал, это залез на YouTube, пока не нашел приличный туториал, который подтолкнул меня к использованию Colcade.js вместо Masonry. Она была заявлена ​​как легкая библиотека в стиле Masonry, и я скачал ее с Git Hub. В деталях использования Git Hub было сказано: Colcade работает, перемещая элементы элементов в элементы столбцов, поэтому я могу потерять некоторые гладкие анимационные эффекты, выбрав этот путь.

Я копирую/вставляю CDN (сеть доставки контента), которая помогает загружать интернет-контент, необходимый для HTML, javascript, изображений, видео и т. д. Затем я копирую/вставляю файл Initialize Colcade.

Я установил заголовок ‹h1›, установил, сколько сеток мне нужно (4), а затем создал формат для указания имени и вставки изображения. Я делал это много раз, связывая свои изображения и переименовывая заголовки ‹h2›, пока моя страница не была заполнена и не выглядела простой.

По большей части я мог понять этапы руководства, но когда я перешел к определению стилей CSS, что-то пошло не так. Визуальные элементы не обновлялись в моем проекте, как было показано в руководстве. Итак, я предположил, что CSS не был связан с моим HTML. В конце концов я понял, что не щелкнул команду Watch Sass на нижней вкладке, но когда я это сделал, она обновилась, и я увидел, как все изменилось. В этот момент я действительно мог понять, как отлаживать свой проект, пока он не будет завершен.

Вот видеоотчет о моей работе:

Увидев примеры в Masonry.js, я подумал, что мой проект немного не впечатляет с точки зрения магии. Итак, я вернулся к Masonry и начал копировать/вставлять элементы в свой код. Моя страница стала немного более волшебной, и я начал понимать, как я могу изменить что-то в коде, искать на YouTube трюки и создавать то, что я действительно хочу.