Sabtu, 28 Desember 2013

Customize Content Area Before to Printing

Trick yang lumayan banyak dari para nara sumber. Sangkin beraneka ragam, tujuannya tetap ke situ juga! Berbicara tentang print sekarang mas bro. Membuat area printable menggunakan JavaScript. Sebelum masuk ada beberapa cara agar area konten yg akan kita print bisa sesuai dengan keinginan. Kopi paste artikel (tulisan) ke apps word yg kalian punya atau memakai jasa web online!Setelah merujuk ke beberapa web directory, Koben rangkum teknik menulis syntax print menjadi seperti berikut:
<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>
print
<a href="URL-TARGET-UNTUK-DI-PRINT" onClick="window.print();return false">
<img alt="" src="LINK-IMAGE" />
</a>
print
<a href="javascript:window.print()">
<img alt="" src="LINK-IMAGE" />
</a>
Itulah beberapa teknik penulisan syntax yg dapat di gunakan secara langsung untuk membuat link nge-print :) AA Koben dapatkan 1 referensi unik tentang issue printing. Dengan memasang seonggok JavaScript pada template, kita dapat melakukan customize content area before printing!

Sebuah div berisi teks blablabla yang akan dicetak.
Hiji, dua dan tilu...unyil kucing!!!

Click to print div 1.

Hanya isi div ini akan dicetak.
Telah menggunakan batasan untuk menyorot konten yang akan dicetak.
  1. Item One
  2. Item Two

Click to print div 2.

Sisipkan Javascript brkt sebelum tagging </head>

<script type='text/javascript'>
//<![CDATA[
function printContent1(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=0,top=0,width=800,height=700,scrollbars=1,resizable=1')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<title>Print Page</title>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//]]>
</script>
Silahkan di atur width & height sesuai kebutuhan. Berikut sketsa markup HTML...
<div id="div_print" style="YOUR CUSTOMIZE CSS STYLE"> ------------- ISI CONTENT WTF ------------- </div> <a href="javascript:void()" onclick="printContent1('div_print')">Click here to print</a>
Perhatikan tulisan div_print Konten area yg akan di print harus sama dengan link syntax! Itu harus berlainan jika sobat mau membuat konten printing lebih dari satu seperti contoh di atas. Kalau sobat mau mematenkan di area postingan blogger. Maka harus butuh kejelian dalam memasangkannya!

Koben akan kasih gambaran bagaimana meng-snippet konten area printing ke dalam template blog. Perhatikan, berikut skema dasar kode area postingan rata-rata kepunyaan blogspot!

            <b:includable id='post' var='post'>
<div class='post' id='post'>

<div id='div_print'>

<a expr:name='data: post.id'/>
<h1 class='post-title' id='PostTitle'>
<b:if cond='data: post.url'>
<a expr:href='data: post.url' target='top'><data: post.title/></a>
<b:else/>
<data: post.title/>
</b:if>
</h1>
<h6 class='date-header' id='PostDate'>
<data: post.dateHeader/> &#187; <span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data: post.author/>
</b:if>
</span>
</h6>
<div class='post-header-line-1'/>
<style>#fullpost {display:none;}</style>
<div class='post-body' id='PostContent'>
<data: post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

------------------ BLAH BLEH BLOH OTHER CODE ------------------

</div>
</b:includable>
Sisipkan tagging <div id='div_print'> tepat di bawah kode <div class='post' id='post'> Untuk tag penutup </div> silahkan dikondisikan dengan keadaan koding template masing² Yang jelas tag penutup </div> harus di dalam tag penutup </div> kepunyaan si <div class='post' id='post'>Setelah itu silahkan buat syntax URL pemanggil<a href="javascript:void()" onclick="printContent1('div_print')">Click here to print</a>

Semoga berhasil :)
Resource printing by: www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm

Jumat, 27 Desember 2013

Tutorial Simple But Menggereget

Menuju penghabisan tahun 2013 menyambut pengawalan tahun 2014 mari kita cooling down sejenak. Berjibaku dengan coding ruwet kadang membuat sumpek bin demet! Yuk kita flash back dengan koding yg simple and sederhana! Dalam berkreatifitas kadang dengan kode secuil pun bisa menjadi full stylish :D Semua tergantung kebutuhan dan selera masing² tentunya. AA Koben mau sharing & caring beberapa tut's lawas. Siapa tauk sobat teringat akan indahnya kesederhanaan itu :"> Klik link berikut, press Ctrl + U untuk mendapatkan code ;)Info Bar StatikDari halaman github milik Hasin Hayder github.com/hasinhayder, 2 artikel simple terpilih yaitu image caption hover animation github.com/hasinhayder/ImageCaptionHoverAnimation & sticky social bar github.com/hasinhayder/StickySocialBar
Untuk hover image gue sudah buat sendiri, silahkan sikat jika memang berguna. Begini...
post-img
Dilihat, diterawang apakah memang terpakai atau tidak! Itu trik menyembunyikan image dengan menempatkan 1 image pokok di depan yg menjadi penutup image dibelakangnya! Ganti gbr pokok (lambang blogspot) dgn gambar kalian.
.bingkai {
position: relative;
width: 500px;
height: 300px;
margin: 5px auto;
border-radius: 10px;
border: 10px groove #000;
}
.bekbel, .bekbel {
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 500px;
height: 300px;
position: absolute;
background-size: cover;
background: transparent none no-repeat 50% 50%;
}
/*
.bekbel {
background: #222;
}
*/
.bekbel {
opacity: 1;
transition: all .5s ease;
background-image: url(URL-IMAGE-POKOK-HERE);
}
.bekbel:hover {
opacity: 0;
}
Planing syntax<div class="bingkai">
<img src="URL-IMAGE-HERE" class="bekbel"/>
<div class="bekbel"></div>
</div>
Sticky social bar alias membuat links berbagi ke web jejaring dengan gaya setiki (diam menjedog) Sudah tidak asing lagi memang trik ini, banyak sekali bahkan www.addthis.com sudah membuatkan untuk para pemakai dengan bermacam-macam gaya b-) Gue akan kupas yg dari master Hasin Hayder. Why!!! Because di sana ada snippet inline CSS filter tepatnya di make image to grayscale use SVG.
.sticky-container {
top: 100px;
width: 200px;
right: -119px;
position: fixed;
}
.sticky li {
height: 43px;
color: #efefef;
cursor: pointer;
list-style-type: none;
background-color: #333;
margin: 0px 0px 1px 0px;
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
filter: gray;
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.sticky li:hover {
margin-left: -101px;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.sticky li img {
float: left;
width: 32px;
height: 32px;
margin: 5px 5px;
margin-right: 7px;
}
.sticky li p {
padding: 0px;
margin: 0px;
line-height: 43px;
}
Markup HTML
<div class="sticky-container">
<ul class="sticky">
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 1</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 2</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 3</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 4</p></a>
</li>
</ul>
</div>
Isikan tulisan LINK-IMAGE-HERE dengan link image beresolusi 32 x 32 pixel.
Demo hasinhayder.github.io/StickySocialBar
Bonus:
blogsizzle.com/templates/free-blogger-templates - blogsizzle.com/blogging/best-minimalist-blogger-templates - designmaz.com/2013/12/responsive-blogger-templates.html - haeckdesign.com/freebies/icons/css3-button-set

Happy coding \m/

Rabu, 25 Desember 2013

Get Free Selection Responsive Tester Display

Sebenarnya lagi tidak ada bahan postingan unik nih ;)) Menjaga eksistensi ternyata memang merepotkan bro! Seperti urusan fitur responsive sangat mereptokan juga #:-S Issue mengenai responsive tidak lain karena sebab maraknya gadget. Sehingga membuat para pemakai jasa online sering bermain dengan gadget tersebut. Si bloglang anu ganteng kalem tea mau berbagi tools responsive tester pilihan untuk kalian. Sebetulnya pada default browser alat buat mengetes tampilan apakah sudah responsive atau belum sudah tersedia! For mozilla tinggal ketik shortcut Ctrl + Shift + M Browser lain ana gak tauk, silahkan cari olangan aja yah :D
Source code sudah ready stock in github site...
  • github.com/smartfeeling/responsive_tester
  • github.com/BrianRichards/ResponsiveDesignTester
  • github.com/Maksims/restest
Yang urutan terakhir mantap punya tuh. Apakah dalam membuat apps responsive tester harus dengan sebuah halaman html? Ada juga cara cerdik yaitu dengan pemakaian teknik bookmarklet links!

To install the bookmarklet, drag this button Responsive Tester to your bookmarks bar.

Source by github.com/JohnRiv/Responsive-Tester
Bonusnya Koben kasih file download Resposive Apps by Moncho Varela and Me. Berikut penampakan responsiveTester

www.4shared.com/zip/6dpPTwkS/Responsive_Apps.html

Semoga bermanfaat.
Happy responsive \m/

Minggu, 22 Desember 2013

Snippet Inline CSS Filter for Mozilla II

Aa Koben cuma mau update postingan sedikit mengenai inline CSS filter for mozilla! Itung-itung menyimpan kode dari pada ilang. Sebenarya mau update di sana, tetapi kedudukan kode sudah berubah yang ada pada editor post blog. Sehingga demo tidak berjalan dengan baik ;)) Sama dengan yg sebelumnya, di sini saya akan berbagi kode inline CSS dengan efek unyu² punya. Kode CSS spesial hanya untuk browser mozilla. Kita mulai saja...

Original Image

post-imgEdge Effectpost-img
.edge-effect {
-webkit-filter: url(#EdgeDetectFilter);
filter: url(#EdgeDetectFilter);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'EdgeDetectFilter\'><feConvolveMatrix preserveAlpha=\'true\' kernelMatrix=\'-5 0 0 0 0 0 0 0 5\'/></filter></svg>#EdgeDetectFilter");
}
Sharpen Effectpost-img
.sharpen {
-webkit-filter: url(#SharpenFilter);
filter: url(#SharpenFilter);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'SharpenFilter\'><feConvolveMatrix preserveAlpha=\'true\' kernelMatrix=\'0 -1 0 -1 5 -1 0 -1 1\'/></filter></svg>#SharpenFilter");
}
Emboss Effectpost-img
.emboss {
-webkit-filter: url(#EmbossFilter);
filter: url(#EmbossFilter);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'EmbossFilter\'><feConvolveMatrix order=\'5 5\' preserveAlpha=\'true\' kernelMatrix=\'-1 0 0 0 0 0 -2 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0\'/></filter></svg>#EmbossFilter");
}
Luminance Maskpost-img
.luminance-mask {
-webkit-filter: url(#LuminanceMaskFilter);
filter: url(#LuminanceMaskFilter);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'LuminanceMaskFilter\'><feColorMatrix type=\'luminanceToAlpha\'/></filter></svg>#LuminanceMaskFilter");
}
Posterize Effectpost-img
.posterize {
-webkit-filter: url(#PosterizeFilter);
filter: url(#PosterizeFilter);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'PosterizeFilter\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 0.25 0.5 0.75 1\' /><feFuncG type=\'discrete\' tableValues=\'0 0.25 0.5 0.75 1\' /><feFuncB type=\'discrete\' tableValues=\'0 0.25 0.5 0.75 1\' /></feComponentTransfer></filter></svg>#PosterizeFilter");
}
Gradient Effectpost-img
.gradient {
-webkit-filter: url(#GradientMapFilter);
filter: url(#GradientMapFilter);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'GradientMapFilter\'><feColorMatrix type=\'matrix\' values=\'0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0\' /><feComponentTransfer><feFuncR type=\'table\' tableValues=\'0 1 0 1\' /><feFuncG type=\'table\' tableValues=\'0 0 0.4 1\' /><feFuncB type=\'table\' tableValues=\'0 0 .4 1\' /></feComponentTransfer></filter></svg>#GradientMapFilter");
}
X-Ray Effectpost-img
.xray {
-webkit-filter: url(#XRayFilter);
filter: url(#XRayFilter);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'XRayFilter\'><feColorMatrix type=\'matrix\' values=\'0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0\' /><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0\' /><feFuncG type=\'table\' tableValues=\'1 0\' /><feFuncB type=\'table\' tableValues=\'1 0\' /></feComponentTransfer></filter></svg>#XRayFilter");
}
Demikian update efek CSS inline filter for mozilla. Semoga bermanfaat :)

Bonus:

codepen.io/krnlde/pen/DELyA, codepen.io/larrygeams/pen/evBKs, codepen.io/zessx/pen/ILJyG, codepen.io/MrHill/pen/BnyLx, codepen.io/Joe_Temp/pen/mzfoi, codepen.io/0x04/pen/tbrHx, codepen.io/Sonick/pen/vijJl, codepen.io/Hornebom/pen/clDsr, codepen.io/awgreenblatt/pen/vFyqI, codepen.io/awgreenblatt/pen/zLirE, codepen.io/auginator/pen/nbksy, codepen.io/awgreenblatt/pen/Kdsfr, codepen.io/alexjoen/pen/ikIlf, codepen.io/fivera/pen/rHigj, codepen.io/stefanjudis/pen/tswuH, codepen.io/vergun/pen/bvien, codepen.io/frxnz/pen/spyvC, codepen.io/Xanmia/pen/otAgz, codepen.io/WhiteWolfWizard/pen/qkBhI
Happy coding \m/

Kamis, 19 Desember 2013

Apps HTML5 Paste Image for Google Chrome

Sekedar have fun dengan koding. Koben akan berbagi apps .html unik khusus untuk browser google chrome yaitu HTML5 paste image to page. Membuat snapshoot/screenshoot yang beroperasi pada browser engine google chrome. Dengan tambahan efek bunyi ketika melakukan paste (Ctrl + V) berupa bunyi seperti jepretan photo menambah variasi tersendiri buat apps HTML5 paste image! Resolusi image yg dihasilkan sebesar 1440 x 900 px. Contoh screenshot desktop saya tanpa edit...MyDesktopBerikut contoh snapshoot apps HTML5 paste image...MyDesktop
Cara pemakaian bin instruksi ada pada embed apps. Tombol Print Screen Sys untuk mengambil gambar, dan Ctrl + V untuk paste pada embed apps.
Resource by:
  • codepen.io/netsi1964/pen/IHwco
  • codepen.io/netsi1964/pen/IoJbg
Silahkan download aplikasinya!

www.4shared.com/zip/GVH3dI-H/Snapshoot.html

Happy koding \m/

Senin, 16 Desember 2013

Get Free 3+ Simplest Tools by Tim Kreator

Koben ada sedikit update dari postingan sebelumnya MiniCodeEditor. Gak tauk namanya atau nick nih, Maxime Euzière sepertinya orang berkebangsaan perancis! Mini Code Editor merupakan salah satu project yang di buat oleh xem, aemkei, subzey, rlauck, bburky and p01. Dari semua tim kreator tersebut memiliki kesamaan yaitu sangat mengusung pada kesederhanaan (very simplest) :D
Berikut link update dari miniCodeEditor
Sobat bisa mendatangi link berikut untuk melakukan customize CSS xem.github.io/miniCodeEditor
Khusus the full-featured version ada keunikan baru tersendiri! Action dapat melakukan auto save dengan hasil link berupa syntax base64 Fitur menarik yg bisa dikatakan sama dengan artikel create your own link sharing like pastebin or shortly! Berikut code miniKodeEditor di buat dengan teknik postingan tersebut click here!

Kalau saya beberkan semua trick nanti kalian pada ngiler. Seperti yg saya sebutkan di atas tadi, tim kreator dari mini editor mengusung pada mini mini or simplest simplest koding! Ada 3 buah tools lagi yg akan gue share dari tim kreator. That is mini HTML minifier (128 bytes), mini CSS minifier (128 bytes) and mini JS minifier (127 bytes) Kecil² banget kan tuh sizenya :-B Untuk mendapatkannya sangatlah mudah ;)) :D

Buka halaman berikut xem.github.io/miniMinifier Klik banner bertuliskan Fork me on GitHub di kanan pojok atas. Setelah masuk ke halaman xem/miniMinifier · GitHub, klik lagi tombol yg bertuliskan Download ZIP pd sisi kanan bawah. Got it.
Begitu saja informasinya, saya mau kembali melakukan snippet koding lagi, koding HTML live preview lagi bro :)) =))

Happy coding \m/

Sabtu, 14 Desember 2013

Get Two HTML5 Editor for Free

Bwahahaha...dapat lagi bray gue apps HTML editor keren punya. TryItYourselfHTML5 is HTML5 editor online full web client, with highlight code and filesystem to save your work kreasi master Francesco De Stefano. Master Koben sudah membuatkan versi offlinenya. Mudah-mudahan benar bisa berjalan tanpa koneksi internet. Semua file sudah gue download, kecuali jika di dalam script memang ada link DL lain. Dan itu tidak terdeteksi oleh saya. Begitupun dengan jQuery UI Theme script yg mana imagenya tidak saya DL semua. Habisnya sy males. Dan hanya 2 teratas (black-tie, blitzer) dan terakhir (ui-lightness, vader) yg saya sudah sertakan dengan file image untuk jQuery-UI Theme!

HTML5editor

Download link
github.com/NewUlmDesign/TryItYourselfHTML5/archive/master.zip

HTML5 editor ini merupakan editor live preview. Fitur sudah ready stock codemirror script. Bisa open file dan save dengan teknik blob. Lebih lanjut pelajari saja sendiri.

TryItYourselfHTML5

Kalau yg ini lebih keren. Kita bisa bermain dengan opsi script meliputi jQuery, jQuery UI, jQuery UI Theme & AngularJS. Tampilan seperti jsfiddle.net Ada beberapa fitur (open file HTML, CSS, & js) yg tidak berkerja dengan baik, dan saya tidak mengerti membetulkannya. Enggak tauk rusak atau saya yg nggak tau cara kerjanya bro :D
Secara keseluruhan apps Try It Yourself HTML5 berjalan dengan baik.

Ke dua link download akan gue kasih setelah izin turun dari si empunya proyek. Jika enggak diizinin, ya apa boleh buat. Gue sudah kontak via email, tinggal menunggu saja.

Source: github.com/NewUlmDesign/TryItYourselfHTML5
Pantengin terus halaman ini untuk mendapatkan apps offline HTML5 editor karya master Francesco De Stefano :D Saya sudah dapat izinnya...silahkan sikat.
You can share and improve the code if you wish, but I urge you not to remove my name in the footer as the creator and author of the applications.Francesco
Download:
    Via 4shared
  • www.4shared.com/zip/DxRhlogK/TryItYourselfHTML5.html
  • Via Ziddu
  • www.ziddu.com/download/23417663/TryItYourselfHTML5.zip.html
Pass ZIP bebenkobensibloglanganugantengkalemtea

Happy blogging \m/

Selasa, 10 Desember 2013

Get Free Two HTML Editor Simplest and Usefuly

Kembali membawa informasi apps live HTML editor real time. Maaf jika sobat bosan dengan tema postingan AA Koben. Pokoknya setiap menemukan HTML editor, dan memang unik maka akan saya share :D Entah sudah berapa buah gue buat, silahkan search pada kotak pencarian blog untuk menemukan apps playground HTML editor b-) Ini kalo males, tinggal klik saja HTML editor
Pertama-tama info tentang mini code editor. Apakah itu? MiniCodeEditor adalah sebuah editor kode yang bisa bermain dengan bahasa HTML, CSS and JavaScript. Istimewanya terdapat pada ukuran file yang hanya sebesar 176+ bytes saja. Langsung saja buka aplikasi Notepad kalian dan pastekan kode berikut!

Bumbu Ajaib

<textarea id="H"><!-- HTML -->
This is a...</textarea><textarea id="C">/* CSS */
body { background: #bdf; }</textarea><textarea id="J">// JS
document.body.innerHTML += " test";</textarea><iframe id="I"></iframe><script>onload=(d=document).onkeyup=function(){(D=d.getElementById("I").contentWindow.document).write(H[v="value"]+"<script>"+J[v]+"<\/script><style>"+C[v]);D.close()}</script><style>*{box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0;vertical-align:top}textarea{resize:none;padding:10px}textarea,iframe{resize:none;width:50%;height:50%;border:1px solid}</style>
Save As dengan ekstension .htm/.html Ex: MiniCodeEditor.html Hanya dengan kode/script segitu saja sudah jadi sebuah HTML editor! Jangan tanya soal syntax/scriptnya pada gue yah :))
Jika sobat tidak sreg dengan tampilan posisinya, maka pada kode bumbu ajaib bagian <style> gantikan saja! Kunjungi link brkt xem.github.io/miniCodeEditor
Satu info lagi, yaitu tentang webTextEditor. Hampir mirip dengan mini code editor, web text editor masih sama tools HTML editor untuk bermain kode CSS, HTML and JavaScript. Bedanya di sini kita akan menemukan opsi JavaScript and CSS libraries! Jadi untuk menjalankan fungsi script/CSS kita harus terlebih dahulu memilihnya! Di ikuti dengan menekan tombol bertuliskan Run Code.webTextEditorMau mencoba menyusun file .html silahkan susun file webTextEditor di halaman github.com/ernesto27/webTextEditor Kalau malas Koben sudah bungkuskan ke dua HTML editor di atas dalam satu paket.
Silahkan dipelajari lebih dalam masing² yach :D

Bonus tools simplest too

jsrun.it/ethertank/iNHw - jsrun.it/ethertank/zhEn - jsrun.it/ethertank/cHBo - jsrun.it/ethertank/w2Be - jsrun.it/ethertank/dcix - jsrun.it/ethertank/mpYH - jsrun.it/ethertank/k4Q6 - jsrun.it/ethertank/jd2N - jsrun.it/ethertank/u170
UPDATE
Get Free 3+ Simplest Tools by Tim Kreator

Happy koding \m/

Rabu, 04 Desember 2013

Snippet Inline CSS Filter Code for Mozilla

Penasaran, merasa bisa, pelajari, coba-coba and ketemu. Di awali dengan rasa penasaran melihat demo yang tidak berjalan baik pada browser mozilla cdpn.io/vfueH & cdpn.io/uIiJp Selidik mempelajari ternyata kode CSS yang di pakai menggunakan CSS Filter. Seperti di ketahui bersama, bahwa mozilla sampai dengan versi 25.0 belum mendukung 100% terhadap fitur CSS-Filter menurut laporan web caniuse.com/css-filters Belum mendukung di sini adalah dalam artian browser mozilla mempunyai penulisan syntax tersendiri guna menampilkan fitur CSS_Filter tersebut tidak seperti browser lainnya yg sudah mendukung!
Berikut beberapa links resource seputar issue CSS3 Filters (buka dengan selain mozilla)
  • html5-demos.appspot.com/static/css/filters/index.html
  • www.paulund.co.uk/css3-image-filters
  • www.inserthtml.com/2012/06/css-filters
Jangan kebanyakan entar malah pusing :P Contoh 2 demo dari web codepen (yg di awal postingan tadi) gua coba forked agar berjalan di mozilla, cek gi dot cdpn.io/Iolpu n cdpn.io/wegIJ Bonus ini mah cdpn.io/uHrdi Link bonus itulah yg membuat AA Koben penasaran agar dapat menampilkan fitur CSS Filters bisa tampil di mozilla dengan gaya penulisan internal style sheet? Bakalan repot kalau kita harus menuliskan syntax satu per satu beserta dengan syntax tag svg filter CSS MDN

Gue pernah 2x membahas trick css filter effects for mozilla, blur effect, grayscale effect 'n update grayscale. Saat ini saya akan mencoba berbagi trik menerapkan kode css efek filter secara internal tentunya ;) Maaf jika salah koding, sayah hanya berguru pada eyang otodidak bukan ahli koding CSS, dan sudah melewati tes yg saya sendiri sebagai peneliti, muluusss hasilnya :D Browser mozilla yg saya pakai version 18.0.1
Kita mulai...

Original Imagepost-imgBlur Effect
.blur { 
filter: url(#blur-effect);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur-effect\'><feGaussianBlur stdDeviation=\'3\' /></filter></svg>#blur-effect");
}
post-img
Grayscale Effect
.grayscale {
filter: url(#grayscale);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
post-img
Brightness Effect
.brightness {
filter: url(#brightness);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feComponentTransfer><feFuncR type=\'linear\' slope=\'1\' intercept=\'0.5\' /><feFuncG type=\'linear\' slope=\'2\' intercept=\'0.5\' /><feFuncB type=\'linear\' slope=\'3\' intercept=\'0.5\' /></feComponentTransfer></filter></svg>#brightness");
}
post-img
Contrast Effect
.contrast {
filter: url(#contrast);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'contrast\'><feComponentTransfer><feFuncR type=\'linear\' slope=\'1\' intercept=\'-(0.5 * 1) + 0.5\' /><feFuncG type=\'linear\' slope=\'2\' intercept=\'-(0.5 * 2) + 0.5\' /><feFuncB type=\'linear\' slope=\'3\' intercept=\'-(0.5 * 3) + 0.5\' /></feComponentTransfer></filter></svg>#contrast");
}
post-img
Shadow Effect
.shadow {
filter: url(#shadow);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'shadow\'><feGaussianBlur stdDeviation=\'5\' /><feOffset dx=\'5\' dy=\'3\' result=\'offsetblur\' /><feFlood flood-color=\'black\' /><feComposite in2=\'offsetblur\' operator=\'in\' /><feMerge><feMergeNode/><feMergeNode in=\'SourceGraphic\' /></feMerge></filter></svg>#shadow");
}
post-img
Hue Effect
.hue { 
filter: url(#hue-rotate);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'hue-rotate\'><feColorMatrix type=\'hueRotate\' values=\'180\' /></filter></svg>#hue-rotate");
}
post-img
Invert Effect
.invert { 
filter: url(#invert);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'0 0.5\' /><feFuncG type=\'table\' tableValues=\'0 0.4\' /><feFuncB type=\'table\' tableValues=\'0 0.3\' /></feComponentTransfer></filter></svg>#invert");
}
post-img
Opacity Effect
.opacity { 
filter: url(#opacity);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'opacity\'><feComponentTransfer><feFuncA type='\table'\ tableValues='\0 0.5'\ /></feComponentTransfer></filter></svg>#opacity");
}
post-img
Sepia Effect
.sepia { 
filter: url(#sepia);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'sepia\'><feColorMatrix type='\matrix'\ values='\.1 .669 .99 0 0 .29 .66 .13 0 0 .17 .34 .11 0 0 .00 .00 .00 1 0'\ /></filter></svg>#sepia");
}
post-img
Saya mostingnya pusing bray, kebanyakan kode. Bermain-mainlah dengan kode dasar CSS effect di atas! Ingat!!! Setiap nilai nominal, type berefek pada hasil. Gue tidak akan menjelaskan, bikin ini saja sudah amit-amit puyeung.
Resource lagi:
css3.bradshawenterprises.com - www.w3.org/TR/SVG11/filters.html - docs.webplatform.org/wiki/svg/tutorials/smarter_svg_filters
Happy coding \m/

Senin, 02 Desember 2013

Get Free HYRO HTML5 Editor Plus Bonus Link Resources

Aa Koben lagi atit nich >_<' Sebagai blogger sejati walau lagi tidak enak badan harus tetep eksis...WAE :D Bagaimana dengan postingan kemarin, apakah kalian sudah mempelajarinya HTML editor live preview source by emmet & codemirror? Saya menemukan yang baru lagi bro! A real-time HTML5 editor by master Jared Wright and that is call the Hyro. Hyro hampir sama dengan embed HTML playground yg gue buat. Real time preview tanpa pencet² tombol. Sama-sama memanfaatkan fitur dari codemirror :) Berikut beberapa gitur yg ditawarkan oleh HYRO:
  • Editor HTML5 desktop dengan live HTML viewer.
  • Dapat digunakan untuk Javascript dan CSS coding.
  • Memanfaatkan luar biasa Codemirror text-editor untuk highlighting dan indentation.
  • Ringan dan mudah untuk setup. Siapapun dapat menggunakannya.
  • UI Customizable. Dapat mengubah warna UI primer setiap saat. (kustomisasi lanjut segera hadir).
  • Kompatibel dengan semua platform: Windows, Mac OSX, dan Linux.
Download, source and info here jawerty.github.io/Hyro - github.com/jawerty/Hyro Lumayan dapet aplikasi editor HTML5 desktop komputer ;)) Segitu saja informasi dari gue, karena macih atit cemungut pun ilang bray. Sebagai bonusnya aku kacih links resource keren abizzz...

designshack.net/articles/css/building-a-custom-css3-pagination-user-interface
landing.nudgepad.com
www.mojotech.com/social-builder
lea.verou.me/2013/11/cleanest-css-spinner-ever
lea.verou.me/2013/11/flexible-google-style-loader-with-css
www.thepetedesign.com/demos/interactive_3d.html
oridomi.com
tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text

Semoga bermanfaat :)
Happy blogging \m/