Latest post

Twinkle twinkle little star is a short musical piece I composed and recorded last evening.

This piece consists of 56 measures. It is 1 minute 52 seconds long. The music is composed of four tracks. This is my second attempt at recording music with multiple tracks. The last such attempt was more than two years ago when I composed and recorded 'A few notes'.

The links to the audio files, sheet music, etc. are provided below. The files reside in my website. In case, my website is down, the YouTube link provided below should still work.

The four tracks in this piece are:

  1. Grand piano
  2. Slow strings
  3. Xenon pad
  4. Music box

This arrangement is based on the popular melody of the nursery rhyme called Twinkle, twinkle, little star. The melody is played with the treble notes of the piano. I wrote the bass notes for the piano and the strings, and the high notes for the pad and the music box to fill the music with emotions of love and happiness. I recorded this after about two hours of practice.

Random post

I have two blogs: blog.susam.in (this one) and notes.susam.in. I use the latter to take notes without caring much about comprehensibility. I wanted a nifty TODO list somewhere in that blog to keep track of what I would like to learn or write about in future. However, I didn't want the TODO list to appear by default. I wanted it to be hidden like an easter egg. In this post, I'll explain how I solved this problem.

First, let me show you how the TODO list behaves. If you visit http://notes.susam.in/, you wouldn't find any TODO list anywhere in the web page. However, if you append ?todo to the URL or in other words visit http://notes.susam.in/?todo, you'll find a TODO list in the top right corner.

I created the TODO list as an HTML/JavaScript gadget. This could be done by visiting the Blogger dashboard, clicking the 'Design' link under the required blog, clicking 'Add a Gadget' under the 'Page Elements' tab and selecting the 'HTML/JavaScript' gadget.

Next, I moved to 'Edit HTML' tab and found that the id attribute of the new widget had a value of HTML7 in the blog template.
So, I edited the blog template to add this CSS.
#HTML7 {
    display: none;
}

#layout #HTML7 { display: block; }

The CSS for the #HTML7 selector ensures that the new gadget is not displayed when the page loads. However, this causes one problem. This makes the gadget invisible in the 'Page Elements' tab as well and hence makes it difficult for us to edit this gadget. So, I needed some way to make the widget visible in the 'Page Elements' tab only.

The panel in the 'Page Elements' tab where we can drag and rearrange gadgets is an HTML iframe element.

On viewing the source of this frame, I found that the body element had an id attribute with a value of #layout.

Thus, I came up with the CSS for #layout #HTML7 selector to make the gadget visibile in this frame.

So, with the gadget visible in the 'Page Elements' tab and invisible in the blog, I needed a quick way to make the gadget visible in the blog whenever I wanted. I wrote and appended the following JavaScript code to the HTML/JavaScript gadget I used to create the TODO list.

var todoGadget = document.getElementById('HTML7')
if (document.URL.search(/[?&]todo\b/i) != -1) {
    todoGadget.style.display = 'block'
} else {
    todoGadget.style.display = 'none'
}