Prototyping animations and interactions is vital for a number of reasons: they can make your interface feel deceptively fast, they can help focus the user on a specific task, and they can provide a better sense of the current state of your application. Is data being loaded? Is something now unclickable? How long do they have to wait until they can perform an action?
The most fun year-end list there is, if you ask me.
I could probably list about 100 reasons, since as a founder, user, and (ahem) PRO member of CodePen myself, I'm motivated to do so. But let me just list a few here. Some of these are my favorites, some are what PRO members have told us are their favorite, and some are lesser-known but very awesome.
The 100 most hearted Pens, Posts, and Collections on CodePen from the past year have been calculated and posted!
- Have an all-new design that allows for a split-view (code on the left, preview on the right) when the responsive design allows.
- Can be editable.
Along with all the same great features they have always had like themes (total design control! change all your embeds at once!) and optional click-to-play (for increased performance).
Here's how most people use Google Analytics: you copy and paste the default tracking snippet into your templates. Look at the pageview data that comes in. That's all good, but that isn't the most useful analytics for many sites. Google Analytics can track just about anything. It's very flexible and very powerful. Philip Walton and I co-wrote this article to show you how to do some custom GA stuff to help you collect data you maybe didn't know you could collect and how you can look at that data in useful ways.
The original title of this post was "Seriously, Just Make a JSFiddle". It was written before I beame the co-founder of CodePen. It's no secret or surprise that CodePen was inspired by apps like JSFiddle and JSBin. It's my job to point you to CodePen and my opinion that it's a good choice for you.
- Find out it was a mistake you made, help you isolate it, and fix it (or have a great test page for asking for help)
- Discover a true bug, and arm you with the perfect demo to present to the people responsible.
Reduced test cases are the absolute, no doubt about it, number one way to troubleshoot bugs. In fact, some people contribute to open source projects simply by turning bug reports into reduced test cases for more experienced developers to explore. Here is how you might get started creating one from your problems...