Thursday, August 18, 2016

Unleashing the Git - part 7 - Cherry picking commits

We looked at git branching in one of my previous post. In this post let's look at git's on of the unique and powerful features that ties with branching; cherry-picking.  

You might need to merge only a specific commit in a branch to your local branch, rather than merging an entire branch. Opt to cherry pick only if merging is not an option. One use case where you want to cherry pick is to back port a bug fix you have done in another branch.

Since we covered some branching concepts in the previous post, let's remind a few commands first.

To see all the available branches
$ git branch
To switch to another branch
$ git checkout <branch name>
Cherry picking a branch, tag or a specific commit could be done using the following command.
$ git cherry-pick <branch name, tag name or commit id>   // In case of branch or tag name, only the latest commit will be picked.

Cherry picking also does the commit. You can avoid the commit with the following. This is important when you want to cherry pick multiple commits and commit all stages at once to commit in the current branch.
$ git cherry-pick --no-commit release_branch_v1 // Or same as $ git cherry-pick --n release_branch_v1
$ git cherry-pick --edit <commit id>   // launches the editor to change te commit message. Same as $ git cherry-pick -e <commit id>
$ git cherry-pick --signoff release_branch_v1   // Adds a “Signed-off-by” line followed by your name and email taken from configuration to the commit message. Same as $ git cherry-pick -s release_branch_v1

Saturday, August 13, 2016

Multimedia in HTML5

Playing audio and video in a web page has not been very straight forward in the past. One reason for that is due to the fact that there are various audio and video containers and encoding formats. Some popular video formats are .avi, .mp4, .ogg, .flv, and .mkv. There is also a new format called WebM, which is likely to get popular. These formats are not encoding formats. These are containers of the encoded content.

When a person making an audio or a video, chooses a format to encode their multimedia content. To view this encoded content, the viewer should have a corresponding decoder installed in their system. This encoder and decoder software is often referred to as a codec (meaning; coder/decoder or compressor/decompressor). Some video encoding formats are H.264, VP8, DivX, Theora, etc. Some audio codecs are MPEG-4 Audio, Layer 3, which you might recognize as MP3, and AAC, which is mostly used by Apple. Vorbis is another audio format, mosly used with an Ogg container. Earlier mentioned WebM is meant to be used exclusively with the VP8 video codec and the Vorbis audio codec.

As mentioned earlier, to view audio/video files, browsers should either support those formats or use a plugin program to decipher these formats. Luckily all popular browsers support or have some plugin program for it (mostly 3rd party programs - e.g: Adobe flash). With HTML5 however, the need for such 3rd party plugin is expected to diminish.

The most common way of including multimedia content into a web page has been to embed an audio/video file and making the user click a button and make the content play within the page. For this to happen, the browser that you are using should support the format of the media. Otherwise you'll have to install a plugin (helper program) to support those formats.

In older browsers the way to include multimedia has been to use the <object> or <embed> tag.

In HTML5, there are new tags for these. <audio> and <video>
So how to cope up with all these formats in new HTML5. It's indeed complex. Answer is to use multiple formats and let your web page in clients browser try to use all those formats, so that there's high chance of making your web page viewer view or listen to the content. So to have multiple formats of your audio/video content, you'll have to use some Software that can convert your main data file to those needed formats. Popular VLC media player can be used for basic usages. You can still include flash formats since flash plugin support is still widely used.

To include a video content, in HTML5 we may use the following format for example.
<video src="myvideo.mp4" width="360" height="240" controls></video>        

Some possible attributes of <video> are -
  • autoplay - Plays the video when the page loads. generally not a good idea in usability perspective
  • preload - This attribute will pre-load the video. This is good if the video is the central part of your page. Not good if it's not since it'll be a wastage of the bandwidth
  • controls - Controls attribute determine if a default set of control buttons should appear. Highly recommended to include this
  • loop - Restarts playing the video once it finishes playing
  • width - Sets the width of the media box
  • height - Sets the height of the media box
As mentioned earlier, it's good to include many format of the content so that there's a high chance your views browser supports one of those. Otherwise they'll have to install necessary plugin programs.
<video width="360" height="240" controls>
    <source src="yourvideo.mp4" type="video/mp4">    <!-- Helps in IE and Safari -->
    <source src="yourvideo.ogg" type="video/ogg">    <!-- Helps in Chrome and Firefox -->
    <source src="yourvideo.webm" type="video/webm">

What if someone visits your site with browser that still doesn't support HTML5, we may use the older <embed> tag and use the flash application/x-shockwave-flash type to work with the flash plugin.
<video width="320" height="240" controls>
    <source src="yourvideo.mp4" type="video/mp4">
    <source src="yourvideo.ogg" type="video/ogg">
    <source src="yourvideo.webm" type="video/webm">
    <embed src="yourvideo.mp4" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true">

Similarly <audio> tag supports all the parameters as the <video> and the syntax is very similar.