Rebuilt My Website
Finally! It has been 967 days since I published this website and today I'm revealing to you the updated version of it. Having a website of my own was a dream ever since I came to know about internet, and that's reasonable because my curiosity was always without a leash. It took me really good work to get it done the way I wanted and publish it on May 22 of 2016. Creating a website is actually not hard. But making one that works everywhere and maintaining it are hard, and you'll need to spend a lot of time for it. The main goal of creating a website, for me, was to document what I do. I've said this before. I forget a lot of things as time flies by and we all do. That's why we write down things or make records right? So this is my way of recording things and I'm too adamant about the quality and clarity of it. If that includes things you want to share with the world, there's no better way than creating a website. Social media can't just really do that in my opinion.
The first version of my website was created using Sites by Google. Sites is an online tool from Google to create websites which are hosted on their servers with a limited set of storage and features. It was never popular or feature rich as Wordpress but it did make some noise. In fact, some features of Sites were even better than WP's. But similar to what happens to many Google products that can't make much profit by running, Google spent very less time and resources on it and eventually had to discontinue the Classic Sites which the first version of my website relied on. Google announced it over a year ago, giving us enough time to migrate to other platforms. But Google did not completely shut it down. Instead, they addressed the one major issue with their service; mobile unfriendly design. Remember, Sites existed the time before we had the enlightenment of "responsive and flat material design". Nobody saw that coming. But when the time came, everybody had to go back to the drawing boards, and so did Google. They discarded the Classic version of Sites and came up with a new tool called New Sites (I know!). The aim was to port the existing Classic Sites to a new mobile first design with material recipe. But it turned out to be really terrible. The New Sites was 100 times worse than the Classic Sites. So by that time I was pretty sure I was going to need to rebuild my website from scratch on my own.
I started rebuilding this website from a year ago. The first step was to create standalone design similar to what the existing site had. It's design was minimalistic and I wanted to keep it that way. For the styling, I had to use a CSS library for which I chose W3.CSS instead of Bootstrap because W3.CSS was lightweight than Bootstrap. About 5 months ago, I started learning CodeIgniter, a PHP framework, to make the website dynamic so that maintaining it will be easy and also I'll have endless freedom to add new features. I was working day and nights on this and had to postpone many things. But I'm confident that it was worthy doing it, and I'm satisfied with what I've been able do by this time. Let's see the major changes made to the new version of my website.
-
Self Hosted
-
Fully Secure with HTTPS
-
Lightweight and Fast
-
Mobile Friendly
-
User Friendly
-
Dynamic
-
Facebook Comment Plugin
-
Open Source
Those are the major changes made to the site. Now let me show and explain you some of the default styles and how to use the new site.
Javascripts
The main dependencies are some external and internal Javascript. I tried to minimize the use of client side scripts because lot of privacy concerned people turn off Javascripts by default these days for preventing rogue scripts from eavesdropping and showing intrusive ads. The essential scripts I used are,
- Navigation menu - I used SlideOut for making the mobile navigation menu that can be opened by swiping the screen to the right. SlideOut is an open source project and works smooth even on low end smartphones. If you disable Javascript on a mobile device, the navigation menus won't work.
- Photogallery - the flickr photography gallery is powered by nanogallery2 which requires external Javascript sources to work.
- Google Analytics - this is used to collect analytics data of the website such as page visits, clicks etc.
- Facebook Comments Plugin - it automatically fetches the comments via scripts running on the user machine.
Fonts
All the fonts used in this website are part of Google Fonts.
- Open Sans - it is the best font for web readability. So I have used it as the font for content.
- Roboto - it is a great font for application UI. It is used in some parts of the navigation menu.
- Robot Mono - this is the default monospace font for preformatted text.
- Aldrich - this is used to display the title of this website. Visitors are already used to the style of it. So changing it would affect the familiarity.
- Rajdhani - this beautiful font was designed by Indian Type Foundry and has become my most favourite font. It is used for headings.
Icons
Icons are served by Fork Awesome library which is a fork of the open source project Font Awesome. Font Awesome doesn't accept new font suggestions but Fork Awesome does. Rest of the features are same and they're compatible.
Images
There are three types of images - thumbnail image of size 300 x 220 pixels and suffix _t, low resolution image of size 600px width and suffix _LR or _600p, and high resolution images. This is to make the webpage load faster. Clicking the image will open the high resolution image in a new tab. All images are responsive. Below are some examples of how images are displayed.
Sample caption
Tables
Tables have striped colors for easy reading. Tables with large width will maintain their minimum width while viewed through a mobile browser and a horizontal scroll bar will appear for scrolling. Slideout is disabled on horizontally scrollable elements. Below is a sample table.
| Pin Number | Pin Name | Type | Description |
| 6 | VDD | 3.3V Input/Output | This is either 3.3V input or 3.3V output from regulator. |
| 3 | GND | Ground supply | |
| 9 | RST | I/O | Device reset. This is either POR or active low reset input. |
| 7 | REGIN | Power In | 5V input for on-chip 3.3V regulator. |
| 8 | VBUS | Input | VBUS Sense input is connected to 5V from USB to detect USB power. |
| 18 | NC | Not Connected | |
| 4 | D+ | I/O | USB D+ data line |
| 5 | D- | I/O | USB D- data line |
Source Code
Previously I exported HTML from the IDE with preformatted source code and embedded it to the webpage. It did not have line numbers or striped colors. It was not good. Recently I found out that you can embed Gist code with a link. I added some custom CSS to display striped colors, add custom font (Roboto Mono) and to add more contrast to the coloring as demonstrated by Will Boyd in this blog post. The result was beautiful except one problem. It required Javascript to fetch the code from GitHub. So if you have Js disabled, you won't be able to see the code. Later I found a simple workaround - simply copy the plain HTML element (a table) once it is loaded into a browser and paste it your HTML.
| //**************************************************************// | |
| // Name : Seven Segment using 595 // | |
| // Author : Vishnu M Aiea (www.vishnumaiea.in) // | |
| // Date : 15-06-2014 // | |
| // Version : 1.0 // | |
| // Notes : Code for using a 74HC595 Shift Register // | |
| // to display all possible characters on a // | |
| // seven segment display (coommon cathode) // | |
| //**************************************************************** | |
| int latchPin = 8; //Pin connected to ST_CP of 74HC595 | |
| int clockPin = 12; //Pin connected to SH_CP of 74HC595 | |
| int dataPin = 11; //Pin connected to DS of 74HC595 | |
| int segMap[19] = {252,96,218,242,102,182,190,224,254, | |
| 246,238,156,158,142,110,28,206,124,2}; | |
| void setup() { | |
| //set pins to output because they are addressed in the main loop | |
| pinMode(latchPin, OUTPUT); | |
| pinMode(clockPin, OUTPUT); | |
| pinMode(dataPin, OUTPUT); | |
| } | |
| void loop() { | |
| //count up routine | |
| for (int j = 0; j<19; j++) { | |
| //ground latchPin and hold low for as long as you are transmitting | |
| digitalWrite(latchPin, LOW); | |
| shiftOut(dataPin, clockPin, LSBFIRST, segMap[j]); | |
| //return the latch pin high to signal chip that it | |
| //no longer needs to listen for information | |
| digitalWrite(latchPin, HIGH); | |
| delay(300); | |
| } | |
| } |
Preformatted Text
Preformatted text retains the spacing when put between <pre></pre> tags. This is used to embed code samples that don't require syntax highlighting. Below are some examples.
GPIOA->BSRR = GPIO_BSRR_BS5; //set the 5th bit or PA5
GPIO_OTYPER_OT0_Pos (0U)
GPIO_OTYPER_OT0_Msk (0x1U << GPIO_OTYPER_OT0_Pos)
GPIO_OTYPER_OT0 GPIO_OTYPER_OT0_Msk
Quoted Text
W.CSS and Fork Awesome icon are together used to create a box for quoted text. See a sample,
Left Sidebar Menu
I used Slideout for creating a touch enabled and responsive navigation menu for mobile view. When the viewport shrinks below a certain width, the horizontal navigation menu will disappear and the Slideout menu will be activated. The menu can be opened by either swiping right anywhere on the page except some elements such as large tables, or click on the menu button on top left.
Mobile view on Pixel 2 XL
Swipe right for the menu
I Want Your Feedback
I'll be improving the design and adding more features as I continue learning CodeIgniter. I have many unpublished projects waiting on my queue. So I'll be uploading them soon and also more tutorials and articles.
I've spent a lot of time on this. So I would love to hear your feedback about the new version of my site. I'm not expecting all things to work just fine. In case you notice something not working, something out of place, some incompatibilities, please let me know about it with all the details such as screenshots. Some of the styles I have used are incompatible with Mozilla Firefox. That is expected and will continue to be so until I find workarounds. If the site get more traffic, I'll consider adding AdSense later. But don't worry, it'll be a single ad at the end of every project page.
Timestamp
Last updated : 12:15 AM, 17-01-2019, Thursday