Show HN: Unix-like personal webpage | Hacker News Reader

Show HN: Unix-like personal webpage

theden.sh

134 pointstheden54 comments

Repo: https://github.com/TheDen/TheDen.sh (PRs are welcome)

All clientside—mostly js hacks. There are a lot of fun easter eggs—some easy to find, others not so much. I can't really claim it's mobile friendly, though I've tried to not make it too bad of an experience.

edit: the cards are draggable btw, I've added a "move" cursor when the mouse hovers but I don't know if that's enough to make it obvious (but not too "in-your-face" obvious).

Ah this is a really nice feature, really adds to the experience and feel that you are looking for. In your place I would add some simple bar on top, just a bunch of horizontal lines or whatever, so that the UI "affords" to be dragged.

you could add little window decoration / border / title bar which would better indicate that it's actually a draggable "window" of sorts? :)

Well done mate :)

It looks like Emacs rather than Unix.

Hover states are no longer viable for interaction affordance because they do not exist on mobile.

I still include, however I always try and make interaction immediately apparent.

This was very different than what I expected. I thought it would be closer to https://hq6.me

Wow, really cool page.

Yeah, very cool! Doing `cat picture.jpg` made me realize I kind of want this in my shell.

It works in eshell ;)

Thank you! I hand-coded this from scratch a couple of years ago.

My old webpage was trying to emulate my window manager: https://venam.nixers.net/old/

EDIT: I remember it was a trend amongst a close group of friends. Everyone was doing their webpage like their window manager. Too bad I can't find any of those.

This is a bit uncanny since I've been thinking quite a lot about these distortion effects and how to implement them with HTML5, js and css. Would you please enlighten us by giving us some hints on how to achieve the distortions?

Also I am not 100% sure if I think this is completely UNIX like as I expected something more text / terminal based. Are you using monospaced fonts. Not to try to put you down but rather to say you are in the right way but that there might be minute changes in padding and so forth that might land you at perfection!

good job!

Hey thanks for showing interest! Padding right now is difficult to settle on, but I'm still experimenting.

Here's some js code for the jitter effect http://theden.sh/scripts/jitter.js

It's pretty much a randomised flicker with some creative use of mix-blend-modes http://cssreference.io/property/mix-blend-mode/

Also yep, using monospace (whichever the user's browser defaults to), and https://fonts.google.com/specimen/Inconsolata

Oh thanks for the answer! I'll definitely take a look at these projects even though I am clinically diagnosed with severe NIH!

It is basically useless on my phone: page (and font) size changes periodically because of that animated ASCII thing at the bottom (and due to the fact that device is vertically oriented), and almost any attempt to zoom things through pinching results in moving two blocks around simultaneously instead.

> useless on my phone

How ironic, Unix came from Bell Labs and all, and now the Unix-like web page is useless on your phone.

By phone he means hand-held computer.

Edit: Or maybe more accurately pocket-size computer.

curl http://theden.sh/lady

Now that's what I'm talking about.

What is this supposed to look like? For me it was a lot of random colors.

It's a bash script. Execute it and it shows a dancing woman.

Edit: ok the bash thing is a red herring. It works if you just "cat lady".

well a shell command if you can excuse my nitpicking. Had it been a bash script he wouldn't only have made a really nice easter egg but also found a security hole in curl.

you are right, I started out with piping it into less, to see if you are right and damn it if you are not right. I thought he did something with delays in the output. How and why does this work?

ANSI escape sequences. Your terminal interprets them like move cursor to row x, column y. Set color green. Etc.

https://en.wikipedia.org/wiki/ANSI_escape_code

Interesting? but why does bash execute the code from standard output instead of simply displaying it to the user?

It's not bash. You can remove the shebang line and cat the file, and it still works. It's simply your terminal interpreting the ANSI codes and displaying the contents of the file.

Impressive!

wat it just started to run.

I thought it was supposed to be piped for bash to be executed.

Are all `curl` just exposed to bash injections?

No.

Scroll up. There's no tricks here.

So are you saying that bash is not actually executed but the characters are being printed on the screen and they looks as if the animation were still playing?

What I cannot understand from that explanation is how the animation time works. It should display the animation in chunks, with really fast frames, followed by pauses while it waits for data to be received.

Without downloading it (on my phone), I expect there are ANSI codes involved to move the cursor and control other aspects of the terminal:

https://en.wikipedia.org/wiki/ANSI_escape_code?wprov=sfla1

curl always goes to stdout if you don't redirect it. i'd guess the file is just padded so that the "animations" take longer.

Do somebody know how the images where created? I haven't found a tool that creates ascii art with that color quality.

or does anyone know of any other examples? i want to show this to my coworkers but this particular animation is a little lewd to be bringing into work.

I was hoping for something more like http://r.dakko.us/klange.7 [0]

[0]: https://news.ycombinator.com/item?id=8023258

Emacs-like :)

very cool! Can you explain how this relates to Unix at all?

It is very cool for using monospace fonts and green-on-black (not RGB green this has more "taste"). How does this relate to Unix programs?

Just a quick nitpick, I would like to see the links expand to their entire <p> parent elements, so the entire box is a clickable link, not just the text inside.

It's more BBS-like, not really Unix.

I want a Unix-like Facebook homepage.

Get a Chrome plugin such as "Stylebot" or "User Javascript and CSS" which lets you inject your own CSS automatically into any site.

Good idea. But that doesn't allow me to share my enthusiasm for Unix with my friends.

You could share the style, I suppose

I was talking about this last week. I called it the MySpace/stylesheet paradox. MySpace got it wrong, Facebook and Gmail got it right.

> In the days of MySpace, people would tweak their personal profile so it was presented to every visitor using the colors, sounds, typeface, text size, and other styles that the profile owner found most pleasing. This gets it exactly backwards: out of everybody's opinions about what a user's profile needs, it's the profile owner's opinion which matters the least. After all, the profile owner doesn't spend his or her time reading his or her own profile—the profile is for other people, and we can see this by looking at what the profile owner does do, which is to spend his or her time reading everybody else's profiles.

Yet every personal and corporate website basically works that way :)

Technically, the idea behind HTML was that the HTML simply described a document which the browser then decided on how to render/style it.

> it's the profile owner's opinion which matters the least

I kind of disagree that this is the reason. Conceptually it would be great if the owner could express what they want to.

I think the bigger reason was a combination of UI inconsistency as well as the simple fact that 99.9% people can't design a webpage that looks good. Their font, color, and style choices just plain suck, and make the entire website look bad. This model did not bring out the best in the non-designer crowd.

It's like giving a piano to a non-pianist and asking them to perform. What do you expect?

If GP ends up implementing this I'd love to see the results!

And there I thought this would be an Apache user directory tutorial.

Sad poem :(

I expected something more lighthearted after "solving" that puzzle.

very cool

Reply on news.ycombinator.com