Archives for January 2015

YouTube HTML5 Video Player

January 28, 2015

YouTube now defaults to HTML5 video player instead of Flash. The new player takes advantage of MediaSource extensions for its Adaptive Bitrate streaming allowing viewers to quickly and seamlessly switch resolutions. The new player also uses a new video codec called VP9 which gives you higher resolution with low bandwidth. YouTube will also start using WebRTC for recording videos and for live streaming capabilities. Read more.

Laravel 5

January 27, 2015

It looks like Laravel 5 will be released sometime next week. Laravel is a PHP framework which uses simple RESTful routing, Eloquent ORM and Blade templating. It’s built on top of Symfony and Composer. It comes with PHPUnit for testing, and of course, it has migrations built in the package. If you’re curious about what Laravel 5 can do and some of its features, there are several free videos available at Laracasts about Laravel 5.

Run Code At Specific Times

January 20, 2015

If you need to run some code at certain times of the week, a weekly sale for example, PHP gives you that flexibility. In the example below, we will display an image on our website every Wednesday afternoon between 1pm and 5pm to display a sale.

Let’s create a new function called wednesday_afternoon(). We can use this function to check the date and time. The function checks for the current time and compares it if it’s Wednesday afternoon. It returns a true if it is, and a false if it falls outside those times.

function wednesday_afternoon() {
  date_default_timezone_set('America/Los_Angeles');
  $start_time = strtotime('Wednesday 1pm');
  $stop_time = strtotime('Wednesday 5pm');
  $current_time = strtotime('now');
  // return true if between start and stop times
  if ( $current_time > $start_time && $current_time < $stop_time ) {
    return true;
  }
}

A simple if statement decides what image to display based if it’s Wednesday afternoon.

if (wednesday_afternoon()) {
  <div class="wednesday_sale">
    <img src="/path/to/our/image.png"/>
  </div>
} else {
  <div class="no_sale">
    <img src="/path/to/our/no/sale/image.png"/>
  </div>
}

I have posted a similar code GitHubGist.

Charging At Night

January 13, 2015

Charging the laptop at night. I’m trying to get back into photography. This photo shows how a responsive design render images differently in various screen sizes using CSS max-width at 100%. In addition, the height is set to auto to keep the scale correct.

img {
 height: auto; /* Make sure images are scaled correctly. */
 max-width: 100%; /* Adhere to container width. */
}

Now regarding the Mac, there’s a rumor that Apple is planning to release a 12-inch MacBook Air as detailed here by Forbes.

Dynamic Footer

January 12, 2015

Many web designers use Copyright followed by the current year on the bottom of their websites. It’s usually placed in the footer section of the page. If your site has been around for a while, spanning over several years, you’ll have to update your footer every time a new year comes along. If your site runs on PHP, you can make your footer a little bit more dynamic by using the PHP date function.

For example, you have a footer similar to this.

Copyright &#169; 2010 - 2014. All rights reserved. yourdomain.com.

The result is:

You can make the current year dynamic by using the PHP date function as displayed below.

Copyright &#169; 2010 - <?php echo date('Y'); ?>. All rights reserved. yourdomain.com.

Most web hosting services have PHP turned on by default. Even if your website runs only in HTML, you can probably use the PHP date function. If you decide to do it, just make sure to change the file extension from .html to .php. And you’re good to go.

HTML Redirect

January 4, 2015

HTML redirect is one of the oldest tricks in the books for web designers. If multiple links share the same information or page for example, you can simply redirect your visitors to a good-known page. Redirect is accomplished using HTML meta redirect. Here’s an example below.

<html>
<head>
<title></title>
<meta http-equiv="refresh" content="0; url=http://yahoo.com">
</head>
<body>
</body>
</html>

The url is the website or page you want visitors to be redirected. Content is the number of delay in seconds. The value of 0 means that you want visitors to be redirected immediately. A value of 5 means visitors will be redirected after 5 seconds.