Posted by 6bytes at 21, February, 2013

Category: Kohana, PHP

Tags: , , , , , ,

Kohana framework displays really nice and descriptive error messages, for a development environment that is. For production obviously no error reports should be shown to the user. Instead we should display a pretty “404 Not Found”, or any other error page.
Creating those custom error pages in Kohana v3.x can be a real pain in the bum. I’m hoping that below guide will help you get this done in just few minutes.

Create HTML of your custom pages

/application/views/error/
/application/views/error/404.php

<h1>My custom 404 error page!</h1>

/application/views/error/500.php

<h1>My custom 500 error page!</h1>

Following the same pattern you can create custom pages for all error codes. If you want one error page for all just create it and later point all requests to that view.

Create template if you need it

Obviously you can use the same template you’re using for your normal pages. If so, feel free to omit this step.
/application/views/error.php

<?php echo $content; ?>

Extend Kohana exception class

Create directory and file as per below and copy code into the file.

/application/classes/kohana/exception.php

<?php defined('SYSPATH') or die('No direct script access.');

class Kohana_Exception extends Kohana_Kohana_Exception {

	public static function handler(Exception $e) {
		if (Kohana :: $environment === Kohana :: DEVELOPMENT) {
			// In development show normal Kohana errors
			parent :: handler($e);
		} else {
			// In production show custom error page
			try {
				Kohana :: $log->add(Log :: ERROR, parent :: text($e));

				$attributes = array (
					'action'  => 500,
					'message' => rawurlencode($e->getMessage())
				);

				if ($e instanceof HTTP_Exception) {
					$attributes['action'] = $e->getCode();
				}

				// Error sub-request.
				echo Request::factory(Route::get('error')->uri($attributes))->execute()->send_headers()->body();

			} catch (Exception $e) {
				// Clean the output buffer if one exists
				ob_get_level() and ob_clean();

				// Display the exception text
				echo parent :: text($e);

				// Exit with an error status
				exit (1);
			}
		}
	}

}

Add route for error pages

/application/bootstrap.php

Route::set('error', 'error/<action>/(<message>)', array('action' => '[0-9]++', 'message' => '.+'))
	->defaults(array(
		'controller' => 'error',
		'action'	 => '404'
));

Finally, create controller for error pages

/application/controller/error.php

<?php defined('SYSPATH') or die('No direct script access.');

class Controller_Error extends Controller_Template {
	// if you've created your custom error template. If not use your standard template here.
	public $template = 'error';
	
	public function before() {
		parent :: before();
	}
	
	/**
	 * Serves HTTP 404 error page
	 */
	public function action_404() {
		$this->template->content = View :: factory('error/404');
	}

	/**
	 * Serves HTTP 500 error page
	 */
	public function action_500() {
		$this->template->content = View :: factory('error/500');
	}
}

That’s it. Try to access a page on your site that doesn’t exist and you should see your custom 404 error page. Remember that when working in development standard Kohana errors will be show and only on production our pretty error pages will shine. Line 6 in `exception.php` controls this behaviour.

Above is simplified and slightly modified version of Lysender post.

Posted by 6bytes at 14, December, 2012

Category: JavaScript

Tags: ,

This is just a quick tip how to find out which version of jQuery is loaded.
It can come in handy for example when you’re developing a script for an existing site and you need to find out which version of jQuery they use. Of course you can always just look in the HTML code, but this method is not always 100% reliable.

$().jquery;
// Returns "1.7.1"

or

jQuery.fn.jquery;
// Returns "1.7.1"

Posted by 6bytes at 19, January, 2012

Category: Self development

Tags: , ,

At first I was a bit sceptical but later on he actually makes sense.

Posted by 6bytes at 15, January, 2012

Category: JavaScript, WordPress

Tags: , , , ,

I wanted to add Google AdSense to my blog just to see how easy it is to do. I’ve googled a bit and found a handful of plugins that claim to do it all for you. I couldn’t decide which one to choose and started thinking from a different angle. It turns out that you don’t need any plugins to install Google AdSense on your site and what’s most important you don’t even need any programming knowledge! The whole process will take you no more than 5 minutes.

  1. Log in to your blog’s admin panel.
  2. Click on Appearance.
  3. Click on Widgets.
  4. Find a Text widget and drag it to the Sidebar (or any other place where you want the AdSesnse to appear).
  5. Enter title. I’ve used “Interesting Links”.
  6. Paste your Google AdSense code into widget’s content area. My code looks like this:
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-4589490261258499";
    /* allurcode */
    google_ad_slot = "2642741863";
    google_ad_width = 300;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    
  7. Click Save.

That’s it, we’re done! Go to your blog’s homepage and smile :)

Note. Allow a few minutes for Google to create the adds before they actually show up.

Posted by 6bytes at 27, December, 2011

Category: Infographic

Tags: , , , , ,

What tools today’s web developers are using.

Infographic by BestVendor.

Posted by 6bytes at 27, December, 2011

Category: Portfolio

Tags: , ,

Home Sense

Not so “hot” as the site has been built a few months ago :) but still worth showing.

Full HTML5 site on HTML5 Boilerpate and Kohana framework. Custom fonts using CSS @font-face with fallback to JavaScript cufon.

Posted by 6bytes at 31, October, 2011

Category: CSS

Tags: , ,

Really simple triangles working in all major browsers including IE6+

HTML

No surprises here. Our HTML is as simple as that.

<div class="arrow_top"></div>
<div class="arrow_right"></div>
<div class="arrow_bottom"></div>
<div class="arrow_right"></div>

CSS

The trick is to create an element with zero width and height. The actual size will be determined by the element’s borders. For example up arrow has top and bottom borders set as transparent and the left border with a solid colour. Imagine it as drawing an arrow where its pointing corner is our zero dimensions div element.

Demo

Arrow top

.arrow_top {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-left:30px solid #ff9600;
}

Arrow right

.arrow_right {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-left:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow bottom

.arrow_bottom {
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right:30px solid transparent;
	border-top:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow left

.arrow_left {
	width:0;
	height:0;
	border-top:30px solid transparent;
	border-bottom:30px solid transparent;
	border-right:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow top with non transparent borders and pointing corner is a 5px / 5px div

.arrow_top_filled {
	width:5px;
	height:5px;
	border-left:30px solid #222;
	border-right:30px solid #222;
	border-bottom:30px solid #ff9600;
	margin-bottom:10px;
}

Arrow top right

.arrow_top_right {
	width:0;
	height:0;
	border-bottom:30px solid transparent;
	border-left:30px solid transparent;
	border-right:30px solid #ff9600;
	margin-bottom:10px;
}

Posted by 6bytes at 26, September, 2011

Category: Infographic

Tags: , , ,



If you want to see the original post, please go to WebDesignShock.

Posted by 6bytes at 15, July, 2011

Category: fun

Tags: , ,

If you’re a big fan of Nyan Cat meme

and you have Windows XP or 7 then you should be ecstatic about this.

There’s a plugin that replaces your standard progress bar with a Nyan Cat animation :)

Download and install instructions here

Posted by 6bytes at 30, June, 2011

Category: JavaScript

Tags: , ,

Just a quick tip, how to check if current page has been loaded in an iframe or was it accessed directly.

if (window.self === window.top) {
    // we're NOT in an iframe
} else {
    // we're in an iframe
}

That’s it.