Scott Hanselman

Web Sites with Embedded Command Lines: You got your Command Line in my Internet

September 20, '12 Comments [27] Posted in Musings | Tools
Sponsored By

Photo by Osama Khalid and used under Creative Commons CC BY-SA 2.0Eight years ago I wrote a post called Opportunity: Windows is completely missing the TextMode boat. The language is dated...

I assume we all realize that there are literally millions of Windows machines from 95 to XP that exist only to allow more than one Telnet/ProcommPlus/Terminal window at a time, so end-users can interact with remote systems.

...but the point is there.

I’m just saying that my Tab,Tab,Tab,Enter will beat your Click,Tab,Alt-F,O,Click,Double-Click, more often than not and I will take the Pepsi Challenge otherwise.

Command Lines are faster than Graphical User Interfaces. Command Lines and all the things we string together within them are DSLs (Domain Specific Languages) for Getting Stuff Done™.

How often have you seen (or worse yet, written) a graphical interface to express or build something like that could be more tersely expressed as "/^[a-z0-9_-]{3,16}$/"?

Other than the Address Bar, the Command Line isn't something you see a lot on the web...yet. We have been seeing more and more sites embracing hotkeys, though.

We've seen Google products embracing Vi's "hjkl" cursor movement and nearly everyone popping up hotkey help by pressing "?". I use the Twitter website and its hotkeys more than a 3rd party Twitter client.

Related Reading: The Web is the new Terminal: Are you using the Web's Keyboard Shortcuts and Hotkeys?

While we all love bash, zsh, PowerShell and many other shells, it's interesting to me that the command line is infiltrating the web itself.

Command Lines on the Web

Search engines have been the obvious place for Web Command Lines to pop up. Google and Bing each allow us to use their search boxes as Calculators. Google even supports Bacon Numbering!

Perhaps the first example I saw of a "Web Command Line" was the Rails Day submission YubNub in 2005 by Jonathan Aquino. Futz.Me is another example that uses URLs as its command line. DuckDuckGo - the little search engine that could - is fast becoming the search engine for the hardcore command liners. DDG supports what they call "Bang Syntax." Make any query and add a !keyword and you're taking to a custom search. There's the obvious ones like !g for Google but also !code, !csharp and hundreds more. You can even extend DuckDuckGo and Submit your own Bang command!

Jeff talked about the Address Bar as Command Line in 2009 but I think the command line is starting to go even father than the address bar. Why not embed the concept of a command line in the website itself?

Moving from simple search to more complex navigational schemes, GitHub recently announced their Command Bar, which is a fantastic example of a Web Command Line. It supports an easily learned series of chained commands so I can quickly jump to any user, any project, any issue and more.

GitHubs Launch Bar is a command line embedded in a website

It's funny how we, the makers of the web, prefer to spend time managing the Web from the command line. The Windows Azure Team spent a lot of time recently updating the Management Portal with amazing new features and a nice new HTML5 website, but I've ended up managing my Cloud applications with the Azure Command Line in cmd.exe or PowerShell.

Azure command line format "topic verb options"

For me, it's simply faster, clearer and more obvious.

scott@hanselmac:~$ npm install azure
npm http GET https://registry.npmjs.org/azure
...bunch of GETS...
scott@hanselmac:~$ azure
info: _ _____ _ ___ ___
info: /_\ |_ / | | | _ \ __|
info: _ ___/ _ \__/ /| |_| | / _|___ _ _
info: (___ /_/ \_\/___|\___/|_|_\___| _____)
info: (_______ _ _) _ ______ _)_ _
info: (______________ _ ) (___ _ _)
info:
info: Windows Azure: Microsoft's Cloud Platform
info:
info: Tool version 0.6.0
...bunch of help stuff...

HTTP itself becomes friendly and fun at the command line with tools like HTTPie that allow me to almost write HTTP on the command line!

HTTPie is HTTP for Humans and Syntax Highlights as well

Firefox 16's Beta Channel recently added a Firefox Command Line. You can explore your DOM, HTTP response, cookies, elements, everything all from a simple command line. Why click an element when you know you want to "inspect #mainbar"?

Command Line for Firefox

Learning sites like TryRuby, TryF#, Codecademy, PexForFun, and dozens more embed textboxes as command lines, and surprisingly users don't freak out when they see them. I must say I still remember the first day I saw TryRuby in a browser. I was blown away.

Luke Lowrey went so far as to make "NetBash" a command line for admins to manage websites! It's all web-based but pops up almost Quake-style as an overlay within your browser. Brilliant. NetBash is on GitHub.

A bash-like shell overlaid on a website

What sites have you seen with embedded Command Lines? What web-based tools or sites have used a Command Line and DSL in a way that surprised you?


Sponsor: Thanks to DevExpress for sponsoring this week's feed. Multi-channel experiences made easy: Discover DXTREME. Delight your users with apps designed expressly for their device. DXTREME, multi-channel tools build stunning apps across devices & optimize for the best of each platform, from Win8 to the iPhone. And, the powerful HTML5, CSS and JavaScript tools in DXTREME also build interactive web apps.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Thursday, September 20, 2012 6:53:55 AM UTC
Have been doing the DDG "bangs" equivalent from the address bar with Chrome for some time. Wrench -> Settings -> Manage Search Engines... then add your site searches there. Saves me the click to get to DDG and the trouble of setting up a bang on their site. E.g. If I want to look up a movie details, I go to address bar and just type "imdb the avengers", hit enter, done.
B
Thursday, September 20, 2012 7:11:31 AM UTC
Don't forget http://www.skycmd.com
Fabio Cavalcante
Thursday, September 20, 2012 7:17:46 AM UTC
Also, don't forget the new and one of the greatest startups: Koding
They have a great command line tool, too. Should give it a try!
Thursday, September 20, 2012 8:08:43 AM UTC
Great post Scott. One of my first ever OSS projects was a web application for managing and running powershell scripts in our domain (so we could allow support staff to reset passwords without necessarily giving them full AD permissions). You'll find it on CodePlex, http://psadmin.codeplex.com
Thursday, September 20, 2012 8:27:20 AM UTC
The new github command line looks like the awesome YouTrack Advanced Search feature:

"Type for:me #unresolved to filter unresolved issues assigned to you." (from http://www.jetbrains.com/youtrack/)

I'd love to see more "key-driven" websites in the future.
Kim Meiser
Thursday, September 20, 2012 9:14:52 AM UTC
And you will probably love this web command line too ;)
http://bit.ly/OdX9Rs
Tom
Thursday, September 20, 2012 10:50:38 AM UTC
I remember when http://goosh.org was hot
Thursday, September 20, 2012 1:29:41 PM UTC
"Command Lines are faster than Graphical User Interfaces."

Strawman argument. That only applies if you're already an expert at the commands on the command line. If you're a novice, you spend far more time reading up on all the different option flags to get it to work, while a nice UI allows you to choose the options as you use it. Command lines require you to master the syntax before you can begin.
Kevin
Thursday, September 20, 2012 2:14:36 PM UTC
It's been a while since I have put a lot of development time into the project, but I put together a pretty fancy command line over at StartOfTheInter.net. It's a command line message board. Simply type HELP and you're off to the races :)
Thursday, September 20, 2012 2:21:01 PM UTC
Jetbrains' webbased Issue Tracker YouTrack has a some pretty awesome commandline-like features with the Search Box and Command Window. I think that Keyboard-driven navigation and usage is so important in any application you use every day. Another good example of command-based uis, though not webbased, is SublimeText 2 or simply good ol' vi.
Simon Skov Boisen
Thursday, September 20, 2012 2:25:36 PM UTC
I'm messing with DNS at the moment so if anyone has trouble checking it out, visit soti.azurewebsites.net.

The neat thing is that I designed it to use a REST api. The open-source project has both a web interface and a console interface that consume the same class library API, and all the functions from the DLL are mapped straight to the REST API in the web interface so custom clients could be written if I were so inclined.
Thursday, September 20, 2012 2:28:33 PM UTC
Without citing evidence or research, my gut feeling is that command lines are great when you are already familiar with the system. When you are a novice, UIs are superior at discovery.

I can do more immediately when looking at a UI representing a system I've never seen before than I can with a command prompt blinking at me for a system that I've never interacted with before, but once I've built up a memory bank that equation changes.
Christopher
Thursday, September 20, 2012 3:32:11 PM UTC
To add to the expertise argument, I would question how many sites you have the capacity to be an expert at. If I have 4 or 5 favorite sites I can probably remember their unique syntax and functions but if I want to use 20? 100? I think a command line approach is not really sustainable for general usage. It's a nice to have for sure.
Thursday, September 20, 2012 3:42:14 PM UTC
Remember The Milk has both good keyboard shortcuts, and a really useful command-line Smart Add feature for adding new tasks I couldn't do without.
Thursday, September 20, 2012 3:49:34 PM UTC
My favourite example of this is rememberthemilks smartadd http://www.rememberthemilk.com/services/smartadd/ I can essentially add a quick task to my list with all the metadata I need just by using the right syntax rather than clicking lots of form elements.

Great for when you're following GTD and need to reduce the friction of adding tasks down to zero.
Mark Cheverton
Thursday, September 20, 2012 4:48:02 PM UTC
AutoCAD WS www.autocadws.com has a command line.
Thursday, September 20, 2012 4:58:35 PM UTC
Side note: How did you made the animated gif mini-screencast?
Eduardo
Thursday, September 20, 2012 5:33:36 PM UTC
Eduardo - Camtasia
Thursday, September 20, 2012 6:18:56 PM UTC
Really, I just customize the tools I use all the time. Visual Studio -- Build | Rebuild All is CTRL-SHIFT-/ and Debug | Attach to Process is CTRL-SHIFT=+. These shortcuts save me a ton of time. I also tend to start a CMD prompt if I need to search and use findstr over anything else. It's faster and seems to do a better job finding stuff:

findstr /i /s /c:"stuff" *.as?x

to search my ASPX and ASCX files for finding where a control I wrote might be used. Better than right-clicking and searching a folder in Explorer any day.

My CMD boxes are all buffered at width: 400, height 9999 with some much larger screen size and Edit Options set to Quick Edit Mode and Insert Mode. Wouldn't live anyother way.

Daniel F. Van Der Werken, Jr.
Thursday, September 20, 2012 6:50:13 PM UTC
I'm using http://www.serchilo.net

you define shortcuts for various search boxes on the internet, e.g. i can google for turtle with "g turtle". i can search youtube with "yt <search term>"

the cool thing is, anybody can create new shortcuts with a very simple syntax on the accompanying wiki, http://wiki.serchilo.net

commands can also be defined in terms of regular expressions, if this is needed.

all in all a very powerful tool that has made the web much more accessable to me.
akino
Thursday, September 20, 2012 7:02:01 PM UTC
The important thing here is not so much "fewer keystrokes", but that the human mind has a lot of linguistic machinery that goes to waste in many graphical UIs.
Kieran
Friday, September 21, 2012 12:32:23 AM UTC
Lift Off Software's Gate One (also on GitHub) is a web-based SSH terminal. So that is quite literally a web site with an embedded command line! (My only beef with it at the moment is that is requires WebSocket and doesn't currently fall back to long-polling or Flash socket emulation).
Jim
Friday, September 21, 2012 3:46:19 AM UTC
I use a javascript library called Molecule.js that gives you a command-line style interface to your RESTful api, so you can control your entire web-app from one input box - you can also attach commands to other elements so they trigger when clicked, and commands can be chained and piped. http://github.com/deadlysytax/molecule.js
Jaap
Friday, September 21, 2012 3:49:33 AM UTC
Orchard and Drupal both have a very powerful command-line, that can be extended by modules.
Friday, September 21, 2012 5:12:21 AM UTC
Hi Scott,

The best command-line style tool for the web I ever came across was a now discontinued Firefox add on called 'Ubiquity'. With natural (mostly) language queries you could interrogate, from within a browser window, any number of useful web-services. For example, from the prompt you could [a] add an appointment to your calendar; [b] initiate a new email; [c] get the weather; [d] search wikipedia, etc., etc.

I'm not sure why it was discontinued and retracted, but while it lasted it was a terrific tool that brought something of the command line experience to the web.

It's probably the closest anyone has ever come to overlaying a 'semantic web'-style experience onto the internet!
Iian
Thursday, October 04, 2012 5:44:08 AM UTC
Nice article.

I really like the idea of browser-based developer tools that combine the expressivity of a command-line interface with visual feedback made possible by the graphics and layout abilities of modern browsers.

I wrote about it in The future of dev tools.


Thursday, October 04, 2012 11:10:19 PM UTC
I've been slowly building a command-line social network, which makes it so efficient to poke people it's ridiculous. My favorite part is automatic ascii-art generation for photo sharing. Double Happiness

Bug Disclaimer: It's not mobile friendly and your password will not be visually masked.
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.