This USB Device is Not Supported

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/k

Ceritanya sedang menyiapkan kumpulan movie Om Nom buat anak agar bisa ditonton di layar televisi. Ternyata setelah di plug ke TV malah error This USB device is not supported, kebetulan menunya pakai bahasa Inggris, gak tau deh kalau pakai bahasa Indonesia, mungkin jadinya Perangkat USB tidak dapat dibaca atau Perangkat USB tidak didukung.

USB di laptop bisa terdeteksi normal tidak ada rusak fisik (komponen) atau software (firmware). Dicoba format melalui menu Windows Explorer dengan file system FAT32 tidak bisa, file system NTFS tidak bisa. Mungkin label berpengaruh, dicoba kurang dari 8 karakter enggak juga. Sepertinya pernah mengalami hal ini beberapa kali, tapi ya gitu deh, Amnesia. Dan mungkin karena sering format USB kali yah, jadi ingat proses format, kalau gak bisa lewat Windows Explorer biasanya mencoba format lewat Control Panel => Administrative Tools => Computer Management => Disk Management tapi kok malas banget yah, hehehe. Browsing aja deh.

Akhirnya menemukan Martik USB Disk Formatter. Langsung aja dicoba format menggunakan tools ini dengan file system NTFS. Kemudian yang sok bergaya prosedural, klik di tray Safely Remove Hardware and Eject Media, padahal biasanya langsung cabut aja, hehehe. Kemudian setelah di plug ke TV, eh langsung bisa, Masya Allah yah, Alhamdulillah, hehehe. Trus ceritanya mau tau apa bahasa Indonesianya “This Device is not supported” akhirnya TV dirubah ke bahasa Indonesia trus USB di format lagi di Windows Explorer, siapa tahu bisa muncul error lagi dan akhirnya bisa tahu apa bahasa Indonesianya. Eh, sekarang malah bisa kebaca sama TV nya. Lah pusing kita… 😀

Akhirnya langsung aja deh copy Om Nom ke USB dan berharap paginya anak-anak bisa terhibur dengan selingan film animasi, xixixixi.

Demikianlah episode cerita hari ini, 😀 dan silahkan download pada link di bawah ini untuk mendownload tool Martik USB Disk Formatter.

 

DOWNLOAD

 

Web Tuning for Performance

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/l

It’s my goal to have fast loading website for my customers and it’s always be my pleasure to do it the tuning. Since morning I tried to looking for the best way to put separate files for images, JavaScript and CSS. Tried with CDN, but it’s not so much give a significant score to page test. Since I got score 90 for Page Speed and 90 for YSlow. But it’s not still satisfied me :D.

Then I have my attention to How to create own self hosted CDN for WordPress.

And yet I still stuck and not satisfied because always got result that I still have to do add expires headers for JavaScript and font that I used from Google. What a nerd.

Then I just realized from these two man said:

  • You can’t control the headers being sent with these files since they are not being sent from your server. You can only control the headers of files you are hosting locally by Sean Carpenter
  • Don’t worry about it, it’s not in your control. As long as you are using the async analytics snippet you are fine. Optimize of the actual performance, not necessarily the scores. by Patrick Meenan

So, at least it’s give me a new side view :D. And then I checked again that the page is being loaded for 10 seconds but that’s not matter at all because it’s come from Shoutcast live stream :D.

CSS: Simple Tooltip With Pseudo Elements, the Triangle Hack, and Data Attributes

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/m

HTML

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>A Simple CSS Tooltip</title>
  </head>
    
  <body>
    <header>
      <h1>A Simple CSS Tooltip</h1>
    </header>
    
    <div class="content">
      <p><a href="#" data-tooltip="I’m the tooltip, yo.">I’m a link with a tooltip.</a></p>
      
      <p><button data-tooltip="I’m the tooltip, yo.">I’m a button with a tooltip</button></p>
    </div>
  </body>
</html>

 CSS

/* Some basic styles */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

body {
    margin: 0 auto;
    max-width: 640px;
    width: 90%;
}

body,
button {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

button {
  font-size: 100%;
}

a:hover {
    text-decoration: none;
}

/* Not needed for tooltips to work */
header,
.content,
.content p {
    margin: 4em 0;
  text-align: center;
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius:    3px;
    border-radius:         3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

 Result

simple-css-tooltip-result1

One caveat with this method is that transitions on pseudo elements don’t quite work right in Webkit browsers (Chrome, Safari). It works just fine in Firefox, but if you include the CSS for the transition it will break the tooltip in Webkit, which is annoying. This means you can’t transition the opacity or positioning of the tooltip for a fade or movement effect. But if you don’t care about that extra pizazz, then this method will work just fine.

Advanced

HTML

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Directional Tooltips with CSS</title>
</head>
<body>
  <header>
        <h1>Directional Tooltips with CSS</h1>
    </header>

    <div class="content">
        <p>Data attribute only <a href="#" data-tooltip="I’m the tooltip, yo.">Tooltip</a></p>
    <p><code>.toolbar</code> <a href="#" class="tooltip" data-tooltip="I’m the tooltip, yo.">Tooltip</a></p>
        <p><code>.toolbar-top</code> <a href="#" class="tooltip-top" data-tooltip="I’m the tooltip, yo.">Tooltip</a></p>
    <p><code>.toolbar-right</code> <a href="#" class="tooltip-right" data-tooltip="I’m the tooltip, yo.">Tooltip</a></p>
    <p><code>.toolbar-bottom</code> <a href="#" class="tooltip-bottom" data-tooltip="I’m the tooltip, yo.">Tooltip</a></p>
        <p><a href="#" class="tooltip-left" data-tooltip="I’m the tooltip, yo.">Tooltip</a> <code>.toolbar-left</code></p>
    </div>
</body>
</html>

 CSS

/* Base styles for this pen */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

body {
  margin: 0 auto;
  max-width: 640px;
  width: 90%;
}

body,
button {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

button {
  font-size: 100%;
}

a:hover {
  text-decoration: none;
}

header,
.content,
.content p {
  margin: 4em 0;
  text-align: center;
}

/**
 * Tooltips!
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: pointer;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
      opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:    
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:         
        opacity 0.2s ease-in-out,
        visibility 0.2s ease-in-out,
        transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 160px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 14px;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}

Result

simple-css-tooltip-result2

 

source: cbracco.me

WordPress: Add Option, Text Field to General Settings Page

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/n

If you need to add an option to a site, but it doesn’t really need to be on its own page. You can probably add it to one of the existing settings pages. Here’s how to add an option to the General Settings page.

In this case, I’m adding a ‘Islamic Phrases’ field for my next WordPress plugin, probably not the best example, so go ahead and change that.

$new_general_setting = new new_general_setting();
class new_general_setting {
    function new_general_setting( ) {
        add_filter( 'admin_init' , array( &$this , 'register_fields' ) );
    }
    function register_fields() {
        register_setting( 'general', 'Islamic_Phrases_Font_Size', 'esc_attr' );
        add_settings_field('Islamic_Phrases_Font_Size', '<label for="Islamic_Phrases_Font_Size">'.__('Islamic Phrases Font Size' , 'Islamic_Phrases_Font_Size' ).'</label>' , array(&$this, 'fields_html') , 'general' );
    }
    function fields_html() {
        $value = get_option( 'Islamic_Phrases_Font_Size', '' );
        echo '<input class="small-text" type="text" id="Islamic_Phrases_Font_Size" name="Islamic_Phrases_Font_Size" value="' . $value . '" />&nbsp;px&nbsp;&nbsp;<span id="IsP_errmsg"></span>';
    }
}

 

source: trepmal

jQuery: Textbox Numbers Only

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/o

HTML

Number : <input type="text" name="quantity" id="quantity" />&nbsp;<span id="errmsg"></span>

 jQuery code

$(document).ready(function () {
  $("#quantity").keypress(function (e) {
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        $("#errmsg").html("Digits Only").css("color","red").show().fadeOut("slow");
               return false;
    }
   });
});

 

Freemium

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/p

Sometimes, I hate so much Freemium. It’s like giving a hope for someone but actually it’s gave another problem and headache. To force someone bought something that said free as from promotion is more like create hate because you force someone to buy something that were meant to be free, as your promotion.

As developer, if you want to create something for free than give as free and you will have reward after, if not from people which helped by you, than Allah will reward you for helping people. And if you want to create something for sell then sell it is. No hiding, no absurd and no gharar.

You create apps but you insert ads, what the ….

Just find another way for make living.

And more sad again, this method marketing is create by people who not understand a religion at all, which extreme people will said as khafir, this method is created by people who thirsty wealth and then Moslem followed them. Sad… sad…sad….

Just find living which exactly is for real, like your own creativity or your skill. You can sell WordPress themes, plugins or another thing that you create by yourself. It’s more will appropriate and get appreciate.

Otherwise, this is only my thought and if you have any other considered I will welcome to for you advice.