Advanced CSS Design Resources - last-child.com » Yahoo!

Yahoo! to downgrade IE6 in 2011

Ted — Thu, 04 Nov 2010 15:28:55 +0000

Yahoo! introduced the Graded Browser Support grid years ago to give developers a guideline on what browsers deserved the greatest amount of resources for debugging, hacking, and development. This has been well received amongst the developer community as a justification for not dwelling on obscure browsers, such as IE5.5 for mac. This has made our code cleaner and easier to maintain as the browser-specific hacks are no longer needed.

Yahoo just announced the GBS change we’ve all been waiting for. IE6 will be downgraded to a C-status browser in Q1, 2011. This means I can finally upgrade my own laptop to IE8! This means we can focus on building for the future and not the past. Excuse me as I hyperventilate over the joy.

Internet Explorer 6: We are forecasting the transition of Internet Explorer 6 from A-grade to C-grade in the next GBS update. The calculus here is simple: The proliferation of devices and browsers on the leading edge (including mobile) requires an increase in testing and attention. That testing and attention should come from shifting resources away from the trailing edge. By moving IE6 to the C-grade, we ensure a consistent baseline experience for those users while freeing up cycles to invest in richer experiences for millions of users coming to the internet today on modern, capable browsers. Note: This forecast should not be taken as an indication that IE6 users will see an abrupt change in their experience of Yahoo! websites in Q1 2011; the change in philosophy toward IE6 will be reflected in new development and products and applied in ways that make sense based on product needs.
Graded Browser Support Update: Q4 2010 – Eric Miraglia and Matt Sweeney, Yahoo! Developer Network

Best Practices for Creating JavaScript

Ted — Sun, 03 Oct 2010 22:02:47 +0000

I’m on a mission to relearn JavaScript. My limited skills are from trying to shoehorn scripts into pages without completely understanding the theory. Christian Heilmann, a developer evangelist for Yahoo!, is a great resource for not only learning how to code but also why you should use method A over B.

This presentation by Christian sheds a lot of light on how to create re-usable, maintainable scripts.

Maintainable Javascript carsonified

View more presentations from Christian Heilmann.

YUI 3.0 Gallery now includes modernizr functionality

Ted — Tue, 25 May 2010 22:51:14 +0000

Are you working on an HTML5 project and using the latest YUI library from Yahoo? If so, you’ll be happy to know that you can use the modernizr functionality within the YUI3 code.

This extension was added to the YUI Gallery by Pradhap Natarajan: Modernizr (gallery-modernizr).

This is a wrapper for Modernizr library that is used to detect support for many HTML5 & CSS3 features on a browser. More documentation here – http://www.modernizr.com/docs/ Please note that the module does not add the Modernizr object to the global namespace. Instead it will be local to the YUI instance.

Modernizr YUI Library

Modernizr was created to make HTML5 development consistent. It gives hooks for JS and CSS to support the advanced features.

Looking for an Action Script 3 programmer

Ted — Mon, 14 Sep 2009 16:12:54 +0000

We’re looking for a great Flash programmer to join our team at Yahoo! If you are interested and ready to join a great team on an important project send your resume to Ted Drake.

New Yahoo! BOSS Hacks web site

Ted — Sat, 02 May 2009 17:00:31 +0000

There’s a lot of information about Yahoo! Boss on the official site: Yahoo! Developer Network. However there is still a need for a more informal portal for quick reviews of BOSS-based mashups, helpful hints, techniques, and upcoming events.

BOSS Hacks is an unofficial Yahoo! BOSS Site that does exactly that. I started it last week as I noticed this site was becoming less about standards based markup and more about how I was working with Yahoo! BOSS.

This site will feature shorter, more succinct blog posts. I’ll save any large posts for the YDN blog. Please feel free to visit the site and send me notes about what you would like to see or any new BOSS-based sites that should be mentioned.

Yahoo BOSS’ Growth (khaitan.org)
Duck Duck Go: Silly Name, Interesting Search Engine (readwriteweb.com)
Yahoo BOSS Adds Support for Delicious (programmableweb.com)
Yahoo adds Delicious data to search partnership (news.cnet.com)

How easy is it to build a search engine with Yahoo! Boss?

Ted — Sat, 31 Jan 2009 20:25:56 +0000

Even I can do it! Check out the video, I look much less repulsive than I expected

Yahoo! Boss now features keywords and more language support

Ted — Wed, 19 Nov 2008 07:33:32 +0000

The Yahoo! Developer Network blog just published a blog post with new Boss features: Yahoo! Search BOSS Releases Key Terms. There are a few key details in this article.

Key terms are now available: Each result now includes the keyterms Yahoo’s search index has assigned to the web page. This is the same information Yahoo! uses for search suggestions. I was trying to recreate this by using key term extraction in Yahoo! Pipes. But this would have involved multiple requests and slowed the page down. Boss’s inclusion of keyterms opens a whole new world of semantic search options. I’m using them to display related results on V3GGIE.
Extended language/region support: I was in Romania a couple weeks ago discussing Yahoo! Boss with some students in Bucharest. I noticed we didn’t support the Romanian language in Boss. I was able to send a few emails asking for support and voila, the Yahoo! Boss has not only added Romanian, but also Turkish and Hebrew! That is some fast turn around and shows their commitment to the users.
Boss made easier: Christian Heilmann has been creating Boss plug-n-play projects. You can get a JavaScript Boss badge, grab all the keyterms in one arrray, and recently a build your own site search in 3 easy steps lesson.
The article also has a link to a new site I’m developing: Tartin3. This is still in the development stages and is a prototype for a much larger site InsiderFood.com. ~~I’m hoping to take the covers off Insider Food within the next couple weeks.~~Insider Food is now Live – but in Beta mode as I fix bugs and make enhance the search logic

Disclaimer: I work for Yahoo! but I’m not on the Yahoo! Boss team. I’m their “customer”, as I use Boss for multiple projects outside Yahoo!. I also am a member of the International Yahoo! Developer Network, which allows me to demonstrate and teach some of the Yahoo! API’s and services.

Make a niche search engine with Yahoo! BOSS

Ted — Mon, 03 Nov 2008 12:05:26 +0000

The Yahoo! Developer Network blog just published an article I wrote about Yahoo! BOSS. It discusses how to use the search filters and query attributes with the BOSS API.

I’ve used these methods on V3GGIE.com, a vegetarian search engine and will be launching a new niche search engine in the next few weeks.

Update

I’ve just taken the covers off my latest search engine project. Insider Food is a regional search engine powered by local bloggers, chefs, and restaurant fanatics.

It’s a wee bit slow right now due to a multitude of API requests to Yahoo! Boss, Yahoo! Pipes, Flickr, Amazon, and more. Look for some upcoming posts about the construction of the site. Hopefully I can even describe caching and threading. Once somebody teaches me .

CSS3 Attribute Selector Presentation

Ted — Thu, 09 Oct 2008 20:46:11 +0000

During the fog of a summer cold and pressing deadlines… I gave a presentation today at the Yahoo! Front End Engineering Summit about CSS3 Attribute Selectors. The presentation briefly touched on some of my previous posts on this site as well as a few new concepts and ideas.

Here is the full presentation (HTML): CSS3 Attribute Lovin’. Feel free to copy, share, or do whatever you like with it.

I’ll post some more information on the new topics soon. Right now I’ve got to get back to my massive list of outstanding bugs on my project.

Add Pagination to your Yahoo! BOSS search engine

Ted — Fri, 12 Sep 2008 15:07:52 +0000

Yahoo’s BOSS search API makes it easy for you to create a customized search engine. Yahoo! also has a Design Pattern lLibrary to save time designing your pages. They’ve put a lot of effort into creating the best user experience for search pagination.

Pagination guidelines

Here’s a sample of the Design Library’s ideas for search pagination.

Display the navigation controls as a row of links.

Present links in the following order: ‘Prev’, page links, ‘Next’.

Display a left arrow after the label ‘Prev’.

Display a right arrow before the label ‘Next’.

Make the arrow(s) clickable.

The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.

When on pages 1-6, the page links should always start at ’1′.

Search Pagination

The rationale for these rules is also interesting:

Displaying arrow graphics helps differentiate the links and provides larger click targets.

Disabled controls add little value in this context since

These links often appear blow the fold.

The first page of results makes up the vast majority of pageviews. Displaying a disabled “previous” control on all of these is of little added value.

Although a “First” link has value, it competes with the functionality presented in the random-access links.

The “Last” link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.

Add this pagination style to your search engine

See the final result on V3GGIE.com: Vegetarian Enchiladas Recipes

Most PHP pagination tutorials assume you are pulling content from a database. Ascanio Colonna created a good tutorial on building pagination with PHP that is agnostic to the data source. I’ve taken his code and modified it to match the Yahoo Design Pattern. I’ve also added the suggested YUI Module markup to stay consistent with the YUI Grids and any future YUI javascript.

The pagination.php file includes a function that creates the module. You’ll need to call this function from your results page with a series of parameters. These are easy to populate from the BOSS interface. It’s worth noting that I am ignoring the BOSS next/last page nodes in the web service and prefer to build my own urls.

The Pagination Code

Lets’ start by looking at the code inside your results.php file. This will call the pagination function and pass the desired parameters.

if(!empty($searchQuery)) { require '/include/pagination.php'; if(isset($_REQUEST['page'])) { $page = $_REQUEST['page']; } else { $page = '1'; } $limit = $count; $targetpage = 'results.php'; $pagestring = '?page='; $summary_name = 'articles'; $placement = 'summary'; // start pagination echo getPaginationString($page, $totalhits, $limit, $targetpage, $pagestring, $summary_name, $placement); }

Here’s what you are working with:

require ‘/include/pagination.php’: Where does the pagination file sit on your server
$page logic: First look to see if there is page=x in the url. If so, $page = x, if not, you are on page 1.
$limit: How many results will appear on the page
$targetpage: what is the name of your results page? index.php, results.php?
$pagestring: I tried to minimize this to ?p= but couldn’t track down why it didn’t work. I’ve left it at the default ?page=…
$summary_name: This is what appears in the text “xxx (summary_name) results. This is not used in the Yahoo Design Library
$placement: You’ll probably want to use summary. This function also allows “footer” for a simplified output
echo getPaginationString(…): Send the information to the function and display the results in the page.

Important Update!

The original code I posted had a serious security flaw. You should never output user’s input directly into your page. I had something like this href=”?query=$_REQUEST['query']“. This allows all sorts of Cross Site Scripting attacks. You must urlencode any text that comes from a user. This is safe: urlencode($_REQUEST['query']).

I apologize if anyone has used this code, as I wrote it on their site. They should immediately update the logic. -Ted

The pagination function

I have streamlined the original code from Asconio, as he was tying into pre-existing facebook styles. This code is for your unique web site. It’s also worth noting I use rewrite rules to make my search result page urls more friendly, i.e. /corn.html instead of /result.php?q=corn

//text strings in strings.php


function getPaginationString($page = 1, $totalitems, $limit = 15, $targetpage = '/', $pagestring = '?page=', $summary_name = 'items', $placement = 'summary',$safeQuery)

{
$countnum = '15';
	// inurl or intitle

	// it should only be three digits long, int, inu, or nox anything else could be a vulnerability

	//int=intitle, inu=inurl, nox=no setting

	if (isset($_REQUEST['inx']) && strlen($_REQUEST['inx']) == 3){

	$inxv = $_REQUEST['inx'];

	}

	else {

	$inxv = '';

	}
	// type of query

	// request type should only be 2 chars, if not we are dealing with an xss attack

	// type options: rc, lo, ve... these represent recipes, local, buzz for insider sites.

	if (!empty($_REQUEST['t']) && strlen($_REQUEST['t']) <= 2) {

		$tid = $_REQUEST['t'];

	}

	else{

	$tid = 've';}

// count should only be a number. don't allow text for xss protection

if (!empty($_REQUEST['count'])) {

	$countnum = number($_REQUEST['count']);

	$limit = $countnum;

}

	// DEFAULTS

	$adjacents = 10;

	//$targetpage = .'.html';

	// VARS

	if(substr($pagestring, 0, 1) != '?') $pagestring = '?' . $pagestring; // If query string is lacking start, add it

	if(substr($pagestring, strlen($pagestring) - 5) != 'page=') $pagestring .= '&page='; // If query string is lacking page var, add it

	$prev = $page - 1;

	$next = $page + 1;

	$firstpage = 1;

	$lastpage = ceil($totalitems / $limit);

	$fiop = ($limit * $page) - $limit + 1; //# of first item displayed in current page

	$liop = min($limit * $page, $totalitems); //# of last item displayed in current page

	$searchstring = "&t=$tid&inx=$inxv";

	$nicetotal = number_format($totalitems);
	/*

		DRAW PAGINATOR

	*/
	// Give it the right class (the footer paginator has no summary and the current page has a different gfx)

	if($placement == 'summary')

		$type = 'summary';

	else

		$type = 'footer';
	// Draw summary

	if($placement == 'summary')

		$pagination .= "

$string_results_page

";
	if($lastpage > 1) // Paginator page selection is drawn only if more than 1 pages are there

	{	
		$pagination .= '

';
		// First page selector

		if ($page > 2) 
		// Previous page selector

		if ($page > 1)

			$pagination .= "
$string_next
";	
		// Page selectors

		if ($page < 4)	//not enough pages to bother

		{

			for ($counter = 1; $counter <= min(5, $lastpage); $counter++)

			{

				if ($counter == $page)

					$pagination .= "
$counter
";

				else

					$pagination .= "
$counter
";

			}

		}

		elseif ($page > $lastpage - 3)

		{

			for($counter = $lastpage - min(5, $lastpage); $counter <= $lastpage; $counter++)

			{

				if ($counter == $page)

					$pagination .= "
$counter
";

				else

					$pagination .= "
$counter
";

			}

		}

		else

		{

			for($counter = $page - 2; $counter <= $page + 2; $counter++)

			{

				if ($counter == $page)

					$pagination .= "
$counter
";

				else

					$pagination .= "
$counter
";

			}

		}
		//next button

		if ($page < $lastpage)

			$pagination .= "
$string_next
";
		//last button

		if ($page < $lastpage - 1) 
		$pagination .= '

';

	}
	$pagination = "
$pagination
";
	return $pagination;
} ?>

//This allows user to easily try the search with different options
// strings are translated defined in separate file for localization

//$string_try_diff_type   = "Try a different type of search";

//$string_try_diff_header = "Didn't find what you were looking for?";

//$string_try_inx         = "Try searching for $safeQuery only in page titles";
function trySomethingelse($safeQuery, $searchQuery, $inx, $tid,$string_try_diff_header, $string_try_diff_type, $string_try_inx, $string_buzz_tab, $string_local_tab,$string_recipes_tab){

if($inx==''){

$tryinx = "
$string_try_inx";

}

$trydiff='';

switch ($tid){

case "rc":

$trydiff = "
$string_try_diff_type $string_local_tab or

$string_buzz_tab";

break;

case "lo":

$trydiff = "
$string_try_diff_type $string_recipes_tab or

$string_buzz_tab";

break;

default:

$trydiff = "

$string_try_diff_type $string_recipes_tab or

$string_local_tab";

}
?>





print 	$tryinx;

print  	$trydiff;

?>




}

?>

I’ve added a few classes to the final output. The previous and next links have class”nextlink” or class=”prevlink”. The current page has the number within a strong tag with class=”current”. Finally, the parent module has class=”pagelinks mod”. This makes it pretty simple to style

Pagination CSS

I’m using the YUI Sam Skin sprite for the tabbed search box. I’ve added a couple arrows to this sprite for my search pagination.

.pagelinks { text-align:center; border:1px solid #ccc; padding:5px 0 0 0; } .pagelinks ul li { display:inline; } .pagelinks ul a, .pagelinks ul strong { display;block; padding:3px 5px; } .pagelinks ul strong { background-color:green; color:#fff; } .pagelinks li.nextlink a,.pagelinks li.prevlink a { padding-right:15px; font-size:120%; font-wieght:bold; background:url(/images/sprite.png) no-repeat 100% -1943px; } .pagelinks li.prevlink a { padding-right:0px; padding-left:15px; background-position:0 -1973px; }

I am also not a PHP expert and welcome suggestions on improving the code.

Download files

Pagination functionality for a BOSS site (.txt) – the php code and sample to insert the pagination.

Pagination CSS

Download files

Related articles by Zemanta

Advanced CSS Design Resources - last-child.com » Yahoo!

Yahoo! to downgrade IE6 in 2011

Best Practices for Creating JavaScript

YUI 3.0 Gallery now includes modernizr functionality

Related articles by Zemanta

Looking for an Action Script 3 programmer

New Yahoo! BOSS Hacks web site

How easy is it to build a search engine with Yahoo! Boss?

Yahoo! Boss now features keywords and more language support

Related articles by Zemanta

Make a niche search engine with Yahoo! BOSS

Update

Related articles by Zemanta

CSS3 Attribute Selector Presentation

Add Pagination to your Yahoo! BOSS search engine

Pagination guidelines

Add this pagination style to your search engine

The Pagination Code

Here’s what you are working with:

Important Update!

The pagination function

$string_results_page