WWW posts page 37

PHP: Outputting Lists in Arbitrary Number of Columns

in

For lists of narrow pieces of content, it can make sense to put them in multiple columns to better use available space. For things like image galleries (a list of images), where it tends to be easier to read from right to left, or when order is irrelevant, it is easy to turn a regular list into columns (like a grid in the case of the images) by simply making each item a fixed width and height and then floating the items left. This works fine back to IE6 and remains fully semantic and accessible as one list.

Text lists tend to be easier to read top to bottom though, so when they are in alphabetical or some other important order, it is generally better to order them top to bottom in each column. I haven’t delved into the CSS3 multi-column layout abilities yet, as that is not widely supported (especially no IE). The float item method cannot be made to appear in the proper order while truly keeping the items in proper order in the list for accessibility and semantics, and putting the data in the proper improper order to make that work would be complicated anyway. The only real way I am aware of to currently make the columns be in proper order is to separate the list into a list for each column and then float each column left. This is not ideal semantically and for accessibility, but will still read in the proper order for all users.

Continue reading post "PHP: Outputting Lists in Arbitrary Number of Columns"

Javascript: Objects and Callbacks

in

I’ve been doing my JavaScript coding directly in objects. Before I had been doing them without objects, then modifying them if I had time, but now that I have experience with JS objects, it is much nicer to do the OO straight off. When making objects that are versatile, allowing multiple instances, it is often necessary to be able to perform different operations for different instances. As an example, you might create a single class to handle auto-suggest type functionality, and want it to do different things when you choose one of its suggestions or cancel for different instances of its use. In JS, you could either create forks in the parent class for each possible behavior and use a test to determine which behavior is appropriate, or you could create a callback on instance instantiation or in a function call. The callback method can be very versatile and clean, allowing you to leave alone the core class and modify the calling class or global call.

Continue reading post "Javascript: Objects and Callbacks"

Piwik and XHTML 5: Document.write and Noscript

in

I’ve been using Piwik recently for my site analytic purposes. I added it to my “professional” site, which is served as XHTML 5 for anything but IE. On that site, no visits were registering, though awstats showed that there were visitors. As it happens, this is because the javascript “document.write” is not allowed in XHTML. I believe older versions of XHTML still allowed it to be run, but it certainly wasn’t being run on my XHTML 5 site. Firefox showed an error in the console. This is mentioned on the WHATWG’s page about the differences between HTML5 and XHTML5.

The Piwik community doesn’t seem to have much mention of this, other than one mailing list thread. I modified the script to something similar to the one in that thread, like this:

Continue reading post "Piwik and XHTML 5: Document.write and Noscript"

CSS: IE Shadows and Rounded Corners With HTC

in

[Update Synopsis] I’ve improved color support, now working for hex, rgb, and rgba at the beginning or end, re-added Nick’s text-shadow support while giving it the same color support as box-shadow, and added an -ms- prefix to target IE for these properties with. I’ve made a simple example page and you can find the file for download in this Google Groups thread. [/Update]

At Cogneato we use a lot of drop-shadows on elements in our designs, and a number of sites use rounded corners as well. In the past, images had to be used for shadows and rounded corners, using a variety of techniques and often adding to page weight and requiring new images be made for site changes. But CSS 2 and 3 introduced properties text-shadow, box-shadow, and border-radius to handle these display niceties without images. These have slowly gained support among browsers, and now, with vendor specific versions, are supported by the most used non-IE browsers. But IE still offers no support for them up to version 8.

HTC’s (basically javascript that can be attached to CSS selectors in IE) have been used to handle a number of IE issues, and Remiz Rahnas created one to support these CSS properties. It has been updated by Nick Fetchak and moved to Google Code. It allows you to add behavior: url('ie-css3.htc'); to any elements with those properties and the properties are automatically applied in IE. It works rather well, though it does still have some issues. For instance, on sites with fading and other animations like the one I started using this on at Cogneato, the shadows don’t fade or move with the rest of the content.

Another issue I had with the script is its handling of the color attributes of the box-shadow property. If you place the color attribute before the unit declarations like I do (ie box-shadow: #123456 5px 5px 5px;), the htc doesn’t work at all. This was easy to change in the htc to get working. It uses regex, so I just removed the ^ character, which denotes the beginning of a string, so the regex could be matched anywhere in the property.

It also happens that the htc doesn’t support color for shadows.

Continue reading post "CSS: IE Shadows and Rounded Corners With HTC"

WordPress: My First Plugin

in

I made my first WordPress plugin today. It’s very simple and for my own site only: It adds the script bits for the Piwik analytics of my personal blog. It showed me just how easy it is to create a plugin in WordPress. Normally, for clients, I’d just add additional functionality in the “functions.php” file, but for my personal site I’m using the new default theme for WordPress 3.0 (in part out of laziness and in part to try out some of the new features it introduced). I decided rather than modify the theme at all I’d create a plugin, and was happy with how easily and well it worked.

Creating a simple plugin involves creating a PHP file in the ‘plugins’ folder (in ‘wp-content’). It can be named anything, and could also go inside of a folder if multiple files are needed. The plugin file starts with a snippet like the following:

Continue reading post "WordPress: My First Plugin"

Lynda: SEO – Search Engine Optimization Getting Started

in

Finally completed another Lynda course (see certificate Link no longer working). I’ve mentioned that I’m doing some SEO work at Cogneato, so I decided to go through a course on Lynda. I had started one a while back, but it was very long and on the old side (2006). There’s a newer, shorter one now entitled “SEO: Search Engine Optimization Getting Started “. It was good and detailed without being overly verbose. I like her methods, especially her message to write for users rather than search engines. I think they work better long term and are better for users than some of the more old school methods. I will try to implement some of the methods at Cogneato.

Some important points from the course:

Continue reading post "Lynda: SEO – Search Engine Optimization Getting Started"

David Hawkins: JQuery Image Reflections

in

The design of the gallery portion of the David Hawkins site I’m working on at Cogneato called for a reflection of the current image below that image. This could have been done by making reflections for each image in an image editor and then adding them to a separate field in the CMS. That would have been a pain and would require (most likely) us to be involved for each image added.

Luckily, since this site was already going to be using jQuery, I was able to find a jQuery plugin that handles the reflections automatically on page load. People without javascript just won’t get reflections. It works in modern browsers and IE 6-8. It is less than 2kB, which would be much smaller than even a single separate reflection image, though the now-more-bloated 72kB jQuery might ruin size benefits if we weren’t using it already. And as far as adding images to the site, the reflection is added automatically, well worth it.

Because of the design of the site, I had to modify the script somewhat to make it work properly. One issue was that I had a border around my images.

Continue reading post "David Hawkins: JQuery Image Reflections"

Cogneato: Three Months

in

I’ve now been at Cogneato for a little over three months. It is definitely long term now. I am still liking it, especially since I’ve been branching out into other areas even more. I’ve been doing more programming in PHP and Javascript to set sites up and add functionality, and have even gotten to work a little with SQL again.

For example, on one site, called Pink Rave, I had to add blog functionality, which isn’t quite built right in like with WordPress. For the standard “archive” box, I had to make a bit to spin through all posts and chunk them based on date, then output the represented dates in the box. For the search functionality, Cogneato’s CMS has nothing built in, so I had to do custom queries. They are using the BLOB data type, so I couldn’t use the FULLTEXT searching, instead having to build concatenated LIKE statements. Luckily, the CMS can easily put the results of custom queries into its result objects, so it is easy to then work with them like I otherwise would. In fact, for this blog, I handle all multiple item listings with the same output script that just fills the object array with different data depending on the type of page.

Continue reading post "Cogneato: Three Months"

Haley Litzinger: HTML 5 Semantic Elements

in

It looks like I will not be doing at least the design for Haley’s site. She just got Adobe Suite CS3 and wants to make use of it. I will probably be helping her out at least some with it though, and we may even use her design on the WordPress site I built for her. We still haven’t met to discuss the details of this yet though.

Before I found out about her plans to build or at least design the site, I built a simple but functioning test site. In doing so, I made my first venture into using the new HTML 5 semantic elements. I used the Dive Into HTML 5 site along with a few others to learn how to use the elements. The new elements I made use of are “section”, “header”, “footer”, “nav”, “hgroup”, and “time”. There’s also the “article”, “aside”, “mark”, “figure”, “meter”, etc. tags, but I did not use them on this site. The Dive Into HTML 5 site describes the basic ones fairly well in brief.

Continue reading post "Haley Litzinger: HTML 5 Semantic Elements"

Javascript: Closures, Objects, and Timeouts

in

I recently discussed two issues with closures in Javascript. I continued to improve my menu script by fixing some IE issues, then I moved everything into objects. By moving to objects, I ran into another issue that was basically a combination of the two issues discussed in the previous article. I did not immediately realize this however, for whatever reason, and spent some time figuring it out.

The issue was with setting a timeout that calls a method of the object the timeout is set within. The method is attached to “this”, but “this” changes scope in a “setTimeout” call (“this” becomes “window”). To pass the appropriate “this”, we create a variable pointing to this and then pass it to an anonymous function that returns another anonymous function which uses are pointer to “this” to call the desired method. Since my “setInterval” was attached to an event listener, it also had to be placed inside of the double anonymous function. It looked something like this:

class.prototype.functionName = function(argElement){
    var fncThis = this;
    var callback = function(fncThis){
        return function(){
            fncThis.timeout = setTimeout(function(fncThis){ return function(){fncThis.classMethod(); };}(fncThis) ,750);
        };
    }(fncThis);
    argElement.addListenerEvent("touch", callbackMouseout, false);
}

This was the only major issue I had putting my code into objects. The last time I had tried something similar, I had given up dealing with the timeouts, but this time I had more experience. Now I have nice, reusable OO classes for suckerfish menus, etc.