Catching Frontend UI Design Tricks with SnappySnippet
You can find the original article on SitePoint:
Last Monday night, I re-watched the movie ‘E.T. The Extra-Terrestrial‘ for the first time since I was a lad. While I may be wearing ‘kid-colored glasses’, I thought it was great. Steven Spielberg gets a boatload of story out of a few skinny kids and what is a fairly clunky puppet.
One scene that did stand out for me was the frog biology scene. Elliot — the 11-year-old central character — and his fellow classmates are each given a live frog which they are expected to chloroform and dissect.
Elliot decides he can’t dissect his frog and inspires a mass frog jailbreak from the science class. I suspect 11-year-old Alex may have felt the same. It seems like a waste of perfectly good frogs.
Dissecting UI Design with SnappySnippet
However, when it comes to the web, I love pulling the legs off things to see how they work. There’s no better way of understanding how front-end design, animation, and SVG work than digging under the skin and getting your hands dirty. Recently I’ve been using a new tool to help me.
SnappySnippet is a Chrome Dev Tools extension designed to help you extract UI elements out of a site and set them up in your favorite code playground.
After installing SnappySnippet, you’ll find a new tab in Chrome Dev Tools panel. (see below).
How Does it Work?
- When you find a section of UI on a webpage that interests you, right-click on it, and launch the Chrome Inspector.
- Click around in the source view panel to make sure you have selected all the UI elements you want to extract.
3. Next, Switch to the ‘SnappySnippet’ panel and press the ‘Create snippet from Inspected element’ button. Seconds later, you should see light gray HTML and CSS load into the panels under the button.
4. Finally, choose between Codepen, jsFiddle and JS Bin as the destination for your code snippet.
That’s all there is to it.
So, is this perfect, production-ready code?
It’s unlikely. SnappySnippet seems to spider through the DOM looking for links and does its best to recompile fresh, new CSS classes for your selected HTML. It’s not perfect and it can’t compile styles residing in JavaScript.
Nevertheless, I’ve found it usually gets most of the important stuff — certainly enough to get your investigations started.
Final word
Obviously, the idea isn’t to simply rip-off someone else’s hard work. That’s just lazy and copy and pasting code that you don’t understand gets you into more trouble than it’s worth.
But it’s also a safe bet that almost all the great frontend/UI coder-designers have learned much of their craft from ‘dissecting web frogs’.
SnappySnippet is a pretty handy scalpel.
