PC Desk

Desk that also doubles as acomputer. Designed by Sung-kyu Nam.

Alright, it’s finally out. The famed 3.6 that will have a tremendous CSS3 support and all that other crap If you have it, check out my CSS3 tutorials  to see how it works on backgrounds, border and opacity, and other border properties.

I’m running Mozilla 3.6 right now, so let me tell you what I think about it:

The Good Stuff

• Themes have been eliminated and replaced with “personas” that do not require installation. Also, you can preview before committing to the change of design
• neater design: the top of the browser does not take as much space.
• download menu on bottom right. Click and you get a menu of all the items downloading/downloaded plus options
• better CSS3 support and other support
• considerably faster loading (idk how they do THAT)

All that sounds great but…that’s not the whole story.

The Bad Stuff

• Glitches, tons of them. I’m running a W7 Ultimate and I cannot open two windows simultaneously anymore
• Cannot open “Downloads” windows, actually any new window at all (not even java console, and other stuff like that)
• Downloads seem to freeze up and cease to work completely. I cannot even remove them from the drop down (“up?”) menu on the bottom right.
• While “personas” are great, I miss my transparent theme which doesn’t work anymore

That’s about it. It’s really damn annoying though. I hope they come up with a fix soon or I’ll have to start using Chrome more extensively. It might be a W7 64-bit thing, and even if it is, that’s a huge setback for the guys at Mozilla.

I hope you enjoy the new browser!

In my last tutorial, I’ve touched on how to use the to.ly API and how to make automatic “Tweet it” buttons with a relevant message.
Well, this can get problematic if with every page refresh, your server sends out a request to the to.ly server for a short link. Pretty soon, you’ll be getting “Too Many Connections” and you’re screwed. Just like I was, so here’s an idea. How about we store those links in a database….automatically?

You see, it’s much easier to create a script that will request a shortlink, adds the link to the database, and then just call it up whenever you need it. It works perfectly well on my quote site. Basically, whenever you create a website with get-requests, tons of pages, and all that. You can use the following script to make it all work, automatically (again).

• Bit.ly shortlink implementation
• Adding URL Links to a MySQL database

Bit.ly

Let’s get some bit.ly action going here. First, you need to create an account. Then you need to get the bit.ly API keyNext, let’s look at a neat script I found and made a few changes to so you could simply use include() and have a ready function with all the right variables:

// Variables
$bitlylogin = 'loginname';
$apikey = 'long series of numbers that make up your API key';

/* make a URL small */
function make_bitly_url($url,$login,$appkey,$format = 'xml',$version = '2.0.1')
{
 //create the URL
 $bitly = 'http://api.bit.ly/shorten?version='.$version.'&longUrl='.urlencode($url).'&login='.$login.'&apiKey='.$appkey.'&format='.$format;

 //get the url
 //could also use cURL here
 $response = file_get_contents($bitly);

 //parse depending on desired format
 if(strtolower($format) == 'json')
 {
 $json = @json_decode($response,true);
 return $json['results'][$url]['shortUrl'];
 }
 else //xml
 {
 $xml = simplexml_load_string($response);
 return 'http://bit.ly/'.$xml->results->nodeKeyVal->hash;
 }
}

I like to set my function up like this so that I can always interchange values, and so that I will automatically have the right values stored in those two variables above ($bitlylogin and $apikey). You don’t need to do that. You could simply change the function definition like to include defaults:

function make_bitly_url($url,$login = 'loginusername',$appkey = 'long api key',$format = 'xml',$version = '2.0.1')

Now as far as implementation of the script goes, it’s pretty simple:

$url = "Http://www.davepcguy.com";
$shorturl = make_bitly_url($url, $bitlylogin, $apikey);
echo $shorturl;

And you’ll get the short url echoed out. If you use the default value version you can simply do this:

$url = "http://www.davepcguy.com";
$shorturl = make_ibtly_url($url);
echo $shorturl;

You’re done. Easy enough, eh?

MySQL Database

Believe it, or not. It’s actually rather tricky to add a URL into a database. You have to select the correct format in the table, decode and encode stuff. It’s pretty messy and I have not found a good tutorial online on how to do this.
So here goes, let’s assume you use the method above to create short links. It’ll make life much easier, trust me.

First, let’s create a table in your database:

//login variables
$host = 'localhost';
$user = 'username';
$pass = 'password';
$db = 'sample database';

//connect
$connection = mysql_connect($host, $user, $pass) or die ('Unable to connect!');

//database select
mysql_select_db($db) or die ('Unable to select database!');

//the right query
$query = "CREATE TABLE sample_table
(
id int NOT NULL auto_increment primary key,
name varchar(50) NOT NULL,
email varchar(50) NOT NULL ,
message text NOT NULL,
url varchar(255) NOT NULL
)";

//executing query
$result = mysql_query($query) or die ('Error in Query');

Notice that I used a varchar(255) for the datatype. You could use varchar(55) or any other number. Every shortlink by bit.ly is 20 characters…max. The problem is when you add the information in your database so I recommend a good 255 characters.

Next, you have to make sure you know what you want out of the script. I made a script so that every time my website asked for a row of information, it would automatically add the URL (since I was a bit late with this idea, I had to find a way to add the information without having to recreate the whole database). Also, it’s a good practice to check if the data is present and in case it’s not, add it. Here’s what I did:

//connect

$name = 'sample name';

//query for a particular row with the name
$query = 'SELECT * FROM sample_table WHERE name = $name'';

    // execute query
    $result = mysql_query($query) or die ("Error in query: $query.".mysql_error());

//check if the url column has anything in it
if (empty($row[4])) {

//if it IS empty, let's make a shortlink
$url = make_bitly_url($permalink,$bitlylogin,$apikey,'xml');
//we have to encode the url. I'll explain that
$url = urlencode($url);
//make a query to update (don't forget the quotation marks!)
$query = 'UPDATE quotes SET url = "'.$url.'" WHERE name = '.$name.'';
//execute query
$urlresult = mysql_query($query) or die ("Error in query: $query. ".mysql_error());
//decode url for later use in the script
$url = urldecode($url);
}

//let's make an else statement in case the information IS present
else {
//let's decode that encoded url
$url = urldecode($row[4]);
}

Now you have the $url variable down! w00t. You can do a bunch of stuff with that. Like implement it in that twitter button I keep talking about. Check out my new site too to see it in action.

Oh about that encoding and decoding. If you try to submit the $url without encoding it, you’ll get an error because the characters “/” and “:” and some of the other ones have a special meaning in SQL. Here’s what the encoded and decoded versions look like:

normal: http://bit.ly/8oQBvB

encoded: http%3A%2F%2Fbit.ly%2F8oQBvB

decoded: http://bit.ly/8oQBvB

As you can see, the encoded version uses the “%” characters (ascii) for the coding.

Don’t forget to encode and decode then!

I hope you enjoyed my tutorial
Share and Enjoy:

]]> http://www.davepcguy.com/archive/bit-ly-api-and-adding-urls-to-your-mysql-database/feed/ 9 http://www.davepcguy.com/archive/css3-lesson-2-all-about-borders/ http://www.davepcguy.com/archive/css3-lesson-2-all-about-borders/#comments Thu, 03 Dec 2009 15:38:56 +0000 Admin http://www.davepcguy.com/?p=936

Okay, I’ve noticed some REALLY cool stuff on CSS3 online, so I thought to myself, how about I make my own experiment and teach you all about how to use this stuff?

Here are a couple of resources I’m using to learn about CSS3:

• CSS3 Info
• CSS3 Validator
• Intro to CSS3
• W3 Avenue
• Net Tuts Plus tutorial

I’ll start with the topic that everyone is concerned about. BORDERS! Okay, why are borders so important? Well, In the Web 2.0 design standard, it’s all about opacity, rounded corners, shadows, and everything else that’s just super awesome looking. I’ve already explained the rounded corners and opacity previously. So, I’ll skip that part. If you’re this far, you should probably learn the basics about CSS standards of borders and the markup.

Border Color

Okay, perhaps not necessarily “border color” but rather “border gradient” because that’s all border color is going to be used for in the future .
It’s currently supported solely by Mozilla Firefox, which is rather unfortunate for all you IE, Chrome, and Safari users.
What does it do? The property is “-moz-border-*side*-colors: value“, the sides are “top, bottom, left, right”. Well, the usual. The problem here is that you have to set up each side. There is no short hand as far as I’m aware (I’ve already tried a few variations but nothing worked).
Here’s what you have to do:

border: 4px solid;
	-moz-border-top-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-bottom-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-left-colors: #000099 #0033CC #0066CC #0099CC;
	-moz-border-right-colors: #000099 #0033CC #0066CC #0099CC;

You’ll have to set up the border separately, set the pixel size according to how thick you want the border to be. It’s usually safe to set the pixel width to the number of colors used. Four for each gradient color (#000099 through #0099CC). If you set the width of the border to be thicker than 4px, the last color in the set will be repeated (#0099CC).
If you view my example, you’ll notice how differently each border looks with different widths (3px 7px 10px and 4px in a clockwise manner starting with the top). If you can’t see it, here’s a screenshot:

Screenshot of CSS3 example

That’s it for the border-color

Border Image

Border image is another border property that shows a lot of promise. Basically, it’s a property that allows you to use custom specific images that will go around a specific area. Instead of just using lines (or gradients described above), we can insert images for the border. It’s a really tricky property and there is no real documentation anywhere that explains it thoroughly.
Here’s the property “-*browser*-border-image:” for *browser*, you’ll have to use both “webkit” and “moz”, and even “o” (for opera) and “khtml” (konqueror). “border-image” is a shortcut for “-*browser*-border-*side*-image-”, and *side* works the same way as before.
The second part of our little CSS3 definition is the “value” which is in this order: “url(image.png) slicewidth stretch”, you also have to use the “border-width” property.

#borderedcontent {
 border-width: 10px;
-webkit-border-image: url(border.png) 10 stretch;
-moz-border-image: url(border.png) 10 stretch;

}

Again, check out my example.

As far as I can tell, the whole art of doing this is slicing the images right. If you have an image that is 99×99 pixels, such as the one below:

Now, I used a 33 point cutting, so that every 33 points, the images get cut (in all different ways). Once that is done (creating 33 x 33 pixel squares), the second value defines what happens to that little squares. In this case, each square is actually a single dot. I used this image as the second example on my example page. I set the “stretch” property to “stretch round” which made the top and bottom “round” and the sides “stretch” (by sides, I mean the middle row of squares). I know this is pretty confusing and it is even for me, but soon enough, it’ll make sense to you.

The round property scales the “squares” or “slices” of the original image in a way to incorporate the squares in a repeating fashion but so that it only includes WHOLE slices and not parts.

The repeat property does just that, it repeats the element, unscaled and thus results in incomplete repetitions of some slices.

The stretch property does its usual business, it stretches each part to fill the whole area.

The border-width sets the width of the border and in the case of image-border, it helps scale the slices again to fulfill the whole width of the border. You can also set the width to auto which uses the original width of the image slices as width. I used the “auto width” property on my second example (creates a pretty funky image)

Like I said, the trickiest part of the whole process is creating the slices. Oh, and remember that if you want to create ONLY the border images, you’ll have to create a blank middle and slice that out too.

Refer to the W3 Documentation, which, unlike in other cases, actually provides a comprehensive overview of the property. Check out the different examples and see what you can find out.

There’s also another website that deals with slicing and other methods to use border-image here.

And I found a great example on how to use this property.

Here’s my last example:

go back  to my CSS3 testing page and you’ll see a third example on the bottom. Here, I used the “stretch” property in combination with the right slicing. Here’s how I sliced up the image:

sliced image

And it worked! Somewhat. My border had to be about 30 px which really distorted the image. Oh, also, the slicing length is measure from the edge toward the center. ie, 40px from the right etc. Again, here are the screenshots:

Border examples

Box Shadow

Box Shadow is the last border-like property. I guess we could classify it under backgrounds as well but I’m including it here anyways. The property is EXACTLY like the text-shadow property described in an earlier tutorial except now, it involves a whole area.

Let’s look at the property a bit closer:

h1 {

box-shadow: x-offset y-offset blur color;

}

h1 {
box-shadow: 2px 1px 3px #000;
}

Once again, you’ll have to add the “-*browser*-” part to the property again because it’s not a “standard” property yet. So again -moz-box-shadow and -webkit-box-shadow. In the example, you don’t necessarily have to include the color of the shadow, the default will be black.  If you look at my example, you’ll see that it’s a pretty nice property For all of you who can’t view it, here’s the screenshot (*note the original example uses a green shadow):

Box Shadow

One thing you can do in mozilla firefox, and nowhere else, is an inner shadow by adding inset to your property value:

div {
-moz-box-shadow: inset 1px 3px 2px;
}

That results in the second example on my example page.

Inner Box Shadow

Conclusion

CSS3 is still in works, and as you might have noticed, many of these properties require the “-*browser*-” add-on at the beginning. Once CSS3 becomes a standard, we’ll be able to use all of these freely. Also, I regret to inform you that IE does not have any quick work around yet but apparently the new IE9 should work with CSS3 properties…finally.

I hope you enjoyed my tutorial and I can’t wait to show you some more CSS3 stuff!

Ah, so google came out with yet another feature. Some time ago, I talked about the Google Social Search that was in its developmental stage. Well, Google just came out with its new Google Privacy Dashboard. It’s another step for Google to become more transparent and less, mischievous. Read about their Google Privacy effort, it looks like they’re really trying.

The Dashboard, supposedly, contains all the information that google has stored about you, including Google:

• blogger information
• contacts
• friend connect
• gmail
• IGoogle
• Reader
• Talk
• Voice
• Analytics
• Adsense
• Docs
• Calender
• your general Account info

Google Dashboard

And loads of other information. This is what my GMAIL statistics looked like (click to full view):

GMAIL

As you can see, it lists how many emails you received, how many in trash, how many you’ve sent, pretty standard info. It also allows you to jump into the Gmail settings on the right. For those of you that use Google Voice. You’ll get similar statistics:

Google Voice

If you’ve ever used your Google account to connect or access other websites, the permissions are also saved:

Google Account

Some of the feature don’t yet work for me, but that maybe because it has only just now launched. The Google Blog entry will explain the features in-depth.

Here’s the video explaining Google Dashboard:

If you have a google account, a youtube account, or a blogger account. Check out the dashboard and see what Google has to say about you.