My personal site is a terminal | Hacker News Reader

My personal site is a terminal

karlsteltenpohl.com

193 pointsmadchops1133 comments

So, because it was a terminal, to exit it I automatically hit Ctrl+D, which bookmarked the page.

Well played Karlsteltenpohl, well played.

Less well played: Ctrl+w

Granted this does happen a lot on all other sites when typing but being in a terminal much instantly triggered it.

The Jupyter terminal actually does manage to hijack ctrl+w and ctrl+t, at least in IE Edge. Not sure how they manage it but it's kind of a nice touch.

Nice idea. I really wanted to like this but I'm not so sure you've pulled off the execution. Just after a couple of minutes of usage I found so many compatibility differences between that a real shell that navigating around your site became rather frustrating:

    * Tab completion was glitchy
    * Deleting characters mid line was glitchy
    * Commands don't follow common idioms:
        - `ls *` would fail
        - `ls -l` would fail
        - `ls ` (space char after `ls` command) would fail
    * I couldn't select the output from `ls` to paste into the prompt
    * Symlinks don't behave link symlinks:
        - I cannot `cat` them, have to click with a mouse
        - Yet they are still displayed as a file in `ls`
    * Common readline shortcuts like ^U don't work
    * It barely works on mobile / tablets:
        - Scrolling is all over the place
        - Screen doesn't resize to use the full screen
        - Pain to type commands on mobile keyboard because they auto-capitalise first characters

Also there seems to be some latency between keypress and the character appearing which makes the experience a little jarring too.

Given this is your main way to navigate the site rather than a secondary navigation system, I think it's something you either need to go full out or not bother at all as the novelty of a partially compatible - inspired by Bash - approach wears off very quickly resulting an in frustrating overall experience.

I enjoyed the hell out of it. It was like seeing something familiar from my world, in cake form at a restaurant. I flicked it with my spoon, had a chuckle, and moved on. It's a toy, not a tool.

> It's a toy, not a tool

I think it's fair to say it's both because it's the primary navigation tool on a site with a fair amount of linked content (otherwise what's the point in putting content on it if it's not meant to be discovered?)

As a toy, I do completely agree with you. As I said in my previous post, I do really like the idea. But as a navigation tool I think there are areas for refinement while retaining the same fun factor.

I think you're being pretty harsh towards a neat personal portfolio site. It would be different if it were for a product or service, but it isn't, it's just a fun personal site.

I think you're being pretty harsh about my intentions. I said it's a nice idea and worded all of my feedback constructively thus if the author wishes to further develop this they know areas one user struggled with.

I approached my feedback in terms of what I would like to read if I were the author and I mean that honestly because if this were my project I'd have valued that kind of post more than vague comments like "this is awesome" (which are obviously nice too but doesn't offer any guidance for enhancement).

As an open source contributor myself, I know how negative some people can be when you release a project. But at the same time we (myself included when I release products) cannot expect every comment to be glowing with praise. The real question is whether feedback is constructive or just critical. I felt I was the former and I sincerely hope that's the way the author read it as well because I did genuinely like the concept even if I raised specific issues about its execution.

I guess tone is hard to read online sometimes :)

Very true.

Your `cat` command doesn't take multiple arguments, which is ironic since it's supposed to concatenate multiple files.

Karlsteltenpohl's cat.

The cat command doesn't do anything for me right now.

And I thought cat would concaternate the input (e.g. file) to the output (e.g. screen).

Followed the link on a mobile device; saw a blinking bar but no way to use the site.

The effects during typing are a little distracting.

Do you plan to allow the usual string navigation shortcuts that my hands are apparently unable to type without? (^-a ^-e ^-k, etc.) ?

I really like the particles.

Yeah, the one thing that made me click away from the site was the particle effects when typing. It really broke that 'suspension of disbelief' moment for me. I know it is not a real terminal, but if you are going to go to the effort of making people feel they are interacting with a terminal, then don't break that illusion with fancy chrome.

Agree. It's a fun effect to show off as a FE dev I guess, but it feels out of character. Maybe make a "party mode" or something? You could click a disco ball to turn it on! :D Other than that, cool idea and well executed.

That's actually from an atom plugin called Activate Power Mode: https://atom.io/packages/activate-power-mode

Some of my colleagues use it and I tell them they're absolutely nuts, but they swear by it. It reminds them their code has meaning, I guess? Haha

I once helped conduct a hiring interview where the candidate had that enabled, it had an especially bad effect on the video compression in google hangouts screensharing.

There is a Real Terminal Emulator™ with some effects close to this (including, I believe, a nyancat cursor) called Terminology (from the Enlightenment folks).

I too feeel they are distracting.

The cursor effects with the exploding after each letter typed makes the site cool and not really usable.

Hey I just wanted to point out that this really cool site you built doesn’t have some of the features of a full terminal on Linux.

I'm specifically annoyed that readline binding of open editor, ctrl-x ctrl-e doesn't work. Please fix, never visiting your site again. (Tongue in cheeks).

I am especially annoyed that little exploding color circles don't appear when I type on a full terminal on Linux.

I expect to see a GitHub project adding exploding color circles to a popular terminal app within a week.

Edit: Never mind, someone time-travelled and did it a year ago. https://atom.io/packages/activate-power-mode

If the point of the site is to find clients/recruiters/etc.. then you should scrap this idea.

While technically this is somewhat impressive nobody who this site is aimed at will type commands to see your work/cv/etc.. They will just close the tab and move on.

Sad but true. I spent some time building a personal site mostly for fun, but also to get back into industry. Many companies view a blog as a liability... better off studying for a few months to get some extra certifications.

What do you mean by they view a blog as a liability?

I'm interested in hearing his reasoning, too. Maybe said companies don't want people posting about what they're doing at work or don't want a PR nightmare if the employee says the wrong thing

I think it depends. If you're blogging about technology findings it's fine. If you're blogging about how much you hate <insert politician here>, then yeah companies may see it as a liability.

I started making my personal site as terminal just like this one and eventually scrapped the idea because it's a terrible experience on mobile, but also it's just gimmicky on desktop and will only be mildly interesting to other devs.

I disagree. There are too many negative comments in this thread. This is an awesome site that will resonate well with clients and recruiters. It has exactly what they looking for and yet presented in such a refreshing way. It show cases your creativity, ambition and dedication to do something like this. Great job!

I had mine for a while now http://chandrabhavanasi.com/ which was based off of jquery and a bunch of hardcoding. I haven't updated it in a while though. The new ones I see once in a while on hn like these are pretty nice though.

Mine too. Completely useless but fun to create. (dperini.com)

I guess it works as an art project, but as a website, it's a complete failure.

Your personal site doesn’t work on Safari Mobile.

And has major layout & script problems on MS Edge.

And on Firefox the vertical scrollbar keeps randomly going up and down.

And is quite terrible with Chrome on Android.

Or Firefox mobile.

https://vishaltelangre.com/

Checkout this one. It's built using Elm and is responsive.

Would you mind if I use your source code to set up my own similar personal website? Of course, I will give the credit to you. By the way, I am impressed with this novel idea. I will tinker around the code to add my own features.

https://github.com/vishaltelangre/vishaltelangre.com

I'm not the creator of this website. You can contact him on Twitter

Heh, the clear screen hotkey (ctrl+l) also jumps to the address bar. I think he needs a "return false" somewhere

problem with the site is that since it only implements a subset of what one would expect from a shell you're constantly inputing things that do not work.

no the problem with the site is that music :)

Try jslinux

https://bellard.org/jslinux/

I love it, but my minor nitpick is that if you press tab for auto-complete it jumps up and back down again (in Firefox, anyway)

Obligatory for HN: here's a VC whose site is a terminal: http://neuvc.com/

Wow, that's a lot braver.

Breaks after the first input is submitted. Won't let you type further.

I realized it got me when I typed "exit", trying to leave the website

Ha, I ended up bookmarking the page (Ctrl-D).

Similar, but with no input lag: http://www.clarkduvall.com/

Interestingly, this one doesn't register as text input with vimium so it's completely incompatible. OP's does register.

haha I know clark and this is ironic since he's obsessed with vim!

How do I make onscreen keyboard pop up in android os? I am using Firefox.

Well, better than mine I suppose. http://trufavarela.com/

I guess my sloth is slightly more entertaining. http://yeukhon.me/

<marquee> still works!?!?!?

Yes! Like Dreamweaver is still alive!?!?!?

I still use Dreamweaver 8 and 9. (They are the same thing actually, 9 is just rebranded as 'Adobe')

No, I don't use design mode; I always live in code mode.

I've added the HTML5 intellisense/syntax-highlighting add-on extension, which brings it up to modern standards, and I've created new HTML5 templates.

It supports all the languages I need, and means I can have CSS, HTML, and JS all in the same editor with the same IDE features.

It does me.

It was fun though. I learned to use Dreamweaver MX because at the time I was in elementary school and my teacher just started a campus newsletter club. We were also lucky to have computer class and got some HTML lessons. Mind you, this was 1999-2003 in HK. I was very disappointed at US’ computer class in my junior high.

That's a pretty handsome sloth!

It appears to even be smiling. I am not sure why, but that made me feel better.

Hahaha, thanks for the lols :-)

It's not the most bare-bones site I've seen. For a while there, http://www.israirairlines.com/ was rendered a single text line that just said "Error"

I liked the whole thing, I would like to see alias like `ll` preconfigured in any good terminal.

there are some issues with errors some of the places it doesn't show that.

When changing directory (going back to home) it doesn't work and doesn't even show the error.

command `cd ~/` doesn't work.

Try https://duckduckgo.com/tty/

How do I make onscreen keyboard pop up in android os. I am using firefox.

Not sure. May be try to tap and hold? It might be not a normal text field, so Firefox might not understand it. There can be some global gesture for it may be.

It'd be interesting to collect stats on all the commands people try to run, and to implement all the ones Linux users are likely to have wired into muscle memory.

I make sure to type 'sudo make me a sandwich' on all of these.

I bet there would be A LOT of 'rm -rf /'-ing going on. I'll admit it was about the second thing I tried.

In the same vein, I always try ‘cat /etc/passwd’

Cool site that doesn't run like a dog, I'm impressed! I actually spent a few minutes fiddling around trying to see what I could do on the terminal, can't say that for many other sites.

If I could offer one little bit of feedback; some labels on the menu at the top would be kind of handy, a few icons are easy to recognize but some aren't (at least for me).

Looks pretty broken for tab completion... Also you can't cat the .ai file? or open it? Whats the point.

It took me a sec to realise duchess.ai was a folder, not a file, and then another second to realise tab completion was trying to send me to duchess.air for some reason. Cool concept, just a couple of little things to iron out.

So... I can just view source and see all the available data. That is a lot faster then typing in commands.

You could also just run tree on your computer instead of navigating directories

My personal site works on a phone.

I also can’t interact with it on my iPad. No keyboard comes up or a button like backup.

really "jumpy" when using Firefox Quantum.

I found it frustrating, I didn't actually end up seeing anything other than the terminal I tried changing into folders, but it didn't seem to work. Seems broken.

That's awesome!

I did a similar design for my tilde.town site: http://tilde.town/~myles/.

I can't type in here, using Chrome.

doesnt work on FF either

If you really want to attract attention, use jslinux[1].

[1]: https://bellard.org/jslinux/

Cross-compiling bash to JavaScript and implementing VT would probably be enough :)

Interesting, but Tab completion seems broken:

    cd Foosball/
    cat r<tab>

Selecting text (on Firefox) doesn't seem to work either.

> Selecting text (on Firefox) doesn't seem to work either.

It seems to be intentional. It works if you deactivate JavaScript.

hmm tab completion is working for me in FF 56

I don't mind this but I wonder what it would take to make it so you could SSH to the same domain and make it somewhat interactive. Letting anyone connect with any username (and based on their username allow them to open files personalized to that) I often wonder the effort it would take to make custom shells for people to connect to without giving too much access to a server for personal reasons.

Reminds me of the XKCD April Fools terminal, whose code is actually available here: https://github.com/chromakode/xkcdfools

So is this just JS or an actual terminal is behind? Looks like just JS... I would love to see someone actually expose a shell.

Is it ok if the shell comes with a full Linux kernel? :)

https://bellard.org/jslinux/vm.html?url=https://bellard.org/...

(by the amazing Fabrice Bellard)

I love it!

Just one thing though, when hitting tab it seems to be getting the root file and it doesn't work then.

E.g cd Photo-Video cd Sunrise<tab>

Pretty neat, but those particle effects are strange for me. Similarly, I've never used yet but Unixstickers has a terminal like interface on their website: https://www.unixstickers.com/terminal You can use it for shopping.

Nice! I made a site where information was primarily exposed via keyboard input (my personal site as well[0]) but I had to make sure mobile worked okay so I made a static version for mobile users.

[0]: http://me.thatcoolidea.com

I cannot type in Firefox as I have the 'Search for text when you start typing' setting enabled.

I understand what others are saying: there's a lot going on at the same time. Getting rid of the effects while typing would be a major plus.

I've also done something similar, but way simpler: https://rafael.pt

In the same vein, try out https://desfontain.es/ it's the personal website of a friend and you can navigate it like if you were playing nethack.

What a cool idea! I was hoping there was going to be a directory of blog posts I could `cat`. I feel like there's some fun potential here if you keep fleshing it out, but of course who has the time?

I enjoyed how many people are quick to criticize that this doesn't work as well as an actual terminal. Because that was definitely, absolutely the point.

Nicely done. You have mentioned ` Daytrader w/ Machine Learning ` How is that going on for you ? Can you guide me on how to get started.

Reminds me of https://github.com/zeit/hyper

Anyone know how to get this to work on an iPhone?

No idea how to bring up the keyboard (and it doesn’t happen automatically in case someone asks).

This is pretty awesome. Youre gonna get a lot of attention, what with your resume being on the front page of hackernews...

Reminds me of http://alinelerner.com/

The completion doesn't work properly. It's a super fun little project, but, very frustrating to use.

How do I make onscreen keyboard pop up in android os? I am using Firefox in android.

I'm unable to start Vim.

"Just one thing" - I'm sure Karl knows this is not fully-fledged, bug-free terminal.

Great concept Karl, I think you're a no-brainer hire for anyone who wants to add out-of-the box problem-solving to their team, since you just hacked your personal brand publicity very creatively :)

This kind of site has been around for a long time. Amusingly enough there were even image boards with this approach.

$ cd Labs/

$ cd ../Projects <-- this does not work, the cwd remains Labs/

I built one of these ~7 years ago (I feel old :( ) based on this over here [1], inspired by the XKCD CLI [2].

This is certainly prettier!

[1]: https://github.com/tekacs/RCLI

[2]: https://uni.xkcd.com/

I like the idea!

Finally an interesting website - don't listen to the moaners.

That concept is f*ing cool... love the idea

first command I tried: `rm / -rf`

Cool.

Also, figlet sighting, "large" font. :-)

I love this.

Those visual effects are annoying beyond comprehension. You should find a way for users to disable them easily.

Why?

This is quite neat!

how do you open the resume?

rm: command not found

Thanks!

if you call yourself a hacker, you aren't one.

The concept is cool, but I'd like to point out a couple of issues.

The explosion/flashing thing is somewhat annoying. Honestly comes off as childish.

Tab-completion _deletes_ word under cursor if no match is found? Why?

Why is the terminal built on angular? Seems like an overkill. Partly because I think Angular is a terrible abomination, but in general there's not much going on there to even warrant a framework.

Nice work. But honestly, you're making it incredibly hard to quickly see your accomplishments.

for added beauty put it in a DEC vt05 https://en.wikipedia.org/wiki/VT05

This is so cool!!

Reply on news.ycombinator.com