prettyscripts

css framework reviews

2012-05-09T05:09:00Z

i have used quite a number of css frameworks after discovering their existence. using css framework makes front-end web development more efficient.

if you don't already know, a css framework is a collection of css files with predefined rules for grid-based site layout and typography, and handles cross browser compatibility issues.

there are many css frameworks. this post looks at some of some free css frameworks i've tested and worked with, namely 960 grid system, blueprint, 1140 css grid and foundation.

960 grid system

designed for fixed content width 960 pixels. it is a pure grid system. it provides a few variants of column layouts: 12 columns (60 pixels), 16 columns (40 pixels) and 24 columns (30 pixels), with rtl versions.

the download package include codes for the different layouts, and comes with templates for use in design softwares (eg photoshop, illustrator, gimp) and printable templates for sketching designs on paper.

the downside of this framework is fixed-width. it's less flexible on devices and screens with different resolutions.

for more flexibility, there's fluid 960 grid system and adaptive css which adjust the layout to fit to the page.

there's also a variable grid system to define different content width, column widths and number of columns.

i've not used any of the variants.

blueprint

designed for content width 960 pixels with 24-column layout, with 30 pixels per column.

coding-wise it's very similar to 960 grid system.

blueprint comes with more than just a grid layout. it includes typography and predefined elements. it also has print styles which are printer friendly. (having print styles is quite important as for some reason some users prefer to read sites from prints.)

the 'extras' is a bonus to cut down styling your website if you like them.

1140 css grid

designed to fit into a 1280 monitor and bcomes fluid and adapt to smaller monitors. it uses 12-column layout with column widths defined in percentages. columns can be defined inside columns, ie nesting column support.

the download package comes with grid-based only layouts.

foundation

foundation uses percentage to define page width, by default 980 pixels and this value can be redefined. it automatically adjusts to smaller devices. it uses 12-column layouts with colun wideths defined in percentage. it also supports nesting columns.

foundation comes with additonal codes to style buttons and forms.

download package also include scripts to enhance user experience - i've not used these yet.

conclusion

Full story »

command line php

2012-04-30T00:20:00Z

note: this post applies running php scripts on unix environment. modifications maybe required to from windows environment.

running from command line

run the script with php command:

php your_file.php

for php command options, run php -?.

to run the script as other shell commands (ie without the php command), set executable permission with chmod +x. the file can be renamed without .php extension. begin the script with:

PHP:

#!/usr/bin/php
<?php
// the rest of the php code

check the script is running from command line

check with php_sapi_name(). detail in this post.

command line arguments

check $_SERVER['argc'] (number of arguments) and $_SERVER['argv'] (array of arguments).

note that the script itself is an argument. there are at least 1 arguments and array index 0 is the script file itself.

I/O streams

cli specific constants: STDIN, STDOUT, and STDERR.

a simple way to read from standard input:

PHP:

file_get_content("php://stdin");

to display error message:

PHP:

fwrite(STDERR, "your error message\n");

yii: include view specific css

2012-03-29T23:43:00Z

this is useful to define a css file specifically for a page and not overloading everything in a single css file.

in /path/to/views/view_file.php:

PHP:

Yii::app()->getClientScript()->registerCssFile( 
    Yii::app()->baseUrl . '/css/<file>.css'
);

php: parse url from string and add hyperlink

2012-03-26T05:22:00Z

to parse url from a plain string and add html hyper link to url:

PHP:

ereg_replace("http://([a-zA-Z0-9./-]+)", "<a href=\"\\0\">\\0</a>", $text);

from source, but removed '$' from regular expression as that only matches urls at the end of the string.

b2evo: plugin basics

2012-03-24T05:16:00Z

like wordpress, b2evolution has user contributed plugin directory. however, many are outdated and many link to nowhere (ie broken links). can't really find what i want there.

(update: found a plugin directory hosted on sourceforge.)

i attempted to write my own. however there aren't much resources on how to do it. other than looking at plugins shipped with the release and some dummy examples. its documentation is also outdated and not very helpful.

this isn't intended to be a tutorial. it's just some basic information on the starting point. some information i wish it's more easily accessible.

location

plugin files are under /<path/to/site>/plugins. will be refered to as /plugins hereafter.

a plugin can be a file directly under the /plugins directory or under a subdirectory with other related files.

file naming convention

the file name format for plugin file:

_<name of plugin>.plugin.php

subdirectory name format:

<name of plugin>_plugin

plugin template and content

create a plugin file based on skeleton.plugin.php and edit any necessary changes. this file is shipped with release.

also look in _test.plugin.php for samples. not the best example but it's a good starting point to know what hooks are available.

hooks

like many open source software, b2evo provides some hooks to allow plugins to 'hook' codes into the system.

for a complete list of hooks, check /<path/to/site>/inc/plugins/models/_plugins_admin.class.php. look for get_supported_event().

the description is quite brief. if you don't understand how it works, they may not make sense. it took me a while to go figure out by going through source codes.

coding examples

as mentioned, b2evolution is poorly documented. you need a lot of researches, trials and errors to make it work.

one of the best place is to go to the forum. you can find some information and ask questions. i was able to make a plugin required by a project.

another place is to check plugins for quam plures. quam plures is another blogging software brached from b2evolution, started by a group of users who used to use and / or develope b2evolution. some plugins that were broken linked from b2evo's plugin directory can be found here.

at this stage the codes are quite similar and you should be able to work something out from the source code. i got some of the tricks from these plugins too.

i'm very new to plugin development and i may have missed something. if you have any tips and tricks, please let me know in the comments.

wordpress: basic essential plugins

2012-03-19T03:39:00Z

after working on a few wordpress based projects, i have come to conclusion that you can't run a site with it out-of-box. it only has the basic features. eventually users will want something more than the built-in's.

this is where plugins come in.

since wordpress is so popular, you can find almost anything you want. and because it's very popular, there can be too many choices. it's quite a painful process to go through and filter them.

here are the basic essentials used on most wordpress projects i did. something to keep a basic site running. the list is based on my research and tests, and suits most project i work on.

contact form 7

a very flexible and customizable contact form. contact is sent via email and the email message can also be customized. there's a bit of learning curve but everything are well documented.

supports multiple contact forms. good for contacts for different purposes.

really simple captcha

to be used with the above contact form to prevent spams.

tinymce advanced

a better wysiwyg editor than the basic editor to style posts and pages.

i don't usually need this if i'm the only one updating the site, since i can style contents with html codes. but this is essential if sites are updated by users without or with minimal html knowledge.

google xml maps

generates xml sitemaps to submit to search engines. you need this to tell crawlers to discover and index your site. the sitemap is also automatically updated when new contents are updated.

ninja page categories and tags

it took me a while to find out wordpress pages do not have categories and tags. i've been using b2evolution and these are built-in features.

thanks to this plugin pages can be categorized and tagged, just like posts. essential for page heavy sites for better grouping of information.

qtranslate

essential for multilingual sites. content for the same page / post are editied within the same editor under different tabs to prevent confusions. seo-friendly url to easily switching between languages.

if there are any useful plugins that are 'basically' required to get a basic site going, please let me know in comments.

css and ie: opacity

2012-03-08T01:25:00Z

image / element transparency is controlled by css property opacity. eg,

CSS:

.some-object { 
    opacity: 0.8; 
}

however, IE (surprised?!) V8 and before does not understand this property.

fortunately there is a fix:

CSS:

.some-object { 
    opacity: 0.8; 
    filter: alpha(opacity=80); // <--
}

it's said IE9 can handle opacity property. however i don't have access to IE9 to test this. let me know in comment if IE9 also decide to behave differently than standard browsers.

wordpress: twentyeleven theme and add sidebars to pages and single posts

2012-02-14T00:13:00Z

twentyeleven is a standard theme that comes with wordpress install (since V3.?). i like the layout, but customizing pages to include sidebar seems unfeasible. apparently it's the theme's feature for single posts and pages (as discussed in support group).

remove singular class

have a look at twentyeleven_body_classes() function in functions.php. it addes a 'singular' class to <body> tag which affects the layout. we need to remove that.

if you're using the theme directly, you can remove the function directly. however, the best way is to customize an existing theme by creating a child theme, so that any changes to the theme will not be lost if the theme is updated.

in child themes's functions.php,

PHP:

add_action('after_setup_theme', 'child_theme_setup');
function child_theme_setup() {
    // do your child theme setup.....
 
    // remove the body class
    remove_filter('body_class', 'twenty_eleven_body_class');
}

to keep the 'singular' feature of the theme

if you wish to keep the theme feature but want to have sidebar on other page templates, edit child theme's functions.php (based on source):

PHP:

	`add_fitler('body_class', 'child_theme_body_class', 20, 2);`
	`function child_theme_body_class($classes, $extra) {`
	`if (is_page_template('new-page-template.php')) {`
	`foreach ($classes as $i => $c) {`
	`if ($c == 'singular') unset($classes[$i]);`
	`}`
	`}`
	`return array_merge($classes, (array) $extra);`
	`}`

	`.some-object {`
	`opacity: 0.8;`
	`filter: alpha(opacity=80); // <--`
	`}`

	`add_action('after_setup_theme', 'child_theme_setup');`
	`function child_theme_setup() {`
	`// do your child theme setup.....`

	`// remove the body class`
	`remove_filter('body_class', 'twenty_eleven_body_class');`
	`}`

	`Yii::app()->getClientScript()->registerCssFile(`
	`Yii::app()->baseUrl . '/css/<file>.css'`
	`);`