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.
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.
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!
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/.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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/.
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.
Convert the old data into the new phpWebSite format.
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.
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.
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.
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 | |
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…
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.
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]
Click on the image to the right to take the survey or cut and past the following link into your favorite browser.
http://alistapart.com/articles/webdesignsurvey
I have been using the “My Technorati Tag Cloud” widget for several weeks now and I finally decided to fix the HTML validation errors.
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]
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.
font-weight:bold; property to the h2 element on the leftside in the regular css to get the bolding back.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: css webdesign phpwebsite
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.
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.
Use TortoiseSVN to retrieve a clean working copy from the repository.
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!
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.
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.
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: web design, open-source, wordpress