Here is a very useful simple snippet that saves a lot of coding time.
Picture a feedback form with 3 fields: name, email and feedback. When handling the form results, you’d want to do something like this;

$name = $_POST['name'];
$email = $_POST['email'];
$feedback = $_POST['feedback'];

and then use the declared variables in whatever way you want to – send to an email, put in a db or both. (By the way, please note that that is as basic as it is. Of course you will want to validate the values and probably escape or so).

Now what if you have up to 50 fields in your form? You will auto-declare them one by one like the above? Nah. A way to auto-declare the variables based on their respective key in the $_POST (or $_GET or any super global array) is this:

foreach ($_POST as $k => $v) {
	$$k = $v;
}

Notice the line <b>$$k = $v</b>? It is called variable variables. It enables setting and using variable names dynamically.

Now, one important note! If you have ‘register_globals’ turned on in your PHP configuration, PHP will automatically declare superglobal variables for you so no need of the snippet above. It is however recommended that ‘register_globals’ is turned off for security reasons. With register_globals on, hackers can easily bypass parts of your script that rely on variable conditional statements by injecting the URL. Even the script above should be used to auto-declare only necessary superglobals like GET and POST and not COOKIES and SESSIONS. And when used, the variable values should still be validated for inappropriate data.

During the redesign of the ngBot blog, we figured it’d be nice dedicating a part of the sidebar to some of ngBot updates on twitter. This is a common trend with blogs and sure should be a piece of cake.

Instead of re-inventing the wheel, I tried looking out for ready made scripts that perform similar functions – that is; pull out a user’s updates on twitter and integrate it in the blog.

I sure came across a couple like Twitterzoid and Twitter js. But very much like me, I wasn’t contented with them as most of them were too complicating. Or maybe just the normal me – always wanting to try out things my own way. And so, I decided to write my own script.

Attached is what I came up with in less than a hundred lines of code. Called “mytimeline.php” (Download this file [3.20kb] ), the script simply pulls a user’s latest updates (up to 20) from twitter. Below is a simple usage example as used on the ngBot blog;

<strong>Twitter stream (<a href="http://twitter.com/ngbot">@ngbot</a>)</strong>

<ul class="sidecat">
    <?php
    // The class accepts the username and number of wanted updates (up to 20)
    $timeline = new myTimeline('ngbot', 3);
    foreach($timeline->get() as $v)
    {
        list($tweet, $date, $link) = $v;
        ?>
        <li>
           <p><?= $tweet; ?> <span class="fade">&mdash; <a href="<?= $link; ?>"><?= $date; ?></a></span></p>
        </li>         <?php
    }
    ?>
    <li class="last">
        <p><a href="http://twitter.com/ngbot">More on Twitter &rarr;</a></p>
    </li>
</ul>

Final words:

Feel free to download, tweak and play around with it in whatever way you want. And don’t forget to hit me up in case you have any difficulties.

By the way, you may want to cache updates so that the script doesn’t connect to twitter on every visit to your site. Here is how we do it, using PEAR’s cache lite:

<?php
  // Pretend there are updates from twitter
$updates = true;
$cache = new Cache_Lite_Output(array(
    'cacheDir' => 'path/to/cache/directory/',
    'lifeTime' => 3600 * 3 // Cache for 3 hours
));

if(!($cache->start('tweets'))):
    // No update yet.
    $updates = false;
    $timeline = new myTimeline('ngbot', 3);
    foreach($timeline->get() as $v)
    {
        $updates = true;
        list($tweet, $date, $link) = $v;
        ?>
        <li>
            <p><?= $tweet; ?> <span class="fade">&mdash; <a href="<?= $link; ?>"><?= $date; ?></a></span></p>
        </li>
        <?php
    }
$cache->end();
endif;
// If no updates from twitter, dont cache
if(!$updates)    $cache->remove('tweets');
?>

File(s) used in this article:

mytimeline.php (size: 3.20kb)

Update

The script has been pushed to Google Code here: http://mytimeline.googlecode.com

One of the challenges web designers and developers face is preventing forms from automated programs that disguise as humans and fill forms (call them bots). And needless to say, this bots can really be a nuisance – posting bad content, stealing data and doing all kind of weird stuffs. And so there was Captcha – a test to verify human response and prevent such bots.

But then, personally I don’t like Captchas. Ok, I love reCaptcha, but just as an idea for digitalizing books; nothing more. Since I’m not a big fan then, I figured someone somewhere may as well not be, so I decide to go the way of a different technique for validating my forms. I call it the blank method. (No, that’s not an ‘official’ name :P)

To start with, the technique is not my idea. Actually, an attribution to the owner should come somewhere here but I just can’t remember where I came across it as its really been long. That said, also note that the technique is not 100% fool proof. While it may save your form from bots, it won’t save you from real human spammers that are around to purposely junk up your site and be a nuisance.

So what is it all about? The technique is based on the fact that bots can’t see. A text input field is created somewhere in the form and labelled “Don’t fill” or “Leave Blank” or anything to tell the user to leave the input box empty. The human user filling the form will do just this  i.e.  ignore the field but a bot will fill in something there. During validation, the field can then be checked for content. If there exist a content for it, it sure is a bot (or probably a stubborn human).

Here is an overview of what it looks like:

[The html code]

<form method="post" action="submitpage.php">
    <label>Name</label> <input type="text" name="name" />    
    <label>Email</label> <input type="text" name="email" />
    <label>Leave Blank</label> <input type="text" name="foo" />
    <input type="submit" name="submit" value="Submit" />
</form>

[The server-side validation (I use PHP)]

<?php
$foo = trim($_POST['foo']);
if(empty($foo))
{
  //ok, didnt fill anything in the field
  //most def a human
}
else
{
  //filled in something
  //bot! Kick out!
}
?>

And that’s all.

Let’s tweak things a little bit to make the form more beautiful. But not just only beautiful. What about we hide the ‘Leave Blank’ field with CSS so that normally users wont even see or notice it (and consequently won’t fill it)? Bots on the other hand will still ‘see’ it and fill it.

[The CSS]

/*resets*/
.nodisplay {
    display:none
} 

/*form*/
form label {
    float:left;
    text-align:right;
    padding-right:10px;
    width:100px
}

form input.txt {
    width:150px;
    padding:3px;
    border:1px solid #ACA899
}

form input.txt:hover, form input.txt:focus {
    border:1px solid #102336;
}

[The new html]

<form method="post" action="submitpage.php">
    <p><label>Name</label> <input type="text" name="name" class="txt" /></p>
    <p><label>Email</label> <input type="text" name="email" class="txt" /></p>
    <p class="nodisplay"><label>Leave Blank</label> <input type="text" name="foo" /></p>
    <p><label>&nbsp;</label><input type="submit" name="submit" value="Submit" /></p>
</form>

Or should i say; What Nigerian Sites are out there? Over the past few days, I’ve been trying to find Nigerian web destinations. I was surprised to find a couple that i didn’t know about (and some sites that weren’t green). If you know other sites that weren’t mentioned, let us know in the comments & they’ll surely be featured.

Some criteria  that we considered include; site visits, good design, quality content, potential and so on.

This is NOT a design post. As more sites suggestions come up, I’ll keep updating them (or start a showcase series). This post does NOT include personal blogs. The sites are listed in no particular order.

www.nairaland.com

Nairaland in one word: “Nigeria”. This forum is like the on-line version of the country… With topics ranging from Programming, Graphics & Video, literature, Career, Money to Religion, Music & Video… In fact, everything.

www.sturvs.com

Sturvs is a Nigerian web 2.0 social bookmarking website where users can share music, videos, articles and also promote events and services. Users can also vote content. The sites also has great content. Check it out.

www.naijapals.com

Naijapals is a social network where members can watch Nigerian movies, Listen to music,  discuss issues & make new friends.

www.naijaborn.com

[

Naijaborn is a social networking site where users can share/listen to music, share news items, meet & network with new friends. It is the place to find Nigerians and their creations. Despite it’s fast-growing user base, it’s still in it’s beta stage & has a lot of potentials for the future.

www.riranwo.com

RiRanWo! is a social utility that helps you to share bookmarks, articles, music, videos and more. It’s a really easy way to share, discover, talk about, and organize great bookmarks, notes, music, videos, photos and more.

www.notjustok.com

NotJustOk is all about entertainment. Music, Videos, Celebrity interviews, exclusives etc. If you love entertainment, then check it out.

…

mobile.ngbot.com

Ngbot  mobile is Nigeria’s mobile community. Though still in its beta stage, this fast-growing site offers free mobile downloads (ringtones, wallpapers, games, applications etc.) tools, tips & tricks, hacks, SMS. The sites also features a forum where members can share ideas.

www.mammaput.com

Though not officially launched, Mammaput is an application that indexes Nigerian eateries all over (and outside) the country. Users will be able to rate and comment on entries. A comprehensive set of APIs will be available for developers to build ‘location-aware’ mobile applications around available data.

www.mobilitynigeria.com

MobilityNigeria is all about everything mobile in Nigeria. Latest mobile news, mobile reviews, etc. The site also features a market place where you can buy phones. If you love mobile phone & mobility in general, you should add this site to your bookmarks.

www.naijalingo.com

Naija Lingo is an online Dictionary for all your Nigerian pidgin/broken English needs. It is a dictionary for people who want definitions to Nigerian words or slang, names and phrases and created by the people (you) who know them. Naija Lingo is an open dictionary where you the user are free to add and edit words as time changes, and as the meaning of words evolve and new words are formed.

www.naijapulse.com

NaijaPulse is a micro-blogging service that lets you post text updates (140 characters) about yourself and what is happening around you. The site is based on Laconi.ca open source platform. It is also helpful that you cross post to Twitter and Facebook.

www.ticabo.com

Ticabo is a blog that delves into search engine optimization (SEO) techniques, web design and development strategies.

www.werunthings.com

In their own words, Werunthings is dedicated entirely to celebrating, showcasing and trumpeting exceptional Nigerian creative people, lifestyles and culture alongside their international peers. You can get, exclusive music, celebrity interviews, juicy photos, downloads, New music videos & Celebrity gossip.

Final words:

This is probably just the first post of a series to come. I know there are a lot of Nigerian websites not featured here. I’ll keep surfing & updating for more sites. Hope you added them to your bookmarks?

If i wasn’t a web designer, i would probably be using Google chrome as my default browser. But my browser of choice any day is Firefox.  This is because of the wide range of add-ons available to extend the browser’s features.

In this post, I’ll show you a few add-ons that will make your design/development more productive.

Firebug

There is a reason why i put this first; It’s a must-have! Download it here

MeasureIt

MeasureIt is simply a ruler for Firefox. Use it to get the dimensions (width & height) of elements on the webpage.  Get it here

FireFTP

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. It’s like FileZilla. Download it here

Clear Cache Button

Adds a clear cache toolbar button. After installing the extension, find the clear cache button in the toolbar customization panel. Download it here

Web-developer toolbar

Adds a menu and a toolbar with various web developer tools. Download it here

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. Download it here

ColorZilla

Advanced Eyedropper, Color Picker, Page Zoomer and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Download it here

CodeBurner (Firebug)

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. Download it here

Extended Status bar

This add-on adds speed, percentage, time and loaded size (similar to Opera’s status bar) to Firefox’s status bar. Download it here

Dust-me Selectors

This add-on help you find unused CSS selectors from your style sheet. Get it here

Mozilla Archive Format

[screenshot here]

This add-on allows Firefox save & open .mht (internet explorer) archive format. Get it here

ShowIP

ShowIP shows the IP address of a website in the status bar. Get it here

If you have any other add-ons that has greatly increased your productivity, please share it in the comments.

A free icon set of  10 simple icons designed with photoshop/illustrator. They are available in 64×64px, 128×128px and 256×256px resolutions (Transparent PNG). You can use them for personal or commercial purposes. If you use them, please don’t forget to link back to this site ;) Enjoy!

Download it here [free] (size: 486kb, format: zip)

In this piece, we will focus more on scalability – which I simply define as the ability of a server to efficiently adapt to more load. It is more complex as that sounds and to know more, you can check out scalability @ wikipedia.

As a server administrator, optimizing your site and server for scalability is a task you will face occasionally, if nor more often than that. At first, with just a couple of site visitors and members, all may seem well. But as users and visits grow, you will start finding the need.

There are two types of scalability actually – scaling out which is about adding more system nodes, like buying more servers and scaling up which is about effectively maximizing the potential of what you have on ground already. Scaling up is cheaper than scaling out, in fact, in some instance doesn’t even cost any dime – and this is what we are looking at here. Besides, if you start with scaling out, without scaling up, there is the every posiblity you will continue scaling out as just a little wrong thing with your app or server configuration may be causing excessive load and weighing down the server – a problem scaling out won’t solve. Scaling up on the other hand will let you detect such. After properly scaling up, you can then scale out.

So the big question – how do you scale up? And to that is a lot of answers. Yah, there are many ways to optimize your app/server – every single way you think can save the server memory and number of processes. Some of this include caching, code optimization, profiling and even good configuration of your server and database engine. Caching alone as a big parent, has a lot of children – setting proxy servers, database caching to mention just two.

In the last piece I mentioned CDN (Content Delivery Network), and even this is a great scalability technique. I guess I do not need to recap the advantages here but having your static files served from a different server entirely saves your deployment server (your app server) more memory and processes, leaving it to take care of more important files (dynamic content for example). Mind you, your static files include your CSS, javascript, images, flash and co. At ngbot (mobile, ads, answers) though, we don’t store our CSS, JS and all images in our CDN but there is a simple caching technique we use to reduce the effect of serving it from the deployment server, which I will talk about in a gifi.

Continuing from where I stopped on CDN in the last piece, how do you get content in and out of the CDN? It is simple – APIs. CDNs provide APIs you can interface directly from your application. Most providers even offer code libraries in different programming language to help out. Rackspace (which we use) for example has a great php class implementing the api. It is simple. You simply authenticate with some already provided details and you are good to go.

Below is an example code excerpt

include 'cloud/cloudfiles.php';
# Authenticate. CLOUDUSER and CLOUDAPI predefined with define()
$auth = new CF_Authentication(CLOUDUSER, CLOUDAPI);
$auth->ssl_use_cabundle();
$auth->authenticate();
# Get Container obj
$conn = new CF_Connection($auth);
# Get container named 'static'. NB: container = folder
$container = $conn->get_container('static');
# Public?
if(!$container->is_public())
{
	# make public and cache content for a day
	echo $container->make_public(86400).' : '.$v.'
';
}

Note the cache part where you can set the content to be cached on the user’s system for a number of seconds (8400 in the example = a day). By such, the content is stored on the user’s system for the specified duration and won’t be requested again from the CDN during that time. This consequently saves your CDN traffic and saves you money.

Ok, CDN settled, lets see other ways to serve static content from your server, as we do for our css, js and some of our image files. To start with this is specific to the Apache web server. There are ways to do it with other servers though.

The technique is based on caching. If you serve just static pages in your site (which I doubt) you can actually set your server, Apache in this case, to cache the site content for a specified duration. For people like me who have issues with caching all content and setting up proxy servers however, there are ways to cache some specific content by content-type. It is called Mod Expire in Apache and you can read more about it from the Apache docs

In general, here is what it looks like (in htaccess).

ExpiresActive on
# Images and flash
ExpiresByType image/png "access plus 2 month"
ExpiresByType image/gif "access plus 2 month"
ExpiresByType image/jpeg "access plus 2 month"
ExpiresByType application/x-shockwave-flash "access plus 2 month"
# css may change a bit sometimes, so dont cache too long
ExpiresByType text/css "access plus 5 days"
# special MIME type for icons in case not set yet
AddType image/vnd.microsoft.icon .ico
# now we have icon MIME type, we can use it
# But my favicon doesn't change much, so say 3 mnths
ExpiresByType image/vnd.microsoft.icon "access plus 3 months"
ExpiresByType image/x-icon "access plus 3 months"
# JS? A month will do
ExpiresByType application/x-javascript "access plus 1 month"

I’d love to go on and on, but again, let’s leave it at here. Don’t forget however that scaling is about sniffing and optimizing every little thing that will weigh down your server, starting from checking your server (e.g Apache) and database (e.g MySQL) configuration. If you are using a framework, especially for your server side, you should be sure you set things up properly. Even at that, be sensitive to page load speeds and memory consumption. You can check out your server memory consumption and other vital details with the Linux command free from shell. If you are not much of the shell/console type, there is phpSysinfo which displays vital system info in a web page format.

And finally, talking page load speed, output compression is a life saver. By compressing content sent to the http client (say browser) from the server, you can drastically reduce your page load time. We use prototype as our parent js framework wich is quite heavy – around 74KB minified. Think of how long t will take this alone to load not to talk of other scripts. However, by output compression, the file is reduced to just around 21KB.

Output compression is a very easy thing. Note though, it is an extra work for the server so be sure of the trade off. In Apache (2.x), it is as smple as something like this: (Read more here)

# Compress javascript and css files
AddOutputFilterByType DEFLATE application/x-javascript text/css

Compressing a PHP file on the other hand is as simple as adding the line below just before any output buffering (any content is displayed/echoed)

ob_start("ob_gzhandler");

Ok, that’s all for now. Hope you’ve been able to learn a thing or two. Catch you later ;)

ngBot is a portal of various applications specifically tailored (but not limited) to the Nigerian/African community [Powered by devedgelabs.com] has added yet another site to the portal. The fast-growing portal recently introduced ngBot answers.

Before i cover what ngBot answers entails, lets do a quick run-through of a few solutions from ngBot/devedgelabs.

ngBot mobile:

Nigeria’s mobile community. Though still in its beta stage, this fast-growing site offers free mobile downloads (ringtones, wallpapers, games, applications etc.) tools, tips & tricks, hacks, SMS, share and learn and much more to cater for Africa’s largest & fastest growing mobile market. Users also get to contribute to every section of the site. The site is also accessible through mobile devices here @ http://mobile.ngbot.com/m.

nairaMngr:

NairaMngr (Naira Manager) is a java (J2ME/MIDP 2.0) mobile application for day to day earnings and expenditure recording. It helps you keep tab of how much you earn and how much goes out. More info here: http://devedgelabs.com/mobile/nairamngr

download version 1.1 (free): http://mobile.ngbot.com/downloads/apps/10

nubley (public beta):

Nubley is a directory of micro-bloggers on various micro-blogging platforms including; Twitter, NaijaPulse, Identi.ca and so on. The service also features tools such as URL shortener, feed updater, auto-responders etc. Try it here: http://www.nubley.com/

ngBot Answers:

ngBot Answers is a site where users can ask questions and get answers on various areas of interests. Users can also follow questions asked by others and get email notifications when they are answered. The site is also strictly moderated. Sounds like a forum, huh? Well, not really.. This is strictly for questions and answers.

Thinks about it; let’s say you need to find out where a certain place is located in Lagos, and the ‘mighty’ Google can’t help? You simply ask a question on ngBot answers and other users offer suitable answers. Still not convinced? Find out more: http://answers.ngbot.com/about

…or just try it out: http://answers.ngbot.com/

Submit your web app: Do you want us to feature your web application, why don’t you tell us about it. Contact us.

I recently designed a couple of business cards in Adobe Illustrator. The designs were cool, but when i went to the printers in Shomolu to print them, they demanded that they had to redesign them in CorelDraw

.. blah blah blah.

On hearing this, i went back home to do it myself.. i thought; “isn’t there an easier way of converting AI files to CDR?”

The problem:

As simple as the designs were, i didn’t want to redesign them in CorelDraw. And, incase i didn’t mention it earlier; “I hate CorelDraw”. Not that i can’t use it, but I’m like an Adobe fan boy. (Note: the word “Like”)

Another problem was; why aren’t the “printer guys’” flexible with the kind of formats they accept?

As simple as “SVG”:

Let me state here that I’m using Adobe Illustrator CS3 & CorelDraw 12.

1. Save your work from illustrator as an SVG file. (File > Save As)

2. Then from CorelDraw, import the SVG file (File > import).

The difference between this method (using SVG) and opening the AI file directly is that the text is editable and also shape layers.

Also note that; CorelDraw does not recognize crop marks created with Adobe Illustrator, so you might want to crop your work in Illustrator before exporting.

And files may be grouped when imported into CorelDraw.

Final Words:

The guy at the print shop was glad to learn a thing or two, i hope you did? By the way, hope you like the card? ;)

N.B: I skipped a few minor steps. If you have any difficulties, drop them in the comments area.

Post update: Also read Jean-Philippe’s comment below.

Just a simple wallpaper for you guys to enjoy. Created with photoshop & illustrator ;) Feel free to share!

You can also submit freebies you wish to share. Enjoy!

resolutions:

1280x800px

1024x768px

Generally, the believe about CSS is that no matter what order your property or value declaration comes in a selector, it is the same.

In other words, thus;

*{
margin: 0;

padding; 0;
}

is the same as

*{
padding: 0;

margin; 0;
}

But this is not always so.

Let’s take a look at borders;

The declarations for borders looks something like this;

.bordered{
  border: 1px solid #000;
  }

If you are however interested in just the top and bottom border, you may want to go this way;

.bordered{
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  }

There is however a short-cut to that. A better way to go should be;

.bordered{
  border: solid #000;
  border-width: 1px 0;

/* the 1px is for top & bottom, while 0 is for left & right  */
  }

And that is where the order (which of ‘border’ & ‘border-width’ comes first) matters. If the ordering is reversed (as shown below), it won’t work as expected.

.bordered{
  border-width: 1px 0;

border: solid #000;

}

VPS stands for Virtual Private Server, a type of hosting technology that gives you advanced features and server privilege as against a shared hosting. Its use in this article however refers generally to any type of hosting that allows you root access to your server – dedicated servers, VPS itself and Cloud servers as examples. I’d like to explain each in here but that is beyond the scope of this piece. Maybe some other time ;)

If you are proposing a startup or a big site – big in the term of eventual traffic and functionalities, then shared hosting is not the option for you. Really, I’m talking from experience. Go VPS. There are a lot of reasons for this but here are 3 core ones:

1. With VPS, you have the ability to configure your server (app and OS) to your taste, removing and adding stuffs the way you want – and this is a very important thing.
2. On shared hosting, there is a limit to how ‘big’ you can grow. Let me give you a live example here. We started ngBot on a shared hosting and everything was going fine till we added ngBot mobile. The whole idea was a play thing – just a place to share mobile items we get here and there and then meet other mobile geeks, but then it started getting more than that. In a while, we grew close to over 4000 members and was clocking around 30k monthly page views. And that was when the axe came from our shared hosting company. They disabled some of our scripts and advised us to go VPS or dedicated. The blow came so sudden and we had to take off the site for around a month till we found and nested on a suitable VPS host (cloud server actually). Needless to say, the one month the site was out cost us a lot of hits, members and Search Engine ranking.
3. On VPs you do not share resources with anyone like on shared hosting. Shared hostings are like face-to-face apartments where you share a lot of things together and you easily get disturbed by one another. If your neighbour on a shared hosting is a spammer for example, this may affect how mails from your site are delivered as well.

One thing to note about VPS however is that they are costlier than shared hosting. Another is that they require a little advanced skill to setup especially if you go the vanilla blank server way and you are doing the OS, server and tools setup yourself. This is a really big one and I advice you go for the preinstalled/configured option if you are not up to it. The already setup ones comes with an admin app (CPanel mostly) and looks pretty much like your shared platform. With the blank ones, all you have is your ugly shell console to do everything you want. And if this is your way, you will find putty very useful.

Needless to say, a good knowledge of your VPS OS is a very important virtue. As a server admin, you should be very familiar with the OS directory structures, installing/removing packages and dependencies (good knowledge of building and compiling important here as well as build tools like make and gcc), editing config files with editors like vi and nano (as you know, this is very common to Linux) among others.

Another very important thing you should know about is DNS setup (A, MX and CNAME especially) and how to configure your A records with your server especially if you want to setup multiple domains on the server. A good into article on DNS is available here: http://carsonified.com/blog/web-apps/get-started-with-dns/

Now, space and bandwidth is one luxury you don’t have on VPS. It is easy to find shared hosts promising you unlimited space/bandwidth but if you hear that on VPS, run away! The little one we run on at the moment offers just 20GB space as against our former shared hosting space of 1500GB! As a workaround to space and bandwidth issues on VPS, enter CDN (Content Delivery Network)!

CDN serve as storage backbone. Picture the scenario: storing our mobile stuffs (videos, apps, games, pictures) in our little 20GB space will leave us with little space for more upcoming ones. What if we have it stored in a different place – on a different server designed exclusively for data storage and transfer and not for core server functionalities like script compiling/serving etc? And that is what CDN is all about. CDNs are designed as storage servers for static data. But they don’t just store. The way they are designed is such that they distribute stored content between different other servers around the world and serve content from the server closest to the request source, making content serving fast. Not only that, CDNs also enable content caching.

You come across CDN in use every minute you surf the web – Facebook (for storing/serving images/videos), twitter (for storing profile images), ngBot mobile (serving mobile download files) ;) and a lot more. Another good thing about CDN is that you don’t have a specific size you are limited to. You can consume as much as you want to as you pay per GB of space you use. Much more, it is cheap – very cheap. On the one we run on (Rackspace cloud files), 1GB costs around $0.15. One of the most popular public CDN is Amazon S3. They have been around for quite a while and a lot of sites use it, twitter as one. Another is Rackspace cloud files (which we use) and the new Microsoft Azure.

So how exactly do you transfer content in and out of a CDN? What other ways are static content served? Why is it necessary? Where does caching comes into this? Join me in the next piece ;)

Post update: The Second part of this article has been published here.

We’re going to create a monitor in this tutorial. We’ll be working with gradients and blurs. So fire up PS and let’s go!

Note: Dimensions used in this tutorial may differ depending on the size of your canvas.

Step 1:

Create a new document of whatever size (I’m using 1024x1024px). Create a rectangle of the monitor using the rounded rectangle tool. Fill it with #000000 and apply the bevel and emboss settings below.

Step 2:

Now to create the stand. On a new layer below the Use the pen tool to draw out the monitor stand. Then apply the layer styles below.

Tip: If you’re having problems drawing the shape, you can draw half, duplicate the layer, flip it horizontal and join it.

Step 3:

We’re going to use the pen tool with the help of the brush tool to add some detail.

First, select the the brush tool (Airbrush) with diameter of about 7px & foreground color: #000000.

Then ctrl+click on the monitor stand layer and use the pen tool to make the selection below. Then right-click & select ‘Stroke path’ and apply a slight Gaussian blur.

Step 4:

We’re going to apply the same treatment to some other areas but with different brush diameters.

Step 5:

Create a new layer called “screen”. With the rounded rectangle tool, draw out the screen and fill with #74B2C6. Then apply the layer style below.

Step 6:

Make the selection below, then apply a linear gradient from transparent(up) to #ffffff(down) and set the opacity to 15%.

My Final Image:

Below is my final image. Hope you enjoyed this tutorial?

This simple tutorial will show you how to use the blur tool to make surfaces look reflected. The aim of this tutorial is to let beginners get used to some basic tools in photoshop.

Step 1:

Create a new photoshop document of 650x520px. Using the ellipse tool, create a circle and fill with #16B809. Let’s call this layer “circle”.

Step 2:

Ctrl+click on the “circle” layer thumbnail & on a new layer, apply a linear gradient from black(down) to transparent(up). You can reduce the opacity a little.

Tip: When using the gradient tool, hold shift to constrain it to vertical, horizontal & diagonal gradients.

Step 3:

Ctrl+click on the “circle” layer again and make the selection below using the pen tool then subtract the selection. On a new layer, apply a linear gradient of transparent(down) to black(up). Then reduce the opacity to 10% or less.

Step 4 (Adding some shine):

Select the Elliptical marquee tool and make a selection on a new layer. Then apply a Gaussian blur (Filter >Blur >Gaussian blur).

Step 5 (Some more shine):

Apply the effect to some other areas.

My final image:

You can them add text or whatever ;) I hope you learned a thing or two. Below is my final image.

Welcome to bitblogr.

What we are about.

We love creativity, graphic & web-design/development,.. We’ll be sharing tutorials, web tips, trends et.c

You can follow us on twitter for more updates