Copy Codes from Websites Easily with SnappySnippet
As a web developer, we may occasionally find some inspiring elements on a website that makes you wonder how did they build that thing. Then, you’d think about getting a copy of that code. Chrome Devtools as well as Firebug of Firefox has actually shipped with the feature that makes it easy for us to copy HTML and CSS off a website.
However, these tools work to copy only HTML or CSS; you can’t use these tools to copy the CSS related to the HTML element you selected. For example, let’s say you are selecting an HTML element containing a couple of child elements, as follows.
<div class="container"> <button>Submit</button> <p><span>By submitting you are agree to our term and condition</span></p> </div>
Each of the element therein has their own specific style rules residing in the stylesheet. Some HTML elements may have inherited a couple of style rules that would make copying both the HTML and CSS together tricky. Here’s where you would love a tool like SnappySnippets.
Recommended Reading: 40 Useful Google Chrome Extensions For Web Designers
SnappySnippet is a Chrome extension (get it here), that once installed, will give you a new tab named SnappySnippet within Google Chrome DevTools. This is where we will operate SnappySnippet.
To test it out, we have prepared a web page containing a couple of HTML elements forming a very nice simple web login form. Each of these HTML elements inherit CSS codes. To copy all these codes in a traditional way using the normal functionality from the browser DevTools, is going to take a bit of work.
With SnappySnippet though, everything is much simpler.
First, select which element you want to copy, then open the SnappySnippet tab and click the Create a snippet from inspected element button.
As you can see in the screenshot below, the element that we selected is copied incuding the child elements and placed within the HTML pane in the left hand side. All the style rules that shape those HTML elements are also copied and placed within the CSS pane.
SnappySnippet allows us to set the code output. Under the two panes that is used for placing the HTML and CSS, you will find the Settings panel. You can set several things, such as removing the CSS property with the
-webkit- prefix from the output, inserting prefix for the ID given to the HTML elements, and so forth.
Web developers may be familiar with a code-sharing platform like Codepen. This websites allow web developers to share pieces of working code snippets. It is like a social network site but instead of sharing statuses and selfies, we share codes. With SnappySnippet, you can send the codes that you have copied to Codepen, JSFiddle, and JSBin.
To send the code, make sure that you have logged in to the respective website where you are going to send your codes. This is also to ensure that the codes will immediately be saved into your acccount. Then just click one of these three share buttons.
The codes that you copy will return exactly like what you see on the website.
SnappySnippet is a very handy tool for copying codes but remember to not use this as a means for plagiarizing other developer’s codes. Whatever copying you do, aim for a learning purpose, with the hope to learn something new from the techniques used. Blatant copying is not condoned, whether it is copyright-protected or not. Do use this tool well.