8 ms·
Show HN: Unix-like personal webpage
- rijoja 9y agoThis 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!
- theden 9y agoHey 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 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/ 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 https://fonts.google.com/specimen/Inconsolata
- rijoja 9y agoOh thanks for the answer! I'll definitely take a look at these projects even though I am clinically diagnosed with severe NIH!
- shellbackground 9y agocurl http://theden.sh/lady http://theden.sh/lady
- drannex 9y agoNow that's what I'm talking about.
- tekknolagi 9y agoWhat is this supposed to look like? For me it was a lot of random colors.
- sp332 9y agoIt'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".
- rijoja 9y agowell 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 9y ago[deleted]
- rijoja 9y agoyou 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?
- idsout 9y agoANSI 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
- rijoja 9y agoInteresting? but why does bash execute the code from standard output instead of simply displaying it to the user?
- rijoja 9y agoImpressive!
- _lce0 9y agowat 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?
- jwilk 9y agoNo.
- chungy 9y agoScroll up. There's no tricks here.
- _lce0 9y agoSo 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.
- tdeck 9y agoWithout 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
- woodrowbarlow 9y agocurl always goes to stdout if you don't redirect it. i'd guess the file is just padded so that the "animations" take longer.
- slyzmud 9y agoDo somebody know how the images where created? I haven't found a tool that creates ascii art with that color quality.
- woodrowbarlow 9y agoor 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.
- theden 9y agoRepo: https://github.com/TheDen/TheDen.sh 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).
- rijoja 9y agoAh 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.
- amatecha 9y agoyou could add little window decoration / border / title bar which would better indicate that it's actually a draggable "window" of sorts? :)
- gszathmari 9y agoWell done mate :)
- eddieh 9y agoIt looks like Emacs rather than Unix.
- mmosta 9y agoHover 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.
- cosinetau 9y agoAnd there I thought this would be an Apache user directory tutorial.
- amelius 9y agoI want a Unix-like Facebook homepage.
- dheera 9y agoGet a Chrome plugin such as "Stylebot" or "User Javascript and CSS" which lets you inject your own CSS automatically into any site.
- amelius 9y agoGood idea. But that doesn't allow me to share my enthusiasm for Unix with my friends.
- tekknolagi 9y agoYou could share the style, I suppose
- carussell 9y agoI 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.
- amelius 9y agoYet every personal and corporate website basically works that way :)
- slaymaker1907 9y ago
- venamresm__ 9y agoMy old webpage was trying to emulate my window manager: https://venam.nixers.net/old/ 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.
- idsout 9y agoSad poem :(
- jaflo 9y agoI expected something more lighthearted after "solving" that puzzle.
- slinkyavenger 9y agoJust 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.
- buildmystartup 9y agovery cool
- vthriller 9y agoIt 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.
- falsedan 9y agoI was hoping for something more like http://r.dakko.us/klange.7 http://r.dakko.us/klange.7 [0] [0]: https://news.ycombinator.com/item?id=8023258 https://news.ycombinator.com/item?id=8023258
- wcummings 9y agoEmacs-like :)
- hq6 9y agoThis was very different than what I expected. I thought it would be closer to https://hq6.me https://hq6.me
- slaymaker1907 9y agoWow, really cool page.
- jabgrabdthrow 9y agovery 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?
- nikolay 9y agoIt's more BBS-like, not really Unix.