Web code

In “Code: The Hidden Language of Computer Hardware and Software”, Charles Petzold eases into the topic discussing previous technologies and methods of communications, among which, the telegraph and Morse code. On the web, this introduction inspires an exploration of the technologies built in the platform and supported by modern web browsers.

Here SVG helps to give a visual representation to the dots and dashes, while CSS is able to frame the markup with an effective and bold display. Without using tables, but still managing to draw a border without overlaps.

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

defs symbol use grid subgrid has nth-child

JavaScript can be used to restructure the data so that it is not only possible to visualize which code corresponds to which letter, but also trace a sequence down to the appropriate key — just follow the SVG path.

data reduce map tree marker

And ever more JavaScript, emboldened by web APIs can attempt more than a static picture. An interactive widget to draw and oscillate enough to make the code almost talk.

Press to play sound

canvas context request animation audio context oscillator gain

All this without considering a single library, “only” what’s available whenever you ping a server and get an .html document back.