Archive for July, 2007

Idea: Coverflow for Safari

Safari + Cover Flow = Pretty Cool Huh

A lot of people [including me] would like a better way of browsing their vast arrays of bookmarks and visited sites.

A lot of people have suggested that Safari had some way of visually doing this, just like a lot of plug ins can for Firefox and other browsers.

But, it occurred to me recently - wouldn't it be cool if Safari had Coverflow? Whenever you go to a page, Safari could capture a small thumbnail and save it in a directory for fast viewing much like iTunes does with cover art, and the Finder will with images and other documents in Leopard.

It would make so much sense - iTunes for Mac and Windows already has Coverflow, so surely it wouldn't be such a mammoth task to get Coverflow in Safari for Windows as well.

I know it would save me a ton of time - much more than just eye candy - websites are, just like documents, not the easiest thing to distinguish when jumbled up in lists of 100s if not 1000s of similar items.

Also, with an almost identical version of Safari on the iPhone, browsing your history would become much the same, and just as easy as browsing your music collection.

Safari 3 with CoverFlow

All in all, Steve and co, if you're listening, this one's a no-brainer ;-)

Comments (37) arrow

We’ve been busy again.

MediaElements by GoSquared

Here's one of our client projects that we have been spending some time on, they're called MediaElements and they're an advertising agency based in London.

They came to us looking for a site design, in a very short period of time, so we thought we would step up the challenge, and here it is.

MediaElements Screenshot 1

We offered a pretty full solution, with collaboration on colour choices, text layout, fonts, and actual copy. We also included advertising on GoSquared.com and are providing hosting services while the site gets off the ground.

Pay them a visit, and check out the site while you're there ;-)

No comment arrow

Identify unused CSS

Unused CSS

Recently finished a new page design? We all know how cluttered code can get when dealing with problems in the design and during the development process. Often, CSS class declarations that were written for elements that were removed from your html page are not removed from the CSS too, and remain as pointless entries in your CSS file, increasing its size and volume of clutter unnecessarily.

Therefore, I have written a small PHP script that uses several regular expressions to check the styles of a page you specify, and tell you which CSS classes remain in your CSS file(s) but are not ustilised in the HTML code. After being told these useless CSS entries, you can manually remove them from your CSS file(s). For now I will just post the code of this file up, so you can use it on your server if you wish. I would host it on the GoSquared server but this script is somewhat vulnerable to cross-site scripting attacks and the like, and has not been designed with security in mind. It is merely a tool. Therefore, I advise you to make sure only you can access this file on your server, and don't make it public, if you use it on your server.

<?php
/********************************************************************\
* GoSquared ltd.                                    |css_checker.php *
* Authors: Main code by Geoff http://www.gosquared.com               *
* Extended by Damian http://level0.ch/                               *
* Adapted to OOP by Geoff                                            *
* Date: 10/07                                                        *
* Version: 1.2.0                                                     *
*--------------------------------------------------------------------*
* THIS SCRIPT IS OPEN SOURCE AND MAY BE USED BY ANYONE. SUBSEQUENTLY,*
* THE AUTHORS ACCEPT NO RESPONSIBILITY FOR ITS USAGE NOR GURANTEE ITS*
* RELIABILITY. NONE OF THE AUTHORS STATED ABOVE CAN BE HELD RESPONSI-*
* BLE FOR PROBLEMS RESULTING FROM THE USAGE OF THIS SCRIPT           *
*********************************************************************/
 
class css_scanner{
	public $helptext = "<p>
		<h3>Identify unused CSS</h3>
		Main code: <a href=\"http://www.gosquared.com/liquidicity/archives/203\">http://www.gosquared.com/liquidicity/archives/203</a> by Geoff<br />
		Bug fix & more: <a href=\"http://level0.ch/fileserv/csschecker.php.html\">http://level0.ch/fileserv/csschecker.php.html</a> by Damian<br />
		Further development, bug fixes and additions by Geoff<br />
		<b>Usage:</b><br />
		<ul>
		  <li>http://www.myserver.com/csschecker.php?page=index.html</li>
		  <li>http://www.myserver.com/csschecker.php?page=http://www.another-server.net/index.html</li>
		  <li>http://www.myserver.com/csschecker.php?page=index.html,about.html,download.html</li>
		  <li>http://www.myserver.com/csschecker.php?page=index.html&visual=inline</li>
		  <li>http://www.myserver.com/csschecker.php?page=index.html&visual=iframe</li>
		</ul><br />
		CSS Scanner will look for and scan any embedded or external CSS files in your HTML code.
		  </p>";
	public $page_content = '';
	public $unused = array();
	public $multi_page;
	public $page;
	public $page_content_visual;
 
	function __construct($page){
		//$multi_css = explode(',', $css);
		if(empty($page)){
			echo "No page specified to scan" . $this->helptext;
			exit;
		}
 
		$this->multi_page = explode(',', $page);
		//$css_content = '';
 
		if(count($this->multi_page) > 1){
			$i = 0;
			$this->page_content = array();
			foreach ($this->multi_page as $page) {
			    $this->page_content[$i] = file_get_contents($page);
			    $i++;
			}
		}
		else{
			//$css_content .= file_get_contents($css);
			$this->page = $page;
			$this->page_content = file_get_contents($page);
		}
 
		if(is_array($this->page_content)){
			$i=0;
			foreach($this->page_content as $page_content){
				$this->page = $this->multi_page[$i];
				$this->page_content_visual = $page_content;
				$this->unused = $this->scan($page_content);
				$this->print_report();
				$i++;
			}
		}
		else{
			$this->page_content_visual = $this->page_content;
			$this->unused = $this->scan($this->page_content);
			$this->print_report();
		}
	}
 
	function scan($page_content){
		$i = 0;
		if(ereg("<style( *[\n]*.*)>\n*(.\n*)*<\/style>", $page_content)){
	        if(preg_match_all("/(@\s*import\s* (url((\"|')?)?((\"|')?)|(\"|'){1}).+(\"|')?\)?)/", $page_content, $ext_stylesheets)){
	            foreach($ext_stylesheets[0] as $stylesheet){
	                $css_content[$i] = preg_replace("/(@\s*import\s*)|(url\(?((\"|')?))|(\"|'){1}|\)?(\"|')?;|(\s)/", "", $stylesheet);
	                $i++;
	            }
	            $array = 1;
	        }
	        $inline_notused = $this->check_file($page_content, $page_content);
	    }
	    else die("No page styles, sorry!".$this->helptext);
 
	    $unused = array('internal' => array(), 'external' => array());
 
		if(isset($array) && $array == 1){
			foreach($css_content as $css_file){
				$css = file_get_contents($css_file);
				if(!empty($css)){
				    $not_used = $this->check_file($css, $page_content);
				    array_push($unused['external'], array('css_file' => $css_file, 'external' => $not_used));
				}
			}
		}
		if($inline_notused != false){
			$unused['internal'] = $inline_notused;
		}
		return $unused;
	}
 
	function print_report(){
		echo "<h1>Report for page: ".$this->page.'</h1>';
		foreach($this->unused['external'] as $unused){
			echo 'CSS entries not used from external CSS file '.$unused['css_file'].':<br />';
		    if(count($unused['external']) > 0){
		    foreach($unused['external'] as $entry){
		        echo $entry.'<br />';
		    }
		    }else echo 'None, good job!';
		    echo '<br /><br />';
		}
	    if(count($this->unused['internal'] > 0)){
		    echo 'CSS entries not used from internal CSS code block:<br />';
		    foreach($this->unused['internal'] as $entry){
		        echo $entry.'<br />';
		    }
		    echo '<br /><br />';
		}
		if(isset($_GET["visual"]) && $_GET['visual'] == 'iframe'){
		   echo "<hr><iframe src = \"$this->page\" width=\"100%\" height=\"100%\"></iframe>";
		}
		elseif(isset($_GET["visual"]) && $_GET['visual'] == 'inline'){
			echo "<hr>",
			    $this->page_content_visual;
		}
	}
 
	function check_file($css, $page_content){
		preg_match_all("/\.([a-zA-Z-_][a-zA-Z0-9-_]+)({|[\s].*{)/", $css, $css_classes);
		preg_match_all("/#([a-zA-Z-_][a-zA-Z0-9-_]+)({|[\s][^;]*{)/", $css, $css_ids );
		preg_match_all("/<[a-zA-z0-9][^>]*class\s*=\s*[\"'](.+?)[\"']/", $page_content, $page_classes);
		preg_match_all("/<[a-zA-z0-9][^>]*id\s*=\s*[\"'](.+?)[\"']/", $page_content, $page_ids);
 
		$clean_page_classes = array();
		$clean_page_ids = array();
		foreach($page_classes[1] as $s) {
		    $classes = explode(" ", $s);
		    foreach($classes as $class) {
		        array_push($clean_page_classes, $class);
		    }
		}
		foreach($page_ids[1] as $s) {
		    $ids = explode(" ", $s);
		    foreach($ids as $id) {
		        array_push($clean_page_ids, $id);
		    }
		}
 
		$not_used = array();
		foreach($css_classes[1] as $css){
		    if(!in_array($css, $clean_page_classes) && !in_array('.'.$css, $not_used)){
		        array_push($not_used, '.'.$css);
		    }
		}
		foreach($css_ids[1] as $css){
		    if(!in_array($css, $clean_page_ids) && !in_array('#'.$css, $not_used)){
		        array_push($not_used, '#'.$css);
		    }
		}
		return (count($not_used) > 0) ? $not_used : false;
	}
}
 
$scanner = new css_scanner($_GET['page']);
?>

Feel free to test it and suggest improvements.

USAGE: You can use this script in a couple of ways. In the querystring, you can do: http://www.yoursite.com/csschecker.php?page=url_to_page.html
The script will attempt to detect styles that are imported into your page. The script will use external css files included using

<style>@import "path to css file";</style>

or similar;

As I said, do not make this script public on your server. Use it as your own private tool. You have been warned!

This script is free. Use at your own risk.

---

GoSquared cannot be held responsible for any problems that may be caused through the usage of this script.

Comments (16) arrow

New[s] Feeds

We’re burning our feeds

Just a quick note - as part of the redesign, we've started using the newly acquired FeedBurner to host and monitor our RSS Feeds.

We also thought it would be a good idea to inform you guys and girls - our loyal feed reading fans.

No comment arrow

The new liquidicity

liquidicity reloaded

Here it is: the completely redesigned liquidicity.

You may be thinking "hey this is great - a new liquidicity", but what did the old one look like? Well, here's a little comparison for you:

liquidicity oldy - header

Above, you can see the fairly bland, pale looking design. Sure it was simple, but it didn't look that great, and some things were a little odd to use.

And here's the shiny new liquidicity:

liquidicity newby - header

Above is the lovely new theme. We went for a darker look to emphasize the difference between content and everything else. The sidebar has been cleaned up to the extreme with some sexy script.aculo.us effects to show our categories and archive lists without taking up tons of page space.

We also got rid of the dreaded of all dreaded design nightmares - Google Adsense. What more can we say other than Pheeeeeeeew.

It's also a lot easier to see and munch on our feed - bright orangey red - you can't miss it!

We didn't forget about the rest of the page, either - so we made a whole load of improvements to the bottom of the page, just look the difference:

liquidicity oldy - footer

Above, the old, boring, grey footer: nothing much really.

And our lovely new page footer:

liquidicity newby - footer

All the links you could need to the rest of the site, and a lovely little divider line. Rounds of the page nicely.

We hope you enjoy the design as much as we enjoyed... celebrating its completion.

* There's still a few little loose ends to tie up - especially working with that browser a few people use, what was it called again... Internet Explorer, or something.

Comments (5) arrow

Time for a Change

A new blend of liquidicity

We said we were going to be bringing you a few things you might like.

We hope you're going to like this one.

All will be revealed in the next few hours...

No comment arrow