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.