Use Fixie.js for Dummies Content, so Good

Sobat pernah mencoba layanan jasa penyedia dummies content? Seperti berikut contoh yang gue maksudkan random image by PlaceHold.It & placeholder image by Lorempixum. Para developer biasa menggunakannya untuk mengisi demo-demo (dummies content). Misalkan isi paragrap selalu terisi dengan text bergaya lorem ipsum. Pokoknya isi dari sebuah demo diisi dengan konten yang dianggap nyeleneh gitoh :d
Singkatan² dan istilah² tidak jarang kita selalu menemuinya juga, ex WTF, blah-bleh-bloh, etc.
Ada berapa macam coba variabel standar HTML? Banyak pasti, namun ada beberapa yg pokok. Contoh: <p></p>, <ul></ul>, <h1></h1> - <h6></h6>, <img></img> dll.
Pertanyaannya begini sekarang...
Bagaimana penulisan syntax standard HTML dapat berubah menjadi isi untuk dummies konten (baca dan pelajari) :) Misalkan kita mengetikan syntax h1 begini<h1 class="WTF"></h1>tanpa isi apapun disana, nanti akan muncul dengan sendirinya isi title disana. Istimewanya lagi, itu akan secara random bergantian seiring kita melakukan refresh b-) Buka halaman demo biar jelas, dan lakukan pencet tombol keyboard (F5), perhatikan isi konten!

http://ryhan.me/fixie/sample.html

Kenapa bisa begitu! Itu bukan sihir, melainkan kreasi JavaScript Fixie.js kreasi master Ryhan Hassan @ryhanhassan
Download dan keterangan bisa sobat baca fixie.js on GitHub. Karena unik dan full stylish, kalian bisa lihat demonya pada blog keren aku Demo Fixie.js Di Blogger. Coba di Ctrl + U, apakah saya mengetikan kata-kata, membuat image dengan manual! Hohohoho...tentu capek :p

Koben sudah melakukan perubahan sedikit pada script fixie.js. Pemanggilan syntax <img/> gue pilih dari web http://lorempixum.com/

Fixie.js

<script type='text/javascript'>
/* 
* Fixie.js
* by Ryhan Hassan
* ryhanh@me.com
*
* http://ryhan.me/fixie/
*/ 
//<![CDATA[
var fixie = (
function () {

var selector;
var imagePlaceHolder = "http://placehold.it/${w}x${h}";

if (typeof window.getElementsByClassName != 'function') {
document.getElementsByClassName = function (cl) {
var retnode = [];
var myclass = new RegExp('\\b' + cl + '\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
}

function fixie_handler(element) {
if (!/^\s*$/.test(element.innerHTML)){
var childs = element.children;
if(childs.length){
for(var fixie_i = 0; fixie_i < childs.length; fixie_i++){
fixie_handler(childs[fixie_i]);
}
}
return;
}
switch (element.nodeName.toLowerCase()) {
case 'b':
case 'em':
case 'strong':
case 'button':
case 'th':
case 'td':
case 'title':
case 'tr':
element.innerHTML = fixie_fetchWord();
break;

case 'header':
case 'cite':
case 'caption':
case 'mark':
case 'q':
case 's':
case 'u':
case 'small':
case 'span':
case 'code':
case 'pre':
case 'li':
case 'dt':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
element.innerHTML = fixie_fetchPhrase();
break;

case 'footer':
case 'aside':
case 'summary':
case 'blockquote':
case 'p':
element.innerHTML = fixie_fetchParagraph();
break;

case 'article':
case 'section':
element.innerHTML = fixie_fetchParagraphs()
break;

/* Special cases */
case 'a':
element.href = "HTTP://YOUR-LINK-HERE/";
element.innerHTML = "www." + fixie_fetchWord() + fixie_capitalize(fixie_fetchWord()) + ".com";
break;

case 'img':
var src = element.getAttribute('src') || element.src;
var temp = element.getAttribute('fixie-temp-img');
if(src == "" || src == null || temp == true || temp == "true"){
var width = element.getAttribute('width') || element.width || (element.width = 250);
var height = element.getAttribute('height') || element.height || (element.height = 150);
element.src = imagePlaceHolder.replace('${w}', width).replace('${h}', height);
element.setAttribute('fixie-temp-img', true);
}
break;

case 'ol':
case 'ul':
element.innerHTML = fixie_fetchList();
break;

default:
element.innerHTML = fixie_fetchSentence();
}
}

// Handle an array of elements
function fixie_handle_elements(elements){
for (var i = 0; i < elements.length; i++) {
fixie_handler(elements[i]);
}
}


// Begin generator
var fixie_wordlibrary = ["I", "8-bit", "ethical", "reprehenderit", "delectus", "non", "latte", "fixie", "mollit", "authentic", "1982", "moon", "helvetica", "dreamcatcher", "esse", "vinyl", "nulla", "Carles", "bushwick", "bronson", "clothesline", "fin", "frado", "jug", "kale", "organic", "local", "fresh", "tassel", "liberal", "art", "the", "of", "bennie", "chowder", "daisy", "gluten", "hog", "capitalism", "is", "vegan", "ut", "farm-to-table", "etsy", "incididunt", "sunt", "twee", "yr", "before", "gentrify", "whatever", "wes", "Anderson", "chillwave", "dubstep", "sriracha", "voluptate", "pour-over", "esse", "trust-fund", "Pinterest", "Instagram", "DSLR", "vintage", "dumpster", "totally", "selvage", "gluten-free", "brooklyn", "placeat", "delectus", "sint", "magna", "brony", "pony", "party", "beer", "shot", "narwhal", "salvia", "letterpress", "art", "party", "street-art", "seitan", "anime", "wayfarers", "non-ethical", "viral", "iphone", "anim", "polaroid", "gastropub", "city", 'classy', 'original', 'brew']

function fixie_capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

function fixie_fetchWord() {
return fixie_wordlibrary[constrain(0, fixie_wordlibrary.length - 1 )];
}

function constrain(min, max){
return Math.round(Math.random() * (max - min) + min)
}

function fixie_fetch(min, max, func){
var fixie_length = constrain(min, max) ;
var result = [];
for (var fixie_i = 0; fixie_i < fixie_length ; fixie_i++) {
result.push(func());
}
return fixie_capitalize(result.join(' '));
}

function fixie_fetchPhrase() {
return fixie_fetch(3, 5, fixie_fetchWord);
}

function fixie_fetchSentence() {
return fixie_fetch(4, 9, fixie_fetchWord) + '.';
}

function fixie_fetchParagraph() {
return fixie_fetch(3, 7, fixie_fetchSentence);
}

function fixie_fetchParagraphs() {
var fixie_length = constrain(3, 7);
var fixie_str = "";
for (var fixie_i = 0; fixie_i < fixie_length - 1; fixie_i++) {
fixie_str += "<p>" + fixie_fetchParagraph() + "</p>";
}
return fixie_str;
}

function fixie_fetchList() {
var i, n = Math.random() * 4 + 4, list = [];
for(i = 0; i < n; i++) {
list.push(fixie_fetchPhrase());
}
return '<li>' + list.join('</li><li>') + '</li>';
}

// Handle all elements with class 'fixie'
fixie_handle_elements(document.getElementsByClassName('fixie'));

// Handle elements which match give css selectors


function init_str(selector_str) {
if (!document.querySelectorAll) {
return false;
}
try {
fixie_handle_elements(document.querySelectorAll(selector_str));
return true;
} 
catch (err) {
return false;
}
}

return {
/* returns true if successful, false otherwise */
'init': function() {
if (selector) {
init_str(selector);
} else {
fixie_handle_elements(document.getElementsByClassName('fixie'));
}
},
'setImagePlaceholder': function(pl) {
imagePlaceHolder = pl;
return this;
},
'setSelector': function(sl){
if (typeof sl === "object") {
selector = sl.join(",");
} else if (sl){
selector = sl;
} 
return this;
}
};

})();

// Changes default image source to Flickr
fixie.setImagePlaceholder('http://lorempixum.com/${w}/${h}/').init();
//]]>
</script>

Simpan script tepat diatas tag </body>
Hal yang perlu dilakukan:

Selalu pakek atribut class="fixie" dalam pemakaian.
HTTP://YOUR-LINK-HERE/

Begitulah sodara-sodara. Good luck :)
http://jsfiddle.net/bgrins/TJL4G/
Happy fixie \m/