Packages Favorit di Atom Editor

Atom Editor merupakan Text Editor yang dikembangkan oleh Github yang sangat powerfull dan free for use alias gratis ( Untuk sekarang...? ) dan berjalan di berbagai platform seperti Windows, Linux, dan juga Mac OSX.
Atom Editor dengan tagline "A hackable text editor for the 21st Century " memang layak disematkan pada Editor yang satu ini, karena bukan saja baik dalam segi fitur tapi juga memberikan efek bagi para pengembang untuk meningkatkan produktivitas dalam penggunaan nya dengan beberapa packages yang yang ada. Berikut ini beberapa packages yang mungkin harus Anda install untuk membantu keperluan ngoding biar tambah produktif (hehehe). Untuk menginstall bisa memakai command line apm / atom packages manager atau melalui Packages->Setting View->Install Packages. Oke langsung saja, berikut beberapa package-package nya :


1. EMMET
Package yang satu ini dalam penggunaannya sangat essential atau penting, karena Emmet mempercepat kinerja para developer dalam menulis kode. Dokumentasi emmet dapat dilihat Disini.
 
Install Via Apm : apm install emmet

2. COLOR PICKER
Package yang satu ini sangat berguna untuk pemilihan warna dalam css dan sangat efisien dari segi waktu agar tidak bolak balik photoshop :). Cara penggunaan hanya dengan shortcut CTRL + ALT + C.

Install Via Apm : apm install color-picker

3. ATOM BEAUTIFY
Bagi kamu..iya kamu :D, yang sering pusing kalau liat syntax yang ditulis berantakan mungkin ini solusinya, package yang satu ini sangat berguna untuk merapikan (indentasi ) kodingan dengan satu klik.

Install Via Apm : apm install atom-beautify

4. LINTER
Nah untuk yang satu ini sangat berguna buat memeriksa script dari error secara live dan meminimalisir kesalahan syntax yang ditulis.

Install Via Apm : apm install linter

 5. MINIMAP
Bagi yang menulis kode sampai ratusan line atau bahkan ribuan, bayangin aja kalau kita dapet error di line 1050 harus scroll kebawah, kan gak banget :). Minimap ini yang harus kamu gunakan biar jauh lebih efisien.

Install Via Apm : minimap

Nah itulah beberapa packages yang penting dan wajib diinstal menurut saya, masih banyak packages yang sangat berguna untuk kamu coba, untuk melihat packages yang lagi trending sampai yang terbaru kamu bisa kunjungi kesini https://atom.io/packages.
Demikian review singkat saya mengenai packages atom editor favorit, semoga sobat-sobat yang membaca dapat tertarik untuk ikut mencoba dan menggunakannya. Sekian dan semoga bermanfaat.

Cara Mendownload Video Dari Youtube Dengan VLC

Youtube merupakan salah satu situs berbagi konten video yang dimana sampai pada saat ini kita dapat menikmati hampir semua konten yang ada dengan gratis. Apakah sobat sering menonton video di youtube, tapi bingung cara mendownload video nya?. Ya memang mendownload video dari youtube susah-susah gampang, ada beberapa cara mendownload video yang kita inginkan, seperti dengan bantuan download manager ataupun pengaya tambahan yang disediakan oleh browser yang kita pakai. Eits, tapi pada kali ini saya tidak menggunakan kedua cara yang sebelumnya saya sebutkan, saya akan mendownload video nya dengan bantuan media player yang free dan open source yaitu VLC. Memang agak ribet sedikit, tapi apabila sobat sabar pasti akan mudah, hehehe.

Oke langsung saja, langkah pertama copy link video yang akan di download.

Buka VLC yang ada di komputer, klik kanan pilih open media > open network, lalu pastekan link yang sudah di copy ke kolom yang sudah disediakan, seperti di bawah gambar berikut. Lalu klik Play.

Langkah selanjutnya, pause video, klik kanan lagi pilih Tools > Codec Information atau shortcut nya CTRL + J. Lalu copy link nya.

Langkah Terakhir buka browser sobat, pastekan link dari codec information nya ke URL apabila sudah terbuka klik kanan lalu Save Video As.

Memang agak ribet sedikit, tapi kalau dicoba terus-terusan sobat juga hafal sendiri, hehee. Sekian cara mendownload video melalui VLC. Semoga bermanfaat.

Source Code Program Kost Online

E - Kost atau Elektronik Kost adalah aplikasi yang dibuat untuk menampilkan informasi seputar kos-kosan secara online. Yang tujuan untuk mempermudah dalam mengonline-kan informasi kost secara cepat dan efisien. Program ini juga dapat sebagai rujukan untuk TA / Skripsi. Aplikasi e - kost ini mempunyai beberapa menu / fitur yaitu :

Halaman Utama : Untuk menampilkan kost-kost yang didaftarkan oleh member / pemilik kost.

Halaman Login : untuk login member pemilik kos.

(pesan informasi ketika kolom username atau password ada yang kosong)

(pesan informasi ketika username / password yang dimasukan salah)

Halaman Registrasi : untuk mendaftar sebagai member / pemilik kos.

Dashboard Pemilik Kos : Halaman yang disediakan untuk pemilik kost, dimana terdapat beberapa menu untuk mendaftarkan kost, menampilkan profil pemilik kost, mengedit kost, menghapus kost, menganti password.

Dashboard Admin : Halaman admin yang digunakan untuk mengelola data - data yang berhubungan dengan kost-kost yang terdaftar. CRUD (Create/Read/Update/Delete) data kost, CRUD data pemilik kost, edit profile admin, dan ganti password.

Program ini dibuat dengan tool :

> PHP / Mysqli ( Prosedural ).

> Bootstrap 3.

> Jquery.

Untuk dapat mendownload source code atau program ini, anda harus ber-donasi (untuk beli kopi bro 😉 ) terlebih dahulu ke saya, dengan jumlah donasi seikhlas-nya. Untuk proses berdonasi anda dapat menghubungi saya terlebih dahulu melalui pesan Facebook atau Email ke : yapsamuel9@gmail.com selanjutnya akan saya kirimkan link untuk mendownload source code nya.

Simple Material Design Responsive Menu with HTML+CSS no Javascript

Material Design is a visual programming language made by Google. Language programming examples using visual display an interesting but simple. Material Design not offer the concept of change in masive, but this is a significant step for the region to Visually Representative language. This technology will trigger design-based artificial manifested into a tangible form.

Before the trend material design "swoop", many designers are trying to make the display (e.g. key/button) using 3D style so that the resulting output resembles how the original form in the real world. But it is no longer popular, thing that becomes the top priority now is the access speed to become one part of material design due to generally give priority to staining a solid objects without imposing the use of images is not necessary.

The term often we call with the flat design that does not give priority to the use of the background is too complicated but simple in order to make the user can more easily and not confused to use those objects.

DemoDownload

Screenshoot

on desktop

on mobile

Okay lets make responsive navigation menu style material design

Responsive Navigation Nenu

The HTML

<div id='main'>
  <div class='container'>
    <div  style='margin-top:150px;margin-bottom:30px;text-align:center;'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMu0kuCjZV-npG0cfWdTLerCSpi-XsJiwD4ZjFXae6ZK_JbhBRHQ0qww594Qic-1ErjShQvkYr_7GdvFNKfqJ2ugBERbEWa5aUxDBOL4BWHURnLCV5aHkwvTKGaSYybtwlzcazvbAAP11f/s320/logo.png' style='width: 100px;margin-bottom:15px'>
      <h1>Material Design Responsive Menu</h1>
    </div>
    <nav>
      <div class='nav-fostrap'>
        <ul>
          <li><a href=''>Home</a></li>
          <li><a href='javascript:void(0)'>Web Design<span class='arrow-down'></span></a>
            <ul class='dropdown'>
              <li><a href=''>HTML</a></li>
              <li><a href=''>CSS</a></li>
              <li><a href=''>Javascript</a></li>
              <li><a href=''>JQuery</a></li>
            </ul>
          </li>
          <li><a href='javascript:void(0)' >Blogger<span class='arrow-down'></span></a>
            <ul class='dropdown'>
              <li><a href=''>Widget</a></li>
              <li><a href=''>Tips</a></li>
            </ul>
          </li>
          <li><a href='javascript:void(0)' >SEO<span class='arrow-down'></span></a>
            <ul class='dropdown'>
              <li><a href=''>Tools</a></li>
              <li><a href=''>Backlink</a></li>
            </ul>
          </li>
          <li><a href=''>Google Adsense</a></li>
          <li><a href=''>Advertising</a></li>
          <li><a href=''>Business</a></li>
        </ul>
      </div>
      <div class='nav-bg-fostrap'>
        <div class='navbar-fostrap'> <span></span> <span></span> <span></span> </div>
        <a href='' class='title-mobile'>Fostrap</a>
      </div>
    </nav>
  </div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script>
$(document).ready(function(){
$('.navbar-fostrap').click(function(){
$('.nav-fostrap').toggleClass('visible');
$('body').toggleClass('cover-bg');
});
});
</script> 

The CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.nav-fostrap {
  display: block;
  margin-bottom: 15px 0;
  background: #03A9F4;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 3px;
}
.nav-fostrap ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}
.nav-fostrap li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 14;
  color: #def1f0;
}
.nav-fostrap li a {
  padding: 15px 20px;
  font-size: 14;
  color: #def1f0;
  display: inline-block;
  outline: 0;
  font-weight: 400;
}
.nav-fostrap li:hover ul.dropdown { display: block; }
.nav-fostrap li ul.dropdown {
  position: absolute;
  display: none;
  width: 200px;
  background: #2980B9;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  padding-top: 0;
}
.nav-fostrap li ul.dropdown li {
  display: block;
  list-style-type: none;
}
.nav-fostrap li ul.dropdown li a {
  padding: 15px 20px;
  font-size: 15px;
  color: #fff;
  display: block;
  font-weight: 400;
}
.nav-fostrap li ul.dropdown li:last-child a { border-bottom: none; }
.nav-fostrap li:hover a {
  background: #2980B9;
  color: #fff !important;
}
.nav-fostrap li:first-child:hover a { border-radius: 3px 0 0 3px; }
.nav-fostrap li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
.nav-fostrap li ul.dropdown li:first-child:hover a { border-radius: 0; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: '';
}
.title-mobile {
  display: none;
}
 @media only screen and (max-width:900px) {
.nav-fostrap {
  background: #fff;
  width: 200px;
  height: 100%;
  display: block;
  position: fixed;
  left: -200px;
  top: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.title-mobile {
  position: fixed;
  display: block;
    top: 10px;
    font-size: 20px;
    left: 100px;
    right: 100px;
    text-align: center;
    color: #FFF;
}
.nav-fostrap.visible {
  left: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
}
.nav-bg-fostrap {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 50px;
  margin: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #03A9F4;
  padding: 12px 0 0 10px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.navbar-fostrap {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  cursor: pointer;
  margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px;
}
.navbar-fostrap span {
  height: 2px;
  background: #fff;
  margin: 5px;
  display: block;
  width: 20px;
}
.navbar-fostrap span:nth-child(2) { width: 20px; }
.navbar-fostrap span:nth-child(3) { width: 20px; }
.nav-fostrap ul { padding-top: 50px; }
.nav-fostrap li { display: block; }
.nav-fostrap li a {
  display: block;
  color: #505050;
  font-weight: 600;
}
.nav-fostrap li:first-child:hover a { border-radius: 0; }
.nav-fostrap li ul.dropdown { position: relative; }
.nav-fostrap li ul.dropdown li a {
  background: #2980B9 !important;
  border-bottom: none;
  color: #fff !important;
}
.nav-fostrap li:hover a {
  background: #03A9F4;
  color: #fff !important;
}
.nav-fostrap li ul.dropdown li:hover a {
  background: rgba(0,0,0,.1); !important;
  color: #fff !important;
}
.nav-fostrap li ul.dropdown li a { padding: 10px 10px 10px 30px; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  border-top: 5px solid #505050;
  position: absolute;
  top: 20px;
  right: 10px;
}
.cover-bg {
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
}
 @media only screen and (max-width:1199px) {
.container { width: 96%; }
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

Cara Memblokir Iklan Telkom

Beberapa hari ini saya dibuat kesal dengan salah satu provider ISP, ya sebut saja telkom. Saya selaku pelanggan ISP tersebut menyayangkan adanya injeksi iklan yang muncul saat browsing yang diberikan pihak ISP tersebut. Sudah bayar mahal, koneksi kadang tidak menentu, dan dapat iklan pula. Siapa yang tidak jengkel?
Setelah saya coba searching mengenai iklan ini dan mendapatkan beberapa cara alternatif untuk memblokir injeksi iklan ini. Oke berikut cara yang saya gunakan untuk memblok iklan yang muncul di sistem operasi yang saya gunakan saat ini yaitu windows 10.

1. Buka notepad dengan Run as administrator.
2. Pada menu Notepad, pilih File lalu Open / Ctrl+O.
3. Arahkan atau Cari file hosts di C:windows/system32/drivers/etc/hosts ( Bila tidak muncul, ganti type dari .txt ke all files).
4. Setelah muncul, dibagian paling bawah tambahkan beberapa kode berikut :

127.0.0.1 cfs.u-ad.info
127.0.0.1 u-ad.info
127.0.0.1 cfs2.uzone.id
127.0.0.1 uzone.id
127.0.0.1 v3.mercusuar.uzone.id
127.0.0.1 mercusuar.uzone.id

5. Lalu save dan tutup file nya.

6. Silahkan clear cache browser anda, lalu browsing kembali seperti biasa.

Begitulah langkah sederhana untuk memblok iklan injek dari telkom, untuk cara yang saya jelaskan diatas hanya bekerja di sisi client / pengguna ISP tersebut, untuk para developer web mungkin harus mengakali dengan memodifikasi tag html seperti menambahkan spasi di awalan dan akhiran tag body atau menggunakan SSL/HTTPS. Sekian mengenai langkah sederhana cara memblok injeksi iklan telkom apabila ada kesalahan dalam penulisan, penulis memohon koreksiannya. Silahkan dicoba dan semoga bermanfaat.

(New Update) Free Material Design Template Blogger - MDFostrap

MDFostrap Blogger Templates is a simple & clean designed with material design style and with a great responsive design. "Please don't" use this theme for a blog with a bad niche or AGC Blog

Demo  Download  Documentation

MDFostrap Material Design Template Feature :

• Responsive Design
• SEO Friendly
• Mobile Friendly
• Breadcrumbs
• Awesome LightBox
• Ads Ready
• Auto Blog Post Summarize
• Social Share Button
• Subscribe Form
• 2 Column
• Inline Edited
• CSS3 + HTML Dropdown Menu
• Featured Category By Label
• Contact Page
• Custom Error 404 Page

Update

22 Juni 2016- Clean Post
- Color Schemes
- Subscribe Color Schemes
- Awesome Search box
- Simple popular posts

Material Design Button Ripple Effect Code Snippet

Demo  Download

Fostrap - Tutorial how to make button material design, because the material has its own style and design I think is very good and simple.

The HTML

<!DOCTYPE html>
<html >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="Material Design Button Ripple Effect Snippet">
    <title>Material Design Button Ripple Effect</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class="header">
      <h1 class="title">Material Design Button Ripple Effect</h1>
    </div>
    <div class="container btn-space">
      <a class="ripple red" href="#">Button</a>
      <a class="ripple pink" href="#">Button</a>
      <a class="ripple blue" href="#">Button</a>
      <a class="ripple cyan" href="#">Button</a>
      <a class="ripple teal" href="#">Button</a>
      <a class="ripple yellow" href="#">Button</a>
      <a class="ripple orange" href="#">Button</a>
      <a class="ripple brown" href="#">Button</a>
      <a class="ripple grey" href="#">Button</a>
      <a class="ripple black" href="#">Button</a>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>

The CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
.header {
  background-color: #2196F3;padding:55px 0px;text-align:center;margin-bottom: 10px;
}
.header > .title {
  line-height: 48px;
    font-size: 48px;color: #FFF;margin-top: 0px;margin-bottom: 0px;
}
@media only screen and (min-width: 993px) {
    .container {
        width: 85%;
    }
}
@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}
@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}
.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}
.btn-space{
    text-align: center;
}
.ripple {
    text-align: center;
    display: inline-block;
    padding: 8px 30px;
    border-radius: 2px;
    letter-spacing: .5px;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.ripple:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.animate {
    -webkit-animation: ripple 0.55s linear;
    -moz-animation: ripple 0.55s linear;
    -ms-animation: ripple 0.55s linear;
    -o-animation: ripple 0.55s linear;
    animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}
@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(2.5);
    }
}
@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2.5);
    }
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}
.red {
    background-color: #F44336;
}
.pink {
    background-color: #E91E63;
}
.blue {
    background-color: #2196F3;
}
.cyan {
    background-color: #00bcd4;
}
.teal {
    background-color: #009688;
}
.yellow {
    background-color: #FFEB3B;
    color: #000;
}
.orange {
    background-color: #FF9800;
}
.brown {
    background-color: #795548;
}
.grey {
    background-color: #9E9E9E;
}
.black {
    background-color: #000000;
}

The Javascript

$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});

Note : If you've got a button yourself, you simply add the class .ripple