Critical Making – Intro to Web Dev

Prompt: Choose one (or more) every day object(s) in your life and make a simple website for it / them. You might consider the site as a container for a favored item or collection of things, a product to sell, or simply a site that pays tribute to the item or object and what it means to you in life. This idea was inspired by the website Ode to Things, which is an e-commerce store and curated collection of physical every day products.

Ode to Ida

I chose to make a site about my puppy, Ida. Having some web experience, I probably spent more time setting up and learning my local dev environment, than anything else. I had always been reluctant to learn node, npm, & git. Now that everything is up and running however, I’m never going back editing on a live webserver.

The site is built on bootstrap, however, I think I’m a release behind, so had to do a quick refresher on the grid system. It’s really nice to not have to type out every breakpoint in Bootstrap4.

I built in a very basic responsive pattern into the site. On mobile, the images stack and go full width, padding is added to make them prettier, and the button transitions to full-width block for those of us with fat thumbs.

Recently I’ve been trying to improve my javascript and spent a lot of the summer learning and practicing. However, I’ve never really tried implementing what I learned into a website… so I decided to write a quick script that displays two random images, from a folder of puppy pictures. The only issues I ran in to with it was ensuring the images weren’t the same, and then figuring out how to manipulate the img source so they actually showed up and change on click. If I had more time, I would probably add a line to ensure that every image was shown.

//something like this? IDK. Would need way to store old image number.
if (leftOld = leftNew) || (rightOld == rightNew) {getRandom()};

Going forward I’d like to spend more time learning to apply my javascript knowledge to actual web applications, especially with frameworks like react, and also polish up my jquery.

https://vimeo.com/361823568
Screen cap of local dev setup and site exploration.

I chose to analyze the Automattic hiring page for this project. Automattic is the parent company of WordPress…so as you might guess the site is built on the WordPress CMS with some of the Jetpack modules.

After cutting through many layers of divs, and some strange mid code styling… the site is pretty simple in its layout and makes use of a lot of the core HTML tags. FYI I chose to omit a number of divs to make the breakdown more readable.

The one cool feature I discovered is a little piece of javascript that will only show up after visiting the work with us page 3 times in 60 days or access the source code, which will display a cool little message urging you to apply.

Website deconstruction: Automattic hiring page.
Github repository for assignment 3