Digital Legos
Making the Magic Happen with JavaScript
In last week’s Critical Making course, I encountered HTML and CSS and provided a writeup of my first coding project. In this week’s coding adventure, I am engaging with JavaScript, which is the web language for how the “magic” happens.
In our assignment, we are tasked with choosing a library or framework and doing something with it. Here are a few whiteboard notes of what libraries and frameworks are. In my basic understanding, libraries and frameworks are places where people have designed cool code that you can copy and paste into your projects to use and tweak as desired.
In class, RJ walked us through the magic of JavaScript and working with Libraries and Frameworks by creating a filtering list. He uploaded the class discussion and a follow-up tutorial that helped to illuminate the concepts, which I reviewed slowly to create my project.
I decided that I would make a list based on a project I did several years ago about cowboy poets. Cowboy poetry is a style of poetry that has a particular meter and rhyme, often written and orally recited by folks who make their living on horseback and tell stories about their livelihood. During a graduate program at the University of Wyoming, I conducted a robust research project and met dozens of cowboy poets and often sketched their profiles as a neat trick to open up an introduction. In my coding project, I was interested in seeing if I could first organize their names and then see if I could insert the sketches I did of them. Here is the poster of all their names and profile sketches together:
From class and my whiteboard note (above), searching through the suggested libraries (Google Fonts, Animate.css, Draggable.js, masonry.js, p5.js, D3.js, and Three.js) seemed appropriate because I needed one thing — to organize names (something we explored in class) and potentially include a picture (something that we didn’t but I could challenge myself with). I gave a cursory glance until masonry.js and thought it looked f*’n awesome.
I do a lot of visual work and thought this would be an awesome tool to highlight illustrations and projects over the years. Just check out what this can do:The first thing I did was jump on YouTube until I found a decent tutorial, which happened to steer me to using Colcade.js instead of Masonry. It was billed as a lightweight Masonry-style library and I downloaded it from Git Hub. In the Git Hub usage details, it stated “Colcade works by moving item elements into column elements” so I may be losing some slick animation effects by going this route.
I copy/pasted the CDN (content delivery network), which helps to load internet content needed for HTML, javascript, images, videos, etc. Then, I copy/pasted the Initialize Colcade.
I set a header <h1>, established how many grids I wanted (4), and then created a format to state the name and insert the image. I did this a bunch of times, linking my images and renaming the headers <h2> until my page was full and looking basic.
For the most part, I could understand the tutorial steps getting to here, but when I stepped over into defining the CSS styles, something was fishy. The visuals weren’t updating on my project as was being demonstrated in the tutorial. So, I was guessing that the CSS was not linked to my HTML. In the end, I realized I hadn’t clicked a Watch Sass command at the bottom tab, but when I did it updated and I could see how things had changed. At this point, I really could understand how to fine-tune my project until it was complete.
After seeing the examples in Masonry.js, I thought my project was a bit underwhelming in terms of magic. So, I went back to Masonry and started copying/pasting elements into my code. My page started to develop a bit more magic and I could start to understand how I could alter things in the code, search YouTube for tricks, and create what I am going for.
