agtb.nethttp://agtb.net
Personal website and portfolio of Alistair Buckle, the Web DeveloperTue, 24 Sep 2013 12:55:00 +0000en-GBhourly1http://wordpress.org/?v=3.6.1About agtb.net v3http://agtb.net/articles/about-agtb-net-v3
http://agtb.net/articles/about-agtb-net-v3#commentsFri, 24 May 2013 08:59:48 +0000Alistair Bucklehttp://n.agtb.net/?p=395A look at the design and development for version three of agtb.net, this website.

My new design has a minimalist feel with what I hope is a friendly finish. I wanted to prioritise content so I’ve taken care to work with the typography and how the line length affects readability.

I’ve incorporated concepts that I find interesting such as golden rectangles for the proportions of the areas of the page and images. I find the grey is neutral to warm and works to highlight the accent colours.

Responsive Design

I’ve taken a mobile first approach, starting with a website that works on small screens without loss of features and added to the layout as screen size allows. Resize your browser to see what happens.

There are approximately three variations determined by viewport width. The smallest (e.g. mobile) is one column, has slightly reduced text size, and the top menu is folded into a button (top right). The second (e.g. tablet) regains normal text size and performs other tweaks. The third (e.g. desktop) adds a second column for a right sidebar or space for articles and a full top menu.

The superb polyfill respond.js provides Media Queries support for Internet Explorer <=8 and older browsers, which otherwise could have been a sticking point for me.

Typography

I wanted simple and elegant typography with an emphasis on legibility on all devices. Like anyone who endured the dark ages of web safe fonts (you have a turnip), font stacks (you swap your turnip for a similar turnip that will probably be either slightly bigger or smaller than you wanted), and font replacement (you swap your turnip for a beautiful, expensive grenade) I’m overjoyed with web fonts.

I think it’s a good idea to select typefaces at the start so they can inform the rest of the design. My process for this is to make a list of what I think could work and then test how they look as web fonts on different devices. Many that look promising turn weird and some that are pretty are not pleasant to read! But there are winners:

Edelsans for the body. Wow, what a fantastic typeface! I find it to be a perfect evolution with an elusive quality: I find it a pleasure to read at length.

League Gothic for headings. I think it works well with Edelsans as it different yet complementary. I particularly like that it’s naturally condensed so longer headings, such as the titles of articles, are visible without taking over the page.

My workflow was converting my Photoshop documents using Eclipse PDT (IDE) and viewing in Firefox and debugging with the essential Firebug before cross browser testing on everything available for every step that experience tells me would be open to “interpretation”.

I’m proudly using using WordPress so I briefly checked the HTML structure worked with placeholder content for the home page, articles list, and articles pages before hooking up the CMS. I still find the WordPress template hierarchy indispensable because I separate different layouts into template files. I’ve had to maintain thousands of lines of PHP alternate syntax several times before and it’s like looking for a specific twig in a nested nested nested nest of exploding nests.

I’m including a recent version of jQuery, but there hasn’t been the need for a lot of bespoke JavaScript. My portfolio is an animated, responsive carousel made possible by caroufredsel. I like how it makes the most of the full width of the screen by determining the number of items to display.

Techniques

CSS sprites for the social media icons on the sidebar. Worth doing and so much better than alarming your users by having the button they hover over disappear while their browser fetches the other image. For managing more sprites on a stable design I recommend SpriteMe.

The home page uses this technique for responsive CSS sprites for the main image. I don’t like adding superfluous markup but this was the best, cleanest cross-browser technique I reviewed and I’m happy with it.

Image optimisation

Images formats (e.g. PNG/JPEG JFIF) are chosen based on image content. For example, if the image has large solid or transparent areas these typically compress well so I favour PNG. PNGs are used when it’s likely I’ll want to re-edit the image during development (no loss of quality) or when fine detail would be marred by compression artifacts.

Image format choice is a balance. It’s important for a website to load quickly but I also want quality and retch at over-compressed tiny images (save a few KBs but lose a sale because I can’t tell which pixel is supposed to be your product).

What’s not in question is the advantage of optimising PNGs. No loss in quality but lighter size and faster performance is a no brainer! I’m currently using PNG Gauntlet, which uses PNGOUT, OptiPNG, and DeflOpt to produce the smallest PNGs I’ve seen (far superior to online services or single tools I’ve used in the past).

Standards

I think good developers recognise the value in the maxim test early, test often so I insist on Web developers validating their work with the W3C validators during development. It’s quick and easy and it’s great at disarming browser rendering problems.

agtb.net uses valid HTML 5 and CSS 3:

Plans for the future

I’d like to implement columns for text but I’m not keen on vendor-specific CSS extensions any more than I’d like to make a website for each version of each browser. They couldn’t at least come up with one experimental prefix, each organisation had to create their own to implement similar results? (Good luck to us all deprecating all that cruft!)

I’d like to revisit the CSS units for responsive design breakpoints and typography when rem, and viewport units are solid and I can test for all cases (big screens no jumbotron text, tiny screens, and incompatible browsers).

Overall, I’m happy with the design and want to shift focus for the time I have available to writing good content.

One feature I really like about Safari on the iPhone is that when you’re reading an article you can highlight a word and get a definition from the built-in dictionary. I find it a very natural way to decipher the accurate intent of the author and the etymologies provided further illumine the word’s context.

If I want to look up a word when using a desktop Web browser I hit Alt+Home to go to my homepage, flat HTML with a form to search at websites I frequently use, type the word and choose a dictionary. I realised I’ve gotten so used to this process I don’t think about it even though I do it a lot and it’s not very efficient.

I thought about adding an option to the right-click context menu of the browser but most of them are so hideously stuffed with kitchen plumbing that it would be quicker to dust off an actual dictionary and flick through the pages.

I’m a logophile not a sesquipedalian inveigler!

So instead I delved into “things that were cool to do with JavaScript in the year 2000″ and created a few bookmarklets for online dictionaries. A bit passé but it’s functional and I use it so maybe it’s useful for you too?

I needed to change some text on the Joomla login form that grep showed me was in a language file.

In earlier versions of (Joomla <1.6), this meant editing the language file or loading in your own file programmatically.

Editing the file directly is simple (so long as you have identified the correct file) but short sighted!

The problem with updates

If you update Joomla you will either wipe out your changes as the language file is overwritten or need to spend significant time diffing to reconcile the language files. Even using a fancy IDE diff or an external graphical diff tool, the thought of sifting through the lines makes me shudder!

Loading in your own file to override is possible but shouldn’t that be a feature of the language files anyway? I was happy to find in Joomla 2 you can override language strings!

No nasty surprises when updating Joomla or any core hacks locking you in to an old version of Joomla.

]]>http://agtb.net/articles/joomla-language-file-overrides/feed0About agtb.net v2http://agtb.net/articles/about-agtb-net-v2
http://agtb.net/articles/about-agtb-net-v2#commentsTue, 25 Aug 2009 22:17:58 +0000Alistair Bucklehttp://www.agtb.net/?p=134How I built this website in WordPress and the decisions I made during design and development.

I’d like to talk a bit about some of the more interesting work I’ve done recently on, agtb.bet, my personal website. I don’t want to fall into the trap of blogging about blogging so I’ll just highlight things I like and give a tip of the link-hat to some of the technologies I’ve used and liked.

WordPress Theme

I’m using my own custom WordPress theme for agtb.net. I started, as usual, when I develop WordPress websites by hacking the ubiquitous default WordPress theme, Kubrick, into shape.

I have developed websites using themes designed for rapid development such as Sandbox, but I found the amount of extraneous cruft to be a time sink to remove. Kubrick has, what I would consider, a lot of junk (e.g. pixels for text layout, repeated CSS selectors, no obvious order) in the CSS stylesheet and custom functions but I like the overall website layout.

WordPress Plugins

Aside from the usual plugins WordPress needs to function properly (caching, spam blocking, SEO) the one plugin I usually install first is Pathless Category Links. It simply removes the ‘category’ level of the website for posts, which I think pollutes the website’s URL structure.

I’m running my own plugin to automatically add meta description tags, which can be used by Google for descriptions in search engine results pages, to the pages on agtb.net. I’ll be developing and releasing this and other WordPress plugins soon.

Techniques

CSS Typography

The idea here is that Web browsers default to a medium text size of 16px. So by resizing that to a useful number (10px) it is then possible to define size by ems based on that value and so use relatively resizable text.

jQuery Validation of Comment Forms

I wanted a clean and clear way to highlight any errors preventing submission to users of the comment forms at agtb.net. The default WordPress action is to take the user away to a new page listing problems, which seems awkward.

I’ve used jQuery with the Validation plugin to validate the comment forms. The default actions of jQuery: Validation are good and very quick to implement. After including jQuery in WordPress and appending a class of required to <input> elements the plugin inserts a <label> for each field to notify the user of the form’s requirements.

I wanted to notify the user of any problems by highlighting the fields and listing any errors clearly at the bottom of the form. Thanks to the good quality Validation plugin documentation I had soon added custom highlighting, messages, and error placement. To see this in action try submitting a comment without entering a name, valid e-mail, or comment. It’s a pleasure to use mature projects like jQuery:Validation.

Graphics

I do my own graphics whenever I can. I enjoy keeping my Photoshop and Illustrator skills keen and find that if I don’t use them regularly I can get a bit rusty. I’m not a graphics artist by trade so I lack a certain creative flair but I have a eye and attention for detail.

I’ve also used or tweaked some icons from the excellent Silk Icons package on agtb.net. There are probably enough good quality icons there to create your own Operating System.

XHTML and CSS Validation

Once the majority of development has been done it’s time to validate the HTML and CSS. I usually do this at the end of introducing a new feature because writing standards compliant code comes naturally. I find validation is useful for revealing mistakes such as missing HTML elements depending on the PHP path taken or the occasional typo.

I changed the DTD from XHTML 1.0 Transitional to Strict. To comply with Strict I only had to remove a few non-standard HTML attributes left over from the Kubrick theme.

You can validate this page and the website CSS with the buttons below. I also display validation buttons at the foot of the page so you (or I) can quickly check my code is standards compliant.

Development Workflow

I use Eclipse PDT (Ganymede) as a PHP editor with the Subclipse plugin for Subversion version control using a repository hosted at Dreamhost. I’m using XAMPP as a local testing server. And life is good!

I use a pretty standard repository layout of trunk/branches/tags directories for the agtb.net theme. I’m planning on using the vendor branch pattern for the WordPress core but the frequent security updates would probably be an unwelcome chore to integrate. I keep all website images under version control. Checking out and committing however run quite slowly so I export the website files via SSH on the Dreamhost server.

The rest is Firefox, Firebug, and Photoshop or Illustrator before switching back into Eclipse.

]]>http://agtb.net/articles/about-agtb-net-v2/feed0CentOSCubes error messagehttp://agtb.net/articles/centoscubes-error-message
http://agtb.net/articles/centoscubes-error-message#commentsThu, 16 Jul 2009 19:24:38 +0000Alistair Bucklehttp://www.agtb.net/?p=3Here’s how to fix the ‘Cannot open theme file /usr/share/apps/kdm/themes/CentOSCubes’ error message on CentOS.
After an update to a CentOS system, I was presented with the following error message on the login screen:Cannot open theme file /usr/share/apps/kdm/themes/CentOSCubes

It wasn’t a critical error – more of an annoyance. Dismissing the message box displayed a basic-looking KDM that allowed me to log in.

Problem

The problem on my system was that the default CentOS KDM theme was updated and the old one, CentOSCubes, dropped from the artwork package. Here’s a (resolved) CentOS bug report on the issue.

Fixed

To get rid of the error message I simply changed the KDM config file to point to the new theme:

Check what themes are available:

ls -1 /usr/share/apps/kdm/themes/

Change the line begining ‘Theme=’ in the config file:

/usr/share/config/kdm/kdmrc

e.g.

Theme=/usr/share/apps/kdm/themes/TreeFlower

Error message gone!

]]>http://agtb.net/articles/centoscubes-error-message/feed1XAMPP local testing serverhttp://agtb.net/articles/xampp-local-testing-serve
http://agtb.net/articles/xampp-local-testing-serve#commentsTue, 30 Jun 2009 23:37:18 +0000Alistair Bucklehttp://www.agtb.net/blog/2009/07/26/test-post-the-third/Setting up a XAMPP testing server on Windows proved to be a pain free, pleasant experience. Here’s one I made earlier.

I had a need for a local testing server on my Windows desktop so I was about to install part of the LAMP stack (Apache, MySQL, PHP) when I stumbled upon XAMPP, an all-in-one package offering these (and a lot more too) in a fast install.

Local server up in minutes

I have to say I’m very impressed with XAMPP-lite! Once I’d got round the usual oddities (e.g. file locations based on physical drive locations, such as C:, instead of a proper hierarchy) of running software originally developed for *nix on Windows I had a working test server running locally in no time at all.

Configuring XAMPP for local domain names

Testing a website from localhost file paths instead of DNS worked well but I soon added a hosts file entry and a bit of virtual host configuration magic to avoid problems (e.g. with Apache RewriteRule directives).

I chose to use a fake subdomain of ‘local’ and then mapped that in XAMPP’s vhost.conf equivalent.