Useful websites web developer should make use of
Oct 18th
There are quite a few tools lying around on the internet that helps the web development or web design process drastically. It will certainly strike inspirations and surely make your life easier while creating a website. In this post, I have compiled several websites that I have make use of in my progress.
Lorem Lipsum / Sample Content
Yes, the awesome, the all known popular test text lorem ipsum dolor sit amen… something something… To simulate real text rendering on a webpage. If you don’t have this on a notepad lies on your desktop, this website is a blast. It gives you short paragraph, long paragraph, list items to mess around with. Complete with a Coda Clip or Textmate Bundle for your complete convenience. I personally just go onto this website and grab the thing I need.
Colour Combinations / Palettes
Visit ColourLover | Visit ColorCombo | Visit ColourSchemeDesigner
You need some colour combination that works together, but you certainly do not have the time to play around and do experiments.. Of course, when designing a website, look and feel (to please your boss) comes first. So colour combinations must be chosen wisely. I primarily goes to ColorCombo and ColourLover, but when I need to pick a certain colour combo that takes a long time to find, I’ll just make a palette myself. ColourSchemeDesigner offers me all the tool I need to create one.
Font Choosing
This tool helps you grab font from an image or a website that you think looks nice. People have been using the same fonts for ages, so it’s no big deal grabbing some here and there 
Test Absolutely Everything 100+ Tools in One
Yeah, it does what it says it does. This tool can test your website in a lot of different ways, through a lot of different sites. CSS/HTML Validator, SEO, Social Services, Web Proxies, Network Tools, Text Tools, Images Tools and a lot of other tools all aggregated from 100+ sites here for your testing convenience. My definitive choice.
Speed Tester
Visit Pingdom Tools | Visit Load Impact
I often use both of this website to test the speed of my server and by that, optimize page load accordingly. Pingdom tools give me the file name that I should optimize and Load Impact helps me understand how my server would react in heavy load.
Icons
Good looking icons are the heart of the website. It virtually makes the site looks good and worth checking out. They have around 100000 icons in their database and all have been carefully picked and enhanced with various size to choose from. Splendid tools.
CSS Compressor / Tidy / Optimisation
Visit CSSCompressor | Visit CSS Tidy | Visit CSS Optimisation
The compressor reduce the css size so that it’s faster to load. CSS Tidy helps developers read better, fix errors and reduce redundant code. The optimiser does pretty much the same thing + reducing file size.
To be a web developer
Oct 17th
Is to know all of these <insert evil and sinister laugh here> languages. This post serves as a starting place for all who wants to be a web developer. You might not need to understand in depth on any of these, but the least is the basic. My choices of framework serves as a suggestion only, the real choice is yours.
1. HTML
Back to when internet was born and introduced to the naked world… Back to when the internet was young and needing a serious developer….Tim Berners-Lee said “let there be HTML”… and there was HTML, and it was good. The proof of its goodness stays ever since then until today. Yeah, every serious web developer use HTML. Easy to learn, easy to misuse. With great powers come great responsibility. So code well, and follow the standards.
2. CSS
HTML always comes with CSS. It helps you refrain from misusing those font and colors tag by having a separate CSS file. This serve as a way for you to separate content and display components. Also, helps you to hate tables and loves divs and spans. Though many would say otherwise…
3. Server Side scripting
When you have master your way of representing your thoughts on pretty html/css compliant documents, it’s time to deliver dynamic content. One problem though, is to choose which server side scripting you would go for. Unlike HTML/CSS where only 1 thing is required to learn and to have it beaten to your head. There are choices.
My Choice: PHP. Other choices: Ruby, Python, Java, ASP.NET
4. SQL
One choice again. SQL have become a parent of all database language. There are many database engine, most of them are built ontop of SQL or understand SQL anyway. So why bother learning a language that you might not be using. SQL is the way to go.
5. Javascript / Client Side Scripting
User interactivity is the heart of the website, make sure people enjoys reading your website. Javacsript has matured into a great way of delivering dynamic content by using AJAX interactivity. Facebook does it, most new website nowadays does it. Why don’t you?
6. Frameworks
Web developers have been reinventing the wheel so many times that they come up with a whole sort of different type of wheels. These framework give you the wheel and tell you how to use it properly with examples and screencasts… Save you tons and tons of time trying to imagine how the wheel would look like and how it will work.
There is no one type of wheel that helps all web applications. So there are a lot. Choose wisely for a server side scripting framework and a javascript framework.
my choices: PHP Framework: Codeigniter, CSS Framework: 960.gs, Javascript framework: Jquery or Mootools
7. Knowing your web server.
Tricks and tricks. Understand how to give your website optimum experience by deliver the webpage to them as fast as it could be. When you have become a master and reach new ceiling, it’s time to differentiate yourself.
Have FPDF integrate with CodeIgniter
Oct 16th
This is a simple, plug it in, it runs, guide. It is still highly recommended that you try and run FPDF successfully without Codeigniter first. So that you know how to actively runs it or your web server supports it.
Step 1: Download the Classes from the FPDF pages.
The fpdf.php in the Codeigniter directory.
The font directory in the fonts directory
Step 2: Config File
1 | $config['fonts_path']= "path-to-your-fontsdir/fonts/"; |
Step 3: Create the init_fpdf.php
1 2 3 4 5 6 7 8 9 | <?php if (!defined('BASEPATH')) exit('No direct script access allowed'); if ( ! class_exists('fpdf')){ require_once(BASEPATH.'libraries/fpdf'.EXT); } $obj =& get_instance(); $obj->fpdf = new fpdf(); $obj->ci_is_loaded[] = 'fpdf'; ?> |
Step 4: Call it, use a controller to test
1 2 3 4 5 6 7 8 | $this->load->library('fpdf'); define('FPDF_FONTPATH',$this->config->item('fonts_path')); $this->fpdf->Open(); $this->fpdf->AddPage(); $this->fpdf->SetFont('Arial','B',14); $this->fpdf->SetY(30); $this->fpdf->Cell(40,10,'Hello World!'); $this->fpdf->Output('output.pdf','D'); |
Handy PHP Code Snippets
Oct 14th
Send Simple Mail
1 2 3 4 5 6 7 8 9 10 | function send_simple_mail($from,$to,$subject,$body) { $headers = "From: $from\r\n"; $headers .= "Reply-To: $from\r\n"; $headers .= "Return-Path: $from\r\n"; $headers .= "X-Mailer: PHP5\n"; $headers .= 'MIME-Version: 1.0' . "\n"; $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; @mail($to,$subject,$body,$headers); } |
List a Directory
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Destroy a Directory
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /***** *@dir - Directory to destroy *@virtual[optional]- whether a virtual directory */ function destroyDir($dir, $virtual = false) { $ds = DIRECTORY_SEPARATOR; $dir = $virtual ? realpath($dir) : $dir; $dir = substr($dir, -1) == $ds ? substr($dir, 0, -1) : $dir; if (is_dir($dir) && $handle = opendir($dir)) { while ($file = readdir($handle)) { if ($file == '.' || $file == '..') { continue; } elseif (is_dir($dir.$ds.$file)) { destroyDir($dir.$ds.$file); } else { unlink($dir.$ds.$file); } } closedir($handle); rmdir($dir); return true; } else { return false; } } |
Send File via FTP
1 2 3 4 5 6 | $connection = ftp_connect($server); $login = ftp_login($connection, $ftp_user_name, $ftp_user_pass); if (!$connection || !$login) { die('Connection attempt failed!'); } $upload = ftp_put($connection, $dest, $source, $mode); if (!$upload) { echo 'FTP upload failed!'; } ftp_close($connection); |
Zip File
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | /* creates a compressed zip file */ function create_zip($files = array(),$destination = '',$overwrite = false) { //if the zip file already exists and overwrite is false, return false if(file_exists($destination) && !$overwrite) { return false; } //vars $valid_files = array(); //if files were passed in... if(is_array($files)) { //cycle through each file foreach($files as $file) { //make sure the file exists if(file_exists($file)) { $valid_files[] = $file; } } } //if we have good files... if(count($valid_files)) { //create the archive $zip = new ZipArchive(); if($zip->open($destination,$overwrite ? ZIPARCHIVE::OVERWRITE : ZIPARCHIVE::CREATE) !== true) { return false; } //add the files foreach($valid_files as $file) { $zip->addFile($file,$file); } //debug //echo 'The zip archive contains ',$zip->numFiles,' files with a status of ',$zip->status; //close the zip -- done! $zip->close(); //check to make sure the file exists return file_exists($destination); } else { return false; } } /***** Example Usage ***/ $files=array('file1.jpg', 'file2.jpg', 'file3.gif'); create_zip($files, 'myzipfile.zip', true); |
UnZip File
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /********************** *@file - path to zip file *@destination - destination directory for unzipped files */ function unzip_file($file, $destination){ // create object $zip = new ZipArchive() ; // open archive if ($zip->open($file) !== TRUE) { die (’Could not open archive’); } // extract contents to destination directory $zip->extractTo($destination); // close archive $zip->close(); echo 'Archive extracted to directory'; } |
Parse JSON
1 2 3 4 | $json_string='{"id":1,"name":"foo","email":"foo@foobar.com","interest":["wordpress","php"]} '; $obj=json_decode($json_string); echo $obj->name; //prints foo echo $obj->interest[1]; //prints php |
Parse XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | //xml string $xml_string="<?xml version='1.0'?> <users> <user id='398'> <name>Foo</name> <email>foo@bar.com</name> </user> <user id='867'> <name>Foobar</name> <email>foobar@foo.com</name> </user> </users>"; //load the xml string using simplexml $xml = simplexml_load_string($xml_string); //loop through the each node of user foreach ($xml->user as $user) { //access attribute echo $user['id'], ' '; //subnodes are accessed by -> operator echo $user->name, ' '; echo $user->email, '<br />'; } |
Get Client’s real IP address
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Force File Download
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /******************** *@file - path to file */ function force_download($file) { if ((isset($file))&&(file_exists($file))) { header("Content-length: ".filesize($file)); header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename="' . $file . '"'); readfile("$file"); } else { echo "No file selected"; } } |
Tag Cloud Generation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function getCloud( $data = array(), $minFontSize = 12, $maxFontSize = 30 ) { $minimumCount = min($data); $maximumCount = max($data); $spread = $maximumCount - $minimumCount; $cloudHTML = ''; $cloudTags = array(); $spread == 0 && $spread = 1; foreach( $data as $tag => $count ) { $size = $minFontSize + ( $count - $minimumCount ) * ( $maxFontSize - $minFontSize ) / $spread; $cloudTags[] = '<a style="font-size: ' . floor( $size ) . 'px' . '" class="tag_cloud" href="#" title="\'' . $tag . '\' returned a count of ' . $count . '">' . htmlspecialchars( stripslashes( $tag ) ) . '</a>'; } return join( "\n", $cloudTags ) . "\n"; } /************************** **** Sample usage ***/ $arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43, 'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42, 'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30, 'Extract' => 28, 'Filters' => 42); echo getCloud($arr, 12, 36); |
use Gravatars
1 2 3 4 5 6 7 8 9 10 11 12 | /****************** *@email - Email address to show gravatar for *@size - size of gravatar *@default - URL of default gravatar to use *@rating - rating of Gravatar(G, PG, R, X) */ function show_gravatar($email, $size, $default, $rating) { echo '<img src="http://www.gravatar.com/avatar.php?gravatar_id='.md5($email). '&default='.$default.'&size='.$size.'&rating='.$rating.'" width="'.$size.'px" height="'.$size.'px" />'; } |
Resize Image
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /********************** *@filename - path to the image *@tmpname - temporary path to thumbnail *@xmax - max width *@ymax - max height */ function resize_image($filename, $tmpname, $xmax, $ymax) { $ext = explode(".", $filename); $ext = $ext[count($ext)-1]; if($ext == "jpg" || $ext == "jpeg") $im = imagecreatefromjpeg($tmpname); elseif($ext == "png") $im = imagecreatefrompng($tmpname); elseif($ext == "gif") $im = imagecreatefromgif($tmpname); $x = imagesx($im); $y = imagesy($im); if($x <= $xmax && $y <= $ymax) return $im; if($x >= $y) { $newx = $xmax; $newy = $newx * $y / $x; } else { $newy = $ymax; $newx = $x / $y * $newy; } $im2 = imagecreatetruecolor($newx, $newy); imagecopyresized($im2, $im, 0, 0, 0, 0, floor($newx), floor($newy), $x, $y); return $im2; } |
Validate Email Address
1 2 3 4 5 6 7 | function is_valid_email($email) { if(eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$",$email)) return true; else return false; } |
Thanks to jakyra points out that the eregi() function has been deprecated as of php 5.3.0 and completely removed in php 6.0. An alternative would be preg_match_all()
Validate Domain Name
1 2 3 4 5 6 7 | function is_valid_url($url) { if (preg_match('/^(http|https|ftp)://([A-Z0-9][A-Z0-9_-]*(?:.[A-Z0-9][A-Z0-9_-]*)+):?(d+)?/?/i', $url)) { echo "Your url is ok."; else echo "Wrong url."; } |
Jquery Pagination System
Oct 13th
When you think of a pagination system, you would think about some messy PHP codes to generate each and every page. So subsequently, for an user who wants to browse through your pages, they will do a lot of calls to your PHP file and by that do a lot of calls to your database (a bad thing!). So, we want to load all the data from PHP/MySQL ONCE and have the pagination taken care of by Jquery.
Copy & Paste all of this code into a html file. Make sure you are online so that the browser can retrieve the jquery library off google
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery Pagination Example</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2");google.setOnLoadCallback(function(){});</script> <script type="text/javascript"> $(document).ready(function(){ var show_per_page = 7; var number_of_items = $('#content').children().size(); var number_of_pages = Math.ceil(number_of_items/show_per_page); var end = number_of_pages -1; $('#current_page').val(0); $('#show_per_page').val(show_per_page); var navigation_html = '<a href="javascript:go_to_page(0);">Begin</a>'; navigation_html += '<a href="javascript:nav(-1);">Prev</a>'; var current_link = 0; while(number_of_pages > current_link){ navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>'; current_link++; } navigation_html += '<a href="javascript:nav(+1);">Next</a>'; navigation_html += '<a href="javascript:go_to_page(' + end +')"">End</a>'; $('#page_navigation').html(navigation_html); $('#page_navigation .page_link:first').addClass('active_page'); $('#content').children().css('display', 'none'); $('#content').children().slice(0, show_per_page).css('display', 'block'); }); function nav(dir){ if(dir==+1){ new_page = parseInt($('#current_page').val()) + 1; if($('.active_page').next('.page_link').length==true){ go_to_page(new_page); } }else if(dir==-1){ new_page = parseInt($('#current_page').val()) - 1; if($('.active_page').prev('.page_link').length==true){ go_to_page(new_page); } } } function go_to_page(page_num){ var show_per_page = parseInt($('#show_per_page').val()); start_from = page_num * show_per_page; end_on = start_from + show_per_page; $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block'); $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page'); $('#current_page').val(page_num); } </script> <style> #page_navigation a{ padding:3px; border:1px solid #dedede; margin:3px; color:black; text-decoration:none; } #page_navigation a:hover{ background: #FFC; } .active_page{ background:#036; color:white !important; } ul#content li{ padding: 5px; } </style> </head> <body> <ul id='content'> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</li> <li>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</li> <li>Pellentesque ac sem ac sem tincidunt euismod.</li> <li>Duis hendrerit purus vitae nibh tincidunt bibendum.</li> <li>Nullam in nisi sit amet velit placerat laoreet.</li> <li>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</li> <li>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</li> <li>In non eros eu lacus vestibulum sodales.</li> <li>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</li> <li>Proin ullamcorper est vitae lorem mollis bibendum.</li> <li>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</li> <li>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</li> <li>Maecenas lacinia lectus ac nulla commodo lacinia.</li> <li>Maecenas quis massa nisl, sed aliquet tortor.</li> <li>Quisque porttitor tellus ut ligula mattis luctus.</li> <li>In at mi dolor, at consectetur risus.</li> <li>Etiam id erat ut lorem fringilla dictum.</li> <li>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</li> <li>Pellentesque quis magna vitae quam malesuada aliquet.</li> <li>Curabitur tempus tellus quis orci egestas condimentum.</li> <li>Maecenas laoreet eros ac orci adipiscing pharetra.</li> <li>Nunc non mauris eu nibh tincidunt iaculis.</li> <li>Ut semper leo lacinia purus hendrerit facilisis.</li> <li>Praesent et eros lacinia massa sollicitudin consequat.</li> <li>Proin non mauris in sem iaculis iaculis vel sed diam.</li> <li>Nunc quis quam pulvinar nibh volutpat aliquet eget in ante.</li> <li>In ultricies dui id libero pretium ullamcorper.</li> <li>Morbi laoreet metus vitae ipsum lobortis ultrices.</li> <li>Donec venenatis egestas arcu, quis eleifend erat tempus ullamcorper.</li> <li>Morbi nec leo non enim mollis adipiscing sed et dolor.</li> <li>Cras non tellus enim, vel mollis diam.</li> <li>Phasellus luctus quam id ligula commodo eu fringilla est cursus.</li> <li>Ut luctus augue tortor, in volutpat enim.</li> <li>Cras bibendum ante sed erat pharetra sodales.</li> <li>Donec sollicitudin enim eu mi suscipit luctus posuere eros imperdiet.</li> <li>Vestibulum mollis tortor quis ipsum suscipit in venenatis nulla fermentum.</li> <li>Proin vehicula suscipit felis, vitae facilisis nulla bibendum ac.</li> <li>Cras iaculis neque et orci suscipit id porta risus feugiat.</li> <li>Suspendisse eget tellus purus, ac pulvinar enim.</li> <li>Morbi hendrerit ultrices enim, ac rutrum felis commodo in.</li> <li>Suspendisse sagittis mattis sem, sit amet faucibus nisl fermentum vitae.</li> <li>Nulla sed purus et tellus convallis scelerisque.</li> <li>Nam at justo ut ante consectetur faucibus.</li> <li>Proin dapibus nisi a quam interdum lobortis.</li> <li>Nunc ornare nisi sed mi vehicula eu luctus mauris interdum.</li> <li>Mauris auctor suscipit tellus, at sodales nisi blandit sed.</li> </ul> <div id='page_navigation'></div> <input type='hidden' id='current_page' /><input type='hidden' id='show_per_page' /> </body> </html> |
Introducing Codeigniter
Oct 10th
This is my first post about Codeigniter, a free MVC PHP framework that is very easy to understand and implement. I have been using Codeigniter for quite a while now and is very please with what I’ve achieved.
Hold on, what is MVC?
MVC is short for Model View Controller and is an abstract way of separating the logic, display and controlling decision. I wouldn’t go through defining them but for the sake of simplicity, I’ll throw in a simple example. And also, I’ll go through this example in Codeigniter’s way of talking, so that we won’t go to outer space without knowing it
Model is where the information is. View is how the information will be presented. Controller is which information to choose.
For example we want to view a page with the id of 3. we will have the controller called “view_page” and pass it an argument id = 3. The controller will then grab the information (page detail) by calling the “page” model and ask for page detail with the id of 3. After retrieving the page detail from the model, the controller would then call the “display_page” view and give it what to display.
In detail:
The Controller’s code will be:
1 2 3 4 5 | $id=$_GET['id']; $data=$this->page_model->loadpage($id); $this->load->view('page-display', $data); |
The Model’s code will be:
1 2 3 4 5 6 7 8 9 | function loadpage($id) { $data = db->query('SELECT * FROM page WHERE id=$id'); return $data; } |
The View’s code will be:
1 | echo $data['content']; |
If that’s not understandable, please, dig in to the framework and see what’s in there. Also, Codeigniter offered a 20 minutes video tutorial (oh, I love theses!) to quickly setup codeigniter and have a blog running in less than half an hour. Pretty impressive to me.
If you’d ever run into a wall, the user guide is always there to help you.
Have fun igniting codes