111 comments

[ 3.3 ms ] story [ 195 ms ] thread
very very cool!
Good to see I was down voted for this comment! Get a life!
oh Turbo Vision, how I miss you!
Yes, very fond memories of using Turbo Vision in the late 90's came flooding back to me as soon as I loaded the page!
(comment deleted)
(comment deleted)
This is by far the best bootstrap theme I have seen!
It might be more accurate to call this a simulation of vga text mode -- more early 90s than 1980s. Still, very cool.
Indeed, it looks deliciously like Ceefax: https://en.wikipedia.org/wiki/Ceefax

I might get up at 5am and stare at it while listening to some easy-listening music.

I remember being in Germany a few years ago, and my friends' parents still used this (something equivalent in Germany) on their TV. It was effective.
This is called Teletext[1] (or in german: Videotext). It still widely used i guess. Even me sometimes used it to get informations about the sheduled TV-Program if not cellphone/tablet is in reach ;)

[1] http://en.wikipedia.org/wiki/Teletext

If you're watching this World Cup in Germany, you'll get regular notices on where to find further information (e.g. see Page 200 for current lineup)
Nope, that would be the rather unique text mode of the BBC Micro, which allowed you to do things like double-height letters. AFAIK, only Ceefax and the BBC Micro supported that.

This is definitely based on the standard EGA/VGA text mode (originally 80x25 characters) used by DOS. Mode 0x10 IIRC.

This is also using the standard codepage 437, which includes the characters for single and double borders. You could also rewrite the symbol table to make custom characters, which is what Norton Utilities and others did.

Mode 7 FTW along with all the artists who worked with its limited graphics support. The Mullard SAA5050 will have a special place in my heart forever.
(comment deleted)
What makes this VGA rather than CGA text mode?

(VGA is from 1987, by the way. :) )

I think it's actually EGA, but it's definitely not CGA. CGA only supports 4 colours and you can tell immediately from the dark blue that it's not CGA, because that's not one of the 4. There are also at least 5 colours shown, all of which happen to be from the standard EGA palette.

VGA generally used the same text modes as EGA and very few people actually had an EGA, so referring to it as a VGA mode is an understandable mistake.

There were actually some VGA-specific text modes (80x30 mode for example) as well as SVGA modes, but they weren't really used much because the EGA modes were good enough, more widely compatible, and IIRC the 80x30 mode was noticeably slower.

Also IIRC, 80x30 mode used a slightly different font than this one, which is why I think it's the usual 80x25 EGA rather than one of the other modes.

> CGA only supports 4 colours

In graphics modes.

In text mode it supported 16 IIRC: black, white, two greys and two shades of 6 colours.

You're right. I just looked it up, it seems I misremembered the CGA/EGA palette specs.

I'm pretty sure this is based on the standard EGA/VGA font, which is 8x14 pixels, whereas CGA only supported 8x8. Characters like A, N and M look noticeably more pixellated around the diagonals in CGA mode.

This is very much the one everyone would recognise from the VGA era, although it's actually an EGA mode.

Now we are into serious nit-picking land, but anyway:

The font used by this site is the "Fixedsys" system font from Windows, not any CGA/EGA/VGA text mode font.

I had MCGA in 1987 on an IBM PS2 and it could do that.
Whenever you see more than 4 colors on the screen simultaneously it kind of removes the CGA feel although there were hacks around it.
That's just in graphics mode though, in text mode CGA had 16 colors I believe.
Needs keyboard arrow navigation :)
That was my instinct, too. You would almost need to paginate any page that would normally need scrolling, just so the arrows could work.
I agree. It was the first thing I tried to do.
TAB and RETURN work.
I was more thinking they need to highlight the first character and allow Alt- shortcuts to work...
It looks old, it looks comical, but I KNOW WHAT TO DO!

Less pixels, and less colours, means greater usability! This is the greatest application of Bootstrap I have ever seen. It is a shame that more websites don't look like this (in all seriousness).

You had me up until the parenthetical.
This is undeniably neat but I am curious if you "know what to do" because you have a lot of experience using applications that looked this way largely by necessity. I don't think the average computer user would favor this type of aesthetic on any level.

When I was growing up with computers, interfaces like this were on their way out. So to me it just looks clunky and messy. Other than inspiring nostalgia and impressing me with the amount of work that surely went into creating it, I don't think this theme has much real world application.

These themes that attempt to replicate the look and feel of a GUI are pretty gimmicky in nature (ever been to a terrible blog that tries to look like the OS X GUI or worse... one of the Windows GUIs?). This one just happens to be really high quality.

I am curious if you "know what to do" because you have a lot of experience using applications that looked this way largely by necessity.

Of course. In the "nature vs. nurture" argument, there is no room for computers. It is all nurture here. Moreover, current interfaces derive from the design choices illustrated here.

My only complaint is that it's not degradable.

Given the increasing complexity of the web plus nostalgia, I'm seriously surprised that there's no actual distributed BBS/Minitel/BTX thing going on.

With API-driven backends (webapps, esp. SPA's, mobile apps), it would probably be easy enough to shoe-horn in some glorious ANSI interface...

Apparently they're still popular in Taiwan.

http://en.wikipedia.org/wiki/PTT_Bulletin_Board_System

Thats pretty impressive! I mean its a BBS with more than 1.5 million registered users, for gods sake. Also there is some creative ASCII art in there, go check it out.
Telnet BBSes are still a thing, believe it or not. The first one I can think of off the top of my head is the home of a BBS software package.

Try telnetting to vert.synchro.net

Icons need more work! My next theme, for sure.
Where is the turbo button?
LOL, the turbo button when the front of the PC displayed the number of MHz the computer was operating at, and you could slow it down so you could play old games. Good times.
As a kid I was fascinated by the fact that turbo button was actually a brake button but there was a perverse incentive to call it turbo because of the psychological effect.
Interesting bit of trivia: the MHz LED display on the front of most PC cases was typically configured by jumpers and wired directly to the turbo button; it did not read the actual speed from the motherboard. So if you wanted, you could make it say "HI" for high speed and "LO" for low speed.
Yep, I remember spending an afternoon reverse-engineering the jumper configuration to change the numbers to match the CPU I had just upgraded. I may still have the diagram I drew somewhere. And I thought I didn't have enough free time back then.
I love this so much. Everything about the text mode of PCs (that is, what we used to call "IBM compatibles") is burnt into my brain at the deepest levels. Seeing this is like a jolt of electricity.

If you ask me to picture "what does a byte look like?", I am not going to think of binary or hex, I am going to instantly imagine the "extended ASCII" of code page 437.

This is awesome!! Should use this as resume template!
This is by far the coolest thing I've seen in months. Kudos!

Now, excuse me while I find my Def Leppard cassette tape and turn up my collar.

Looks pretty awesome. I'm a little disappointed that the cursor wasn't turned into a block though.
This put such a huge smile on my face.

I was having a shit day, but now it's awesome. Thank you!

P.S. I will go build like 9 websites using this immediately.

Anyone have any advice for rendering images in a time/technology-appropriate fashion?
Lots of dithering, a 16 or 256 color palette, or just straight up convert to ASCII art.
An animated giv scanning through each line of the image one at a time?
If you're building a Macintosh System 6 or 7 style page, use this site[1] to create 1-bit Atkinson[2] dithered images which will fit perfectly.

[1] http://gazs.github.io/canvas-atkinson-dither [2] http://en.wikipedia.org/wiki/Bill_Atkinson

If you actually used a Mac back in the late 80's / early 90's, this site's output will give you a heady shot of pure, undiluted nostalgia. I wasted half an afternoon once, converting images for my imaginary Hypercard project.

Photoshop will also give you options and allow you to reduce colors down to an 8 bit or 4 bit palette, with a variety of dithering choices, or for the true lofi look (It's 1991 and I used the school's lab scanner for the first time!), no dithering at all.

If you happen to be writing your simulated vintage mac site on a modern mac, vImage (part of the Accelerate framework) supports Atkinson dithering from OS X 10.9 onward via vImageConvert_Planar8to[Planar|Indexed][124].

Not overly useful for one image, but if you have lots of them, it's nice to have a programmatic solution.

For instance, Atkinson dithering on video. Like Vine, but 8bit.
For that, you'll want the new vImage CV pixel buffer functions in iOS 8 and Yosemite =)
The only thing I was able to figure out cross-browser, and it's already in there, was this:

https://github.com/kristopolous/BOOTSTRA.386/blob/master/les...

    img {
     display: none;
     -webkit-filter: contrast(800%);
     -moz-filter: contrast(1000%);
     filter: contrast(1000%);
     -o-filter: contrast(800%);
     -ms-filter: contrast(800%);
    }
(In fact, I don't know what that display:none is doing there now ... I'll have to look into it)

There may be some brilliant visual hack to get images to look more faithful ... but this was the best I could figure out.

Hit me up with the links and I'll put you in the gallery on the first page of the pitch. I still need 3 more screen-shots to swap out.
It's even better in full-screen mode.

Press F11 to experience the 80's.

Awesome! Will be more 386-like if I can use the arrow keys to control the navigator ;)
This is incredibly well done.

My one criticism is the hamburger being used at 978 and below. The hamburger is a 21st century artifact. Using [MENU] feels more old-school to me.

(yes Xerox did it in 1981, but I expect most of us were rocking a Apple II, 386, or C64 at that time...)

This is awesome, I'll be using this to revamp my personal site.
Textmode was fast... !

This is my only thing, make the flicker faster .. and the update should be almost instant.

[EDIT]

While I'm here.. make the scrolling only scroll by character boundries, for a more authentic feel - the header shouldn't overlap by say half a character, since textmode was cell based.

This is a work of art.

All the details are just right, from the color palette to the menu separators and edges drawn with fake ASCII 'drawing' characters to the little blip that refreshes the screen line by line. Even the name is perfect: "BOOTSTRA.386" -- eight characters plus three for the extension, all in uppercase.

THANK YOU.

Yep, gotta love 8.3 file-naming
This is so rad. I mean, like, totally awesome!
This is really clever! But text mode interfaces weren't _that_ slow.