Instead of telling everyone about my “Top 10 Favorite CodePen Demos” I’d like to take this time to admire interactive tools that provide great use in our daily work and education. Sure I’m dazzled by the shiny’s, but it’s time to talk about the tools that help us learn and aid in the betterment of authors on the Web.
Clippy
Clippy lets you see what types of polygon shapes occur when particular values are passed to the clip-path property in CSS. Super handy if you wanna grok what the hell happens when values are changed or desire a tool that can help build clip path shapes; Clippy has the power to do both.
Live Demo : http://bennettfeely.com/clippy
Box-Sizing
The name speaks for itself. What better tool could be out there than one that helps you understand this whole box model thing and why it really stinks to learn initially. A tool like this really helps with visual exploration, but be warned this isn’t only great for beginners; novices and experts can benefit too. The box model does kind of stink to wrap your head around at times.
Live Demo : http://codepen.io/carolineartz/pen/ogVXZj
SVG Coordinate Systems
Confused by the SVG viewBox attribute? No shit! So is every other Web developer on Earth. The good news is that you’re in luck because Sara made a wonderful interactive tool to help understand why viewBox works the way it does. This is also really handy if you’re dying to make responsive icons or infographics with SVG. See Sarah Drasner for questions and answers on that front.
Live Demo : http://sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html
Colorable
Are you making terrible choices when it comes to readable text that incorporates decent contrast ratios meeting A11Y standards? Well, don’t worry if you have no clue what I just said because if you don’t quite grok the ratios used for color contrast let colorable demonstrate that. Experience bad contrast by adjusting colors into terrible conditions and visualize exactly how difficult reading situations can become when contrast isn’t given proper attention.
Live Demo : http://jxnblk.com/colorable/demos/text
Cubic Bézier
What can I say, everything that Lea Verou makes is terrible right? Of course not! I’m kidding. I love this tool not only because it’s highly interactive and amusing, but it also helped me a great deal when I was starting to become comfortable using cubic bézier eases. A real pleaser due to the visual nature of eases in general and really the only way to get a “feel” for how an ease “feels.”
Live Demo : http://cubic-bezier.com
Thanks! Very useful for web developers. 🙂