quip iii: 5 Best Web Design References

1. Color Scheme Designer:

Provides a great way of putting together a color scheme quickly by letting you tweak colors so that they are properly complemented and generate a palette. It also provides many options for the color scheme, in case the single color default one bores you. Has a neat feature that allows you to export your colors into HTML and CSS immediately, or grab them as XML or text.

2. Kuler:

The Adobe-run Kuler is also a great resource for color schemes. Instead of forcing you to tweak your own, Adobe also provides the most popular color schemes in use so its easy for you to pick. However, it’s a giant pain to get the colors off of the site and more of a pain to tweak them.

3. Font Squirrel:

Every website needs an awesome font, whether for the heading, logo, or body. That font needs to be free for commercial use, if you plan to take your website anywhere.  Font Squirrel gives the user a collection of fonts they can use anywhere. It also provides the CSS to get the custom fonts onto your site if you need it.

4. CSS3.me:

For the past few years, CSS3 has been all the craze. But it’s still annoying because of its cross-compatibility issues between browsers. Have no fear: this website will get you all of the CSS3 goodness in the form of sliders and pickers, which is then converted into plain old CSS.

5. Favicon Generator:

See the icon next to the name of the website in your browser? Want your own? Favicon Generator will make one for you out of a standard picture file and will provide you with the CSS to get it into your website.

quip ii: Figuring out Typography for Your Web Site

For me, figuring out design is one of the most difficult things in making a website, and typography is in and of itself a giant pain… so I decided to give all the resources I use to figure out my typography!

1. Best Loved Fonts:

Showcases some of the best fonts on the web and explains the cases in which they should be used, as well as gives brief histories of the fonts themselves.

2. Fonts used in Logos of Popular Brands:

The title says it all. In case you’re trying to come up with your own idea for a logo, it’s not a bad idea to peek at (and steal) the fonts that major companies use.

3. A guide to Web Typography:

Talks about 5 basic topics in typography a web designer should understand: contrast, size, hierarchy, and space.

4. Web Typography Rules Every Designer Should Know:

Very similar to the above resource, except that it covers more information and uses very clear examples from sites to showcase its points.

5. Typechart:

A handy little chart that shows you common fonts to make it easier to decide which ones you actually want to use.

Extras: Typekit && Fontsquirell:
Two websites that let you acquire the fonts that you want. Typekit is paid while Fontsquirell is free.

quip i: retrieve webapp data with php

This is a small PHP tutorial to solve the problem of retrieving data from a web application.

Most web applications (think FB or Twitter) often use JSON (javascript object notation) in order to send data to the user. PHP happens to contain a great set of tools for decoding the JSON data that you receive from these sites: json_decode. However, retrieving the data from a remote url is the bigger problem in modern versions of PHP (think >4). The old fopen() approach no longer works on most servers due to security reasons, leaving cURL as the best option.

Following that logic, I’ve written a function that will retrieve data from a remote url using cURL and decodes it. *

function get_url_data($url) {

$ch = curl_init();

$timeout = 5;

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);

$data = curl_exec($ch);

curl_close($ch);

if ($data) {

return json_decode($data);

}

else {

return false;

}

}

Now, let’ retrieve the data using this function. In this case, I will be retrieving tweets for a specific screen name:

$screen_name = name /*some screen name here*/;

$url = “http://api.twitter.com/1/users/show.json?screen_name=$screen_name&callback=?”

// get the contents of the url

$data = get_url_data($url);

if($data) { // check if data was retrieved

// get the user image url
$picture = $data->profile_image_url;
// do something with the data here 

}

$data will return an object of class stdClass, which is the default class that PHP resorts to.

That’s it! Using this code, you will be able to extract data from most sites that use JSON.

*NOTE: clicking on individual links will take you to the PHP manual pages for the function.