Show HN: Unix-like personal webpage(theden.sh)
theden.sh
Show HN: Unix-like personal webpage
http://theden.sh/
55 comments
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.
I still include, however I always try and make interaction immediately apparent.
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 :)
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.
This was very different than what I expected. I thought it would be closer to https://hq6.me
Wow, really cool page.
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.
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!
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
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.
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".
Edit: ok the bash thing is a red herring. It works if you just "cat lady".
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
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.
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.
[deleted]
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.
Now that's what I'm talking about.
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?
I thought it was supposed to be piped for bash to be executed.
Are all `curl` just exposed to bash injections?
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.
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
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.
No.
Impressive!
I was hoping for something more like http://r.dakko.us/klange.7 [0]
[0]: https://news.ycombinator.com/item?id=8023258
[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?
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.
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.
> 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.
> 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?
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?
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.
You could share the style, I suppose
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.
very cool
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).