The event aims to expose IT community of Kashmir to new trends in IT and boost their technical abilities and skills, besides aiming at attracting IT communities from outside to Kashmir. We provide all the basic needs, and hope that people interested in teaching and learning in an open environment come together to share their knowledge and experience.

Register for BarCamp Kashmir

Registrations are OPEN as of now. Register at BarCamp Kashmir 3rd Edition

Feeling nostalgic?

Recollect the previous event – BarCamp Kashmir 2nd Edition

Global CSS Reset

Different web browsers having their own defaults defined for most of the CSS properties and thus pose a problem in cross browser compliancy of front-ends. In order to address this, you should use CSS resets which brings the browser defaults to a same value across browsers. Various CSS resets are available in the web world, among which, Eric Meyer’s Reset Reloaded, YUI Reset CSS, Siolon’s global reset, Shaun Inman’s Global Reset & Tantek’s CSS reset  are notable. Personally I use Eric’s Reset Reloaded because it neutralizes virtually every default CSS rule of browser.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}

body {
   line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}

del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Easy Selectors

These are the valid CSS selectors to address a particular browser or browser version. Most of the time, this technique is used for Internet Explorer only, although we can use it with every other browser. Below is the usage of selectors for addressing different browsers.

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Opera versions 9 and below

html:first-child {}

Google Chrome

body:nth-of-type(1) p {
   color: #333333;
}

Apple Safari

html:lang(en)>body  .classname {}

IE Conditional Comments

This technique is used to address some CSS for Internet Explorer only and make other browsers to simply avoid it or report it as comment. It works by putting up your code in comment style IE Conditional tags.

<!--[if IE ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Again we can use different sytax to address a particular browser versions like

<!--[if IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

<!--[if lt IE6 ]>
   <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

You can read more about version targeting IE at quirksmode.org

Transparent PNGs

Although all the modern browsers support transparency for PNGs, yet again Internet Explorer 6 has a problem with it. IE6 displays a white patch beneath the PNG image. There are lot of scripts / techniques / solutions available to tackle this problem. One of the solution is to use HTC script with your page. Many other plugins and scripts are available to tackle this problem. jQuery pngFix, jQuery iepngfix are used alongwith jQuery. I personally use DD_belatedPNG.

According to its author

This is a Javascript library that sandwiches PNG image support into IE6 without much fuss

It has support for PNGs in background or in SRC of an <img/> element. It also fixes background-position and background-repeat properties of CSS, which creates a problem with other scripts used. It uses Microsoft’s buddy, VML to fix the issues.

Here is its usage

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');

/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
</script>
<![endif]-->

Fixing IE Box Model Bug

This is perhaps the most common and frustrating bug in IE 6 and below. It is caused due to IEs different approach in calculating the total size of a box. Let us say you write

.box {
   width:100px;
   padding:10px;
   border:2px solid #CCC;
}

According to W3C specifications, the total width of the box should be 124px, which all the modern browsers follow, while as IE calculates it as 100px only.

This deviation from the specs can cause lot of layout problems. IE 6 can actually get it right if you are in standards-compliant mode. There are various workarounds for this problem. Some of them are:

Box-in-a-Box

According to this technique, we simply use extra markup to fix the issue. Instead of using the padding on the main element, we insert another element inside it and use padding on it. Like

<div class=”box”>
  <div class=”box-inner”>
    Testing for box model hack
  </div>
</div>

In this case our markup will be

.box { width:100px;}
.box-inner {padding:10px;}

Simplified Box Model Hack (SBMH)

It uses the CSS parsing  bug of Internet Explorer to address the issue. This was first detailed by Andrew Clover

The structure for this hack is

.box {
   padding:20px;
   width: 100px;
   \width: 140px;
   w\idth: 100px;
}

The first line “width: 100px;” is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property “\width: 140px;” is for IE 5 and 6/quirks mode. The final line “w\idth: 100px;” will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px.

box-sizing

The newly introduced CSS3 box-sizing property allows you to choose which box-model your browser should use. The W3C box model is called `content-box` and the Internet Explorer box model is called `border-box`.

This can make it easier to control the size of elements and to make sizes behave the same across different browsers.

.box {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. Modern browsers will adopt the IE’s buggy box-model by setting this property.

Hover State

All the modern browsers support :hover pseudo-class for about any element, but IE 6 has the support for hover pseudo class on <a> element only (you need to set the href attribute for <a> element to get this working in IE6). To fix this issue with IE6, you need a proprietary fix for this.

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.

Download the script file and add this line in your CSS file, and you are done.

body { behavior: url("csshover3.htc"); }

Note that behavior URLs are relative to the html file, not to the CSS file like a background image URL would be.

Double Margin Bug

Most of the people working with Web will be familiar with IE’s double margin bug. The bugs arises when you float an element to one side and apply some margin on that side. Without any reason, it simply doubles that margin.

For example, if we do this,

.box {
   float: right;
   margin-right: 10px;
}

IE6 will double the margin (most of the times) to 20px without any reason. But this bug can be easily overruled by changing the display property of the floated element from block to inline. So the CSS will be

.box {
   float: right;
   margin-right: 10px;
   display: inline;
}

Stepdown problem in IE6

When you float elements of a fixed width, they will align themselves horizontally to fit the width of the parent element. At least, that’s how it works in most browsers. In IE6, the floated items will not be displayed in a straight line, but rather will appear to stepdown in bizarre, staircase-like fashion. This can be fixed by applying display: inline; property to floated elements.

The main attraction of firefox is its customizable environment for the users to meet their tastes and requirements in terms of themes and plugins. As themes were already available with the chrome, the introduction of extension system brings it closer to firefox in terms of customization.

Here I am listing some of the chrome extensions available for web designers & developers.

Chrome Web Developer Tools

This extension aims at replicating the Web Developer Toolbar of Firefox.

Our current goal is to develop a clone of the “Web developer toolbar” of Firefox.

The functions it offers to web designers are some standard ones like validation, disabling CSS, hiding images, outline tables and showing images with an alt description etc counting to around 40 different features.

Download Chrome Web Developer Tools

Web Developer Mini

Web Developer Mini is a handy tool which offers easy access to validate your CSS and HTML, view the Page Source, in addition to giving you direct access to BrowserShots (a screenshot generating app).

Download Web Developer Mini

Firebug Lite

This is the stripped down port of the firebug project to Chrome. Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. A similar functionality can be achieved by the inbuilt Webkit debugger.

Download Firebug Lite

Pendule

Pendule is a very useful extension that gives you a wide array of easy to use developer tools. Some of its features include: View Page Source, Color Picker, Display Ruler and Disable CSS. On top of that you also have some handy image tools: Hide Images, Show Alt Text, Show Dimensions and Show paths. And, to top it all off, it even has tools that will validate CSS, HTML and Feeds. The UI of this extension is fantastic

Download Pendule

Chrome Sniffer

Chrome Sniffer is an extension that allows you to inspect the web framework/CMS and javascript library running on any website. The extension will display an icon indicates the detected frameworks. Currently, this extension can detect up to 45 popular CMS and javascript libraries

Download Chrome Sniffer

BuiltWith Technology Profiler

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!

BuiltWith technology tracking includes widgets (snap preview), analytics (Google, Nielsen), frameworks (.NET, Java), publishing (WordPress, Blogger), advertising (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML,RSS), hosting software (Apache, IIS, CentOS, Debian) .

It will tell you what analytical tracking system they use, their Javascript library, server information; P3P policy, if any; advertising system and document information including which version of HTML and meta text.

Download BuiltWith Technology Profiler

MeasureIt

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

Known issues:
- There is no support on Google extension gallery.
- There are some problems with Ubuntu. Hope to fix it soon.

Download MeasureIt

Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:

* Javascript parsing and execution
* Layout
* CSS style recalculation and selector matching
* DOM Event handling
* Network resource loading
* Timer fires
* XMLHttpRequest callbacks
* Painting
* and more …

Download Speed Tracer

Eye Dropper

Eye Dropper and Color Picker extension tries to replicate Colorzilla on Chrome. The extension allows you to pick color from any webpage or from advanced color picker.

As of now there are two known major bugs, first is that sometime color is inexact and second that sometimes, part of screen show only black color.

Download Eye Dropper

IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. The Extension is great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files.

Download IE Tab

Chrome SEO

The Google Chrome SEO extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks and other daily SEO tasks.

Download Chrome SEO

Chrome Flags

Chrome Flags displays a country flag indicating about the physical location of the websites you’re visiting. The extension also provides access to detailed information regarding the website’s servers, owners, traffic and trustworthiness.

Download Chrome Flags

Resolution Test

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

Download Resolution Test

Lorem Ipsum Generator

Chrome Extension that generates random “Lorem Ipsum” text. It uses a minimalist and well looking design.

Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

Download Lorem Ipsum Generator

Drupal Sprint India will have a non-stop 2 day long sprint where you can contribute by fixing bugs, writing module, documenting upcoming Drupal 7 or helping us in translating Drupal to local Indian languages.

Leading the Drupal documentation sprint is Addison Berry, lead of Drupal documentation project. So, if you are a technical writer or you are interested in documenting the best Open source CMS in the world, this is your chance to work with the real experts and learn a trick or two.

For those who love to code, we will have a large gathering of Drupal programmers around the country who will focus on improving upcoming Drupal 7 release by fixing bugs or migrating modules to Drupal 7. Those of you who love to code for Drupal, this is your chance to contribute and gain karma.

But that is not all. We have few things in store for the non-geeks, who love Drupal for its flexibility and extensive nature. Parallel to sprints, we will be holding talks and workshops to showcase case studies of successful Drupal implementation as well as we will showcase Drupal’s capabilities beyond a CMS. We will showcase Drupal’s ability to integrate with third party softwares such as a CRM, as well as Drupal’s capability to integrate with third party services such as social networking wesbite. So, if you are planning to use Drupal for your next big venture, this is the event for you. Come and meet the best Drupal brains in the country.

So book your calender for October 30-31 2009 and join us at Bhaskaraharya Pratishthan in Pune to be a part of the biggest Drupal event in India ever! And yes, do not forget to register for the event, it will take few minutes only but it will help us in organizing things.

Event Links

Event Website

Register for the event

Event Update

Drupal Sprint India 2009 took place at Bhaskaraharya Pratishthan in Pune. It started at 10 in the morning on 30th October and continued till evening (6pm) of 31st October. 32 hours of non-stop coding, theming, documentation (as the event progressed through the night of 31st October too). It was all fun with lots of happening around Drupal. Parallel to the event, talks / sessions / workshops were organised for the interested people. The overall contribution to the community can be summed like this :

1. Around 10 talks were presented.

2. 2 new modules were developed.

3. 4 modules were upgraded from D6 to D7.

4. 1 new theme was developed.

5. Many pages of documentation were written.

Overall impression of the sprint in Add1sun’s words, “The event was much better than i have attended.”

Download hi-res version of this collage