Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: I published my first website – ShellMagic.xyz (shellmagic.xyz)
213 points by manjana on Feb 13, 2020 | hide | past | favorite | 77 comments

Some feedback you probably won't hear from the HN crowd:

Give more context to the site for initial visitors. Its going to be more obvious to those who visited from HN but not to those who stumbled upon it somehow. A little blurb at the top saying this is a reference site for bash scripting syntax and maybe why you saw the need for such a thing would do ease people into the site a bit.

I hate the popup at the bottom, I will hesitate to use the site again because of that (just like many of us avoid news sites with pesky popups), Its a major turn-off. Probably an unpopular opinion around here, but just maybe make a note at the bottom regarding the privacy stuff unless there are legal reasons not to (I'm not up on all the regulations) If you can't avoid it, make it way less intrusive.

Overall its really nice and I love to see better documentation made around old-school linux/bash tools and syntax as I often feel the documentation can be unwieldy with a lot of knowledge assumed. +1 to examples as others have said. Keep it up! :)

This is great feedback. I have removed the popup, I've had the suspicion that people may find it annoying and you and a few others have now confirmed it. Maybe I'll find some other use for it. I despise these things myself also, which is a bit funny lol. It turned into a "can I do it" rather than a "should I do it"-thing when the idea first crossed my mind..

I'll see if I can come with some non-disruptive way of adding some context to the site upon entering it.

It would definitely be helpful to have more context. I know some bash, but I'm far from an expert. The first thing I see on the page is a list of flags, but no clue what commands these flags are used with. A few usage examples would help a lot.

For example "-e checks if files exists" How? -e filename ? This doesn't work?

If you're just wondering, try:

  test -e file

  if [ -e file ]; then
      echo "File exists!"
      echo "File does not exist!"
Edit: Untested, I'm currently not at my desk to verify it :)


As a nostalgic side note, I'm not even that old, and I miss when the Internet looked like this. Just regular folks learning HTML and writing about something they find interesting. These days, everything looks like it was built in a Wix or Squarespace factory.

Thank you - appreciated =)

> Access Codes & Permissions

This section is missing stuff like setuid, sticky bit, extended attributes, etc. (SELinux stuff and setgid? I'm not sure if there's more.) For example, `ls -ld /tmp` shows `drwxrwxrwt`, `ls -l /bin/sudo` shows `-rwsr-xr-x`.

> History Expansion

To this section, it might be good to add `!$`. Also maybe a quick overview on word designators, to cover syntax like `!:^`, `!:2`, `!:<asterisk>`, etc. There's also modifiers, like `!$:h` to return the (h)ead of a path that's the last argument of the previous command, etc.

> Bash Globbing

> @ Matches exactly one of a given pattern

It might be better to put these extended glob ones as @(pattern-list) for example, just like it is on the manpage. Putting it just like @ next to ? or <asterisk>, implies that it just goes like that alone.

> Overview of Bash Symbols

> $(( )) is used for saving the output of arithmetic.

I guess you could save it, but you can also pass it directly to where you need it. I wouldn't call `echo $(( 1 + 2 ))` saving it.

> $[] deprecated integer expansion construct which is replaced by (( ))

No, it's replaced by `$(())`.

EDIT: Removed the part about the file types. You have that covered. However, you wrote

> c Special file

> b Block device

They're both special files. `c` is for character devices.

That's a great help! Thank you.

Very cool, thanks for sharing. Here's some trivial suggestions.

- There's a lot of info here, so I think you should aim for curation and conciseness, rather than completeness. For example, in File Test Operators, your first two entries (effectively, the first two entries a visitor sees) is `-e` and `-a`, both of which you describe as "File exists", though for the latter, you write: "(identical to -e but is deprecated and outdated)". Is there any reason for `-a` to be included if it's not useful? When I use a cheatsheet, I just want what's most useful, not a full historical reference.

- This is a minor thing, and very much imho, but it was a little distracting to see Times New Roman (or rather, the Mac default serif font) as the base font for the descriptive text, which is a font that I associate with an unstyled (i.e. unpolished) website. IMHO , it looks a bit better in Georgia, or a sans-serif like "Helvetica Neue". Again, just imho, I'm sure others might vehemently disagree.

- The associated twitter handle looks like @shellmagic1 – why not use the handle @shellmagicxyz, which is currently unused?

- I'll be making a section for deprecated stuff and move everything of that sort into one section. Good suggestion.

- I've added a bunch of new fonts to the site, just now. It's a temporary selection of fonts - but include nicer ones like Source Code Pro for code, and a sans-serif for headings and navigation bar.

- Thank you very much for mentioning that. That's a way nicer handle!

I always find the context switch to get to a website jarring, and really really love tools that give me documentation on the command line. For example, I can type "go doc foo.Bar" and instantly read the docs for foo.Bar (where foo is usually resolved to example.com/some/go/package/foo, based on what is in go.mod and installed on the system). So for this, I would really like bash's built-in help to show me all this stuff.

They did a 10% implementation of what would be good:

    $ help [
     [: [ arg... ]
         Evaluate conditional expression.
         This is a synonym for the "test" builtin, but the last argument must
         be a literal `]', to match the opening `['.
But it doesn't know how to dive into [ and show docs for the operators, i.e., "help [ -e" doesn't work. The [ documentation also doesn't tell you what options are available, and of course [ doesn't implement --help (but, of course, /bin/[ does. And people say computers are hard to use! Psh!).

So anyway, if this could all be fixed with a command-line utility, that would be wonderful. It is likely that if I ever need to remember what [ -e does, I'll "man [" or failing that "info bash" or failing that, give up and write the program in go so at least I can work from some documentation.

> It is likely that if I ever need to remember what [ -e does

I realize a lot of folks consider the context switch to paper to also be jarring, but this is why I like analog reference works. I remember roughly how far in to the book the table of all those obscure flags are, and the book more or less falls open to it, because I've been there before.

> "help [ -e" doesn't work. The [ documentation also doesn't tell you what options are available

Well, knowing that `[` is the same as `test`, you can `man test` to see the available options.

Personally, I avoid `[` for `[[`. To see the options for that, I do `man bash`, then type `/\[\[`, hit Enter, and press `n` a few times until the list of options appears. It's in the "CONDITIONAL EXPRESSIONS" section.

Almost everything shown in this site is available in bash's manpage.

GNU's `ls` has most of its documentation in `info ls`.

There's no need to turn to websites. All documentation is available locally from the command line. If anything, it just requires a bit of skill in searching. With `man`/`less`, you search with `/` like I showed; in `info`, you search with <Ctrl-s>.

Also, `command [ --help` does work. It's not the same as the built-in, but it should be mostly the same.

> I always find the context switch to get to a website jarring, and really really love tools that give me documentation on the command line.

Heh, as a person who mostly writes Clojure code, I always find the context switch to go to the command line jarring and really really love tools that give me the documentation straight in my editor!

I understand the concern, but [ is one of those idiosyncratic shell builtins that you eventually get used to and the help does point you toward maybe typing "help test". But, yeah it should probably say it explicitly or just append the "help test" content when it prints "help [".

If you use fish shell, you can use man on the built in shell commamds. It's a nice experience.

Nicely organized and well done! Thank you.

For all people like me addicted to this kind of reference websites full of information, check out http://hyperpolyglot.org/unix-shells (and all pages on http://hyperpolyglot.org/ actually).

Thank you - that is an amazing resource you linked!

Try doing the string manipulation section for Zsh instead ;) It will kill you.


Think I'll just stick to Bash for now haha xD

It's a reference site about Bash scripting, and it's being improved each day since it still has some rough edges. But I'm starting to like the result on desktop resoulution. Next up is improving the CSS for low-res devices and adding toggable color-themes by clicking some radio-buttons or something :-)

I bookmarked this as it will be very helpful to me, so thank you!

My constructive or no so constructive criticism is that I really really don't like the theme. I find it really hard to look at and a bit difficult to read.

I'm about to implement some common color-themes which'll be easy to toggle (visually/color-wise it'll be like those themes you'd see in an IDE like Eclipse or Intelli-J f.e.). I expect to be finished with the feature in a week or so.

Thank you for the feedback and glad you like the content :-)

Echoing that is is a very useful site and echoing concerns re: theme and glad you are giving some options! Specially, I'd like to callout the main problem to address when adding additional themes is that the headers are needless bright while there is very low contrast when it comes to the actual content.

Nice reference, compact and complete.

My 2 cents: top menu goes away when you reduce window width; on mobile no menu at all (but content goes one column correctly, so halfway responsive). If you move or click on something, it highlights the cell (not everywhere) but there is no operation/command bound with that (no copy to clipboard or any kind of interaction). Usually, something highlightening represents an action that user can do.

There is also 'man bash', you can even search it.

Joking aside, the bash man page is pretty good and well structured.

  man bash | grep '^[A-Z]'

Well done! For a first website, this is amazing. I can learn some bash from this site. Also, I want to say it was a pleasure (more relief, really - now 2020-02-13) to read the comments and not be overcome by negative comments. Sometimes even "constructive criticism" misses the goodness in the gigantic effort to make. Your first website and you get on HN! Go YOU!

This looks great!

If I might suggest something: Maybe you'd like to investigate different layouts for different use cases? The alphabetical ordering of builtins e.g. will mainly help you if you encounter it, but don't know what it does.

For more exploratory/educational lookup attempts, perhaps it could be useful to group them together by their use? I'm fairly certain, for example, that grouping `cd` together with `pushd` and `popd` might help someone avoid some rather nasty bugs in their script. Maybe, even a "see also" in the direction of subshells could help (as `cd` only affects the commands in the subshell).

And, on a sidenote: Interestingly, one can find similar "lookup problems" all over the place. For instance, any good guide to morse code will show you an alphabetical list of codes (text -> morse code) as well as a morse tree (morse code -> text) :)

I find the scrolling interface strangely satisfying -> useful too, as you can do a full page search via the browser.

Good job!

> . expands to the current directory. > .. expands to parent directory.

I don’t believe this is true. These aren’t expansions, but rather actual objects you can reference that point to cwd and cwd's parent.

You can tell because `echo .` doesn’t expand while `echo ~` does

Thank you for pointing that out. I'll fix that.

I absolutely love this. You have earned a bookmark.

If you ever want to add some useless splash for no reason, can I suggest one of these?


Very nice. I know that it is a bash quick reference, but I was kinda expecting to see an example, at least for each section. Or a different page with a few examples and maybe a simulator. Kinda to see the magic. But it's cool nevertheless.

I did do a bit of experimentation with modal dialogs + some highlight-js for code snippets, but decided to skip it for now and fix up all loose-ends. But it's coming at some point. I'm also considering doing some screenrecordings at some point.

What do you mean by a simulator? I think perhaps that'd prove beyond my skill but the idea sounds interesting.

Second this. I was looking for examples of how to use some of the commands. I was able to easily google it in another tab, but it broke the quick-reference workflow.

Nice. My initial reaction is that the serif fonts are hard to read. Can you try some console or san-serif fonts, or make that configurable? Someone else suggested toggleable themes, so it would go with that.

Configurable fonts is a nice proposal - will try that, thanks!

Your disclaimer modal doesn't fit on mobile causing the viewport to extend outside expected bounds. Otherwise looks nice.

Thank you - fixing the site for mobile devices is on my todo-list and will happen very soon.

    255*  Exit status out of range
I don't know what the asterisk means here, but that doesn't sound right.

I'll fix that, thank you.

I'm just curious, did you construct these tables manually? I mean did you type those html tags manually?

I made a template table which I then added table-rows to by copy-paste and then filling them out.

It was a bit tedious work I must admit.

> Placeholder. TODO [Soon-ish].

Not sure how important it actually is, but your privacy policy link has no information :)

It's private!

cheat.sh is way better method for searching something like


Nice job for a first site! You must have learned a lot about bash while working it :)

This has given me an idea for a cheatsheet generator site. I feel a lot of cheatsheets are pretty similar: section, subheader, and a list of keys + descriptions. Could make this an easy little vue app.

Gotta say thank you for this resource; I'm always using bash for one thing or another, and this will be a helpful site for the future. I've got it bookmarked for just that reason!


really nice, I'm going to use it.

I think there's a mistake in "Access Codes & Permissions", AFAIK (which is not much) the o stands for "others" and now "owner".

Fixed - thank you.

You list the flags, but are you supposed to guess the commands? For example, on the File Testing Operators section, I can't find a single mention that the command is "test"

I like the site! Question, any reason why your internal hyperlinks (<a name>) jump to beneath the header of the section instead of showing the header of the section?

This is a common issue when using links to jump to page headings, when the top bar has fixed positioning: https://stackoverflow.com/questions/4086107/fixed-page-heade...

Ah, and this is why I despise working with CSS/layouting/etc. Thanks!

Fixed - thanks.

If you're running macOS, remember that built-in bash is from 2007 and won't support all the fancy stuff like ${VAR^}.

I'll add a notice about this - thank you for mentioning that.

Love the site, love the favicon - nice work!

Still waiting for your DNS to propogate :)

I reduced the TTL values - thank you for informing. Thought it had propagated, so I increased the values a bit recently.

I really want to check this out, but my eyes hurt reading the page because the contrast of gray on black is so low. A vision-impaired person might not be able to read it at all. Please consider using this tool to pick a text color that provides sufficient contrast: https://snook.ca/technical/colour_contrast/colour.html#fg=90...

Chrome inspector shows the contrast as 5.07 which seems to pass the recommended AA 4.5 threshold.

I tried fiddling with the colors in the inspector, if you increase the contrast you start to get something I would describe as burn-in, after images in vision of the lines of text. Very uncomfortable, I actually prefer it with lower contrast.

Somehow i doubt it's testing the grey on black when it is getting that number. Or if it is, it's probably being thrown off in averaging out the high contrast of the orange on black.

Firefox's accessibility tool doesn't even see most of the text when making its calculation.

Good advice - didn't cross my mind at all. I'm working on some theming and the contrast should be suited for vision-impaired or have an option for this, in about a week or so.

Looks way better with the new text color. Thanks!

Looks great! Can you add a feature to copy the flag/notation/etc when you click on it?

Good idea! - Try checking back in a week or two if you're interested, and I'll properly have it setup by then.

Very nice, thank you - bookmarked!

This looks high-quality. I'll definitely battle-test it.

Also I'm loving the animated favicon.

I think it would be great to indicate POSIX sh compatibility for every item.

Opened the site on my iphone 6S and could not even close the popup.

I'm a big fan of the design / color scheme.

I love it! Good job!

Very useful! thanks for this

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact