mysiteonline™ - Web Development

jQuery Printed Footer Links

nospam@example.com (Brendon Kozlowski) — Mon, 08 Mar 2010 11:52:51 -0800

I was randomly perusing the web and stumbled across an older interesting List Apart article (September 19, 2005 to be exact). In it, the author used JavaScript to create a list of all links found on the page, and then create a footer with a footnote-like list. I was using simple CSS to display the URL of the hyperlink in print display media, but that doesn't work in some browsers (IE), and worse off it can really mess up the visual order of the page.

Inspired by the article's intentions, I decided to use some jQuery to whip up a similar solution. Differences? I exclude hyperlinks set to the hash symbol (#) which shouldn't be found anyway (graceful degredation people!), mailto links, and I don't find link element's citations (blockquote "cite" property). I also believe his script would grab image information, but I'm not entirely sure, mine only searches hyperlinks. I also opted not to exclude listings of duplicate hyperlink values. If it's found twice, it lists it in the footer twice. Less JS processing, and more clear to the visitor (in my opinion).

Expected Issues: It requires JavaScript. If JavaScript is enabled but CSS is disabled, the hidden content will be visible to the user.

On to the code!

First thing's first, we should find the links in our code that we'd like to target. For my situation, I have a content class defined on my page for all content, and the column that contains the actual body is called ".col2_right" (yes, I know, ignore the fact of the poor naming scheme). So, in jQuery, we're going to target all hyperlinks found in the col2_right and content classes, but we don't want to include links to hashes or mailto links. I've also removed listing to nofollow links, but that is my choice (probably not a good one, but I digress).

We'll also need some sort of container to keep these found links wrapped in. I chose to use a fieldset and legend, you could just as easily create a DIV and a H2 or other tags for your own purposes. I also want to create an ordered list to match the found hyperlinks.

Here comes the real center, meaty goodness of the script: looping through our list of found hyperlinks, creating a little notification text next to the hyperlink's text, and add the hyperlink URL itself to the footnote section in the ordered list as a list item.

We use jQuery's each() method to loop through the items in the array, grab the link's URL so that we can do some testing on it, and modify it's value for inclusion in to the footnotes. Some links may be relative URLs, but that doesn't mean much to someone who doesn't know what a relative URL is. In fact, it would probably confuse me too at first. I happen to know that my domain forces www for the subdomain so I've added that in, fix that up as you like. I then create a span tag to hold the associated footnote number (the ListApart article used a superscript tag, I found regular text is more easily readable), add a class to it so it's only visible when printed, and create my list item element with the URL from our link, and place those elements in to the document in the appropriate places with the appendTo jQuery function.

Last but not least, we append our entire footnote to the end of our content body section. The full code is below.

$(document).ready(function(){
	//get the container and target
	var links = $('.col2_right.content a:not([href^=#],[href^=mailto],[rel=nofollow])');

//create a container and heading for the footnotes
	var footnotesWrapper = $('<fieldset>', {
		css: {
			clear: 'both'
		}
	}).addClass('print_only');
	var footnotesLabel = $('<legend>', {
		text: 'Website Addresses Used in the Document'
	}).appendTo(footnotesWrapper);

//create an OL to hold the footnotes
	var footnoteList = $('<ol>').appendTo(footnotesWrapper);

$.each(links, function(i){
		var linkText = $(this).text();
		var linkValue = $(this).attr('href');
		if(linkValue.substring(0,1) === '/'){
			linkValue = 'http://www.'+document.location.host + linkValue;
		}
		//create element to hold span with class to hide except on print
		var newElement = $('<span>', {
			text: ' ['+ ++i +']'
		}).addClass('print_only').appendTo($(this));

var listEntry = $('<li>', {
			text: linkValue
		}).appendTo(footnoteList);
	});

// append the heading and <ol> to the target
	$('.col2_right.content').append(footnotesWrapper);
});

Oh, and the CSS: ".print_only { display:none; }" This should be placed in your normal style sheet, and leave it out from your print style sheet. If you don't have a print style sheet, extend it a bit: @media print { .print_only { display:none; } }

YSlow: Getting a better score and a faster site.

nospam@example.com (Brendon Kozlowski) — Sun, 28 Feb 2010 14:06:05 -0800

I decided that it was finally time I took a serious look at increasing the YSlow score for our websites. I was under the impression that browsers would automatically cache (by default anyway) certain graphic elements to save on bandwidth, but our staff website has a repeating background image for a left hand navigation bar, and it would disappear for a fraction of a second while reloading the other page; this told me that something was not right, and YSlow might be the answer I was looking for (and that my PHP framework of choice was not to blame).

YSlow:
Initial Score: 67

I choose the smallest size images exported from Photoshop, and if I ever use a PNG, I use a great tool called "PNGGuantlet" (Windows only) which compresses PNGs while also removing the alpha channel problems that make PNGs appear with different colors than they were intended to. I also have compressed my main JS file, and CSS file(s). All XHTML should be valid (unless I updated a link and forget to escape an ampersand), the DOCTYPE is listed, character set is given, and all non-background images contain height and width properties. Oh, I also have a default favicon.ico file. These are all good recommendations to do regardless, and in doing so YSlow gave me a pretty decent score (albeit, not that great if it was a test in school).

Two modifications to YSlow's scoring:
1. I am not Amazon. I don't necessarily need a CDN for my content.
2. I don't need a subdomain to house my CSS, JS, and images. If I end up storing videos, that already has a subdomain set up and ready.

Therefore, I modified YSlow's grading scheme. To do so, there is a dropdown menu to the right of the 4 tabs in the YSlow toolbar, it is labelled "YSlow(V2)". Click the "Edit" button to the immediate right of that. In my scheme, I disabled "Use a Content Delivery Network (CDN)" and "Use cookie-free domains". You cannot overwrite the rule set, so you have to save it as something else, I named mine "SSPL" since that is the website domain that I care about (for work). Different websites have different criteria, so it only makes sense to name it something related to the website you are concerned about. Go through and uncheck what you don't believe applies to you. If you're uncertain, leave it checked. This little configuration raises my grade up already - that was easy.

Here are the .htaccess rules I've added to raise my own score, what they're for and why I chose to make them:

Enable GZip'ing of components:
The AddOutputFilterByType DEFLATE [list of mimetypes] was the command I used to gzip the particularly listed files that have such a MIME-Type: html, txt, js, css, js (variation), json, json (variation). Some browsers read JSON and JavaScript as an application mime-type whereas others read it as a text type, I figured I would simply cover my bases. Although these are ASCII types, you could just as easily gzip binary types, such as GIF, JPG, or PDF (though theoretically they should already be compressed and you're just adding extra work for the server).

Configure ETags:
From what I have read, ETags are a mixed breed. They can have some benefits, but they can also have some detractions. Again, considering that I'm not Amazon and I will be enabling the Expires heading, I opted to simply disable ETags. You can disable ETags in Apache under an .htaccess file with the unset rule above, along with the FileETag None to cover most supporting browsers (one would hope). I wasn't able to find any examples on how to properly "configure" ETags so that YSlow would not complain other than to simply turn them off. ETags, from what I've read, are a variation on telling the browser to cache certain files in a certain manner, but it doesn't work on any website that is run on multiple servers for the same content. Either way, I opted for the Expires heading which made ETags rather redundant from what I could tell.

Enabling an Expires Heading:
It appears that in Apache, by default, Expires headings are disabled, and just like mod_rewrite, you must explicitly tell Apache that you wish to use it, so the first thing you have to do is turn it on: "ExpiresActive On". Once that is done, there are a few ways to set the expiry time; I opted to use a human readable implementation, and YSlow expects a "far future" date (from the date last modified). As one of my sites is currently built with HTML files pulling in a template, the original files won't typically be modified for a long time, so I had to make my future date a FAR future date (10 years from last modification) - your experience may vary. For further information on Expires, take a look at the Apache documentation for mod_expires.

Additional speed enhancements:
I recently read that if you have a framework that may take some time figuring out what data must be displayed prior to even getting it to the server, it may be a good idea to flush the buffer so that the data that can be sent to the browser can be sent prior to everything else - such as the document head which contains the page title, CSS, and sometimes JS. That way, while the rest of the page is being rendered by the server, the JS/CSS has time to download. This is actually why I decided to leave my JS at the top of my website rather than placing it in the footer. I live by graceful degredation, but if the page loads before the JS does, it can also cause a screen flicker which is against accessibility guidelines for HTML. In this case, it was possible speed for accessibility - I choose accessibility. I personally really don't want me, or my client(s) getting sued for accessibility issues because "Oh hey, it loads a second faster now!". If you had an interactive rich website such as Facebook or MySpace, I'd imagine you'd have to place JS in the footer and have a separate, accessible domain for others...if that's even easily possible. Anyway, what I did with flushing the output buffer was to (in PHP) modify my template file, I called PHP's flush() function after the closing HEAD tag in the HTML template file.

Anyway, with those small tweaks and tricks, I was able to get my score up to 96. I have a B in 3 categories:
1. Expires header issue (CDN of ajax.googleapis.com, it won't recognize my CDN) as a CDN has a non-far future expiration date in the called JS file.
2. Minify CSS and JS - it is minified, so I'm not sure what it wants from me. The filesize is probably too large for an A.
3. Put JavaScript at the Bottom - I already explained why I don't want to do this, but I've left the rule in anyway.

Now my site seems to be a bit more responsive, and the background image I mentioned before no longer disappears and reappears (unless I press refresh really, really fast, confusing the browser's cache I guess).

Enabling SSL (HTTPS) via htaccess Only if Matching a Specific Domain

nospam@example.com (Brendon Kozlowski) — Thu, 18 Feb 2010 09:19:08 -0800

I had a momentary stumble today that I (somehow) couldn't get through my head. Perhaps it's just because it's been so long since I've worked with mod_rewrite, but regardless of that, here's the situation and the solution:

"The Situation" said that the situation is:
I had multiple conditions that needed to be met before a rule should be run, otherwise it should be ignored.
I am running (and require) SSL on my production server.
I am not running SSL on my development box.
I didn't want multiple .htaccess files in my SVN repository.

The solution:
"Duh." Multiple RewriteCond in a row (separated by a newline) all must be met before the RewriteRule is run.

The resulting .htaccess took the following form:

The last 3 lines dealing with rewrite in my .htaccess file are related to the code library I'm using, and are not pertinent to the problem here. The important lines are as follows:
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^staff\.sspl\.org [NC]
RewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L]

The first condition tests to see if SSL (https protocol) is not being used in the request.
The second condition tests that the domain's host is "employees.sspl.org" (URL changed to protect the innocent).
If both tests pass, then I redirect the user to the host (and path "/$1") while using the https protocol (SSL). Done.

iPhone Server Alerting on High Load

nospam@example.com (Brendon Kozlowski) — Fri, 15 Jan 2010 20:27:00 -0800

I have a shared Dreamhost account. In fact, I manage two: my own, and work's. Typically I don't too much care about my personal site going up or down, but I have multiple sites running under my account - and our work account with Dreamhost must maintain a decent responsiveness during business hours.

I've been developing a CakePHP plugin for Prowl but haven't quite polished it well enough for release. In the meantime, my work's Dreamhost account has had major issues where the server load would spike up to 350+ (I have no idea how many cores there are). That's just ludicrous. We've recently been moved to a new server by the support staff (for the 5th time) and although the average server load is now 0.40, I don't want to take my chances without a backup plan. Enter Prowl and my iPod Touch.

(To use Prowl, you would need an iPod touch or iPhone, and paid for and installed the Prowl application; it's $4.99 as of this writing. You then need to get your API from the prowl.preks.net website.)

We'll be using the PHP 3rd party API for Prowl, built by "Fenric", and we will go to his GitHub account to get it.

Once we have the PHP API for Prowl from Fenric, we'll build some quick code to make use of it:

This little script can easily be setup with a cronjob and automatically check the current server's load and report issues. It won't report if a server is down since it must run on the server it is reporting on, but it would help inform about possible problems that should be looked at. This could easily be extended to check the MySQL long query logs, or other reporting functions.

Prowl, an iPhone/iPod Touch implementation of Growl

nospam@example.com (Brendon Kozlowski) — Fri, 08 Jan 2010 18:51:53 -0800

So, I hear you like the idea of push notifications on the iPhone. Oh, what's that? You wish you could send push notifications from your website and/or iPhone enabled web app? Hey, didn't you know that you can?

Thanks to Mike, and his post about what John Blyberg's been doing, I got interested in Prowl. Prowl is an iPhone app ($4.99 from the iTunes store, I believe) that lets us send push notifications to iPhone or iPod Touch devices (and hey, it works with 1st gen devices too!). You would need version 3.1 of the iPhone OS, and jailbroken phones are not officially supported (some work, some don't due to how they were jailbroken), but for the most part "it just works", and it's fast. From my tests, the longest delay I've had thus far on a "normal" importance level Prowl message was about 2-3 seconds.

So what use does it have? I'm sure there could be quite a lot. There are forums for Prowl discussions, and one of the stickied topics is just about what people are doing with custom notifications, and there are a varied slew of responses. It's quite interesting, actually.

It's not much of a surprise to anyone that's been keeping tabs on this blog (hi Mike) that I have been getting acquainted with the CakePHP framework. Because of all the uses of Prowl, and my newfound love for CakePHP, I've decided to write a plugin specifically for Prowl in CakePHP. I am not the first to create extensions for Prowl by any means, nor am I even the first to think of getting it CakePHP-ready. I've found two others after having started my work that have created Prowl Components: Jacob Oehler Morrison, and Eric Holmes (note: as of this writing, Eric Holmes' domain seems to be expired). Hopefully I can add a little bit more zest and out-of-the-box capabilities to a plugin. If anyone has some ideas, let me know about it in the comments!

Checking the viewport's width and height...

nospam@example.com (Brendon Kozlowski) — Fri, 19 Jun 2009 13:19:40 -0700

I've never been a fan of using JavaScript to fix up an interface. That is the purpose of using CSS. However, with that being said, I developed a very elegant website login page with a resolution of 1024x768 in mind. All of the CSS had been meticulously measured using quite a few pixel-based measurements (over EMs, because I was sure it would be fine for the two horizontal elements taking up the page width). Unfortunately, I had confused our public facing site with our backend staff site's statistics. 32% of our backend site is viewed with a resolution of 800x600. Uh oh!

Times are changing, and computers get upgraded. Although the staff members with an 800x600 resolution might be used to scrolling on some pages to view content, it really wasn't good for the staff site's login to require a scroll (the main site is not yet redesigned, and I designed that for an 800x600 display). I didn't want to have to start from scratch, and even resize images to make them fit. As time progressed, I expected the percentage of 800x600 site views to drop, so this is more of a temporary band-aid that's needed anyway... JavaScript to the rescue.

Screen resolution is easy. screen.width and screen.height, respectively, will tell you about a visitor's monitor's current resolution, but in this case I needed to know the viewport.

Many people state that each of the major browsers use a different approach to determining the viewport, and this is true. But most people also create a function or IF/ELSE case for each possible outcome. I found some code that mixes all three in one line quite intuitively. Below is the actual JavaScript I used (jQuery methods found in there) to solve my issue (I pre-determined the width/height numbers manually for this specific layout).

Quite easy, quite nice, and the most important thing is that the login box is now clearly visible without any unnecessary scrolling (caused by CSS issues) at specific resolutions (tested at 600px width, minimum). If it's any less than that, I can assume it's a mobile browser and we don't (yet) support that; but when we do it'll be a completely different layout that's used.

I hope this might be helpful to someone else, but for the right reasons! (Credit to About.com for the viewport functions.)

Website Scaling Issues with EMs (CSS) and IE6/7

nospam@example.com (Brendon Kozlowski) — Thu, 30 Oct 2008 11:41:32 -0700

When the Saratoga Springs Public Library website was redesigned, although I used a static width (set to something like 720px wide) for the content area, I intended for it to be easily resized with supporting browsers. I made sure to set everything (else) to size with EMs in CSS (similar to percentage).

...an issue with the top navigation cropped up on some computers that I could not identify, nor could I figure out how to solve. For 95% of browsers I tested, and 100% with a vanilla install of Windows, everything worked fine. For those others, the navigation links at the top of our site just didn't seem to align. I thought it might have something to do with DPI or visual settings, but I had no idea how to accommodate for that.

Well I completely accidentally ran in to William Kolean's solution of fixing this issue with Microsoft's CSS expression engine. As the issue was only seen in Internet Explorer (and I already had an IE-specific stylesheet to fix tiny issues), this was a perfect solution, and I put it in to use (just now, actually). I can verify that it worked (on my first and only test) so I'm quite happy. I thought I'd post this for my own records, and to help others too.

http://www.williamkolean.com/williamblog/?p=18
Thanks, William!

Cool CSS Trick with IE6 Bugs

nospam@example.com (Brendon Kozlowski) — Mon, 29 Sep 2008 09:21:52 -0700

I was creating a replicated PDF form in HTML/CSS for work today and needed to get a portion of the form (signature field) to rest at the bottom of the page, whichever page it was. This was easily accomplished in CSS-friendly browsers by using position:fixed; bottom:0; ... however, IE6 does not support the "fixed" position with CSS. Not good...not all of our staff members in the building have been upgraded to use IE7 - most have, a couple have not.

Stu Nichols has found a way to "trick" IE6 in to allowing something almost entirely the same by way of using another CSS bug. It's a bit hackish, but it's not an actual hack. I used IE's conditional CSS to make sure it didn't mess up any other browser's rendering, but the link (and demo) is below in case anyone else needs the same functionality.

http://www.cssplay.co.uk/layouts/fixed.html

Ironically enough, this doesn't seem to work in Safari for Windows properly (haven't tried it with my Apple). Thankfully for me, I don't need to cope with that issue for this form on our intranet. I imagine it's actually a bug in the browser's rendering (only for print, it works just fine for online display).

Browsers and minimum CSS overflow on Windows XP

nospam@example.com (Brendon Kozlowski) — Fri, 01 Aug 2008 10:47:11 -0700

The title of this post is a bit misleading; I was trying to stuff it for SEO keywords without it being too long.

I ran into an issue with regard to the CSS property of "overflow" that I had set to "auto". When I set some test text of about 100 or so continuous "Hello " words, the scroll bars worked just fine. I then tweaked my node's height, and text and continued, but... The scroll bars weren't showing up, and my text was outside the bounds of the box (and therefore clipped)! Oh no! Tragedy of tragedies!

Through a little experimentation (in the end, this took me about 30 minutes to track down, and then test in all the browsers), I was able to determine what the problem was.
Continue reading "Browsers and minimum CSS overflow on Windows XP"

Keep your account info handy...

nospam@example.com (Brendon Kozlowski) — Mon, 21 Apr 2008 18:43:27 -0700

So here I was trying to do some work on my domains this weekend and into today, thinking that my host had problems with the server on the weekend... "Oh, it's up again today," I thought...so I proceeded to try to login again today. Well, apparently I forgot my password somehow and so I locked myself out from my own websites from two separate IP ranges. Awesome! At least my own place isn't blacklisted (visited my parents this weekend and was at work earlier today during my lunch break).

Ha! Oops... I still don't know what my password is for cPanel, but the regular account login still works.

mod_rewrite, can't live with ya, can't live without ya!

nospam@example.com (Brendon Kozlowski) — Thu, 13 Mar 2008 21:46:37 -0700

I spent more than half the day today (24 hour day) thinking and trying to find a way to get a mod_rewrite call to work properly. I felt so dumb, retarded, and plain uneducated in my attempts. I left work a little bit early so I could concentrate (no distractions, no phone calls, no "how do I send an attachment", no nothing). Even after that, I kept running into a stumbling roadblock. My friend was trying his hardest to help me out (no idea why other than possibly a sheer curiosity - it's now almost 1:00am).

What I wanted to do:
http://example.com/contacts/form/recipients/bKozlowski/
...transformed to...
http://example.com/contacts/form/index.php?contact=bkozlowski

Sounds easy, right? Yeah, I thought so too when I first started. I tried every iteration of something that looked so darned simple and could only be done just so many ways... The eventual problem?

I needed to use: RewriteBase /
I have no idea what this directive does. I have no idea why my pattern now matches and works. The RewriteLog really wasn't helpful at all except to tell me that it wasn't working...something I could have figured out without a log, obviously. Anyway, if anyone really cares, the following is the actual end result:

I both love and loathe mod_rewrite.

(Special thanks to the people over at SitePoint Forums for their immediate response!)

Compare your Minimized JavaScript

nospam@example.com (Brendon Kozlowski) — Thu, 06 Mar 2008 08:51:55 -0800

For the new website I've been developing and finishing up some "final touches" on the design to make the experience just a little bit better (before I can delve into the out-dated content after launch), one of the last things that was needed was to speed up the efficiency and download of assets - this included CSS and JavaScript files for the most part. I made the sIFR flash files as small as possible and my PNG images were compressed (and fixed for IE color rendering) using PNGGauntlet (which uses PNGOut). Until I can figure out ETags, a proper time for an Expires header, and GZip to work on CSS/JS files on our hosted server, this should suffice. It loads amazingly quick on my iPod Touch.

Continue reading "Compare your Minimized JavaScript"

Simple Solution for Encapsulating a Floated Image

nospam@example.com (Brendon Kozlowski) — Mon, 28 Jan 2008 09:49:39 -0800

I know I've read this article about 10 times over, and yet I always seem to keep forgetting about it. Everyone always suggests, "in order to keep a floated image from floating over its containing box, add a 1px DIV, or BR tag that uses a style of clear:both". This is what I always remember, simply because it's the most prevalent solution.

However, thanks to my CSS love in Paul O'Brien at SitePoint, there's a much, much simpler solution. Apply overflow:auto; to the containing element. That's all there is to it. I love that man!

Source: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
Continue reading "Simple Solution for Encapsulating a Floated Image"

Internet Marketing - Horribly "wRonG".

nospam@example.com (Brendon Kozlowski) — Thu, 20 Sep 2007 13:39:54 -0700

It's mind boggling to me how often I see simple errors on prominently displayed advertisements for a web-based (or other) firm.

Now, although I can possibly understand why the text in the bottom blue area isn't centered in a symmetrical manner, how rushed could it have been to completely miss a spelling error? Even for a one-man operation, which I would imagine this is not, for something as important as an image that's to be shown across the world, wouldn't you check and double check everything? Obviously some time went in to the design of the art, so why sloppily supply the text within the graphic? Sheesh...

What do you do?

nospam@example.com (Brendon Kozlowski) — Wed, 29 Aug 2007 17:51:01 -0700

What do you do to get yourself over a hump? I develop web applications as a hobby when I'm not working and at home. But as with any application, there are portions that are much less desirable to work on than others that still need to be done (such as documentation). How can you get yourself over the hump when there's little to no incentive other than being able to continue on with the project? I'd rather go run...10 miles...and I usually only do 2 miles, so, yeah...

I can't seem to make myself do it, I keep procrastinating. There always seems to be something else just slightly more interesting that I "will only spend x minutes on and get right back to the project". Just looking for what you more experienced people do when you come to these things.