Do you like posting source code samples on your blog?
I wasn’t sure how. I just surrounded it with “<pre>” tags. That works in the basic sense. What about the syntax highlighting and line numbers?
A search of the WordPress FAQ’s revealed this how-to on posting code.
Basically it looks like this. Just tell it what language you’re using.
It also revealed Google’s syntax highlighter for when Javascript libraries are doable.
Pretty simple. Thanks Google and Wordpress.
Demo
http://www.davidvanvickle.com/examples/ep8/index.htm
Download
http://www.davidvanvickle.com/examples/ep8/ep8.zip
Web pages can be highly dynamic. We can log in to a site and get relevant data like a bank balance or see our social network friends – information specific to us. That means our page requests to the server are identified as being ours and the server can compile something with our data in it.
The internet’s way of communicating (“hypertext transfer protocol” or HTTP) is stateless. That means, on it’s own, it doesn’t remember the visitor from one page to the next. It just sends anonymous requests to the server, and the server sends back that static page. Fortunately there are a few mechanisms for distinguishing one request from another, which allows us to make web pages more personalized.
One mechanism is the cookie. Cookies are strings of text stored by the browser. A cookie allows the browser to remember things between pages. A common use of cookies is with sessions. When you visit a web site, you are in a session with that web site. Cookies are sent from the site and contain data specific to that session, such as a session ID. The browser receives and stores the cookie, then sends it back to the web site every time a new page is requested. So now the server, on some level, knows who is asking for what. The server can respond differently depending on the cookie value sent from the browser.
Use Javascript to access cookies on the client-side.
alert(document.cookie);
Here is a Javascript object for reading, writing and deleting cookies.
http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip
CookieHandler Example
var C = new CookieHandler(); C.set(‘mykey’, ‘myvalue’); alert(C.get(‘mykey’)); C.del(‘mykey’);
The problem with using cookies is that the user can always disable them, so you have to make sure your client side app doesn’t break when that happens. Either that or you tell users up front that javascript and cookies must be enabled to use your application.
From the server side perspective, when cookies are not available, the server has to come up with another way to track session id’s. Without cookies, the session ID must be embedded in a different part of the page request. There are a couple methods to request information from a server. One is called a GET and the other is called a POST.
GET
Using a GET request means that data is attached to the URL after the question mark. This looks like “page.php?session=mysessionid”. Multiple bits of data can get strung together after the question mark with ampersands like “page.php?key1=value1&key2=value2”.
Usually this data is read on the server side, but Javascript on the client side can parse these GET query strings as well.
The following Javascript code can read the data sent with the GET method.
http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip
QueryStringReader Example
var qsr = new QueryStringReader();
var key1 = qsr.get("key1");
var key2 = qsr.get("key2");
if (key1) alert(key1);
if (key2) alert(key2);
POST
Using a POST request puts data in another part of the request packet and is generally preferred when more than a few pieces of data need to go back to the server. When a user uses a search field, often a GET is used as there are only a couple fields of data to transfer. But when a larger order form is used, it will tend to POST since there is more data to pass. When files such as images need to be sent from the client to the server, the POST method is always used. Javascript does not have access to POST data, only to GET data.
AJAX
Requests aren’t restricted to when the user goes between pages. Javascript can send it’s own requests behind the scenes within a single page. This is how AJAX works. Javascript does a GET or POST request from inside the page and gets an XML response from the server. The Javascript receives the XML, parses it, and changes the page layout somehow, all without the page having to reload. That’s AJAX. There is a great AJAX quick start tutorial on Mozilla’s developer wiki. A link to it is available in the show transcript at Podturtle.com.
http://www.davidvanvickle.com/examples/ep8/index.htm
http://www.davidvanvickle.com/examples/ep8/ep8.zip
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = function() { alert(httpRequest.responseText); };
httpRequest.open('GET', ‘data.xml’, true);
httpRequest.send('');
Sessions
The most reliable and easy way to deal with sessions is to use the built in session handling of modern server side scripting languages such as PHP and ASP. There will be an object dedicated to keeping track of the session for us. And we get to store whatever we want in that temporary session data. A server side programmer can trust the server to maintain that session for the user however it needs to, via cookies or via GET requests. It’s automatic.
PHP
session_start(); $_SESSION[‘mykey’] = ‘myvalue’; echo $_SESSION[‘mykey’];
ASP
Session(“mykey”) = “myvalue” Response.write(Session(“mykey”))
Similarly, methods for getting GET and POST data from requests are also handled very easily with server side scripting languages.
PHP
echo $_GET[‘mykey’]; // GET echo $_POST[‘mykey’]; // POST
ASP
Response.write(request.querystring(“mykey”)) ‘ GET Response.write(request.form(“mykey”)) ‘ POST
Whether you plan to program on the client side or the server side, learning how to pass data between pages is the first step to making your web apps interactive and personalized.
Demo
http://www.davidvanvickle.com/go.php?p=jquery-slideshow
Download code
http://www.davidvanvickle.com/examples/jquery/slideshow/slideshow.zip
jQuery
http://docs.jquery.com/Tutorials
http://jquery.com/
So you’ve got a bunch of pictures and you want to have a simple slideshow on your homepage. It doesn’t need controls. It just needs to take a folder full of pictures and display them automatically, one at a time, in random order, without repeating a picture before it’s shown all the pictures. That’s what we’ve got this week. It’s a Javascript and jQuery-powered slideshow app.
About jQuery
The app starts with jQuery, which is a Javascript library for animation and AJAX work. Implementation means simply downloading the JS file from jQuery.com and including it with our project. I have to admit, I’m new to jQuery so I’m relying on the expertise of another tutorial to use it here. Another guy wrote the jQuery code, and the code I added is just straight forward Javascript.
Where This Slideshow Started
Jeffrey Jordan Way, a Web Developer from Nashville, TN at detacheddesigns.com, in a post called “Why Aren’t You Using jQuery: PART 3″, started this slideshow on his site as a tutorial. Check his site to learn more about the jQuery part of this code.
About that slideshow
Jeffrey’s tutorial has smaller thumbnails along the right, and the big picture on the left. You click a thumbnail and the big picture changes to the big version of that thumbnail. He used jQuery to apply the click event to the thumbnail and to display the preload progress wheel and to display the fade in effect between large images.
What’s special about my version?
Well first I took off the thumbnails. I just wanted the big image. Then I added a few features. Inside the Javascript file you put your list of images into an array. That array gets shuffled each time the page loads so the pictures don’t always display in the same order. This shuffling function was written by Jonas Raoni Soares Silva at http://jsfromhell.com/array/shuffle. You can set a flag in the file to turn off shuffling if you like.
Another way you can mix up the array is by having each next picture be random. Problem with this was that photos tend to repeat themselves. If you’re ok with that, then there is a flag to toggle the randomness like there is a flag to toggle the shuffling.
Another feature is that you can control how fast the pictures change. The default is five seconds between images.
How to get my version
Download the ZIP file from the show notes. Extract it and look in the “js” folder. In there you’ll see the Javascript that uses the jQuery library. You’ll have to edit this file to point to your images. Right now it points to my example images. Just below that are the variables controlling shuffling, randomness, and seconds between photos. Play around until you’re happy with the results.
// change these paths for your images var myImages = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']; // shuffle images so each time page loads, the photos show in different order var do_shuffle = true; // use simple randomness instead of shuffling (tends to repeat images too often) var do_randomly = false; // number of seconds between photo changes var seconds_between_photos = 5;
You’ll also want to change the image dimensions in the CSS file. Right now it’s set to the size of my images. Your pictures will probably be a different size. Hopefully your pictures have been optimized in Photoshop for the fastest loading, and sized to however you want them to be on your site. If you leave the CSS the way it is and your photos are a different size, the photos will be force-fit into the photo box disproportionately. All the photos have to be the same size or the CSS will stretch them to fit.
Javascript library best practices
The main issue is: will the library work for most people. If I try it out and it mostly works everywhere, I use it. I’ll test against current versions of Internet Explorer, Firefox, and Safari. I am betting that people are keeping their browsers up to date for security reasons, so I don’t support old versions.
I tend to keep a copy of the library with each project. I don’t use a single library for my whole site. If I find that a new browser breaks an old library, that’s when I try using the newer library on the old project to see if that fixes it. I don’t expect old projects to work with new libraries, at least not without testing.
My biggest fear is that a new version of Internet Explorer will break things. Experienced style sheet developers know all kinds of hacks that try to keep IE in check. Anyway, such is the dangers of client side web development. We’re at the mercy of new browsers coming out. That’s why a lot of people like server side development. You’re only building to one target – your server.
First off, let’s define aggregation as taking a bunch of things and putting them all in one place.
Let’s try something. I’m going to read off a bunch of web services. Which ones are you a member of?
Each of these can be pulled into one feed by FriendFeed.com .
How many of those services are you a member of? What do you do when you want visitors to see all your posts in one place? Think about using FriendFeed and harnessing it’s API . We’ll use it to create a single central feed out of the chaos.
So how does FriendFeed work? Each member loads up their various accounts from around the web – Google Reader shared articles, Twitter posts, blog entries, YouTube videos, Flickr photos, del.icio.us bookmarks, all that stuff I listed earlier – and members can have discussions around each entry. It’s a furious stream of information and comments coming from all directions. blogs, news, pictures, etc – all flying by, with comments. It’s the daily web posting activity of thousands of people in one place.
Facebook already has a nice FriendFeed app so your friends can see your FriendFeed-aggregated posts.
Otherwise showing it on another web page (like a very cool business’ web page) means we’re off to the FriendFeed API.
First thing we need is a FriendFeed account. They’re free. Go to friendfeed.com and follow the instructions.
Then load all of your web memberships into FriendFeed so you’ll have stuff in your feed.
Then we need to download the API from http://code.google.com/p/friendfeed-api/ . Documentation and forums are available at http://friendfeed.com/api/ .
Then, in order to authenticate with the API, we get our new account’s Remote Key from http://friendfeed.com/remotekey .
That’s all the official FriendFeed stuff we need. Now on to our application. I called it FriendFeedFormatter.
It is not affiliated with FriendFeed. Use it all at your own risk. FriendFeed has stated that the API is young and could change at any time. That disclaimer out of the way…
My code does all the work of taking our nickname and remote key and producing an HTML snippet from our FriendFeed feed that we can then have included in a PHP page. Download example.zip from the show notes. It’s got all the code that I’ve written using the API.
http://www.davidvanvickle.com/friendfeed/example.zip
In the show notes is a link to see sample output. That will give you an idea of what to expect, and you can begin to think of how to embellish it.
http://www.davidvanvickle.com/friendfeed/build.php
There are only two files in example.zip. One is my FriendFeedFormatter PHP class. The other is build.php, which is the file you’ll customize and run.
Now find the FriendFeed API you downloaded. In order for my custom class to work, you’ll need to include the friendfeed.php file from the API in the same folder.
So when you’re done there will be 3 files uploaded to a folder on your PHP enabled web server. friendfeed.php from the API, plus FriendFeedFormatter.php and build.php.
Before we try to run anything we need to change a couple things inside of build.php. So open that file in a text editor.
Enter your FriendFeed nickname where it says “MY_NICKNAME”. Then enter your remote key where it says “MY_REMOTEKEY”. That’s it. There are more things we could toggle but let’s start here.
So save and close build.php and upload the 3 files to the web server. Now you should be able to hit your build.php with a web browser and see what happens.
If all is well then you’ll see the HTML table that the FriendFeedFormatter produced using the API. Now look in the webserver folder where you uploaded the 3 files. You should now see a 4th file. That file is what you’ll be including in your normal web pages. It is JUST the HTML table displaying your feed. Just a little piece of a web page, not the whole thing. Perfect for inserting into a page that already exists.
Why don’t I just write a Javascript snippet like everyone else? Well because I don’t want to slow my web pages with a call to a remote site. The FriendFeed servers are pretty fast, but I still don’t want that dependancy if I can help it. As long as I can run that build.php file on a regular basis, I will have a new enough include file for my site. And it will load right away.
So how do I run build.php on a regular basis? Good question. If you want to automate that, I have half an answer. If you’re familiar with running cron jobs, or if you want to learn how, cron would be a good way. Cron allows your server to perform a task – such as calling build.php – according to a schedule, like every few minutes, instead of waiting for a web user to come along and trigger it. Cron is usually running already. You don’t have to install it. Just add a crontab to call lynx, wget, or on older servers, the php cgi executable and pass it build.php and how often it should run.
Truth be told, I don’t have much experience with cron, but it seems to be where people go for scheduling scripts. I included some examples in the show notes that I scraped from the web to get you started. I’m sorry that I don’t have more tested examples.
Run every Monday morning at 4:41AM. (minute hour day month weekday command)
41 04 * * 1 /path/to/lynx http://www.mydomain.com/path/to/your/cron.php
or
41 04 * * 1 /path/to/wget http://www.mydomain.com/path/to/your/cron.php
or
41 04 * * 1 /path/to/php /path/to/your/cron.php
Samples from:
http://www.hackernotcracker.com/2007-04/run-php-scripts-with-crond-and-crontab.html
http://www.modwest.com/help/kb.phtml?cat=2&qid=105
More at
http://www.webmasterworld.com/forum40/1258.htm
Otherwise just keep build.php bookmarked and hit it every time you do something that updates your feed.
Fortunately for server performance, but unfortunate for us, is that FriendFeed is on it’s own schedule. Just because I update my blog, doesn’t mean FriendFeed is immediately aware of that post. It may take a few minutes for it to show up in the FriendFeed feed. (That’s a great reason to figure out how to make the cron way work)
The code to pull in the include file in your PHP page is the same code in build.php that displays the output in the browser. The FriendFeedFormatter->get_output() method.
Once you see the output, I’m sure you’ll want to customize it more. Go for it.
I built in a few enhancements.
One enhancement is date formatting. The date may come to you a couple different ways. One is in ISO8601 format. That looks like this. “2008-05-21T15:02:22Z”
Another format would be as a UNIX timestamp, or a long number that represents the number of seconds since January 1, 1970.
You should be able to look in the date column, see which kind of date you have, and change the value of the date format variable in build.php.
$ff_date_format = ‘ ISO8601’; // or ‘unix’
The formatter has a couple features users may appreciate. One is inline Youtube videos. First the user sees a JPG image of the video, but when it is clicked, it turns into a playable video.
Another feature is link detection, which is programmed to happen with Twitter entries. The static URL’s become clickable.
The last feature is, when Flickr is detected, it lists the thumbnails of the images.
These are things I expected to happen from the API, but they weren’t there, so I added them to my formatter.
Open the formatter and notice how I can treat each service’s entries differently. I can detect Twitter, for instance, and scan the entry for URL’s to convert into links. Or I can detect Youtube and make the inline play feature happen.
The important thing is just to hack away to get going using FriendFeed to aggregate your public web activity.