Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

2 Komentar WTF
Saya hanya ingin memberitahukan informasi ringan, yang mungkin dari kebanyakan orang sudah pada tahu info ini :D Sobat tentu kenal dengan dengan salah satu playground terkenal dengan nama codepen.io? Jika kita perhatikan secara teliti di dalam editor codepen sudah tertanam secara default beberapa macam Preprocessor! HTML preprocessor: HAML, Markdown, Slim & Pug. CSS preprocessor: LESS, SCSS, Sass, Stylus & PostCSS. JavaScript preprocessor: CoffeeScript, TypeScript, LiveScript & Babel.
Kita tinggal memilih saja apa yang akan digunakan dalam membuat sebuah hasil karya?

Lantas bagaimana caranya jika kepengen mencomot kode, namun kode tersebut di tulis dengan bahasa yg tidak kita tahu? Gampang bin mudah, sobat tinggal klik tanda arrow ke bawah yg berada di pojok kanan atas pada tiap-tiap kotak code. Kemudian elo pilih opsi View Compiled ... Dengan otomatis kode akan berubah secara instan ;))compiledSebagai contoh gue akan melakukan kompilasi kode SCSS ke CSS. Kunjungi halaman berikut CSS-only Notifications Component. Tidak mungkin kita langsung mencomot kode yg ada untuk di pakai di blog? Karena koding template blogspot tidak mendukung SCSS? Adapun hasil kompilasi akan menjadi banyak bro, karena penulisan syntax SCSS lebih canggih dari pada CSS!

Berikut link download hasil kompilasi dari postingan CSS only Notifications Component CSS Notifications.7z Jadi ada 33 gaya CSS notifikasi. Silahkan sobat pilih & pasang sesuai kebutuhan dan selera :)

CSS-Filter (blur) on image-caption - Codepen embed theme - Solarized light - All CSS Water Themed UI Demo - Movie Booking - Attract hover effect - CSS-only Fade Siblings on Hover - Social Icons vision 3D

7 Komentar WTF
Mau mosting apaan kok jadi bingung sendiri, rasa-rasa sudah ada semua di dunia internet ini apa yang kita cari ;)) Ada mesin pencari/penjelajah gunanya untuk mencari, carilah apa yang kita cari! Lantas kalau yg kita cari itu sudah tidak ada, bagaimana? Cara tercepat yaitu menggunakan jasa cache dari si search engine. Cara lain dengan menggunakan jasa bantuan Wayback Machine. Ada satu snippet jQuery untuk menerapkan Augment links jquery archival. Jangan lupa untuk melihat halaman hubgit repositories!

Ada satu blog lain lagi yg menarik, di mana artikelnya keren punya? Chris West's Blog (JavaScript, Math, and much more...) Gue baca tentang ini dari sono use canvas To watermark images. Apakah ada yg bisa melakukan custom pada script tsb agar dapat berjalan pada hyperlink normal?
Demo: codepen.io/atelierbram/pen/RgKLZK
Ada yg mau coba memendekan URL dengan metode emoji, try this Mosho. Untuk lazy blogger bisa mencicipi simple sharing buttons generator. Pernah bertemu dengan jssnip? Bagi yg lagi cari & butuh forms form CSS Forms From CodePen!

So cool bro Trendy CSS Text Shadows :-bd

The new object-fit property for cropping images in CSS. You can try this also exploring blend modes in CSS. Interesting posted create direction aware CSS only hovers effect. Chris Coyier’s favorite codePen by David Walsh some amazing work on CodePen and favorito CodePen Demos II.

Hampura O:-)

0 Komentar WTF
Di bulan suci yang penuh rahmat dan barokah ini, bulan yg sangat dinantikan oleh seluruh umat islam di penjuru dunia manapun RAMADHAN. AA lebih memfokuskan ke ilmu agama dulu dari pada ilmu blogging di bulan ini sob ;)) Ternyata tidak jauh berbeda dengan kebiasaan orang-orang pada umumnya di Indonesia kalau datang bulan puasa paling enak itu ngabuburit menunggu waktu berbuka :D Karena aktifitas kebanyakan di depan komputer, maka dari itu ngabuburitnya jalan-jalan ke blogs/webs resources bro! Sekedar melihat hasil jerih payah para coder berkreasi b-)

Siapkah anda berbuburit?

Subscribe Form on Event Scroll - Rainbow Trail (using dom elements) - Instagram Filter Rapid Prototype (Vue + CSSGram) - CSS3 Button Hover Effects with FontAwesome - Opening a letter - Text Decoration Skip Hack - jquery-resizable - Resizable Splitter Panels - Google Adwords | Simulador de Anúncios • Ads Simulator (Non oficial) - GRAVITY TEXT - Animated Stacked Pages - Swaying Vertical Tabs - CSS Tabs - Page Switching Using CSS Negation - Before & After Slider Gallery With SVG Masks - Customize the Browser's Scrollbar with CSS - random terminal/code colors (click for more) - CSS only nav with animated moving background - Front End Day 80 - Operating System Forms - Upload crop & save - Fit images with css - Stylish chat window design - Search in the navbar - classbxr Bookmarklet - Website Bookmarker

Input UI Animation - Bootstrap List Grid View - css custom properties explained - Animated menus palette for WordPress default menu structure - CSS Only Icons w/ Hovers (Font-Awesome Friendly) - Input Live Style Changer - Gradient Hover Effect - Wavy Shadows on a Flag using CSS Gradients - Sheen Hover - Accordion / Tabs with animation - Toggle Tabs - mouse position color picker (scroll for saturation) - generate random font combinations (Google Fonts, Vue.js) - Letter People Text Generator - Looking through Dirty Glass - Liquid button - foldable carousel - CSS effect for search input

simple 3D photo - Menu Effect Like windows 8 (beta) - Firebase Image uploader test #2 - Expand images - Menu effect like windows 8 2.0 - Simple image preview with mobile version - Mini lightbox - Css3 slide - Test hover effects Chrome - Simple lightbox

Lanjut...:D

Get color on click #2 - Take poster of video - Html demos with data uri - Data uri converter - Another Gallery - Gallery with list style - Experiment - The bottom - Gallery experiment - Amur leopard image gallery with CSS vars (responsive, WebKit only) - CSS Animated Header - Ten hover effects - Button hover effects with box-shadow - Animating typed chars - - - Pure CSS Slide Out Menu - Stacked Image Slideshow (feat. kittens) - Image Overlay Slider - Simplest Infinite Slider - ALL CSS Slider 4Slides with Dot Nav

Kunjungilah links di atas walau hanya sekedar menikmati karya orang, iciper :P

0 Komentar WTF
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.0home-babeljs
try-it-out-babeljsKarena 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/

0 Komentar WTF
Dalam belajar apalagi mendalami suatu hal, kita memerlukan sarana dan prasarana. Bisa berupa tools, aplikasi, web offline dan lain sebagainya. Kali ini AA Koben akan berbagi trik dan tips belajar dengan menggunakan cara offline web? Mungkin sobat blogger sudah pada tahu cara membuatnya! Yup, dengan cara mendownload semua konten-nya :))
Karena hobi saya mengkoleksi HTML editor, maka yang menjadi korban sekarang adalah monaco editor by Microsoft.
The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor's features is here.

It is licensed under the MIT License and supports IE 11, Edge, Chrome, Firefox, Safari and Opera.

The Monaco editor is not supported in mobile browsers or mobile web frameworks. About
Kenapa saya pilih Monaco-Editor karena pada bagian navigasi ada link dengan title Playground yang sudah barang tentu tools untuk coba-coba :P

Github Microsoft/monaco-editor - Demo Monaco Editor

Kalau sobat coba Save Page As... demo page-nya maka tidak akan jalan walaupun offline, mencoba download file yg ada di github sama saja tidak jalan offline :-? Beruntung saya sebagai user Mozilla Firefox halaman demo Monaco Editor bisa saya jadikan offline o-+

Jangan berharap semua fitur akan berjalan normal, namun saya pastikan 85% work offline. Dan satu hal lagi, semua ini berjalan pada browser mozilla. Di google chrome tidak jalan karena mesin ini melakukan encode pada setiap url link, dan gue males untuk men-decode b-(

home-monaco-editorPada halaman index/home monaco-editor ini berisikan tentang contoh penulisan language! Karena gue belet bahasa inggris, silahkan sobat pelajari sendiri :Dapi-monaco-editorHalaman Monaco Editor API v0.8.3 menceritakan cara kalau sobat mau async dengan key api :))
playground-monaco-editorSebenarnya yang mau saya buatkan offline itu hanya pada halaman ini saja! Karena penggunaan PATH dalam penulisan javascript, apa boleh buat dech #-o
monarch-monaco-editorMonarch Documentation :-? :-??

Tooltips berupa keterangan pada setiap kata tidak berjalan dikarenakan berada dalam satu paket webpack. AA tidak bisa menjangkaunya :)>-

Please read license of product!
This creation tested on mozilla firefox V42.0 and V52.0

UPDATE

Sekarang AA sudah bisa menjangkau tooltip (keterangan) untuk javascript-nya! Lebih jelas lihat screenshot berikut...Monaco-EditorPada halaman playground...Monaco-Editor-PlaygroundPada halaman monarch...MonarchSilahkan di download ulang bagi yg sudah mendownload file sebelumnya. Terima kasih :)

monaco-editor-master.7z on Google Drive.

Password for .7z is pLr6qtE-kB&uY$Fj5KWgfy-Sv7fcxySsJRz3rvn*5h8qv

Maafkan atas segala kekurangan, kebenaran dan kesempurnaan mutlak hanya milik الله سُبْحَانَهُ وَ تَعَالَى