code on The Indie Web

A tower defense game, utilizing the power of CSS flexbox.

Mon, 31 Aug 2020 09:00:00 +0000

Whether you’re the master of flexbox or someone who’s looking to learn, flexbox defense by Channing Allen is the game for you. Although it’s been around for a while (5 years!) its lessons are as relevant as ever.

Typography in 3d, reminiscent of the glorious days of WordArt.

Wed, 26 Aug 2020 13:00:00 +0000

That’s right, nows the time to move your text off the boring x and y axis, and leap into the 3d world of z(text).

Creative developer Bennett Feely has created a hyper nifty library that will add that extra level of spice to your home page, landing page, titles … well, just about everywhere if I’m honest.

Get Nostalgic with the Oregon Trail running in this Mac OS8 simulation

Tue, 07 Jul 2020 13:00:00 +0000

That’s right, we’ve officially gone too far, developer Felix Rieseberg has ported Mac OS8 (with some help) into an Electron App that you can download and run on your Mac, or PC.

A handy script to reverse your codes indentation, for a harder life

Fri, 03 Jul 2020 13:00:00 +0000

Have you been coding in easy mode? Well, now its time to flip into the upside-down, where your indents are backward and nothing makes sense.

Interested in DataViz? Shirley Wu's new series is a great place to start

Mon, 15 Jun 2020 10:00:00 +0000

If you’ve got an interest in data visualization on the web, it’s hard to look past Shirley Wu’s fantastic work. Now you can follow along via video as she goes through her entire workflow from beginning to end.

GitHub has added profiles, here are the most creative ones so far!

Sat, 13 Jun 2020 13:00:00 +0000

GitHub has released a new feature allowing people to display a readme markdown file on their profile, while it seems like a small feature at first, people are turning this simple readme into some incredibly creative and funny profiles!

A scary fright in your developer console!

Mon, 25 May 2020 11:00:00 +0000

I know its there to catch the bugs, but nope, nope nope.

The self-proclaimed buggiest site on the web really takes the cake with this scary console-based beast (use CMD + OPT + I on Mac, or CTRL + SHIFT + I on Windows to open the console!)

There ain't no party like a domino party.

Sat, 16 May 2020 12:00:00 +0000

If only you could reset real-life dominoes with the click of a button

This is probably the most fun you can have with dominoes without leaving your browser.

Experience your coding journey in 3d with with repo surf.

Sat, 16 May 2020 11:00:00 +0000

Ever wondered what your branches, merges & commits would look like in the third dimension, well now you can find out.

Real vim users use vim cubed!

Tue, 31 Mar 2020 11:00:00 +0000

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.

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

Wed, 26 Feb 2020 09:00:00 +0000

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:

Beep beep bloop bloop - Listen to your webpage load /w this nifty script by @hicksyfern - https://t.co/2AcR7DTJBr pic.twitter.com/V9DkagWmts
— The Indie Web (@the_indie_web) February 27, 2020

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!

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

Tue, 18 Feb 2020 09:00:00 +0000

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.

Run your tweet on a virtual 8-bit computer.

Fri, 14 Feb 2020 09:00:00 +0000

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.

Deploy your BASIC code to our 6502 data center in just one tweet. Welcome to 8-bit cloud 😜 pic.twitter.com/ZmB1WIUx4C
— BBC Micro 🦉 bot (@bbcmicrobot) February 11, 2020

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!

pic.twitter.com/g3ig6hzZbt
— BBC Micro 🦉 bot (@bbcmicrobot) February 10, 2020

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!

pic.twitter.com/XfUQR9U9sg
— BBC Micro 🦉 bot (@bbcmicrobot) February 13, 2020

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

pic.twitter.com/qDwNMjyyYV
— BBC Micro 🦉 bot (@bbcmicrobot) February 11, 2020

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

A super way to show off your stunning shaders.

Tue, 28 Jan 2020 09:00:00 +0000

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.

Today, we are launching CineShader - A cinematic shader visualiser! It is a little side project we created for the shader community using the @Shadertoy API. Retweet is appreciated.😉

👉https://t.co/1lCYNSnZVT #webgl #threejs #shadertoy #cineshader #realtime #webdesign pic.twitter.com/BjaSwi6qZO
— Lusion (@lusionltd) January 28, 2020

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

Fifty-Two weeks of canvas creativity!

Sat, 25 Jan 2020 09:00:00 +0000

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!

This week's card, another Hilma af Klint inspired piece. Grab the code and check out the full gallery here: https://t.co/upLwkNcfQl #generative #creativecoding pic.twitter.com/pSgEnidwrO
— Luke Patton (@friendofpixels) April 12, 2019

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.

This week's card! Simple math, interesting results. Check out the source code and full gallery here: https://t.co/upLwkNcfQl #generativeart #creativecoding pic.twitter.com/AwoXFMyFeo
— Luke Patton (@friendofpixels) November 29, 2019

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.

The best time to start tracking your year is now.

Tue, 07 Jan 2020 12:00:00 +0000

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.

I made a small tool using @glitch so you can keep track of your mood using pixels https://t.co/Es9RHuhoTy
— Alejandro AR (@kinduff) January 21, 2018

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.

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

Sun, 05 Jan 2020 12:00:00 +0000

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.

NIGHT TRAIN
A quick #pico8 #tweetjam

x=0::_::cls(13)srand()for i=0,44 do
z=64+3*sin(i/45)y=z+cos(i/2)*(9+z*z%61)x-=3
?"ˇ",x,rnd(128),6
u=x+2*sin(x/31)
for j=-9,rnd(4)+7 do line(u,y-9,x+j,y+4+i%9,1+flr(y%2)*5)end
?"=",x,z,1
if(sin(x/84)>.8)print("😐",x,z-2)
x%=134end
flip()goto _ pic.twitter.com/ZQboc8Iet6
— Mathieu 'p01' Henri (@p01) December 22, 2019

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?

Elevation Lines

Sat, 30 Jun 2018 00:00:00 +0000

Elevations of the world. Elevation Lines - by Damon Burgett