Bangalore is not left behind either. I am planning to organize the meetup and have a blast with all the WordPress enthusiasts in Bangalore. It’s going to happen at Langoor, which is an awesome web company (am a part of it too!). Here are all the details about the event. So if you are in anyway associated with WordPress, do drop by and have a WordPress blast

Also, help spread the message so that we can meet all the WordPress enthusiasts living in Bangalore. Do suggest some ideas of what all we can do at the party, some networking sessions, WordPress games?

If you have any doubts regarding the event, feel free to contact me at @sumeetchawla.

Looking forward to meeting you at the party!

Modern day browsers nowadays cache every front end resource like javascript or CSS style sheets. They primarily do this to increase the website performance. But this can be really irritating while one is in development mode and constantly modifying the javascript or css style sheets. The only way to see the changes is by doing a hard refresh or clear the cache of the browser.

So when I am working on front end stuff, I normally do ‘Ctrl+Shift+R’ (Cmd+Shift+R on OS X) or I go to the settings pane by pressing ‘Ctrl+Shift+Delete’ (Cmd+Shift+Delete on OS X) and then clear the cache. This normally disrupts the whole development flow.

Google’s Chrome browser is one of the most widely used web browsers out there. One reason it became so famous is because of its advanced “Chrome Dev Tools” for web developers. I really enjoy developing on chrome and most importantly, debugging java-script.

Recently, I discovered this small but awesome feature of the Chrome Dev Tools that helps you clear the cache and do a hard refresh easily, without breaking your flow or changing tabs. What ever tab you are on, just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.

It is a very small tip but is really useful in maintaining the workflow or reducing the number of steps to do the cache clearing task.

Here are two of the best tutorials extensively explaining all the features of the Chrome Dev Tools: Introduction to Chrome Developer Tools and Chrome Dev Tools: JavaScript and Performance

Hope this is helpful and improves your workflow. Let me know if you have any other tools of automating the development steps

1. jQuery Masonry plugin is really good but has an issue with images, specially if you don’t know the height and width of the image before hand. You need to set the height and width of the images to prevent overlapping of content blocks.
2. CSS3 masonry layouts are really fast and less heavy on the browser. But the biggest drop back being multi browser support. Also, all the content loads vertically in the columns. So if you have a lot of images in the grid, when the image loads without any particular height set, everything will get pushed vertically downwards and then move on to the next column.
3. Also, if you just have divs in the CSS3 version of the masonry layout, the divs sometimes get cut and move to the next column.

Update (12/1/2013)

You can prevent divs from getting cut while using CSS3 by applying

display: inline-block

to the divs instead of

display: block

Thanks to Michael Foley for this tip.

Hence, am writing this quick tutorial to take advantage of both the methods of creating a masonry layout as well as keeping the experience uniform through out all the browsers.

I am going to  use CSS3 as the primary mean’s of creating the masonry layout and having jQuery Masonry plugin as a fallback when the CSS3 multi column feature is not supported in the browser. Let’s get started

Step 1: Set up jQuery and the HTML template

Add jQuery to your HTML page’s head section. I would recommend using Google’s CDN to add the jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Wrap the collection of items you want to arrange in the masonry layout in a div. Make sure to add a class to each item to customise them further and also use in the masonry plugin.

<div class="container cols">
        <img class="box" width="300" height="220" src="http://farm9.staticflickr.com/8436/7787073628_5fff9a70d1_n.jpg" alt="Yahoo! Hack 2012 India">
        <div class="box one"></div>
        <div class="box two"></div>
        <img class="box" width="300" height="202" src="http://farm9.staticflickr.com/8431/7787083378_933c87b6fd_n.jpg" alt="Reid Burke Node.js Presentation">
        <div class="box one"></div>
        <img class="box" width="300" height="300" src="http://farm9.staticflickr.com/8360/8332274557_25fc9df0d9_n.jpg" alt="Good Read on a Lazy Afternoon">                
        <div class="box three"></div>
        <img width="300" height="225" src="http://farm9.staticflickr.com/8448/7787081028_39feaf1405_n.jpg" alt="Pictrendz Winners" class="box">
        <div class="box two"></div>
        <img class="box" width="300" height="300" height="202" src="http://farm9.staticflickr.com/8075/8321349902_e89372006b_n.jpg" alt="Afternoon Workspace">
        <div class="box five"></div>
        <div class="box one"></div>
        <img width="300" height="225" src="http://farm5.staticflickr.com/4148/5083309354_cb2dc8c911_n.jpg" alt="Durga Puja" class="box">
        <div class="box two"></div>
        <img width="300" height="225" src="http://farm4.staticflickr.com/3482/3948152628_66ea9d4856_n.jpg" alt="Frog" class="box">
        <div class="box six"></div>
        <img class="box" width="300" height="202" src="http://farm8.staticflickr.com/7117/7787080134_2cd4f6dcf8_n.jpg" alt="Winning Moments">
        <div class="box three"></div>
        <img width="300" height="225" src="http://farm3.staticflickr.com/2774/4019603631_890528fd86_n.jpg" alt="Diyas" class="box">
        <div class="box two"></div>
    </div>

If you will notice, we have provided proper width and height to each image element to prevent overlapping during jQuery Masonry and vertical content pushing while implementing the CSS3 version.

Step 2: Using CSS3 to implement masonry layout

First let’s style our masonry brick elements. Nothing much to do here other than providing bottom margin to have some vertical spacing between each brick element.

.box{    
    display: inline-block;
    width: 300px;
    margin-bottom: 20px;
}

Now implementing multi columns using CSS3 is really easy. We just need to use the CSS3′s multi column attribute and provide the number of columns and the column padding.

.cols{
    -moz-column-count:3;
    -moz-column-gap: 10px;
    -webkit-column-count:3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}

Step 3: Adding CSS3 Animations

Adding some animation to the box elements gives a smooth, modern feel to the whole user experience. We will add some CSS3 transitions to the box elements.

.box{
    display: inline-block;
    width: 300px;
    margin-bottom: 20px;
    -webkit-transition-property: left,right,top;
    -moz-transition-property: left,right,top;
    -ms-transition-property: left,right,top;
    -o-transition-property: left,right,top;
    transition-property: left,right,top;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -ms-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

CSS3 based masonry layout has successfully been setup!

Step 4: Implementing Masonry layout using jQuery Masonry plugin

For implementing the jQuery method of Masonry, all we need to do is, import the masonry plugin and initialise it. Always try to add the javascripts at the bottom of the page. This improves the overall loading time of the page. While initialising the masonry plugin, we are just going to provide the box name, column width and the gutter between columns.

$(document).ready(function(){
	$('.container').masonry({
	  itemSelector: '.box',
	  columnWidth: 300,
	  gutterWidth: 20
	});
});

Step 5: Adding jQuery Masonry plugin using Modernizr

In step 3, we completed the CSS3 version of the masonry layout but as a responsible web developers, we can’t stop the project right there. The CSS3 version is super fast, performance wise. But it is not a cross browser solution. Hence, in the previous step, we got the jQuery Masonry plugin to set up the masonry layout for us. Now let us look at how we can perform step 4 only when the browser does not support CSS3 multi columns. This is where Modernizr comes in. This is a tool which helps you detect what all CSS3 features are supported in a browser. Based on that, you can perform various functions or have a javascript fallback for a particular CSS3 feature. In our case, the masonry layout. So let’s add the modernizr script in the head section of our page. Why in the head section? Modernizr should be imported in the head section so that it can detect the css3 features as fast as possible.

<script src="js/vendor/modernizr-2.6.2.min.js"></script>

Now at the bottom of the page, where we included the jQuery script, we need to add the modernizr script to check if the browser supports multi-columns. If it does, then we do nothing, but if it does not support the feature, then we load our masonry plugin and also the script to implement it.

<script type="text/javascript">
    Modernizr.load({
      test: Modernizr.csscolumns,
      yep : '',
      nope: ['http://masonry.desandro.com/jquery.masonry.min.js', 'js/main.js']
    });
</script>

In what way do you implement a masonry layout? Do you use the masonry plugins, if yes, then which one? Or do you know any other better way of implementing a masonry layout? Let us know

This template can be used to run a Fashion oriented blog or even create the homepage for a fashion based e-commerce website. If you want to be adventurous, you can modify the template and use it for any other general purpose blog too. Do let us know if you need any help or any other category of free template.

Here are some of the previews of the chrome extension user interface and features.

Features

• One click generation of HTML elements.
• Select text from page to convert.
• Copied to clipboard automatically.
• Notifications to confirm conversion.

The Extension Pop Up Window

You can just click on the Listify icon on your browser to open the pop up window. Just paste the text, configure the settings and convert text into html elements.

Context Menu Option

The chrome extension has a feature of converting text to HTML elements from the browser page directly. You can do this just by selecting the text. You can even select the type of list you want that selected text to be converted to. As easy as that.

The best part about this extension is that, as soon as you convert the text to the HTML elements, the complete generated code is copied to the clipboard so that you can go ahead and paste it in your code, saving precious time to concentrate on other important things.

Save Settings

As mentioned above, you can directly convert text to HTML elements from the browser page. For this purpose, you can save the “delimiter” or the “ignore digits” settings in the extension pop up window.

Priceless Feedback

Help us make the tool better so that we can help increase your productivity even further. What more features would you like? Does the tool help you while developing HTML pages? Is it fast enough? We would love what ever feedback you have regarding the extension or the Listify tool as a whole.