25 Code Snippets for Web Designers (Part7)

Every web designer finds it handy to have a collection of code snippets such as javascript effects, pieces of html and widgets that they incorporate into their designs. Lets take a look at recent examples of these …

This is an interesting collection of snippets that I need to investigate further. The creativity in web development never ceases to amaze me.

25 Code Snippets for Web Designers (Part7)

wehuberconsultingllc.com » Blog Archive » jQuery 1.1.4 works but JQuery 1.2 breaks tablesorter for me

In a previous post I said that jQuery 1.2 did not work with tablesorter. Well, Christian and the folks at jQuery have made some updates and they work together now. You need both the 2.01 version of tablesorter and the 1.2.1 version of jQuery.

jQuery 1.1.4 works but JQuery 1.2 breaks tablesorter for me

I tried jQuery 1.2 this week on my phpWebsite demo site but the zebra tables in tablesorter did not work for me. I got a dark gray table rather than a striped table. The folks know about the problem and it looks like someone has offered a fix. I will wait for those folks to work things out. Version 1.1.4 seems to work just fine!

Updated phpWebSite Bleuprint theme

In a previous post I started creating a phpWebSite theme based on Blueprint. My plan is to convert an existing phpWebSite to the latest version but a theme for the latest phpWebSite(1.3.0) is not ready yet. Since my idea of humor is frequently referred to as cheesy I am calling this new theme, Bleuprint.The theme has a lot of neat stuff since I incorporated a lot of toys into the theme. However, it is not ready yet. It is still a work in progress. At this time I have both the web page and article module pages on my front page. I am leaning to using the Article module for most of my content but I am still working through various annoyances. Make me a believer, Eloi!

My demo site is at http://demo1.wehuberconsultingllc.com/.

  1. Merged Blueprint into the default phpWebSite theme.
  2. Fixed phpWebSite annoyances.
    1. Create new module templates to replace the <h1> element with the more search engine friendly <h2>.
      1. Sitemap
      2. Blog
    2. Create a tabbed menu for the new site. I want to keep the tabbed menu design from the old site.
    3. Change the calendar colors and layout.
    4. Fix control panel layout problem for form designer with Firefox.
  3. Add new features to the template.
    1. Add jQuery support(http://jquery.com/) so I can use ThickBox for viewing photos(http://jquery.com/demo/thickbox/). Thanks to Cody and the folks supporting jQuery development.
    2. Add zebra table suppport via jQuery(http://tablesorter.com/). Thanks Christian! Note: You must edit the /config/core/textsettings.php file to allow <thead> tags. No thead, no worky!
    3. Add drop shadows to photos. I ported this visual toy from one of my favorite WordPress themes, Misty Look(http://wpthemes.info/misty-look/). Thanks to Sadish for creating a great theme!
    4. Add a rounded corner search box with jQuery field replacement. Thanks Brian! http://blog.reindel.com/2007/08/13/howto-spruce-up-your-search-box-with-css-and-a-background-image/
    5. Add CSS liquid rounded corner box to template. Thanks Mark! http://www.search-this.com/2007/02/12/css-liquid-round-corners
  4. Evaluate module support.
    1. Article 4.0 module(Remember to patch the control panel per the instructions).
    2. Mailto module(Not supported)
  5. Bugs and Redesign(?!)
    1. Where is Coming Soon in Calendar?
    2. Where is What’s Popular block for Articles
    3. See if I can create a list menu template of just simple <li> links.
    4. Redesign comment template to be more like copyblogger.  

Setting up PHPUnit to run the samples

In my last post I thought I had set up PHPUnit correctly. As I worked through the samples I found out that there were a few more problems.

  1. The first problem was finding the Framework folder used in the samples. This folder exists under the test tree. To make things easy I copied the Framework, Extensions, Runner, and Util folders over to my working directory. As I said in previous post my working directory, phpunit, is located under the htdocs folder.
  2. The ObserverTest sample did not work for me as shown in the documentation. It complained about the Subject object. I got the Observer object to run but I think section of the documentation should be re-written. Mock objects are important.
  3. The second problem I found was when I was trying to run the BankAccountTest. It threw a BankAccountException and it expected to find the BankAccountException class somewhere. Sebastian has a slide online with an updated BankAccount.php that referenced a BankAccountException.php. I looked all around for the file but I could not find it. So I created my own file. It does nothing except create the BankAccountException class by extending Exception. Now the BankAccountTest sample will run.
  4. Getting the code coverage feature to work was a bit trickier. If you have not enabled xdebug you will get a confusing error message. When you run PHPUnit with the code coverage parameter, “–report”, it will say that there is no report parameter. Huh!? When you run “phpunit –help” you will not see the report parameter. Hmm… I thought I had fixed this.
    1. Go back and make sure that you have enabled the extension in the php.ini file. Oops, I had enabled the extensions in the wrong file.
    2. After enabling the xdebug extension I got an error message when I ran PHPUnit.bat that complained about the version of xdebug.dll and PHP. I am running the latest version of PHP and the xdebug.dll version it is loading looks like it is pretty old. After a couple of iterations I got the configuration correct. You need to enable the xdebug extension as a ZEND extension with the full path to the most recent version of the DLL. The most recent version exists in my ext folder but it had a different name. For my version of XAMPP I added the following line, zend_extension_ts="C:\Program Files\xampp\php\ext\php_xdebug-2.0.0-5.2.2.dll". Now I get the pretty code coverage report.

So there you have it. I have gone through the examples and gotten all of them except one to work as expected.

Updating PHPUnit on XAMPP

I have decided to do some playing around with unit tests for PHP. I saw a video on Getting Involved in WordPress and it reminded me of my interest in unit testing. Now I almost want to create some unit tests for verifying WordPress plugins or phpWebSite code. Fortunately, common sense will prevail and I will restrict my activities to playing. The instructions at Chapter 3. Installing PHPUnit looked pretty easy but since I wanted to do my testing under XAMPP I knew there would be problems. Hopefully the problems would be minor.

Confirm the PEAR configuration

The first thing I did was to open a command window in the PHP directory under xampp and ran the following command.

pear show-config

This command prompting elicited an error about improperly set environment variables. So I edited the file and inserted the full path to the XAMPP directory. I tried the command again and it showed the PEAR configuration. I checked the installed packages and it showed PHPUnit to be version 1.3.2. I would like to use the latest version so I am going to follow the instructions from the documentation.

Update the channel and install the PHPUnit

The next commands I tried were to update the channel and install PHPUnit.

pear channel-discover pear.phpunit.de

pear install phpunit/PHPUnit

The channel command worked. The install command did not work since it wanted the a dependency updated, GraphViz. After updating the dependency I ran the install command again. It installed 3.1.7 and it said I could also install pdo_sqlite and xdebug. I tried to install these extensions but they ended with a DSP error.

Test the PHPUnit

To test the installation I created a new folder under htdocs called phpunit so that I would have all of the unit test files in one spot. I quickly found out that I needed a copy of the phpunit.bat file in that directory, too. This file is in the PHP folder and it has the correct path to the php.exe file. I copied the example ArrayTest from the documentation into a file called ArrayTest.php and ran the command, “phpunit ArrayTest“. It worked. Now I can move on to more sophisticated unit tests.

Final Fixups

After a little searching I found that the xdebug and pdo_sqlite extenstions already exist in the extensions folder. XAMPP installs all of the extensions but only enables a couple of them in the default installation. All I had to do was to edit the php.ini file, remove the semi-colon in front of these extensions, and restart the web server.

Communication Styles and the Future of phpWebSite

I have been pondering for some time whether to convert existing web sites from phpWebSite to WordPress. It is difficult for me to think about these things since I quickly jump to the implementation details. So I decided to back off and look at the problem from the viewpoint of communication styles. For this quick analysis I am going to compare the diary, magazine, and product brochure formats to their Internet counterparts. These communication styles have existed for a long time in printed form. I think a little pondering on where these formats came from and where the web site versions of these formats are going will give me a better strategic view.

Diary Format

  • History – The diary format is the model that blogs originally copied.
  • Frequent Updates – One of its characteristics is that it generally involves short posts on a daily basis. This feature of blogs was quickly adopted by news organizations for syndicating news over the Internet.
  • Conversational tone – A key characteristic of both diaries and blogs is that they have a conversational tone.

Magazine Format

  • History – The magazine format came about as printed magazines established a presence on the Internet.
  • Monthly Updates – Originally the web sites mimicked the printed version and were updated on a monthly basis. As magazine publishers adapted to the positive and negative impacts of the Internet on their business, they eventually adopted RSS syndication for more frequent news updates(daily) and email newsletters for less frequent updates(weekly).
  • Both formal and conversational tones – The magazine format has traditionally had a mixture of both a formal tone and a conversational tone. The articles had a professional/formal tone while the editorials has a more personal tone.

Product Brochure Format

  • History – The product brochure format came about as businesses wanted a web presence to support their sales operation. Originally these sites were fairly static web sites that reproduced the sales information that already existed in brochure form.
  • Infrequent Updating – Most of these sites were static sites. It was commonly understood that if you wanted current information you need to call them on the phone. Many business site have since migrated to dynamic content. FAQs became an easy and quick way to support customers after the sale.
  • Primarily a formal tone – For the most part the tone used by these sites can be described as professional.

So how does WordPress and phpWebSite stack up in these areas?

  1. WordPress
    • The origin of WordPress is as a blog and it is one of the best blogs out there. It has a great development community out there.
    • WordPress has shown a lot of versatility and has expanded into the magazine format. Here is an example of the magazine format, Darren Hoyt Dot Com » Blog Archive » Mimbo v1.1 Released.
    • Although you can use WordPress as a simple product brochure or Internet sales site, it does not scale up as well as other packages. A few months ago I wrote a post in which I said that a nonprofit with a “product brochure” styled site might be better served by going to a more conversational format.
  2. phpWebSite
    • The blog portion of phpWebSite was originally called Announcements. phpWebSite can function as a blog but WordPress is free and a better blog.
    • The magazine format is probably the best use for phpWebSite. The “What’s Related” feature is a great feature. Similar features can be added in WordPress via plugins. I think that articles and calendars are the areas of with the greatest potential over WordPress but the phpWebSite development community is more limited.
    • Like WordPress you can use phpWebSite as a simple product brochure site but it does not scale up as well as other packages. Using the template system for product brochures is tempting because it may integrate the key data while allowing it a bit more scalability.

So there you have it. Both WordPress and phpWebSite are pursuing the magazine formats but phpWebSite is a more natural fit for the magazine format at this time. WordPress has a much larger development community but it has many diverse interests. The primary interests for WordPress is the blog format so it is hard to tell who has the better development community in the magazine format area.

Creating a new theme for phpWebSite 1.3.0

I finally bit the bullet and decided to create a new theme for the new version of phpWebSite. Part of my problem with starting this project is that I think that WordPress might be a better solution for these web sites. One of the big advantages that WordPress is an abundance of good looking, standards compliant themes. It probably would not be that hard to migrate one of the old phpWebSite sites into WordPress. The other site has a couple of features that would require a lot more research so I opted to proceed with the theme redesign project.

In a previous post I talked about the “Blueprint: A CSS framework”. I would like the new theme to most like Misty Look. In a previous post I mentioned that I have used this for a charity blog in the past. For kicks I want try out the Copyblogger theme, too. I also want to add jQuery support so that I can use ThickBox. So here is my plan.

Phase 1

  1. Create a new theme which merges Blueprint into the default phpWebSite theme.
  2. Fix phpWebSite annoyances.
    1. I will create new module templates to replace the <h1> element with the more search engine friendly <h2>.
    2. See if I can create a list menu template of <li> links.
    3. Create a tabbed menu for the new site. I want to keep the tabbed menu design from the old site.
    4. Change the calendar colors and layout.
  3. Add zebra tables, drop shadow, and ThickBox support.
  4. Redesign comment template to be more like copyblogger.
  5. Evaluate Article 4.0 module.

Status

At this point I have a workable replacement for the original site. Most of the stuff works but I am still checking it out. I have not made the changes to the comment template, the list menu template, or checked the new version of Article. I will probably be updating to the latest version(1.3.0) of phpWebSite on the demo site in the next couple of days. To view the results go to my demo site at http://demo1.wehuberconsultingllc.com/.

Phase 2

Now it is time for me to separate the specific theme data from the common theme data. I expect to create four theme variations and a theme to display a design grid.

  1. Default Blueprint
  2. Misty Look
  3. Copyblogger
  4. Copyblogger organic.
  5. Display grid

Phase 3

Convert the old data into the new phpWebSite format.

Blueprint: A CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

Blueprint: A CSS Framework

I saw this a couple of days ago and decided this may be just the trigger to get me to redesign an old phpWebsite theme. The old theme works but it is kind of quirky since it started out as a table based layout theme. It could benefit from a redesign from the ground up. I have been yearning to redesign and clean up the theme for some time. Most of my theme ideas come from WordPress Themes so I was looking at porting one or more WordPress themes I like over to phpWebsite. It is debatable whether it makes sense to port over the themes since I could recreate the site in WordPress in about the same amount of time. I will mull over this a little while longer.

Adding RSS content to Outlook Today using jQuery

Customized Outlook Today
I decided to customize my Outlook Today page with jQuery. The change was pretty simple. My plan was to add the current weather forecast available from Yahoo via a RSS feed. The source for my inspiration was this post by Jean-François Hovine.

The only annoyance is that I get a popup window because I am accessing content in another domain. After a little bit of work this is what I ended up with.

Sortable and Selectable Zebra Table Widgets

I decided to add zebra tables to a phpwebsite recently and used the version from the link below.

Sortable and Selectable Zebra Table Widgets

It took me a little while to accomplish since I needed to convince phpwebsite to not strip out the <thead>, <tbody>, and <tfoot> tags. Not many people use these tags so phpwebsite removes them unless you modify the configuration. To get the table to work I used both the ID and CLASS elements on the table tag. I used both the<thead> and <tbody> tags in the table although I think only the <tbody> tag is required.

  Pos Artist Trackname
 


1 Lost In The Plot The Dears
2 Poison The Constantines
3 Plea From A Cat Named Virtute The Weakerthans
4 Can’t pick me! No sir!
5 Living Room Tegan And Sara
6 Can’t pick me either Nope
7 Fast Money Blessing King Cobb Steelie
8 Sore Buck 65
9 Love Travel Danko Jones
10 You Never Let Me Down Furnaceface

RE:25 Killer Code Snippets every Good Designer Should See

I found that this collection of CSS, scripts, html, and widgets caused me to rethink some of the stuff I am doing. I haven’t changed anything but I am getting some ideas of how I could use this stuff.

Round up 25 of the Best CSS, scripts, html and widgets that you can use on on your website or blog (Part 4) More…

More Fixups on the Reworked Reset.css

This is embarrassing! I have been using a version of Eric’s Reworked Reset in conjunction with my main css for a couple of weeks now and I did not notice that the strong/bold feature was not working in the content of the blog. Putting it back in was easy but it reminded of all of the things that are turned off in the reset.css that affect its use with an existing website but do not break it. Generally speaking, I am using very few selectors that cover the whole web page. This means that I specify the area of the web page I want to affect. In my case I added the following code, #content strong {font-weight:bold;}, to override the default action for the content area of the web page. I also added #content em {font-style:italic;} to restore the default emphasis.

Web Page Analyzer – free website optimization tool

Try our free web site speed test to improve website performance. Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates best practices from HCI research and web site optimization techniques into its recommendations.

Source: Web Page Analyzer – free website optimization tool website

I was looking through my firewall log and noticed a large amount traffic coming from Ben Witherington’s Blog. This was surprising since I do not go to his website. All of this traffic must be coming in when my RSS reader reads his feed. Hmm… How can that be?

My first test was to validate the feed and it failed with a feed “Unable to validate, due to hardcoded resource limits ” error message. So I decided to see how big his feed is. I went to his home page and clicked on the feed link. When I brought up the properties for the resulting web page it was a whopping 706,911 bytes.

My next test was to run his feed through the Web Page Analyzer mentioned above. The Web Page Analyzer is very good at pointing out images that should either optimized to a smaller size or replaced with a thumbnail version. To my surprise most of his feed is text. It said the feed was a more respectable 180,280 bytes but this seemed to be really high. I guess that http compression must be dramatically lowering the impact when you view it in a browser. My feed comes in at a mere 9,232 bytes.

After going back to his home page the reason why the feed is so large became apparent. He is writing a novel and he is posting installments on his blog. His home page is large because it contains a lot of text.

My solution to the web traffic issue is to lower the update frequency for his blog to once a day. The default update frequency for my RSS reader is once every four hours. I had changed the update frequency downward from a higher frequency awhile back because RSS readers can be addictive and distract you from productive work. Now I know that RSS readers can consume a significant amount of bandwidth, too.
[tags]webdesign[/tags]

Fixing My Technorati Tag Cloud widget

I have been using the “My Technorati Tag Cloud” widget for several weeks now and I finally decided to fix the HTML validation errors.

  1. The first problem is the embedded CSS in the body of the page. It should be in the header or in the stylesheet. I prefer the stylesheet fix so I commented out lines 169 through 174 and inserted the stylesheet info into my stylesheet.
  2. The W3C validator expects the widget to be a list item. So I added a <li> before the <h2> on line 179 and a </li> behind the </ul> on line 206.

For those who are not familiar with this plugin here is a short description and a link to its author.

This plugin will download your most used Technorati tags and display them in a tag cloud on your blog just like they show up on your Technorati profile. As always this plugin has caching so that it will only talk to technorait’s web site one an hour.

Source: Warping On » Blog Archive » My Technorati Tag Cloud
[tags]css, webdesign, wordpress[/tags]

Eric’s Archived Thoughts: Reworked Reset

I added this css to two WordPress themes, MistyLook3 and Andreas09. It did not alter the layout for MistyLook3 besides the line-height in the sidebar. I liked the change so I left it unchanged. However I had to make several changes to the Andreas09 theme to overcome some annoying problems.

  1. I had to add the font-weight:bold; property to the h2 element on the leftside in the regular css to get the bolding back.
  2. I had to fix one margin in the regular css(.date) since the reset.css caused it to overlap a heading.
  3. I was not able to see the default list styles for ul and ol in my content even when I specified them in my regular css. I could get the li elements to indent but I was never able to get a disc or a number to appear. So I commented out the statement in the reset.css. A picture version for the ul element worked in my MistyLook3 theme so I probably am not doing something right.

Link to Eric’s Archived Thoughts: Reworked Reset

Using CSS Page Breaks in phpWebSite

I spent some time this week fixing up the print versions of some html pages. You could call the pages, product pages, and they are the most likely candidates to be printed by a customer. They looked okay in the browser but they suffered when printed. IE had the most problems. I thought a print.css would help but it didn’t. FireFox and IE disagreed how the printed page should look. I ended up tinkering with them to get them both to print acceptably. Forcing page breaks helped out considerably. Initially I created a new section in phpWebSite in put a paragraph with a css class that would force a page break. This worked but it was kind of clunky. So my final solution was to modify an existing phpWebSite section template to give me a page break after the section. This way I can select the modified template for those sections I want a page break after. I looking forward to the day when I migrate this phpWebSite system over the new version and use a regular html page. I learned to use sections in phpWebSite to get the site up but I am not a fan. I have enough experience with them now to say I would be more productive without them.

I really want a nicely formatted Acrobat version of the web page but that is a project for a different week.

Technorati tags:

Where Our Standards Went Wrong

To validate or not to validate; that is the question. A List Apart’s own Ethan Marcotte helps us to re-examine our approach to standards advocacy and how we can better educate our clients on the benefits of web standards.

 

Link to Where Our Standards Went Wrong

I still prefer that my sites validate but I do allow warnings and occasionally minor errors to get through. It is a tradeoff. I want the sites to validate but I need to limit the amount of time I spend debugging validation problems since I am the only person who cares that the problems get fixed. The biggest advantage to having a site that validates is to minimize the maintenance headaches supporting multiple browsers.

Using Version Control to Manage Web Site Changes

A while back I decided that Version Control software was a better way for me to manage web site changes. This adds a little bit more documentation and incremental control over the daily backups. For small shops Version Control looks like overkill but it is simple to use. So I bit the bullet and setup a Subversion repository on my Windows-based computer. Initially I thought I would only keep my theme customizations and content in the repository but I eventually decided to keep the entire directory. Today I decided to document the process I use to update a website. In this case I am upgrading WordPress from 2.1 to 2.1.1 with a zipped file of changed files. I will be using several open source programs in addition to Subversion and TortoiseSVN. I will be using WinMerge to compare directories and FileZilla to upload the files. There are many suitable programs for these tasks. These are the ones I used.

Step 1 – Update your working copies

Use TortoiseSVN to retrieve a clean working copy from the repository.

Step 2 – Download the updated files and expand into directories

In my case the updated 2.1.1 files are in a zip file which follows the WordPress directory structure. I download the file and expand it into directories. I also print the updated file list. I am going to use the file list as my check list for the rest of the process. Stuff happens!

Step 3 – Compare the directories and update the files.

I use WinMerge as a quick check to compare the directories. I have projects set up to automate my comparison settings. It should show that the files I am updating are the ones on the file list. Surprisingly I find I am missing a couple of files shown on the changed file list. I opt to download the full source and add the missing updated files to my updates. I use WinMerge to copy the changed files over the repository files.

 Step 4 – Update the website

In this step I use FileZilla and the file list to upload the changed files. It is a real plus that my host provider allows me to use sFTP. Every extra bit of security helps keep the hackers away. Since this is a minor update I will leave all of my plugins active during the upgrade. WordPress recommends that you deactivate your plugins before updating in case you run into problems. I sort the local directory based on Last Modified date so that the changed files are on the top and easier to find. I move from directory to directory updating the changed files. FileZilla continually reminds me that I am overwriting existing files. That is good. There are only four directories and twenty file so the process goes quickly. When I have finished uploading the files I go to my browser and click on the Site Admin link in WordPress. It prompts me with links to complete the upgrade. This is normal. I follow the links and finish updating the site within a minute. I do a quick check of the website to make sure everything is still working. I have finished updating the web site.

Step 5 – Commit the changes to the repository

I use TortoiseSVN to commit the changes and with a description. When I am finished I use TortoiseSVN to check the log and make sure that the  description I just added makes sense. This is probably the last time I will look at the description until I need to understand it sometime in the future. I am happy with what I wrote so I move on to my other projects.

Technorati tags: , ,