Tricks of the Light 2013

Status: Completed
  • totl_layout
  • responsive_menu

It's very interesting to review each website I make in their chronological order as I can see the skills building on each other. With the Tricks of the Light website I leaned more into HTML5, CSS3, Url Routing and the Javascript skills I had built on through previous projects.

The new areas I began with Tricks of the Light was Responsive Design and Canvas. I debated creating a separate website with jQuery Mobile, however, my css skills are quite strong, so it seemed more work then merely determining the small changes I would need to make to shuffle things around for smaller screen sizes.

Rather than focusing on specific devices, I focused on slowly reducing the size of the screen and finding each spot that I felt the css rules would need to change. I also built a custom js slider and made this one more compact and cleaner than the one I made for my own 2012 site. I also created a custom responsive js navigation.

One of the additional scripts I made was to balance the menu based on the screen size. I disliked the way the text wrapped for the navigation as the size reduced so I wrote a script that read the text length of the nav menu and determined the location to throw the br tag.

I decided to stick with .Net webforms for this site due to the short timeline I was on. However, the BLL and DAL route and proved to be a bit more intensive than I needed for this smaller site. So, I went with creating usercontrols for the site for any reusable sections needed.

Part of the new layout design my lovely, endearing, never gives me a challenge too big, wife, decided that she liked the idea of having a little ball of light float across the screen to light up the logo.

After glaring at her for what seemed like a century, I decided it was time to learn Canvas.

In truth I was really excited about the idea. The concept sounded great and if I could figure it out, would lead me into many other great frontend designs.

The only materials I had on it at the time was a chapter or two on it in the Missing Manual HTML5 book. Which at least gave me the basics of drawing arcs.

I managed to condense the code a small bit by learning a little bit more about javascript and how to create objects, but overall, this involved 13 different circles and drawing small pieces of each circle in a clockwise or counter-clockwise direction. A lot of this was stumbling upon it code and I'm certain that after determining and creating some equations I will be able to significantly reduce this code.

But it definitely got me interested.

Run FireFly