MY PROJECT WEBSITE

Rebuilt My Website

screenshot of new 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.

  1. Self Hosted


  2. I no longer need to rely on Google to deliver content from my website. The storage given by Google for a site was 100MB and there was no provision to make the site secure with HTTPS. Currently this website is hosted at Hostinger with a Premium Unlimited shared plan. Hostinger is the best hosting provider out there without a doubt. If you're planning to get shared hosting or VPN hosting, look no further. The HTML content of the site is served my the main domain vishnumaiea.in and all the files are delivered by the sub-domain file.vishnumaiea.in. As a result, the site is now faster and reliable.
  3. Fully Secure with HTTPS


  4. All the content will now be delivered over HTTPS. Both the main domain and sub-domain has forced HTTPS activated and all other content delivery sites such as Google Fonts are communicated over HTTPS. Security has a clear edge when it comes to Google search engine ranking. So I'm expecting my site to appear more often on search results.
  5. Lightweight and Fast


  6. Like I've said before, I used W3.CSS for the basic styling along with some custom styles. W3.CSS consists of a single style file which I modified a bit to make it more appealing. It doesn't use Javascript, unlike Bootstrap. So rendering is consistent and fast across all devices. The HTML and all the images are optimized for web with reduced file sizes. All these makes the websites load and render on all devices under 3 seconds on average depending on the internet speed.
  7. Mobile Friendly


  8. W3.CSS is a mobile first style library. So all the elements can be rearranged to fit in a mobile browser view. The previous version of this site was not mobile friendly and that was the main reason why stopped uploading new content for a while. Having a mobile first design will also improve the search engine ranking and drive more traffic especially smartphone users. I'll show you how each element respond to viewport change further below.
  9. User Friendly


  10. I made all the elements such fonts, tables, lists, links, colors etc more user friendly with custom styles. The styling is based on minimalistic and material design approach.
  11. Dynamic


  12. Even though most of the contents the website has right now are static, I can continue adding dynamic features such as automatic pagination, search engine etc with PHP on CodeIgniter. CodeIgniter is a fast and lightweight PHP framework for creating websites with great performance. New features are under development.
  13. Facebook Comment Plugin


  14. My website was lacking something really important for a project website : a comment section for discussions. It was not available in Google Sites. Now I have added the Facebook Comments Plugin on all project pages where you can leave comments if you're signed into Facebook. This of course needs Javascript to work and so if you disable Js or use extensions to block social sites, the comment plugin won't work. But that's up to you.
  15. Open Source


  16. That's right. I plan to release the source files for the backend design under an open source license so that you can fork and design a website for yourselves, especially if you want a website for documenting projects like mine. You can also study the code and give me suggestions to optimize it further and point out any potential vulnerabilities in design. I'll upload the source files to GitHub once I tidy up the files.


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,

  1. 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.
  2. Photogallery - the flickr photography gallery is powered by nanogallery2 which requires external Javascript sources to work.
  3. Google Analytics - this is used to collect analytics data of the website such as page visits, clicks etc.
  4. 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.

  1. Open Sans - it is the best font for web readability. So I have used it as the font for content.
  2. Roboto - it is a great font for application UI. It is used in some parts of the navigation menu.
  3. Robot Mono - this is the default monospace font for preformatted text.
  4. 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.
  5. 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.

dsn-dvm-368 voltmeter module

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,


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.

electric screw driver hardware

Mobile view on Pixel 2 XL
electric screw driver hardware

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


Date published : 10:40 PM, 15-01-2019, Tuesday
Last updated : 12:15 AM, 17-01-2019, Thursday

Comments


Made with for Open Source
Copyright © 2014 - 2019  Vishnu M Aiea
Site last updated : IST 03:56 PM, 14-04-2019, Sunday
Page rendered in 0.0062 seconds. Version 1.2.5