Over the past month or so I’ve been slowly working on a redesign and revamp of my CSS3 Click Chart. A whole slew of things have changed. Here’s a summary.
- Two sections to choose from: Common Stuff and Cutting-Edge
- Totally new layout and colors
- A separate domain name
- A GitHub repo
- Ajax calls that could use some optimizing
- Tons of new stuff added, especially in the “cutting-edge” section
- “Polyfills/Tools” and “Tutorials/Articles” sections for each feature
Thanks to Schmíz Péter and Thierry Koblentz who offered some early feedback when I tweeted about it yesterday.
I’m sure there’s lots more that could be improved, added, or modified, (for example, a “find” feature, maybe a way to alphabetize the list, etc.) so feel free to browse around it and if you see anything that could be improved, you can open an issue on Github or post a comment here.
I’d also like to update the data for each feature, so if you have built, written, or know of any tools, polyfills, or tutorials covering any of the features, post a link here or on GitHub and I’ll add it.
Now stop reading this and check out the new CSS3 Click Chart! :)
Looks great! Only two improvements I’d suggest:
1. The ‘common stuff’ and ‘cutting edge’ buttons at the top are not entirely obvious. Maybe tabs would be better as it’s then clearer how that part is meant to function.
2. The auto-size thing is a bit ‘disconcerting’ (for want of a better word) because it keeps changing as you scroll past it. Resizing a textarea on mouseover just feels wrong to me. I would either resize it to the current contents and fix it as that, or just keep it at one size about twice as big as the current default.
Yeah, it did cross my mind that people might not immediately see the two buttons. I think in general though, this is the type of thing that people do spend some time investigating, so I don’t think most people will miss that completely. I suppose I should do some click tracking to see if that’s the case.
And regarding the “autosizing”. Yeah, I considered that. You did notice the link to disable the autosizing right? I should probably hook that up to a cookie or something so return visitors don’t have to keep turning it off. But I definitely don’t want the code box to be too big, so I’ll probably leave the auto-sizing for now.
Thanks for the feedback.
i got the same feeling about the auto sizing.
so i clicked on disable but the result was not what i suspected (just a small view instead of a fixed full view).
so my idea: 3 states: auto, small and full view of the code. and the cookie functionality of course ;-)
by the way: why do you use a textarea for this?
the project apart from that small issue is very cool, thx!
Hey, klaus. Thanks for the feedback. I’ll see what I can do to improve it without cluttering the functionality and UI too much.
I use a textarea because I want people to be able to click in there and select *only* that text. It’s kind of like an iframe in that sense, because if you do a “select all” (with ctrl-a, for example, on windows) inside of that box, it will only select that text.
On the other hand, if I was just to use a regular div or something, the selection would go outside of that unless you manually controlled it. I just want it to be easy to select only the code and I thought a textarea was the easiest way to accomplish that.
Yes I noticed the auto-size disable link. I think part of the ‘disconcerting’ nature that I didn’t explain before is that when the textarea is small, it has a scroll bar. Then I go to mouseover and scroll through the textarea but it’s expanded and I scroll down the page instead.
I would expect similar to klaus. By default, have the textarea small if you like. Then the link would turn *on* auto sizing, which would set the textarea height to the height of the content (i.e. as whenever the content changes, not when I mouseover).
Wow. Great resource. I hardly use most of these at this point (lack of support, but getting better by the day) so having this as a quick reference is great. Thanks.
Something that could be added: a section for mobile browser support.
Thanks for the reminder. I had originally intended to add that in the support section, then decided I would do a mini tabbed area where people could switch between desktop vs. mobile.
I may still eventually do that, but I may not have time right away. I’ll open a new issue on GitHub and go from there. Thanks again.
Hi Lazaris,
It’s a great work!!! Thumbs up!!! ;-)
If it is editable, it could be greater.
Greetz!
Hi Chris, That is basic IE brwsoer behavior. Your IE settings may be such that you are prompted whenever ActiveX object are about to be created. You can goto Tools>Internet Options, Security tab, click “Reset all zones to default”This will stop most sites you visit from prompting for permission. It may still occur on web sites that are in your Restricted Web sites zone (ie Bad sites that you (or your anti-virus program) do not trust, so take head of the warnings and only install active X controls from web sites you trust.1. Make sure your IE Status bar is visible (View>Status Bar menu)2. When you navigate to a web site you will see which security zone it is in by an Icon that appears on the Status bar.I hope this helps!
Very very nice. Perhaps combine the two lists into one alphabetical list. Also consider a layout that doesn’t require the user to constantly scroll up and down. Great work!