TechBrij

3 Practical Uses of Zen Coding

Brij — Sun, 19 Feb 2012 09:19:30 +0000

You must know Zen Coding if you are Front End Web developer. Zen coding allows for fast coding and editing in HTML, XML, XSL, and other structured code formats. It uses CSS selectors like syntax and generate full code(write less do more). It expands abbreviations into complete HTML structures. Zen coding plugin is available for almost all top text editors(Notepad++, visual studio, Dreamweaver , TextMate, Sublime Text, Coda, Vim ..etc). In live demo, First write abbreviations and press Ctrl+, to expand abbreviations.

Syntax: Let’s see basic rules

Symbol	Description	Example
tag	Element Name	div
#	element identifier	div#myID
.	Class name	div.myClass
>	Child Element	ul>li
+	Sibling element	div.Header+div.Content+div.Footer
*	to create multiple elements	ul#menu>li*3>a
$	item numbers	div.item$*3
$$	multi times numbering	div#id$.class$$*3

1. As your default template:

For new page, no need to write full common structure like html, head, body tags etc. just type html:xt for xhtml1-transitional or html:5 for HTML5 structure. You can find other short syntax here. You can create your default template of page in zen coding syntax and use it again and again.
Example:

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

will generate following code:

2. Create list/drop-down list Quickly:

“Wrap with Abbreviation” is power of zen coding. It does time consuming data formatting or repeated tasks quickly. Suppose you have to create country drop-down list from excel data. Copy country names from excel and paste in editor.
Now Ctrl + H and use

select#country>option#$*

Similarly, you can create menu/static list as in example of first point quickly.

3. Easy in social Sharing:

It’s easy to share abbreviations instead of whole HTML template in social media, specially in twitter where char length is limited. When HTML template is shared, it gets distorted and very hard to understand. but in abbreviations, there is no role of formatting and easy for users also.

Zen coding has changed the way of writing HTML code and It’s making me more lazy Share your opinion and tips about Zen coding.

How to Test Responsive Web Design

Brij — Sat, 11 Feb 2012 17:29:37 +0000

My previous post explains basic steps for responsive web design to make the site mobile, tablet and desktop compatible. Now, we have to test the website in different resolutions. You can test it simply by resizing browser window, but It’s not convenient resizing to a specific dimension(width and height) each time. Here are tools or utilities to test effectively.

Screenfly:

Screenfly is a web based tool, very handy when you don’t know device resolution. you have to enter URL and select device. I like its neat and clean UI.

Responsivepx:

Responsivepx is a web based tool. You have to enter URL and select height and width to test.

Tool by Matt Kersley:

Matt’s tool is iframe based online tool. Simply enter the URL of your website and test it in different browser resolutions at a time.

Web Developer Extension:

Web Developer extension adds various web developer tools to a browser. The extension is available for Firefox and Chrome. It’s my favourite way to test responsive design. It can be used on local sites without internet connection. You can resize window to a standard dimension on single click and allows you to create your own dimensions by entering width and height.

I like “Display Window Size in Title” option because it is time saving. It displays the current dimensions(width and height) in title bar. It’s very helpful during resizing.

Hope, It helps. Share your opinion about how you are testing responsive web design.

Responsive Design: Make Your Website Mobile, Tablet, Desktop Compatible

Brij — Sat, 11 Feb 2012 13:39:10 +0000

Every client wants their website compatible with all platforms, whether user is accessing the site on a mobile phone, tablet, desktop computer or wide-screen. There are so many devices BlackBerry, iPhone, iPad, netbook, kindle..etc with different sizes and resolutions. It’s impossible to create a website version for each resolution. With Responsive Web Design technique, the website adapts the layout to the environment that it is being viewed in. It makes similar feelings for all platforms. You can see TechBrij as an example by resizing the browser window if you are on a desktop.

Steps:

1. In your basic theme for desktop browsers, See each element of web page and think for tablet and mobile view. You can use notebook pen for complex layout.
2. Change element dimension from pixel value to percentage value and make some additional changes to make it similar on same environment.

3. Use Meta tag to disable default mobile scaling to display web page fit on screen.

4. We’re going to use CSS3 Media queries, but Internet Explorer 8 or older doesn’t support it. So use media-queries.js to add media query support in IE.

5. Use CSS Media queries to define special CSS rules for different viewport width ranges/resolutions.

@media screen and (min-width : 750px) {
#content{float:left;width:60%;}
#sidebar{float:right;width:35%}
} 

@media screen and (min-width : 481px) and (max-width : 749px) {
#content{width:95%;}
#sidebar{width:95%;}
}

You can create separate CSS files for different Media queries.

6. Make images, iframe width flexible.

img {
	max-width: 100%;
}
iframe, object, embed{
width: 100%;
}

7. Test it.

These are the basic steps to implement responsive web design. Alternatively, CSS Frameworks like Less Framework 4, MQFramework, Foundation, Skeleton..etc are used for rapid development.

Resoures:

Media Queries for Standard Devices

Responsive Design with CSS3 Media Queries

Responsive Web Design, most complete guide

Responsive Web design creates a great custom experience for everyone. Share your opinion and about how you’re implementing responsive design.

4 Notepad++ Plugins Make You More Productive

Brij — Fri, 03 Feb 2012 18:26:36 +0000

In my previous Notepad++ post, I shared useful tips for fast development. You can extend Notepad++ by installing plugins. The beauty of the Notepad++ extension is that it allows you to add a specific feature or function, fully customizing your working experience. Here are some useful plugins to save time while working.

How to Install:

Default available plugins can be installed from the Plugins manager (via Plugins—> Plugin Manager—> Show Plugin Manager), select plugin and click on Install button. Other than, You can search the plug in with Google, Download it (usually dll file) and put into ‘notepad++/plugins/’ directory. Now, if your notepad++ is active, close it, and activate again. You will see your plugin in Plugins menu bar and automatically installed. If not show, maybe your plugin isn’t compatible.

1. Explorer:

Open your file in Notepad++ quickly using Explorer plugin. It has two sections: Folder tree box(to see directories-sub directories) and File box. Using bottom filter box, You can filter files to find in large listing.

Download Explorer Plugin

2. Compare:

No need to install other app to compare files, You can do it easily with Notepad++ itself. Open two files you wish to compare. Click Plugins > Compare > Compare, you’ll get differences highlighted. To off compare screen and back to editor window, Plugins > Compare > Clear Results.

Download Compare Plugin

3. MultiClipBoard:

It saves multiple copied items, you can paste it easily via either Multi Clip Viewer Box OR Ctrl+Shift+V.
You can enable MultiViewer box(via Plugins > Multiclipboard > Multiclip Viewer) which has list of copied text. Double click on any item in list to paste.

If you don’t want to touch mouse during typing, just press Ctrl+Shift+V, you will see copied text list with index number. Press index number to paste content.
It saves a bunch of time.
Download MultiClipboard plugin

4. Spell Check:

I needed spell check facility in Notepad++ for blogging. Spell check plugin adds this missing feature.
See here to setup spell check plugin. You need to install both Aspell Binaries and dictionary and configure path of bin folder in Notepad++ spell check plugin.

5. Bonus for Web Developers:

If you are a web developer, doing so much in javascript, xml or JSON, You may like following plugins:
JSLint: To run JSLint (The JavaScript Code Quality Tool) against javascript files
JSMin: To minimize code or format the code
JSON Viewer: To see JSON string in Tree View structure
XML Tools: to auto-close tags and provides many useful features.

Enjoy Notepad++ !!!

The Best Android Applications For Daily Use

Brij — Sun, 29 Jan 2012 17:37:06 +0000

Smartphones have entered in different business domains. Recently, Android Market exceeded 10 billion app downloads—with a growth rate of one billion app downloads per month. In my recent post, I explained basic things every Android user must know. Now it’s turn to apps. There are different type of apps, I’ve tested some apps and compiled a list which can be a part of your daily life. My objective is NOT to install so many apps, but app must be high productive.

1. FaceBook for Android:

No need of explanation !!!

2. Twitter for Android:

No need of explanation !!!

3. GTasks:
In the busy life, we can’t remember everything. GTasks is a To Do list app and helps you to getting things done. I don’t want to use separate service(another account) for todo list that’s why I selected this. It syncs with your Google tasks perfectly and have both local and Google account mode.

4. Merriam Webster Dictionary:

I don’t believe on internet or network connection. That’s why I selected this. It’s great dictionary for reference, education, and vocabulary building with offline support.

5. Opera Mini Web Browser:

It’s a web browser for mobile devices, It uses Opera’s servers to compress webpages so they load faster. It uses as little as a tenth of the data of normal browsers.

6. imo.im:

No need to install separate apps for GTalk,Skype, MSN, ICQ/AIM, Yahoo..etc. With its new tabbed interface, imo.im is an IM app that’s light, pretty and easy to use.

7. Google Goggles:

You can search by taking a picture. Goggles uses image recognition technology to recognize objects and return relevant search results. You can use it as Bar code or QR code scanner also. It means no need to install separate app to scan barcode/QR code.

8. Diigo’s Power Note:

I use Diigo bookmarks which automatically send bookmark to delicious also. Diigo provides Power Note Android app in which you can add, organize and sync text note, picture and bookmarks to your library. In desktop browser, you can mark webpages as “read later” and read it on the phone easily.

9. Google Reader:

You can follow all your favorite sites, blogs, and more, all in one place and see what your friends are sharing, and easily share any interesting articles you read. It syncs with the web version.

10. DropBox:

Dropbox is a free service that lets you bring all your photos, docs, and videos anywhere. With its Android app, you can view and edit all your Dropbox files in a sweet interface and even stream music and videos you’ve uploaded to Dropbox in its media player (or save for offline viewing).

11. TripAdvisor:

If you’re a traveler, This should be installed in your Android. It has a huge database of hotels, restaurants, flights, forums, things to do and much more just a one-click away from you. A nearby feature that will use your current location to find services next to you. “My saves” is a kind of favorites tab, where you can save the hotels, restaurants and any other service that you liked and you want to recommend.

Games:

12. Prince of Persia:

It’s my favorite game and have been playing since 1996 when I was reading in class sixth. I don’t like One screen One level game like Angry Birds…etc. You can see video preview of this game here.

13. Zombie Dash:

It’s a great game and combines the timeless appeal of classic arcade games with stunning graphics you have to see to believe.

For Indian Users:

14. HinKhoj Hindi Dictionary:

It’s easy to understand in mother tongue. It shows hindi words in devnagri fonts in addition to their phonetic transliteration to english.

15. Indian Rail Info App:

With this app, You can get information about Indian Railways like PNR Status, Find Trains, Seat availability, Arrival & Departure, Train Running Status and much more anytime anywhere, but you cannot book tickets using this app.

16. Mobile Number Tracker:

If you are getting calls from unknown number and want to find from where that person is calling. Use this app to find from which state/telecom operator a mobile number belongs to. It shows caller info during incoming call. You can also view the details of mobile number in the call log.
Note: The MNP ported numbers are not traceable by the app.

17. Free SMS India:

SMS has still a great role if user doesn’t have smart phones. With Free SMS India application, you can send free sms to any mobile number in INDIA using way2sms, fullonsms, site2sms and 160by2 gateway. It has very Simple GUI to avoid confusions.

Hope, It’s interesting for you. Let me know what apps you are using. Share your opinion and experience about apps.

Grouping Data in ASP.NET Gridview Control

Brij — Sat, 28 Jan 2012 17:53:16 +0000

In my previous post, I explained how to group HTML table rows with jQuery. This post explains How to do same thing using ASP.NET Gridview control on server side. The logic is same to check row by row. If data is same in next row’s cell, hide next row’s cell and increase rowspan of current row’s cell.

HTML:

Server Side:

I have created a generalize method ‘GroupGridView‘ to group data in the gridview.

void GroupGridView(GridViewRowCollection gvrc, int startIndex, int total)
    {
        if (total == 0) return;
        int i, count = 1;
        ArrayList lst = new ArrayList();
        lst.Add(gvrc[0]);
        var ctrl = gvrc[0].Cells[startIndex];
        for (i = 1; i < gvrc.Count; i++)
        {
            TableCell nextCell = gvrc[i].Cells[startIndex];
            if (ctrl.Text == nextCell.Text)
            {
                count++;
                nextCell.Visible = false;
                lst.Add(gvrc[i]);
            }
            else
            {
                if (count > 1)
                {
                    ctrl.RowSpan = count;
                    GroupGridView(new GridViewRowCollection(lst), startIndex + 1, total - 1);
                }
                count = 1;
                lst.Clear();
                ctrl = gvrc[i].Cells[startIndex];
                lst.Add(gvrc[i]);
            }
        }
        if (count > 1)
        {
            ctrl.RowSpan = count;
            GroupGridView(new GridViewRowCollection(lst), startIndex + 1, total - 1);
        }
        count = 1;
        lst.Clear();
    }

You have to pass 3 parameters:
gvrc: GridView Rows
startIndex: index of first column to be grouped(where to start grouping).
total: total number of columns to be grouped.

How to Use:

Before using this method, Make sure data is sorted in same order in which they are to be grouped. Bind the gridview and Pass the gridview rows, start index and total number of columns to be grouped in GroupGridView method and enjoy it.

	GridView1.DataSource = GetDataTable();
        GridView1.DataBind();
        GroupGridView(GridView1.Rows, 0, 3);

The above code will group first 3 columns of gridview.

Hope, It’ll save your time.

HTML Table Row Grouping with jQuery

Brij — Fri, 27 Jan 2012 17:45:43 +0000

It’s easy to group data in SQL statement, but if you have to display it using HTML table, It’s not drag and drop as in reporting environment. One way to group on server side and draw tr td accordingly. But If it is already created with tons of functionality attached, It’s risky to change. Don’t worry, you can do it easily with jQuery.

HTML:

Let’s take following HTML table as an example:


Category Product Size Price Shipping
Category-1 Product-1 Big 102 Free
Category-1 Product-1 Big 132 Free
Category-1 Product-2 Big 130 Free
Category-1 Product-2 Small 100 Free
Category-2 Product-3 Big 130 Free
Category-2 Product-3 Big 100 Free
Category-2 Product-3 Small 100 10
Category-2 Product-4 Big 150 10
Category-3 Product-5 Big 150 10
Category-3 Product-5 Small 120 10
Category-3 Product-5 Big 120 Free
Category-4 Product-6 Big 120 10
Category-4 Product-6 Small 120 10

Category	Product	Size	Price	Shipping
Category-1	Product-1	Big	102	Free
Category-1	Product-1	Big	132	Free
Category-1	Product-2	Big	130	Free
Category-1	Product-2	Small	100	Free
Category-2	Product-3	Big	130	Free
Category-2	Product-3	Big	100	Free
Category-2	Product-3	Small	100	10
Category-2	Product-4	Big	150	10
Category-3	Product-5	Big	150	10
Category-3	Product-5	Small	120	10
Category-3	Product-5	Big	120	Free
Category-4	Product-6	Big	120	10
Category-4	Product-6	Small	120	10

Script:

Before using the following method, Make sure the data is sorted. The logic is to check row by row if data is same in next row’s td, remove next row’s td and increase rowspan of current row’s td.

$(function() {
//Created By: Brij Mohan
//Website: http://techbrij.com
function groupTable($rows, startIndex, total){
if (total === 0){
return;
}
var i , currentIndex = startIndex, count=1, lst=[];
var tds = $rows.find('td:eq('+ currentIndex +')');
var ctrl = $(tds[0]);
lst.push($rows[0]);
for (i=1;i<=tds.length;i++){
if (ctrl.text() ==  $(tds[i]).text()){
count++;
$(tds[i]).addClass('deleted');
lst.push($rows[i]);
}
else{
if (count>1){
ctrl.attr('rowspan',count);
groupTable($(lst),startIndex+1,total-1)
}
count=1;
lst = [];
ctrl=$(tds[i]);
lst.push($rows[i]);
}
}
}
groupTable($('#myTable tr:has(td)'),0,3);
$('#myTable .deleted').remove();
});

groupTable method has 3 arguments:
$rows: jQuery object of table rows to be grouped
startIndex: index of first column to be grouped
total: total number of columns to be grouped

In above code startIndex =0 and total = 3 it means table is grouped by first, second and third column. After grouping, you need to remove deleted class elements like this:
$(‘#myTable .deleted’).remove();

you can use code, but need to keep CREDIT COMMENT. The idea came to implement this just one hour ago. So the code can be optimized. Anyway, let me know if you have any issue.

Display File Download Count in WordPress

Brij — Thu, 26 Jan 2012 11:21:57 +0000

In some posts, I’ve attached source code and files allowing user to download. Now I’m interested to check how many times file downloaded and how to display it with download link as in other sites. I found different WordPress plugins like WP-DownloadManager, Downloads Manager, WordPress Download Monitor, WordPress Download Counter..etc. All are doing file management perfectly, But I like WordPress Download Monitor the most. It allows you to upload files, store it on your server and share it with your readers. You can install and activate it easily as normal plugin.

How to Use:

It’s very easy to use. In your post page, Just click on down arrow icon, select file or upload file with details and click on save/insert button as in below image and It will insert the code look something like [download id="1"] which is parsed on viewing post.

Customize Format:

You can create your own custom template to show download file in your format.
Go to DownLoads > Configuration > Cusotm Output Formats
Enter Name and format using available tags {url},{title}…etc.

For above template, enter following code in format:



{title}
Download
{hits} total downloads, {size}

After saving format, you can select format from dropdown-list during inserting into post OR you can pass ID of format something like this

[download id="2" format="2"]

Customize URL:

By default, the download URL is in following format:

http://yourdomain.com/wp-content/plugins/download-monitor/download.php?id=1

You can customize it in DownLoads > Configuration > Custom Download URL and select one of ID, FileName or Title options. If you select filename, new URL will be

http://yourdomain.com/downloads/filename.zip

It’s good for SEO as well as user convenient.

Create a Download Page:

You can create a download page easily. Goto Pages > Add New > Enter [download_page] in post and publish it.

You will get page in default format having search box, popular posts and categorywise post. you can customize it by using available shortcode options. You can get details in plugin documentation.

This plugin is easily customizable and having full of features like category, images, supports external link and many more. You can get more in plugin documentation. Share your opinion and let me know how you are managing files and displaying their download count.

Month Range Picker using jQuery UI Datepicker

Brij — Sun, 22 Jan 2012 14:37:39 +0000

In this article, we’ll implement month range selection feature in which user can select start and end months to get monthly data and we don’t want to add one more external library for this if jQuery UI is already being used in the project. We’ll use jQuery UI date-picker to show month and year only to select month range.
By default, jQuery UI datepicker doesn’t provide to pick month and year only but we can achieve it by simply hiding calendar and displaying date in “MM yy” format.

HTML:

To hide calendar control, set display:none for calendar.



 From
 
 to

Script:

 $( "#from, #to" ).datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) {
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
            beforeShow : function(input, inst) {
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));
				}
				var other = this.id == "from" ? "#to" : "#from";
				var option = this.id == "from" ? "maxDate" : "minDate";
				if ((selectedDate = $(other).val()).length > 0) {
					year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
                    month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
					$(this).datepicker( "option", option, new Date(year, month, 1));
				}
            }
        });
		$("#btnShow").click(function(){
		if ($("#from").val().length == 0 || $("#to").val().length == 0){
			alert('All fields are required');
		}
		else{
			alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
			}
		})

In above code, to display month and year of selected value:

dateFormat: ‘MM yy’,

‘From Month’ must be less than or equal to ‘To Month’. For this, the minDate or maxDate is defined as per user selected value in ‘beforeShow’ event.

Live Demo

If you need month and year in integer format to pass in your query or stored procedure, you can take hidden field and set month and year value in ‘onClose‘ method and use it on server side. If you have to implement to select a particular month and get start and end date of the month, visit my this article.

Hope, It helps.

Run Your Custom Script Quickly with SSMS Tools Pack

Brij — Thu, 19 Jan 2012 16:38:10 +0000

Suppose you have to do a task repeatedly with different objects of database, for example, you have to generate code or stored procs of table in the specific format, you created your custom SQL script which takes table name and generate the code. But each time, you have to execute query and pass table name.
What’ll happen If you right click on the table and select your script to execute. It’ll save bunch of time as well as stop you getting irritated Let’s see how to do using SSMS Tools Pack.

SSMS Tools Pack:

It is the best free Sql Server Management Studio(SSMS)’s add-in having lots of features like Execution Plan Analyzer, SQL Snippets, Execution History, Search Table, View or Database Data, Search Results in Grid Mode, Generate Insert statements from result sets, tables or database, Regions and Debug sections, CRUD stored procedure generation, New query template..etc.
Website Link
Download Link

Steps:

Suppose you want to see total number of records in different tables.

1. Click on SSMS Tools > “Run Custom Script” > Options

2. Left side of dialog, Enter Shortcut ‘Total Records‘ and check Run checkbox

3. Right Side, Click on ‘Enabled On..‘ option and select ‘table’. It means this will appear on each table.

4. Enter following script

Select Count(*) from |SchemaName|.|ObjectName|

Here |SchemaName| and |ObjectName| are replacement texts. You can see available replacements options on ‘Replacement Texts‘ click.

Click on Save and OK button.
5. Now, Right click on any table > “Select SSMS Tools” > Run Custom Scripts > Total Records

You will get Total Records in result and no need to pass table name in query again and again.

Similarly, you can run your other custom scripts quickly. It is very helpful as a code generation tool. Let me know how you are using it.