The Indie Web
2.26.2020 audio bitsnpieces

Beep beep bloop bloop - Listen to your webpage in action!

Debugging tools are better than ever, but some things still remain hidden to the un-observant eye… this small script is a delightful way to hear what webpages are doing behind the scenes.

Accurately named plink-plonk.js by developer Tom Hicks, this small snippet of JavaScript is a clever and simple way to create sounds from the browser whenever the webpage you’re on modifies itself in any way. (For single-page apps, this will be a lot!)

The script is activated by pasting it into your console (not always the best idea, if you can’t understand all the code). Here’s a quick video of it in action:

The simplicity of the script, is based in both the power of the Web Audio API and the Mutation Observer API.

So how does this work? Lets break it down!

Explain it to me
2.18.2020 bitsnpieces

Always judge a book by its cover, bits'n'pieces.

Last week I completed a small weekend project called Always Judge a Book by its Cover. Rather write about it, I thought it would be fun to go over some of the neater pieces of tech that have gone into it and break them down into small examples.

The first, and perhaps the most obvious, is the goop effect that sits on the header and in between each of the books (alternating from white to a light grey). This is created using JS and a canvas element. (Although CSS Houdini could be a good option in the future.)

You can have a look at the code above… Ultimately, it’s a fairly simple effect that definitely looks a little more complex than its actual code.

The second little flair, which was a fun one to make, is the 3D CSS book.

The book gets its 3D effect from the CSS transform property. I used the transform-style: preserve-3d; property to really give it that semi-realistic feel. The pages are just divs with box shadows and rounded corners. And then to top it all off, an image of the cover is used on the front and back.

The inline padding-top stops the image from jumping as it loads. There are lots of thoughts on how to patch up this annoying part of loading images on the web, but I chose to stick with this old faithful method.

And the third tidbit?
2.14.2020 microcode bot

Run your tweet on a virtual 8-bit computer.

This is a true gem in the realm of microcode. BBC Micro Bot is an amazing tweet-bot, with a simple premise. Just @ mention it in a tweet with some BASIC code, and it will reply with an animated rendering of the result.

This project is fairly fresh, but already yielding fantastic results. I love the many ways such a small amount of code can result in something so beautiful and animated.

For the tweets below, you can see both the code and the outcome. I’ve tried to identify and link out to the theory or idea behind the code if I can spot it easily.

With all creative code… playing around with it is an incredible opportunity to learn while exploring your creative side! Remix, resend, and create something new! If you’ve got something you’re proud of, edit this post on GitHub to share it!

Here, we have SierpiΕ„ski’s Triangle. It’s amazing how much complexity can be pulled from recursive code!

This is a great instance of a beautiful and beloved staple in the world of generative code:

10 PRINT CHR$(205.5+RND(1)); : GOTO 10
The randomization of two characters shows so much complexity and beauty!

Random triangle generation, colors, and fills. Really such simple code that still sucks you into the screen!

It’s projects like this that really show how powerful visual code can be!

More please.
1.28.2020 art shaders

A super way to show off your stunning shaders.

If you’ve ever looked into shaders, then you’ve probably run into Shadertoy, a fantastic tool for building shaders in the browser, as well as a community for showing off what you’ve made. That said, Shadertoy’s aesthetic and appeal is directly targeted at developers who want the shader and its code.

CineShader, is a layer over top of Shadertoy created by Lusion. It’s a website built to share your shader with a broader audience. CineShader does this in a way that shows off more than just the art. It showcases the beauty and feel of the shader as though it’s artwork on a wall.

By creating a 3D scene, along with a dark shaded audience member, CineShader creates the tone and feel of being in a gallery, silently observing and enjoying a piece of work

Wow! What else can it do?
1.25.2020 art

Fifty-Two weeks of canvas creativity!

Canvas Cards is an amazing year-long project by Luke Patton which features weekly creations using HTML <canvas> elements. Each of the cards has a different set of inspirations, looks, aims, and goals. And wow are they beautiful!

The website itself also allows you to edit the code and re-run the preview in the browser, meaning you can get to play with each and every demo without cloning the repository.

The different combinations of colors and styles have really kept the project amazingly interesting as it progressed throughout the year.

For anyone who’s ever tried to do something every week for an entire year, you know how difficult it can be, which really gives the project that extra special shine.

How could I do something like this?
1.7.2020 glitch pwa

The best time to start tracking your year is now.

If you’re the kind of person who likes beautiful graphs as well as keeping tight track of your life, this project is one for you.

Year in Pixels is a clever Alejandro AR app with a minimalistic design that will allow you to track your mood throughout the year.

For those now looking back at 2019 and worrying about 2020, logging your daily mood is a fantastic way to start your year off right. It not only allows you to spot patterns in your life, but also helps you recognize earlier when you’re starting to wear down.

And if you’ve noticed in the url, the app is built on Glitch! That means you can remix it, changing the design, colors, or whatever you desire.

What Else?
1.5.2020 microcode pico8

Does this code make sense? No, not really. But wow is this demo nice!

When it comes to fitting amazing creations into the smallest amount of code possible, I don’t think there are any better than Mathieu ‘p01’ Henri… And his most recent sketch, Night Train, is no exception.

The scene, featuring a train rolling through a generative field dotted with grass and some windy trees, is really a mind blower… Especially considering the formula generating it consists of 242 characters, fitting inside the tweet!

For real though, what is that emoji doing in there?

But How?