Wednesday, 30 May 2018

What every browser knows about you?

You have seen may times google tells your internet presided location or showing country name below its logo makes you to think about what  stuff is my browser know?

Being in incognito mode isn't actually incognito as you know.But there are many things that any other websites can find about you from your browser.So let's see what our browser knows...
what every browser knows about you?

If you go in site settings, you will know that there are verity of things such as location, JavaScript, notifications, camera, microphone etc are there.But these all things ar not needed by all websites at all the time.For example, there is a calculator app on android asking permission for camera, that mans it is staling your data.Sam thing is here.The not trusty websites can steal your data right the way.
<img>

Here are the things which a website can gain through browser.But since the browser is in your control, you can allow or block them from taking your valuable information.

  • Location
Location can be very easily tracked by Google Geo-location API. Although it is not very accurate. However it is passed by JavaScript so you can block it.It is without using your GPS.

But if you allow site to use your GPS, it can find your current location.


  • Browser Information
Any website, through JavaScript, can know which browser you are using with its version on which  operating system.It can also get information that which browser plugins you are using.

To prevent this information from leaking, you can block the JavaScript OR switch to mobile devices by using dev-tools.
Change device in Google chrome dev-tools

  • Hardware
Browser can get information such as CPU, GPU and even battery charging percentage as below.
It can get the resolution of display also.
Hardware information to browser.

  • Connection
Any website with JavaScript turned on can see you public and local IP.Apart from that downloading speed can also be calculated by downloading a simple file and by measuring time taken for it.
  • Check the site you are logged in
Any site can now easily find out to which sites you are logged in Such as Facebook, Twitter and many more like Google etc.
  • Gyroscope and Compass
This can work fine in mobile devices.Any website can get Gyroscope and compass information, if the device has so.
  • Camera , Microphone and Other data
If you have given permission to the website to access the camera, microphone and other data, then they can easily access them.Verify the site before giving any permission.
I sometimes amaze that the people are commenting on the posts like below. How can a JavaScript at all do this?

So be aware and be safe from all the malicious websites and be safe with keeping track and using your tights to control what information a website can take from your browser.
Do remember to like our Facebook page CSSMAGZ.

Make Animations With CSS : CSS Animation Property

Like the CSS transitions we have talked before, you must already know about CSS Animations. These are a very useful in the web to animate any objects on the web pages.

See below - an Example of CSS Animation.
CSS-Magz

CSS animations have 8 sub-hand properties. Which can be defined shortly by animation as same as transitions.CSS Animation property can be used with certain other properties such as color, height, width, background color etc. To define a timeframe in which all the process of animation will happen, we use @keyframes.

The example is given below.
See the Pen Submarine with CSS by Alberto Jerez (@ajerez) on CodePen.

Animation has total 8 sub-hand properties. Let first know about them step by step.

  • animation-name
Animation name is an important property. It specifies which keyframes should be used for a particular animation. Here, it is a name given for the animation. It should be defined in keyframes as below.

  • animation-delay
Animation delay is as same as in CSS transitions. It specifies the delay for the start of an animation. It is a numerical value in second.
  • animation-duration
It is a total time in which the animation will play. Again it is the numerical value in seconds.

  • animation-direction
Specifies to which direction the animation should happen. The default value is normal. Including normal, total six properties can be used here. They are reverse, alternate, alternate-reverse, initial and inherit.
  • animation-fill-mode
Specifies a style for the element when the animation is not playing.  The default value is none. Other values are forwards, backwards, both, initial and inherit.

  • animation-iteration-count
Set the number of times an animation should be played. Value is a simple number like 2.The default value is 1.Making it 0 stops the animation.
  • animation-play-state
Specifies whether the animation is running or paused. The default value is running and pause, initial and inherit values can be used here.

  • animation-timing-function
Specifies how smoother the animation should move.That is, it specifies the speed curves of the animation.The default value is ease and there can be many values used in it.Below is the list of that values.

  1. linear - Animation has a uniform speed from start to end.
  2. ease - Animation has a slow start and slow end.
  3. ease-in - Animation has a slow start.
  4. ease-out - Animation has a slow end.
  5. ease-in-out - Animation has a slow start and a slow end.
  6. step-start - similar to steps(1,start) see below
  7. step-end - similar to steps(1,end) see below
  8. steps(int,start/end) - Steps is a function type animation curve in which adding the number in place of int, for example 40, the animation will go in step wise.
  9. cubic-bezier(n,n,n,n) - Define your own values ranging from 0-1.
  10. initial -Will set the property to default value.
  11. inherit -Will use the property of its parent element.
See all the examples on W3schools.

Making @Keyframes

The stranded syntax of keyframes is as follows-:
@keyframes animation-name{
    0%   {css-roperty:value; another css property:value;}    
    100% {css-roperty:value; another css property:value;}
}

Okay, so imagine your animation in form of a timeline.So at which percentage the things should move is in hand of keyframes. In percentage, you can define the whole timeline by changing the values.
For example, if a thing should change colour from red to blue you will set 0% to red and 100% to blue just like below.
@keyframes animate {
    0%   {background-color:red;}
    100% {background-color:blue;}
}


The Shorthand Property: 'Animation'

The above all 8 properties can be shorthand to a single property 'animation'.This can save a lot of space and time taken for timing.
It should be in the following form.
{   ....
    animation: name , duration , timing-function , delay , iteration-count , direction;
}
And there it is.

You can create very cool animations for your site or blog and use them. Many creative v beautiful example on Codepen.

Thursday, 24 May 2018

How to make a simple HTML5 website

Today, we're going to see how we can make a simple website or a web page in HTML5.HTML5 is the latest version of HTML till the date of writing this post.
make a simple HTML5 website.
So starting to write a web page before 2014, it was seen like below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
But in HTML5, if you opened any HTML5 web page's source code, you'll find the below lines at staring.
<!DOCTYPE html>
The above lines are the way important as they declare starting of a HTML5 document.The further tags in the document are as usual <html> ,<head> and <body>.

After adding the <head> , <title> and <body> tags, the code of the whole document looks like below. This is the sample HTML5 document.
<!DOCTYPE html>
<html>
<title>A HTML5 website</title>
<body>

<h1>The heading</h1>

</body>
</html>

Done! This is our sample HTML5 document or webpage. Many web pages linked together will make a website. Now you might be thinking, where's logo, favicon, paragraphs, and pictures on our webpage and how to insert them.

For that, we need to insert specific HTML tags for the particular item or object. For example, we can insert <img> tag to insert image and <p> for paragraph.

Every HTML document has these tags and thus the items exist on the webpage. You can check all of them by viewing the source code of the web page. To check web page's source, you can right-click anywhere on webpage>>click on view source. Or simply keyboard shortcut Ctrl+U(in Google Chrome).

Each tag, the way it starts, will end.For example paragraph tag-<p> will end like this- </p>

This is very simple and well explained on W3schools. You can go their and check.

For beautifying the website, means to add different colors and background color, to change fonts, to change borders to give different transitions and animations, CSS is used.
Webpage
And finally, for making different actions, calculations and alert to a user, Javascript is used.
To write a comment anywhere in between, use <!-- your comment goes here -->
This is how the whole structure of HTML5 web page is. Till now, there are more than 110 tags in HTML. Some are introduced newly in HTML5 while some older tags are deduced in HTML5.

That's it is how you can make a simple website.I know the post is short, but will surely write one big with more info. Like us on Facebook.

Friday, 11 May 2018

13 proven ways to make money online

Are you searching a part time job?Or either a full time online?Here are 15 proven strategies to earn money online.
So lets see the top 13 ways to make money online!
make money online fast

1.Blogging

This is the most famous and used by many bloggers around world.It is also called as money blogging.Different methods can be used to earn money through the blog or even a website.The thing which is most important and you need the most is people.Yes!The people or visitors or followers or subscribers.They are the power and the reason of money blogging, if we went deep thinking.
Money Blogging
Once you have a good amount of traffic, you can earn money with any one of the following methods. Although there are many methods, some of them are given below.
  1. Advertisement (By ad publishing company or paid ads)
  2. Affiliate marketing
  3. Short links
  4. Merchadise
  5. Ebook
  6. Sponsord Articles
In above list, Ads and Affiliate marketing is used by most of the bloggers.Writing and Ebook is also a way of making Recurring Revenue, but you need to set up a auto payment and delivery service.You can take the help of the services like Instamojo and Razorpay.
Yet, they take a very little bucks for there service.

If you have any Art related or a influence type of website, you an also sell T-shirts or mobile covers making your own merchandise store.
Blog
Sponsored articles is also a great way, but you need a lot of Traffic for that.But till than, you can also go with Guest Posting.

Read more about short links below.

2.YouTube


Well, everyone knows about YouTube.In the competition of many more big YouTubers on the go, It becomes very difficult to grow also because of YouTube's new policies.But with hard-work and your own uniqueness on YouTube you an grow easily.
Making YouTube Videos
According to YouTube's new policies, your channel should must reach the watch time of 4000 watch hours in 12 months and should have 1k subscribers to the channel to join their Partner program.You can read in detail on their Creator blog.

There are many opportunities apart from Google Adsense on YouTube, like Sponsorship  and affiliate marketing can also be used here.

3.Facebook Page

Having a Facebook page with thousands of like is a great upper hand.Facebook page is not only help to increase the traffic, but also you can advertise the products and hear from the consumers.

But sometimes the people cannot get the enough likes.That time, you can use these strategies to increase your Facebook Page likes.
Managing Facebook page.
Also, having an Instagram account with millions followers is also great.Afterwards, you can sell these accounts or pages.

4.Affiliate marketing

Today, most of the bloggers are seen to be using this techniques to earn money online, yet it is not very new.Almost all websites with e-transitions, not only eCommerce sites, but hosting sites like Godaddy and 000webhost also allows affiliate partnership with them.

This way can be used anywhere, when the people(or traffic) is in large numbers, but works best on targeted audience.You can share your links on Blogs, Websites, Social Medias and can send it to friends also.

There is no tracing or illegality in affiliate marketing.Just 'sign in' for the affiliate marketing, click on get links and start sharing that links.If any user buys their product using your link, you'll get a little commission.The most famous among them is Amazon Affiliate Marketing.

Affiliate marketing is a revenue sharing process.That means you try to promote other's items so that you can earn some profit or commission.

There is lot to say about Affiliate marketing and their tactics to grow.But will shore in upcoming articles.

5.Advertising

Most of the sites including big social medias like Facebook and Google run in advertising manner. Advertising is just the advertiser who want to promote their product or service.There is no overall lot of traffic to a single website or blog for advertiser to buy up the space.So, the ad publising compnies like Google Adsense, Infolinks, Media.net, Bidvertiser etc.
Advertisement
To allow these sites to display ads on your website or blog, first you need to sign in.After approval, you can place ads on your blog. Bidvertiser is known for its fastest and simplest approval with all sorts of domain including sub-domains like .blogspot.com. And also its minimum payout is $10.It supports cheque, wire transfer and Paypal.

Google Adsesne is Also a great but needs good quality posts without grammatical mistakes.It can give  approval to a site with less than 10 posts or can reject a site which have more than 100 posts.So at beginning on;y you need to write a good number of SEO-ful posts with In-page and Off-page SEO. The minimum payout is 100$ and supports payout through Bank and wire transfer.At this time of writing, over 14.3 million websites use Google Adsense.

6. Sponsored Content

This trick works only on the blogs which have huge of traffic.Say if you have a blog on blogging.So you can take a sponsorship from any hosting company such as HostGator. Then you will write the article with pros. and cons. of it and will suggest to your followers.

This is one type of advertising only, but with your trust, your own people start to trust that particular product and service.This thing can work on YouTube or other social media platforms also.

7. Fiverr

Fiverr is a world's largest s freelancing company.As its name says, you'll paid minimum 5$ for your work.If you increase your speed, you can get even more than that.
Fiverr logo
You can perform any work on Fiverr, like web designing, animations, whiteboard, voice over and can even write if you are too good at.If you are good at making Logos, "do it.Just don't dream".

8.Web App

This is a great way but may only work for some people.You can make a web app, or a tool or a app or even a game.When user will download and use it, ads will make money.

In case of tools, you can make some tools if you know coding somewhat.Simple tools cam be made such as simple SEO tools, HTML highlighter tool(For eg. hilite.me) and some website with new ideas(Facebook and Quora was also an idea a time in history).Some of them are open source so you wont need to stress much for writing code, only the thing is to do well in SEO. Some of simple examples are word counter, code minifier or beautifier, image converter etc.
Social media is also an example of web app.
Then, advertising can work fine to drive income without much work.Bu yes, you need to update your apps or website to add new features that you get through user response.

9.Online Store

Yes!You can sell your own products without having a big company like Amazon and Bang good.There are certain stores available which allows you to sell the goods like t-shirts, mobile covers,
stickers etc. having your own artwork.
Online store can be made if you have huge traffic.
Also, you need to romote it through your own network and ecosystem.You can promote it well if you have a great eye catching attractive design and a platform will numerous number of followers.One of the example of these are MyDreamStore and Teechip.

10.Buying and Selling Domain

Buying and selling domains or domain trading is a tricky industry.Even it may be easier for some people, it may be difficult more than the above methods.

Some says very easy steps to do it but some finds that they have wasted their time and money.

First, you need to study the market.You can use Google's Ad-words or any other keyword Planner to recognize the direction of wind in the market.
Different types domain names with their extension.
Then, go to a bulk domain register such as Godaddy and register that particular domain name.If anyone wants that particular domain name, you can increase its cost to multiple times to the cost of original domain.
For example, Facebook took the credit of fb.com after paying $8.5 million in 2010.Also Xiaomi bought Mi.com in 2014 for 3.6 million dollars.You can view the list of most expensive domain names on Wikipedia.

11.Sell Photos or Videos online

Selling photos and videos online is not a very new method.In fact, many photographers and videogaphers are doing this.

You need a very little talent for this.If not photos, you can share illustrations and designs also. ShutterStock is preferred by many.It accepts photos, footage and vector graphics.There is also an affiliate program where you can earn commission if you refer new photographers, customers or friends.

There are many more websites for this purpose.Some of the famous names are- Getty images, iStock , 500px, Adobe Stock and PhotoDune.

12.Paid Advertising

As same as advertising mentioned above, this is as same as that.But here the advertiser directly give you ads.You will be paid more than the publisher advertising.Here, the rate of the ad boxes are defined by the page position, impressions and type of niche websites you have.

Lot of traffic and a fixed niche websites or blog can make money through this method better.You can also take help of third party advertising solution service such as BuyandSellAds .

13.Short Links

Bloggers have to use shot links for one or the other reasons.After shutdown of Goo.gl URL shortener, there are many URL Shrinkers online by which you can earn from usual short links.

The concept is somewhat that the visitor will click on a link and the URL website will take it to a page where it will show a ad to visitor and then after 5 sec or more, redirects to the main website.
How to Earn with short links.
I usually not prefer this kind of way as it irritates the user and most of the chances are that the traffic will move on to another website. Besides, the ads may spammy and they many redirect your valuable visitors to some spam full websites.

If you still want to use this method, then only use it in not important links.Such as some no-follow links etc.It may still irritate some users, but it totally depends on you.

Some of the websites that offers this services are Shorte.st and Adfly.
Looking from Top
As can be seen from all above ways to make money online, if you have great viewership, then only the most of the methods can be worked out.This is the Key of all the methods mentioned above.

Thanks for reading this post.Do like our  official page on Facebook and Follow us on Twitter.

Thursday, 3 May 2018

Make objects animate : CSS transition Property

Well, you must already know that CSS now has transition and animation property with it in its new version 3.Here, today we will understand the concept of how easily we can understand the CSS transition property.
CSS transition property

All the modern browsers supports transitions. Before moving for examples and functionality, let we see which browses till now supports CSS transition property.

Name of the Browser
Supportive browser version
Supportive transition properties
Google Chrome
26.0
4.0 –Webkit-
All
Mozilla Firefox
16.0
4.0 –Moz-
All
Microsoft Edge
10.0
All
Apple Safari
6.1
3.1 -Webkit-
All
Opera
12.1
10.5 -O-
All

Here 'ALL' means all the transition properties like delay, duration, property and timing function.Now a days all the modern browsers support transitions.

See the below example.On hovering the mouse over the text changes its colour.
Hover On Me!

Its because we have set transition property to that element in normal CSS like below.
.element{
    transition:colour 1s; /*standard syntax*/
    -webkit-transition:colour 1s; /*For webkit browsers*/
    -o-transition:colour 1s; /*For Mozilla browser*/
}

.element:hover{
    colour:red;
}

 There are total 4 properties in transition.Transition-delay, transition-property, transition-duration and  transition-timing-function.In which, transition property and transition duration are most important a without them the transition cannot work.Combining all into single, we can do it with just transition property, which is the shorthand of them all.

  • Transition-property
In the main element, you need to set the transition property means to which CSS property does the transition will happen.Note that all the CSS properties do not support the transitions property.The syntax for transition property is-

transition-property:value;

The supported transition values are- none, all, initial , inherit or any property to which the transition will occur. Separate the different properties with comma.The default value is none.So if this property is not mentioned, the transition will not occur.
  • Transition-duration
If we specify through transition-property that the transition will happen a particular property, then the next question is about time.For how much time should the transition should be kept on going? Therefore, we use property- transition-duration.

The accepted value in transition-duration is a time in seconds greater than 0(of course).The default value is 0s. So if you didn't put this property, the the changes will happen in no-time.

  • Transition-timing-function
Transition-timing-function specifies the speed curve of the transition.
transition-timing-function: value;
The following values can be inserted in value.The following transition timing functions specify the transition effect- 

1.ease - Slow start, then fast, then end slowly (this is default)
2.linear - Same speed from start to end
3.ease-in - Slow start
4.ease-out - Slow end
5.ease-in-out - Slow start and end
6.cubic-bezier(n,n,n,n) -Define your own values in a cubic-bezier function


  • Transition-delay
Want to start your transition after 1s, 2s  5s or even 10s or more? And the good news is you don't even need here a bit of JavaScript to do this(Just cuz CSS is Awesome!).

With Transition-delay, specify the time so that the transition will start after that.It is again a numerical value in seconds grater than 0 and the default value is 0.
Using Shorthand property 'transition'

As said above, transition is a shorthand property you cab use instead of all the other properties.
Which means instead of all this-
.elm{
    transition-property: height;
    transition-duration: 5s;
    transition-timing-function:linear;
    transition-delay: 1s;
}

You can make it this simple!-
.elm{
    transition:height 5s linear 1s;
}

Here you need to note that all the properties should be in this order-
transition:transition-property|transition-duration| transition-timing-function:linear|transition-delay;
So this was a simple article about CSS transtion Property.If you like it then do like our fb page.