Generate HTML Snippets to Live Code use X-ray HTML

Aa Koben menemukan 1 halaman menarik kumpulan code di www.filamentgroup.com/code. Selain itu juga link dengan tag lab (Articles in title) keren-keren, don't miss that dibaca :P Saya akan mengambil satu tutorial dari sana dengan judul X-rayHTML (Generate HTML snippets from live code for documentation) Source & demo github.com/filamentgroup/X-rayHTML
Penjelasan singkat versi GUE begini bro...
X-rayHTML adalah script jQuery plugin untuk membangun halaman kode dokumentasi kecil dari potongan HTML. Membuat dokumen dengan live code live preview dengan gaya (CSS) FLIP Animation. Tampak depan akan terlihat demo dari potongon kode HTML, dan tampak belakang adalah source code (kodenya) Gue harap elo pada mengerti dah ;;)

In your page:<script src="jquery.js"></script>
<script src="X-rayHTML.min.js"></script>

/*
* View Source
* Generates copy/pastable markup from actual rendered markup.
*
* Copyright (c) 2012 Filament Group, Inc.
* Licensed under the MIT, GPL licenses.
*/
!function(e){var t="xrayhtml",n={text:{open:"View Source",close:"View Demo"},classes:{button:"btn btn-small",open:"view-source",sourcepanel:"source-panel"},initSelector:"[data-"+t+"]",defaultReveal:"inline"},a={_create:function(){return e(this).each(function(){var n=e(this).data("init."+t);return n?!1:void e(this).data("init."+t,!0)[t]("_init").trigger("create."+t)})},_init:function(){var a=e(this).data(t)||n.defaultReveal;"flip"===a&&e(this)[t]("_createButton"),e(this).addClass(t+" method-"+a)[t]("_createSource")},_createButton:function(){var t=document.createElement("a"),a=document.createTextNode(n.text.open),i=e(this);t.setAttribute("class",n.classes.button),t.href="#",t.appendChild(a),e(t).bind("click",function(e){var a=i.attr("class").indexOf(n.classes.open)>-1;i[a?"removeClass":"addClass"](n.classes.open),t.innerHTML=a?n.text.open:n.text.close,e.preventDefault()}).insertBefore(i)},_createSource:function(){var t=this,a=document.createElement("pre"),i=document.createElement("code"),c=document.createElement("div"),r=document.createElement("div"),s=t.innerHTML,o=document.createTextNode(s);c.setAttribute("class","snippet"),e(t).wrapInner(c),i.appendChild(o),a.appendChild(i),r.setAttribute("class",n.classes.sourcepanel),r.appendChild(a),this.appendChild(r)}};e.fn[t]=function(n,a,i,c){return this.each(function(){return n&&"string"==typeof n?e.fn[t].prototype[n].call(this,a,i,c):e(this).data(t+"data")?e(this):(e(this).data(t+"active",!0),void e.fn[t].prototype._create.call(this))})},e.extend(e.fn[t].prototype,a),e(function(){e(n.initSelector)[t]()})}(jQuery);

andX-rayHTML.css

.xrayhtml {
position: relative !important;
margin: 10px 0;
}
.source {
position: relative;
}
.source-panel {
tab-size: 3;
}
.source-panel pre {
margin: 0;
background: #fefefe;
}
.source-panel code {
white-space: pre-wrap;
}

/* Flip Animation */

.method-flip {
-webkit-perspective: 2500px;
-moz-perspective: 2500px;
perspective: 2500px;
}
.method-flip .snippet {
padding: 0;
margin: 0;
position: relative;
top: 0;
left: 0;
z-index: 2;
}
.method-flip .source-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
overflow: auto;
}
.method-flip .snippet {
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform .4s ease-in-out;
-moz-transform: rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-moz-transition: -moz-transform .4s ease-in-out;
}
.method-flip.view-source .snippet {
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.method-flip .source-panel {
-webkit-transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-moz-transition: all .4s ease-in-out;
}
.method-flip.view-source .source-panel {
z-index: 2;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}

/* Button */

.btn {
background-color: #fefefe;
background-image: -webkit-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
background-image: -moz-linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
border: 1px solid #ccc;
border-radius: .4em;
color: #308bd3;
cursor: pointer;
display: block;
font: bold 14px/1 sans-serif;
padding: .6em 0 .5em 0;
position: relative;
text-align: center;
text-transform: capitalize;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-small {
display: block;
font-size: .8em;
padding: 9px 0;
margin: .6em 0;
width: 125px;
}

Pasangkan kedua bumbu tersebut ke dalam template.
Planning HTML<div data-xrayhtml="flip">

------------ Kode Potongan HTML ------------

</div>

NB:
Pada script X-rayHTML.min.js perhatikan baris kode berikut

classes: {
 button: "btn btn-small",
 open: "view-source",
 sourcepanel: "source-panel"
},

Fokus ke btn btn-small Setahu saya unik id tersebut sama dengan kode CSS bootstrap, atau bisa jadi sama dengan kode button kepunyaan sobat? Jadi jika dirasakan sama dengan hal itu, gantikan saja agar tidak bentrok ;)
Kalau mau lebih full stylish sobat bisa datangi web source dimana X-rayHTML dikombinasikan dengan script Prism.js and ZeroClipboard!

Happy X-Ray \m/

Selection Good Resources February 2015

Artikel ringan AA Koben mau berbagi resources pilihan dari Coder's Block Blog. Mau membaca dari awal, bisa langsung di satroni codersblock.com/blog Berawal dari postingan dengan judul crazy meta CSS hack, trik untuk menampilkan kode dalam (view source) hanya menggunakan kode CSS. Saya melihat code display ditampilkan dengan begitu elegan ;)) Gue comot dah itu :))Dengan penanaman variabel CSS after and before, sehingga menimbulkan kata di pojok sisi kiri atas dan kanan bawah. Gue sudah buatkan 3 tampilan sama untuk CSS, HTML n JavaScript.

.css, .html, .script {
color: #fff;
margin: 10px;
padding: 10px;
display: block;
border: 2px dashed #bbb;
-webkit-border-radius: 5px;
border-radius: 5px;
font-size: 17px;
font-family: "Courier New",Courier,monospace;
background-color: #40484f;
white-space: pre-wrap;
}
.css::before,.html::before,.script::before,.css::after,.html::after,.script::after {
display: block;
color: #bbb;
font: 25px/1.2 'Inconsolata', monospace;
}
.css::before,.html::before,.script::before {
margin-left: 10px;
}
.css::after,.html::after,.script::after {
margin-right: 10px;
text-align: right;
}
.css::before { content: '<CSS>'; }
.css::after { content: '</CSS>'; }
.html::before { content: '<HTML>'; }
.html::after { content: '</HTML>'; }
.script::before { content: '<Script>'; }
.script::after { content: '</Script>'; }

Markup HTML<div class="css">

-------- YOUR PHRASE CODED HERE --------

</div>

<div class="html">

-------- YOUR PHRASE CODED HERE --------

</div>

<div class="script">

-------- YOUR PHRASE CODED HERE --------

</div>Lanjut bro...

Berikut beberapa kreasi pilihan lain agar tampilan kode di area postingan terlihat menarik

1. Make Code Preview on Post Area pre & code.
2. Make Code View on Blog Post using lang Attribute.
3. Make Box For Display Post Code Browser Theme.
4. Writing a Professional Code in Blog Post Area
.

Sebenarnya sudah pernah saya berkunjung, tetapi via codepennya! Berikut trik dari master Will tentang spoiler with waiting time. Satu lagi trik yg banyak orang membahas yaitu tentang accordion Trik akordion kali ini agak berbeda, karena syntax HTML menggunakan element <hr> (Accordion Effect with Horizontal Rules)

.hr {
height: auto;
margin: 0;
padding: 10px;
border: none;
border-bottom: solid 1px rgba(0, 0, 0, .2);
counter-increment: part;
transition: border-bottom-color .2s ease-out;
}
.hr::first {
border-top: solid 1px rgba(0, 0, 0, .2);
}
.hr::before {
content: 'Accord ' counter(part, lower-roman);
display: block;
color: #333;
font-size: 1.1em;
font-variant: small-caps;
letter-spacing: .05em;
}
.hr:hover, hr:focus {
border-bottom-color: rgba(0, 0, 0, .7);
outline: none;
}
.hr:not(:focus) {
cursor: pointer;
}
.hr ~ p {
text-align: justify;
overflow: hidden;
transition: transform .5s ease-out, opacity 1s ease-out;
}
.hr:focus ~ p {
height: auto;
margin: 0;
padding: 5px 10px;
background-color: #f7f7f7;
opacity: 1;
transform: translateY(0);
}
.hr ~ p, .hr:focus ~ .hr ~ p {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
transform: translateY(-15px);
}

Planning HTML<hr tabindex="1" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="2" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="3" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<hr tabindex="4" class="hr">
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>
<p>------- BLAH BLEH BLOH HERE -------</p>DEMO

---

------- BLAH BLEH BLOH HERE -------

---

------- BLAH BLEH BLOH HERE -------

------- BLAH BLEH BLOH HERE -------

---

------- BLAH BLEH BLOH HERE -------

---

------- BLAH BLEH BLOH HERE -------

------- BLAH BLEH BLOH HERE -------

------- BLAH BLEH BLOH HERE -------

Source: codepen.io/lonekorean/pen/GneCq - codepen.io/lonekorean/pen/kocrl - codepen.io/lonekorean/pen/brdCk
Ada template keren-keren nih, 45 Best Free Blogger Templates 2015 webdesignlike.com/2015/best-free-blogger-templates
Jangan lupa kunjungi dan acak-acak baca codersblock!

Bye :-h

Tools for Learn CSS Transform Matrix

Benar-benar susah BRO mendapatkan ide postingan belakangan ini #:-S Tahu sendiri, briliant, menarik, berbeda dari yg lain tentunya full stylish merupakan faktor gue dalam menulis artikel. Karena sulit ide, jadi postingan sekarang akan membahas salah satu property CSS3 yaitu transforms! Lebih spesifik CSS3 transformation matrix yg suka di buat untuk menimbulkan efek 2D atau 3D. Penjelasan secara terperinci silahkan sobat-sabit baca pada web direktori. Karena kalau dijelaskan sama saya pasti jadi bingung ;))
Untuk mengurangi kebingungan mari kita tengok contoh sederhana berikut ini:

Blah bleh bloh blah blah...

Lihat efek miring-miring tersebut? Jika mau contoh extreme please look at here CSS transforms by Keith Clark Dulu gue sudah pernah mosting basic dari CSS transform, bacalah dah download apps CSS3 transforms playground basic. Supaya lebih gereget mempelajari si transform matrix ini, AA Koben sudah buatkan tools lanjutan buat anda sekalian.

>> The CSS3 Matrix Construction Set unduh via 4shared
www.4shared.com/zip/nDKMvZjLce/The_CSS3_Matrix_Construction_S.html
>> Download The CSS3 Matrix Construction-Set.zip in Ziddu
downloads.ziddu.com/download/24375695/The-CSS3-Matrix-Construction-Set.zip.html

All file under licensed, please read be careful!!!

Resources:

• Computing CSS matrix3d transforms
franklinta.com/2014/09/08/computing-css-matrix3d-transforms
• Calculating element vertex data from CSS transforms
keithclark.co.uk/articles/calculating-element-vertex-data-from-css-transforms
• The Matrix Resolutions
meyerweb.com/eric/tools/matrix
• CSS3 Transform to Matrix Filter converter
www.useragentman.com/IETransformsTranslator
• Matrix3d transform CSS3 Generator
ds-overdesign.com/transform/matrix3d.html
• CSS 2D Transform Matrix Generator
codepen.io/Tinricon/details/ptAho
• The CSS3 matrix Transform for the Mathematically Challenged
www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged
• Matrix Themed Keypad
codepen.io/FlyingEmu/pen/AxpdK

Pass ZIP CSS3 Transforms-Matrix

Bye :-h

Miscellaneous of Github

GitHub adalah salah satu tempat terbaik untuk berbagi kode dengan teman-teman, rekan kerja, dan orang lain. Sudah ada lebih dari delapan juta orang menggunakan GitHub untuk membangun hal-hal yang menakjubkan bersama-sama. Dengan adanya fitur kolaboratif GitHub.com, aplikasi desktop, dan GitHub Enterprise, menjadikan pekerjaan menjadi lebih mudah secara individu atau tim untuk menulis kode yang lebih baik, lebih cepat.
Awalnya didirikan oleh Tom Preston-Werner, Chris Wanstrath, dan PJ Hyett untuk menyederhanakan kode berbagi, GitHub telah tumbuh menjadi code host terbesar di dunia! AA Koben akan berbagi beberapa info untuk kalian para member github? Walau tidak banyak, mungkin bisa mewakili ;))

Informasi pertama datang dari web TechSlides berbicara tentang Create Repositories with GitHub API and HTML5 techslides.com/create-repositories-with-github-api-and-html5 Cara cepat mengkonversi folder pada hard drive anda ke GitHub Repository? Bentuk HTML5 ini akan mengotentikasi, membuat repo, dan meng-upload folder ke repositori dengan JavaScript dan Github API. You can try here techslides.com/demos/github
Master Joel Sutherland berkreasi dengan membuat GitHub jQuery Repo Widget Dengan integrasi jQuery script dan jquery.githubRepoWidget.js sobat dapat good looking repo widget to add to your website.
Ex:

Contoh HTML-Editor itu saya buat dengan teknik Create Repositories with GitHub API and HTML! Mau yang lebih full stylish juga ada...

You can try it github cards Sebenarnya masih banyak aplikasi-aplikasi pendukung hasil karya pada pengembang untuk web github ini. Mungkin segini saja dulu, nanti kalau ketemu yg lain lagi saya update :D Github Pulse, github globe, Gisto Bagi sobat yang punya referensi lain...?

Happy GIthub \m/