Quotes on Magic

A week or so ago I made a super simple site. I made the majority of it in a day but have been constantly tweaking it (mainly the CSS!) and adding content. It’s a site that displays a random quote about magic / a quote by a magician.

The site is now live at http://quotesonmagic.com/.

The idea comes from this challenge on freeCodeCamp, a really cool online course for learning to code. The challenge said to host on Codepen, but I’ve hosted on Github Pages (and the whole thing is here on GitHub if you want to take a look).

The challenge had these requirements:

  • click a button to show a random quote
  • click a button to tweet the quote, trimming characters as appropriate

This site has both those things. I’ve also set it so it will tag the person whose quote it is on Twitter if they’re on Twitter, by adding an extra field to the (json) list of quotes.

The whole thing is really light-weight. Just vanilla JavaScript (that great framework by that dude Brendan ;)) in one JS file, most of it being a huge object with the content. Even has space for an easter egg if you’re not on mobile. Also a reset plus a 275 line CSS file, most of which is for the cool link hover effects (from Tympanus.net). Lots of hacky CSS to get it to look nice cross-device, but it seems like it’s all working fine glitch-free. Definitely wasn’t made mobile first though. Just the old school developer style of adding more and more rules to fix things you previously broke. (Two CSS properties walk into a bar. A barstool in a totally different bar falls over.) And submit page is done all static / frontend only by using Formspree.

Some things that could be added are:

  • a permalink to each quote (right now this happens on the /all page, as when that generates each quote it gives it an id=”#”. but would be cool to do something to solve this with address bar hashing)
  • a better random (or rather, a less random) algorithm so we don’t get same quote twice in a row when cycling through
  • a better way of storing all the content instead of just in that JS file (anyone got any ideas?)
  • a better way of submitting quotes (though no idea how to do this without a backend)

Also, the big white circle was meant to have a little reload icon in it, but I quite like how it looks as is. Supe minimal. Also also, I was going to use a random background image of fixed size using Unsplash Source, but I didn’t like the load times and I didn’t like how often it gave images I didn’t like. However, might use this idea (it’s just a single line that’s commented out at the mo) if this ever becomes a Chrome extension new tab page. (That might be a fun thing to code up? Never made a Chrome extension before).

Domain will stay up for a year or so, so if you’re reading this in 2018 and the above link doesn’t work try hitting up this link instead.

Lastly, if you have more suggestions for quotes to add please send them my way!


Earth Action Day

Today I was fortunate enough to attend a really lovely event organised by the Advaya Initiative. Amongst other things happening was a talk by Alex Evans which I really enjoyed. He talked about what he calls the Myth Gap, and how we need a new set of stories in order to effect change. I love this idea. Stories yield tremendous power.

He also talked about how the majority of stories around climate change campaigns fall into the enemy narrative. While this is fun (they’re the Empire, we’re the feisty rebels!), it’s too easy to say ‘put all the fault on the big nasty corporations’. Moreover, it is polarising. Climate change has become the most reliable indicator of where someone identifies on the left-right spectrum; it’s become a symbolic leftie problem. But its a problem that is too huge and affects too damn much to be solved by the progressives rising up. Everyone needs to work together.

Quick plug: the book The Myth Gap is available here.

Super interesting stuff eh? I’ve been wanting to do some storytelling workshops but want to even more so after this. (This is a short, fun, free course to check out if you’re interested).

There was also a talk and workshop I went to on craftivism. All about gentle, quiet and introspective activism that is about other people speaking to you rather than talking at people. This was the standout message from that:

“In a gentle way, you can shake the world.” - Gandhi

Other things that happened today:

That’s all from me for now.


New blog

Hi all,

Here’s the obligatory first blog post. More things soon!