FuelPHP framework

This framework is simple and flexible and easier to study. Try if you don't have much time!
http://fuelphp.com/

CodeIgniter php framework

This framework is much simpler than other frameworks. Try it if you develop smaller systems.
http://ellislab.com/codeigniter

Cacoo: Tools for Creating Website Wireframes

Cacoo is an online drawing tool for creating a variety of diagrams. It's very useful to create website fireframes.
https://cacoo.com/

Sneakpeekit: Sheets for website wireframes

This provides lots of sheets for website wireframes.
http://sneakpeekit.com/

Mockingbird: Tools for Creating Website Wireframes

This looks cool.
https://gomockingbird.com/

Moqups Tools for Creating Website Wireframes

This is free tools. Just try and use it if you like!
https://moqups.com/

Notism

This is a great one which works well with common design tools like Photoshop, Fireworks and Illustrator.
https://www.notism.io/

Twitter API

Let's try Twitter API. 
https://dev.twitter.com/
http://www.youtube.com/watch?v=Hr19uEOQL-U

Google API

Google API is really useful. For example, you will know how useful Google MAP API is.
http://code.google.com/
http://www.w3schools.com/googleAPI/

Facebook API

Try Facebook API. It must be great!
https://developers.facebook.com/
http://www.programmableweb.com/api/facebook

How to use GitHub

When you work in a team, you should learn how to use GitHub.
https://github.com/
http://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1#awesm=~oqF51QxlBg6AUy

Zend php framework

This framework is also good one. Try if you find out this one suits your web application development.
http://www.zend.com/en/

Symfony php framework

Symfony is a powerful php framework which has useful classes and APIs.
http://symfony.com/

CakePHP

Let's see how this framework works.
http://cakephp.org/

Drupal7 Splash page

It's not necessary to build a splash page in Drupal website. But, it sometimes make a website impressive if it is well-designed.
https://drupal.org/node/1910456
http://drupal.stackexchange.com/questions/60160/splash-page-for-drupal-7-website

Drupal7 Git

Must learn how to use Git in Drupal
https://drupal.org/node/803746
http://www.youtube.com/watch?v=4zFxeND0IWE

Drupal7 function drupal_mail

This function provides a composed form of  an e-mail message and optionally sends an e-mail message.
https://api.drupal.org/api/drupal/includes!mail.inc/function/drupal_mail/7

Drupal7 function drupal_get_form

This function allows you to get a renderable form array for a particular form ID.
https://api.drupal.org/api/drupal/includes!form.inc/function/drupal_get_form/7

Drupal7 function theme_more_link

https://api.drupal.org/api/drupal/includes!theme.inc/function/theme_more_link/7

Drupal7 function theme_item_list

This function is very important when you do theming in Drupal websites. Should explore this.
https://api.drupal.org/api/drupal/includes!theme.inc/function/theme_item_list/7

Drupal7 function module_invoke

This function invoke a particular hook for a particular module.
https://api.drupal.org/api/drupal/includes!module.inc/function/module_invoke/7

Drupal7 DrupalWebTestCase

 DrupalWebTestCase allows you to use many utilities for running tests. You should use this class when you want to create a new test case.
https://api.drupal.org/api/drupal/modules!simpletest!drupal_web_test_case.php/class/DrupalWebTestCase/7

Drupal 7 function theme()

theme() takes one or two arguments:
- The name of the theme operation
- An associative array of variables to pass onto the theme operation
https://api.drupal.org/api/drupal/includes!theme.inc/function/theme/7 This function is useful, but calling the theme() function directly is strongly discouraged 

Drupal7 function module_list

This function returns an array of module names. It is very simple but useful when you want to list modules for some reasons.
https://api.drupal.org/api/drupal/includes!module.inc/function/module_list/7

Drupal7 function hook_help

You can provide help for developers using this hook. It's quite helpful when you develop a module with some other people.
https://api.drupal.org/api/drupal/modules!help!help.api.php/function/hook_help/7

JavaScript AngularJS

There are many kinds of JavaScript frameworks. AngularJS is getting popular among web developers these days. It has an amazing data binding function.
http://angularjs.org/

 ------------------------------------------------------
[Index.html]
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Anjular JS test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
    <script src="testscript.js"></script>
</head>
<body>
       <div ng-controller="mainCtrl">
    <ul>
        <li ng-repeat="usr in users|filter:query">
            {{$index+1}} {{usr.name|uppercase}} {{usr.score}}
        </li>
    </ul>
    </div>
</body>
------------------------------------------------------
[testscript.js]
 var mainCtrl = function($scope) {
    $scope.users = [
        {"name":"Nick", "score":88.22},
        {"name":"Ken", "score":58.13},
        {"name":"Hiro", "score":98.54},
        {"name":"Jon", "score":45.22},
        {"name":"Lyn", "score":90.13},
        {"name":"Nate", "score":34.54},
    ];
}
------------------------------------------------------

jQuery funnyText.js

If you want to use fancy stuff on your websites, check out this jQuery plugin. This is fun!
http://alvarotrigo.com/funnyText/

JavaScript Contact form

When you need to use simple contact form, try this code.
------------------------------------------------------------------------------------------
<script language=javascript>
function send_mail(){  
    document.form1.action="mailto:example@mail.com";  
    document.form1.method="post";    document.form1.encoding="text/plain";
    alert("Thank you");
}
</script>
------------------------------------------------------------------------------------------
 <FORM name="form1" onSubmit="send_mail()">
<TEXTAREA rows="5" cols="80" name="text"></TEXTAREA><br />
<INPUT TYPE="submit" VALUE="Send">
<INPUT TYPE="reset" VALUE="Reset">
</FORM>
------------------------------------------------------------------------------------------

Free Social Media Icons

When you build a website, you often need to create links to social media such as Facebook and Twitter. You can get free sets of quality social media icons from good websites. Let's have a look!
http://vandelaydesign.com/blog/social-media/icons/

Site44 provides good web service

Site44 allows you to create sites inside your Dropbox account. You can try free starter plan and enjoy it.
http://www.site44.com/

CSS Trick text-shadow

You can make fonts glow using text-shadow properties.
-------------------------------------------------------------------------------

<Sample 1> Default(No text-shadow)

.test h3{

    color:white;
}

<Sample 2> Font with text-shadow

 .test h3:hover{

  text-shadow:
  0 0 20px #edf8ff,
  0 0 20px #edf8ff,
  0 0 0.80px #edf8ff;
}
-------------------------------------------------------------------------------

jQuery liScroll

This jQuery plugin has simple and useful scrolling effect. Visit the website and enjoy!
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

jQuery diamonds.js

This is awesome jQuery
http://mqchen.github.io/jquery.diamonds.js/

Drupal7 DrupalStreamWrapperInterface

DrupalStreamWrapperInterface has over 20 functions to be defined by the implementing classes.
Visit the following website for the details of it.
https://api.drupal.org/api/drupal/includes!stream_wrappers.inc/7
http://php.net/manual/en/streamwrapper.stream-open.php

Drupal7 File interface

File API functions are quite handy to handle file system. Refer to the API documentation!
https://api.drupal.org/api/drupal/includes!file.inc/group/file/7

Drupal7 function drupal_get_path

This hook allows you to get the path of the module providing the file.
https://api.drupal.org/api/drupal/includes!common.inc/function/drupal_get_path/7

Drupal7 EntityFieldQuery

Drupal provides a query builder for SQL databases and a query builder for Entities and Fields.
The class is EntityFieldQuery which allows you to manage entities based on entity properties.
https://api.drupal.org/api/drupal/includes!entity.inc/class/EntityFieldQuery/7
---------------------------------------------------------------------------
$query = new EntityFieldQuery();
$query
->entityCondition('entity_type', 'car')
->propertyOrderBy('created', 'DESC')
->fieldCondition('field_price', 'value', '30000')
->range(0, 5);
$result = $query->execute();
---------------------------------------------------------------------------

Drupal7 Field API

The Field API is a great way to get yourself involved directly in Drupal core development
When you develop Drupal, you will realizethe Field API is a very important concept to get more control over module development. For more details see the following websites.
https://api.drupal.org/api/drupal/modules!field!field.module/group/field/7
https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7
https://drupal.org/node/707832

Drupal7 Schema API

You can manipulate the tables in Drupal's SQL database using the Schema API.
https://drupal.org/developing/api/schema
https://api.drupal.org/api/drupal/includes!database!schema.inc/group/schemaapi/7

Drupal7 function hook_tokens

To understand the concept of token is very important. Let's check it out!
https://api.drupal.org/api/drupal/modules!system!system.api.php/function/hook_tokens/7

Drupal7 function drupal_set_message

This hook allow you to set a message which reflects the status of the performed operation.
https://api.drupal.org/api/drupal/includes!bootstrap.inc/function/drupal_set_message/7

Drupal7 Form API

Drupal's Form API is definitely amazing. It allows developers to build forms and handle form submissions easily. That obviously saves your time and energy.
https://api.drupal.org/api/drupal/developer!topics!forms_api_reference.html/7

php PHP type comparison tables

It's very important to understand php types and comparison operators. Because some are very tricky and confusing, you should practice a lot until you get used to them.
http://www.php.net/manual/en/types.comparisons.php

Drupal7 Database API

Database API allows you to use database systems like Oracle, MSSQL, and SQLite with much less work. You can learn the Database API and work with it when you develop your own module.
https://drupal.org/node/310069
http://codekarate.com/daily-dose-of-drupal/drupal-7-module-development-part-7-database-api-displaying-data

Drupal7 function Render

It renders structured array into HTML or text using drupal_render(). It's really useful for developers to understand this function. It's worth to spend time to check the websites.
https://api.drupal.org/api/drupal/includes!common.inc/function/render/7
http://www.slideshare.net/frandoh/the-render-api-in-drupal-7
https://drupal.org/node/930760

php Scope Resolution Operator (::)

If a class doesn't have any instances, Scope Resolution Operator (::) is quite handy because it allow you to refer to functions and variables in the class.
http://php.net/manual/en/keyword.paamayim-nekudotayim.php
-------------------------------------------------------------------------------------------
class A
{
  function example()
  {
    echo “A::example().”;
  }
}
A::example(); // Correct

A->example();// Wrong because class A does not have any instance yet!
------------------------------------------------------------------------------------------- 

Object-oriented Programming (OOP) in PHP

You can find a few areas of PHP's Object-oriented features in Drupal. One is the database API, another is the testing framework which uses class inheritance to declare tests. Because these features are not using advanced Object-oriented Programming, you just need to know the basics. Anyway, learning Object-oriented Programming is quite useful. Just have a look!
http://us3.php.net/manual/en/language.oop5.php

Resource Description Framework

RDF is a general method to encoding metadata and other knowledge on the Semantic Web, with some rules about the semantics, or meaning, of those pieces. The point is to have a method so simple that it can express any fact. It's not easy to understand completely. Read the following websites carefully and try to use it until you get used to it.
http://en.wikipedia.org/wiki/Resource_Description_Framework
https://drupal.org/project/rdf
https://drupal.org/module-categories/rdf
http://www.lullabot.com/blog/article/how-does-rdf-work-drupal-7

Drupal7 Entities

In Drupal 7, "Entity" is very a important term whose concept is difficult to understand at the first time. Entities can be used as the parent class of nodes. They are the abstraction of functionality common between Nodes, Taxonomy Terms, and Users (among others).
https://drupal.org/node/1261744
https://drupal.org/project/entity
http://evolvingweb.ca/story/drupal-7-entities-what-are-they-and-what-are-they-good

Drupal7 system_settings_form()

This hook adds a button and setting forms, which allow you to configure the setting.
https://api.drupal.org/api/drupal/modules!system!system.module/function/system_settings_form/7
https://drupal.org/node/206761

function test_admin_settings() {
$form = array();
// Test output visibility settings.
    $form['display'] = array(
        '#type' => 'fieldset',
        '#title' => t('Display options'),
    );
    $form['display']['test_display_section_summaries'] = array(
        '#type' => 'checkbox',
        '#title' => t('Show summaries on administration sections.'),
        '#default_value' => variable_get('test_display_section_summaries', 1),
        '#description' => t('If unchecked, the summaries will still be visible on the <a href="@test-overview">reports</a> page.',
        array('@xray-overview' => url('admin/reports/xray'))
    ),
    );
    $form['display'][test_display_callback_function'] = array(
        '#type' => 'checkbox',
        '#title' => t('Show the page callback function on all pages.'),
        '#default_value' => variable_get('test_display_callback_function', 1),
    );
    $form['display']['test_display_form_id'] = array(
        '#type' => 'checkbox',
        '#title' => t('Show form ID in forms.'),
        '#default_value' => variable_get('test_display_form_id', 1),
    );
    return system_settings_form($form);
}

Drupal7 drupal_get_form()

This hook needs to be given an identifier for a form. It returns a renderable form structure as an array of arrays from the given identifier.
https://api.drupal.org/api/drupal/includes!form.inc/function/drupal_get_form/7

Drupal7 hook_theme

This hook can register theme's implementation to make modules and themes work together. It defines how to render array of the theme as HTML. It might be complex, but very important to know to have more control over theming.
https://api.drupal.org/api/drupal/modules!system!system.api.php/function/hook_theme/7
https://drupal.org/node/933976 

Drupal7 Recommended Locations for Custom Modules

When you develop a new module, you should put the folder in the following paths.

l: sites/all/modules/custom/
 For a single site or to be available for all sites in a multisite installation.

2: sites/example.com/modules/custom/
To be available for only one site, example.com, in a multisite installation.

3: sites/default/modules/
Acceptable shortcut location for custom modules when using a single-site installation.

Drupal7 hook_menu

Hook_menu enables modules to register paths which define how to handle URL. This hook is used very often in .module file. You should deeply understand it.
https://api.drupal.org/api/drupal/modules!system!system.api.php/function/hook_menu/7

JavaScript D3.js sample code

 Here's the sample code of D3.js. Create a html file and paste the following code in the file.
--------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <title>D3.js sample</title>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>

    var circleData = [64, 48, 85, 36, 51];

    var w = 1000;
    var h = 400;

    var svg = d3.select("body").append("svg").attr({width:w, height:h});

    svg.selectAll("circle")
        .data(circleData)
        .enter()
        .append("circle")
        .transition()
        .delay(function(d, i){return i*1000})
        .duration(2000)
        .ease("bounce")
        .each("start", function() {
            d3.select(this).attr({
                fill:"green",
                r:0,
                cy:h
            });
        })
        .attr({
            cx: function(d, i) {return 150 + (i * 200);},
            cy: h/2,
            r: function(d) { return d;},
            fill:"red"
        })
        .each("end", function() {
            d3.select(this)
                .transition()
                .duration(1500)
                .attr({
                    fill:"blue",
                    r:0,
                    cy:0
            })
        });

    </script>
</body>
</html>  
-------------------------------------------------------------------------------- 

Drupal7 Coder

Coder module checks source code of your Drupal site and show possible errors and warnings. 
Download and enable the Coder and go to Administration > Configuration> Development > Coder.

https://drupal.org/project/coder

https://drupal.org/node/144172

JavaScript Using developer's console.

When you test your javascript code, you should open your browser’s JavaScript console and debug with it.
https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console
 

JavaScript D3.js

D3.js(Data-Driven Documents) is one of the most useful JavaScript library when you manipulate data as visualization components. It's powerful and allows you to control data visualization easily.
http://d3js.org/

Drupal7 function hook_entity_info

For most Drupal developers, these hooks are really important to get used to.
function hook_entity_info
https://api.drupal.org/api/drupal/modules!system!system.api.php/function/hook_entity_info/7
function hook_entity_info_alter
https://api.drupal.org/api/drupal/modules!system!system.api.php/function/hook_entity_info_alter/7

Drupal7 Panopoly

Panopoly is an awesome Drupal 7 distribution. The most of installed modules are useful and well- customized for web developers to build big websites. You'll know how it's powerful if you install it and see demo website.
https://drupal.org/project/panopoly
https://drupal.org/node/1704334
http://www.slideshare.net/nyccamp/panopoly-nyccamp072012

Drupal7 Panelizer

Panelizer is far more flexible than Panels. Actually you still need Panels and install Panelizer to get more control over  the panel positioning on the node.
https://drupal.org/project/panelizer
http://www.youtube.com/watch?v=1MrqxE0Vszw
http://drupalwatchdog.com/2/1/panelizer-layouts

Drupal7 Views Slideshow module

Slideshows are one of the most popular things that people want on their website.
In Drupal 7, you can create a nice slideshow with Views Slideshow module.
https://drupal.org/project/views_slideshow
http://www.ostraining.com/blog/drupal/views-slideshow-in-drupal-7/
http://www.youtube.com/watch?v=sXh8Ng9QNaA

Drupal7 Views module

Although Views module is one of the most popular modules, it's complex to use it until you get used to it. You should take your time to learn how to use it. There are lots of good tutorials online.
Have fun!
https://drupal.org/project/views
https://drupal.org/node/1960048
http://www.youtube.com/watch?v=3L9JLZOb_LQ
http://www.templatemonster.com/help/drupal-7-how-to-use-views-module-and-editconfigure-it.html
http://drupalize.me/videos/overview-views

CSS @media screen

The following code defines maximum width of the browser and set an image file to the background. The image file is set to fit the size of browser. Therefore, the background image always fit in the browser size.
http://stackoverflow.com/questions/4189868/what-does-media-screen-and-max-width-1024px-mean-in-css
http://www.w3schools.com/css/css_mediatypes.asp
-----------------------------------------------------------------------------
<html>
<head>  
<title>Max width test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head> 
<body>
    <img class="bg" src="images/wallpaper.jpg" alt="" />      
</body> 
</html>
-----------------------------------------------------------------------------
img.bg{
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;;
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px;){
  img.bg{
    left: 50%;
    margin-left: -512px;
  }
}
-----------------------------------------------------------------------------

Drupal7 Drupal Commerce

You must not miss this module if you want to build an ecommerce website with Drupal. Although it's very useful, you need to take your time to understand the usage and functionality of this module.
https://drupal.org/project/commerce
http://codekarate.com/daily-dose-of-drupal/drupal-commerce-overview

Drupal7 function t

You probably see this function often when you develop Drupal modules. "t" can translate text(strings) and display the translated text. You should get used to this function. Let's practice.
https://api.drupal.org/api/drupal/includes!common.inc/function/t/6

Drupal7 function theme

"function theme" display theme output. There are lots of APIs for theme processing. It's worth exploring this function.
https://api.drupal.org/api/drupal/includes!theme.inc/function/theme/7
http://drupal.stackexchange.com/questions/15652/where-is-links-system-main-menu-defined

Drupal7 Panels Frame module

If you install this module, you can create new layouts combining current layouts. Bootsrap framework provides many types of layouts of panels frame. You will have more choices by installing Bootstrap and Panels Bootstrap Layouts.

Panels Frame
https://drupal.org/project/panels_frame
Bootstrap
https://drupal.org/project/bootstrap
Panels Bootstrap Layouts
https://drupal.org/project/panels_bootstrap_layouts

 

Drupal7 Variable module

This module allows you to have your own variables for Variable API and administration interface.
It is usually used only by developers. Complex but useful for developers.
https://drupal.org/project/variable
http://www.lullabot.com/blog/article/module-monday-variable
http://www.youtube.com/watch?v=aMRTqb5_jDo 

Drupal7 Features

The features module may be complex and confusing because of its name and function.
It allows you to do the capture and management of features in Drupal. A feature is a collection of Drupal entities which taken together satisfy a certain use-case.
https://drupal.org/project/features
http://www.youtube.com/watch?v=DxRBEaD9JCA

Drupal7 ThemeKey

ThemeKey is the module that allows you to set up theme-switching rules. The rules allow a theme to be automatically selected depending on current path, taxonomy terms, language, node-type, and other properties.
https://drupal.org/project/themekey
http://mustardseedmedia.com/podcast/episode52
http://www.tekritisoftware.com/change-drupal-theme-using-themekey-module

Drupal7 Void menu

If you want to have your own tags that have special values in the Drupal menu system, "Void menu" allows you to do that. You can set your own value to 10 different void tags and use them in the Drupal menu system.
https://drupal.org/project/void_menu
http://mrtheme.com/drupal/drupal-7-module-void-menu

Drupal7 Strongarm

Strongarm module is a little bit complex. It allows builders to override the default variable values that Drupal core and contributed modules contain. It's necessary to take the time to get used to it.
https://drupal.org/project/strongarm
http://codekarate.com/daily-dose-of-drupal/drupal-7-strongarm-module

Drupal7 Panels In-Place Editor

If you install Panels module, you should enable Panels In-Place Editor.

You feel it's easy to move or edit panels with the user-friendly interface.

Drupal7 Module Filter

Module filter module is pretty handy. You have to install many modules if you know Drupal. Module flter will help you reduce time to check what modules you install.
https://drupal.org/project/module_filter

You need to scroll the browser until you find the modules you want to check.

After installing and enabling Module filter, you can click the name of the category which each module belong to.

Drupal7 hook_field_formatter_info()

I created a new module. I created moduletwo.info and moduletwo.module in "moduletwo" folder:(\sites\all\modules\custom\moduletwo)
https://api.drupal.org/api/drupal/modules!field!field.api.php/function/hook_field_formatter_info/7
-------------------------------------------------------------------------------------------
[ moduletwo.info]

name=moduletwo
description=2nd test Custom module
core=7.x
package=Custom

file[]=moduletwo.module
-------------------------------------------------------------------------------------------
 [moduletwo.module]

<?php
function moduletwo_field_formatter_info()
{
    return array(
        'text_oddstyle' => array(
            'label' => t('OddStyle'),
            'field types' => array('text'),
        ),
    );
}

function moduletwo_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display)
{
    $element = array();
    switch ($display['type'])
    {
        case 'text_oddstyle':
            foreach ($items as $key => $item)
            {
                $element[$key] = array('#markup'=>"<span style='background-color:yellow'>" . $item['value'] . "</span>");
            }
            break;
    }
    return $element;
}
-------------------------------------------------------------------------------------------
You can see the new format type"OddStyle".

 
The text is displayed in yellow background.

Drupal7 customizing theme part.2

To apply the body width which a user enter, I modified the code in  page.tpl.php
-------------------------------------------------------------------------------------------------------------------
<div class="page-wrapper" style="<?php print theme_get_setting('body_width'); ?>"><div id="page">
-------------------------------------------------------------------------------------------------------------------
I should show the code for validate the width value.
-------------------------------------------------------------------------------------------------------------------
<theme-settings.php>

function holiday_body_width_validate($element, &$form_state){
  if(!empty($element['#value'])){
    $width = $element['#value'];

    if(preg_match("/(\d+)\s*%/", $width, $match)) {  // Perform a regular expression match
      $num = intval($match[0]);
      if(50 <= $num && $num <= 100) {
        return;
      }
      else {
        form_error($element, t('The value of body width must be between 50% and 100%'));
      }
    }
    else if(preg_match("/(\d+)\s*px/", $width, $match)){
      $num = intval($match[0]);
      if(800 <= $num && $num <= 1600) {
        return;
      }
      else {
        form_error($element, t('The value of body width must be between 800px and 1600px'));
      }
    }
  }
-------------------------------------------------------------------------------------------------------------------
If you enter the value less than 50%(or 800px) or more than 100%(1600px), you will see the following error message.

 

Drupal7 customizing theme part.1

Customizing theme is not so hard if you understand the structure of php files in theme folder.
I added the setting for the body width.
First, I added the setting of "body_width" in .info file.
------------------------------------------------------------------------------------------
<xxx.info>
; Settings
settings[body_width] = 75%
------------------------------------------------------------------------------------------
Then, I wrote the code which prompts users to enter the setting values in theme-settings.php.
------------------------------------------------------------------------------------------
<theme-settings.php>
function holiday_form_system_theme_settings_alter(&$form, $form_state) {
$form['theme_settings']['body_width'] = array(
    '#type' => 'textfield',
    '#title' => t('Body width'),
    '#default_value'   => theme_get_setting('body_width'),
    '#size' => 12,
    '#maxlength' => 8,
    '#element_validate' => array('holiday_body_width_validate'),
);
}
------------------------------------------------------------------------------------------
After that, go to "Appearance" menu, click the setting of your theme. you'll see "Body width" setting.

.

caniuse.com: Check the browser support for new technologies

If you need to check levels of browser support for new HTML or CSS technologies. Go to caniuse.com and use the useful tables which tell each browser's support for html tags or  CSS properties. You may know already. Otherwise, you should know from now on.
http://caniuse.com/

Grunt: The JavaScript Task Runner

If you are building big website with a bunch of Javascript files or CSS files, you should check "Grunt". It can watch your operation. If you edit a js file or css file, it automatically add your change to a unified file. Therefore, browser just need one js file and one CSS file, you can use other files to  write codes separately. That allows you to edit code easily. Then Grunt unifies all js files and unifies all CSS files

http://gruntjs.com/

CSS clearfix

There might be some different way of "clearfix". I recently found out the following code is better.

http://stackoverflow.com/questions/8554043/what-is-clearfix
http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
----------------------------------------------
.clearfix {width:100%;}
.clearfix:after {
        content: "";
        display: block;
        clear: both;
}
----------------------------------------------

CSS nth-child() Selector

This selector is very useful when you want to add styles to particular child of a list.  I just wrote a very simple sample. You can use many types of selectors.
http://www.w3schools.com/cssref/css_selectors.asp
http://www.w3schools.com/cssref/sel_nth-child.asp

"nth-child(2n)" add "background-color: red;" to 2nd and 4th children of the list.
"last-child" add "background-color: yellow;" to5th child of the list.

--------------------------------------------------------------------------------------------------------
 <HTML>
<nav>
          <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Work</a></li>
               <li><a href="#">Blog</a></li>
               <li><a href="#">Contact</a></li>
          </ul>
     </nav>
--------------------------------------------------------------------------------------------------------
<CSS>
nav li{
       display: inline; margin-right: 30px;
}
nav li:nth-child(2n){
       background-color: red;
}
nav li:last-child{
       background-color: yellow;
}
--------------------------------------------------------------------------------------------------------

Browser issue:Firefox in Windows8

I found a small issue when I was developing a website for a project. I've already checked the website in Chrome, then I started Firefox(ver.24) in Window8.When I hovered over text, the text became bolder. The text should not be changed when it's hovered. I thought there was something wrong with font property. I change font-family property "Open Sans" to "Helvetica", it worked. However, we had to use "Open Sans" for the project. When I turned off hardware acceleration, it never happened.
In conclusion, it happened with Firefox24 in Windows8 when the text is "Open Sans" although
I can't pinpoint yet.
If you have similar issue, please try to get more info about it.

https://support.mozilla.org/en-US/questions/936663
https://support.mozilla.org/en-US/kb/troubleshoot-extensions-themes-to-fix-problems

Font Awesome: beautiful and useful icons

Font Awesome is quite handy!
You can use a lot of fancy icon by simple code. Besides, you can use the icons as font.
You can control CSS font properties such as font-weight or font-size.
 http://fortawesome.github.io/Font-Awesome/
 http://fortawesome.github.io/Font-Awesome/icons/

----------------------------------------------------------------------------
<HTML>

<i class="icon-angle-right"></i>
----------------------------------------------------------------------------
<CSS>
 [class^="icon-"], [class*=" icon-"] {
         font-family: FontAwesome;
         font-weight: normal;
         font-style: normal;
         font-size:20px;
         color:#ffffff;
}
----------------------------------------------------------------------------

CSS Trick: Triangle

This CSS triangle is created by borders. 
The first triangle has border-color property: border-color:red black blue yellow;

Then, I changed the color; red to #3c939, others colors to transparent;
For further info
http://css-tricks.com/animation-css-triangles-work/?utm_source=dlvr.it&utm_medium=twitter
 

----------------------------------------------------------------------------------
<HTML>
<div class=”triangle1”></div>
<div class=”triangle2”></div>
----------------------------------------------------------------------------------
<CSS>
.triangle1{
         border-color:red black blue yellow;         border-style:solid;         border-width:10px;         height:0;         width:0;
}
.triangle2{         border-color:#3c939a transparent transparent transparent;         border-style:solid;         border-width:10px;         height:0;         width:0;
}
 ----------------------------------------------------------------------------------

CSS Trick: Arrow

Arrow is created by two rhombus. The first arrow is created by red and yellow rhombus. Then, I changed the color; red one to the same color as background, yellow one to white.
 

------------------------------------------------------------------------------------------
<HTML><li　class="arrow">
<a href="http://testsite1.localhost:8082/">Menu 01</a>
</li>
------------------------------------------------------------------------------------------
<CSS>
.arrow li a{
          position: relative;
          display: block;
          margin: 10px;
          padding-top: 20px;
          padding-right: 0px;
          padding-bottom: 20px;
          padding-left: 10px;
          background: #455560;
          color: #fff;
          font-weight: bold;
          text-decoration: none;
}
.arrow li a:before{
          display: block;
          content: "";
          position: absolute;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          top: 50%;
          right: 15px;
          width: 10px;
          height: 10px;
          margin-top: -5px;
          background: #fff;
}
.arrow li a:after{
          display: block;
          content: "";
          position: absolute;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          top: 50%;
          right: 20px;
          width: 10px;
          height: 10px;
          margin-top: -5px;
          background: #455560;
}

------------------------------------------------------------------------------------------

New tool for HTML5

Google Launches a new tool for building HTML web sites for mobile and desktop. You can try it now because it's free.
http://www.google.com/webdesigner/

Funny song

This video is just so funny...

php var_export()

var_export  outputs or returns a parsable string representation of a variable
http://us1.php.net/var_export
----------------------------------------------------
<?php
   $num = 3;
   $result = var_export($num, true);
   echo $result;
?>
----------------------------------------------------
3
----------------------------------------------------

ASP.NET Roles.GetRolesForUser Method

This method can retrieve a list of the roles that the currently logged-on user is in. You must know a user can have one or more roles. If you use only one role for a user, you should retrieve array[0] as shown below.

http://msdn.microsoft.com/en-us/library/8ak75t41.aspx
---------------------------------------------------------------------------------
public string GetRole(Guid id)
        {
            var userName = context.Users.Find(id).UserName;
            string[] role = Roles.GetRolesForUser(userName);
            return role[0];
        }
---------------------------------------------------------------------------------

Awesome light show, Vivid Sydney

From 24 May – 10 June 2013 We can enjoy amazing Light Festival,  Vivid Sydney. It include exciting music shows and fantastic light show! I really enjoyed it this time. Hope you feel the same way~

David Beckham to retire

Many people including me were shocked because soccer superstar David Beckham has announced his retirement. He sure is a legendary player and one of the most popular athletes in the world. There's no one else like him even if some players win more titles than him. We are pleased to say that he's the only one superstar who can make people all around the world happy. Hope he will return to the field as a coach or manager.

Drupal7 function theme_item_list

This hook returns a list or nested list of items. You'll see this hook when you theme a Drupal block. It's very important to understand because it gives you more control over theming process.
https://api.drupal.org/api/drupal/includes!theme.inc/function/theme_item_list/7

Drupal7 Naming conventions and Classes

We must be careful not to forget the naming conventions when writing code.
https://drupal.org/coding-standards#naming
--------------------------------------------------------------------------------------------------------
Drupal functions :
all lowercase, with words separated by underscore (_)   eg. hook_block_view()
Classes : 
"CamelCase" notation, with the first letter capitalized.  eg. public class TestCase
Methods :
"camelCase" with the first letter in lowercase.  eg. public function setUp()
* Underscores should not be used in class or method names.
--------------------------------------------------------------------------------------------------------

php implode()

It joins array elements with a string
http://php.net/manual/en/function.implode.php
http://www.w3schools.com/php/func_string_implode.asp
----------------------------------------------------------------------------
<?php
   $arr = array('This','is','a','implode()','test');
   echo implode(" ",$arr);
?>
----------------------------------------------------------------------------
<Result>
This is a implode() test
----------------------------------------------------------------------------

Drupal7 General utility variables

When we create a new theme of Drupal, we should know the following variable to understand the files such as page.tpl.php and template.php.

- $base_path: The base URL path of the Drupal installation. At the very
  least, this will always default to /.
- $directory: The directory the template is located in, e.g. modules/system
  or themes/bartik.
- $is_front: TRUE if the current page is the front page.
- $logged_in: TRUE if the user is registered and signed in.
- $is_admin: TRUE if the user has permission to access administration pages.

Site identity:
- $front_page: The URL of the front page. Use this instead of $base_path,
  when linking to the front page. This includes the language domain or
  prefix.
- $logo: The path to the logo image, as defined in theme configuration.
- $site_name: The name of the site, empty when display has been disabled
  in theme settings.
- $site_slogan: The slogan of the site, empty when display has been disabled
  in theme settings.
- $hide_site_name: TRUE if the site name has been toggled off on the theme
  settings page. If hidden, the "element-invisible" class is added to make
  the site name visually hidden, but still accessible.
- $hide_site_slogan: TRUE if the site slogan has been toggled off on the
  theme settings page. If hidden, the "element-invisible" class is added to
  make the site slogan visually hidden, but still accessible.

Navigation:
- $main_menu (array): An array containing the Main menu links for the
  site, if they have been configured.
- $secondary_menu (array): An array containing the Secondary menu links for
  the site, if they have been configured.
- $breadcrumb: The breadcrumb trail for the current page.

Page content (in order of occurrence in the default page.tpl.php):
- $title_prefix (array): An array containing additional output populated by
  modules, intended to be displayed in front of the main title tag that
  appears in the template.
- $title: The page title, for use in the actual HTML content.
- $title_suffix (array): An array containing additional output populated by
  modules, intended to be displayed after the main title tag that appears in
  the template.
- $messages: HTML for status and error messages. Should be displayed
  prominently.
- $tabs (array): Tabs linking to any sub-pages beneath the current page
  (e.g., the view and edit tabs when displaying a node).
- $action_links (array): Actions local to the page, such as 'Add menu' on the
  menu administration interface.
- $feed_icons: A string of all feed icons for the current page.
- $node: The node object, if there is an automatically-loaded node
  associated with the page, and the node ID is the second argument
  in the page's path (e.g. node/12345 and node/12345/revisions, but not
  comment/reply/12345).

Twitter Bootstrap: good framework for responsive website

This is a really helpful framework for building websites! It has lots of good stuff to create a  responsive website. Easy, quick and fancy!!!

http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bootstrap-to-create-a-responsive-website-design/