Informasi keren bagi kalian blogger penggemar playground for the front end side of the web! Berita datang dari
CodePen dimana sekarang kita dapat membuat
Prepopulated Pen. Fitur baru CodePen yang memungkinkan kita untuk dengan mudah dan dinamis membuat pen baru dengan kode yang diinginkan sebagai titik awal. Singkat cerita, kita dapat melakukan penulisan kode pada area postingan dan seketika itu dapat terlihat hasil generate dari kode tersebut dengan terhubung ke playgorund codepen! Begitu kira-kira ;))
Untuk dapat merasakan fitur itu, ada beberapa langkah aturan main yang mesti di lakukan. Perhatikan demo...pencet tombol CodePen di bagian bawah?
<div>
<p>An Anonymous Pen HTML</p>
</div>
div {
background: #323232;
height: auto;
padding: 10px;
}
p {
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
}
Berikut skema penulisan.
<pre class="codepen-able" data-type="html"><code>
--------- KODE HTML HERE ---------
</code></pre>
<pre class="codepen-able" data-type="css"><code>
--------- KODE CSS HERE ---------
</code></pre>
<pre class="codepen-able" data-type="js"><code>
--------- SCRIPT ADD HERE ---------
</code></pre>
<form action="http://codepen.io/pen/define" method="POST" target="_blank">
<input id="data-input" type="hidden" name="data" value="" />
<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" value="Create Pen" class="codepen-mover-button" />
</form>JavaScript yg musti di add.
<script type='text/javascript'>
//<![CDATA[
// Replace Quotes and Set Object as String Function
var setDataString = function (data){
var string = JSON.stringify(data);
string = string.replace(/"/g, """);
string = string.replace(/'/g, "'");
return string;
};
// Codepen Object
var data = {
title : "",
description : "",
html : "",
html_pre_processor : "none",
css : "",
css_pre_processor : "scss",
css_starter : "neither",
css_prefix_free : false,
js : "",
js_pre_processor : "none",
js_modernizr : false,
js_library : "",
html_classes : "",
css_external : "",
js_external : ""
};
// Get All Pre Tags
var preElement = document.getElementsByClassName('codepen-able');
// Loop Through Pre Tags
for (var i = 0, len = preElement.length; i < len; i++){
// data-type on pre tag.
// we can use the data-type returned to populate codepen object.
var type = preElement[i].getAttribute('data-type');
// CodeInside Code Tags
var codeInside = preElement[i].firstChild.innerHTML;
// Set Content inside set the data value
if (codeInside.length > 0){
// Normally you access a property like this object.property
// But when the property name is from a variable
// You need [] Brackets instead of the .
// data[type] = codeInside
// ======================
// data.html = codeInside
// data.css = codeInside
// data.js = codeInside
data[type] = codeInside;
}
}
// Replace Quotes and Set Object as String
var dataString = setDataString(data);
// Get Input and Append Data String
var data_input = document.getElementById('data-input');
data_input.value = dataString;
//]]>
</script>
Hal-hal yang harus diperhatikan!
- Bumbu di atas hanya berlaku untuk satu kali pemanggilan penulisan kode.
- Pada bagian <pre class="codepen-able" data-type="html"><code> harus dilakukan phrase terlebih dahulu.
- Customize JavaScript sesuai dengan kebutuhan pada sesi var data
- Letakan JavaScript coba dulu sebelum tagging </body> kalau tidak jalan sebelum tagging </head>
Jika sobat ingin menuliskan sekaligus beberapa penulisan kode, maka pada kasus ini berlaku aturan dari brandonbrule :D
Planing HTML<section class="codepen-group">
<pre class="codepen-able" data-type="html"><code>
--------- KODE HTML HERE ---------
</code>
</pre>
<pre class="codepen-able" data-type="css"><code>
--------- KODE CSS HERE ---------
</code></pre>
<pre class="codepen-able" data-type="js"><code>
--------- SCRIPT ADD HERE ---------
</code></pre>
</section>Script yg harus di add.
<script src='http://brandonbrule.github.io/itsa/js/itsa.js'></script>
<script>
//<![CDATA[
// PostToCodepen
var PostToCodepen = (function () {
var codepen_group = document.getElementsByClassName('codepen-group')
var codepens;
var codepen;
var type;
var codeElement;
var codeInside;
var JSONstring;
// Create the Codepen Button For Each Group
var createForm = function (container){
var form = document.createElement('form');
var data_input = document.createElement('input');
var data_submit = document.createElement('input');
var frag = document.createDocumentFragment();
//form
form.setAttribute('action', 'http://codepen.io/pen/define');
form.setAttribute('method', 'POST');
form.setAttribute('target', '_blank');
// data input
data_input.setAttribute('type', 'hidden');
data_input.setAttribute('name', 'data');
data_input.setAttribute('value', JSONstring);
form.appendChild(data_input);
// Submit Button
data_submit.setAttribute('type','image');
data_submit.setAttribute('src','http://s.cdpn.io/3/cp-arrow-right.svg');
data_submit.setAttribute('width','40');
data_submit.setAttribute('height','40');
data_submit.setAttribute('value','Create Pen');
data_submit.setAttribute('class','codepen-mover-button');
form.appendChild(data_submit);
frag.appendChild(form);
container.appendChild(frag);
};
// Replace Quotes and Return object as string.
var setDataString = function (data){
var string = JSON.stringify(data);
string = string.replace(/"/g, """);
string = string.replace(/'/g, "'");
return string;
};
// Initializer
var please = function () {
// For each codegroup
for ( i = 0, len = codepen_group.length; i < len; i++ ){
// This data gets submitted to codepen to get processed into a pen
// We populate css, js, and html properties with the content inside the pre tags
// With the data-type attribute
var data = {
title : "",
description : "",
html : "",
html_pre_processor : "none",
css : "",
css_pre_processor : "scss",
css_starter : "neither",
css_prefix_free : false,
js : "",
js_pre_processor : "none",
js_modernizr : false,
js_library : "",
html_classes : "",
css_external : "",
js_external : "http://brandonbrule.github.io/itsa/js/itsa.js"
};
// The pre elements inside each of the groups
codepens = codepen_group[i].getElementsByClassName('codepen-able');
for (var j = 0, lenth = codepens.length; j < lenth; j++){
// Pre Tag
codepen = codepens[j];
// Get type to add to data object (js, css, html)
type = codepen.getAttribute('data-type');
// The codeinside each element
codeElement = codepen.firstChild;
codeInside = codeElement.innerHTML;
// Set Data if there's content
if (codeInside.length > 0){
data[type] = codeInside;
}
}
// Turn Data into Safe String
JSONstring = setDataString(data);
// Create Submit to Codepen Button
// Append Button to each group
createForm(codepen_group[i]);
}
};
return {
please: please
};
})();
// Start It All
PostToCodepen.please();
//]]>
</script>
Semua itu masih dalam perkembangan. Tidak kesabaran, silahkan pasang pada blog kalian :) Untuk lebih jelas silahkan kunjungi...Source:
codepen.io/brandonbrule/blog/creating-a-prepoluated-penHappy codepen \m/
2. Click button the Add a Gadget.
3. Click on More Gadgets.
4. Choose the Contact Form Gadget.
5. Save it.
Perhatikan panah pada screenshot. Itulah links mobile yg diperpendek penulisannya. Bisa dibayangkan bila kita melakukan customize, dan meng-add links lain. Kemudian kalian beginikan 
