Toby's Log page 99

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.

Javascript: Closures, Scope, and Arrays

in

Closures are used quite frequently in Javascript for tasks such as adding event listeners or setting timeouts on function calls. Closures are where a function is passed as a parameter to a function call from another function, and variables from the calling function must be used inside the parameter function. Dealing with scope in closures can be difficult, and I’ve spent a lot of time figuring issues with them out.

An early issue I ran into with scope, and a common one, is the loss of scope of the “this” keyword in the closed function. For example, you might want to do a setInterval that references the object that created it. To do so, you can simply create a variable pointing to “this” and then use that in the closed function, like:

class.prototype.thefunction = function(){
    var fncThis = this;
    setInterval(function(){ fncThis.doSomething(); }, 1000);
}

This is also a common problem with event listeners, where “this” might be hoped to point to the element the listener is related to, but doesn’t.

Recently, I ran into a closure problem while revamping the menu script we use at Cogneato for suckerfish menus from the old MM functions to something more capable.

Continue reading post "Javascript: Closures, Scope, and Arrays"

Haley Litzinger: New Site for an Old Friend

in

It just so happens that Christian Bryant, a previously former friend of mine from my Winking Lizard days, lives almost right across the street from my new place of employment at Cogneato. And it also just so happens that his girlfriend is another previously former friend of mine named Haley Litzinger. She went to school with me in my Woodridge days, was in my class, and we were two of the three percussionists from our class in the school band. We also had seen each other a bit in college at Kent and then on very rare occasions after that. I saw Haley drive by after work one day, found her email address on her website, and emailed her.

Haley is trying to make a career as an artist, a notoriously difficult task. She does these very interesting paintings that are composed of multiple layers by painting on and combining layers of a transparent substance resembling glass. They are very interesting to look at, and she has sold quite a few over the years, but not enough to make a living or a name for herself. She built a website (the one I found) to more easily show her work to clients or galleries. She’s no web guru, so the site currently looks sub-par, unpolished, and is missing a lot of content. It also has a splash page and second home page that takes forever to load and site navigation only on the home page.

So I offered to help her fix up the site. After talking about the project, I will be creating a new site for her from scratch. It will be a very simple site, so it will probably not take long at all. Even though it will only have four basic pages/sections, the gallery section will have a lot of individual images, each with their own page. I decided to use WordPress because of the images, giving me a fairly powerful image management admin section without much effort. To make it more interesting for myself, I decided to delve a bit deeper into HTML 5 for the site. I will likely post about this soon.

I hope that I can provide her a better and more successful site. She wants it to be very simple design-wise, but I hope I can give it enough substance to give it a more clean and professional look.

Formatting Dates in Classic ASP

in

During my internship at RPM, we used classic ASP for server side scripting rather than the PHP I’m more used to. Classic ASP is missing functions for formatting dates, like PHP and *NIX shell have, for instance. SQL Server has the CONVERT function, but only has a limited number of output formats, at least for the older SQL Server version we had: Otherwise, it would be more efficient to format the data as it is coming from the database . I built two functions for date formatting based on the PHP and *NIX “date” formats for use on the HSGA site, where I had to format dates a certain way for a project. I don’t remember if I used it on other projects, but I think so.

Both functions take two parameters. The first is a date, as would come from a SQL Server “datetime” field. The second is a string that defines the output format. The first function uses a format string like the php date function. The long function is as follows (tabs are double spaces due to the width and length of the content):

Continue reading post "Formatting Dates in Classic ASP"