Before the “Cloud”

When I started doing web design and development work I would make use of the various spare computers and create little WAMP (Windows Apache MySQL PHP) servers. I would have my main one at home and then one at my place of work. I would then email myself back and forth the files I was working on which worked for a little while. I would do edits at home, email them to my main email account, head to the office and retreive them from said account. A bit of a time consuming process and it was prone to human error. The human error mainly was forgetting to email the files to myself so when I got over to the other location (computer) I had no files waiting for me.

Then it dawned on me, why not use a USB key to transfer files back and forth. That would make it easier!

At that time, I also thought about running a WAMP setup off of the USB key too. That would allow me to use any computer I could plug a USB key into, to become a test environment for the various websites I work on. For that I utilize a program suite called XAMPP.

It wasn’t for about a couple of months of toting the USB key with me between locations that I started to notice an flaw in my thinking. If I forgot the USB key at the office on a Friday, I did not have my files with me on the weekend. That’s 2 days of not being able to code!

After the “Cloud”

When people mention the “Cloud” they are talking about the Internet (usually). In this case I finally got around to looking at the online service Dropbox.

Dropbox is a neat online service that allows you to sync files between computers anywhere in the world and for free (up to 2GB)! They have other plans for different storage needs, at a monthly price though.

How Dropbox Works (the simple explaination)

You install Dropbox onto the computers of your choice. In my case, I installed it on my home computer and the computer at the office. They are linked together based on an account you create with Dropbox. Pretty simple actually.

A specific folder is created (in a location of your choice) and you can drag-n-drop files into it. The files that are stored in that folder are synced with the Dropbox server(s). Linked accounts (yours or friends’ etc) can access those files (you can choose what to share and what not to share) from anywhere with an Internet connection.  You can also access the files from the Dropbox website too, if you do not want to install the little program on a particular machine.

How Does Dropbox Help Me?

I setup up XAMPP to work from the Dropbox specified folder. I also made sure that each location that I use Dropbox at has the folder in the same place (same file path) so that XAMPP looks for the appropriate webfiles without having to be modified in each location.

The use of Dropbox now eliminates any issues with me forgetting to update my files and transfer them between home and office. Whatever I change at the office, will be synced up when I get home. I love it!

Afterthoughts

Perhaps when I get a bit more time, I’ll look at setting up my LAMP (Yup, Linux this time)  server at home to utilize Dropbox too. That way, my dedicated web server at home will have all the necessary files in sync with the computer at the office and at home.

For those who are wondering my LAMP server has Samba set up so I can edit files live on the laptop that are stored on the server itself. I hvaen’t quite wanted to set up a repository yet as I find that as a single user, having to commit, checkout and various other subversion functions are a bit inefficient for me. Though in a multi-user environment, subversion can be great (if set up correctly).

So if you use multiple computers, perhaps you should take a look at Dropbox to help organize files for which you edit in separate locations.

Ok, so it’s not really the Shuttle Tydirium, but it reminded me of it.  Just leaving the SW Marine Drive Canadaline station heading towards Richmond’s Bridgeport station.

Even though I gripe about @Translink from time to time, I am appreciative of the fact that to get to and from work I only have to take 1 bus and 1 train. In a couple more months, I will be going back to school where my commute will consist of 2 busses and 1 train and a bit of a longer commute.

Though, I might have found an alternative route, one that I believe Translink doesn’t display when you use their Trip Planner tool. I am thinking if I take the #351 to Bridgeport, I can then hop on the #430 straight to Metrotown and then either take the bus down to BCIT or walk (as I do sometimes) down Willington Avenue. If my little calculations are correct, the commute from my newly found route will be about 1 hour and 10 minutes (depends on the link between the buses at Bridgeport and their frequency), whereas the Translink suggested route is 1 hour and 40 minutes.  Let’s hope I have discovered a quicker route to school!

On a side note

I do love the side notes, my blog posts lately seem to be more rambling than anything. Though I do have some regular posts planned, just have to find time for them.

Lately, in my spare time (of what little I have of it),  I have been working on a website for my buddy, @PacificEagle, and been tinkering with PayPal’s API, specifically their ExpressCheckout API. After creating my own PHP classes for both PayPal integration and a separate shopping cart, I find that I am having more fun with web development these days. I reall need to look into a way of doing it all the time I think.

The great thing about making my own classes is that I can reuse the code on other projects! yay for code-reuse! Not to mention I do find it fun to do object calls, makes the code look cleaner too.

Yesterday morning, during my typical checking the ‘Net routine, I noticed something was amiss. When I tried going to my site (www.tyleringram.com) it was coming up at 404. Bah! I jumped over to IsItDownForEveryoneOrJustMe.com and it was reported that it was indeed down for everyone. Something, for sure was wrong. I popped over to my webhost (BlueFur.com) and their server status was green, so it wasn’t a problem with them. I jumped into their Online Technical Support chat where a quick-to-respond fellow by the name of Kyle was there ready to assist me.

My question: I cannot seem to get to my site, did something change with the DNS?

Kyle: Let me take a moment and check.

A few moments later, he got back to me.

Kyle: It seems that your registrar changed their DNS so your site isn’t pointing to anything.

Me: Ah crap.

After Kyle sent me the DNS names, I then noticed that this domain was handled through a different registrar. I updated the DNS to reflect that which Kyle sent me. Typically I’ve pointed the CNAME to the IP address of the servers, so I guess adding the proper DNS would be a bit better. Still nothing, though technically it can take up to 48 hrs for DNS changes to propagate. This morning I checked again, and TylerIngram.com was still MIA. I went back into my admin panel of my registrar and noticed something silly; my domain expired!

Yup, I had forgotten to renew my domain name and that is why my site was missing on the 14th and 15th. If you did notice, I do apologize. If you did not notice, well that’s alright too! This has happened to me before, I some how forget that a domain is set to expire and I accidentally let it expire. Glad that when a domain does expire, the registrars typically lock them so only the previous owner can renew them for a certain period of time. I guess that helps stop people from stealing domains the moment they expire if the owner is occasional not on the ball.

I could have set the domain to auto-renew, or I could buy domain names for multiple years, but I don’t seem to do that. If I buy a domain and decide later to let it down, auto-renew tends to not let that happen (as in the case of a couple sites that accidentally renewed).

Have I Learned My Lesson?

I probably haven’t learned my lesson on having domain names expire. I will though change the email address associated with this domain’s registrar so I am properly notified of expiry time though. I could transfer this domain to another registrar (one that I use for all my other domains) but the $8 cost is a bit steep for me. Yea, $8 is a bit steep for me to spend on something like this. I have also heard that transferring a domain from one registrar to another can be a bit of a pain too, which I don’t really want to go through right now. It would be nice to keep all my domains in the same spot though.

Have you ever accidentally let a domain expire? One that was important etc?

One thing you have to love is a good sunset, right? The smokey skies of western British Columbia allowed for some spectacular colours skies. I took this one after a swim in the water and on the last evening that Robyn and I stayed on Hornby Island.

The sun sets over Vancouver Island, with Denman Island in the foreground. Two people on the saleboat prepare it for docking at the Ford’s Cove Marina.

I did take this photo standing in the water. I scrambled out of the water (while we were swimming) so I could run to the cabin and grab the camera. It’s the only sunset I really captured while we were there.

A New Look

Yup, I love to change the way my blog/site looks, don’t I? I think it looks a bit better than my previous incarnation. I’m trying to be more graphical when it comes to design. I need to learn more tricks with Photoshop and such so I can make better looking websites. From a programming (back end) point of view, I am pretty killer at creating things via scripts and codes, though my confidence with graphical design leaves a bit for the imagination. Oh well, I’ll just keep practising!

Hope you like the new design, it’s here for a while!

So what sites am I talking about anyway? I decided to merge TylerIngram.com and TylerIngramPhotos.com. Since TylerIngramPhotos.com is primarily a photo showcase website with little traffic, I thought it might be best to just merge it into this site (the blog) since I tend to update this way more often than my photo site. I also think it might be easier to share one website with people who are interested in my photos, but might also find my writing to be of interest as well and vise-versa.

What was done?

Since TylerIngramPhotos.com was more of a one page sort of site (that was manipulated to look like many), I thought I would look through the code I wrote and port it into a WordPress environment. TylerIngramPhotos.com uses the Flickr API extensively and since most of my code is function base, it was fairly simple to move over into the WordPress Environment without too much trouble. There was some CSS issues that I dealt with, though for the most part they should be corrected now.

All the photos are pulled from Flickr from a particular Collection. This collection stores various Sets which holds the photos themselves. The great thing about using Flickr’s API, is that I can pull any data from my photos that is stored on Flickr. The tags, or keywords that the photos on Flickr have are used here to pull up the top 5 most related blog posts. I hope this helps people who land on a photo stick around a little longer and check out some other things here on my site.

You can check out TylerIngram.com/photos for the Collection itself.

What else needs to be done?

I find that I am forever adding, tweaking or changing so I am sure there are other things that need to be done. It looks like I might need to fix the positioning of the top header menu so it aligns vertically better with the social media icons.

I need to look at my Photo of the Day script and implement that in an easy and fun way.

Add more photos into my Portfolio Collection (the collection on Flickr for which my photos are displayed from). Granted not all photos are everyone’s cup-of-tea, but, I do like what I have there so far. I know there are more photos to add, and I am sure I’ll look at ones to weed out.

I need to redirect TylerIngramPhotos.com to this site and reactivate the Photograph Page I have stored in the WordPress database. Perhaps add some sub-pages to the Photography section for Services/Prices that I offer.

What Can You Do?

A couple of things you can do for me. First off, if you come across any weird issues or bugs, please don’t hesitate to ask. I’ve so far tested this in Firefox 3.* and IE 7. Typically I find that if it works in those two, chances are it will work in the rest (mostly).

Second, you can Like my Facebook page! Yup, I created a single Facebook page to run for both my blog here and whatever photography stuff too.

Last but not least, if you have any suggestions for my site, I am always listening!

Hope you like the changes!

As many of you know (or if you don’t, you will now), I use Flickr a lot to showcase, display and share photos with people. With having a Pro Account on Flickr, the ability to upload an unlimited amount of photos is a great thing. Another aspect I like about storing photos on Flickr, is that it saves my web hosting packages from using up bandwidth when displaying photos to visitors. Flickr rarely (or never) goes down, so the photos are essentially available 24/7.

So what does Flickr have to do with my new photo portfolio website? A lot actually. In fact, the way I redesigned the new website is to utilize the Flickr API (Application Programming Interface) in such a way that to update my photos on my portfolio site, all I have to do is add them to Flickr in the appropriate location.

Using the magical powers of PHP in conjunction with Flickr’s API allows me to easily display and showcase photos that I find might be worthy of showing my photographic talents.

So how does this all work?

First I set up a Collection in Flickr. A Collection is pretty much a larger scope of photos which typically content multiple Sets. In my case, I created a collection called Portfolio which is comprised of multiple Sets. Each Set is of a particular theme; Sports, Travel, Wildlife, People and HDR (or High Dynamic Range). All I have to do to add a photo to a particular location is to add it to a particular Set.

Being my biggest critic, I still hum and haw over photos that I think might be worthy enough to show people my skills behind the camera.

Once all the photos I wanted to show on the site were in their respected Flickr Sets, it was time to figure out how I want to display them and dive deeper into the Flickr API.

The front page (shown at the top of this post) will randomly select 12 photos from each Set to display. You can browse the sets one by one, or you can click on a photo within the set to display that photo right away. Cool right?

When you click on a particular Set, it will display all the photos that belong to that Set as Thumbnails first. It will also give a brief description about the particular Set too.

When you click on a particular photo it will display it on the page in all its beautiful glory! Typically shown at 800 pixels on the long edge. It will retrieve the photo’s Title and Description and display it.

You also might notice a small, white Question Mark at the top right corner of each photo as well. When you click on it, it will slide out and display some more information about the photo itself, usually the EXIF data as well as its keywords. All this information is retrieved from Flickr.

You can also navigate between photos by clicking on the arrows at the top of each photo. Hopefully this makes it a bit easier to look through the photos. The page load times shouldn’t be that bad either as all it does is fetches the photos as they are being displayed. I might look perhaps a more easier to use AJAX system which will not require page loads, though for now I think it works nicely.

There is also a Photo of the Day (PotD) page for my portfolio site. This page works similarly to the rest of the site. Photos are added to the Flickr Set I can created for this particular feature. Any photos that I think are interesting, and other people might find interesting will be added to the Photo of the Day section. Again, being able to just add it to the Flickr Set, makes this an easy section to update.

The About and Contact pages are fairly static and nothing really exciting. The Contact page has a form that people can fill out to get in touch with me, it is also generated via PHP and does some nice massaging magic for when I receive the messages.

Another cool thing to make mention about the way I created this website is the use of a singal configuration file. With that configuration file, I could change the photos shown by just changing a view variables. I could display a Flickr Collection that you, yourself have set up and it will display any photos you have within the sets within that Collection of yours. Who knows, perhaps other people might like something similar to this right? Perhaps I can one day include theme support? Ah, the possibilities could be endless!

Possible Future Updates:

I am always thinking of new ways to not only share and display my photography, but also to make my websites a bit more interesting and exciting. Some other ideas I have for the site but will need some more thought are:

• Purchasing of Photos with a Shopping Cart
• Easier way to navigate between Photos – Perhaps AJAX based
• More Photos!

What do you think of this particular newly redesign photography portfolio website? What do you like/dislike about it? What would you like to see on it? I am always wanting feedback about the work I do in both the Photography department and the Web Design/Developing department, so I hope you will leave a comment with your thoughts/suggestions!

Why Change the Layout?

Some people fear change, I love change (well for the most part). I wanted a new layout that would give more emphasis on my Photography. After all, I seem to do more blog posts on Photography than anything else really.

Some of you know about http://www.tyleringramphotos.com. It was a photoblog that I ran somewhat separately from this site, but I found over time, I would be just repeating a lot of the same photos. I tried to make the photoblog more of a portfolio site, but decided to just let it go and concentrate my photo efforts here.

I also wanted to change it up before our trip down to Costa Rica. My camera is coming with me and I will be sure to post magnificent photos of the area we will be in, and thought increasing the space for photos here would be a good idea.

What Changed?

I pushed the navigation menu up above the entire site. I thought it was a nice way of getting it out of the way.

I expanded the width of the site to 1000 pixels wide. This will help accommodate the size of the photos I wish to display which will be 800 pixel wide. This also eliminates the need for using the Lightbox that the 500 pixel wide photos currently use. According to Flickr’s ToS, the use of the lightbox technically takes away from the experience of using Flickr, so I guess that is a bad thing.

The header image is still pulled from my Flickr stream at random. I increased the length to the full 1000 pixels wide and increased the height to 250 pixels. this gives a much larger header image. Because my photos are typically 800 pixels wide on Flickr, I did use PHP’s GD Library to increase the size of the photo. There is small loss of quality of course, but I still think it looks really cool.

You will notice a “Featured Post’ slideshow. It is Ajax based and loads with both Firefox and IE (why are you using IE still anyway). I haven’t had time to play in the other browsers, but according to the place I got it from, it’s supposedly compatible. Let me know if you experience issues with it. I think it’s cool and have always wanted one.

I got rid of my Sidebar. Yup, I started hating it anyway. I’ve moved the Categories, Recent Posts and Recent Comments to the footer of the site. This keeps the main focus hopefully on my big beautiful photos. Right?

The main content will accommodate my 800 pixel wide photos, with room to spare. After all, since I love Photography so much, I thought it would be best to share the photos in a nice, large way.  Such as this photo:

Isn’t that beautiful? The rising sun off the beaches of Punta Cana, Dominican Republic. If you have to scroll to see that photo, you really need to upgrade your monitor. Though technically you should still be able to see most of it on a 1024×768 resolution, but I don’t know why you’re running your resolution that low to begin with.

Added some cute little Social Media icons near the header. No need to show how many people follow me right?

The main page (index page) will show up to 5 posts with excerpts along with a 500 pixel wide photo. The excerpt code is custom, which includes a custom call to the WordPress database (MySQL) so strips out any HTML it sees. It works better than the default WordPress function the_excerpt(), or at least I think so.  I also have a function that pulls the first image from the post and uses it as a 500 pixel wide thumbnail, same as before but that was 100 pixel wide. I also tweaked it a bit to load quicker (hopefully).

I guess that is about it. There have been some little tweaks to the code here and there. Primarily to the code that handles the recreation of images for the various locations on my site.

What’s Next?

I’m sure I’ll tweak things as I find them. If you notice anything out of place, don’t hesitate to tell me here via Comments, Twitter or even contact me via my Contact me page.

I will be writing a small WordPress plugin to deal with my contact form. Currently I use cFormsII but it is just too much and always gets stuck in my spam filter. I will look at creating a small, simple (or minimalist) contact form.

I might look at creating a WordPress plugin to better handle the “Featured Post” Slide show. For now it is changed manually (via HTML).

What do you think?

I’m alright with criticism. If you like it, what do you like about it? If you don’t like it, what part(s) and what would you do to make it better? Let me know via the comments section!

The past few hours I have been pretty geeky. I’ve been looking into Flickr’s API (application programming interface) and how I can monkey around with it and PHP. What did I want to accomplish? At the beginning I didn’t really have a goal, I wanted to see what I could do with it, how I can access my photos and from there I would figure out something fun to implement.

Well it seems I have figured out something cool. If you’ve noticed the larger photo on the header of my page, the one above the Flickr RSS thumbnails, it is a bit more dynamic than usual. Previously I had 5 (I think) header images that I created in Photoshop and was using PHP to randomly insert on when the page refreshed. Now I can be a bit lazy at times and I haven’t looked at updating those 5 photos in a while, so I was thinking how I could incorporate my Flickr photos with my website in order to help give my photography a bit more exposure.

So what’s different? Go ahead and refresh the page, it should show a random photo of mine from Flickr. Though there is a catch, it isn’t the fastest system yet and it doesn’t always show something cool. Let’s see if I can explain the functioning behind how it currently works. I might have a revision or two, but for now I think it’s pretty cool!

1. Pull the last 400 photos from my Flickr Photostream (pulls XML data)
2. Select a random photo using PHP’s rand() function and create URL for photo
3. Check to see if it is in landscape or portrait orientation, discard if it’s portrait
4. Select the middle third of the photo, remember the “Rule of Thirds” for photography? Hopefully this is the more interesting portion of the photo. If not, tough luck! Typically my photos are 800×533 on Flickr
5. Create a new 850×118 jpeg image and copy random photo into its placeholder, resize to width if needed
6. Display photo in all its glory as my header image

Not bad for a couple of hours of work. Either way it allows for a more dynamic header and some more ‘freshness’ too!

I am looking for your feedback on this! Is it slow to load? Do the photos suck? Is it a cool idea? Is it random enough? What do you think?

I can just sit here and refresh my screen all day looking at whatever random photo is pulled from Flickr.

While I sit here and look over my various sites including my Photography site, I noticed that the unordered lists were not styled. Raul also mentioned how I should write about styling unordered <ul></ul> or ordered <ol></ol> lists within a WordPress theme, as his was also missing styling. This won’t be a terribly in depth post about how to completely restyle your unordered or ordered lists but it will hopefully help you learn the basics you need to know when playing with them, within your WordPress Theme or Template. This also applies outside of the world of WordPress as well since I will not be targeting a particular class or id name within a stylesheet.

The Lists

Alright I’ve mentioned both unordered and ordered lists, but what is the difference between them? Normally, I use unordered lists <ul></ul> which are primarily used for listing items in no particular order, like a shopping list!

The other is an ordered list <ol></ol>, which I don’t think I ever use. Ordered lists are for listing items in a particular order. Wasn’t that obvious?

Now that we got what they are out of the way, what do they look like in HTML?

Simple and straight-forward list right? Though now you are probably wondering how do you go about editing your stylesheet for your theme to suit your needs? Well, it too is pretty straight-forward.

CSS – Cascading StyleSheet

Your cascading stylesheet is located among the rest of your WordPress Theme files (/wp-content/themes/your-theme/) and is usually called stylesheet.css.

Now stylesheets can vary greatly from theme to theme,  but let’s try to keep this uncomplicated and apply a specific styling to the above list. We would modify the above list by adding a class reference or name to it.

We give the class the name mylist just for easy reference, typically it is best to name it something that will be easily identifiable to you for editing purposes. With your favorite text editor (notepad, notepad++, simpletext, bbedit, etc) open up the stylesheet.css file. Chances are you do not have a class called mylist so let’s get started. Pick an area to insert the class declaration, I normally place it after the #content declaration. The cascading stylesheet is typically read from top to bottom, hence the name cascading.

This will set up the class declaration for the unordered list we’re about to create. We will start filling in the guts of the style as well as editing the internal parts of a list which are the list items <li></li>. Some attributes that I modify when I play with a list, whether or not its an ordered or unordered list, is the padding and margin. You can also change the look of the “bullets” you decide to use as well.

What the above does is changes the look of the “bullets” to discs, I also remove the margins from the list. This will remove the extra spaces around the list itself. I find sometimes that when I insert a list within a paragraph or between paragraphs there is too much of a space between them all. Setting the margin to 0 will help. I then nudge the list over by 10 pixels which is like indenting it. If you are using an ordered list <ol></ol> you can change how the numeric representation looks too, like numerals, roman numerals etc.

To style the list items you start a new declaration below the parent style.

Say we wanted to change the color of the items within the list to a red and underline them, this is how you would apply the style:

Globally Changing Your Lists

Another option you have is to globally change how your ordered and unordered lists work. Instead of using a class or an id you would just use the tag itself:

This would give the default style to any <ul></ul>(unordered) tags throughout your whole WordPress Theme.

Afterthoughts

• Cheese
• Bacon
• Milk
• Bread
• Eggs

The above example is how my blog (custom WordPress Theme) handles unordered lists. The CSS behind the list is relatively simple too:

Take the outer class (or parent) post, which is typical of most WordPress Themes. I’ve told the stylesheet.css to use a disc type with adding padding to the bottom of the unordered list. I then tell the list items to nudge over by 25 pixels and pad them a little bit as well. This allows for an easier to read list of whatever I decide, or at least I think so.

More advanced styling would be to remove the default bullet style and replacing it with a positioned background graphic. Perhaps you have a logo you would like to use as the “bullet” instead. You can see this in action over at my photography site. Any unordered list use a background image (of a single arrow) as the “bullet”.

Typically WordPress Theme navigation (like home, about, contact etc) are also unordered lists, though they have a bit more styling applied to them. The style applied is usually the removable of the “bullets” (list-style-type:none;) and aligning the items horizontally not vertically (display: inline .

Hopefully this has shed some light on ordered and unordered lists within your WordPress Theme or in general web design usage. I’ll answer any questions you might have, and if any of the above is incorrect, please feel free to correct me so I can make changes.

One of the aspects of web development and design, or even blogging is trying to find photos which you can use without having to pay for them or paying very little for. Today on Twitter there was a mentioning of a stock photography website that I believe many people might find useful when trying to find stock images for their web layouts or even blog posts. That website is FreeDigitalPhotos.net and as long as you give proper attribution back to them you don’t need to spend a single penny.

If you want a higher resolution (greater than 640×436) then you will have to start paying money. Though once you’ve paid for the photo’s use you don’t need to leave any attribution to anyone for that particular photo.

FreeDigitalPhotos.net

If you a photographer and looking to perhaps earn some extra money for your photos, you can sign up and sell them on the website as well. There is a bit of a process to get registered as a photographer to upload your work, though if you are good at what you do I am sure it is a relatively smooth process. The free (lower resolution) photos wouldn’t make you money but you can earn what you want (minus their 25% commission) for any higher resolution photos someone purchases. You set your own prices. That’s a pretty cool idea.

FreeDigitalPhotos.net

Their library is pretty good too and ranges from Animals to Everyday Items you may find laying around the house. So far after a quick look at their website it seems to be promising for those who want to add images to their blog post or website without having to dish out any extra money.

So if you are looking to spruce up your website’s content a bit or perhaps looking for a new header image, you could look at their collection of stock photography. Granted if you are looking for a header image, you may have to look a purchasing something a bit larger than the low resolution photos. 640×426 is not that wide enough for most full-width headers. Though the low-resolution would be great to have inline with your website’s content to add a bit of colour to them and also offer the eye a bit more something too.