Thanks for making - it's so much more helpful than the over-9000 line bootstrap docs I am always using CTRL+F and trying to remember the name of elements on. Now I can just jump to the "card" section and scroll through everything really quickly to visually find it. Great job, will be using this.
But why, why, why, whyyyyyyy are you hijacking my back button, you evil person... please remove historystate, it's unnecessary for this site. Also, can you make the right/left arrow keys toggle between items in the preview box?
The user isn't changing page, so you definitely shouldn't be using pushState. If you want to update the address bar, use replaceState. After clicking a few of them I certainly didn't expect to have to click back to cycle through them just to get back to HN.
Agreed, when I hit back once or twice I was like crap. (I had just scrolled through every one.) So I just opened a new tab to HN, and closed that tab. Poor tab.
We are on the same page(no pun) that back button should take you back to HN, but if you are on chrome, clicking and holding the back button (browser's) shows you the list of tabs and you can choose the tab from there.
I wouldn't be so quick to remove the pushState - people here are mostly complaining that they want to get back to hacker news. But I can see that people (I) would normally use this site as a reference. And being able to explore different options and then use keyboard navigation to go back / forward isn't that bad. You could have used different 'pages' for the content but you chose to make the UX really quick and light, but that doesn't mean we should lose back / forward nav.
But if you've got some other keyboard navigation to go back / forward then maybe it wouldn't be so much of a loss...
Great site, it's what the official docs should be.
The pushState is good it just needs to be fixed, after clicking around a few times the back button didn't go back properly, I had a bunch of states that were the same anchor/section?
If replaceState was used when interacting with a section and push/pop state was used when changing states/going back then it should only take a few backs to get back to where you were.
I understand the rationale for doing it either way, but fwiw I prefer changing it so every card flips does not wind up in history. I think it has to do with the notion of "flipping" through the cards -- you're often just navigating through them to reach your desired goal, not reading them one by one as part of a linear narrative.
(I'm on my phone though so it's possible there's some alternate navigation on widescreen layouts that I'm not seeing).
I think the ability to copy/paste a URL to show exactly the state I'm looking at (I.E. #dropdown to see the dropdown.) Is great! But, after I scroll through a dozen, I want to hit back to go back to HN.
It both makes sense and is counter-intuitive to me at the same time. I see why you did it, and I see why some people would like it that way- however when I hit the back button I'm trying to leave the page, so it feels like I'm being held hostage.
I assure you I'm not trying to hold you hostage. I just thought it would be more useful this way. Guess I'll change it soon, given the feedback I'm receiving.
I'm the original one that complained - and now that I used it as a bookmark reference (instead of being linked from HN) I do see the benefit of the back button. Maybe only have back button navigation if there is no existing history. That way, links to the tool don't hijack existing history items.
With replaceState you can change the URL without adding an entry to the back button list. So you can have a back button that takes you back to HN and a bookmark reference.
The way it works now is quite useful. However, if I have a popup open, then dismiss it, the URL does not change back to having no fragment. I wish it did that.
For example, if I open two class popups, then hit the back button twice, I'd expect to end up on the overview page with no popup open, but what actually happens is the last popup stays up even while the URL changes.
The other case is, if I have a popup open, then close it, I'd expect the URL to change to having no fragment to reflect that, but instead the old fragment sticks, so a reload would actually show the last popup you had open.
These are obviously minor things and I like the project, so I hope not to come across too nitpicky.
People are complaining a lot about it because they're just visiting it to explore before coming back to HN to comment. When people are actually using the page as a reference, it's much less likely that they'll want to go back to another website in the same tab.
Exactly this. Please don't change the behaviour, it's working exactly as it should. People seem to forget how this page would work had it been implemented with an ancient frameset (navigation in one frame, content in another).
Also, does nobody know that in pretty much any browser, you can hold down the back button to get a history list so you can jump back multiple pages in one step? Or the "History" menu.
I don't mind the back button behavior personally. This is intended mainly as a reference that you keep in your bookmarks, so you wouldn't have a previous page to go to in most cases. I can see how being able to move back/forward in history between 2 items would be useful.
I think the back button should function like clicking the X and closing the modal. Otherwise the modal stays there, I click a second time and now I'm not on your site anymore.
You can solve the back-button issue with a little better UX design.
Don't change the url when people are clicking on the urls, but have a share icon for each element that is placed in the modal that pops up when clicking on it.
In this way, url stays the same while people are checking the elements, and you can still have specific urls for each element for people to point to a specific demo if they want.
I did a day course on UX, so call me an expert or not, but the general gist of UX is to listen to users. Since most users seem happier with updating the address but not adding to the back history, I would guess this is the best UX for the target audience of software developers.
Thanks for your suggestion. I've considered adding a search/filter box, but I've decided that people can use Ctrl+f/Ctrl+g (assuming Chrome) in order to find items.
I might add it in the future though. It would be a nice feature really.
This is pretty cool, great job!
I know this is only a cheatsheet, which implies simple, but one idea that I think might be useful would be to add something to allow an end-user to resize the preview pane. This would allow more complete "previewing" of responsive items, eg. "navbar-toggleable-*" which collapses the a navbar down to a hamburger when the width is small.
But why, why, why, whyyyyyyy are you hijacking my back button, you evil person... please remove historystate, it's unnecessary for this site. Also, can you make the right/left arrow keys toggle between items in the preview box?