Making this site

In this first post, I'd like to document the birth of this website. The first question is, why did I make this site? Obviously, it gives me a place to store some things that I want to be stored, so there's that. Whatever the reasons may be, here we are. Second, why GitHub? I did look at other options, namely Wordpress and Google Sites, but they did not seem to offer the level of flexibility that I felt I needed. One thing that I wanted was to store pdfs and have them open in a new tab. I could have used Google Drive for this purpose, but the links that Google Drive gives are messy and I did not feel like using them. Also, for security reasons, Wordpress and Google Sites do not allow their users to input their own codes. After looking around, I found GitHub Pages and it seemed good enough. I looked around some more and found out about Jekyll which is a fantastic tool to make static webpages and websites such as mine.

Next, the pages I wanted. This was pretty straight forward. I had ideas for what sort of pages I wanted and all that was left was to code them. The Miscellaneous page was the easiest to make.

The Notes page was a little harder. It took a while to get the table layout right. And then I needed to figure out a way to truncate the text, so that when viewing on mobile devices, the webpage still looks neat (otherwise the table would overflow, while the footer got cut-off abruptly). Eventually I figured out that what was needed was to mainly set table-layout property to be fixed and use this CSS tool called -webkit to handle the truncation of titles.

The hardest page was the Some photos page. It is easy to get the table layout and so on, but the hard part was in getting the lightbox. I learnt how to do that from this video. But that video addresses only the part that takes care of getting a lightbox(this is the box that contains the image when you click on it). I then added the arrows to handle navigation, and this part was quite easy. Using some basic JavaScript I added the functionality to navigate through images using the arrow keys (for devices with keyboards). As of now, I do not know how to handle image swiping on touchscreen devices.

Next comes the theme. So, Jekyll ships with a default theme called Minima. I took this theme, modified how the footer looked. And later, I also modified the layout used for posts to include links for the previous post, next post and one link to open a random post. Jekyll uses the Liquid template to handle some processing (that's the only word that seems to fit here). Setting up links to the previous and next post was as easy as calling post.previous, post.next. The random button was harder.

At first, I tried to make it so that each time the page is loaded, a new hyperlink is set up. I tried to use time as an element of randomness, however since this is a static site, it would work only when the server loaded the page (as opposed to you, the client). I looked around and I found this page. Also, I tried to figure out how xkcd's random button works.

For now, going to this page just gets hold of all available pages using a Liquid template, passes it into JavaScript (but one cannot go the other way because Liquid templates are processed first, and JavaScript is processed at the user's end), which then uses its Math library to pick a random post and redirects the user. I could have first removed the post on which the user clicked the random button, but chose not to. It wouldn't be random enough if the user wasn't redirected to the same page.