Thursday, 13 December 2018

Most Common Computer Related Full Forms you must know!

Most Common Computer Related Full Forms you must know!
Hey, How many computer full forms do you know? Just go through the listings below and check your knowledge about computer based full forms!

BASIC COMPUTER RELATED FULL FORMS
  1. COMPUTER - Common Operating Machine Particularly Used For Trade, Education And Research
  2. CPU - Central Processing Unit
  3. GPU - Graphics Processing Unit
  4. RAM - Random Assess Memory
  5. ROM - Read Only Memory
  6. EPROM - Erasable Programmable Read-Only Memory
  7. EEPROM - Electrically Erasable Programmable Read-Only Memory
  8. CD - Compact Disk 
  9. DVD - Digital Video Disk / Digital Versatile Disk
  10. USB - Universal Series Bus
  11. WIFI - Wireless Fidelity
  12. CD-ROM - Compact Disc Read Only Memory
  13. VCD - Video Compact Disc
  14. CDRW - Compact Disc ReWritable
  15. CD-R - Compact Disc Readable
  16. DVD-RAM - Digital Video Disc Random Access Memory
  17. DOS - Disk Operating System
  18. SIM -Subscriber Identity Module
  19. ADSL -Asymmetric Digital Subscriber Line
  20. AGP - Accelerated Graphics Port
  21. GUI - Graphic User Interface
  22. CLI - Command Line Interface
  23. SDRAM – Synchronous Dynamic Random Access Memory
  24. DDOS -Denial Of Service Attack
  25. BSD - Berkeley Software Distribution
  26. OpenBSD - Open Berkeley Software Distribution
  27. ARM - Advanced RISC Machine
  28. OCR - Optical Character Recognition
  29. CCTV - Closed Circuit Television
  30. FDD - Floppy Disk Drive
WEB RELATED FULL FORMS
  1. HTML - HyperText Markup Language
  2. CSS - Cascading Style Sheets
  3. PHP - Hypertext Preprocessor (earlier - Personal Home Page)
  4. AJAX - Asynchronous JavaScript and XML
  5. XML - Extensible Markup Language
  6. SQL - Structured Query Language
  7. WWW - World Wide Web
  8. HTTP - Hyper Text Transfer Protocol
  9. HTTPS - Hyper Text Transfer Protocol Secure
  10. SSL - Secure Sockets Layer
  11. LAN - Local Area Network
  12. WAN - Wide Area Network
  13. MAN - Local Area Network
  14. NAS – Network Attached Storage
  15. NAT – Network Address Translation
  16. IP - Internet Protocol
  17. MAC - Media Access Control
  18. STMP - Simple Mail Transfer Protocol
  19. TCP - Transmission Control Protocol 
  20. WAP - Wireless Application Protocol.
  21. IP4V -Internet Protocol version 4
  22. IP6V -Internet Protocol version 6
  23. AM - Amplitude Modulation.
  24. FM - Frequency Modulation

DATA RELATED FULL FORMS
  1. B - Byte
  2. KB - Kilobyte
  3. MB - Megabyte
  4. GB - Gigabyte
  5. TB - Terabyte
  6. PB - Petabyte
  7. EB - Exabyte
  8. ZB - Zettabyte
  9. YB - Yottabyte
  10. Kbps - Kilobits Per Second
  11. Mbps - Megabytes Per Second
  12. Gbps- Gigabytes Per Second
  13. Tbps- Terabytes Per Second
  14. Pbps - Petabytes Per Second
  15. MIPS - Million of Instruction Per Second
EXTENSION RELATED ABBREVIATIONS
  1. MPEG - Moving Pictures Expert Group
  2. MMF - Music Mobile Format
  3. MP2 - Mpeg audio layer 2
  4. MP3 - Mpeg audio layer 3
  5. MP4 - Mpeg layer 4
  6. 3GP - 3rd generation protocol
  7. CDA - Compact Disk Audio
  8. RM - Real Media
  9. FLAC -Free lossless audio codec
  10. FLV - Flash Live Video
  11. WebM - Web Media
  12. TS - Video Transport Stream File *
  13. INI - Configurations Settings
  14. DLL - Dynamic Link Library
  15. DAT - Digital Audio Tape (sometimes Ascii Or Binary Data File) *
  16. VOB - Video Object
  17. TXT - Text File
  18. RTF - Rich Text Format
  19. IOS - International Organization for Standardization
  20. PDF -  Portable Document Format
  21. JPEG - Joint Photographic Experts Group
  22. PNG - Portable Network Graphics
  23. GIF - Graphics Interchange Format
  24. BMP - BitMaP *
  25. SWF - Shockwave Flash
  26. WAV - Waveform Audio
  27. FLV - Flash Video
  28. XPS - XML Paper Specification
  29. WMV - Windows Media Video
  30. DOC - Word Document *
  31. DOCX - Word Document *
  32. EXE - Executable Format
  33. JAD - Java Application Development
  34. JAR - Java Archive
  35. APK - Android Application Package *
  36. IPA - iOS Appstore Pakage *
  37. SIS - Symbian Installation Source
  38. TAR - Tape Archive *
  39. PSD - Photoshop Document
  40. BAT - Batch File
  41. 7z - 7-Zip compressed file *
  42. CDR – CorelDRAW Document *
  43. CMX – CorelDRAW vector image *
  44. CR2 - Cannon Raw *
  45. GZ - gzip-compressed *
  46. RB - Ruby
  47. Py - Python
  48. VBS - Visual Basic Script
  49. XMF - Extensible Music File
  50. WML - Wireless Markup Language
TECH REALTED COMPANIES AND GAMES
  1. INTEL - Integrated electronics
  2. HP - Hewlett-Packard
  3. IBM - International Business Machines
  4. LG - Lucky Gold-star
  5. VodaFone - Voice Data Fone
COMPUTER VIDEO GAMES
  1. PUBG - Player Unknowns Battlegrounds
  2. NFS - Need For Speed
  3. GTA - Grand Theft Auto

OTHER RELATED ABBREVIATIONS
  1. VIRUS -  Vital Information Resources Under Seize
  2. ASCII - American Standard Code for Information Interchange
  3. API - Application Programming Interface
  4. IDE - Integrated Development Environment
  5. SAP - System Application & Products
  6. IT - Information Technology
  7. ERP - Enterprise Resource Planning
  8. RDBMS - Relational database management system
  9. MIS Report - Management Information Systems Report
  10. SPSS - Statistical Package for the Social Sciences
  11. GNU - GNU's Not Unix
  12. DTP - Desk-Top Publishing
  13. VLC - VideoLAN Client
  14. SAS - Statistical Analysis System
  15. IO - Input Output
  16. BIOS -Basic Input Output System
  17. GCC - GNU Compiler Collection
  18. COBOL - Common Business Oriented Language
  19. ATA - Advanced Technology Attachment
  20. PATA - Parallel Advanced Technology Attachment
  21. SATA - Serial Advanced Technology Attachment
  22. HDMI - High Definition Multimedia Interface
  23. GPS - Global Positioning System
  24. FORTRAN - FORmula TRANslation
  25. SMPS - Switched-Mode Power Supply
  26. ITES - Information Technology Enabled Services
  27. CDMA - Code Division Multiple Access.
  28. UMTS - Universal Mobile Telecommunication System.
* - May not Be a Correct Abbreviation.

So there the list goes. This list will go non-stop with thousands of more abbreviations. So if you think some important abbreviation I missed out, please comment it below.

Saturday, 10 November 2018

Make a HTML5 audio player from scratch | Complete Guide

Before HTML5, it was little more industrious to embed audio or video to the web page especially with custom controls.But now we have HTML5 and with its new video and audio tags, we can easily make a audio player.

Many days before I had written a post for how to make an HTML5 video player.Using the same HTML5 technique here, we will be making a beautiful HTML5 audio player!

Audio player, just like video player uses a <audio> tag.
make-a-html5-audio-player-from-scratch

Building HTML blocks

Apart from declaring <audio> tag in HTML and its attributes, now we'll look into scratch for custom audio player.
I've made it something like below.
Image showing scratch of audio player
Scratch of audio player
Now, At number 1 (refer to above image), there will be play/pause button, 2 - progress bar , 3 - time , 4- volume mute button and at 5 volume scrollbar for changing volume.

We will make total 4 <div> , except for time.For time, its good to use <span>.
In progress bar, there will be a ball which can be dragged to seek the audio and another bar to show the current timings.

The code after setting all the div's and after giving ids and classes looks like below.
<div id='audioplayermain'>
    <div id='playerboundry'>
        <div id='toggleplay' class='toggleplay'></div>
        <div id='progress'>
            <div id='seekbar' class='seekbar'></div>
            <div id='ball' class='ball' draggable='true'></div>
        </div>
        <span id='time'>00:00/00:00</span>
        <div id='volume' class='fullvolume'></div>
        <input type='range' max="100" min="0" id='volslider' value='100'>

    </div>
    <audio id='au' preload='metadata'>
   <source src="path/to/audio.ogg" type="audio/ogg">
   <source src="path/to/audio.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
 </audio>
</div>

Preload attribute in audio means to browser that it should load the simple metadata of audio file when page loads.The possible values for preload attribute are - none, metadata and auto. Preload is not supported in IE.


Designing using CSS

I'm not gonna peep much into CSS matter more cos everyone may have their own ideas of designing and according to their ideas and colour scheme, they can give a whole different look to their HTML5 audio player.

Now, some basic styles I've declared to support our scratch.
#audioplayermain{
     display: block;
     margin-left: auto;
     margin-right: auto;
     height:50;
}
 #playerboundry{
     display:flex;
     justify-content: center;
     margin-left: auto;
     margin-right: auto;
     background-color:transparent;
     background-image: linear-gradient(transparent, black);
     height:60px;
     position:absolute;
}

For play pause button, two different styles are required when playing and when paused.We gonna just change the background picture.
.toggleplay{
     background-image:url('play-button-circle-icon.png');
     background-repeat:no-repeat;
     background-size: 60px;
     width:60px;
     position:relative;
}
 .toggleplaypause{
     width:60px;
     position:relative;
     background-image:url('pause-button-circle-icon.png');
     background-repeat:no-repeat;
     background-size: 60px;
}

For volume:
 .fullvolume{
     width:60px;
     background-image:url('volume-button-grey-circle-icon.png');
     background-repeat:no-repeat;
     background-size: 60px;
}
 .mute{
     width:60px;
     background-image:url('mute-icon.png');
     background-repeat:no-repeat;
     background-size: 60px;
}

And for rest of the <div>s
#progress{
     background-color:green;
     width:600px;
     position:relative;
     height:10px!important;
     margin-top:calc(60px/2 - 10px);
     margin-left:15px;
     margin-right:15px;
}
 #playerboundry > div {
     height:60px;
     display:block;
}
 #time{
     max-width:140px;
     margin-top: calc(60px/2 - 10px);
     margin-left:5px;
     margin-right:5px;
}
 .seekbar{
     width:0px;
     height: 10px;
     background-color: brown;
}
 .ball{
     height: 20px;
     width: 20px;
     background-color: aqua;
     color: black;
     border-radius: 100%;
     margin-top: -15px;
     margin-left:calc(-10px + 0%);
     cursor: grab;
}
 #volslider{
     -webkit-appearance: none;
     height: 10px;
     border-radius:3px;
     background: #d3d3d3;
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity .2s;
     margin-top:20px;
}
 #volslider::hover{
     opacity:1;
}
 #volslider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
     height: 20px;
     border-radius:100%;
     background:aqua;
     cursor: pointer;
}
 #volslider::-moz-range-thumb {
     width: 20px;
     height: 20px;
     border-radius:100%;
     background:aqua;
     cursor: pointer;
}

The webkit-slider-thumb and moz-range-thumb is for <input type='range'>


Make the player to function : JavaScript

Now here comes the main part of JavaScript.Our player is like a car without engine without JavaScript.
Our JavaScript code flow will be like-
Declaring Variables ➡️ Functions➡️Event Listeners.

So lets declare the variables one by one-
var au = document.getElementById("au");
var playbutton = document.getElementById("toggleplay");
var time = document.getElementById("time");
var seekbar = document.getElementById("seekbar");
var seekbarwidth = document.getElementById("seekbar").offsetWidth;
var ball = document.getElementById("ball");
var volume = document.getElementById("volume");
var volslider = document.getElementById("volslider");
It is important to note that the JavaScript should be loaded after all the divisions along with audio tag.Else you'll get the following error in console.
Uncaught TypeError: Cannot read property 'offsetWidth' of null
    at audio-player.html:120
To avoid such kinds on errors, put script tag at the end of the document.
OR
Another way is to wrap all the functions in a single function and load that single function after DOM successfully loads.

Now the most basic function-

Play/Pause HTML5 audio using JavaScript

We will use paused() , pause() and play() functions.
function playPause() {
    if (au.paused) {
        playbutton.className = 'toggleplaypause';
        au.play();
    } else {
        au.pause();
        playbutton.className = 'toggleplay';
    }
The above function means that-
function playPause() {
    if (audio is paused) then
        playbutton's className will be'toggleplaypause';
        and audio will start to play();
    else {
        audio will paused();
        and playbutton's className will be 'toggleplay';
    }
Just kidding! I think I could have done better if I used comments.

Well, lets move further.Next function is format time and timeupdate.
function formatTime(seconds) {
    seconds = Math.round(seconds);
    minutes = Math.floor(seconds / 60);
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    seconds = Math.floor(seconds % 60);
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
}

function timeupdate() {
    var ongoingtime = formatTime(au.currentTime);
    var totaltime = formatTime(au.duration);
    time.innerHTML = (ongoingtime + '/' + totaltime);
    seekbar.style.width = au.currentTime / au.duration * 100 + '%';
    ball.style.marginLeft = 'calc( -10px + ' + au.currentTime / au.duration * 100 + '% )';

    if (au.networkState === au.NETWORK_LOADING) {
        // The user agent is actively trying to download data.
        // The colour of the ball changes to red while buffering.
        ball.style.backgroundColor = 'red';
    } else {
        ball.style.backgroundColor = '';//returns to original colour
    }
}

Time update is most important function as it occurs when the playing position of an audio/video has changed.
When we use currentTime to get current time of playing audio, it returns in seconds.To convert it in minutes:seconds format, we have used beautiful time conversion function above.

Now to detect the buffering activity I had used
if (au.networkState === au.NETWORK_LOADING) {
You can add a loading gif that triggers when the audio is buffering. Here I simply made the ball red just as indication sign.

Changing The Progress Bar As Per User Drags It

function changeTime(event) {
    var clickedpos = event.clientX;
    var offsets = seekbar.getBoundingClientRect();
    //gets offsets of the seekbar
    var width = clickedpos - offsets.left;
    //so that we can find the difference(in px) in mouse drag
    au.currentTime = width * au.duration / 600;//changes current time
    ball.style.marginLeft = 'calc( -10px + ' + au.currentTime / au.duration * 100 + '% )';
    //ball moves forward before timeupdate function fires.
}
Change time function finds how much user dragged the ball.It finds it in px, converts into percentage and change the audio time as per that percentage.
This function will trigger when user clicks and drags the progress bar.

Change Volume in HTML5 Audio Player.

When we will click on the volume button, volume will muted.
function mute() {
    if (au.muted = !au.muted) {
        volume.className = 'mute';
        volslider.value = 0
    } else {
        volume.className = 'fullvolume';
        volslider.value = 100
    }
}

function changevol() {
    au.volume = volslider.value / 100;
    if (volslider.value == 0) {
        volume.className = 'mute';
    }
    if (volslider.value > 0) {
        volume.className = 'fullvolume';
    }
}
Changevol() will change the volume as user scrolls the range input.To detect when the volume changes, you can also use volume change event listener.
audio|video.addEventListener("volumechange",script);

Event Listeners For Audio Player

After declaring all the functions and variables, one thing seems to be missing.Event listeners will listen to the events and trigger the above functions.
The required event listeners are-
playbutton.addEventListener("click", playPause);
au.addEventListener("timeupdate", timeupdate);
progress.addEventListener("click", changeTime);
progress.addEventListener("mousedown", changeTime);
progress.addEventListener("dragend", changeTime);
progress.addEventListener("mouseup", changeTime);
volume.addEventListener("click", mute);
volslider.addEventListener("input", changevol);
After this crazy stuff, finally the audio player looks something like below.
HTML5 audio player
HTML5 audio player
If you want to see the live demo, see it here.

Anything Missing?

There are many things that you may seem missing.Many advancements can be done in this audio player.
You can make playlists, add thumbnails,  add playback speed feature,add keyboard functionality, add loading/ buffering GIF and add some cool animations
If you're wondering that some sites load audio with blob:// , you can do it too using the following snippet.
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';

xhr.onload = function() {
  
  var reader = new FileReader();
  
  reader.onloadend = function() {
  
    var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));
    
    var byteNumbers = new Array(byteCharacters.length);

    for (var i = 0; i < byteCharacters.length; i++) {
      
      byteNumbers[i] = byteCharacters.charCodeAt(i);
      
    }

    var byteArray = new Uint8Array(byteNumbers);
    var blob = new Blob([byteArray], {type: 'video/mpeg'});
    var url = URL.createObjectURL(blob);
    
    document.getElementById('au').src = url;
    
  }
  
  reader.readAsDataURL(xhr.response);
  
};

xhr.open('GET', 'path/to/file');
xhr.send();
If you're trying it with localhost, you  may get error like Origin http://localhost is not allowed by Access-Control-Allow-Origin. OR  from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. You can head over to solution here.

Adding Keyboard Function to Audio Player

I already made a post on detecting keyboard keys.Same function we are going to use here.
document.onkeydown = keyCtrl; //This will map all the keyboard actions.
function keyCtrl(e) { 
 if(e.keyCode ==32){playPause()}
 if(e.keyCode ==77){mute()}
 if(e.keyCode ==39){moveFor(10)}
 if(e.keyCode ==37){moveBac(5)}
}
Key code 32 , 77 , 39 and 37 are respectively for space, M , right arrow and left arrow.
Now moveFor and MoveBac are the functions to move audio forwards and backwards.
function moveFor(t){
au.currentTime = au.currentTime + t ;//add time t to current time
}

function moveBac(t){
au.currentTime = au.currentTime - t ;//subtract time t from to current time
}

I've made a playlist using this same player here- DEMO .If you have any problems, just comment down below and tag us on @css_magz.

Thursday, 8 November 2018

Monday, 24 September 2018

Make pure CSS animation from PNG sequence like GIF

Make pure CSS animation from PNG sequence like GIF
Howdy! Today we are going to make an animation in pure CSS without JavaScript.This will be an sequence of a images that run one after another so that it looks like a animation.We will merge many images into one and will make a vertical(or even horizontal) sequence.We will then crop of the single image and run the sequence so fast that it will look like a GIF image or animation.

Saturday, 22 September 2018

Decrypt the encrypted JavaScript in Blogger Theme

Many people use Blogger - particularly Blogger themes which have encrypted JavaScript inside- asks how to remove that. So, read this complete post to know how to remove/unpack the JavaScript in those themes.