It's a black and white decision to me. If the image is part of the content such as a logo or diagram or person (real person, not stock photo people) then use the tag plus alt attribute. For everything else there's CSS background images.

The other time to use CSS background images is when doing image-replacement of text eg. paragraphs/headers.

***

• Default


• Static top


• Fixed top (current)

***
You see which one is selected (sr-only part is hidden):

-Default
-Static top
-Fixed top
You hear which one is selected if you use screen reader:

-Default
-Static top
-Fixed top (current)
As a result of this technique blind people supposed to navigate easier on your website.

Children inherit opacity. It'd be weird and inconvenient if they didn't.

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.

Example, 50% faded black background:
***

***

Use element.classList .contains method:
***
element.classList.contains(class);
***
This works on all current browsers and there are polyfills to support older browsers too.

For modern browsers, you can accomplish this by using background-size:
***
body {
background-image: url(bg.jpg);
background-size: cover;
}
***
cover means stretching the image either vertically or horizontally so it never tiles/repeats.

That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).

For it to work with lower verions of Internet Explorer, try these CSS:
***
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
***

You can toggle a child div during onmouseover and onmouseout like this:
***
function Tooltip(el, text) {
el.onmouseover = function() {
el.innerHTML += ''
}
el.onmouseout = function() {
el.removeChild(el.querySelector(".tooltip"))
}
}
***
//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

prototype allows you to make classes. if you do not use prototype then it becomes a static.

Here is a short example.
***
var obj = new Object();
obj.test = function() { alert('Hello?'); };
***
In the above case, you have static funcation call test. This function can be accessed only by obj.test where you can imagine obj to be a class.

where as in the below code
***
function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();
***
The obj has become a class which can now be instantiated. Multiple instances of obj can exist and they all have the test function.

The above is my understanding. I am making it a community wiki, so people can correct me if I am wrong.

This is what works for me:
***
if (typeof myVar === 'string' || myVar instanceof String)
// it's a string
else
// it's something else
***

Take a look at the JavaScript Number object and see if it can help you.

1. toLocaleString() will format a number using location specific thousands separator.
2. toFixed() will round the number to a specific number of decimal places.
To use these at the same time the value must have its type changed back to a number because they both output a string.

Example:
***
Number((someNumber).toFixed(1)).toLocaleString()
***

You want the typeof operator. Specifically:
***
if (typeof variable !== 'undefined') {
// the variable is defined
}
***

There are three reasons why you shouldn't use for..in to iterate over array elements:

1. for..in will loop over all own and inherited properties of the array object which aren't DontEnum; that means if someone adds properties to the specific array object (there are valid reasons for this - I've done so myself) or changed Array.prototype (which is considered bad practice in code which is supposed to work well with other scripts), these properties will be iterated over as well; inherited properties can be excluded by checking hasOwnProperty(), but that won't help you with properties set in the array object itself

2. for..in isn't guaranteed to preserve element ordering

3. it's slow because you have to walk all properties of the array object and its whole prototype chain and will still only get the property's name, ie to get the value, an additional lookup will be required

You can use every method:
***
[1,2,3].every(function(el) {
return !(el === 1);
});
***
ES6
***
[1,2,3].every( el => el !== 1 )
for old browser support use:

if (!Array.prototype.every)
{
Array.prototype.every = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();

var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this &&
!fun.call(thisp, this[i], i, this))
return false;
}

return true;
};
}
***