SASS - How to write effective SASS

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

Reactjs - Let's learn the Reactjs - Part 1

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

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

#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

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

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

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 :)

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