Server Side Guy

CSS has continued to simplify common design operations and CSS3 doesn’t show any signs of that trend changing. Gradients, which have been around for awhile now have commonly replaced the old way of creating custom images for a couple quick css lines of code.

.orange-gradient
{
background: #f78d1d; /* initial background for default */
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /*Webkit Chrome/Safari etc.. */
background: -moz-linear-gradient(top,  #faa51a,  #f47a20); /*mozilla*/
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* IE */
}

This would make a great orange gradient for a background. Another great trick is to reverse the gradient on hover

.orange-gradient:hover
{
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Add this class to a button or link, add some padding and you have a quick and great-looking button.

There are a lot of sliders that can cycle through content that will work on the iPhone.  Many of these being powered by some kind of jQuery plugin.  However, I only found one that will actually include the functionality for the iPad to be able to use it’s swipe based interface. (click and drag to see more content)

Here is a link to the jQuery Simple iPhone-Slide plugin.  It has an excellent tutorial for such an awesome plugin.

http://jquery.hinablue.me/jqiphoneslide/

After including all the needed files, setting up the slider was as easy as the following function.  This is what I used for initialization:

$(document).ready(function() {
 
	$('#album').iphoneSlide({
		handler: "#slidePaging",
		pageHandler: ".slidePage",
		nextPageHandler : '.nextPage',
		prevPageHandler : '.prevPage',
		autoPlayTime: 9000,
		bounce: false,
                autoPlay: false,
		pager: {
	        pagerType: "dot",
	        selectorName: ".banner_pager",
	        childrenOnClass: "on",
	        slideToAnimated: true
	        },
		autoCreatePager: true,
                onShiftComplete: function(elem, page) {
                }
	});
});

jQuery can really add some great touches to a website and one that is easy to do is a slide-down form.

<div id ="login_container"> 
<a href="#" onClick="openForm()">Login</a>
<div id="login_form">
<form action="" method="post" name="form1">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="pword" /><br />
<input type="submit"  /><br />
</form>
</div>

Obviously we want to initially hide the form and display it on the “Login” link:

#login_container
{
    position:absolute;
    top:100px;
    left:300px;
}
#login_form
{
    display:none;
    background:#FFFFFF;
}

There is a very important part lying in that CSS and that is the container needs to be absolutely positioned. Otherwise it will push all other block elements down when the form flies open.

Finally, we need the jQuery to make it all happen

function openForm()
{
	 if ($("#login_form").is(":hidden")){
              $("#login_form").slideDown("slow");
	}
	else{
		$("#login_form").slideUp("slow");
	}
}

Now you have a great UI component that gives a user access to the login form at anytime but doesn’t clog up the design.

When coding for mobile developments in flex (Flash Builder), I had a hard time populating the dataGrid element because it doesn’t use arrayCollections like lists do.  The data source is actually bounded to the IList data type.  An example of setting it up is listed below.

<s:Application
    <fx:Script>
        import mx.collections.IList;
        [Bindable] public var dataGrid:IList = new ArrayList([
            {firstName: "John", lastName: "Doe", phone: "1231231234", email: "test@test.com"},
	    // ... whichever variable names in the DataGrid
        ]);
    </fx:Script>
    <s:DataGrid id="dataGrid" dataProvider="{dataGrid}" width="100%" height="100%">
        <s:columns>
            <s:ArrayList>
		<s:GridColumn dataField="firstName"/>
		<s:GridColumn dataField="lastName"/>
		<s:GridColumn dataField="phone"/>
		<s:GridColumn dataField="email"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
</s:Application>

This DataGrid example has a column per property( GridColumn) and dataField attribute is used to select the dataProvider object property to display in that column.  The dataProvider is  a list of the object properties that are defined in the dataGrid (firstname, lastname,phone, email) and their values for that row.

I’ve been having some fun doing the first few problems of Project Euler and figured I’d share my solution to problem 17 here.

The Problem
If the numbers 1 to 5 are written out in words: one, two, three, four, five, then there are 3 + 3 + 5 + 4 + 4 = 19 letters used in total.

If all the numbers from 1 to 1000 (one thousand) inclusive were written out in words, how many letters would be used?

NOTE: Do not count spaces or hyphens. For example, 342 (three hundred and forty-two) contains 23 letters and 115 (one hundred and fifteen) contains 20 letters. The use of “and” when writing out numbers is in compliance with British usage.

The Solution
The reason I love this solution is I found a PHP library that writes out these numbers for you. It comes from PECL 1.0 and is part of PHP 5.3 via that NumberFormatter class. This class did most of the work for me.

<?
$res = "";
 
$f = new NumberFormatter("en", NumberFormatter::SPELLOUT);
 
for($i = 1; $i format($i));
	if($i > 100 && $i % 100 != 0) {
		$res .= 'and';
	}
}
echo strlen($res)."\n";

My first submission was incorrect and I quickly figured out it was because the NumberFormatter class was missing the “and” after the hundreds. I simply added that at the end since we’re only looking for a count and came up with the correct result.

Installing the NumberFormatter class in Debian squeeze was pretty easy. I simply had to install the PHP5 international compatibility package: sudo apt-get instal php5-intl

PHP’s division operator returns a floating point result from the division operator unless both operands are integers and they are evenly divisible (the result is an integer). I was recently working on Project Euler Problem 13 and needed to do integer division, something I haven’t come across in PHP before.

Integer division in PHP is pretty straight forward. Casting the result as an integer will yield an integer. That is:

var_dump(25/7);         // float(3.5714285714286) 
var_dump((int) (25/7)); // int(3)
var_dump(round(25/7));  // float(4)

I’ve been having some fun doing the first few problems of Project Euler and figured I’d share my solution to problem 10 here.

The Problem
The sum of the primes below 10 is 2 + 3 + 5 + 7 = 17.
Find the sum of all the primes below two million.

The Solution
My solution is fairly simple, testing primality for all the numbers below 2,000,000. If prime, adding them to a running total.

/**
 * Calculate the sum of all the primes below two million. 
 **/
#include 
#include 
using namespace std;
 
bool isPrime(long num) {
	if(num<=1)
		return false;
	for(long i=2; i<=sqrt(num*1.0); i++)
	{
		if(num%i==0)
			return false;
	}
	return true;
}
 
int main () {
	long upperlimit = 2000000, sum = 0;
 
	for (long i = 2; i < upperlimit; i++) {
		if(isPrime(i)) {
			sum += i;
			cout << "Prime found: " << i << endl;
		}
	}
 
	cout << "The sum of primes below " << upperlimit << " is " << sum << endl;
 
	return (0);
}

The interesting part of this problem for me was I updated my primality test to include the fact that if a number n has a factor greater than sqrt(n) it must also have one less than sqrt(n), so we only have to test up to sqrt(n) in our primality test:

bool isPrime(long num) {
	if(num<=1)
		return false;
	for(long i=2; i<=sqrt(num*1.0); i++)
	{
		if(num%i==0)
			return false;
	}
	return true;
}

I’ve been having some fun doing the first few problems of Project Euler and figured I’d share my solution to problem 9 here.

The Problem
A Pythagorean triplet is a set of three natural numbers, a b c, for which,a^2 + b^2 = c^2
There exists exactly one Pythagorean triplet for which a + b + c = 1000. Find the product abc.

The Solution
This is pretty basic and inefficient, but I decided to loop through a and b, calculating c from the difference.

#include 
using namespace std;
 
int main () {
 
        for(int a = 1; a < 1000; a++) {
                for(int b = 1; b < 1000; b++) {
                        cout << "a: " << a << " b: " << b << " c: " << (1000 - a - b) << " a^2 + b^2: " << (a * a + b * b) << " c^2: " << (1000 - a - b) * (1000 - a - b) << endl;
                        if(a * a + b * b == (1000 - a - b) * (1000 - a - b)) {
                                return (0);
                        }
                }
        }
        return (0);
}

There you have it, the program stops at a^2 + b^2 = c^2 where c = (1000 – a – b). I then took a*b*c to get the answer.

If you have a relatively new installation of wordpress you will notice there are a bunch of meta tags in the source that are not that common to see. “Which ones do I need?” I thought. Well since I was using a wordpress page to run code that would generate dynamic content for multiple urls I knew I needed to get rid of the ones showing the actual page URL.

EditURI and Windows Live Writer

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://yoursite.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://yoursite.com/wp-includes/wlwmanifest.xml" />

EditURI will help client software discover your site. “wlwmanifest” sets up support for Windows Live Writer tagging. This maybe valuable to some of us and it didn’t really hurt my case so I left it. If you’d like to remove them, add these lines of code to your functions.php file in your theme:

remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'rsd_link');

index, prev, next

<link rel='index' title='indextitle' href='http://yoursite.com/' />
<link rel='prev' title='prev_page_title' href='http://yoursite.com/prev/' />
<link rel='next' title='next_page_title' href='http://yoursite.com/next/' />

These are here to help explain to search engines how your page hierarchy is displayed. If you are running a straight up blog like ServerSideGuy.com, then this will probably work. But it seems like it trips up on pages. You should have a good sitemap.xml file with good prioritization so I really didn’t see the value here. I left the index as that will always be the same.

remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

Note: Older wordpress versions use ‘adjacent_posts_rel_link’ as the action

Generator
This one I would recommend every wordpress user in removing. It’s there to tell search engines that this is a wordpress site. But this is only used in data gathering so WordPress can say they have X percent marketshare. Since it plainly displays the version of wordpress, I say it needs to go. You never know when the next exploit will be found and if its in the version you are using do you really want hackers to see that?

<meta name="generator" content="WordPress 3.2.1" />

Remove this with:

remove_action( 'wp_head', 'wp_generator');

Canonical URL tags help eliminate self-created duplicate content in the index, which is an important addition to good SEO practices.

In the newer version of wordpress (version 2.9+) they included and canonical URL function.  Since any good SEO plugin handles these links in a better format, you can just disable the auto generated one.  Adding the following anywhere in your theme’s functions.php will solve the problem splendidly:

# Remove canonical links function
remove_action('wp_head', 'rel_canonical');