D'yer remember the eighties? The eighties, eh? Remember 'em? With the Acorn Archimedes an' that? What were we like? Remember them mags what y'got? The computer mags? Wirral the source code? Remember typin' it all in be hand? If yer semicolon were outta place y'd gerra syntax error! And you try telling that to the young people of today, will they believe yer?

For those of you born this century, it might be hard to believe but - yes - the way we distributed source code back in the day was on paper. Computer magazines would be full of news, reviews, letters (like the comments section of a website), classified ads (like eBay), and code listings - like this:

YORE COMPU​TER 🕹

@yorecomputer

1986:

Your Sinclair Magazine Issue 09, page 50

archive.org/stream/your-si… pic.x.com/b3jgdn12kk

---

That's how I learned to code. Laboriously type in a few hundred lines of dense code, check it furiously for mistakes, get frustrated at a syntax error on line 115, scream "eureka!" when I got it running, and then investigated its inner workings.

A few months ago, Internet funster Matt Round announced that he was bringing back type-in mags. But, this time, for the web!

Would that work? In an era of vibe-coding, templates, and batteries-included frameworks, who on Earth would buy a magazine like this?

Well - you, I hope. Because it is now on sale and features a project written by me!

For a very reasonable £7.99, you get ten different games, projects, and demos to type in. That's a mere 79p per website! Cheaper than a C64 cassette I reckon.

The artwork by HappyToast is lush, the layout is gorgeous, and the programs are fun. Some of them you'll understand straight away, others you won't quite get until the very last character.

Could you cheat by scanning it, running OCR over the code, and then running it? Sure. But you can also hire someone to kiss your partner if you can't be bothered to put the effort in. Where's the fun in that?

Here's a sneak preview of mine:

I'd love your feedback on my project and I'd be delighted if you turned it into something awesome.

Copy-typing code - especially Max Goodhart's incredible "Quine" project - is a meditative and unusual experience. I propped up the magazine on my laptop and was delighted that I only made five typos the first time through.

Is this really how we lived? Yes! Is this something we should go back to? Well, that's a harder question to answer.

I hope you enjoy playing with what I and others have created. I bet you'll learn something new. Please remix mine and show it to your friends. If you haven't got a friend, one of the projects is a primitive Markov chain - so you can build your own digital pal.

You can buy DOCTYPE magazine now. It will make the perfect Christmas gift for all the nerds in your life.

Way back in 2011, jQuery mobile introduced the web to page-change animations. Clicking on a link would make your high-tech Nokia display a cool page-flip as you navigated from one page of a website to another. Just like an app!!!!

A decade-and-a-half later, and CSS has caught up (mostly). No more JavaScript, just spec-compliant CSS. Well, as long as you're using Chrome or Safari. Here's a quick quick MVP which will add some fancy animations as people browse your website.

Every page which wants animations has to "opt in". That means you need this:

@view-transition {
    navigation: auto;
}

Next, you'll probably want to define some animations. Here are two I use:

@keyframes slide-in {
    from {
        translate: 100vw 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

Any standard CSS animation will work. Get creative!

Which elements do you want to animate? I'm just going to do the whole page.

html {
    view-transition-name: page;
}

If you have a fancy app-like site, you might only want to animate specific parts of it.

While the page is transitioning, you can have something in the background to prevent things looking odd.

::view-transition {
    background: black;
}

That's optional, but rather useful.

Next, we have to assign the animations to specific events. Here, I have the old page fade out and the new page slide in.

::view-transition-old(page) {
    animation-name: fade-out;
    animation-duration: 1s;
}

::view-transition-new(page) {
    animation-name: slide-in;
    animation-duration: 1s;
}

You can set the duration to whatever makes sense for your page and animation style.

Finally, and this is important, some people find animations painful or discombobulating. Make sure the animations are turned off for those who don't like them.

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(page) {
        animation-duration: 0s;
    }
}

And that's it! A couple of dozen lines of CSS and you've got started with view transitions.

For more information, you can see the Chrome Devs' demo page, or take a read of the MDN documentation. There's also a full spec document if you like that sort of thing.

Right, I'm off to create some delightful animations!

Of course, necking a few shots every time you update your website isn't great for your health - so is there another way?

Click the "🥴 Drunk" button at the top of the page and see what happens!

These are a relatively simple set of CSS rules which you can apply to any site in order to simulate inebriation.

(I may have changed these since writing the post. Check the source for the latest version.)

First, monkey around with the fonts. This sets all the lower-case vowels to be rendered in a different font - as discussed in "targetting specific characters with CSS rules":

/* Drunk */
@font-face {
    font-family: "Drunk";
    src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/CommitMonoV143-Edent.woff2") format("woff2");
    /* Lower-Case Vowels */
    unicode-range: U+61, U+65, U+69, U+6F, U+75 ;
    size-adjust: 105%;
}

The rest of the characters will be rendered in the system's default Cursive font. Characters will also be slanted. The first character of every paragraph will be shrunk:

:root:has(input#drunk:checked) * {
    font-family: "Drunk", cursive;
    font-style: oblique -12deg;
    text-align: end;
}
:root:has(input#drunk:checked) p::first-letter {
    font-size: .5em;
}

Next, use the child selectors to rotate and skew various elements. While we wait for CSS randomness to come to all browsers this is a simple way to select various elements:

:root:has(input#drunk:checked) *:nth-child(3n) {
    transform: rotate(2deg);
}
:root:has(input#drunk:checked) *:nth-child(5n) {
    transform: skew(5deg, 5deg);
}
:root:has(input#drunk:checked) *:nth-child(7n) {
    transform: rotate(-3deg);
}

Make the entire page blurred and saturate the colours:

:root:has(input#drunk:checked) body {
    filter: blur(1px) saturate(2.5);
}

Make any hyperlink harder to click by having it gently bounce up and down:

:root:has(input#drunk:checked) a  {
    animation-name: bounce;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes bounce {
    0%   { margin-top:  0px; }
    25%  { margin-top:-10px; }
    50%  { margin-top:  0px; }
    75%  { margin-top: 10px; }
    100% { margin-top:  0px; }
}

Does this really simulate drunkenness? No. It is a pale simulacrum. What it is, however, is deliberately inaccessible to the majority of people.

How does it make you feel using the site in Drunk-Mode? Does it frustrate you? Do your eyes hurt due to the garish colour scheme? Do you keep missing the thing that you try and click on? Are the words so hard to read that it takes you extra time to do anything useful? Will you recommend this experience to your friends and family?

I've written before about cosplaying as being disabled. Strapping on a pair of Glaucoma Goggles will give you an idea of what a visual impairment is like. But it won't give you the experience of living that way for months or years.

You should test your stuff with people who have cognitive impairments or physical disabilities. Find out how usable your site is for someone lacking fine motor control or for those with learning disabilities. Pay disable people to take part in usability studies. Integrate their feedback.

Faffing around with CSS will only get you so far.

You click the relevant icon and get taken to the site with the sharing details pre-filled.

The problem is, every different site has a different intent for sharing links and text. For example:

• https://www.facebook.com/sharer.php?u=…&t=…
• https://www.linkedin.com/sharing/share-offsite/?url=…
• https://bsky.app/intent/compose?text=…
• https://www.threads.net/intent/post?url=…&text=…
• https://www.reddit.com/submit?url=…&title=…

As you can see, some only allow a URL, some text and a URL, and some just a plain text which could contain the URl. A bit of a mess! It's probably impossible to get every site to agree on a standard for their sharing intent. But there could be a standard for exposing their existing sharing mechanism.

That's the proposal from Ben Werdmuller with "Share Openly".

ShareOpenly knows about most major social networks, as well as decentralized platforms like Mastodon, Bluesky, and Known.

However, if ShareOpenly is having trouble sharing to your platform, and if your platform supports a share intent, you can add the following metatag to your page headers:

<link rel="share-url" href="https://your-site/share/intent?text={text}">

Where https://your-site/share/intent?text= is the URL of your share intent.

The special keyword {text} will be replaced with the URL and share text.

I think that's a pretty nifty solution.

For sites which take a URl and an (optional) title, the meta element looks like:

<link rel="share-url" href="https://www.facebook.com/sharer.php?u={url}&t={text}">
<link rel="share-url" href="https://lemmy.world/create_post?url={url}&title={text}">

For those which only take URl, it looks like:

<link rel="share-url" href="https://www.linkedin.com/sharing/share-offsite/?url={url}">

It's slightly trickier for sites like Mastodon and BlueSky which only have a text sharing field and no separate URl. The current proposal is just to use the text. For example

<link rel="share-url" href="https://bsky.app/intent/compose?text={text}">

But it could be something like

<link rel="share-url" href="https://mastodon.social/share?text={text}%0A{url}">

What Next?

The HTML specification has this to say about adding new link types:

Extensions to the predefined set of link types may be registered on the microformats page for existing rel values.

Adding to that page merely requires a formal specification to be written up. After that, some light lobbying might be needed to get social networks to adopt it.

So, I have three questions for you:

1. Do you think <link rel="share-url" is a good idea for a new standard?
2. What changes, if any, would you make to the above proposal?
3. Would you be interested in using it - either as a sharer or sharing destination?

Please leave a comment in the box - and remember to hit those sharing buttons!

While browsing Mastodon late one night, I came across this excellent blog post called HTML is all you need to make a website. It describes a few websites which are pure HTML. No CSS and no JS.

And I thought… do you even need HTML to make a website?

A few hours later, I launched the NO-HT.ML website. Proving, once and for all, that you don't need HTML to make a beautiful⁰ responsive¹, and useful² website which everyone will love³.

Go take a look and marvel at its magnificence - then come back here to discuss its profound importance.

How it works

If you look at the source code, you'll see it uses a tiny scrap of (mostly) invalid markup to kick things off.

<!doctype UNICODE> is a fake doctype. But it seems to be needed to convince some browsers into attempting to render the document.

<meta charset="UTF-8"> is real. Without this, text encoding sniffing takes places and some browsers just displayed rubbish.

<plaintext> is also a real HTML element. It was deprecated in HTML 2 back in the mid-1990s. What's particularly interesting is that the element cannot be closed. If you manage to find a website which lets you post HTML, that can be particularly fun!

From there, the page starts with some ASCII art. There are loads of text generators around. I remember when it used to take hours to hand-draw things like that.

Next is a bunch of Unicode abuse. There are loads of "letter-like" shapes. They're included for compatibility with rendering mathematical and scientific documents. There are also lots of punctuation marks - like bullets.

ASCII tables and flowcharts are pretty commonplace, although they sometimes go a bit wonky with non-fixed width characters.

And then, finally, the Arecibo message using the Geometric Shapes Extended Block.

Is this useful?

I've been reading "Reality is Broken" a book all about game design. In it, I found this quote:

Playing a game is the voluntary attempt to overcome unnecessary obstacles⁴.

It can be fun to give yourself arbitrary restrictions. In programming, there's a game called Code Golf - where players compete to solve a coding challenge in the fewest number of characters.

That's what's going on here. People are playing a game - the rules of which are "Do normal thing X without using normal thing Y".

I encourage all of you to play games. Go use your imagination to build something in a ridiculously restricted way. What do the constraints do to the way you express yourself? What sense of satisfaction do you get from successfully creating something in an impossible manner? What will you learn from experimentation?

But, above all, have fun and show off your beautiful messes.