October, 2018 | Tutes Club

This is what CSS can do.

Are you ready for the magic? I am saying this because I believe that coding is closest to a superpower that we have. And the best part is that anyone can achieve this superpower.

Here we are going to see how a single HTML file can look entirely different with just the change in CSS file. Mind that no front-end-framework has been used in the upcoming designs, it is just the beauty of pure CSS.

CSS stands for cascading stylesheet. Its sole purpose is to make HTML file look physically good.

The image below is going to make it very clear.

css

CSS Zen garden:

CSS Zen garden is a site where the same HTML file has been designed with CSS by various professionals.

It seems that every design is a different web page with the different HTML file, but it is not. Every page has been designed with the same HTML file.

I have shown some examples in this article. You can check more designs on the site.

Here is the link:

http://www.csszengarden.com/

*These designs are just for the learning purpose, it can not be used as a template.

This is very helpful for beginners, as they can see how the professionals design and code.

The Beauty of CSS:

So, here are a few examples from the site.

VERDE MODERNA

GARMENTS

APOTHECARY

FOUNTAIN KISS

A ROBOT NAMED JIMMY

Doesn’t all of them seems completely different web pages? Well! that’s the beauty of CSS.

Visit the site and get to see more of these astonishing designs of the same HTML file.

This is how you can learn from the professionals, without letting them know. (Learning like Eklavya. Don’t worry no one is gonna ask for your thumb.) And, that’s what CSS can do.

OK! so that is it. We will be back with another mind-boggling article. So stay tuned.

Thank You.

Quantum Computers: Technology from the future.

Either you talk about research, space exploration, or advancement of new technologies. Computers have become an inseparable part of our life.

In the last few decades, we have reduced the size of the computer and increased its computation power.

Today’s smartphones are much smaller and faster than the giant military computers 50 years ago. We have also been able to build super-computers, currently the most powerful system.

Even after so much advancement in computers, there is still some limitation that has not been conquered yet!

To name a few:

Speed (solving complex mathematical equations.)
Storage space issue.
Energy consumption

Hence to overcome such limitations we need something called “Quantum Computer”.

QUANTUM COMPUTER:

Google, IBM, & Intel are continually trying to build computers with no limits, using the principles of Quantum Physics. (These are called Quantum Computers).

No, don’t think that it is all about the future because the basic model of Quantum computers has already been successfully created and tested. And now being created at massive scale.

You should check our article on Bit, Byte and today’s storage system.

QUBITS:

Binary computers use BIT for computation, whereas Quantum computers use QUBIT.

BIT: Is the smallest unit of information in current computers. It represents only one of the two values, 0 or 1.

QUBIT: Quantum analague of classical bit. It can take on both values simultaneouly, 0 and 1. This characterstic expands the possibilities of parellel calculations.

This means in Quantum Computers programmers can check for: (“if this then that” and “if both”). Two diff outputs can be checked simultaneously.

Sounds strange? How can something be at two diff positions at the same time? Well, that’s what Quantum Physics is known for.

I could have explained the basics of Quantum Physics, but that may blow your mind with strangeness. But if you are curious like me then search about Schrodinger’s cat experiment.

By the time binary computers will begin to work on a complex equation, Quantum Computers will give the result.

CHALLENGES WITH QUANTUM COMPUTERS:

On observing QUBITS changes its state.
Produces a lot of noise when in use.
More QUBITS means more chances of error.
Requires to store at perfect 0 temps. (cooler than outer space.)
Consumes a lot of power to be operational.

These were a few reasons that it is not operational yet!

Once operational it will increase our progress rate exponentially. It can help us in understanding the underlying secrets of the universe and in developing Artificial Intelligence.

Hope that Quantum Computers will very soon come into existence to make our life even easier.

This is a very complex topic, I tried to put it as simple as I can. Also, I avoided some out of the world concepts. I leave it up to you to explore further.

Please comment if you liked the article.

Thank You.

Deploying a live site with free Domain and Hosting.

Hello everyone!

In this article, we are about to create an entirely new site from scratch with free domain and free hosting.

I am going to create one for the sake of this tutorial, which you can visit to check at the end of this article.

Before we start, let me clear this for one last time: for the domain, we are using freenom.com and for hosting we are using 000webhost.com.

Let’s do it:

Domain registration:

At freenom.com you will get free domain name extensions like “.tk, .ml, .ga, .cf, and e.t.c”.

Go to freenom.com and search for your free domain. We are going to use mytrialsite.tk for our tutorial.
Choose your preferred extension, checkout and continue.
Sign in with your E-mail id, verify your account and set up your account details and click on complete order.
Go to service in the navigation bar and select My Domains from the drop-down menu.
There you have your registered domain.

Getting the free Hosting:

Now we have our domain, so let’s get the hosting from 000webhost.com.

Go to 000webhost.com and click on sign up for free.
Now you will be shown 3 hosting plans. Choose Free web hosting and continue.
Sign up with e-mail and enter your website name and verify your account.
Select Manage Website.
Here you are in your dashboard. Now select “set web address“. Then it will ask you to upgrade but don’t. click on “It’s OK, I don’t mind 000webhost branding“.
Next, you will have two options – Own Domain and Buy-Domain. Select “Own Domain“.
At this point, it will ask you to park your domain. BE CAREFUL AT THIS POINT DON’T ENTER YOUR DOMAIN AND CONTINUE RIGHT NOW. I personally have troubled a lot here. Please mark my words don’t hurry here.

Pointing domain to your hosting:

First park domain to your hosting and then complete step 7 above.

Go back to freenom, where you left it in step 5. click on “manage DNS”.
Under the drop-down menu of “management tools” choose “Nameserver”.
In Nameserver choose “use custom nameserver”. And enter these two nameservers: (ns01.000webhost.com & ns02.000webhost.com). Continue by clicking on change nameserver.
Now is the time to enter the domain name in 000webhost at step 7 in the previous section. Back to 000webhost, enter your domain and click “park domain“. In most cases, it will be parked immediately or it may take up to an hour.

Hurray:

The site is now live on the internet. To make it attractive and add some content you can install WordPress.

So, let’s see how to do it.

Click on “Build Website”.
Select WordPress and install. Also, change admin username from admin to whatever you want.

That is it you are done. Now customize your site in WordPress. We are not gonna talk about WP settings here, but maybe in some other article.

Well you can check the site I used for this tutorial, it is live on the internet with some WP customization. Here is the link.

www.mytrialsite.tk

IT takes just 5 minutes to make your site live. There are other free hosting providers as well you can check the list here.

Tutes.club – 10 free web hosting service providers.

So, I hope that your free site will also be live on the internet very soon. If you liked this article then you can check out our other articles as well.

Thank You.

Bit & Byte: The storage system.

You may have heard Bit & Byte before, but do you really know what is it? How does the computer storage system work?

We are continually generating a lot of data every second, hence there should be a storage system strong enough to handle it all. In this post, we are gonna talk about this storage system.

“Over 2.5 quintillion bytes of data are created every single day, and it’s only going to grow from there. By 2020, it’s estimated that 1.7MB of data will be created every second for every person on earth.”

In the next article, we will also talk about the next generation of computer storage system (Quantum Computing.)

What is Bit & Byte?

A Bit is the smallest or basic unit of computer information which has only two values “0 or 1”. These two values can also be defined as “true or false” and “yes or no”, depending on the binary code.

A Byte is the smallest unit of memory. One byte is made up of eight bits, that means one byte is one character of information and is comprised of eight bits (eight 1’s or 0’s).

Here is a table to clear out your confusion.

Unit\Value

Unit	Value
0 (Off) or 1 (On)	1 Bit
8 Bits	1 Byte
1,024 Bytes	1 Kilobyte
1,024 Kilobytes	1 Megabyte
1,024 Megabytes	1 Gigabyte
1,024 Gigabytes	1 Terabyte
1,024 Terabytes	1 Petabyte
1,024 Petabytes	1 Exabyte
1,024 Exabytes	1 Zettabyte

What is 32 bit / 64 bit?

Many times while downloading a software, we get to see two options – ” download in 32 bit” or “download in 64 bit”. So, let’s see what is 32 bit / 64 bit?

The terms 32-bit and 64-bit define the fixed-size piece of data a processor can transfer to and from memory. So, in theory, 64-bit computers can handle data twice as fast 32-bit systems.

The term for 64-bit computer architecture is x64, and the 32-bit computer architecture is most commonly known as x86and was based on the Intel 8086 / 8088 processor. The Intel 8086 / 8088 processor was found in the original stand-alone Pac-Man video arcade console.

The storage system:

Different users can have different storage requirements. Knowing what a computer is going to be used for (and of course many computers are used for a variety of purposes) is hence very important when planning storage requirements.

So let’s continue with some of the available storage devices and technologies.

HARD DISK STORAGE: Spinning hard disk (HD) drives are today the most common means of high capacity computer storage, with most desktop and laptop computers still relying on a spinning hard disk to store their operating system, applications programs, and at least some user data.
RAID: On servers and high-end PC workstations (such as those used for high-end video editing), at least two hard disks are often linked together using a technology called RAID. This stands for “redundant array of independent disks” (or sometimes “redundant array of inexpensive drives”), and stores the data in each user volume on multiple physical drives.
DIRECT ATTACHED STORAGE (DAS): Except where two internal hard disks are considered essential on the basis of performance, a second hard disk is a today most advisably connected as an external unit, or what is sometimes now known as a “DAS” or direct attached storage drive
OPTICAL DISK STORAGE: Almost all optical storage involves the use of a 5″ disk from which data is read by a laser. Optical media can be read-only, write-one, or rewritable, and currently exists in one of three basic formats – CD(compact device), DVD(digital versatile disk), BD(blue ray disk).
SOLID STATE DRIVES: Solid state storage devices store computer data on non-volatile “flash” memory chips rather than by changing the surface properties of a magnetic or optical spinning disk. With no moving parts solid state drives (SSDs) — are also very much the future for almost all forms of computer storage.
FLASH MEMORY CARDS: Flash memory cards were developed for digital cameras and mobile computers. They consist of a small plastic package with a contact array that slots into a camera or other mobile computing device, or an appropriate memory card reader.
SD CARDS: SD cards are the most popular flash memory cards now on the market, and come in so many variants that they do require some explanation. SD cards come in three physical sizes. Standard size SD card, Mini SD card, Micro SD card.
USB MEMORY STICK: USB memory sticks (or USB memory keys, USB memory drives, or whatever you choose to call them!) are basically a combination of a flash memory card and a flash memory card reader in one handy and tiny package.
NETWORK AND ONLINE STORAGE: Files stored and/or backed-up online are still saved to a hard disk rather than to some magic, new alternative media. However, the fact that the disk is located remotely to your computer, can be accessed from anywhere and is probably backed up by the service provider(?), can make online storage and back-up very attractive.

The last few years have seen the death of the floppy disk and for many digitizations of photography and their music collection.

Continue reading “Bit & Byte: The storage system.”

Solid-Inrupt: Welcome to the internet 2.0.

List of Data Breaches from 2005 to 2018. – Wikipedia.

Before going ahead I want you to check out the list above, it will give you an idea that what is happening to your personal data, and there is no privacy at all.

Take the recent Cambridge Analytica & Facebook case, 5 million individuals data was leaked or sold by Facebook. Also, you may have heard the latest one about G+, Google plus is shutting down after 500,000 users data was exposed.

On the internet, there is no such thing as Privacy. Yes! it is something to be worried about.

Maybe not anymore.

Enough is enough, the father of the internet want the power back in his hands. His dream was to create a secure network where individuals would have been the owner of their own data, but surely that is not happening with WWW.

So, Tim Berners Lee decided to rebuild the internet.

Solid Inrupt: About.

Solid Inrupt is the name of this project of remaking the internet. Here is the official site of solid inrupt.

https://solid.inrupt.com

Tim Berners Lee took this project of the new internet because as the internet evolved it diverged from Sir Tim’s original and inspiring vision. (Individuals to be the king of the internet).

Tim and Team have given 15 years to make it a reality.

Tim wants to provide a platform for the next generation of truly empowering and innovative developers.

How it works:

You decide where you store your data. Since you own your data, you’re free to move it at any time, without interruption of service or penalties.

whenever you’re opening up a new app, you don’t have to fill out your details ever again: they are read from your POD with your permission. Things saved through one app are available in another: you never have to sync, because your data stays with you.

What is POD?

Your POD is your personal storage space. All your data will be stored in your POD, not on the server of Facebook or Google, where they can manipulate it.

PODs are like secure USB sticks for the Web, that you can access from anywhere. When you give others access to parts of your POD, they can react to your photos and share their memories with you.

You can have as many PODs as you like, and they live on Solid enabled Web servers. Install the Solid Server on your own server at your home or workplace, or Get a Solid POD from a listed provider.

In order to prove ownership of your data, you need a way to identify yourself. Rather than relying on a third party, you can use your Solid POD to say who you are. So no more “Log in with X” or “Log in with Y” on the Web — just “Log in with your own Solid POD”.

What it holds for the Developers?

As far as claimed by the Solid Inrupt team, it is going to be a very promising platform and gonna create more opportunities for developers.

If you are a developer or planning to be one, then you can check their get started guide for developers. Here is the link to the official documentation page of Solid Inrupt.

https://solid.inrupt.com/docs/getting-started

But do you think that the current internet Kings like Google, Facebook and Amazon will let the power slip by their hands? They will surely not give up.

Now only time can tell what will happen, or who will win?

Father of internet V/S Kings of internet Continue reading “Solid-Inrupt: Welcome to the internet 2.0.”

Default .htaccess file for wordpress with compression and caching tweaks

Here is the default .htaccess file for wordpress

If you are using cpanel, before you proceed make sure that you don’t have htaccess file already. Default File Manager settings in cpanel make it hidden

.htaccess file – default code for wordpress

# BEGIN WordPress
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</ifmodule>
# END WordPress

If your WordPress Installation is inside a directory say knowledge, which means your wordpress url is https://abcd.com/knowledge/ then htaccess code would be

# BEGIN WordPress
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /knowledge/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /knowledge/index.php [L]
</ifmodule>
# END WordPress

Add the following code for Leverage Browser Caching

<ifmodule mod_expires.c>
ExpiresActive On
</ifmodule>

# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"

# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"

# CSS, JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"

# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"

Add the following code for GZip Compression

<ifmodule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</ifmodule>

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

How to change name-server in Godaddy and other registrars?

Hi Everyone!

In this post, we are going to talk about the process of changing nameserver in Godaddy and other popular registrars.

You would need to do this process to connect or point your domain to your hosting, or whenever you decide to change your hosting service provider, as hosting providers ask to park the domain that you own.

The process is basically the same in all registrars, the only difference is in their visual interface.

First, we will talk about Godaddy and other popular ones then I will try to give general steps to change the nameserver in any registrar.

So, let’s begin.

Changing nameserver in Godaddy:

Login to your Godaddy account.
If you have multiple domains in your account then select the one you want to change nameserver for.
Click on Manage DNS.
Go to the nameserver section and click change.
Switch the dropdown from default to custom and under nameserver fill new DNS.
And Save.

NameCheap:

Sign in to your NameCheap account.
On the sidebar navigation click Domain list.
Now for your preferred domain click on manage.
Now choose the custom DNS from the drop-down menu. And enter your nameserver.
Save and you are done.

Porkbun:

Login to your pork bun account.
Go to the domain page – account/domains.
Now for Authoritative nameservers click edit. (as shown in the image below)
Enter your own nameservers and save.

Alpnames:

Login to your alpname account.
In the sidebar menu select Domain registration.
There you will find a section called nameservers. Click it and edit your nameserver.
Save your changes and you are done.

Dynadot:

Login to your Dynadot account.
select My Domains.
Under my domains drop-down menu choose Manage Domains. Now go to DNS settings.
Under add server, enter your own nameserver.
Save and continue. That’s it for Dynadot.

NameSilo:

Login to your namesilo account.
In the sidebar menu go to Domain Manager.
For your preferred domain select the rightmost icon as shown in the image below.
Under default name server enter your own nameserver.
Submit your changes and relax.

Now let’s try to generalize these steps for all the registrars.

General steps for any registrar:

Login to account.
Go to the list of domains you own.
Select manage DNS for your preferred domain.
Change nameserver to custom DNS and fill new nameserver.
Click save.

Navigation would be different for diff registrars, but the core process is almost the same.

An example of freenom.com:

This is how nameserver is changed in freenom. The interface and navigation are different but the ultimate process is the same.

my domain >> management tools >> nameserver >> custom DNS.

freenom

Now you are all set to change nameserver in any registrar. So, go ahead and do it.

We will keep uploading new blog posts full of information and tutorials. So, don’t go anywhere and stay tuned.

Thank You.

How to fix WordPress locked error from wp-admin login by jetpack plugin?

You should now be able to login again, and this issue shouldn’t repeat itself. Jetpack’s Protect function looks at the incoming IP address when you try to login, and compares it against our network of blocked IPs. This works pretty well, unless Jetpack’s Protect is being told the wrong IP address by your site’s server. In your case, your server was reporting its own IP address to Protect, which is why it was blocked. This meant that every single time someone with a WordPress site on your site’s server entered the wrong password, we thought it was the same person. If your hosting provider has several hundred WordPress sites on the same server/IP, that adds up fast, leading to a ban on the IP.

I’ve made a couple of changes on our side, and Jetpack’s Protect feature will now determine incoming IP addresses a different way. You’re still protected!

– Jeremy Herve (@jeherve) – Plugin author

Solution:

Whitelisting Your IP Address

Whitelisting may be necessary if you’ve made too many failed log in attempts to your site. There are three methods for whitelisting your IP address:

If you have access to your site and you’ve not been blocked, you can enter your IP or IPv6 address(es) by going to Jetpack → Settings → Security → Brute force attack protection.
If you are blocked from entering your site, you can enter the IP or IPv6 address(es) via WordPress.com by visiting My Sites → Settings → Security → Prevent brute force login attacks
You can also whitelist one IP address by setting it as the JETPACK_IP_ADDRESS_OK constant in your wp-config.php like this:

define('JETPACK_IP_ADDRESS_OK', 'X.X.X.X');

You can find your IP by visiting any of the following sites:

www.whatismyip.com
www.whatismyipaddress.com

References:

https://jetpack.com/support/security-features/#unblock
https://wordpress.org/support/topic/jetpack-has-locked-your-sites-login-page/#post-10069377

Best WordPress themes for personal blogging.

You can create your own theme and upload to your blog site, but for that, you have to be a developer. Don’t worry if you are not, thanks to the flexibility of WordPress. There are a ton of pre-written themes for you to use.

These themes are for personal blogging and have a clean design and structure which is good for ranking factor in major search engines like Google, Bing, and Yahoo.

There paid versions are even more customizable and SEO friendly. I know you are getting eager to get the list.

So, let’s take a look at the best WP themes for personal blogging.

WordPress themes for personal blogging:

Kallyas KALLYAS is a technologically vast and resourceful yet ambitious and creative WordPress theme. It is expansive and readily responsive — perfect for any kind of website. KALLYAS is a strong, bold toolkit for the creation and development of polished, professional-quality, modern websites with minimal hassle and absolutely no coding skills required. With KALLYAS by your side, dozens upon dozens of sophisticated, professionally and graphically designed page templates and demo websites are at your disposal to get your projects off to a proper start with just a single-click import process.
Writing Minimalist yet powerful, Writing is a WordPress theme that never fails to impress. It is entirely Retina-ready and fully responsive, allowing your readers to access every post from computers, tablets, and smartphones. In addition, this theme is compatible with all major browsers. Writing is SEO-ready, which increases your chance of success by maximizing your site’s exposure.
Matilda Matilda is a wonderful personal blog WordPress theme with a minimal feel, elegance and loads of professionalism. It is the best fit for every lifestyle blogger out there, however, Matilda can also smoothly adapt to other niches. In the Matilda package, you receive a total of 32 HTML files of which eight are neat home variations. That said, go with what is available and have a blog up and running in a breeze. Or improve and customize it with your individual touch. To each their own.
Essence The Essence is a beautiful, highly diverse, tremendously intuitive and totally responsive WordPress blog website theme. It’s a theme built to satisfy the needs of the modern blogger, whether for casual and personal blogs or for professional, corporate and journalistic blogs. The Essence has been outfitted with a series of options, styles, layouts, and widgets that make your website a natural at blogging, with dedicated features and tons of custom post types, incredibly capacity for visual and experiential customization, and much more under the surface.
RandomRandom is a colorful, eclectic, modern and highly responsive WordPress theme that will leave your viewers truly impressed. This theme has been created by a team of dedicated developers and inspired designers as a solution for the modern webmaster that needs a freely structured environment where they can express themselves in an unrestricted fashion to the best of their abilities. To that end, Random includes a powerful assortment of all the latest and greatest web development features, each with its own unique, undeniably creative twist.

This one (Random) is my personal favorite. Just look at it how Eye-catching it is.

So, these were the 5 best WP personal blog theme according to me. Are you aware of some other themes that I missed? please let us know in the comment below.

Thank you.

Understanding Media type and file format.

With the wane of physical media which is extremely limited, Digital media is exponentially becoming the dominant way we listen to music, watch videos, and view still images.

And there is no single file format that takes care of it all. (How unfortunate).

Hence it becomes important for us to understand media type and file formats. So that you don’t encounter with an instance where your device or browser says “unsupported file format”.

There is a lot to cover in this article, so let’s begin without any further delay.

Media type & File format:

Media type was previously known as MIME (Multipurpose internet mail extensions.) It is a two-part identifier for the file format, first is the type of media and second is the type of extension. ex- video.mp4

IANA is an official authority for standardization and publication of these classifications. You can check out the IANA website for media type here: https://www.iana.org/assignments/media-types/media-types.xhtml

You can get to know about media type naming, registration trees, suffix, mailcap, and mime type on Wikipedia.

Digital media files are encoded so that computer programs or apps can read and work with it.

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>

Now have a look at the table below, which browser supports which file format for video and audio.

Video:

Audio:

Get familiar with a few formats:

MP4 = MPEG 4 files with H264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Ogg = Ogg files with Theora video codec and Vorbis audio codec

Codec:

Many times we have to convert the file format so that it can be played by programs other than the software for which it was originally created. This is called “Coder-decoder” OR codec for short.

Converting the file format so that it can be played by another program, or by an incompatible device is called “transcoding”.

Commonly Used Digital Media File Formats:

Photo File Formats: JPEG, GIF, PNG, TIFF, BMP
Music File Formats: AAC (WebM), MP3, WAV, WMA, DOLBY DIGITAL, DTS
Other music file formats you may have access to AIFF, ASF, FLAC, ADPCM, DSD, LPCM, OGG
Video File Formats: MPEG-1, MPEG-2, MPEG-4 (mp4), AVI, MOV, AVCHD, H.264, and H.265.
Other video formats you may have access to DivX and DivX HD, Xvid HD, MKV, RMVB, WMV9, TS/TP/M2T

Don’t worry if all of this seemed like an alien language to you, I have a solution for you.

Media playback:

You can install or take help of some application and software that will play your media file regardless of the file format that your device or browser supports. Here are a few to name.

Mx player
VLC Media player
All connect
DG UPNP
Plex
Twonky
Roku Media
Airplay DLNA receiver

I hope that this article was helpful to you. You can check out other articles as well.

Thank You.