Posted on

New website version 4.0

I have uploaded my new website. I started working on it before the holidays by studying some new programming tricks. I didn’t want to use an image slider built by someone else so I built my own from scratch using a combination of HTML5, CSS3 and JavaScript. I do pull from two different script libraries: jQuery and Greensock. But I wrote all the functions in my js file.

The thumbnail function on my gallery pages is all built by hand. I have never seen anyone do it before quite the way I did it…it may be unique. I got ideas for it’s construction from both Pinterest and the “new tab” function in the Edge browser. It’s still not perfect. For example, I wouldn’t mind if they animated in from the side like most gallery plug-ins. However, many of those plug-ins are buggy when viewed on phones. This one is simple enough that it works smoothly regardless of viewport or device.

It uses the old [a name=””] function from last century to move from thumbnails to full size image. But built into that is the masonry presentation of the thumbnails, paired up with animation on the full size images.

In case you don’t know what masonry is…it is the presentation of different sized thumbnails or action boxes in a web page. They align in even columns, and wrap based on the size of the viewport. Mine are very responsive to the viewport width, using both JavaScript and Media Queries for control. On larger viewports my script automatically delivers full size images 1080 high, under the assumption that:

if (you are on a full size computer) {//you have a fast connection
image shall be 1080px tall
} else {//you are on a smartphone with slow connection
image shall be 700px tall
}

But before that logic executes, you only see thumbnails. You have to click a thumbnail to trigger the above logic.

I believe that the full size images load in the back ground…though I’ve not investigated that.

Web design is fun stuff. Now that my site is up I’m going to continue educating myself on some of the newest technologies. These are things I have delayed learning because I was too busy teaching stuff like filmmaking. I’ve just begun studying GitHub version control, and after that I will start drilling down on custom WordPress development. It would be super fun if I could make this self hosted WordPress site look just like the rest of my website. A bunch of my students have done well with WordPress, and many employers do custom WordPress as a matter of course.

I already have an Apache server running locally on my Windows 10 box for testing this site with it’s PHP includes. And I used to have Apache running on my MacBook for developing my locally hosted WordPress site. Now I just need to dig into the PHP side of WordPress to build my own custom theme, and convert this blog over to that theme.

If none of this made sense, please accept my apologies. I’ve been buried in geek speak lately. Click the links above to painting or rock climbing to read something written in English.