Get duplicate group is one of the key issues. Flutter use javascript serialize function to allows user creates unlimited group of the input fields. Unfortunately, the default function to presents the group of values is not that accurate.

Default methodology to get duplicate groups

Flutter presents document on how to get the duplicate group here.

getGroupDuplicates ($fieldName);

This function return the number of duplicate group by the given field name. Then, developer need to loop through this number and use get function to present their desire fields. Please find an example of the usage below.

$count = getGroupDuplicates("myField");
for($i = 0; $i < $count; $i++):
echo get("myField", $i);
endfor;

The problem

Code above seem to be fine if user add group and click update at every time. However, if user decided to add group and remove it, then add another one before click on update/publish button – it will generate the interval between group index. For example, instead of grouping like myField[0] –  myField[1] –  myField[2] the group index may become myField[0] myField[3] myField[5].  The first case will be fine to use default method but the later one will have the problem as value of second index will be disappeared and the loop will never meet the index 5.

The solution

To avoid this issue, developer need to do manual query for the number of duplicate group, plus the index of each group number. Please consider the code below.

Function

function getGroupOrderIndex($field_name, $pid = NULL){
    global $post,$wpdb;
    if (!$pid) $pid = $post->ID;
    $fields  = $wpdb->get_results("SELECT DISTINCT group_count FROM " . RC_CWP_TABLE_POST_META . " WHERE post_id = " . $pid . " AND field_name = '" . $field_name . "' ORDER BY order_id ASC");
    foreach($fields as $field){
       $indexes[] =  $field->group_count;
    }
    return $indexes;
}

This function query the index of each group by the given field name (not just the amount). Copy and paste the code above to functions.php in the theme folder. Then replace the default usage with the following code in your theme file.

Usage

$groupIndexes = getGroupOrderIndex("myField");
foreach($groupIndexes as $index):
echo get("myField", $index);
endforeach;

That’s it. Please excuse my English, if you have any question about this, feel free to use the comment below.

The Benefits

Having main domain sitting in sub directory, it will be easy for website maintenance purpose. For example, you can make a backup/restore of files in the main domain with out interrupt the add-ons domain’s files. For example, if you have main domain under root of public_html, once you make zip to compress public_html folder, everything including add-ons’ files will be zipped and they all will be reset when you restore (you can’t restore it separately ).

In addition, move main domain to sub directory prevents global access to add-ons files. For instance, if public_html recognized as a start of main domain folder, add-ons files may accessible at http://main-domain.com/add-on1/add-on_files.files.

.htaccess is a solution

Fortunately, Apache server provide a very handy mod-rewrite module, .htaccess. This file can overwrite the server setting and redirect all requests from main domain to the target sub folder. Simply put the code below in .htacces in public_html folder. Replace main\-domain.com with the actual main domain’s name. Don’t forget to use escape string (\) in RewriteCond as it use regular expression to determine the match. For example if your domain spell like www.my-domain.com, you need to use it as www.my\-domain.com. For more information google for .htaccess regular expression.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www.)?main\-domain.com$ [NC]
RewriteCond %{REQUEST_URI} !^/sub\-folder/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /sub-folder/$1
RewriteCond %{HTTP_HOST} ^(www.)?main\-domain.com$ [NC]
RewriteRule ^(/)?$ sub-folder/index.php [L]

How it works?

line 1 is to ensure that server already know that you going to use mod-rewrite

line 2 – if the request from http is main-domain.com or www.main-domain.com go to next line (else abort)

line 3 – if the request destination is not the folder /sub-folder go to next line

line 4 – if the requested name is not an existed file in public_html directory

line 5 – if the requested name is not an existed directory in public_html directory

line 6 – forward request to /sub-folder/

line 7 – if the request domain is main-domain.com (with out any string afterward), go to next line

line 8 – forward request to the default file under sub-folder directory (in this case, index.php)

That’s it. If you never experience with .htaccess, it will be a little bit confused. Therefore, just copy .htaccess code and replace your main-domain and sub-folder.

Please feel free to use comment below if you need help.

Forms

1. Show password in textbox field – This feature allow you to view password in textbox password field. This helps when you forgot the password that is already saved in the browser. It is also useful when your application need to test the returned value in password field.

2. Display form detail/information – save your time finding the attribute of form elements by either show the detail next to the element or display the information in the nice looking table.

3. Convert form method - Change POST to GET method, so the variable and data will show on the URL address bar. This help you verify the received POST value without writing the code.

4. Populate form field - Auto fill the form element on screen. This help you fill out data on the form. Imagine if you have 20 elements on the screen that is needed to test, Only one click, all element are filled and ready to process.

5. Enable form fields - it is a nice user experience to disable form fields that should not be used. However, the server side need to be coded to validate all the data again to ensure the security. This feature allow you to enable the unreachable fields, then you fill test data and get feedback from server side.

CSS

6. Disable style – allow you to disable every css styles or some styles on the desire media.

7. View style information (Ctrl Shift Y) - this feature is compatible with Inspect Element in popular Firebug plug-in. It allows you to move the mouse over the element on the screen and retrieve the CSS information.

8. Edit CSS (Ctrl Shift E) - Again, same as Firebug, you can edit the style on the fly. This feature will list all style sheet that involve the current web page. The change will suddenly appear once you type the new code. Web developer plug-in also allow to save the modified version of style sheet into files. Therefore, after change, you can just copy and replace the old one on the server.

Resize

9. Display window size in title - Show the size of current browser’s window on the title panel.

10. Resize window to specific dimension - This help you place the specific dimension numbers for resizing. The resize feature help you analyze the appearance of website in different screen resolutions. Check Wikipedia for the list of screen resolutions (do not worries to the computer in the last 15 years)

Miscellaneous

11. Clear private data – Save your time doing Tools > Clear recent history > Detail > Clear now on Firefox menu.

12. Display ruler - This feature is compatible with MeasureIt plug-in. The browser will allow you to create a movable ruler and measure the element on the page.

13. Show comment – allow browser to display the content inside HTML comment (<!– content –>)

14. Show hidden element – Visible the hidden element on the screen.

15. Edit HTML – Again, you allow to edit HTML and see the result on the fly. (Firebug inspection comparable)

16. Small screen rendering - See how your website appear on the small media screen like iPhone, Black berry

Images

17. Disable images - see how your website look like with out images

18. Display alt attribute - Check image alternative text on the screen. This useful when you check for images for SEO.

19. Display image dimension – See the dimension of images on screen. This help when you want to replace the old image with the new same size image.

20. Display image file sizes - Show all file sizes of images on the screen. So you can see how each image effect your website loading time.

21. View image information – Display all images information in a nice looking table.

22. Find broken images – Firefox 3.5 not show the images that unreachable. This feature will show the list of broken images in the new window.

Disable

23. Disable cache – Browser keep cache files in order to reduce the time loading same page in the future. However, sometime cache files make the website not up to date and you cannot actually see what happen after you change the code. Disable cache when you need to do a regular change and hit browser refresh.

24. Disable JavaScript – use this feature when you want to see how your application work in the browsers that may not support JavaScript.

25. Disable Java - again, disable Java. So you will know what will your visitor see if their computer have not install the Java run-time environment.

26. Disable page color – see your website without color. This may useful when you implement application for mono screen media like old mobile.

Cookies

27. Disable cookies - an option to disable every cookies or just one specific part.

28. Clear cookies – again, you are able to clear base on your desire cookies type.

29. View/Edit/Delete cookies information – this feature allow to view, edit and delete the specific value inside each cookies. It also good to make sure that cookies create by your application is encoded. This will ensure some security level of your application.

30. Add cookies - web developer plug-in even allow you to add cookies on the fly.

Outline

Outline is one of the useful feature that allow Firefox to mark specific element on the screen.

31. Outline frame – allow you to see what part of website are compose of frame element.

32. Outline heading – this feature mark up each heading level in different color. For example, heading 1 will surround by red box and heading 2 will surround by green box. You can see the overall content structure and determine the practice for SEO.

33. Outline links - outline specific link types.

34. Outline table - allow you to see each part of tables on the screen.

Information

35. View color information – allow you to see the list of color and code for each web page. This function is not compatible with Color Zilla plug-in. However,  the strong point is you can see the overall of the color used in the website. This is useful when you study color design of another website.

36. View header response – This feature is able you to see the hidden header response of each page. The normal page should return 200OK and the missing page should return 404. The header response it the only way that search engine robot can determine the existed web page. If your 404 page return 200OK, Google will think you are trying to cheat.

There are a lot of information that you can retrieve by this feature of web developer plug-in. 35 and 36 are what I’m regularly use.

Tools

37. Validate your code – tools section allow you the validate various type of code. For example, you can validate HTML, CSS, RSS and links.

I believe that Chris Pederick has put a lot of time and effort to implement Firefox web developer plug-in. If you like his plug-in, be nice to him. Buy him a beer by donate for Firefox web developer plug-in. I’m quite sure that what we get is worth than a glass of beer.

Microsoft’s responsibility become yours

However,  your bright life may become darker, your holiday plan need to be canceled when client call you and said “Oh! drop-down navigation is not working, can you fixed that please?”.  Not yet, after few minutes, the same client call you again and said “What the fu-k of your project, 20 customers canceled the orders because the check out button does not work!”. Then, you apologize and rush up to web statistic system. The graphs on the screen say  ”Yes sir, it was Internet explorer”.  Then, it will be the end of your holiday and the end of another business with this client and all of his friends.

As web developer, you cannot call back to the client and told them that it was Microsoft shit, because now it is become your shit. The above scenario should not happen or happen only once for your first project, or you will end up web development life and continue feeding pigs at the farm down the suburb where computer is not the first equipment.

The statistic of browser usage in 2009

The Browser Statistics from w3schools presents the number of internet browsers usage from 2002 to 2009. Briefly, in 2009 there are 47% of internet surfer use Firefox. Beside, 40% of user use IE6-7-8 (hm..m.. this percentage probably come from executive users who do not know much about technology issue. However, they involve directly to money in web developer pocket). By the way, the rest are Chrome, Safari and Opera.

You may believe that “Firefox is the best internet surfer that only need to be installed in your OS”. However, according to browser statistics from w3school, you may have to change your idea to “Firefox is not only best web browser because some people choose to surf website with chrome and opera, and some are using Safari as Apple fever. Most of all, a lot of people trend to use IE as it was initially integrate to Microsoft system at first purchased”.

The purpose of this article is to remind the beginner not to overlook the cross browser testing issues. However, it is not cover all detail of how each web browser act different in one particular website. The only thing you need to know is IE was suck when browsing CSS and JavaScript.

Download web browsers that will involve your life

Here is the list of  browsers to download. If the browsers in the list below are not installed in your OS and you are web developer, I suggest that you should download it now.

IETester – For one install, you get IE5.5, IE6, IE7 and IE8 to test your project. No need to visit Microsoft.
Download IETester

Multiple IEs – If you think IE5.5 is not old enough, Multiple IEs provide you a set of IE3, IE4, IE5 and IE6. If the browser crash during the test, no panic. It is the common behavior of Microsoft’s browser.
Download Multiple IEs

IE Standalone – This is an optional. If you are decided to install Multiple IEs to get an older version of internet explorer, you may upgrade your default IE to IE7 or IE8. After that, download and install standalone of the missing version. IE Standalone allow you to run another IE version separated from the default IE.

Download IE7 Standalone
Download IE8 Standalone for XP
Download IE8 Standalone for Vista
Download IE8 Standalone for Window Server 2003
Download IE8 Standalone for Window Server 2008

Firefox – Yeah, here is something more relax. Be aware when you install too much plug-in, the browser will pretty much slow down. If you get a chance, tell everybody about firefox. Then, we can change the world.
Download Firefox 3.5

Google Chrome – Google apply to KISS approach (Keep It Stupid and Simple) again. The browser is a light and quicker. However, because the faster browsing, they have to keep the high cache files which sometime caused the browser not up to date when you hit refresh button. Use it when you doing a research on internet. Introduce it to Grand mom, Grand dad and uncle Bob. They will love it!
Download Google Chrome

Safari – If you are one of Apple’s Fan, here we go!
Download Safari

Opera – Another alternative light weight browser, there are no CPU hunger by using Opera.
Download Opera

That is all of my suggestion. If you have another additional web browser that should be tested before delivery web project, please use comment below.

SQ3R is standing for Survey, Questions, Read, Recite and Review. The main purpose of its practice is to let you emphasize the right point of any issues you are going to study. Many students always focus on useless paragraphs and/or get confuse in the current paragraph without realizing that the answer is just sitting in the next section.

S – Survey

If you racing in a rally competition without survey the road you are going to drive, you will move very slowly, get mad at every parting, and end up with wrong direction.

Reading is applied to the same conception. You are required to know what you are going to read. When you get main issue to study, you may not able to demonstrate the sub-issues that you should know. You may spend almost of your energy to the first chapter but you may too tire to read the rest. Quickly survey through each sections of your document, will help you identify the priority of any points and let you know what is need to emphasize. Here is what you should weight on when you do a quick survey through your document.

• Title and heading – title and heading always carry the main concept in short. The entire paragraph that you are going to read will point to title and heading.
• Illustration and graph – picture speak thousand words. One picture may shorten your study curve of the whole page.
• Introduction and conclusion - Introduction section will tell you what you are going to learn and conclusion will tell you what you have learn.
• Noticable text – any italic, underline or bold text always carry some important meaning that the author try to emphasize.

Q – Questions

After survey the whole chapter, you would get a brief idea of what will go on along your study. Now, it is a time to setup your milestone. Try to write down any questions you can think about on the paper. If you ever did an open book exam, you may notice that when you read the question and then try to get the answer by scanning through document, you will be able to get the whole ideas of the exam within a limited time. The best way to identify the questions is to use WH questions like “what”, “where”, “when”, “why”, and “how”. Here are the parts that you should put your questions on.

• Title and Heading – again, title and heading always hold the most important meaning
• Introduction and summary - you have to understand introduction and summary, then ask yourself why it work like that? how it work that way? etc
• practice questions – if your document contains the practice questions, why not use them as one of your milestone

R1 – Read

The game is starting now. You have to go through the milestone you have created. Try to answer all the questions as much as possible. Keep in mind that, each question wills indicates how close between you and your goal. At this stage, do not enjoy the view along the way. Try to reach each question as soon as possible, ignore any unrelated and confused issues while you are reading. We will come back to do that later.

R2 – Recite

Now you should get the background and most concept of your study. However, there may have some issue that you think it is also important. Recite your questions and answers. Identify the addition questions and answers that you might overlook in the previous process. Reorganize the concept you already got, again, into the logical way. You may draw your own picture, create your own words or use concept diagrams like mind map or directory tree to express the ideas. After this stage, you should familiar with all issues and almost ready finish your study.

R3 – Review

Unbelievably, you will likely to forget any topic you have studied by the next couple of days and completely wash out in a few months or year.  However, as we already create the concept diagram in the recite process, we can use it as a revision references. Review your study frequently at the very beginning and then, you can do it once a month or once a week. In the first week, you may revise your diagram everyday by just have a quick look. In the next couple of week, you may revise it only once a week. After that, you may revise it only once a month to make sure that you still remember understand everything. Please note that you are not required to take much time for the revision. This probably take only 5 – 10 minutes for each revision.