Why URL hashes are my favorite way to fire events

rayne cloudy — Fri, 16 Aug 2024 08:40:18 +0000

As a young web developer, I often wondered what the best way to fire events was (for example, to make a link display new content on the page, without reloading). I considered using HTML elements as event handlers, by changing a property when firing an event—but this just seemed too in the way. I needed something out of the way of my HTML.

I then looked at my URL bar, sitting there lonely and unused, and an idea came to me. I would simply add two URL parameters, one named event and one named data! It was perfect!

Or so I thought. Adding URL parameters reloads the page, so this wouldn't work either. But I still thought the URL was the best way to go, and reminded myself of hashes.

For those who don't know, adding hashes to a URL does not reload the page.

I have used this technique ever since then, and it is undoubtedly my favorite. I don't believe this is a usual technique. All I know is that it suits my needs.

window.addEventListener("hashchange", function(hash) {
  if (hash === "#profile-19289948") {
    ...
  }
});

Now I'm curious—do other people do something similar? Do other people even know what I'm talking about?

ascii-based graphics: the only image file format for the terminal

rayne cloudy — Tue, 28 May 2024 07:20:17 +0000

hello, devs!

i'm excited to show you all this tiny project i made in my free time!! it's nothing much, but it's the first project i've ever shared with the public. say hello to ascii-based-graphics!

this is a new file format that can be easily edited with a text editor (an ability that you don't have with pngs, jpegs, and most other image formats). it also has a text output using ansi escape codes to color the image, which brings images to the terminal!!

example of abg in action

take a look at the image at the top of this post. that was made using abg. here is what it looks like in a text editor:

1.0.1
abg banner
xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 xx xx xx xx xx xx xx p4 xx xx xx xx v4 v4 v4 xx xx xx p4 xx xx v4 v4 xx
xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 v2 xx xx xx xx xx p4 xx xx xx xx xx xx v4 xx xx xx p4 xx xx xx v4
xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 xx xx xx xx p4 xx xx xx xx xx xx v4 xx xx p4 xx xx xx xx
xx xx y4 xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx xx p4 p4 p4 xx xx xx xx v4 xx xx p4 p4 xx xx
xx y4 y4 y4 xx xx xx xx xx xx xx xx xx y4 y4 y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx xx xx xx p4 xx xx xx v4 xx xx xx xx p4 p4
xx xx y4 xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx xx xx xx p4 xx xx xx v4 xx xx xx xx xx
v2 xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx v2 v2 v2 v2 xx xx xx p4 xx xx xx v4 v4 xx xx xx
xx v2 v2 v2 v2 v2 y4 xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx w2 xx xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx p4 xx xx xx xx xx v4 v4 v4
xx xx xx xx xx xx v2 y4 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx w2 w4 w2 xx xx xx xx xx xx xx xx xx xx xx xx v2 xx xx xx p4 xx xx xx xx xx xx xx
xx xx xx xx xx xx y4 xx y4 xx xx xx xx xx xx xx xx xx xx w2 w2 w2 xx w2 w4 w2 w2 xx w2 w2 w2 xx xx xx xx xx xx xx xx v2 xx xx xx p4 p4 xx xx xx xx xx
p4 p4 p4 p4 p4 xx xx xx xx v2 xx xx xx xx xx xx xx xx w2 w4 w4 w4 w2 w2 w4 w4 w4 w2 w4 w4 w4 w2 xx xx xx xx xx xx xx xx v2 xx xx xx xx p4 p4 p4 p4 p4
xx xx xx xx xx p4 p4 xx xx xx v2 xx xx xx xx xx xx xx w2 w4 w2 w4 w2 w2 w4 w2 w4 w2 w4 w2 w4 w2 xx xx xx xx xx xx xx xx xx v2 xx xx xx xx xx xx xx xx
xx xx xx xx xx xx xx p4 xx xx xx v2 xx xx xx xx xx xx w2 w4 w4 w4 w4 w2 w4 w4 w4 w2 w4 w4 w4 w2 xx xx xx xx xx xx xx xx xx xx v2 v2 xx xx xx xx xx xx
v4 v4 v4 xx xx xx xx xx p4 xx xx v2 xx xx xx xx xx xx xx w2 w2 w2 w2 xx w2 w2 w2 xx w2 w2 w4 w2 xx xx xx xx y4 xx xx xx xx xx xx xx v2 v2 v2 v2 v2 xx
xx xx xx v4 v4 xx xx xx p4 xx xx xx v2 v2 v2 v2 xx xx xx xx y4 xx y4 xx y4 xx y4 w2 w4 w4 w4 w2 xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx v2
xx xx xx xx xx v4 xx xx xx p4 xx xx xx xx xx xx v2 xx xx y4 xx y4 xx y4 xx y4 xx y4 w2 y4 w2 xx xx xx xx y4 y4 y4 xx xx xx xx xx xx xx xx xx xx xx xx
p4 p4 xx xx xx xx v4 xx xx xx p4 xx xx xx xx xx xx v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx xx xx xx xx xx xx xx
xx xx p4 p4 xx xx v4 xx xx xx xx p4 p4 p4 xx xx xx xx v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx y4 xx y4 xx xx xx xx xx
xx xx xx xx p4 xx xx v4 xx xx xx xx xx xx p4 p4 xx xx xx v2 v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx xx xx xx xx xx
v4 xx xx xx p4 xx xx xx v4 xx xx xx xx xx xx xx p4 xx xx xx xx v2 v2 v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx y4 xx y4 xx xx xx xx xx
xx v4 v4 xx xx p4 xx xx xx v4 v4 v4 xx xx xx xx xx p4 xx xx xx xx xx xx v2 v2 xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx xx

if you don't know how to read it, this may look like chaos. however, this makes a lot more sense than you may first realize.

dissecting an abg file

the first line is the version of abg this file uses. this is because abg is subject to change in the future. the second line serves no purpose to the interpreter, so it could be a description of the image. every line after this is the actual image. the first letter of every pixel is the color. in version 1.0.0:

r = red
y = yellow
g = green
b = blue
v = cyan
p = purple
w = white
x = transparent

the second character is the brightness.

1 = black
2 = very dark
3 = little darker
4 = bright
x = transparent

limitations

abg only allows for 20 possible colors (a mere 7% of the atari's 256), but this number will never increase. this is because of the number of ansi escape codes that exist. yes, it's sad, but there's nothing i can do :'(

future updates

in the future, i plan on branching away from just pixels, and into more commonly used characters used to make art (such as /, ,, |, etc.)

thanks!

thanks for reading my article! i don't know if anybody'll use this, ever, but it was fun to make!! :) have a great rest of your day, devs!!

repository

breakfast-for-dinner / abg

ascii-based graphics format for showing images in the terminal

abg

this stands for ascii-based graphics format. this is an ideal file format for terminal-based graphics.

example

here's abg in action:

a person waving hello
xx xx xx xx xx xx xx xx
xx xx y4 y4 y4 xx xx xx
xx y4 w4 w4 w4 y4 xx xx
y2 w4 w4 w4 w4 w4 y4 xx
y2 w4 w1 w4 w1 w4 y4 xx
y2 w4 w4 w4 w4 w4 y4 xx
y2 w1 w4 w4 w4 w1 y4 xx
y2 y2 w1 w1 w1 y4 y4 xx
y2 y2 y2 w1 y4 y4 xx w1
xx y2 w1 w1 w1 y4 w1 xx
xx w1 y2 w1 y2 w1 xx xx
xx w1 xx w1 xx xx xx xx
xx w1 xx w1 xx xx xx xx
xx xx xx w1 xx xx xx xx
xx xx w1 xx w1 xx xx xx
xx

…

View on GitHub

DEV Community: rayne cloudy