Learn the Underscore.js | Day 0

Hi,

So here we are going to have a series of post focusing on the underscore.js. The content will be to the point and in simple words.If you have any questions or queries do leave the comments and I will take care of them.

For the Day 0 we will start with following:
1) What is underscore.js
2) Features of underscore,js
3) How to Install Underscore.js



What is underscore?

Underscore is JS framework and it is not just another framework .It is the framework made to play with data and lot of data, manipulate data, sorting , filtering , loops, arrays, objects and a lot more. (data in terms of JSON, API, XML), built in functions, helpers, objects and many more.

Official site of Underscore.js - http://underscorejs.org/

Why to use Underscore?

• -          One framework can take care of your lot of Data (JSON, API etc.)
• -          Write less , do more
• -          Very effective for SPA
• -          JS templates
• -          Built in functions, built in objects, helpers etc.
• -          Can be used with jQuery
• -          Plug and user
• -          Improvement in performance

How to Install?

Download the underscore.js from their official site and link it to your HTML page and you are good to go.

happy coding !!

Javascript Return False

What the hell is "Return False" and what it do

Many times in our code we have used Return false and also somewhere in the same code we have use the event.preventDefault and event.stopPropogation.

But did we ever give a minute to think about what is return false is doing?

Yes, it is cancelling the default behavior but then what is event.preventDefault?

Are we just doing come copy paste and not following the  standards?

So, what is return false is - as we have said that yes it cancel the default behavior of browser but it also have one more event in it which is stopProgation() which for sure we might not needed in many places but just by using return false without any requirement we are also calling stopPropgation()

We should avoid using return false and start using the preventDefault and stopPropogation.

Below is the useful link for same  http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/


Happy Coding!!

Java script code Refactoring

As an front-end Developer we work a lot in JS. When it comes to re factoring the code below is the good online book for some key points to be taken care:

http://javascriptplayground.com/the-refactoring-tales/refactoring-tales.html


Happy Coding!!

How to check if the Network is connected or NOT of your phone or system?

We are into the era where the smart phones are dominating the style of living and changing the face of technology.

Everyone is accessing the website from the smartphone or everyone is accepting an app for same.But, same time we can't neglect the backbone of making smartphones such popular - Internet.

So, what if the network is down?

What if user is in the subway where internet coverage is coming and going?

So, how you will handle your code in such situation?Here is the tip: -

navigatior.onLine

All you need to check 

if (!navigator.onLine) {
     // you are not in network
}
else {
   // all is good
}

Happy Coding

HTML Frameworks - are they worth using?

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

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!!

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!!!

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?"

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!!

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.

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.

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/

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/

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/

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:

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.

techy4pc logo

One of the sample logo for the techy4pc, technical online support.Open for the feedback :)

Happy Designing!!
Neha

jQuery : Single page scroll by scrollTo

We have seen many single page scrolling website having beautiful vertical, horizontal and zig-zag scrolling effects.This no doubt gives the awesome user experience but also makes interesting user interaction and presentation.

To achieve this we have lots of plugins to use, but today we will look into the custom script to achieve the vertical scrolling effect.To get this we will be using jQuery.

I have shared the code on the JSFiddle which have the running demo too, do check

http://jsfiddle.net/nsharma/w4dT5/1/

Please let me know if anything is not clear.

Happy Coding!!

Neha

Javascript : 10 Best Practise

Today lots of websites, applications are taking advantage of using javaScript functionality and making rich UI websites with the JavaScript or its frameworks.But every time UI developer fights in taking care of the best practice while writing the JavaScript for the project which lead to the performance issues, bad code issues and many more.

In today's post we will see 10 top best practice beginners should keep in mind when writing the java Script.

1) Always write JavaScript in external files
Separating you JavaScript  code from your markup is always comes in the good practice. As we maintain our Style-sheet separate from Markup same rule apply for the JavaScript  too.It helps you to maintain your JavaScript  at one place.

2) Put your JavaScript  bottom of the page
Processing of the HTML page always take place from Top to Bottom and placing your heavy files on top will make some delay on the loading so the HTML pages.So, best practice is to place all your JS files at the bottom of the page, to avoid slow loading of the page.

3) Minified your JS
When your JavaScript  keep growing you have to keep eye on the size of your JavaScript as it will also hit your performance. So  the quick tip is to minified your JavaScript  files before moving to server.

4) Always use VAR to declare the variables
Always declare your variables using VAR, otherwise it might be taken as the global variables, which could lead to the logical bug in your program.

5) Use the right script tag
Using <script src="" type="text/script"> is conman practice while writing inline JS. type="text/script" is outdated, so we can drop it easily without worrying about anything.

6) Use unobstrutive JS
Unobstrutive JS is the approach where the practice is to separate the behavior layer from the markup of the webpage.Try to avoid the mixing the JS in the markup.

Example the below given example is not the right approach
<input type="text" onblur="validation()" />

onblur is the JavaScript  event and should be handle in the JS file only not in the markup.

7) Use the Literals instead of Objects
When it comes to the performance of the big projects, small things matters a lot. We try in every line to reduce the loading time.One of the important thing is the use of the Literals instead of objects

ex:
instead of using
var obj1 = new object();
var obj1 = {};

var arr = new array;
var arr = [];
 and  so on. this is FAST, SIMPLE and EASY

8) Eval is bad
We all know very well to avoid Eval while doing JS programming because of the following reasons:
a) Improper use of eval opens up your code for injection attacks
b) Debugging can be more challenging
c) eval'd code executes more slowly

9) Self executing Function
Always use the SEF which makes your code to run as soon the JS is ready.

Syntax:
(function(){
//your code goes here
})();

10) Make use of JSLint
Last but not the least JSLint is very useful when validating your JS and making sure it is as per the standards.
Do login the online JSLint website and play around with the option.

I hope this would have help you in learning.
Comments are welcome.

Happy Coding!!
Neha

HTML5 - Top 20 Questions

Hi,

If you are a budding HTML5 Developer then this the post on HTML5doctor.com you did not miss.

http://html5doctor.com/your-html5-questions-20/

Thanks,
Neha

jquery - Simple Sliding the Div on Click

Today, we will look into the live example for the sliding the hidden div on click of a button.

We will take use of jquery slideToggle() function.Here is the live DEMO http://jsfiddle.net/MtJYD/

Happy Coding!

Interview Questions for UI developer

Interview Questions for the UI developer

Below are the selected questions for the UI Developer and Designers from the below categories

- HTML/XHTML/HTML5

- CSS/CSS2/CSS3

- Graphics

- UI Experience/Accessbility

1) What is the difference between HTML4, XHTML and HTML5?

2) How many doctypes we have and what are the difference between them?

3) What will happen if we don't declare any doctype?

4) What is the difference between Span and DIV?

5) How you decide when you have to take ID and when you have to take class?

6) What are the new APIs of HTML5?

7) What is difference between Section and div?

8) Name some HTML5 tags

9) How you define doctype in HTML5

10) Why we prefer DIV-based design and not Table bases design?

1) What is difference between CSS, CSS2 and CSS3?

2) Which are the ways in which you can add CSS to your page?

3) What is use of Important tag

4) How many positions we have and by default which position is used?

5) What if floating and how can you remove them?

6) What is global reseting?

7) How to write the CSS specific for IE versions?

8) what is "*" means?

9) What is CSS selector?

10) How to Inheritance in CSS

1) What are the best praticse while writing HTML

2) Which are the top 5 performance measure you take when do markup/CSS/JS

3) How you make sure that your markup is meeting SEO requirements

4) What is CSS Spirits and where to use them?

5) What is the difference between JPEG/GIF/PNG?

6) What is user accessibility? How you meet it?

7) Explain the process followed when you start a project.

8) What is CDN and how they are useful?

9) What is difference between RGB and CMYK mode

10) Which cross browser issues you faced and how you fixed them?

All the best.