Real vim users use vim cubed!

Has anyone ever stopped you on the street to show you their vim setup? Well, now you have the perfect reply with vim cubed.

Vim Cubed will bring your code editing into the 3rd dimension, literally in the form of a spinning cube. As the cube spins infinitely, your editor works with all the gusto and power that vim can provide.

As per the project’s QA, the most important information is all there.

How do i stop the cube from spinning
no

Any extra details?

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

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?

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.

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?

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?