Trik Komputer: April 2015

Selasa, 28 April 2015

Snippet Inline CSS Filter for Mozilla Update

Dulu gue pernah memposting tentang snippet inline CSS filter for mozilla. Kemudian aku melihat artikel svg filters effects · drag & drop codepen.io/jorgeatgu/pen/wBRmBZ! Ternyata ada beberapa efek keren hasil generate menggunakan syntax SVG Filters? Adapun nama efek tersebut adalah turbu map, turbulence, luminance, discrete, table, fematrix dan morpho.
Singkat cerita, AA Koben akan berbagi trik penulisan CSS secara inline di mana meliputi dari efek-efek yg gue sebutkan tadi! Updated for simple hover effects with CSS filters codepen.io/beben-koben/full/ckKzh.

Syntax HTML<img src="LINK-IMAGE" alt="" class="EFFECT BLUR" />Gantikan tulisan EFFECT BLUR dengan nama-nama efek!
Buka satu halaman full artikel jika demo tidak jalan!

Original Image

Turbu Map Effect

.turbuMap {
  -webkit-filter: url("#turbuMap");
  filter: url("#turbuMap");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbuMap\'><feTurbulence baseFrequency=\'0.015\' numOctaves=\'2\' type=\'fractalNoise\' result=\'turbulence\' data-filterId=\'3\' /><feDisplacementMap xChannelSelector=\'R\' yChannelSelector=\'G\' in=\'SourceGraphic\' in2=\'turbulence\' scale=\'40\' /></filter></svg>#turbuMap");
}

Turbulence

.turbulence {
  -webkit-filter: url("#turbulence");
  filter: url("#turbulence");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbulence\'><feTurbulence baseFrequency=\'.7\' numOctaves=\'2\' type=\'turbulence\' result=\'fuzz\' stitchTiles=\'stitch\' /><feComposite in=\'SourceGraphic\' in2=\'fuzz\' operator=\'arithmetic\' k1=\'0\' k2=\'1\' k3=\'-3\' k4=\'.01\' /></filter></svg>#turbulence");
}

Luminance

.luminance {
  -webkit-filter: url("#luminanceToAlpha");
  filter: url("#luminanceToAlpha");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'luminanceToAlpha\'><feColorMatrix type='\luminanceToAlpha'\ values='\0.4'\ in=\'SourceGraphic\' /></filter></svg>#luminanceToAlpha");
}

Discrete I

.discrete {
  -webkit-filter: url("#discrete");
  filter: url("#discrete");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0 .5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5\' /></feComponentTransfer></filter></svg>#discrete");
}

Discrete II

.discrete2 {
  -webkit-filter: url("#discrete2");
  filter: url("#discrete2");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete2\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0  5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5 1 1\' /></feComponentTransfer></filter></svg>#discrete2");
}

Table I

.table {
  -webkit-filter: url("#table");
  filter: url("#table");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 0 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 0 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table");
}

Table II

.table2 {
  -webkit-filter: url("#table2");
  filter: url("#table2");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table2\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 10 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 5 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table2");
}

Fematrix I

.fematrix {
  -webkit-filter: url("#fematrix");
  filter: url("#fematrix");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix\'><feConvolveMatrix order=\'3\' kernelMatrix=\'-1 -1 3 -2 1 -1 -1 1 -1\' /></filter></svg>#fematrix");
}

Fematrix II

.fematrix2 {
  -webkit-filter: url("#fematrix2");
  filter: url("#fematrix2");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix2\'><feConvolveMatrix order=\'4\' kernelMatrix=\'-2 2 1 -1 -1 3 2 1 -1 0 -1 -4 -1 1 0 0\' /></filter></svg>#fematrix2");
}

Morpho I

.morpho {
  -webkit-filter: url("#morpho");
  filter: url("#morpho");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho\'><feMorphology operator=\'erode\' radius=\'3\'/></filter></svg>#morpho");
}

Morpho II

.morpho2 {
  -webkit-filter: url("#morpho2");
  filter: url("#morpho2");
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho2\'><feMorphology operator=\'dilate\' radius=\'3\'/></filter></svg>#morpho2");
}

Capek #:-S

Jumat, 24 April 2015

Eyes Saver, Make Your Screen Cool

Pada dasarnya trik ini memiliki fungsi hampir sama dengan tutorial membuat screensaver untuk blog. Jika pada trick screensaver mempunyai tujuan yakni menyembunyikan konten dan digantikan dengan tampilan lain, kesempatan sekarang AA Beben akan mencoba bagaimana cara membuat Eyes Saver! Eyes-saver adalah secuil deretan kode CSS untuk menampilkan efek redup-redup (rgba) supaya ketika menemukan web/blog dengan tampilan warna yang kontras mata kita akan terbantu terlindungi dengan mengaktifkan fitur eyes saver :D
Ilustrasi on sekrin siut:

Dalam kasus ini, penanaman kode rgba(0,0,0,0.3); sebagai warna background akan membantu berfungsi sebagai filter kontras cahaya yg berlebihan (mencolok)! Singkat cerita, gue mau kasih tau bagaimana cara membuat layar monitor anda sekalian menjadi rgba(0,0,0,0.3) :))

.container_ {
transition: transform 0.5s;
backface-visibility: hidden;
}
.eyesSaver-Overlay {
display: none;
background: rgba(0,0,0,0.3);
}
.eyesSaver-Overlay,.eyesSaver-Overlay a {
position: fixed;
z-index: 99;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.button {
display: block;
float: right;
background: #fff;
padding: 5px 10px;
border-radius: 50%;
font-size: 1.3em;
transition: all 0.3s linear;
}
.button:before {
content: '\2600';
}
.button:hover {
box-shadow: 0 13px 25px 0 rgba(0,0,0,0.3);
}
nav:target ~ .container_ .eyesSaver-Overlay {
display: block;
}
.nav1 {
bottom: 5%;
right: 4%;
position: fixed;
}

Tempatkan syntax HTML di dalam tag <body> sebelum tag </body> template.

<nav id="slideLeft"></nav>
<div class="container_">     
  <div class="eyesSaver-Overlay"><a href="#"></a></div>
  <div class="nav1">
    <a href="#slideLeft" class="button"></a>
  </div>
</div>

DEMO
Bye :-h

Kamis, 16 April 2015

Get One Free Two for Code Tester

Ternyata begini rasanya jika sudah dihinggapi virus malas, source developer lagi pada sepi plus ~~blank~~ idea :D Gue angkat kembali tema kojo pada blog ini yaitu HTML editor with live preview supaya para pengunjung tidak kecewa! Kok nggak update yaaa :-" Tidak sengaja menemukan ketika browsing dengan keyword code tester masuk ke bagian dalam halaman jelajah google! AA tidak akan menjelaskan apa itu code tester? Satu yg pasti mempunyai fungsi sama dengan playground HTML editor. Biasalah bro, bermain sambil belajar ;))

Untuk mempersingkat waktu, dipersilahkan bagi kalian yg sudah bisa mengambil sendiri source kode dari sumber. Get Code Tester www.jschneider88.com/codetester. Sama gue sudah dimodif dengan menambahkan syntax-highlighter by codemirror! Pada bagian navigasi telah disisipkan form color Spectrum by @bgrins bgrins.github.io/spectrum.
Screenshot...Seperti yg sudah saya utarakan di atas, mendapatkan code-tester berada di halaman dalam google entah page berapa! Sebagai contoh dengan keyword serupa, ternyata playground HTML editor masih ada :D Silahkan lihat sendiri:

Online Code Tester.

www.lutanho.net/goodies/codetester.html

Demonstration HTML Test Page.

Sengaja saya comot contoh tersebut, karena teknik penampilan page.html menggunakan penulisan syntax iframe Semoga owner web tidak keberatan juga saya sikat source code untuk dibagikan kepada para blogger :"> Amal ibadah itung-itung ;))
Silahkan download ketiga apps.html tersebut bagi yg berkenan. Absolutely this is for learning and work offline mode.

>> Code Tester unduh via 4shared
www.4shared.com/zip/Z0veh_aFce/Code_Tester.html
>> Download Code-Tester.zip in Ziddu
downloads.ziddu.com/download/24467777/Code-Tester.zip.html

Kekurangan modifikasi dan penambahan fitur silahkan add masing-masing ya :)) Soalnya nggak ada waktu buat bagus-bagusin...UGH!!! :P

Happy coding \m/

Senin, 06 April 2015

Shortcode Plugin Blogger for Write Syntax with Easy

Pada tanggal 4/03/2015 master Mohammad beserta STCnetwork team telah membuat Blogger Shortcode Plugin. Blogger short code plugin adalah sebuah sistem yang akan membuat web/blog design dan penciptaan widget dengan hanya menggunakan script plugin (a macrocode)! Adapun fitur yg ditawarkan yaitu agar kita dapat menyisipkan video, audio, photo gallery, tabs, accordions etc. Fitur tersebut dapat langsung berfungsi pada post area, widgets, side-bar, kolom komentar dan dimana lagi juga bisa (still on work)? Dengan begini proses Embedding Objek di Blogger tidak pernah semudah sebelumnya.

Blogger shortcode adalah satu baris macrocode yang berisi satu set instruksi yang memungkinkan kita melakukan hal-hal yang bagus dengan upaya minimalis. Shortcode dapat membantu menanamkan file atau membuat objek di BlogSpot blog dengan satu baris kode yang biasanya akan memerlukan banyak kerja kompleks, kode panjang and jelek :P

Sekarang anda dapat dengan mudah memasukkan benda seperti Video, Audio, File, slideshow dan semua elemen web penting seperti akordion, tab, tombol warna-warni, kotak dll ke dalam Header, Sidebar, Footer, Pos, Pages, Judul dan luar biasa bahkan di dalam komentar! Hal ini tidak memerlukan pengetahuan tentang HTML, CSS atau JavaScript. Plugin ini sangat ringan dan multiple-embed-support yg akan mengurangi waktu loading halaman beban sebesar 50%.
Singkat cerita inspirasi datang hampir sama dengan kepunyaan shortcode wordpress!

List of Supported Shortcodes

Sejauh ini telah dikembangkan sekitar 10 shortcode dan rencana ke depan untuk dikembangkan lagi sekitar 50 shortcode insya Allah dalam bulan-bulan ini. Shortcode akan dibuat berdasarkan kepentingan dan kegunaan mereka.
Berikut ini adalah shortcode yg sudah dikembangkan sejauh ini.

Shortcode	Definisi
[accordion]	Membuat daftar item secara vertikal ditumpuk yg mana setiap item dapat "memperluas" atau "ditarik" untuk mengungkapkan isi yang berhubungan dengan item. Item dapat diaktifkan dan dinonaktifkan dengan mudah.
[tab]	Widget tab memungkinkan beberapa dokumen atau panel yang akan terkandung dalam satu jendela, menggunakan tab sebagai widget navigasi untuk beralih antara set dokumen.
[code]	Menampilkan syntax Highlighter yang mempertahankan format asli dari kode sumber.
[quote]	Membuat blockquote yg fullstylish.
[button]	Menyisipkan tombol CSS3 berwarna-warni.
[icon]	Masukan ikon FontAwesome di mana saja dengan dukungan pilihan kustom.
[soundcloud]	Memasukkan embeds soundCloud track.
[dailymotion]	Memasukkan embeds video dailymotion.
[divider]	Menyisipkan horizontal separator untuk membagi bagian, juga mengandung tombol Back To Top
[num]	Menyisipkan a number enclosed inside a circular background.
[warning]	Menyisipkan kotak warning message.
[success]	Menyisipkan kotak sukses message.
[alert]	Menyisipkan kotak alert message.
[info]	Menyisipkan kotak dengan beberapa info message.
[update]	Menyisipkan kotak dengan update status message.
more on!	it's way . . .

Langkah-langkah Instalasi

Ikuti langkah-langkah berikut untuk menginstal Shortcode Plugin ke dalam template blogger kalian.

Go To Blogger > Template > Backup Download full template kalian!
Click Edit HTML
Press Ctrl + F, search </body>
Paste file dynamically updated JS tepat diatasnya.

<!-- Blogger Shortcode Plugin Dynamic JS File -->  <script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>

Kemudian search <head>
Pastekan file CSS berikut tepat di bawahnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>  <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Perhatikan bahwa dalam kode di atas telah menyertakan versi terbaru dari jQuery dan FontAwesome. Saya menyarankan agar menggunakan versi ini bukan versi lama, dan mungkin sobat sudah menggunakannya.

Save & done.

Gunakan Shortcode Plugin Dynamic JS file bawaan, karena file shortcodes.js akan selalu diperbaharui.

Shortcode Syntax

Shortcode memiliki nama dan attributes. Attributes adalah pilihan yang membantu mengkonfigurasi objek. Shortcode dilambangkan dengan tanda kurung persegi [ Square brackets ]. Square brackets dibuka & ditutup seperti HTML tetapi dengan format yg lebih sederhana (mirip dengan markdown)
Ex:
Misalkan sobat ingin memasukan embed video dari dailymotion ke dalam postingan!

[dailymotion src="x2lhjki"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" /]

Sekarang jika sobat ingin mengubah warna tombol pemutar, menyembunyikan informasi player dan mengedit dimensi player, maka kita dapat memasukkan atribut dengan syntax seperti dibawah ini

[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0" /]

Penulisan syntax diatas hanya contoh saja, rincian lengkap tentang cara menggunakan/menuliskan syntax shortcode-plugin akan dibagi dalam tutorial mendatang (UPDATED)

>> jQuery Accordion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/blogger-shortcode-for-jquery-accordion.html
>> jQuery "Tabs Shortcode" For Blogger!
www.mybloggertricks.com/2015/04/create-tabs-in-blogger.html
>> Dailymotion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/dailymotion-shortcode-for-blogger.html
>> SoundCloud Shortcode For Blogger!
www.mybloggertricks.com/2015/04/add-SoundCloud-Player-in-Blogger.html
>> Facebook Page Plugin Shortcode For Blogger
www.mybloggertricks.com/2015/04/add-facebook-page-plugin-in-Blogger.html
>> Create CSS3 Notification Boxes in Blogger
www.mybloggertricks.com/2015/04/message-box-shortcodes-for-blogger.html
>> YouTube Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/create-a-YouTube-Shortcode-in-Blogger.html
>> Syntax Highlighter Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/SyntaxHighlighter-Shortcode-for-Blogspot.html
>> Buttons Shortcode - Create CSS3 Buttons in Blogger!
www.mybloggertricks.com/2015/05/button-shortcode-for-blogger.html
>> Image Shortcode - Embed Images in Blogger Comments!
www.mybloggertricks.com/2015/05/insert-image-shortcode-in-blogger.html
>> Create Shortcode For CSS3 Tooltip in Blogger!
www.mybloggertricks.com/2015/05/create-shortcode-for-css3-tooltips.html
>> Create Shortcode For Responsive HTML Tables!
www.mybloggertricks.com/2015/05/HTML-Table-Shortcodes.html
>> Horizontal Divider Line With Back-To-Top Button
www.mybloggertricks.com/2015/06/CSS3-Divider-shortcode.html

Syntax Errors

Hindari membuat kesalahan-kesalahan ini saat mengetik nama shortcode dan attributes:

Jangan gunakan CamelCase atau UPPER-CASE untuk nama atribut atau nama Shortcode. Gunakan hanya huruf kecil.
Jangan menambahkan spasi di antara nama shortcode dan tanda kurung persegi.
Macro shortcode dapat menggunakan tanda kutip tunggal (') atau tanda kutip ganda (") untuk nilai atribut, atau menghilangkan tanda kutip sepenuhnya jika nilai atribut tidak mengandung spasi.

[table col='123' row=456] sama dengan [table col="123" row="456"]

Sebuah ruang (spasi) diperlukan antara nama shortcode dan atribut shortcode. Bila lebih dari satu atribut yang digunakan, setiap atribut harus dipisahkan oleh setidaknya satu spasi.
Shortcode parser tidak menerima tanda kurung persegi dalam atribut.

[tag attribute="[Some value]"]

Links source:
www.mybloggertricks.com
ask.mybloggertricks.com/t/which-blogger-shortcode-would-you-like-us-to-create/1684
Need Quick Help within 24 Hours? ask.mybloggertricks.com

Jumat, 03 April 2015

Make it Offline in Local Storage

Berbagi trik dan tutorial bagaimana cara melakukan penyimpanan (Save As) Fitur baru dari HTML5 yaitu local storage akan berperan penting dalam hal ini! Adapun sarana yang akan dipakai adalah browser engine. Singkat cerita kita akan mengefisiensikan fungsi dari browser yg kita punya untuk dijadikan penyimpanan file. File dapat berupa .txt, .html, or etc.
Apakah sobat masih ingat dengan trick <html contenteditable> Syntax tersebut adalah cara tercepat merubah mesin browser menjadi simple editing editor atau notepad in browser. Dengan melakukan pencet tombol Ctrl + S, sobat sudah dapat menyimpan data dengan ekstension .html

Berikut beberapa lists yg sobat bisa kunjungi untuk belajar:

Downloadify

github.com/dcneiner/Downloadify

a[download]

html5-demos.appspot.com/static/a.download.html

updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

Saving generated files on the client-side

eligrey.com/blog/post/saving-generated-files-on-the-client-side

eligrey.com/demos/FileSaver.js

Save/download data generated in JavaScript

hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html

HTML5 localStorage

toddmotto.com/storing-data-in-the-browser-with-the-html5-local-storage-api

Javascript to save Textarea as a txt file

runnable.com/U5HC9xtufQpsu5aj/use-javascript-to-save-textarea-as-a-txt-file

Loading, Editing, and Saving a Text File in HTML5 Using Javascript

thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip

Sebagai bonus AA Koben akan berbagi informasi how to make a ridiculously simple personal wiki! Adapun tujuan WIK dibuat by martinpllu adalah sbb:

Benar-benar sederhana.
Menyimpan semua data di browser localStorage
Tidak ada separate 'edit mode' seperti kebanyakan wiki. Halaman langsung bisa diedit.
Bekerja dengan baik pada mobile dan desktop.
Dukungan navigasi browser (back/forward/bookmark etc.)
Menyimpan semua data secara lokal pada perangkat.
Navigasi keyboard.
Bekerja secara offline.

Silahkan meluncur ke halaman source guna mendownload dan mempelajari lebih lanjut github.com/martinpllu/wik :D