Sarah made these incredibly handy interactive code reference… thingers.
The idea is perfect. I’m in this position regularly. I know what I have (i.e. an array or an object). I know what I want to do with it (i.e. get an array of all the keys in my object). But I forget the actual method name. These thingers guide you to the right method by letting you tell it what you got and what you wanna do.
Array Explorer
See the Pen Array Explorer by Sarah Drasner (@sdras) on CodePen.
Object Explorer
See the Pen Object Explorer by Sarah Drasner (@sdras) on CodePen.
This is actually really useful. Thank you.
I think this is a really neat tool. Thanks for sharing this.
One suggestion, get rid of the fancy animation, and use a more toned down effect. I get the need to notify the user that something has changed, which is a good use for animation, but I found myself waiting for the animation, which makes using this tool aggravating.
Wow . . . are those 2 seconds (less, even!) really THAT important? I’m trying to picture someone sitting there frustrated waiting for that code to type out and . . . yeah, I can’t even. Pickers of nits . . .
Yes, they are. And if user experience weren’t important, software giants (an many, many others) would not have guidelines on the very minute differences in animation that affect users experiences.
This is absolutely brilliant!
The animations and layout are beautifully simple and clean,
for a very straightforward and engaging action.
Thank you, Sarah, for taking the time to create something
that will help the many, many developers and creatives that are entering the community.