From Writer to Silent Reader, it's Good!

Tahun telah berganti menjadi baru kembali, tetapi aktifitas mosting belum ada sama sekali :P Bukan tanpa sebab belum melakukan post! Akan tetapi di tahun 2019 ini front-end blog/web sudah semakin maju dan instant. Banyak para developer berlomba memamerkan kabisa dengan membuat berbagai macam tools :D Apakah sobat kenal dengan Tutorial Republic Salah satu web online development tutorials seperti W3Schools. Di website tutorialrepublic ada beberapa tools, salah satunya adalah HTML Editor Seperti kalian ketahui, blog gue tempat mengumpulkan source html-editor? Dengan nama codelab, dia adalah korban gua berikutnya ;)) Sobat bisa mencomot dengan gratisan, plus tool color picker jebolan developer.mozilla.org

Codelab	Color Picker

Download: tutorialrepublic.7z in Google Drive.
Password: siganteng-kalem

Jika sobat ingin mempelajari tentang color alias warna, sobat bisa mencoba ColorBox by Lyft Design. Kepengen emoticon or emoji you can try OpenMoji & Emoji Builder. Ingin melihat efek color blend sobat bisa satroni Blendy. Cobalah terlebih dahulu google fonts dengan menggunakan Tyffle. Fix broken css grid using by Broken Grid. Secuil koleksi Front-End-Wizard by chiragbhansali. Easily make tints and shades in 10% increments use Tint & Shade Generator or Color Tinter and Shader.

BONUS...

Material UI popup - Minimal Button with Amazing Hover Effects - Fancy Hover Animation #2 - CSS Image Comparison Slider - Multiline padded text: experiments - CSS3 buttons hover effects with FontAwesome5 - Opening Credits - CSS3 Glass Buttons v2 - PaperTooltip - Perspective Mouse Scroll - CSS button with bubbles - SVG water effect - CSS only drop down menu - Slider on hover - Custom Checkbox Slider with Label - Sticky Progress - Four Side Navigation - CSS-only ripple toggle with dynamic text colour - Image Scrambler Ft. Hunter the Pup! - 3D Retro Buttons - Emerging dropdown - Folding Profile Gallery - CSS Reflection - Overlay menu - Simplicity 6 - Minimap with CSS element() & HTML input range - Hotel page concept - position sticky can do a lot - CodePen Portfolio Generator - Search Box Focus Effect - Select Text And Share - Expanding grid on click - iFrame Preview on Hover - GLITCH

Sepertinya pada tahun 2019 ini saya akan banyak menjadi silent reader dari pada posted writer :D :-h

Try-It-Yourself Code Editor Offline ++

Setiap bertemu dengan bagian akhir kebanyakan dari kita mengucapkan, tidak terasa sudah di penghujung tahun 2017 lagi yah! Dilanjutkan dengan, selamat datang tahun baru 2018...WTF. Dengan seiring bergantinya tahun ke tahun sudah tentu diikuti dengan silih bergantinya sesuatu itu sendiri. Yang tua digantikan sama yang muda, yang usang jadi baru kembali, siklus ya begitu 3:-O
Di penghujung tahun ini, AA Koben akan berbagi sedikit informasi ringan. Apakah kalian penggemar dari Font Awesome? Silahkan sikat versi terbaru yaitu Font Awesome 5 Released! Kurang seru kalau awesome cuma sejenis! Nih awesome yg lain buat kalian agar lebih awwsome lagih emoji-awesome. Salah satu trik jika ingin membuat emotikon tanpa menggunakan javascsript, full CSS dan image doang B-)

Salah satu andalan bahan untuk postingan di blog ini adalah mengenai HTML Editor Saya tidak bosan² berburu terus sampe bosan =)) Menclok di blogsite www.bachors.com, silahkan sobat kunjungi sekedar melihat-lihat. Ican Bachors lumayan punya proyek/coding yg bisa kalian comot :D Ini salah satunya

Code Sandbox Fiddle

Kalau kurang, silahkan dipilah-pilih saja mau yg mana:

• jstinker by eakman.
• jstinker by johncipponeri.
• Tiny-editor by lipten.
• codeFiddle by sw4.

Saya sendiri sudah buatkan satu Try it Editor hasil nyomot buat kalian, itu juga kalau mau ;))

Sebenarnya kepunyaan javascriptkit.com :D Gue hanya ngedit sana-sini biar sedikit full style. JavaScript Kit Try-It-Yourself code editor di bangun menggunakan the high performance code editor for the web is ACE. Saya nemu ini juga danielsadventure.info/HTML5FileDemo/SaxonInterface.html gak tauk buat apaan. Ke dua tools tersebut bisa sobat miliki secara gratis :(|)

Download editor.javascriptkit.com via Google Drive.
Password .7z 2%!7%!-ZQBe^4g&K

Ini mah cuma iseng saja, silah cari ada tools apa saja di site ini Index of /, kalau ketemu bisa kalian miliki =))

Bai bay...:-h

Stylish Tools For You Bloggish

Ketika sobat mengunjungi web codepen, coba tengok halaman fork, project atau new code. Begitupun coba biasakan oleh kalian ketika menyatroni web github, acak-acak halaman Repositoriesnya. Memang butuh waktu santai kalau mau melakukan itu semua ;)) Oke, saya akan berbagi karya cipta dari hasil mengacak-ngacak one repositories page git-hub by victornpb! This is the page victornpb (Victor) repositories. AA Koben menemukan ini urlchecker! Karena tidak ada demo page, maka saya download dulu, tampaklah seperti ini:Namanya urlchecker, mungkin tujuan kreasi itu adalah untuk mengecek url apakah masih aktif/tidak yang akan tampil di dalam konten iframe. Dulu saya pernah membuat hal serupa (menampilkan web pada kolom frame meny style), tetapi lupa judul postingannya :D
Dikarenakan tampilan url-checker masih polos, saya coba memasukan bootstrap by bootstrapious. Ternyata cukup memusingkan harus tahu selector, description, identify bla-bla-bla untuk membuatnya #:-S Hasil akhir Fitur apa saja yang gue tanamkan di sana...hohoho :-"

Mini CodePen in 439 Bytes get from Tommy Hodgins.codegolfIDEmarkdown-herebrowserpadjQuery MiniColors

Itulah fitur-fitur yg gue cekokin, di samping fitur tersembunyi lainnya! Apakah sobat tertarik memiliki itu semua? Silahkan beli seharga $1 billion =)) Download saja, kemudian silahkan kalian tes-tes dan pelajari sendiri karyaku ini :-B
Download here urlchecker modification by Beben-Koben URLchecker-Project.7z - Google Drive.

Kalau websitenya pakai anti iframe, tidak akan muncul, dan kalau ada website yang memasang ikaln popup akan terdeteksi, sobat tinggal pencet tombol TAB pada keyboard untuk mengizinkan.

BONUS

To-do List with animated interactions - Text Image Mosaic - Menu - Radio Button Group with Gradient - Image loading effects [background-size: 0, :before, :after] - CSS Mega Menu - CSS 3d box - editable content - Product Template powered with Bootstrap - Pure CSS Drag & Drop - Morphing Fullscreen Navigation Menu [~60fps animation]

Tunggu karya-karyaku yang lainnya okeee *-:) :-h

CloudEdit HTML Editor Offline with Extras

Dapat korban baru lagi untuk dijadikan mode offline working >:) Tidak sengaja menclok ke blog.kangrian.com ternyata gue tengok ada artikel dengan judul berbau-bau "HTML Live Preview Editor Online" Kemudian pada main menu ada link tertuju ke editor tersebut! Pas saya lihat WOW so smooth HTML editornya ;)) ane coba dan JRENG tidak jalan 8-X Usut punya problemo sepertinya dia lupa menghostingkan seluruh script yang ada ke hostingan miliknya! Teliti itu karya punya source ternyata datang dari TheInsomniac CloudEditCloudEdit.

Sama Kang Rian di modif dengan menambahkan ini-itu. Sama AA Koben di modifikasi lagi dengan tambahan yang lebih edan punya B-) In screenshotTerlihat sama saja iya kan bro ;)) Cloudedit HTML-editor jika sobat melakukan klik kanan pada area kotak akan tampak beberapa framework yg sudah tersedia antara lain:Autoprefixer, Less CSS, Sass CSS (experimental), bootstrap, dll. Editor ini juga sudah langsung terintegrasi dengan jQuery script. Jadi kalau sobat mau bermain-main dengan jQuery/JavaScript tinggal pakai. Berikut beberepa extra yg gue sisipkan!

ColorPicker

Live HTML Escape Editor

Live Less Editor

Live Markdown Editor

Playground for Sass.js

HTML, CSS & JavaScript Minifier/Maxifier

Mudah-mudahan semua file source sudah terambil dan dapat berjalan dengan offline secara maksimal :)
Silahkan: drive.google.com/open?id=1NzLofctFU6t9Da0GuIxIQl0B-U0HZawM
Pass .7z: hL*J3WK-W%fxV=_&

Hadiah halloween :(|)

BabelJS and ECMAScript Web Offline to Learn

Seperti yang sudah kita lihat dan ketahui bersama terjadi pembaharuan di sana-sini :D Halaman depan login google bertambah dinamis, penampilan youtube jadi keren! Begitupun dengan dunia script dan CSS sudah terjadi kemajuan yg sangat signifikan. Apakah sobat pernah membaca/mendengar tentang webpack, WebModule, Yarn, npm, Node.js, AngularJS, herokuapp, Firebase, REPL, IDE, etc. Saat ini sedang ngetrend penulisan baru bahasa JavaScript secara khusus dan secara umumnya banyak apps dan web menggunakan metode module? Belum lagi bahasa tersebut di compiler, di encode di encrypt dan tetek bengek lainnya. Yang pasti membuat kepala puyeung @-)

Salah satu next generation JavaScript itu adalah si babel! Berbasiskan bahasa pemograman bahasa JavaScript yg sudah dibekukan (ECMAScript) kita dapat melakukan compiler penulisan JavaScript standar menjadi canggih. Syntax² di rubah menjadi simpel & rumit :)) Padahal aslinya ya biasa saja, tetapi itulah kehebatan era sekarang, semua serba canggih :-bd
Saya tidak mengerti tentang script, saya cuma user (pemakai, penikmat, n pemerhati) saja.

Don't ask about JavaScript to me, i can not. I am just a user.

Adapun sarana untuk belajar, jika sobat memang mau mendalami fitur script/code saat ini, bejibun web online menawarkan jasa! Sebagai user yg baik saya hanya bisa menawarkan salah satu teknik belajar dengan metode website offline >:)
Korban untuk saat ini web yg dibuatkan offline ama gue adalah babeljs.io, ECMAScript 2015 Language Specification, and ecma-international.org_ecma-2627.0

Karena ini offline, fitur module, export, import atau yg lainnya tidak akan berjalan! Kecuali sobat bisa mengakalinya dengan mendownload salah satu module secara offline juga, sotoy mode on :D

ECMAScript (or ES) is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations.

Pada halaman home babeljs, semua link saya hidupkan (tertuju pada tujuan), tetapi untuk halaman² lainnya tidak saya koreksi, maaf capek buat karena saya buatnya manual alias comot modal lihat source #:-S

babeljs.io.7z - ECMAScript.7z

Password for babeljs.io.7z The compiler for writing next generation JavaScript
Password for ECMAScript.7z Welcome to Ecma International

Semoga dengan adanya alat bantu web offline ini bisa membuat sobat lebih rajin dalam belajar.

Thanks to: GitHub, Google, Babeljs, Ecma, stackoverflow, codepen, all kindest people in the world, etc.

Adios amigos parantos, leos...\m/

Get Free 12 Mini Web Tools by Tovik

Update post dikit ah tentang tools dan pasti akan berguna bagi kalian para blogger yang suka bermain dengan koding-koding. Untuk nambah koleksi juga bisa loh! Walau disibukan dengan pekerjaan di dunia nyata dengan aktifitasnya di rumah sakit dan kesibukan di dunia maya dengan ulik-ulik code, master Taufik Nurrohman telah berbaik hati meluangkan waktu untuk membuat mini web tools bagi kita semua :)
Ada 12 tools yg sudah gue kumpulkan karya dia. Semua AA Koben bungkus dengan balutan tampilan meny karya master Hakim El Hattab. Kurang lebih jadinya akan mirip begini bro aplikasi HTML revealing CSS3 menu offline!

On screenshoot
Semua tools beroperasi secara offline ;)

Download Mini_Web_Tools_in_meny.zip in Ziddu: downloads.ziddu.com/download/25448251/Mini_Web_Tools_in_meny.zip.html
Mini Web Tools in meny unduh di 4shared: www.4shared.com/zip/xdxmJnSWce/Mini_Web_Tools_in_meny.html

Password: nama foldernya tanpa .zip

Resize image in browser with high quality and high speed nodeca/pica.

See you :-h

Make a Simple CSS Dropdown Hover Technique.

Melanjutkan tema postingan sebelumnya mengenai bumpy lists for full style lists content. Jadi artikel sekarang masih berkutat seputar klik srot merosot :P Ada yang bilang dropdown dan ada pula yang berkata select box! Kalau dilihat-lihat berbeda namun ada kemiripan dalam fungsinya? Satu yg pasti tetap srot merosot bro =)) Sekarang AA Koben akan berbagi tutorial bagaimana cara membuat CSS dropdown with hover. Jadi ketika melakukan sorot, akan merosotlah konten...tidak perlu repot-repot ;))

.dropdown {
z-index: 1000;
position: relative;
margin: auto;
width: 250px;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .selection {
position: relative;
cursor: pointer;
background-color: #F1F1F1;
color: #737373;
padding: 10px;
z-index: 100;
border-radius: 3px;
margin-top: 20px;
}
.dropdown .selection:after {
position: absolute;
content: '';
top: 50%;
right: 8px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 8px solid transparent;
border-bottom: 0;
border-top: 8px solid #737373;
width: 0;
}
.dropdown .options {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 100%;
min-width: 100%;
background-color: #FFF;
height: 0;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .options div {
padding: 0 10px;
cursor: pointer;
line-height: 1.5;
}
.dropdown .options div:hover {
background-color: #F1F1F1;
color: #333;
-webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown:hover .options {
height: auto;
padding: 10px 0;
}
.dropdown:hover .selection {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown:hover .selection:after {
border: 8px solid transparent;
border-top: 0;
border-bottom: 8px solid #737373;
}

<div class="dropdown">
<div class="selection">Selected</div>
<div class="options">
<div>List 1</div>
<div>List 2</div>
<div>List 3</div>
<div>List 4</div>
<div>List 5</div>
<div>List 6</div>
<div>List 7</div>
<div>List 8</div>
<div>List 9</div>
</div>
</div>

DEMO: codepen.io/beben-koben/full/xVooVq/

Ada satu lagi yang unik dan simpel, namun ada persamaan. A Pen By Kriszta talk about Card fold down effect with dynamic height. Jika sobat berminat, AA sudah meminimalisir kode yg ada tanpa mengurangi gaya full.

.task {
width: 50%;
min-width: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.abstract,.details {
width: 100%;
color: #282828;
padding: 1px 20px;
position: relative;
background: #fafafa;
}
.task:hover .abstract, .task:hover .details {
background: #fafafa;
}
.abstract {
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.details {
max-height: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotateX (-180deg);
transform: rotateX (-180deg);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .3s transform ease;
transition: .3s transform ease;
}
.details:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: grey;
}
.task:hover .details {
max-height: none;
overflow: visible;
visibility: visible;
-webkit-transform: rotateX (0deg);
transform: rotateX (0deg);
}
.details__inner {
padding: 1px 20px;
}

<div class="wrap">
<div class="task">
<div class="abstract">
<h3>TITLE</h3>
<p>This is sub TITLE.</p>
</div>
<div class="details">
<div class="details__inner">
<h3>When HOver</h3>
<p>This additional content when hover.</p>
</div>
</div>
</div>
</div>

Dah begitu saja ya!

BONUS:
CSS only Select - Dropdown Menu Animation - Select Box with Placeholder [CSS Only] - Facebook Reactions (Mother's day sneak peak) - Distorted Button Effects with SVG Filters - Masking in the Browser with CSS and SVG - Making a scroll-dependent menu bar with CSS3 and JavaScript - Animated Transition Effects - CSS Dropdowns - How TO - Hoverable Dropdown - It's Drop Down but It's Select Box too Use CSS

Free Tryit Editor v2.8 W3schools for You

Sebagai seorang bloglang (blogger petualang) dan kolektor editor (HTML editor) gratisan and Open source sekarang AA Koben akan berbagi kembali Tryit Editor kepunyaan si w3schools. Pada saat ini sudah mencapai versi 2.8 Sebelum itu coba sobat lakukan searching di blog gue dengan keyword try it editor Berikut penampakan original Tryit editor w3schools:Jika kalian perhatikan pada pojok kanan atas terdapat opsi horizontal atau vertical display! Koben sebagai insan manusia paling baik di seluruh jagat alam raya, sudah menambahkan opsi lain yaitu: get file on local storage, refresh button and color picker kepunyaan si w3schools juga :))
Check this out bro:Sudah pada ngiler kepengen yach =P~

>> Tryit Editor v2.8 Unduh di 4shared: www.4shared.com/archive/uJ_yWjZ8ce/Tryit_Editor_v28.html
>> Download Tryit_Editor_v2.8.7z in Ziddu: downloads.ziddu.com/download/25341000/Tryit_Editor_v2.8.7z.html
>> Password 7z:

BONUS

POP Out Navigation - - Display CSS with CSS - Visualizing Hidden Tags - Drag and Drop Pixel Art Generator - Super Random Color Generator (updated) - Social-share button - Legend Effect for Galleries - Day/night switch - Spotify Artist Page - Menu concept - Animated Social Buttons - SunFlick.js - Trapdoor nav idea - Canvas Paint - css3 animated button loading state - CSS Accordion - Simple line animation - underline left-right - Using pseudo-elements & collapsing margins to start text columns - Window manager: Min, max, close, resize all sides, drag and drop, focus - 3D Styled CSS Browser Mockup - Variable Longshadow with Gradients Mixin - Header Search Concept

Bye :-h

Gift End Year Multi Web Editor Free Download

Menjelang akhir tahun 2015 dan kita songsong tahun baru 2016, AA Koben kembali berbagi kreasi tentang multi web editor! Multi web-editor adalah editor yang berjalan pada mesin browser layaknya notepad. Di sini gue menggunakan ACE sebagai source file dalam membangunnya. Jadi dengan ace kita sudah bisa memilih jenis bahasa yg akan kita tulis. Theme sudah bisa disesuaikan menurut selera masing-masing. Agar lebih jelasnya gue akan kasih info berupa screeshot...
Penampakan
Sebelum memulai edit mengedit terlebih dahulu sobat pilih jenis bahasa yg akan digunakan.

Pilih theme sesuai kesukaan.Pilih jenis font mau apa sudah tertera di sana.Huruf bisa di rubah ukurannya sampai sebesar buta hejo kecil sekecil kutu kupret.Sobat bisa memanggil file data dari local storage.Embed color via windows, jadi bisa tau kode warna.Sobat bisa lakukan save dan download sesuai extension.Lambang silang: bisa melihat preview dari format HTML. Lambang refresh akan melakukan reload full page. Pada embed ace gue sudah aktifkan LiveAutocompletion Jika sobat kepengen mengaktifkan fitur ace yg lainnya silahkan di edit pada folder scripts cari script.js

Demikian saja penjelasan singkat. Silahkan di download guna icip-icip.

www.4shared.com/archive/oHDhjSiPba/Multi_Web_Editor.html
downloads.ziddu.com/download/25147482/Multi_Web_Editor.7z.html
Pass: tutorial_blogspot-for-stylish~blogger

Bagi sobat yg kepengen merasakan HTML editor sensasi codemirror and emmet bisa sikat di HTML Editor Live Preview Source by Emmet & Codemirror.

Thanks to:
jsdo.it/s.yoshiki1123/1htK, tympanus.net, github.com, stackoverflow.com & google.com :D

Happy editor \m/

What Your Choice Bootstrap or Material Design Google

Sejak Google mengumumkan Material Design dengan pengenalan Android 5.0, sejumlah besar kerangka front-end muncul dengan tujuan membawa konsep untuk aplikasi web. Pada awal Juli 2015, Google merilis framework baru yang mudah digunakan. Ini disebut Material Design Lite, dan itu ditujukan langsung pada framework populer seperti Bootstrap
Tapi manakah yang lebih baik? Untuk mengetahuinya maka kita harus membandingkan bootstrap dengan google's new material design lite! Master Danny Markov dari tutorialzine sudah membuatkan 10 jenis perbandingan yg mana meliputi dari Grid, Header Navigation, Footer, Tabs, Buttons, Tables, Froms, Dropdown Menu, Tooltips and Icons.

Jika sobat kepengan tauk seperti apa bagaimana bentuk aksi perbandingan dan keterangan jelasnya silahkan kunjungi web tutorialzine.com/2015/07/comparing-bootstrap-with-mdl.
Sebagai kolektor apps.html offline mode supaya belajar tenang (irit koneksi internet), AA Koben sudah membuatkan embed file comparing bootstrap with mdl yg ada di halaman tutorialzine demo berjalan secara off-line :D Gue buat dikombinasikan dengan teknik meny dari master Hakim El Hattab. Beberapa contoh hasil karya meny from me for you bro... or meny iframe with function onload event :P

Comparing Bootstrap With MDL Unduh di 4shared
www.4shared.com/zip/cCxUjBGCba/Comparing_Bootstrap_With_MDL.html
Download Comparing-Bootstrap-With-MDL.zip in Ziddu
downloads.ziddu.com/download/24934929/Comparing-Bootstrap-With-MDL.zip.html

Extra source:

Tutorials for learning google material design.
>> webresourcesdepot.com/tutorials-for-google-material-design
Pens tagged 'material design' on CodePen.
>> codepen.io/tag/material%20design
Google material design a collection by Chris Coyier on codepen.
>> codepen.io/collection/amheq
Responsive web sites inspired by google material design.
>> www.w3schools.com/w3css/default.asp

Happy material \m/

Create a PDF file in your favorite browser

Masih ingat dengan artikel post pdf viewer for browser mozilla & chrome! Sebuah apps .html untuk bisa membuka & menampilkan files dengan format PDF di browser engine? Sekarang gue mau bagi satu apps lagi yang masih beroperasi pada browser engines yaitu pdfmake. PDF make is Client/server side PDF printing in pure JavaScript! Kalau penjelasan versi saya mungkin begini, membuat file PDF di mesin browsingan :D

Source n download: github.com/bpampuch/pdfmake
Mirror: www.4shared.com/zip/GsYzoqHUba/pdfmake.html Pass .ZIP: bpampuch.

Sebenarnya dengan software pdf editor kita sudah bisa melakukan banyak hal. Tetapi sebagai user offline process in browser, gue pasti akan selalu berbagi hal-hal apa saja yg bisa beroperasi pada browser engine ;) Begitu saja postingan hari ini, maklum lagi shaum gak banyak basa-basi-bacot :D perbanyak amalan akhirat O:-)

BONUS

Add whatsapp smileys on Blogger Posts and Comments ► bit.ly/1HlWoix - Checkbox Trickery with CSS ► bit.ly/1HlWqH3 - Open Modal with CSS ► cssdeck.com/labs/open-modal-with-css - Sliding Radio Button Menu ► cssdeck.com/labs/sliding-radio-button-menu - Animated popup menu ► cssdeck.com/labs/s5pgj1of - Animated border menu ► cssdeck.com/labs/3xkmmii0 - Off-Canvas Menu ► codepen.io/ryanmorr/pen/ZGXLXd - Grid Menu Button ► codepen.io/joshmantis/pen/bdoZwa - CSS accordion no-js ► cssdeck.com/labs/gngi13bd - marklib ► bowlingx.github.io/marklib

Happy Ramadhan Kareem :)>-

kodeWeave HTML Playground for Free

Sebenarnya tempat koleksi link tempat playground HTML editor gue sudah buatkan pada posingan dengan judul From Me To You...HeHeHe. Ternyata sekarang ada satu web anyar yang berjasa memberikan info link website seputaran list tools dan resources pilihan serta ide buat kalian yg ingin lebih mengetahui dunia web-site wwwhere.io
Karena tema HTML-editor merupakan salah satu tema post andalan pada blog ini, maka AA Koben akan berbagi kembali mengenai hal itu :D Still beta pliss introduce Feditor.IO and more full stylish you must check this one bootstrap snippets, code patterns and playground www.codeply.com/go

From master Michael, github nick is mikethedj4 he has made coding playground to export your HTML5 web apps as native desktop and mobile apps! kodeWeave adalah salah satu playground HTML paling komplit dalam menu-opsi yg pernah gue temuin untuk saat ini. Sudah opensource dan di buat dalam beberapa bentuk.

• kodeweave.sourceforge.net
• github.com/mikethedj4/kodeWeave
• developer.mozilla.org/en-US/demos/detail/kodeweave
Bonus...
• github.com/mikethedj4/mmd

Saya akan bantu menerangkan menu-menu yg ada di apps KodeWave.html ;))

>> Gambar kunci inggris kiri pojok atas: Lorem Ispum generator Upload file & embed color code generator.
>> Gambar buku: Option for add language scripts.
>> Gambar orang: Jika sobat ingin berbagi/berkolaborasi kode (This is fiture by togetherjs must Online mode on)
>> Gambar disket jadul: Opsional download mau versi apaan. 8 opsi choose for download!
Ada deretan tombol, gunakan scroll pada mouse untuk melihat semua. Tombol² tsb merupakan shortcut pilihan! Pada pojok kanan atas dengan gambar phone adalah opsi display bisa di ganti dengan 3 pilihan. Pojok paling kanan atas dengan gambar bingkisan kado tempat contoh-contoh tutorial yg mana kode/script akan otomatis ditempatkan pada editor.

Kalau sobat download dari link sumber mungkin ada beberapa address link yang masih tertuju pada web-host. Gue sudah buatkan via offline termasuk link² yg ada pada gambar buku dan gambar bingkisan kado. Kalau tidak jalan berarti memang harus online ;))
Download kodeWeave via 4shared www.4shared.com/zip/u_uQS0q3ba/kodeWeave.html
Download kodeWeave.zip in Ziddu downloads.ziddu.com/download/24516142/kodeWeave.zip.html
Password kodeWeave_mikethedj4

Happy playground \m/

Get Free 10 Tools For You

Salah satu cara dalam urusan mempercepat loading web/blog adalah dengan melakukan kompres CSS! Berbagai jenis tools compressor banyak tersedia. Sekarang AA Koben akan berbagi tools CSS minifier dengan nama CSS Shrink by master Stoyan Stefanov! Sobat dapat melihat penjelasan dalam bentuk slide share cssshrink.com/velocity dan playground pada halaman cssshrink.com. Sebagai bloglang peselancar dunia maya terbaik, gue telusuri sumber dari shrink, and AA dapatkan 10 tool buat hiburan kalian ;)) (perhatikan navigasi menu)Berikut tools-nya:

1. BSCSS
Browser specific CSS demo.
2. Colormin
Minify CSS colors playarea.
3. CSS Min
This CSS minification tool uses a JavaScript port of the YUI Compressor.
4. CSS Shrink
CSS minifier.
5. CSS JS
Parse CSS to JS
6. CSS Lexer
I dont know what is this :D
7. Gonzales AST
This is library to help navigate CSS AST produced by the Gonzales CSS parser.
8. Mensch
CSS parser and stringifier.
9. Prettyugly
CSS uglify/prettify.
10. CSS properties
Test which CSS properties are supported by your browser. CSSProps project gathers data for the BSCSS project.

Apakah sobat tergiur dengan semua itu? You can get all for free :))

Unduh cssshrink-master di 4shared by Beben Koben.
www.4shared.com/zip/C1KIJW13ce/cssshrink-master.html
Download cssshrink-master.zip in Ziddu.
downloads.ziddu.com/download/24401696/cssshrink-master.zip.html

Ekstrak folder cssshrink-master.zip ► Open Demo folder ► Happy play.
Jika pengen merubah kembali kode CSS yg sudah di kompres ke bentuk semula (beautify) sobat bisa mencoba tool Get Free Download 3 Tool Beautify Code. Kalau mau yg praktis sobat dapat mencoba alternatif lain di halaman prettydiff.com Itu jg sudah open-source bero ;)
Demikian dan terima kasih atas perhatian sodara-sodara :) Selamat bermain-main tool!
Source by: www.phpied.com, www.csspatterns.com, perfectionkills.com & github.com/stoyan

Terms and Conditions is apply & All rights reserved.

Password .ZIP : ToolsByStoyanStefanov

Yeah... \m/

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/

It's Not jsFiddle, It's Cloud Editor

Salah satu tema post favorit ane adalah mengenai HTML Editor Entah sudah berapa banyak yang sudah gue share buat kalian, silahkan cari-cari di arsip. Beragam HTML-editor kreasiku memiliki tingkatan, dari kelas sederhana sampai master :D Tidak tau sampai kapan akan berhenti menulis artikel tentang editor with live preview ini, selalu saja dapat yg baru dan full stylish ;;) ;))
Sobat tentu sudah pada kenal dengan playground editor keren yg bernama JSFiddle? Salah satu faktor orang akan selalu ingat dengan js-fiddle ini mungkin dengan komposisi tampilannya! Empat buah kotak terpisah guna menempatkan source code/script serta bilik kiri untuk bagian miscellaneous. Sekarang AA Koben akan kasih buat anda Cloud Edit is a JSFiddle like code editor features with jQuery and ace editor b-)

Buka halaman jqueryscript.net dan cari tombol

DownloadDapatkan file source www.jqueryscript.net/text/Creating-A-JSFiddle-Like-Code-Editor-with-jQuery-ACE-Editor-Cloud-Edit.html

Sudah beres, kalian mendapatkan editor baru seperti jsfiddle! Di sini saya akan cerita-cerita sedikit fitur apa saja and fungsi yg ada pada cloud-edit. CloudEdit dibuat dengan penanaman fitur script jQuery, Ace & Emmet!

jQuery - Telah ditanamkan script-jQuery pada embed sehingga mendukung untuk melakukan tes terhadap snippet jQuery. Tidak usah lagi pasang script jQuery inti versi 1.x! (letak berada pada kotak ke-3 JavaScript/jQuery 1.x)
Ace - Guna mendukung high performance pada editor pemasangan syntax highlighter ACE menjadi pilihan. Ada beberapa pilihan opsi themes light/dark.
Emmet - Guna mempermudah penulisan syntax, EMMET terpilih menjadi acuan.

Selain ketiga fitur tersebut, ada beberapa fitur lain yg tidak bisa dianggap remeh L-)
CSS Option meliputi Autoprefixer, Less CSS, Sass CSS (experimental) and modernizr. Frameworks mencakup Bootstrap and Foundation. Deretan tombol berjejer dengan multi fungsi, silahkan dicoba masing-masing. Gue cuma akan jelaskan fungsi 2 tombol yg ada. Tombol save memiliki fungsi melakukan save di local storage. Tombol load berfungsi memanggil kembali pekerjaan dari tombol save!

Pada si ace sebenarnya ada fitur Autocomplete. Yang ketika menuliskan sesuatu akan diberikan opsi pilihan. Gue sudah tanamkan script tersebut! Tetapi pada kotak HTML tidak berjalan mulus, namun berjalan baik pada kotak CSS & JavaScript/jQuery. Mungkin bentrok dengan si emmet, dan saya blon paham script jadi kagak bisa benerinnya :))Screenshot CloudEdit hasil modifikasi AA sudah tentu ada autocomplete yg tidak ada pada original source :P Apakah sobat tertarik mendapatakannya >:) Oooops ampir kelupaan, ada juga kotak console tidak tauk saya cara pakainya, yaaa jadi gak apa-apa lupakan saja 8-}

Password ZIP: jQuery Cloud Edit by www.jqueryscript.net
Bonus, simple mode github.com/sw4/codeFiddle - github.com/nadiahamdaoui/CodeEditor

Happy fiddle \m/

CSS3 Transform Playground Basic

Master Beben Koben :D sekarang akan bercerita mengenai CSS3 transform property. Transformasi properti menerapkan transformasi 2D atau 3D ke dalam sebuah elemen. Properti ini memungkinkan kita untuk melakukan rotate (memutar), scale (skala), move (memindahkan), skew (miring), dll. Ada layaknya sobat harus mengetahui terlebih dahulu browser versi berapa yang sudah mendukung terhadap hal ini!

Property	Chrome	IE	Mozilla	Safari	Opera
transform (2D)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
transform (3D)	36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	4.0 -webkit-	23.0 15.0 -webkit-

Gue sekarang akan cerita tidak menggunakan kata-kata rangkaian kalimat melainkan dengan berbagi embed form playground play it. Dengan teknik ini, sobat bisa melihat secara langsung efek yg terjadi dengan property values dari CSS3 transform. Berikut beberapa value: none, matrix, translate, scale, rotate, and skew.

Singkat cerita, playground catutan ini versi basic untuk melihat efek-efek yg dihasilkan dari CSS3 transform

Download dulu file, lalu silahkan bermain-main dengan si transform ;))

• Download CSS3-transform-Property.7z in Ziddu
downloads.ziddu.com/download/24265613/CSS3-transform-Property.7z.html
• CSS3 transform Property unduh via 4shared
www.4shared.com/archive/q3mx0HIoba/CSS3_transform_Property.html

Resources by:
>> www.w3schools.com/cssref/css3_pr_transform.asp
>> codepen.io/aarongustafson/pen/jEryLV
Bonus
>> css3playground.com
>> playground.deaxon.com/css

Happy transforms \m/

Get Free Four HTML Editor for You

Artikel dengan tema HTML editor entah sudah saya post berapa kali? Silahkan sobat-sabit lihat sendiri or searching guna mendapatkan tool keren live HTML-editor tersebut. Sekarang AA Koben akan bagi-bagi hal serupa :D Karena memang tidak ada topik keren buat di tulis ;)) :"> Saya akan kasih kalian empat macam .html yaitu htmledit, HTML-Try, scratchpad dan fiddly. Keempat-empatnya dapat berjalan secara offline ;) Maaf jika ada fitur yang tidak berjalan, karena memang harus online. Gue cuma mau berbagi buat playground saja. Bermain sambil belajar kode-kodean!!!

A simple web-based HTML editor.

HTML Online editor and see it.

Real time HTML editor with preview.

Test your Javascript, CSS and HTML online with Fiddly code editor.

Bagaimana penampakan screenshot ke-4 editor di atas! Apakah sobat kepengen memiliki itu semua?

• HTML Editor Unduh dari 4shared
www.4shared.com/archive/zO52nRsLce/HTML_Editor.html
• Download HTML-Editor.7z in Ziddu
downloads.ziddu.com/download/24239509/HTML-Editor.7z.html

Password 7z is: Beben Koben si Bloglang anu Ganteng Kalem Tea

Bye :-h

Learn Markdown use Markdown-Edit and to-Markdown

Bagi seseorang yang keseharian bertemu dengan fasilitas internet (online-online), mau mencari apa saja baik itu solusi, bahan pekerjaan, musik, video, aplikasi atau apapun bisa langsung mencari via search engine. Begitupun anda dan saya sebagai blogger penuh gaya (full stylish blogger) mau itu-ini tinggal searching ;)) taraaa...jreng...ketemu deh. Hari ke minggu, week to the month, bulan ke tahun dirasakan semakin berat untuk membuat 1 artikel yang memiliki bobot. Mentok ide bro :))
Berbicara mengenai markdown AA Koben mau melakukan update satu artikel dari postingan it's all about markdown syntax.

Gue akan beri kepada kalian dua buah tools keren punya tentang markdown editor b-) By georgeOsdDev he's created about markdown-edit, and by domchristie he's make to-markdown. Kenapa saya jatuhkan pilihan hanya kepada 2 opsi di atas? Menurut ane dengan memiliki kedua tool tersebut sudah dapat di bilang mewakili kita untuk belajar ria dengan syntax markdown ;)
Berikut spesifikasi:

Markdown Edit

• Hasil generate sudah mencakup raw.md, raw.html, and .html
• Ready added auto reload, enable shortcut key, marked for converter & you can use github API for converter.

Karena tampilan editor yg di usung sudah berupa syntax markdown (kotak sebelah kiri), maka sobat harus sudah familiar dulu dengan bahasa mark-down. Kalau untuk urusan convert HTML dasar ke syntax markdown, daripada itu gue comot to-markdown sebagai tool pendukung :D

Sebenarnya sudah bisa langsung download pada halaman source masing-masing kedua tool

1. Online markdown editor/viewer.
github.com/georgeosddev/markdown-edit
2. An HTML to Markdown converter written in JavaScript.
github.com/domchristie/to-markdown

Karena AA baik hati, maka sudah saya buatkan sebundel buat anda

• Markdown edit unduh via 4shared.
//www.4shared.com/zip/ODeCLMzDba/Markdown_Edit.html
• Download markdown-edit.Zip in ziddu.
//downloads.ziddu.com/download/24104115/Markdown-Edit.zip.html

Bonus links kalau mentok ide...

codepen.io/jaeming/pen/EwsqC - codepen.io/marionebl/pen/fensm - codepen.io/domakas/pen/vJgyf - codepen.io/codeandcam/pen/AmtvB - codepen.io/zadvorsky/pen/dILAG - codepen.io/zadvorsky/pen/oqhgp - codepen.io/codeandcam/pen/ixgHf - codepen.io/edadams/pen/Gqteo - codepen.io/satya164/pen/HpFAD - codepen.io/SitePoint/pen/HFnfB - codepen.io/vsonx/pen/aFnHi - codepen.io/LukyVj/pen/GeFKD - codepen.io/netzzwerg/pen/hfutI - codepen.io/Birky/pen/nFLmK - codepen.io/JustAnotherCoder/pen/gIqtp - developer.mozilla.org/en-US/demos/detail/playlist-player - developer.mozilla.org/en-US/demos/detail/css3-windows-8-animation-demo

Bye :-h

Download Pelajaran Tajwid ilma95 Offline

Sudah sepatutnya kita panjatkan rasa syukur yang sebesar-besarnya kepada Alloh Subhaanahu Wa Ta'ala, yang masih memberikan nikmat umur kepada kita sekalian. Semoga dengan sisa umur kita yg sekarang, kita masih diberi kesempatan bertemu dengan 1 bulan mulia yg penuh dengan rahmat-Nya yakni bulan ramadhan. Serta tak lupa kita curahkan shalawat dan salam kepada junjungan alam nabi & rasul terakhir Rasululloh Muhammad Shallallahu 'Alaihi Wa Sallam beserta keluarga, sahabat dan pengikutnya hingga akhir zaman.

Salah satu kemuliaan di dalam bulan ramadhan seperti yg sudah kita ketahui bersama, pada bulan tersebut telah diturunkannya kitab suci mulia umat Islam Al Qur'an Al Kariim (Nuzulul Quran). Mari sobat sebagai blogger taqwa, isi bulan yg penuh dengan bonus pahala dengan memperbanyak membaca Al-Qur'an. Lebih hebat lagi mentadaburi isinya dan mengamalkannya pada kehidupan sehari-hari O:-)
Supaya membaca Al Qur'an kalian pada lancar alias tartil, maka dari itu harus tau aturan maennya! Beberapa aturan dalam membaca Al-Qur'an adalah: paham tajwid, tau huruf hijaiyah, tanda-tanda baris, bentuk-bentuk huruf, makhraj huruf, sifat-sifat huruf, hukum bacaan,...etc.

AA Koben dapat satu web yg mengkemas pelajaran tajwid dengan tampilan & navigasi sederhana agar enak dalam membaca.

www.ilma95.net/tajwid.htm

Setelah mengambil seluruh source n file yg ada pada web tersebut, gue melakukan satu misi penting lagi yakni meminta izin kepada empunya agar bisa di sěring 'n kêring secara offline.
Izin pun diberikan ;)) :">

Sederhana, bahasa lugas, contoh ayat beserta file .mp3 ready, mungkin satu kelebihan yg dimiliki web ini. Bagi sobat yg kepengen memliki web pelajaran tajwid situs keluarga ilma95 [erman, ema malini, fadhil ilma, ihsan ilma & salsabila saumi ilma] offline, monggo dihajar bleh :D

Via Ziddu: downloads.ziddu.com/download/23861321/ilma95.net-tajwid.zip.html

Via 4share: www.4shared.com/zip/LDOq_p92ba/ilma95net-tajwid.html

Password: www.ilma95.net/tajwid.htm

Dengan tidak mengurangi rasa hormat, Koben sudah menghilangkan beberapa bagian HTML yg terasa memberatkan size file ;) Semoga dengan adanya apps embed .html pelajaran tajwid, sobat semakin tartil dalam membaca Al-Qur'an. Semoga empunya situs dapat pahala :) gue mah dapat capeknya saja lah :))
Akhirul kalam...Wassalamu'alaikum Warahmatullãhi Wabarakãtuh.

Happy iqra` \m/