cerealenjoyer Goto Github PK

This was my application for Founders and Coders FAC22 cohort, I tried to use everything I'd learned on freecodecamp and elsewhere to produce an emulated Windows 98 desktop environment.

Using lessons from the Javascript30 lesson 'Javascript Drum Kit', I made this (extremely) simple piano. Taking inspiration from films like Grand Piano I made a simulation of a 'musical combination lock', a locked box hidden inside a piano that only unlocks on playing a certain melody - in this case the opening riff from a 'My Chemical Romance' song (hence the name 'emoPiano'). Try listening to the start of Black Parade and trying to replicate the sequence, or if you're impatient, you can cheat.

l k ; j f l d s j a f

I made a simple clock in JS and CSS, and decided to try and link it thematically to the previous project: inspired by my wasted youth playing point-'n-click mystery games I made a Silent Hill inspired puzzle clock - watching it until the second hand hits '0' causes it to click and shift, unlocking another door.

I was really excited to learn about CSS Variables. DOM Manipulation was my favourite part of learning how to build a website, I love the crunchiness of it and I think it's really cool that you can make your JavaScript interact with your HTML, it suddenly makes a website feel like 'serious business'. Adding CSS into the mix feels like the coup de grace. Inspired by films like Jacob's Ladder, as well as the found-footage photography artwork of Trevor Henderson, I tried to use CSS Variables to make a photo of an everyday tableau 'shift' into a ruined, uncomfortable environment: You can adjust the sliders on the left to add layers of decay onto the photo, and for subtlety you can blur them out with the sliders on the right, to lessen the effect.

This was my first piece of groupwork; I worked with Danilo (he's great too by the way, if you don't hire me, hire him!) to make a design agency one-page website. Our planning discussions revealed a mutual interest in dystopian fiction and ruined architecture, so we came up with the idea of a design site from hell: If the gold standard of software engineering was to build products that last the test of time, we wanted our site to visibly crumble and decay the longer you spent on it. As you scroll down the site, the background begins to fall apart, and an ordinary suburban street becomes overgrown with rust and plantlife. We had an idea that was going to be even more intrusive: A timer would start when you logged into the website and over time CSS elements would become buggy - kerning would become uneven, margins would start to unravel, but sadly this idea was seen as too time-consuming for the timeframe we were given and was abandoned in favour of making sure the website was legible and accessible. (Probably the right call to be honest).

You might have seen a fair few of these already, because this was based on a workshop that we went through in lessons: Based on the Who's that pokemon stinger that played in ad-breaks of the cockfighting-fantasy children's show Pokemon, I made an extremely simple API lookup: Type a pokemon name (or number) into the search input, get a Pokemon out. My favourite part of this one was learning to use (and make) SVGs. When I started I had no idea that what I thought was an extremely simple goal (to make some text curve out slightly would involve opening GIMP, drawing a line for the text to follow, converting it into a path, exporting that path and then instructing the text to follow that (fill-less, borderless) path. Any time I see path text on a website now, I silently thank the frontend developer for their service.

Truth be told this is the project I'm least happy with, but I learned a lot about APIs making it so I feel like I have to acknowledge it. Initially it started as a joke between me and my project partner, that the Guardian's film reviews were so bad you should always take the opposite advice. From there we decided to make a site that allowed you to search for a film through the (extremely robust) MovieDB API, and then clicking one of the results would show you the inverse star rating from the Guardian ( ${5-guardianStarRating}). However, it became clear late on that no amount of boolean-fiddling or search-tweaking would ever make the Guardian API do exactly what we wanted: review coverage before 1999 was spotty at best, and their metadata wasn't quite what we needed it to be. In a moment of artistic hubris I quick-stripped all of the CSS that had been carefully employed to make it look like the Guardian front page, and replaced it with the New York Times' dedicated movie reviews API. Of course, the New York Times situates their content behind a paywall, so in retrospect it wasn't the quick-fix I had hoped for