Advanced CSS web design is not for the faint of heart or the easily annoyed

January 31, 2010

cssHow many times have you looked at a block of CSS being used on your site and wondered what in the heck is going on with all that? Is all that stuff really necessary? Did whoever put all this crap together really know what they were doing? Should I dare modify it?

Though quite functional with CSS technology, I am far from being a CSS expert but after looking at many style sheets I am left wondering what ever happened to the concepts of code reuse (at the very least implying readability,) compactness, and maintainability.

I’ve seen Wordpress themes that come with 2000 plus lines of CSS. Through experience I now tend to avoid those like the plague as they tend to break when upgrading browsers or your CMS software. Clean, compact, straightforward CSS is what you want. Granted, a lot of different fancy web design features will require a lot of CSS and in those instances look for adequate documentation.

If you simply load a nice theme you like with no plans of ever customizing it, these concerns may not seem important. But if you like to continuously improve or customize your site, rule out those themes with unruly style sheets regardless of how much you like how it looks. Follow this advice and you will save yourself a ton of headache down the road.

And speaking of analyzing CSS…

In technology terms, Douglass Bowman’s article Sliding Doors of CSS written way back in 2002 is an ancient document. However, if you are interested in a great CSS tutorial that steps you through the mind-numbing intricacies involved in developing an advanced design feature using CSS the article is one of the best I’ve read. I gained useful insight into the shenanigans used by these CSS gurus to accomplish cool web design layouts.

On the other hand, this excerpt…

Keen eyes may have noticed white tab corners showing up in the previous example. These opaque corners are currently preventing the image in the back from showing through the left corner of the image in front. In theory, we could attempt to match the corners of the tab images with a portion of the background behind them. But our tabs can grow in height, which pushes the background behind them lower, shifting the background color we tried to match. Instead, we change the images, making the corners of our tabs transparent. If the curves are anti-aliased, we matte the edges to an average of the background color behind them.

Now that the corners are transparent, a piece of the right-side image shows through the corner of the left-side image. To compensate for this, we add a small amount of left padding to the list item equivalent to the width of the left-side image (9px). Since padding was added to the list item, we need to remove that same amount from the anchor to keep the text centered (15px – 9px = 6px):

…clearly demonstrates why I don’t create CSS layouts from scratch.

  • Share/Bookmark

Wordpress drill-down admin pages II

January 18, 2010

wordpress-logo-300x300I never did do a follow-up on the Wordpress drill-down admin menus post. A lot of people continue to hit that article so I’ll take the time to give an example of how I easily resolved the issue.

The problem was that after an upgrade to Wordpress Mu v 2.8.4a all my dynamically created, drill-down admin pages quit working because they now needed to be registered with Wordpress for — completely understandable — security reasons.  As far as I can tell, the only way to register an admin page is through the menu system. Since I don’t want my drill down pages to be on the menu I needed a better way to do it.

One solution suggested was to just use the registered menu page as the callback to handle requests and that is for the most part what I did. The only issue with the solution is that the callback page has to also serve all the content since it can’t request an admin page that is not registered. Using one page to parse all requests and serve the appropriate content will get unwieldy for anything but the simplest of applications and if your application was that simple you wouldn’t be trying to figure out how to add custom drill-down admin menus.

I like modularity and easily managed code so my philosophy is that multiple small files are better than one huge file. I needed a way to solve the problem without breaking my philosophy or changing a lot of my existing code, which was already in multiple small files.

The idea is to build a container page to register on the admin menu and have the container page decide on which code to include based on analyzing the url. The included code can then handle and GET or POST requests and serve the appropriate page output.

<?php
/*
 * Descrition: gcgc admin page. This is the main container page
 * for all admin panels. All POSTS and GETS from all pages route
 * through this page and are handled by the appropriate included file.
*/
global $gcgc_Manager;
echo $gcgc_Manager->getHeader();
//analyze the url to determine which page to load

if (isset($_GET['panel'])){
    switch ($_GET['panel']){

    	case 'cache-admin' :
    	    include (dirname(__FILE__)."/gcgc-admin-cache.php");
    			break;

    	case 'vector-admin' :
           include (dirname(__FILE__)."/gcgc-admin-vector.php");
           break;

    	default :
           include (dirname(__FILE__)."/gcgc-admin-home.php");
    }
}else{
    include (dirname(__FILE__)."/gcgc-admin-home.php");
}

$gcgc_Manager->getFooter();
?>

I kept the above example brief but you can imagine that there can be an unlimited number of admin pages. And this way I didn’t have to change the included files at all — all I had to do was add the ‘&panel=’ parameter to existing request urls and problem solved.

  • Share/Bookmark

iPhone, Droid, Pre, Nexus One breakdown and comparison

January 6, 2010

Courtesy of BillShrink.com

Nexus One vs iPhone, Droid & Palm Pre

Short and sweet: The multitasking is going to be an issue with the iPhone as well as the lack of expandable memory.  I would expect both issues to be addressed in a soon-to-be-released upgrade. I mean, they pretty much have to, right?

Also if you take photos with your phone 5 megapixels is a significant improvement over 3 mp. Don’t let anyone tell you different. There may not be a big difference between 12 megapixels and 10 but if you take a lot of pictures you will be happier with more resolution at image editing time,especially when cropping.  If you don’t take pictures don’t say you never will; camera phones take ridiculously good images in many situations.

Total cost of ownership is kinda surprising since I’ve never seen the figures before.  T-Mobile’s Nexus One  with its outrageous talk time seems to be the best deal if the network is decent in your area.

Seen on Twitter

  • Share/Bookmark

The Internet is my snippets database

January 3, 2010

Like everyone who codes for a living I will lift a snippet of code from a website. Usually it’s very generic code — as most code is — and I never give it a second thought. There are only so many ways to iterate an object. A good portion of my Internet code searching is to look for code I need not because I don’t know how to do it from scratch but because I don’t want to have to figure out how to do it from scratch in yet a new language.

Although there is no reason for most programmers to ever write a sort since sorting is built in to everything these days, a sort would be a good example. Back in the day a programmer would find him or herself needing to sort things all the time and you could not make a decent living typing out a brand spanking new quicksort every time you needed one. So you figured out how to write any particular sort only once per language and saved the code for later reuse.

A more modern example would be something like this:

    defaultHandler=function(defaults,params) {
      var i;
      for (i in params) {
          defaults[i]=params[i];
      }
      return defaults;
    }

This powerful little bit of Javascript can be dropped anywhere you need a list of default parameters to be merged with a list of user submitted settings. If you are being efficient about your work you are not going to re-type that code every time you use it; you are going to cut and paste it.

So, like many older professional coders, I have a database with reusable code snippets that I have built up over the course of more than two decades in the business. I have snippets for every sort algorithm you can name: the quicksort, heap sort, bubble sort, merge sort, selection sort, insertion sort ; name and address validators/formatters; date/timezone transformations; list processing; form validation; dynamic tables; and cool tricks. When I need to do something which I have done already a dozen times I simply copy and paste from my vast snippets database, never wasting time re-writing the same code more than once.

That was then; this is now. The problem is that I have all these snippets archived in @formula language, LotusScript, VB, and a bit of Javascript whereas today I need PHP, Perl, Java, and advanced Javascript frameworks like jQuery. I could find the code in my snippets database that does the same thing and then port it over to the new language but why do that when almost any code snippet can be found in under a minute with a deft Google search? I haven’t even used my snippets database in half a decade. The Internet is now my snippets database. I found the above Javascript snippet here, for example, while looking for some sample JavaScript to pass different object types as function parameters.

I haven’t carried a technical reference book to work in almost ten years. I don’t even use them at home anymore. The Internet is now my technical reference library.

  • Share/Bookmark