Most important Windows short cuts for Developers

As everyone aware of Windows operating system by Microsoft. I think, no need of any boring intros about the operating system here. As it is very easy to use operating system more 80% of the technology users prefer to use Windows operating system or they might me having windows a spare OS.
Windows OS come with a hell lot of awesome short cuts which helps us to turn out to be more productive by the end of the day. Let's come to the developers perspective, being a developer I know the pain of creating folders, renaming folders, creating new files etc. But, windows is shipped with a lot of short cuts those definitely helps us to keep us more productive all the day Let's see what I got for you today.
\
Shortcuts

• F1 - When ever you press F1 key a window will be popped with a name Windows Help and Support where you can can search and browse for particular things you need.
• CTRL+ESC - Now you no need to move your mouse for that corner and this corner every time. If you want to go to start menu just press this key pair and boom you are there with in fraction of seconds.
• ALT+TAB - Playing everything with mouse is most of the times kills more time. As a Developer you always need to switch between different windows which are active. You just need to use this key pair to finish your work more quickly.
• SHIFT+DELETE - No need to use mouse right click to delete the files instead just use this key pair to make the work much easier but, use this short cut only if you want to delete the files permanently.
• WINDOWS LOGO+L - Now you don't need to use CTRL+ALT+DELETE to lock your computer before you are leaving somewhere. Use this simple key pair to make your work done very fast.
• CTRL+TAB - Switch between the different tabs in the browser.
• CTRL+N - Opens the new copy of the same window depending on where you press this short cut.
• WINDOWS LOGO+M - Minimises all the opened windows.
• SHIFT_WINDOWS LOGO+M - Undo Minimise all and open up all the windows which are active.
• CTRL+SHIFT+N - Create a new folder very easily.

These are some of the most regular usage short cuts in windows. If you want to know more available options click here

10 Best sites that help you in earning for writing and blogging

The internet is full of content. Every second some millions of people uploading and downloading a huge amount of data which is really difficult to count with mouth. In the present days skills play an important role in earning both brand name and money as well. How much better skilled you are that much better you can earn. Now, in this article I am not going to talk about all the skills but I will say about the 10 best blogging which helps the bloggers to earn the income right away. Let's jump in it right now.

• SQUIDOO
• HUB PAGES
• CONTENTBLVD
• HELIUM
• TRIOND
• EPINIONS
• FIVERR
• YAHOO
• DEMAND MEDIA STUDIOS
• DIGITAL JOURNAL

If you don't want to be a sub domain for other domains or if you are interested in creating your won brand then follow these steps

• Choose and Register a domain name
• Buy a server
• Create a web page
• Post your articles there
• Use google adsense or other affliates to create revenue with ads.

Importance of responsiveness of an application in this digital era

Almost every person who uses technology now a days will definitely be using at least two digital devices with different screen sizes. There are a hell lot of devices with different screen sizes available out there in the market. So, it's very important for a developer to make sure that all his applications will respond to the different devices with different screen sizes.

Why to make it Responsive?

There a lot of reasons why you need to keep your application responsive and fit neatly in all screen sizes. It helps your application to look awesome in the small screens also. More people can access your application. You can earn more traffic.

What happens if the application is not responsive?

Now a days people are using more handy mobile devices over big chunky screens. Mobile devices are very flexible to use and you can access the internet from any where and any time and you can carry it in your pockets. This make the users to use mobile phone more than laptops or desktops.

If you as a developer don't develop your application which can run same as it do in the big screen devices you are loosing almost 60% of the traffic everyday.

How to make it responsive?

This is the era where there are hell lot of libraries and frameworks that makes the life of a developer very easy. There are so many developers who are developing awesome libraries and frameworks for developers. I list the most used one's below how you can make it responsive.

• BOOTSTRAP - Awesome library built by the twitter employees which is now trending technology for the responsive websites.
• CSS3 Media Queries - This is the most awesome feature added in the CSS3. And the Bootstrap which I mentioned above is also built with the help of CSS3 Media Queries feature.

These are the main technologies that are trending for the responsiveness in present days. But, we need to see what next!

Relational styling with CSS

As everyone knows CSS is used for styling webpages. There are actually a lot of ways to select and style a particular element of html element. You can also style multiple elements at a time. In this post I will show all the possible ways to style a particular elements.

html 

<section>
       <div>
              <p id="paragraph1" class="para">Hello I am first paragraph.</p>
       <div>
      
      <div>
              <p id="paragraph2" class="para">Hello I am second paragraph.</p>
       <div>
</section>

This is the html part to which we are going to apply the styles in a couple of seconds. I will show you styling the two paragraphs in multiple ways. Let's achieve it.

Using Direct elemental selections

p {
   font-size: 20px;
   color: blue;
}

We can directly select the particular element and style it as I show you in the above code snippet.

Using Classes

.para {
     font-size: 20px;
     color: blue;
}

In the above code snippet we have used it's class to achieve same result over selecting the p element directly.

Using ID's

#paragraph1 {
      font-size: 20px;
      color: blue;
}
#paragraph2 {
     font-size: 20px;
     color: blue;
}

Generally, if  you want to apply same styles for different elements Designers use classes rather than Id's. But, any how I just show one of the possible ways.

Using Relational Styling

We can also style the elements using their tree structures. In simple way parent child relations. Here if you observe the html structure once each div is the child of section and paragraph is the child of div and grand child of section. Using this relation we will style the paragraphs now.

section > div > p {
       font-size: 20px;
       color: blue;
}

We can also style this in the other way.

section p {
    font-size: 20px;
    color: blue;
}

So, these the different ways you can style the elements. Depending up on your comfortability you can choose any way you want or you can use all these ways for different elements.

CSS Positioning and floating elements

Positioning and Floating are the properties mainly used in css to layout the webpage. Let's see the different types of positioning available in css and discuss them with their usage.

There mainly four types of positioning

• Static.
• Absolute.
• Relative.
• Fixed.

Let's discuss one by one with their code snippet.

html

<div id="positioning">Helloo</div>

Static Positioning:
This is the default position of the element. If two elements are inline, then both of them stacked horizontally one after the other. In the same way if two elements are block then both the elements stacked one after the other vertically. Know more about Inline and Block elements.

Absolute Positioning

#positioning {
      position: absolute;
      top: 10px;
      left: 10px;
}
This way positioning take its position in the webpage with respect to (0,0) co-ordinates which mean from top left corner and it's position is fixed it doesn't adjust itself with respect to screen resolution. Actually it;s not flexible way of positioning the elements.

Relative Positioning

#positioning {
      position: relative;
      top: 10px;
      left: 10px;
}
The element take it's position with respect to its current position and more 10px from top and 10px from left. Many developers use relative positioning over absolute because it's more flexible way of doing things done.

Fixed Positioning

#positioning {
      position: fixed;
      top: 10px;
      left: 10px;
}
This element takes it's position with respect to the screen. When ever you give an element with fixed position then when you scroll down your webpage the element with fixed position also scrolls down along with the webpage. This type of positioning generally used for menu bars or nav bars to make to visible for the whole web page when user scrolls down.

Now, you have seen about positioning. I strongly recommend you to play around with these things as they are most confusing things in the CSS for the beginners. Now, let's move on for Floating the elements.

html

<div id="floating">This is a floating element</div>

css

#floating {
    float: left;
}
#floating {
    float: right;
}
#floating {
    float: inherit;
}
#floating {
    float: none;
}

You can learn more about floats here. You will find an awesome article about floating elements in the given link.

Block level and Inline elements in CSS

There are two types of elements mainly in the html, they are

• Block level.
• Inline

What are block level elements ?

Generally the elements which stack vertically downwards one after the other are called block level elements. 

Example : Div tags, P tags etc.

When you write a block level element the next elements will be stacked below the previous element. We can change the default behaviour of those elements using the css properties. Let's consider the below example.

html 

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

<div class="box">Box 4</div>

<div class="box">Box 5</div>

Now, when we see the result in our browser these boxes will stacked down one after other vertically. Let's apply CSS to it.

css

.box {

   display: inline-block;

}

After applying above property to the elements, those boxes now stacked horizontally.

What are Inline elements ?

The elements that are horizontally stacked and appear in the same line are called inline elements.

Example: Span tags, Img tags, anchor tags etc.

When you write an inline element if next element is also inline then both elements stack horizontally. But, if the next element is block level then it will be in the next line.

CSS hiding elements using Display property and Visibility property

In this post we will see how we can hide the elements using CSS properties. There are generally two properties we can use to hide the HTML elements.

• Display
• Visibility

These are the two properties available to hide elements using CSS. Many people think these two properties do the pretty much the same thing but, there is slight difference between those two properties. we will discuss them with code below.

html

<p>Lorum ipsum and some dummy text</p>

<div id="element1"></div>

<p>Lorum ipsum and some dummy text</p>

<div id="element2"></div>

<p>Lorum ipsum and some dummy text</p>

css

#element1 {

       width: 200px;

       height: 200px;

      visibility: none;

}

#element2 {

       width: 200px;

       height: 200px;

      display: none;

}

I recommend you to copy and past the above code and check the result and play around with it. Let me first explain you the difference between these two properties.

When you use display property and hide the element, it will pretty much hide the whole elements which means it will totally removes the element from the page and the elements below will get adjusted automatically.

But, when you use visibility property to hide the elements, it will just make the element invisible but the white space for that element will be still there.

Choosing the text editors before writing the first line of code

Are you a developer? You are writing at least 10 lines of code per day? Your pretty confused to choose your text editor to write better readable code? This tutorial is for you.

Text Editors play a major role in day to day life of a developer. A better Text Editor makes life of a Developer much better. Before you start to write a single statement of code, it's very important to choose good text editor or IDE which suites for you and creates great environment for your development works.

Now, I am going to give out some names and links to most used Text Editors by most of the developers out there. After going through this article I hope you will get some clarity on using these text editors.

1. NOTEPAD++

Notepad++ is one of the top used text editors which is cross OS compatible. It gives more flexibility in writing code. It highlights code based on the language you choose. It automatically makes code indentations and makes more readable. But, only drawback I found is code suggestions. It don't give code suggestions. We need to writes full lines which ultimately makes us less productive.

It's free and open source. So, I highly recommend this Editor for the developers who are learning the code.

2. SUBLIME TEXT2, SUBLIME TEXT3

Sublime is the best software I have ever seen. It really makes my day very productive. It is very intelligent and provides great code suggestions which makes my life very easy. I highly recommend this editor for every developer.

It's not free but you will get unlimited trail period which you can use for life long.

There are hell lot of Text Editors right there in the market but, I hope these two are ultimate. If you have any better software than these two please comment below.

Benefits of using font Icons over Images

Now a days the web developers are using font icons rather than images as icons in their web sites. There are a lot of advantages of using font icons. If you are still in a dilemma whether to use font icons or images, after reading this post I guarantee that you will be very clear about the usage of font icons.

What are those Benefits?

• As they are just fonts, you can apply any CSS effect to them just like you do for fonts.
• They are vector graphics so you can scale them up or down very flexibly.
• You can apply colours and transformations just like you do for other HTML elements.
• They are very fast to load and required only one HTTP request.
• They are supported by any browser with any version number, which means they are cross browser compatible and mobile friendly.

There are some Cons also let me discuss them with you. Then you can decide to use them or not.

What are Cons?

• You can style them with only single colour.

I think this is the only single disadvantage in using font icons.

What are it's Libraries?

• Font-Awesome
• IcoMoon
• Bootstrap

These are most used font icon libraries. You can open links and find get started guide.

If any queries please comment below or mail us at ething4pc@gmail.com

Better combination of languages to write an awesome website

Every developer before starting to write some code to develop a website, need to think and consider some languages which fulfil their requirements. A developer needs to takes so many issues into consideration to start his/her application and accordingly need to choose languages. Some of such things include UI, UX, FUNCTIONALITY, SECURITY etc.

In this post I am writing about the languages to choose to fulfil almost all the above needs.

1. HTML / HTML 5

This is the most common language which is used in every web based application. After advancement of HTML 5 Developers are able to develop awesome applications in mobile platform too . This language is commonly used for laying out your website.

    2. CSS / CSS 3 

This used to style the webpages written in HTML. Both HTML and CSS combines to create Front-End of the web site.

   3. JAVASCRIPT

After creating the basic look for your website now you want to give more awesomeness to your application by creating some animations and also create interactions between your website and a client. To accomplish this task u need JAVASCRIPT or it's Libraries like JQUERY, TWEEN.JS, CHART.JS, 

   4. BOOTSTRAP

Now a days, people are opening your applications from different screen sized devices. If your site doesn't support for different screen sizes then you are in big trouble of loosing more than 50% of your clients. Bootstrap is the best option to create responsive websites very easily with very less code .http://getbootstrap.com  is the official website.

  5. LARAVEL

The above language helps you to create world class User Interface and User Experience. Now comes the main part for any application i,e. Functionality. In present days no one wants any static website. Every one needs it with more and more functionalities and also in a secured way. Now to handle that LARAVEL is the awesome framework written on the basis of PHP. It helps you create most secured websites in some minutes. http://laravel.com is the official website.

So, this is it guys. Try mastering these languages and create awesome websites. Happy Coading