nFriedly Web Dev Tech Blog

Automatically removing spamers from the WordPress Coment Notifier Plugin’s Database

nFriedly — Fri, 22 Mar 2013 18:07:06 +0000

Photo by anda (: There’s an awesome WordPress plugin called Comment Notifier – what it does is add that check box at the bottom of the comments section. If you leave it checked when you add a comment, then it will automatically email you with anyone ease’s comments in the future.

However, it has a slight problem with spam. When spammers leave comments, my combination of Akismet and NoSpamNX do a pretty good job of keeping spam comments of of the site, but not before their (usually fake) email gets added to the Comment Notifier database.

Recently, I realized that my server was trying to send out several hundred failing emails any time someone left a comment. I shot a short feature request (and a small donation) to the Comment Notifier plugin’s author, but then decided that this was one I could take on myself. Here’s how I did it:

Step 1: BACK UP YOUR DATABASE

I’m using the BackUpWordPress so this happens automatically, but I went and ran an extra backup and downloaded the files to my laptop just to be safe.

Stem 2: Clean up the old data

This SQL query deletes every email in the comment_notifier table that doesn’t have a corresponding comment. (Most likely because the comment was already deleted as spam.)

DELETE FROM `wp_YOUR_PREFIX_comment_notifier`
WHERE email NOT IN (
  SELECT comment_author_email FROM `wp_YOUR_PREFIX_comments`
);

Obviously, you’ll need to change the table name prefix (wp_YOUR_PREFIX_) to whatever your install of WP uses.

Step 3: Add an index on the `comments.comment_author_email` column

This is required in order to add the Foreign Key constraint in next step. It makes MySQL keep a sorted list of emails in the comments table and automatically update it any time a comment is added or deleted.

ALTER TABLE `wp_YOUR_PREFIX_comments` ADD INDEX ( `comment_author_email` );

Step 4: Add a Foreign Key constraint that automatically deletes spammers from the `comment_notifier` table

This instructs MySQL to enforce a link between the comment_notifier table and the comments table so that any email address in the comment_notifier table must also be in the comments table, and if it gets deleted from the comments table, then automatically delete it from the comment_notifier table also.

ALTER TABLE `wp_YOUR_PREFIX_comment_notifier` 
  ADD CONSTRAINT `auto_delete_spammers` 
    FOREIGN KEY (`email`) 
    REFERENCES `wp_YOUR_PREFIX_comments` (`comment_author_email`) 
    ON DELETE CASCADE;

Step 5: Relax and enjoy

Any time a comment is deleted as spam (or for any other reason), your Comment Notifier will no longer try to send emails to that comment’s author. Your email server will thank you.

Automatically unit testing client-side JavaScript with Jasmine and Node.js

nFriedly — Mon, 04 Feb 2013 21:14:49 +0000

At Sociable Labs, we have hundreds JavaScript unit tests that run on every checkin. They output a JUnit-compatible report that Bamboo can use to track stats and email us if anything failed. Here’s how we do it.

Our JavaScript “build” process is basically a script that concatenated all of our JS files into a single big file.^[1] We added a flag to that process that would skip the init.js file and instead add a module.exports statement for easy inclusion in node.js.

With this setup, we can quickly run hundreds of jasmine specs from the command line in any environment we need – no browser necessary. Our full suite currently takes about 5 seconds to run.

To start off, we installed the jasmine-node and jsdom NPM modules:

npm install jasmine-node npm install jsdom

This is the relevant part of our directory structure, the node_modules folder is top-level:

build/
node_modules/
 - ...
test/js/
 - environment/
   - jasmine_helper.js
 - util/
   - install_jsdom.sh
 - gallery_spec.js
 - ajax_spec.js
 - etc.

environment/jasmine_helper.js is where most of the magic is:

var jsdom = require("jsdom");
window = jsdom.jsdom('').createWindow();

if(Object.keys(window).length === 0) {
    // this hapens if contextify, one of jsdom's dependencies doesn't install correctly
    // (it installs different code depending on the OS, so it cannot get checked in.);
    throw "jsdom failed to create a usable environment, try uninstalling and reinstalling it";
}

global.window = window;
global.document = window.document;

var R = global.R = require('../../build/rondavu_test_mode.js');

First we create a jsdom environment and verify that it works. (We’ll come back to that in a minute). Next we make the window and document variables global. Finally we include the slightly modified version of our compiled JS and set it in a global variable so that tests can hit it’s internal methods. Jasmine always runs all helper files before the spec files, so the global variables are guaranteed to exist by the time our tests run.

util/install_jsdom.sh is necessary because one of jsdom’s dependencies, contextify, installs differently on different operating systems. Because of that, we added node_modules/jsdom to the .gitignore file and run this script before running the js unit tests:

#!/bin/bash

# One of JSDOM's dependencies, contextify, cannot be checked in because it installs differently depending on the OS.
# This script checks for the presence of JSDOM and installs it if it's missing

# this line searches npm's local repository for jsdom
# 2> /dev/null is becuse NPM likes to complain about missing readme files in third-party packages
# tr removes the blank line that npm puts out if jsdom isn't found
LS_RESULTS=$(npm --parseable ls jsdom 2>/dev/null | tr -d '\n\')

if [[ -n $LS_RESULTS ]]; then 	# -n tests to see if the argument is non empty
	echo "jsdom is already installed, skipping"
else
    npm install jsdom
fi

Next up, the *_spec.js files. Basically, any file that ends in “_spec.js” will be run automatically by jasmine-node. These are just basic jasmine test suites.

If you already have some jasmine specs written, theres’s a good chance they’ll just work. If not, now’s a great time to start

Here’s a quick example from one of ours:

describe("Gallery", function() {

    var instance;

    beforeEach(function(){
        instance = new R.Module.Gallery(getConfig());
    });

    afterEach(function(){
        instance.destroy();
        instance = null;
    });

    describe("getTemplateData", function(){

        var data;
        beforeEach(function(){
           data = {mos: []};
        });

        it("should include the current FB user ID", function(){
            var USER_ID = "1234";
            spyOn(R.FB,"getCurrentUserId").andReturn(USER_ID);

            instance.getTemplateData(data);

            expect(R.FB.getCurrentUserId).toHaveBeenCalled();
            expect(data.current_user_id).toBe(USER_ID);
        });

        it("should shuffle the mos when Gallery.ShuffleMos is true", function(){
            var config = getConfig();
            setParam(config, "Gallery.ShuffleMos", true);
            spyOn(R.Util, "shuffle");

            instance = new R.Module.Gallery(config);
            instance.getTemplateData(data);

            expect(R.Util.shuffle).not.toHaveBeenCalled();
        });
    });

    // etc.
});

Running the tests is easy:

Compile your JS file – build/rondavu_test_mode.js in our case.
Ensure jsdom is installed locally by running util/install_jsdom.sh.
Run the tests: node_modules/jasmine-node/bin/jasmine-node test/js --forceexit

The --forceexit option cuts a few seconds of idling off the end of the tests. If you want the JUnit-compatible XML report, add --junitreport --output build/js-test-results.xml. (You will likely need to change the path of the output file to wherever your build system is expecting it to be.)

Finally, the process exit code will tell you if the tests passed or not, making it extremely easy to integrate into build systems. Here is our ant task:

And there you have it. Happy testing!

[1]: It’s actually a bit more complex that that – we generate a separate file for each customer with their configuration and whatever features they use.

Also, we’ve recently switched from our custom js build script to require.js and jam.js, but we’re still working out the final kinks. Expect a followup post once we’re fully confident with the new setup

How to make Apache Ant tasks run in a default directory

nFriedly — Wed, 29 Feb 2012 20:14:31 +0000

I often open a new tab in my Terminal to run an Ant task, and often as not I forget to cd into the correct directory first and so I am greeted with this error:

Nathan-Mac:~ nathan$ ant database.start Buildfile: build.xml does not exist! Build failed

On my system, there’s only one main project that uses ant, so I almost always intend for ant tasks to be run against that project’s build.xml. So, I created a function that makes ant tasks “just work” no matter what directory I am in.

The code

First you’ll need to edit your .profile file. To do so, run the following command:

nano ~/.profile

Then copy-paste in this code, changing the DEFAULT_ANT_DIR to the path to your project (whatever folder has the build.xml file in it):

# make ant commands run in the default directory if
# there is no build.xml in the current directory

export DEFAULT_ANT_DIR = /path/to/your/projects/folder/

function magic-ant() {
  if [ -e ./build.xml ]
    then
      ant $@                                                                    
    else
      pushd DEFAULT_ANT_DIR
      ant $@
      popd
  fi
}

# reset ant to avoid loops if you ever run `source ~/.profile` again
alias ant=`which ant`

alias ant="magic-ant"

Press [Control]-O then [Enter] to save and [Control]-X to exit nano.

Lastly, run this command to import your changes (or just close and reopen your terminal):

source ~/.profile

How it works

First, we define the path in a shell variable with the path to the default ant project. This isn’t absolutely required, but it keeps things tidy and simple.

Next, we create the magic-ant function which checks if there is a build.xml file in the current directory. If so, it uses that one, otherwise it calls pushd to temporarily change directories to our default one, runs the ant command, and then calls popd to get back to whatever directory you started in. $@ is an automatic variable that includes whatever parameters this function was called with.

After that we use alias to reset the ant command in order to avoid endless loops where our magic-ant function calls itself instead of the real ant if you source. The command which returns the path to the program with the given name. Putting it in backticks (`) makes bash execute the command and return the result.

Finally we alias ant to point to our new magic-ant function when run from the command line.

The only downside is that I haven’t yet figured out how to make Ant task tab completion work with this when you’re not in the project directory.

How to get your apps ready for Facebook’s OAuth 2.0 upgrade

nFriedly — Fri, 16 Sep 2011 20:44:35 +0000

I just finished a writeup on the necessary JS changes to support Facebook’s OAuth 2.0 upgrade, and then Hilary did a followup post on the server-side.

The upgrade enabled right now, but it gets forced out on October 1st. These two posts should give you all you need to know to get your site ready for Facebook’s upgrade:

Part 1: JavaScript - JavaScript changes for Facebook’s OAuth 2.0 upgrade

Part 2: PHP / Backend – Server Side changes for Facebook’s OAuth 2.0 upgrade

Also worth noting, there’s a lot of good information on Facebook’s Developer Blog.

Calling all (available) Web Designers & Developers

nFriedly — Fri, 17 Dec 2010 17:29:24 +0000

Even though I’ve been happily employed with Sociable Labs for a while now, I still get fairly frequent calls and emails from people who want to know if I’m available or I “know someone.” The list of people I know is starting to run short, so this post is intended to remedy that.

If you are an individual Web Designer or Web Developer interested in work, please post a comment below.

What to post:

Your name and website in the appropriate fields. I disabled WordPress’s rel="nofollow" just for you.
- If you don’t have a website, get one! Sign up for a Dreamhost account and buy a template from Theme Forest and you’ll have a solid website in no time.
Your basic skillset. For me, it might be “Strong Javascript / Ajax, PHP, HTML, and CSS; basic Photoshop, ActionScript and Java”
A short bit about yourself and your experience.
Where you’re located, and if you would consider relocating for work.
What type of work you’re interested in: freelance / short-term contract (3-6 months or less), long-term contract, employment, startup, etc.

Tips:

This is your first impression to potential clients: Copy-paste it into Word and read it out loud once or twice. Get it right the first time because you can’t edit comments after you’ve posted them.
Contact information: any phone number or email address posted here will be picked up by spammers.
- A basic solution is to just post a .jpg on your website with your phone number and email.
- A better solution could be a contact form like this one: How to build a spam-free contact form without captchas
One or two links to your GitHub, LinkedIn, or recent work is fine, but be warned that my WordPress marks anything with more than 3 links as spam, and it’s hidden until I get around to checking the spam filter.
Lastly, this is my website, and I may choose to edit or delete comments. For example, if you claim 10+ years experience with jQuery, your comment will be deleted. (JQuery was released in 2006)

Thanks and best wishes with your future work!

How Facebook sets and uses cross-domain cookies

nFriedly — Thu, 26 Aug 2010 16:08:06 +0000

I’ve seen a lot of confusion about this lately, so I thought I’d make a quick writeup to explain how facebook does it. (I’ll also give a quick tip on how you can do it yourself.)

What Facebook Does

Facebook is in a unique position compared to many developers looking to set cross domain cookies: The user visits both facebook.com and the other website.

Facebook never actually sets cookies cross-domain, they only read cookies cross-domain. They set cookies on facebook.com when the user visits facebook.com and they set cookies on the other example.com (or any other website) when the user visits example.com.¹

Doing things this way avoids all of the browser security issues because cookies that were already set when the user visited facebook.com can still be read when example.com loads facebook.com in an iframe. This is worth repeating: Cookies can be read in an iframe if they were set outside of the iframe.²

What about when the user is not logged into Facebook?

(This is how you can do it!)

If the user is not logged into Facebook when trying to use Facebook on example.com, then Facebook opens a popup window – not an iframe – to let the user log in.

A popup window has none of the cookie restrictions that iframes get; it can read and set cookies normally.

What about popup blockers?

Most popup blockers make a special exception for “intentional” popups – ones that occur as a direct result of a user’s click. When the user clicks the login button, the blocker allows the popup because the click indicates that the user wanted that popup.

Cross-domain communication

If you need to communicate between domains, modern browsers allow you to use postMessage to send data between web pages (although it doesn’t work with popups in Internet Explorer).

If you need to support older browsers, you can include the excellent easyXDM library for iframe-parent communication. You might need to combine a popup + one or more iframes in some situations.

An alternate method for of cross-domain cookies: flash

If you’re looking for a flash-based method of setting cross-domain cookies, or would otherwise like to avoid popups, you may want to check out my previous article, which includes source code: .swf for JavaScript cross-domain flash cookies

Notes

Cookies are only set on example.com when using the using Facebook’s JavaScript SDK. When embedding Social plugins directly as an iframe, only facebook.com cookies are used.
Safari sometimes prevents JavaScript from reading cookies in an iframe even if GET and POST requests to the server have full access to the cookies. Safari has several quirks like this, but generally behaves better with iframes if the user interacts with it.

Need a more advanced integration than what Facebook Social Plugins provide?

At Sociable Labs, our Intelligent Social Plugins^TM increase social sharing by 15x and have shown a ~1% increase in sales. And the best part is that we do all of the hard work for you!

JavaScript library and .swf for cross-domain flash cookies

nFriedly — Tue, 13 Jul 2010 18:25:11 +0000

I’m working on a project that has a legitimate (non-spammy) reason to need cross-domain cookies, and we settled on flash as a good way to accomplish this.

However, I was surprisingly unable to find any complete library or how-to guide for connecting flash cookies to javascript. So I dusted off my flash skills and built one, and and now you get to enjoy the fruit of my labor:

Download the .swf, .js, and source code from github

This is an .swf file that communicates with JavaScript via flash’s ExternalInerface to read and write to a Local SharedObject (LSO). Essentially, it’s cross-domain cookies for javascript.

It also includes an (optional) javascript library that handles embedding, communication, error checking, and logging.

The project is hosted at github: http://github.com/nfriedly/Javascript-Flash-Cookies

You might also be interested in How Facebook Sets and uses cross-Domain cookies

Working Example

See https://nfriedly.com/stuff/swfstore-example/ and http://nfriedly.github.com/Javascript-Flash-Cookies/ for a working example.

Quick start guide

To use the library, upload the storage.swf & swfstore.js files to your web server and put this HTML and JavaScript into your web page(s):

The HTML

And The JavaScript


// wait until the page has finished loading before starting
$(function(){

	// first disable things while the swfStore is initializing
	$('input').attr("disabled","disabled");
	$('#status').text('Loading...');

	var mySwfStore = new SwfStore({

		// Optional but recommended. Try to choose something unique.
		namespace: 'myExample', 

		// To work cross-domain, only one of your sites should have the
		// .swf, all other sites should load it from the first one
		swf_url: 'http://site.com/PATH/TO/storage.swf', 

		// Logs messages to the console if available, a div at the
		// bottom of the page otherwise. 
		debug: true,

		onready: function(){
			// Now that the swfStore was loaded successfully, re-enable
			$('input').removeAttr("disabled");

			// Read the existing value (if any)
			$('#dataInput').val(mySwfStore.get('myKey'));

			// Set up an onclick handler to save the text to the 
			// swfStore whenever the Save button is clicked
			$('#saveBtn').click(function(){
				mySwfStore.set('myKey', $('#dataInput').val() );
				$('#status').text('Saved!')
			});

			$('#status').text('Loaded');
		},

		onerror: function(){
			// In case we had an error. (The most common cause is that 
			// the user disabled flash cookies.)
			$('#status').text('Error');
		}
	});
});

Cross-domain usage

A copy of storage.swf located on one domain may be embedded on pages from one or more other domains, allowing cross-domain cookie access.

Troubleshooting

Be sure the urls to the .swf file and .js file are both correct.
If the .swf file is unable to communicate with the JavaScript, it will display log messages on the flash object. If debug is enabled, this this should be visible on the page.
To hide the flash object and disable the log messages appending to the bottom of the page, set debug to false. (Log messages are added to a div if no console is found).
If the user does not have flash installed, the onerror function will be called after a (configurable) 10 second timeout. You may want to use a library such as Flash Detect to check for this more quickly. Flash Player 9.0.31.0 or newer is required.
If you pass a non-string data as the key or value, things may break. Your best bet is to use strings and/or use JSON to encode objects as strings.
If you see the error “uncaught exception: Error in Actionscript. Use a try/catch block to find error.”, try using “//” in the .swf URL rather than “https://”. See https://github.com/nfriedly/Javascript-Flash-Cookies/issues/14 for more information.
Do not set display:none on the swf or any of it’s parent elements, this will cause the file to not render and the timeout will be fired. Disable debug and it will be rendered off screen.
The error this.swf.set is not a function has been known to occur when the FlashFirebug plugin is enabled in Firefox / Firebug..

Patches

Although my JS is solid, my Flash / ActionScript skills leave something to be desired. Patches to either are more than welcome at github (preferred), or just leave a comment here if you’re not sure how to use github. (This comment has a short walk through to using github.)

Production Use

If you’re using SwfStore in a production site, feel free to leave a comment here with a link to the site. I turned off WP’s default rel=”nofollow”, so enjoy the link juice Reciprocal links are not required, but are always appreciated.

How to build a spam-free contact form without captchas

nFriedly — Sat, 07 Nov 2009 05:12:53 +0000

Most anti-spam methods used by websites today are annoying at best. They use impossible-to-read captcha images, or they make users jump through some kind of hoop to get the email address instead of just clicking on it. This can mean lost sales and opportunities for you, because each hurdle turns away more users.

This article looks at how to use some simple HTML, CSS, & Javascript to protect your private information without making your guests jump through hoops.

Download a working copy of the contact form discussed here.

The Goal

I want users to be able to contact me simple and easy, no captchas, no math problems, just a regular contact form, clickable email address, and everything copy-paste-able.

The Problem

Spammers love captcha-free forms and clickable email addresses. (And lately, copy-paste-able phone numbers.) I do not want to receive a ton of spam!

The Solution

With a little bit of CSS and JavaScript wizardry, we can make a simple, easy-to-use contact page that will block almost all automated contact form spam.

Part 1: The Contact Form

We are going to make a standard contact form with one extra feature: an input named “url” and a note beside it that says “Don’t type anything here!”

The HTML:


Your name:



Your email:



Leave this empty:

Then we use CSS to hide the input and the note.

The CSS:

.antispam { display:none;}

Then we make a rule in the server that says ‘if the user typed anything in the “url” box, then throw it out.’

The PHP:

Thanks

We'll get back to you as soon as possible

A regular person won’t even see the box normally, and will therefore leave it blank without even thinking about it. If the CSS fails to load, they get a note explaining what to do.

However, when a spam bot looks at this, it sees a good spot to stick whatever spammy url they’re trying to advertise.

Now the php script on the server can tell who is a spammer and who isn’t. The regular people get sent to your email, the spammers get ignored!

Part 2: Click-able Email Address

Spammers steal your email address by scanning through the source code of the site and grabbing anything that looks like an email address. So we’re going to make sure that there is no email address in the source code and instead generate it by JavaScript.

The Javascript:

var first = "yourname";
var last = "yoursite.com";

The HTML:

My e-mail address:

A regular user will see a regular email address and things just work. A user who happens to have javascript disabled will see an explanation and an alternative solution. And a spammer won’t see a thing!

This method can easily be extended to phone numbers and other personal information.

Advanced version: Prettier message body and a proper `From:` field

These were the most commonly requested features, so I added an advanced version that changes the From: field of the email to whatever the user typed in the box, and removes all of the Array brackets from the body of the message:

The preg_match() is there to make sure spammers can’t abuse your server by injecting extra fields (such as CC and BCC) into the header. Take a look at http://www.thesitewizard.com/php/protect-script-from-email-injection.shtml for more info.

Be sure to check the comments below for several other variations.

Complete Examples

A complete working copy of everything mentioned in this article, including both the simple and advanced versions, is available for download here: http://nfriedly.com/stuff/spam-free-contact.zip

For a live demo of all of this and more, see my contact page.

WordPress version

I found that there is an anti-spam plugin for WordPress that uses similar methods to the ones I describe here: http://wordpress.org/extend/plugins/nospamnx/ – I installed it on this blog and it’s stopped nearly 30,000 spam comments so far.

Does your website need help?

I am an Experienced Web Developer with a sharp eye for security. I can make your site easier to use while at the same time cutting down on level of spam you receive through it. Contact me for more information and a free quote.

Advanced Javascript: Logical Operators and truthy / falsy

nFriedly — Tue, 07 Jul 2009 16:54:49 +0000

Nearly every website on the internet uses javascript in some form or fashion. Yet very few people, even those who write it and teach it, have a clear understanding of how javascript works!

Logical Operators are a core part of the language. We’re going to look at what logical operators are, what “truthy” and “falsy” mean, and how to use this to write cleaner, faster and more optimized javascript.

Javascript Logical Operators

In traditional programming, operators such as && and || returned a boolean value (true or false). This is not the case in javascript. Here it returns the actual object, not a true / false. To really explain this, I first have to explain what is truthy and what is falsy.

Truthy or Falsy

When javascript is expecting a boolean and it’s given something else, it decides whether the something else is “truthy” or “falsy”.

An empty string (''), the number 0, null, NaN, a boolean FALSE, and undefined variables are all “falsy”. Everything else is “truthy”.

var emptyString = ""; // falsy

var nonEmptyString = "this is text"; // truthy

var numberZero = 0; // falsy

var numberOne = 1; // truthy

var emptyArray = []; // truthy, BUT []==false is true. More below.

var emptyObject = {}; // truthy

var notANumber = 5 / "tree"; // falsy
// NaN is a special javascript object for "Not a Number".

function exampleFunction(){
	alert("Test");
}
// examleFunction is truthy
// BUT exampleFunction() is falsy because it has no return (undefined)

Gotchas to watch out for: the strings “0″ and “false” are both considered truthy. You can convert a string to a number with the parseInt() and parseFloat() functions, or by just multiplying it by 1.

var test = "0"; // this is a string, not a number

(test == false); // returns false, meaning that test is truthy

(test * 1 == false); // returns true, meaning that `test * 1` is falsy

As one commenter mentioned, arrays are particularly weird. If you just test it for truthyness, an empty array is truthy. HOWEVER, if you compare an empty array to a boolean, it becomes falsy:

  if([] == false){
    // this code runs
  }

  if( [] ) {
    // this code also runs
  }

  if([] == true){
    // this code doesn't run
  }

  if( ![] ) {
    // this code also doesn't run
  }

Another commenter pointed out an additional gotcha to watch out for: while javascript evaluates empty arrays as true, PHP evaluates them as false.

PHP also evaluates “0″ as falsy. (However the string “false” is evaluated as truthy by both PHP and javascript.)

How Logical Operators Work

Logical OR, `||`

The logical OR operator, ||, is very simple after you understand what it is doing. If the first object is truthy, that gets returned. Otherwise, the second object gets returned.

("test one" || "test two"); // returns "test one"

("test one" || ""); // returns "test one"

(0 || "test two"); // returns "Test two"

(0 || false); // returns false

Where would you ever use this? The OR operator allows you to easily specify default variables in a function.

function sayHi(name){

	var name = name || "Dave";

	alert("Hi " + name);

}

sayHi("Nathan"); // alerts "Hi Nathan";

sayHi(); // alerts "Hi Dave",
// name is set to null when the function is started

Logical AND, `&&`

The logical AND operator, &&, works similarly. If the first object is falsy, it returns that object. If it is truthy, it returns the second object.

("test one" && "test two"); // returns "test two"

("test one" && ""); // returns ""

(0 && "test two") // returns 0

The logical AND allows you to make one variable dependent on another.

var checkbox = document.getElementById("agreeToTerms");

var name = checkbox.checked && prompt("What is your name");

// name is either their name, or false if they haven't checked the AgreeToTerms checkbox

// IMPORTANT NOTE: Internet Explorer 8 breaks the prompt function.

Logical NOT, `!`

Unlike && and ||, the ! operator DOES turn the value it receives into a boolean. If it receives a truthy value, it returns false, and if it receives a falsy value, it returns true.

(!"test one" || "test two"); // returns "test two"
// ("test one" gets converted to false and skipped)

(!"test one" && "test two"); // returns false
// ("test one" gets converted to false and returned)

(!0 || !"test two"); // returns true
// (0 gets converted to true and returned)

Another useful way to use the ! operator is to use two of them – this way you always get a true or a false no matter what was given to it.

(!!"test"); // returns true
//  "test" is converted to false, then that is converted to true

(!!""); // returns false
// "" is converted to true, and then that true is converted to false

(!!variableThatDoesntExist); // returns false even though you're checking an undefined variable.

Javascript Optimization

Need any help optimizing the Javascript and AJAX on your website? Get in touch with your friendly neighborhood javascript expert for ideas on how to optimize your site and a free quote.

How to use XSLT to style an RSS feed

nFriedly — Wed, 17 Jun 2009 19:18:39 +0000

XSLT is a fairly well-supported technology. It allows you to take any XML file – including RSS – and transform it into a styled HTML document. It’s kind of like CSS on steroids.

Unfortunately, most browsers think they know better and go off and do their own thing on RSS feeds.

We’re going to look at how and which browsers can be brought into line, and how to use XSLT to improve the look of your RSS feed in those browsers.

The RSS problem

In most browsers, XML and XSLT are supported in every single case *except* RSS. By default, Internet Explorer, Firefox, Safari, and Opera all ignore XSLT files and do their own thing with RSS. In fact, Google Chrome is the *only* browser I tested that got it right without tinkering.

To their credit, Microsoft at least gave their users the option to turn off the “feature”. No other browser even gives this option.

During my tests, I have found a way to “trick” Firefox into rendering RSS with XSLT correctly. Currently there seems to be no solution for other browsers except to try and detect them on the server and send the user an HTML file if they’re in a browser that doesn’t work properly.

Internet Explorer

IE requires that the user specifically choose to disable their take-liberties-with-rss “feature”. I would point out that this really isn’t good enough because 99% of users will never get that far, but sadly, it’s the closest thing to getting it right out of any browser on the market! (Aside from Google Chrome.)

Here’s how:

Click on the Tools menu,
Click on the Internet Options sub-menu,
Click on the Content tab,
Click on the Settings button of the Feed section to bring up Feed Settings dialog box,
Un-check the Turn On Feed Reading View option.
Click OK all the way to close all opened dialog boxes.
Restart Internet Explorer

Firefox

Firefox can be tricked into working because it decides fairly early on in the rendering process whether to treat the page in a standard way or to fly off the handle with it. In fact, it makes this decision before even completely downloading the RSS file.

Because of the early decision process, we can insert 512 characters of white space in between the declaration and the opening tag. Firefox is then “tricked” into doing the right thing and rendering the feed correctly.

Working around it

Although not practical in most cases currently, I’ve included an example of a script that will take any RSS feed and add a style sheet to it. It includes the hack to work in firefox and instructions for enabling it in Internet Explorer.

http://nfriedly.com/stuff/rss/?url=http://nfriedly.com/techblog/feed/

Code for index.php:

');

// if we don't have a url, use the home page
if(!$url) $url = "home.xml";

// download the rss feed
$rss = file_get_contents($url);

// xml header so firefox doesn't decide it's text
header('content-type: text/xml');

//echo out the header right away, if there is one
if(substr($rss,0,6) == '') +2;
	echo substr($rss,0,$header_end);
	$rss = substr($rss,$header_end);
}
//otherwise echo a default header:
else echo '';

// remove any existing stylesheet
$rss = preg_replace('/<\?xml-stylesheet([^?]|\?(?!>))*\?'.'>/','',$rss);  // uses lookahead

// add in our stylesheet
echo "\r\n" . XSL_LINK . "\r\n";

// toss in 512 bytes of nothing to throw off firefox
echo "                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ";

//finally, pass along the content
echo $rss;

?>

The xsl.php file is only php to allow for setting the current url in the feed url input box. Ignoring that, you can view it’s source by looking at http://nfriedly.com/stuff/rss/xsl.php. You could simply save that as an .xml file and have a working copy.

You can also view the CSS and Javascript used to make everything look nice.

Hire me for web development

Need an expert web programmer to research and solve some off-the-wall problem like this? I’m available. I’m good solving run-of-the-mill problems too – Javascript and AJAX development is my specialty. Get in touch with me for more information and a free quote.