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/