The Truth About Meta Keywords

We always look into the matter of keywords or so called labels(tags) in BlogSpot that we should choose the right keyword or long tail keywords to rank higher.

Detect The Keyboard Key Clicks In JavaScript

Well, you might have seen on the different websites and web apps that you can control them on keyboard. For example, you can hit spacebar for play/pause the video or F to toggle full-screen. You can apply it to your project too. For that, you need to detect the keyboard clicks in JavaScript.

How to Host CSS and JavaScript files on GitHub?

Okay, so you have a problem of slowing of your blog or website because of the server, which is not giving hand-holding support to loading of resources. This happens specially if you are using shared hosting.The reason could be your CSS or JavaScript which are putting lots of pressure on your server.

How to detect if the user is in Incognito mode using Javascript?

Sometime before, we had talked about the incognito mode in Google chrome browser. Today, we are going to see how we can detect it using simple lightweight JavaScript.

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...

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.

• Hardware

Browser can get information such as CPU, GPU and even battery charging percentage as below.

It can get the resolution of display also.

• 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.

All the examples and live demo here by Robinlinus.

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.

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.

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.

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.

10 Tips to Speed Up Your Blog's Loading Speed

Maintaining higher blog speed is also a factor in SEO. We constantly need to check if our blog is running at uniform speed or not and for that we need to apply some techniques to make it faster.

Today we are going to look at some easy to do techniques to boost up page loading time.

• Take Look At Host

The very important thing if you have any blog, website or web app.It is okay if your bog is hosted on blogger.com as it runs on Google servers which are usually fast.

But if you are using any third party hosts, and your page loading speed isn't that great, then you need to upgrade your plans.If you are using shared hosting then upgrade it to VPS.

• minify CSS and JavaScript

If your scripts are not minified(compressed), then do it as it will surely increase your page load speed. Minifying or compressing this scripts will reduce the size of the files and thus, they will load faster.

If you use WordPress, you can use this or any other plugin.For non-WordPress users or bloggers, you can use some online tools like this.

• Compress images

This is the most important factor responsible for slow page loading speed. Many bloggers use high -quality images(nothing harm in them) and their size is also high so it takes much time in loading.

You need to compress this images as they will reduce image size and there is no much need of using high-quality 1080x1768 px images if finally, they will be loading at 590x590px. Also at mobile phone level, there is no much need of using this high-quality images.

When the page is being loaded, the browser tends to load the text in the page first.If you have already specified height and width of the image in <img> tag, the browser will leave that space and will load the text first and then it will load the images.

For compressing images, you can use WordPress plugins such as smush or many online tools are also available like this.

If you are using Google blogger, the Blogger will automatically resize the image and will add height width.

• Use CDN

Using content delivery network or CDN page will absolutely load faster as it would load resources from the nearest server to user. YouTube also uses CDN to deliver the video much faster to the user and cuts off much streaming time.There are many CDN available such as CloudFlare. It has 150+ data centers around world.

• Use a better theme

Use an SEO friendly, fast loading theme.If theme itself takes much time in loading, you need to change it immediately.

Choose a theme from well-trusted sources. It is better not to go much far for free themes in case of WordPress or similar as they can further create problems if there are any malicious code in it.In Blogger,theme  is made of simple xml yet you need to download from trusted sources.

• Don't load unnecessarily

Check whether some resources are loading unnecessary such as unnecessary scrips etc. If they are, better to remove them.

• Delete unnecessary plugins

If you find that a plugin is no longer useful to you, do delete it. Check for a plugin that would do the work of two or more different plugins(plugins substitute).

• Show limited number of posts

Anytime if a user searched anything to set a limit of 10 results or like that.Loading posts way more will increase loading time.So load a limited number of posts or even comments.

• Use JavaScript at end

When inserting JavaScript to the page, such as Facebook or any other sites, add it after <body> tag.SO it will not interrupt the existing things while loading.

• Don't use too many Advertisements

We've seen many bloggers using too many ads from different ad publishers.Load all the ads after loading the page.Many times, in slower connections before loading the text and images, the ads start bonking up.This is because they have inserted the scripts at top of the page.These scripts take time to load and further the whole page loads slowly.

Well, Google seems to consider 0.5-1 sec as excellent page loading time. However,less than 3 sec are average for most of the websites.

Use the above tips to make your blog faster and move a rank up in Google search!

Create a custom scrollbar with pure CSS

Want to make your existing scrollbar beautiful, responsive and matching with the theme of your blog? Yes! you could too build it without using any JavaScript and only with a little bit of CSS.

Use Google Like A Pro!

Google,being most used search engine till date,used by many people around world.But after reading this post you will be more knowledgeable about how to use Google like a pro-faster and get a quick answers.

So lets start with the simple ones.

• Head Or Tale?

consider when you and your friend or colleges got stuck up with a decision, and want to decide with only either of a options remaining and you decide to flip a coin.But wait! you have no coin!In such case you can use Google for flipping a coin.Just search 'Flip a coin' and your decision is ready.

• Know your IP address

You want to know your Internet Protocol (IP) address? Just search on Google 'ip' or 'ip address',it will show up your ip address.

• Do a barrel roll

Want to make Google Search page roll like a barrel? Search 'do a barrel roll' on Google and check out the result yourself! 

• Convert numbers to word

For example what will be 8203983 in English words? Search 'Number = English' and check out the results!

• Do calculations on Google

Although its easy to do simple calculations on Google chrome in search bar,Google search will be more helpful while doing complex calculations.For calculator, search on Google - 'calc' or 'calculator' or make your mathematical problems directly through search.For example - 627+839

• Search for specific file type

You want to download any power-point presentation or want to download any word file to your search results, search- 'your-search-query filetype:pdf'.

• Search in specific site

If you want to search results from specific site, use query -'your-search site:sitename.com'

For example, -'why can't leopard hide? site:quora.com'

• Set timer

You must be knowing this thing already.Search 'set timer for 10 minutes' , to set a timer of ten minutes.

• Atari Breakout on Google

Search for 'Atari Breakout'  in Google Images and play the game.(desktop only)

• Google Gravity and Underwater

Try this fun tool for searching google.Gravity and Underwater!

• In URL and In Title

Search with specific words in title or in website URL using 'inurl:google' or 'intitle:code'

• Askew and <marquee>

Try searching 'Askew' and '<marquee>' on Google search and find what is does yourself!

With that thanks for reading this short post.If you like, don't forget to follow css-magz.

If you have more searches like this, mention in comment section.

Yet this are some simple searches, We'be coming soon with- 'How To Use Google Like A Super Pro!'