So we have the markup frameworks like twitter-bootstrap and foundation 4 but are they worth to get used in our projects? With all the pain of unnecessary classes , code and need to learn that framework.
With any framework that we are using, we are compromising with the semantic classes names.We developers love to give the class names as per our requirements and understanding which help us to understand the code well and also give the special signature to the project
Below are the issues I feel with using these frameworks
1) I love my markup
we always have to stuck with the structure of code framework have, there are many times when we need to go ahead and change some markup but wait that will become pain because moving any layer of the code can cause us to see breaking other area too.
2) OMG so much CSS!!
There are lot of lot of css lines that might not be required and if you skip using these framework you can might be able to achieve same thing with half of the code!!
so somewhere it costing the performance although it is claiming that it is lighter but what is the harm if we will can make it more lighter.
3) But I can do it by my own...
Yes it is responsive...yes it give you the support on mobiles too but wait cant we do it our own...ok but we have time crunch but still we know how to write the code for the mobile too? rather than just reading, understanding and implementing its good to write your code and you never know you will find your own new ideas on the way.
4) I want to learn JS not just plugin and use it!!
But they have all JS cool stuff - modules/ tool tips/ validations which are well tested on all browsers etc, and yes for that I can buy-in the framework but wait don't we enjoy working on your own scratch JS code? why to use plugins for such small things like modules/tool tips etc,
Although I am not against the framework but it is always better to analysis before using any framework do we actually need it or not? Might be we are using a framework and getting lot of performance issues and unnesseary code which is not even not required
Saturday, December 7, 2013
Wednesday, November 27, 2013
Advance Javascript/jQuery Interview questions
1) How many selectors of jQuery you have used?
2) What is chaining in jQuery?
3) What is the different between GET and POST? Which to use when explain with the example.
4) What are the best practice you follow for the performance of the site?
5) How to use cache in your website?
6) What is the disadvantage of using global variables in JS?
7) When to use Stringify and when not to use?
8) When to use Multi-Dimensional Arrays?
9) How will you decide for animations when to use CSS3 and when to use JS?
10) How to make HTML templates by JS
Happy Coding!!
2) What is chaining in jQuery?
3) What is the different between GET and POST? Which to use when explain with the example.
4) What are the best practice you follow for the performance of the site?
5) How to use cache in your website?
6) What is the disadvantage of using global variables in JS?
7) When to use Stringify and when not to use?
8) When to use Multi-Dimensional Arrays?
9) How will you decide for animations when to use CSS3 and when to use JS?
10) How to make HTML templates by JS
Happy Coding!!
Friday, November 22, 2013
CUFON Font : All you want to know about CUFON!!
In this post we are going to talk about the CUFON fonts and the 4 tips that every UI developer must know.
Before going into the deep discussion let's start from the basics.
What is CUFON?
As per the documentation of CUFON, cufon aims to become worthy alternative to the SIRF. Let's talk in lay man words, in every website design we aim to achieve the smoothness and sharpness of the fonts on the web browser - what we see on the PSD. But thanks to the browser limitation we are not able to achieve that.
But CUFON overcome this limitation and helps us to get the same smoothness as we are seeing in PSD of fonts and that too without uses of images.
It also work with all fonts - web safe fonts/Wen-Non-safe fonts.
Why we need CUFON?
As we have already talked that aim of every UI developer to replicate the PSD 100% on browser but we always have to compromise with the quality of the fonts. Cufon help us to overcome this and help us to achieve the smoothness of the fonts we are expecting without use of images.
Advantage of CUFON?
1) No-Plugins required - We don't need to load any extra JS file as plugin to support it. Only we need to generate our fonts file on cufon website.
2) Compatibility - It work on all major browsers and especially it works on IE too.
3) Ease of Use - No and Zero-Configuration required for it , simple to use
4) Fast - It's very fast even for small to large text.
How To use?
Using Cufon is the most simple task to do:
1) Go to website http://cufon.shoqolate.com/generate/ upload your fonts
2) Generate the cufon files.
3) Link them to your webpage
4) Activate them by writing : cufon.replace('h1')
You can read full documentation here to https://github.com/sorccu/cufon/wiki/Usage
Pro Tips to use Cufon
1) Multiple Fonts??
Instead of keeping different file for wach fonts, it's better to use one file and merge all fonts code into that,
It will help you to save HTTPS code and give the performance of your website a boost.
2) How to make the underline hovering effect to work?
Cufon don't support underline text-decoration property, to make it achieve the trick is to use border-bottom instead.
3) Active your hyperlinks (<a>) tags
By default cufon don't activate the hyperlinks . To activate them you have to make the hover property to true.
Links to know more:
http://cufon.shoqolate.com/generate/
http://www.cufonfonts.com/
Happy Coding!!!
Before going into the deep discussion let's start from the basics.
What is CUFON?
As per the documentation of CUFON, cufon aims to become worthy alternative to the SIRF. Let's talk in lay man words, in every website design we aim to achieve the smoothness and sharpness of the fonts on the web browser - what we see on the PSD. But thanks to the browser limitation we are not able to achieve that.
But CUFON overcome this limitation and helps us to get the same smoothness as we are seeing in PSD of fonts and that too without uses of images.
It also work with all fonts - web safe fonts/Wen-Non-safe fonts.
Why we need CUFON?
As we have already talked that aim of every UI developer to replicate the PSD 100% on browser but we always have to compromise with the quality of the fonts. Cufon help us to overcome this and help us to achieve the smoothness of the fonts we are expecting without use of images.
Advantage of CUFON?
1) No-Plugins required - We don't need to load any extra JS file as plugin to support it. Only we need to generate our fonts file on cufon website.
2) Compatibility - It work on all major browsers and especially it works on IE too.
3) Ease of Use - No and Zero-Configuration required for it , simple to use
4) Fast - It's very fast even for small to large text.
How To use?
Using Cufon is the most simple task to do:
1) Go to website http://cufon.shoqolate.com/generate/ upload your fonts
2) Generate the cufon files.
3) Link them to your webpage
4) Activate them by writing : cufon.replace('h1')
You can read full documentation here to https://github.com/sorccu/cufon/wiki/Usage
Pro Tips to use Cufon
1) Multiple Fonts??
Instead of keeping different file for wach fonts, it's better to use one file and merge all fonts code into that,
It will help you to save HTTPS code and give the performance of your website a boost.
2) How to make the underline hovering effect to work?
Cufon don't support underline text-decoration property, to make it achieve the trick is to use border-bottom instead.
3) Active your hyperlinks (<a>) tags
By default cufon don't activate the hyperlinks . To activate them you have to make the hover property to true.
Links to know more:
http://cufon.shoqolate.com/generate/
http://www.cufonfonts.com/
Happy Coding!!!
Thursday, November 21, 2013
Modernizr Vs InnerShiv
Hi,
Today I am discussing here about the Modernizr and InnerShiv. The topics we are going to cover are:
- Introduction
- Features
- Where to use?
- Links
Ok, so let's start the basic questions here - "what are these frameworks for and why we need it?"
Your website which is working fine on all modern browser is blowing on IE and your reaction will be "WHY?? and HOW TO FIX IT??"
The answer or solution is Modernizr and InnerShiv.
These 2 plugins will help you to look same on IE as it is on modern browser, so, to get the HTML5 tag support on IE we use these plugins..
InnerShiv
InnerShivalso know as Tag-Detection plugin.It only have the functionality to detect the tag support on the browser and if that browser dont have the capability to identify the HTML5 tags it will help to identify that.
Modernizer
Modernizr id "Feature-Detection Plugin". Modernizr is much bigger and powerful than InnerShiv. It not only consider HTML5 but also consider CSS3 too.
As, in case with the HTML5 on old browsers same is with the CSS3, old browsers dont understand css3.
It not only help you to detect the support of the HTML5 tags but also helps to detect the features of CSS3 too.
If your project have CSS3 features usage like - gradients, text shadow, box shadow etc than you must use the Modernizr as it will detect the browser itself which don't support the CSS3 features and HTML5 tags.
It will append the classes on the body of your page on the basis of the availability of the feature on that browser.If the browser dont have any particular feature supported it will add "no-" prefix before that property as a class and add to body of your page.
On basis of these classes you can now write your css and js that what will happen when particular feature is not supported.
LINKS:
http://modernizr.com/
https://code.google.com/p/html5shiv/
Happy Coding!!
Today I am discussing here about the Modernizr and InnerShiv. The topics we are going to cover are:
- Introduction
- Features
- Where to use?
- Links
Ok, so let's start the basic questions here - "what are these frameworks for and why we need it?"
INTRODUCTION
If you are new to HTML5 than you are right place. HTML5 came with the most awesome tags to make our markup to finally be semantic. But all thanks to our dear IE browsers who don't understand HTML5 and if you make your first HTML5 website by using the tags like - Header, footer, section, aside etc and will open on IE you will get a heart attack.Your website which is working fine on all modern browser is blowing on IE and your reaction will be "WHY?? and HOW TO FIX IT??"
The answer or solution is Modernizr and InnerShiv.
These 2 plugins will help you to look same on IE as it is on modern browser, so, to get the HTML5 tag support on IE we use these plugins..
FEATURES
Although both plugin help you to give support of HTML5 tags on IE but still both have their own features and make them unique .InnerShiv
InnerShivalso know as Tag-Detection plugin.It only have the functionality to detect the tag support on the browser and if that browser dont have the capability to identify the HTML5 tags it will help to identify that.
Modernizer
Modernizr id "Feature-Detection Plugin". Modernizr is much bigger and powerful than InnerShiv. It not only consider HTML5 but also consider CSS3 too.
As, in case with the HTML5 on old browsers same is with the CSS3, old browsers dont understand css3.
It not only help you to detect the support of the HTML5 tags but also helps to detect the features of CSS3 too.
WHERE TO USE?
If your project is very simple and don't have any css3 features implementation like - gradients, Border Radius, animations etc. but only have HTML5 support than you should go with the InnerShiv.If your project have CSS3 features usage like - gradients, text shadow, box shadow etc than you must use the Modernizr as it will detect the browser itself which don't support the CSS3 features and HTML5 tags.
It will append the classes on the body of your page on the basis of the availability of the feature on that browser.If the browser dont have any particular feature supported it will add "no-" prefix before that property as a class and add to body of your page.
On basis of these classes you can now write your css and js that what will happen when particular feature is not supported.
LINKS:
http://modernizr.com/
https://code.google.com/p/html5shiv/
Happy Coding!!
Tuesday, November 19, 2013
Java script Interview questions - Part 2
1) What is unobtrusive java script?
A.Unobtrusive Java script means that the logic should be handle in the java script and HTML should only contain the view not the java script code.It is a clear division between the logic and UI.
2) What is Name spacing?
A. Java script is bad scripting language, it can lead to developer to escape with bad coding and achieve the functionality.One of the bad practice is to declare the global variables which is evil for the coding. Hence name spacing is the concept to declare a unique name and bundle all methods/objects/properties with that.It also helps us to avoid the name conflict too.
It helps in creating modularity and try to reuse the code in application?
3) What is Undefined and Null?
A. Undefined: When you have declare a variable but have not assigned and value to it.
Undefined is the "type" itself.
Undefined is always set by the java script with the value "undefined".
NULL: NULL is the assignment value.
NULL is an object itself
NULL is never set by the java script, it is done programmatic only.
4) Where we should place our java script on web page?
A. We should place our java script as an external file and at bottom of the page.
A.Unobtrusive Java script means that the logic should be handle in the java script and HTML should only contain the view not the java script code.It is a clear division between the logic and UI.
2) What is Name spacing?
A. Java script is bad scripting language, it can lead to developer to escape with bad coding and achieve the functionality.One of the bad practice is to declare the global variables which is evil for the coding. Hence name spacing is the concept to declare a unique name and bundle all methods/objects/properties with that.It also helps us to avoid the name conflict too.
It helps in creating modularity and try to reuse the code in application?
3) What is Undefined and Null?
A. Undefined: When you have declare a variable but have not assigned and value to it.
Undefined is the "type" itself.
Undefined is always set by the java script with the value "undefined".
NULL: NULL is the assignment value.
NULL is an object itself
NULL is never set by the java script, it is done programmatic only.
4) Where we should place our java script on web page?
A. We should place our java script as an external file and at bottom of the page.
Javscript Interview Questions
1) How we can write java script on a web page?
A. There are 3 ways to write Java script on the webpage.Which are:
- Inline java script : we can call the java script functions with the tags.
- External java script : We can give reference to the external java script o the webpage
- On webpage : We can write <script></script> on the page and start writing our java script code
2) Is java script Case Sensitive?
A. Yes, java script is case sensitive scripting language
3) How many data-types in java script?
A. We have the following data types in java script:
- Boolean
- Object
- String
- Array
- Number
- Function
- NULL
- Undefined
4) Is Java script is automatic data conversion language?
A. Yes, java script can automatically detect the data and its type and convert to same.
Eg: var a = "hello"; // typeof(a) : String
5) What is the difference between "==" and "==="?
A. Although both are the comparison operators but former just compare the values in the Left/right side whereas later will also check the type and value of the comparison value.
Eg: var a = 11,
b = "11";
(a == b) // true
(a === b) // false - as the one is number and other is string
6) How you create Array in java script?
A. var names = new Array();
names[0] = 'neha',
names[1] = 'naina'
Other way:
var names = new Array('neha','naina');
7) Index of Array starts from?
A. Zero (0)
8) What does "2" + 3+2 will give you output?
A. 232 // As the first character ('2') is string .i.e, the calculation will be string operation
9) What does 2 + 3 + "2"will give you output?
A. 52 (As the first two are integer hence the addition will take place and last one is string hence it will take concentation: 52)
10) What are jQuery and DOJO?
A. These are the frameworks of the java script . We can use either library and write the java script by using the library syntax.
A. There are 3 ways to write Java script on the webpage.Which are:
- Inline java script : we can call the java script functions with the tags.
- External java script : We can give reference to the external java script o the webpage
- On webpage : We can write <script></script> on the page and start writing our java script code
2) Is java script Case Sensitive?
A. Yes, java script is case sensitive scripting language
3) How many data-types in java script?
A. We have the following data types in java script:
- Boolean
- Object
- String
- Array
- Number
- Function
- NULL
- Undefined
4) Is Java script is automatic data conversion language?
A. Yes, java script can automatically detect the data and its type and convert to same.
Eg: var a = "hello"; // typeof(a) : String
5) What is the difference between "==" and "==="?
A. Although both are the comparison operators but former just compare the values in the Left/right side whereas later will also check the type and value of the comparison value.
Eg: var a = 11,
b = "11";
(a == b) // true
(a === b) // false - as the one is number and other is string
6) How you create Array in java script?
A. var names = new Array();
names[0] = 'neha',
names[1] = 'naina'
Other way:
var names = new Array('neha','naina');
7) Index of Array starts from?
A. Zero (0)
8) What does "2" + 3+2 will give you output?
A. 232 // As the first character ('2') is string .i.e, the calculation will be string operation
9) What does 2 + 3 + "2"will give you output?
A. 52 (As the first two are integer hence the addition will take place and last one is string hence it will take concentation: 52)
10) What are jQuery and DOJO?
A. These are the frameworks of the java script . We can use either library and write the java script by using the library syntax.
Sunday, October 13, 2013
Javascript Fundementals
To be a pro you need to clear the basics and here is the awesome article for the JS fundamentals
http://flippinawesome.org/2013/10/07/javascript-fundamentals/
http://flippinawesome.org/2013/10/07/javascript-fundamentals/
New hub for Inspiration - Pintrest
"To be creative is tough, to remain creative is tougher." - For the creative people out there, we all keep looking for the inspiration to keep our self motivated and get inspired.
We keep digging and bookmarking hundreds of websites, blogs, portfolio etc as 911 in case of emergency.
For me the new hub of inspiration is PINTEREST. It have all the stuff you are looking for. If you are a Photographer do look into the photography section, if you are traveler oh they have a section for that too and if you are a designer, illustrator, graphic designer, artist - pinterest have all the things you might to give a look.
What my all time favorite in pinterest the clear and subtle UI. Pinterest have kept the user experience on the priority whether the user is on desktop or mobile both are very easy to navigate .
So, go and get inspired, explore the pinetrest.
http://www.pinterest.com/
We keep digging and bookmarking hundreds of websites, blogs, portfolio etc as 911 in case of emergency.
For me the new hub of inspiration is PINTEREST. It have all the stuff you are looking for. If you are a Photographer do look into the photography section, if you are traveler oh they have a section for that too and if you are a designer, illustrator, graphic designer, artist - pinterest have all the things you might to give a look.
What my all time favorite in pinterest the clear and subtle UI. Pinterest have kept the user experience on the priority whether the user is on desktop or mobile both are very easy to navigate .
So, go and get inspired, explore the pinetrest.
http://www.pinterest.com/
Debugging Mobile Website - jsconsole
Hi,
If you are the Mobile developer than this is the link must to dig into from sitepoint.
http://www.sitepoint.com/debugging-mobile-with-jsconsole/
If you are the Mobile developer than this is the link must to dig into from sitepoint.
http://www.sitepoint.com/debugging-mobile-with-jsconsole/
Responsive Framework - Twitter Bootstrap Vs Foundation
So whole world is going responsive and why wouldn't after all we are in the age of smartphone, tablets and yes Desktop too.So, why to make the website for every device lets make one website and fit on all sizes/devices this is actually the motto of Responsive.
To make your website responsive you have to write down lot of media query, lot of code and guess what I enjoy doing that. I love to write the code from scratch to design your code.
But in real world we all have the deadlines on our head and making a responsive website to support all devices/sizes in a short span will surely will give any UI developer nightmare.
Thanks to the frameworks in town that our making UI developer life easy and my 2 best our Twitter bootstrap and Foundation 4.
Twitter bootstrap
With the release of version 3, the twitter bootstrap main motto is "Mobile First" in which they get full points any day.They have done modifications to stand with the Foundation 4. So, lets explore top 5 positive of Twitter bootstrap:
1) Mobile First
2) Custom your Modules as per need
3) Good support
4) Fluid Grid
5) Large User Base
Foundation 4 is from the ZURB. Although it don't have user base as large as twitter bootstrap. BUt still it have good features , UI and widgets as compare to Twitter bootstrap 3.
1) Form Validation, Pricing tables, rtl,video scaling
2) Best grid support class, support across all view ports
3) Media Query : Support up to 1440 px
4) CSS - Everything to em
5) If you are Saas lover you are gonna fall for it.
Conclusion: Which framework to use? will vary from project, requirements, Time, Ease and at last what you like to use? My suggestion go and explore both framework and decide which suits in your need.
Subscribe to:
Posts (Atom)