Code & Pixels

Doodle Saturday

2016-06-25T01:30:00.001-07:00

Half of the Saturday spent in doodling and creating Doodles.

Introduction to Web Components

2016-06-24T21:12:00.003-07:00

Web components are the W3 standards that let developer make its own custom element and let them think beyond the HTML tags. They make the code actually re-useable, also make the use of encapsulation and abstraction.

Without any doubt Web components are the future. They are and will transform the way developers build their application. As of now the Web components 100% support is on Chrome and Opera but we have polyfill and libraries to make them work in other browsers too. Such as , webcomponents.js, polymerjs, etc.

On 8th May 2016, JSLovers organized the meetup at Microsoft, Gurgaon India.I gave session in Microsoft, Gurgaon on the web components. Here is the slide of web component I have developed for the workshop:

http://www.slideshare.net/nehhasharma/introduction-to-webcomponents

Happy Learning!!

Canvas Painting - DIY

2016-06-24T00:24:00.001-07:00

I am not an artist but I love colors and keep trying my hands in that. So, this time I picked canvas , water color (camel) and start playing around. What came as an output is

Why OM? I don't know or might be that time I must be watching some religious serial (:p) . But I am so in love with this creation and now it is beautifully hanging in my room wall

So, do not stop yourself from doing something which you don't know especially in art. You never know what you will create!!

Loved it? Share it!!

JSLOVERS - Arduino Kit Giveaway

2016-06-23T22:59:00.002-07:00

It is so awesome to see how much people are interested in the Giveaway organized by JSLOVERS. After submission of awesome ideas now it is time for voting the best idea.

Do not wait and read the all awesome ideas and vote for your favourite (s) one now!!

http://ideas.jslovers.com/

Doodle Day - Squats

2016-06-23T22:59:00.000-07:00

So, I have been trying very hard to stay fit. To stay regular gym person but I love food and sleep more than gym :p

And my top most excuse of missing my gym is :

So, what is your excuse of missing the gym?

Doodle Day

2016-06-23T22:57:00.000-07:00

I love reading quotes and few quotes are so deep that I can't able to stop myself writing them again for my own collections. My source of inspiration of such quotes are majorly from http://pintrest.com/.

I don't feel coloring my quotes and doodles. I feel they looks good in black only. After all the life is all about - White and Black Shades :).

Loved them? Share your love :)

Doodle Day

2016-06-23T06:52:00.003-07:00

Workshop angular2 and ES6 @ jslovers

2016-06-23T05:54:00.000-07:00

Hey,

Want to learn and explore Angularjs2 and ES6?

Join the JSLovers upcoming workshop @ Expedia Gurgaon on 26th June 2016.

For more details check :

Meetup.com/jslovers

Happy learning!!

Are you on Zomato?

2015-10-15T00:25:00.002-07:00

Hey Foodies,

Are you following me on Zomato?
Do you know I am on Zomato too?

I love to explore the new places and food. I am 100% veg (minus eggs) .But it doesn't stop me from exploring the new food and places.

Read, Like and follow me on Zomato - https://www.zomato.com/Nehha

Happy Food :)

Doodle Love - Attitude

2015-09-30T23:34:00.000-07:00

SASS - How to write effective SASS

2015-09-29T23:26:00.000-07:00

SASS is the css pre-processor. It helps us to write the effective CSS by new syntax and features. CSS pre-processor is the very powerful and very effective for the web developers only if used well.

The most important feature of using pre-processor is - Easy maintenance and less line of codes.

If not structured and planned well SASS becomes night mare for you. Today I am going to highlight the few common mistakes we are or could do while writing SASS

1) Variables declaration and reuse
Make your Variables files to distribute into different sections
- Primary colors & sizes
- Links Colors & sizes
- Borders and icons colors & sizes
- Typography colors & sizes
- Buttons colors & sizes

The above separation keeps your sass file clean and clear . Developer able to pick where they want to make changes etc. instead of having a plain variable file with no separation.

TIP: Use the prefix while declaring the variables.

2) Mixins
Mixins are the most important feature. If not used well you will end in a lot of code which is junk.
Do not create any mixin which is getting used more than 2. A separate file for the mixin should be there with the clear "how to use" section

3) Keep your Layout(structure) and styling different
The properties which define the structure and layout of the page should be separate sass file and styling of the page should be separate. This keep your code much more organized and maintenance would be much easier

4) Separate file for each and every elements
You should have the separate sass file for each and every modules in your projects. Such as - buttons, typography , carousels , Sliders, etc

5) Never cross 4 levels in SASS specificity
Whenever you are nesting your sass code never go 4 level down deep.

Comments , suggestions, feedback are welcome.

Happy Learning!

Doodle Love continues

2015-09-28T22:25:00.000-07:00

Reactjs - Let's learn the Reactjs - Part 1

2015-09-28T22:12:00.003-07:00

What is Reactjs?
React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.

Below are the features of the React:
- It is the 'view 'in the application
- It use the concept of the components
- It use the concept of the virtual DOM
- It works on the Client as well as server side too

How to start?
- Download the reactjs library (react.js)
- Download the JSX library (JSXTransformer.js)

JSX - Javascript XML syntax
It lets you write the code not in the pure Javascript and behind the scene JSX converts it to Javascript. It helps in speeding the work and lesser the code.

How to use in code:
Below is the snippet how you can use the JSX in your Reactjs application

** @jsx React.DOM */
<script type="text/jsx">
//your code goes here
</script>

This is for now. In next post we will look into the building blocks of reactjs which are components.

Feedback and suggestions are welcome

Source: Google.com

Doodle Day inspired from TVF - The Pitchers

2015-09-28T11:03:00.000-07:00

If you haven't seen the TVF's The Pitchers then please go and watch it is awesome and inspiration behind my this doodle is only The Pitchers. The pen I used is Parker - borrowed by a friend (:p)

Javascript Best Practise

2015-09-27T10:47:00.001-07:00

#1 - Reduce the HTTP request
Every HTTP request is over head on the server which slow the response time. Always keep the HTTP request to smaller

#2 - Placement of the JS File
<script> tag on the page will block the rendering of the HTML page until the execution of the code in inline <script> tag is done or the JS file is loaded. It is the best practise to place the JS files at the bottom of the page or use Defer or other loading method of JS file to avoid the loading of the page.

#3- Combine JS files
If you are having multiple JS file combine them to one. So, that we have only 1 http request. It is always better to load one 10KB file instead of hitting 25kb four times HTTP request.

#4 - Minify your JS file
The larger the file, longer time it will take to execute and which will result in again slowing the response time. Hence, make it the best practise to minify your JS file

#5- Cache the JS file
It is always the best approach to cache the JS file request

#7- Compress the JS file using gzip encoding

#6- Use CDN
It will not only improve performance but also handle caching and compression

Comments, suggestions and feedbacks are welcome.

Happy Learning!!

Typography Day - Here for the crazy ones

2015-09-26T07:47:00.001-07:00

Today I want to try my hands in Typography and my all time favourite Quote by Steve Jobs was the best to start...but I did a typo and try to rectify that.

Lesson learnt : revisit your artwork before picking pens

Food Lover : Zomato Love

2015-09-25T08:06:00.003-07:00

I am a foodie and not even foodie but I love to try new places and food. Zomato helped me lot to choose and plan my next place to dig into. I am very active user of Zomato and guess what they showed their love by sending me free goodie.

Creative Day : Love for Doodles and more doodles

2015-09-25T07:56:00.002-07:00

Doodling is what always excite me. You just need to put your thoughts on the paper and your doodle is ready.

My Love - Stay Colorful :)

2015-09-17T20:58:00.001-07:00

I always love the art, colors and want to get myself into it. I lack of formal training but it doesn't stopped me from putting my design on paper. Below are the few of my works

Foodie Day Out -1 - Diggn Cafe , Anand Lok

2015-01-09T09:33:00.001-08:00

"All work and no fun makes the Jack a dull boy"

After a very hectic week finally on weekend and we went to the Diggn cafe at Anand lok. It is not so famous place but very eye catchy because of the decoration they have done lot of lights.

So a must to go place if you are looking for :

1) Good Ambiance - They have outdoor sitting as well as cozy indoor sitting too.Score - 4/5
2) Good Food - They serve the best pizza with thin crust baked in wooden oven,pasta, coffee, and a good variety of drinks and desserts .Score - 5/5
3) Value to money - 5/5

A place to must visit.If you are looking for good food and ambiance especially at evening time.

Enjoy :)

Online website to Test your website performance, code quality, user experience

2015-01-09T00:16:00.003-08:00

Nibbler is the site where you can get the score-card on the health of your website in the :

1) Code quality
2) User Experience
3) Website performance
4) Accessibility
5) Social media presence
6) Content
7) Analytic and many more...

Go and explore your site:

http://nibbler.silktide.com/

Happy Testing.

How to keep yourself updated in Front-end Technologies?

2015-01-08T04:03:00.000-08:00

So much to read and learn in the UI technology the challenge is not how to learn from where to learn but the challenge is how to keep yourself upto date for same.

Below link will help you to follow the right people, right blogs, right sites and right podcast:-

http://uptodate.frontendrescue.org/

Happy Learning.

I love Pinterest!!

2015-01-08T03:18:00.000-08:00

Let me confess this, I am addicted to Pinterest and why...you have to explore it and feel it.

If you are a photographer, foodie, designer, fashion lover, Home lover and what not... everything is here on Pinterest.

You can pin the favorites , Create the Board, share the board, share the pins, follow the people etc.

Go and Explore.

HTML5 Top 20 Questions

2012-10-15T03:54:00.003-07:00

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

Interview Questions for the UI developer

2012-10-14T01:23:00.001-07:00

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.