My personal site

aslsw66 · 2013-09-25 20:28:33

After spending time off and on working on other sites, I finally figured I should get around to doing something about my own.

TheSamaras

As you can see, I built the design around Twitter’s Bootstrap mainly for ease of development. Hopefully, it doesn’t look and feel like the classic ‘bootstrapped’ website.

The carousel at the top of the homepage showcases 5 random photos, while the gallery towards the bottom of the homepage showcases 10 random thumbnails that simply link through to my Flickr account. I also use images for linking to some articles. I’ve been using Flickr for many years to store my best photos ‘in the cloud’ and only use Textpattern’s image capabilities to feature selected photos in this way. I’ve figured out a good image workflow using bot_image_upload and ebl_image_edit.

Where I can identify a location, I use a custom field to hold the combined coordinates of the location and then use these to display a Google map on the article page.

Some things still to be done:

show all article locations on a single map,
allow the map on the trip articles to show a start and end point with a line between them,
modify zem_contact_reborn to allow for classes to be passed into individual elements. The plugin hard-codes its own classes, but I want to use the Bootstrap ones,
add a star rating system to my ‘review’ articles,
convert my map coding into a full-blown plugin – 50% done (yes, I know there are some out there already but I want to achieve maximum flexibility), and
convert the design to mobile-friendly Bootstrap (Bootstrap 3 if I have the time and the courage).

As always, I would really welcome any ideas, suggestions, corrections or other comments.

PS. Earlier versions of Internet Explorer won’t enjoy the experience!

Bloke · 2013-09-25 21:48:00

Nice stuff, Anura. Easy to navigate, and some cracking photos. Your last.fm feed seems to be doubling up the artist/album in the Listening list, btw. Hope it’s not one of my plugins misbehaving!

If you’re interested, I have a hacked version of zem_contact_reborn which adds a class attribute to all tags so you can override the default class names. It also adds a truckload of HTML 5 input types and relevant attributes to control them. Oh, and gets rid of the separate zem_contact_lang plugin in favour of a Textpack.

It could always do with some willing testers and, if it works well enough, I might propose it to Ruud as the basis of the next version. Let me know if you’d like a copy to play with.

Last edited by Bloke (2013-09-25 21:48:44)

aslsw66 · 2013-09-26 07:58:40

Thanks for the comments Stef. It’s interesting that although I use Flickr as storage I really don’t spend much time going back to my photos, but ‘curating’ them to showcase some for my site has made me realise that some of them are pretty good! On to Textpattern stuff …

The duplication in the last.fm display is actually coming from the feed. It might be because I have been experimenting with live scrobbling from my phone and didn’t turn off scrobbling from iTunes as well. Something to look into but definitely not anything to do with your plugin.

I would be happy to try out your hacked version of zem_contact_reborn. I have only had one contact through the contact page (from a friend who already knows how to get hold of me) so if it breaks somewhere I don’t think I will be missing too much.

The final thing I need to do with my site is turn on comments. I’ve been reluctant to do so till now as I want to explore what are the best practices used by others on the forum. I really want my friends to be able to keep track of me (I’m away from Australia for a couple of years) and interact through the comments without (1) making it too onerous for them and (2) making it too easy for the spammers out there.

bici · 2013-09-26 19:29:09

Very nice site. I would love to see an how-to article on how you created your site… perhaps in the TxPMag

PS as you say, “Hey, it’s 2013” … comments are so yesterday.

jpdupont · 2013-09-27 15:34:17

Nice !
On Firefox, I don’t see the icon’s. (It was OK the first time I see your site, yesterday ?).
No problem on Chrome, IE10.

aslsw66 · 2013-09-27 15:40:32

Yeah, I get that every now and then on FF at work, but never at home. Sometimes they come back after a couple of refreshes, but I really have no idea what would be going on – possibly some debugging if/when I get the time and care enough about it.

I know that one of the risks with using Font Awesome and Google fonts is that the files are stored elsewhere so the site really relies on those resources being accessible all of the time.

rubelharry · 2013-10-01 10:11:35

HI Anura Your site is really eyescatchy , You can do some more seo work to get traffice. and one more thing is that your time load is very high. reduce it for user experience.

aslsw66 · 2013-10-01 10:54:35

Thanks for the feedback.

On the SEO front, frankly I’m not really fussed – this is really just for me to share with friends and family, particularly while I’m overseas, and if I drive too much traffic to the site then my hosting provider will start charging me more! I’m on a really cheap hosting plan but they provide great service so I’m happy enough for now.

The issue of loading time is a tough one, because there are just so many factors at play:

as I say, my hosting plan is pretty cheap so my site is sitting on a shared server somewhere,
as I use Bootstrap, there is about 424kb of overhead already (including jQuery and font awesome),
I also know that my approach to using pages and forms in Textpattern drives a few database queries, but
the real killer is the images. The six images being pulled in for the carousel at the top of the homepage total over 1,000kb.

At the moment, the carousel images all have to load with the page. What I would prefer to do is have only the first image load with the others loading in the background after the page has loaded. But my coding skills really aren’t up to that yet!

Thanks again for the feedback, it has certainly given my some things to think about in terms of tweaking for performance.

Gocom · 2013-10-01 13:15:44

aslsw66 wrote:

as I use Bootstrap, there is about 424kb of overhead already

Bootstrap is component driven. You can build a version with just the components you need.

jQuery

<script src="http://code.jquery.com/jquery.js"></script>

That’s not the file you want to link to. That isn’t a minified production version, and its moving. That file is always the latest release version; your scripts depending on jQuery may unexpectedly break as the file changes over time. Change that to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

One extra request:

<link href='http://fonts.googleapis.com/css?family=PT+Serif|Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

You can merge those into one:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Serif|Droid+Sans:400,700|Open+Sans">

That is if you both of those; I personally wouldn’t. Two stylistically similar sans typefaces, both meant for body content, normally do not go well together.

Last edited by Gocom (2013-10-01 13:16:34)

aslsw66 · 2013-10-01 13:45:40

First things first – did I mention that I was lazy?

Bootstrap is component driven. You can build a version with just the components you need.

Good point. I took the lazy option when I designed the site to just use the full suite of Bootstrap components, so it might be time to go back and be more selective.

That’s not the file you want to link to … Change that to:

Thanks, that’s a great tip. Nothing seems to have broken (yet).

I personally wouldn’t. Two stylistically similar sans typefaces, both meant for body content, normally do not go well together.

Good advice, thanks again. Although they are different when used at the size and weighting of a heading, I found I could easily ditch one and condense this down.

Those were the easy fixes. When I changed to the CDN version of the core Bootstrap CSS files it completely breaks my site. The CSS file I have hosted says its version 2.3.2, the same version as the CDN version, but clearly something is different between the two (and I didn’t change the underlying Bootstrap files at all). I do want to squash all of these issues so I will spend some time tonight trying to see what the difference is.

All great advice.

taranum · 2014-02-16 15:52:29

You have nice stuff on your website. I checked the gallery area and didn’t find enough description for each picture – only title mentioned for each picture.

Textpattern CMS

Textpattern CMS support forum

#1 2013-09-25 20:28:33

My personal site

#2 2013-09-25 21:48:00

Re: My personal site

#3 2013-09-26 07:58:40

Re: My personal site

#4 2013-09-26 19:29:09

Re: My personal site

#5 2013-09-27 15:34:17

Re: My personal site

#6 2013-09-27 15:40:32

Re: My personal site

#7 2013-10-01 10:11:35

Re: My personal site

#8 2013-10-01 10:54:35

Re: My personal site

#9 2013-10-01 13:15:44

Re: My personal site

#10 2013-10-01 13:45:40

Re: My personal site

#11 2014-02-16 15:52:29

Re: My personal site

Board footer