YouTube Autoplay

Terakhir diperbaharui: Rabu, 30 November 2016 pukul 07:22
Tautan: http://darto.id/78

*Update as it turns out, autoplay cannot be done on iOS devices (iPhone, iPad, iPod touch) and Android, because of the high amout of traffic you can use on mobile networks.

Tentunya sudah banyak yang melakukan embed video dari YouTube untuk di pasang di blog atau website yang dimiliki. Dan terkadang, untuk kebutuhan tertentu, kita menginginkan agar ketika halaman yang ada video YouTube tersebut bisa diputar secara otomatis, tanpa perlu kita untuk klik play pada video player YouTube tersebut.

Buka pada halaman video di YouTube yang ingin di embed atau yang ingin di pasang pada blog atau website. Kemudian klik share dan klik tab Embed.

salman-al-utaybi-surat-al-haaqqah-ayat-9-37-youtube

Kode standar yang diberikan oleh YouTube adalah:

<iframe width="560" height="315" src="https://www.youtube.com/embed/hcon6CXq7bQ" frameborder="0" allowfullscreen></iframe>

Agar video tersebut autoplay (diputar secara otomatis), cukup menambahkan kode dibawah ini pada kode videonya.

?rel=0&autoplay=1

Sehingga, kalau diterapkan pada kode video YouTube yang kita inginkan agar diputar secara otomatis adalah:

<iframe width="560" height="315" src="https://www.youtube.com/embed/hcon6CXq7bQ?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Baiklah, saya coba url video diatas untuk diembed pada halaman dibawah ini.

 

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

CSS: Responsive Template

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

Here empty style for your need to make responsive template or theme.

Before write style, in some condition, it’s better way to have meta in your header.

<meta name="viewport" content="width=1100" />

Here the empty responsive template CSS.

/*------------------------------------------------*/
/*-------------------[RESPONSIVENESS]------------------*/
/*------------------------------------------------*/

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
/* Styles */
}

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
/* Styles */
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {

/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

Responstable – a Responsive Table Solution

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

Author: jordyvanraaij

Source: tjoen

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <!--
Copyright (c) 2014 by Theun (http://codepen.io/tjoen/pen/LEpeq)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

  <title>Responstable 2.0: a responsive table solution - CodePen</title>

  <style>
  /*

RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
*/ .responstable { margin: 1em 0; width: 100%; overflow: hidden; background: #FFF; color: #024457; /* border-radius: 10px; */ border: 1px solid #167F92; } .responstable tr { border: 1px solid #D9E4E6; } .responstable tr:nth-child(odd) { background-color: #EAF3F3; } .responstable th { display: none; border: 1px solid #FFF; background-color: #167F92; color: #FFF; padding: 1em; } .responstable th:first-child { display: table-cell; text-align: center; } .responstable th:nth-child(2) { display: table-cell; } .responstable th:nth-child(2) span { display: none; } .responstable th:nth-child(2):after { content: attr(data-th); } @media (min-width: 480px) { .responstable th:nth-child(2) span { display: block; } .responstable th:nth-child(2):after { display: none; } } .responstable td { display: block; word-wrap: break-word; max-width: 7em; } .responstable td:first-child { display: table-cell; text-align: center; border-right: 1px solid #D9E4E6; } @media (min-width: 480px) { .responstable td { border: 1px solid #D9E4E6; } } .responstable th, .responstable td { text-align: left; margin: .5em 1em; } @media (min-width: 480px) { .responstable th, .responstable td { display: table-cell; padding: 1em; } } body { padding: 0 2em; font-family: Arial, sans-serif; color: #024457; background: #f2f2f2; } h1 { font-family: Verdana; font-weight: normal; color: #024457; } h1 span { color: #167F92; } </style> </head> <body> <h1>Responstable <span>2.0</span> by <span>jordyvanraaij</span></h1> <table class="responstable"> <tr> <th>Main driver</th> <th data-th="Driver details"><span>First name</span></th> <th>Surname</th> <th>Date of birth</th> <th>Relationship</th> </tr> <tr> <td><input type="radio"/></td> <td>Steve</td> <td>Foo</td> <td>01/01/1978</td> <td>Policyholder</td> </tr> <tr> <td><input type="radio"/></td> <td>Steffie</td> <td>Foo</td> <td>01/01/1978</td> <td>Spouse</td> </tr> <tr> <td><input type="radio"/></td> <td>Stan</td> <td>Foo</td> <td>01/01/1994</td> <td>Son</td> </tr> <tr> <td><input type="radio"/></td> <td>Stella</td> <td>Foo</td> <td>01/01/1992</td> <td>Daughter</td> </tr> </table> </body> </html>

 

Ping from Around The World

So, you want to check is your web is could accessed from around the world, lets try with StartPing. StartPing provides remote ping service allowing user to test the reach ability of a host through multiple locations using simple web interface.

Receive SMS Online for FREE and with NO Registration

At Receive SMS Online site, you will find some numbers you can send SMS text messages to and the messages will show up on the web. Receive SMS Online site is so much useful when you getting a message when you want to keep your real phone number to yourself. When your ex-wife wants to send you a text message. 😀