Setting up my new laptop

So, I’ve bought a new laptop (MSI GPTS 6QF Leopard Pro). I was looking for a high-end mobile desktop machine which was good fmsi-gp72-2qe-leopard-pro-gaming-laptopor coding and also for graphics processing. Hence I bought a gaming laptop, guaranteed to be fast and powerful for the next few years.

 

The box says  plug and play, and after some initial settings like timezone and region you can pretty much do whatever you want. But I want to transform this gaming rig into a solid developer machine, so I still had some work to do.

The basics

System restore point: My system works fine now, but in the future, I might install some piece of software or a virus that destabilizes my work environment. Creating restore points gives you a fallback. You can then return to the situation before the last piece of corrupting software was installed.

Here’s how for windows 10. It was turned off on my new laptop, so I turned system protection on, and reserved around 11gigs for restore points.

Windows updates I found out that my new rig was created and installed about 100 days before I bought it. So that’s 100 days off windows updates that I’m missing.

How to: Settings -> Update & security -> Windows update

Only 7 update packages. I was expecting more, but I guess that the ‘cumulative update’ package conceals a lot of it. It sure took it’s time downloading them all.

For developers This enables more third party install options, more network features and more diagnostics…For Developers

How to: Settings -> Update & security -> For developers

Unhide file extensions and hidden files Go to ‘file explorer -> view’. and then check the two boxes on.

  • file name extensions
  • hidden items

UnInstalling bloatware

I changed my mind, lets start by uninstalling all the bloatware first.

First, I removed bloatware through the normal ‘uninstall a program’ application

  • Magix photo manager
  • Magix music makes silver
  • Magix content and soundpool
  • Nahimic 2
  • WinZip 17.5
  • Norton Security (I think Norton is good, but It was only meant to work for 60 days, after which I had to pay, so bye bye Norton )
  • Norton online backup
  • Cyberlink PowerDVD

I decided to keep the software from MSI itself, since it is written to alter the specific hardware I’m working on.

Next up, is the bloatware from microsoft itself. I have a laptop, not a tablet, so all the fullscreen Microsoft store apps just have to go. It’s a real nuissance that you can’t uninstall them through the normal way, instead, you have to go through a list of all your applications, right click and select uninstall

  • 3D-builder
  • Get Started
  • Candy crush soda saga (why??)
  • Get Skype
  • Microsoft solitaire collection
  • Microsoft Wi-Fi (this is not the important wifi utility, but rather something useless)
  • Music Maker Jam
  • Money
  • News
  • Skype Video
  • Sports
  • Telephone Assistent
  • Twitter
  • Sway

Most of the above will never be used and some of them are actually trying to get me to buy something. Anyhow, they’re all gone now, never to be seen again.

Installing software

Browsers

Edge: already installed by windows. I will not use this for personnal use, but it’s very handy for testing new websites
Chrome: My personal favorite
Firefox: As good as Chrome, also on my system for testing
Developer Firefox: Has the best tools for debugging and stuf

Small utilities

Keepass: You should use a different password for every application or website which you use. Most people don’t do that, but if you do, then Keepass is an excellent way of storing all those passwords without having to remember them.

If you’ve used it on your previous pc like I did, then you need to copy the file with all your passwords, otherwise you’ll have an empty safe.

F.lux: Ever looked at your computer at night and felt you were staring directly at the sun? Yeah, me too! Well, F.lux fixes this by adjusting the color scheme of your display. When the sun is up, it looks the same, but when its dark outside, then it removes a lot of the blue tints from your vision. This improves the strained feel of your eyes. Oh, and for those that do graphic work, you can turn it off too, for when you need to evaluate your art in normal conditions

7-zip: It’s like winZip, but better.

Notepad++: is a notepad replacement with support for different coding languages. (colored keywords and so on…)

Fiddler: is a tool which looks and records your network traffic. thus allowing you to debug websites, do performance testing, and manipulate packages and so on. A must have for every web developer.

Virtuawin: Do you want a setup with 16 screens, but without the cost and effort of actually buying and installing them.

Greenshot: Make your ‘Print Screen’-button usefull.

Developer software

Gimp/Photoshop: This will satisfy all my grafic needs.

Visual Studio: .net coding and so on (+ Resharper addon)

WebStorm: front-end coding environment. It’s like notepad++ on steroids.

Personalizing

I like to make my own theme with pictures of my family. In the background settings, select a map with pictures that you like, and then set the time to around 30 minutes.

Personalize the start button, add you favorite programs, and remove everything irrelevant.

The last thing I need to do is copy all my important files from my old pc to my new laptop. Luckily, most of my stuff was already on an external drive or in the cloud.

console.log vs alert

If you’re debugging an application, then you want some feedback to know what’s going on inside the program. You can manually step through every function in your code. Or you can output a message to the screen or to the console. But which one is best, or do they both have their merrits?

Alert() is old school

Modern browsers have a superb set of debugging tools and options, but before this was not always the case. So in order to see what whas happening, you had to get a message to the outside. Alert() makes a pop-up window and writes a custom message in it. Ideal for checking the contents of variables and so on.

What are some of the drawbacks of Alert()?

  • alert() blocks your code until you press ‘OK’. Thus slowing the debugging process.
  • You cannot see more than one alert() message at a time. This forces you to use your memory. And multiple runthroughs to be sure if you’ve forgotten something.
  • alert() outputs a string, but it has only limited formating. For example: If you feed it an object it will just output [object] instead of the contents of that object

Alert [object]

  • You have the potential risk of showing an alert() to an end user.

Console.log() is the way

It has the same purpose as alert() but it does it more elegantly. It’s not blocking, you can view multiple logs at one time and you can feed it any object you like.

It’s purely designed for developers and thus is the prefered way to do your debugging.

So, alert is bad and console.log is good?

I wish it was so simple. In most cases I would advise to use console.log(). But in some cases alert() is the way to go.

For example:

var anArray = new Array(20);
anArray[4] = "red";
anArray[10] = 30;
console.log(anArray);
alert(anArray);

console.log will format this to show only the filled array slots. and you won’t know how large the array is. alert() on the other hand will show every entry separated with a comma.

alert console.log array

It could save you some time knowing about it. While it’s easier to see which positions are filled in console.log, you can’t see the lenght of the array at the same time. console.log(anArray.lenght);  But if you don’t type the previous statement, then it’s easy to overlook.

alert() can offcourse be used to alert() the end user of something. But then this is not debugging, but rather user experience. (a bad user experience according to me.)

Don’t be so sloppy, let’s invoke strict mode

Normal JavaScript is pure chaos! You can initialize undeclared variables, you can compare strings and numbers, and you can do a lot of other stuff that makes your head pop. Therefore, normal JavaScript is sometimes called “sloppy”. Fortunately, there is a solution: You can force “strict mode” on your code to end the chaos and start the logic.

strict mode only works in ECMAScript 5 or higher implementations. Luckily, older browser will just ignore it and process your code as normal.

How to invoke strict mode

If you want to declare strict mode to your code then at the following line at the top of your code.

"use strict";

This will force strict mode onto everything inside the script tag. You can also use strict mode in functions.

function stuff(){
"use strict";
//does strict stuff.
}

Very important! “use strict” will only work if it’s written at the top of a script or function. Otherwise it will be ignored.

Also note that you can not use it inside if/else, for, do… statements because it only works for the whole script or for functions, not for other blocks.

Why use strict?

It forces you to write more ‘secure’ JavaScript by changing ‘bad syntax’ into actual errors. (undeclared variables, crazy comparisons…).

It restricts you in the use of JavaScript, but that’s not a bad thing. Since it throws more error’s when you do crazy stuff by accident. For example, making global variables in functions, or putting a leading zero in front of a number whithout realizing you just made it an octal and not a decimal.

Give me some examples

"use strict"
name = "Demian"; // name undefined => error
anObject = {a:1, b:2}; //anObject undefined => error

var badCake = “rotten applecake”;
delete badCake;//deleting a variable, object or function is not allowed => error
delete Object.prototype;//undeletable => error

function fun(a, a){};//duplicate parameter name => error

var octalNumber = 010;//I hate octal Numbers => error
//ES6: put 0o in front for Octal notation.
//like this: var a = 0o10;

var escapeThis = \010;//your characters cannot escape => error

var emptyObj = {};
Object.defineProperty(emptyObj, “x”, {value: 0, writable: false});
emptyObj.x = 666;// A read only property cannot be written to => error

var numberOfTheBeast = {get x() {return 666}};
numberOfTheBeast.x = 4; //It’s a demonic getter, don’t write holy numbers on it

with (Math){x = cos(2)}; //’with’ is not allowed => error

eval(“var number = 3”);
console.log(number); //eval cannot create variables in the scope from which it was called => error.

In addition it also future proof’s your code by making reserved keywords not allowed.

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

"use strict"
var interface = {}; //error!

Look at MDN for a full list of all the changes “use strict” enforces.

If you turn things around, normal JavaScript allows all of the above, some are legit syntax while others are silent errors.

How does it work internally?

Basically, your strict code is compiled differently from the sloppy code. Therefore, it’s not a subset, it’s JavaScript with different syntax rules.

Is it backwards compatible?

Yes, the “use strict”; syntax is actually a string literal like (“I’m a string”;) which will compile to a non existing variable never to be seen again. Thus it is harmless in older browsers and newer browser will recognize the literal and enforce strict mode.

Be careful when you use strict, older browsers, like Internet Explore 9, will ignore it and execute your code as normal JavaScript, this can have unwanted side effects. Test your code in both browser that support strict mode and browsers that do not. Otherwise you’re bound to run into major troubles.

 

How to block your own WIFI

I recently did a lot of construction work at my home to improve my living standards. I planned out everything in excruciating detail, unfortunately I didn’t thought about my wireless wifi. Which is now a lot worse than it was before. Read on if you want to know what I did wrong and how to avoid my mistakes.

Before I started working
  • My router was in the open (not in a closet)
  • My desk was one room above my rooter and there was only a wooden ceiling and an OSB floor in between.
After my fix-up job
  • My router was in a closet. And the closet panels were made of MDF
  • My desk was in a room which was further away from the router, and I added floor isolation and layer of parquet.

After this, I noticed a significant drop in my internet’s speed and responsiveness. Before, I could easily play an online game, but now I get dropped constantly because of my slow connection.

What did I do wrong.

First, the placement of the router. It was downstairs in the living room, and it was ugly. So I needed to place it in a closet. Which is like putting an extra wall in front of the signal. And worst of all, I made the closet out of MDF, which has a high wifi blocking factor.

Then, I thickened the floor with two extra layers. and the isolating one has reflective materials inside it. Which is very positive if you want to retain heat, but it also blocks wifi.

With the recent heatwave, I noted that at the warmest moment (more than 30C), my wifi was constantly dropping out, this could also be due to the reciever, but still.

Possible solutions to unblock wifi

Since the MDF closet is the biggest problem, I could tear it down and build a new one. Or I could somehow put the router outside the closet. (but my cables are too short)

I could also pull a cable from the router to my desk, this does involve drilling holes into my house, which is something I rather avoid if possible.

I could also set up a wifi repeater, to broadcast the wifi from a different location, since I cannot change my routers location. But the original signal would still pass the MDF wall and thus, it will not be optimal.

Another solution is a wifi powerline extender which sends the wifi through the powerline. It comes with two adapters, you connect one with a wire to the router. and you put the other one in the room where you need wife. It recieves internet through the powerline and then broadcasts it.

I just ordered this and will update this post with its effectiveness.

 

A backwards compatible Script tag

When the script tag was first introduced only Netscape Navigator and Internet Explorer supported it. Other browsers hopefully ignored the contents or worse, they printed it to the screen for all the world to see. At present day, the script tag works in all major browsers like it’s supposed to. But it wasn’t always like that in the past.

For example, take the script below, nothing wrong with that, or so you would think. It worked in HTML, then it didn’t work in XHTML, and now it works again in HTML5.

<script>
function compare(a, b){
if(a < b) return a; //XHTML: it crashes on the '<' symbol
else return b;
}
</script>

Temporary solutions

Because the above doesn’t work in XHTML a solution was provided. the ‘<‘ is a reserved character in HTML, so it’s entity name has to be used: &lt;

<script>
function compare(a, b){
if(a &lt; b) return a; //HTML5 crashes here
else return b;
}
</script>

A working solution for XHTML, but it doesn’t work in HTML5 and to top it off, it’s not readable. Fortunately, they invented a different sollution:

<script><![CDATA[//HTML5 crashes here
function compare(a, b){
if(a < b) return a;
else return b;
}
]]></script>

Just add <![CDATA[]]> around your code. CDATA indicates that the text is free-form and should not be parsed. This enables you to use any reserved character you can think of without punishement. Unfortunately, it still doesn’t work in HTML5.

<script>
//<![CDATA[
function compare(a, b){
if(a < b) return a;
else return b;
}
//]]>
</script>

The above works everyware, finally a full solution. But wait what if you come against a browser that doesn’t support the script tag. (note: All modern browsers support the script tag, we’re talking about ancient browsers here).

The solution: You comment the contents of the script tag with a html comment

<script><!--
function compare(a, b){
if(a < b) return a;
else return b;
}
//-->
</script>

A backwards compatible script tag

But how about CDATA? Well, let’s just combine the two solutions into one.

<script>//<![CDATA[<!--
function compare(a, b){
if(a < b) return a;
else return b;
}
//]]>--></script>

Tadaa!, the most backwards compatible script tag you’ll ever see. enjoy!

And don’t worry about remembering this little line. You won’t need it if you use external scripts. It’s only needed for inline code.

So, the script will always work like this?

Actually, no. The script will definately work, but the ancient browser might not support the script tag or the modern browser might have turned off JavaScript.

in either case, you can and should use the <noscript> tag in the body. This will only display when scripts are not working. For example you can leave a message where the user can download your latest favorite browser which has perfect JavaScript support.

The script tag attributes

JavaScript comes with the script tag, or rather the script tag enables JavaScript to be executed within HTML. You cannot have one without the other. With the script tag, JavaScript blends perfectly with HTML, but it has some peculiarities, which I’m going to discuss below.

<script>
//your JavaScript code here
</script>

The Script TAG

The script element can be alone, or it can contain some attributes. Nothing is mandatory, some are assumed by the browser when omitted and others require some explanation before use.

SRC=”whereismyscript.js”

Indicates the location of your script, this can be local (on your own server), or global (https://code.jquery.com/jquery-3.1.0.js)

Async or DEFER

Both are optional, and mutually exclusive. Meaning, you don’t have to use them, but if you do, you can only use one, not both.

The normal behavior when loading a HTML page is that when you encounter a script tag, you load the script, and then continue with the rest. The result is unwanted because your page appears to freeze until everything is loaded. Async and defer are both solutions to this problem.

If you want to load the page before your scripts execute, you can put your script tags at the bottom of the <body> tag. Async, enables you to start loading your scripts at the start of the page, but it puts them on another thread and thus allows the rest of your page to keep loading. Defer says that the script tag can only load when all the document’s content is parsed and displayed.

You don’t know when a script will finish loading when you use async. So only use async on indepent scripts. For example: If a script depends on another script to run before it can run itself, then it is vital that it does so. Async has a tendency of screwing up these scenarios.

Defer scripts load in order, hopefully, but this is not always the case, so use only one defer if possible. If you put your script at the bottom of the body tag, then you’re triggering the same behavior as the body tag.

Integrety

This attribute is a new one, and not totally compatible with all the major browsers yet. Use it when you need scripts from a third source (cdn’s). You get scripts from a third party for speed and bandwidth benefits, but what if an attacker takes over the third party and inserts some malicious code into the extarnal script?

The integrety tag will ensure that the file you recieve is the one you want. If it doesn’t match, then the browser will return a network error.

<script src=”https://code.jquery.com/jquery-3.1.0.js” integrity=”sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=” crossorigin=”anonymous”></script>

crossorigin

Another new one. If you need credentials for an external script, then you need the crossorigin attribute. It defaults to ‘anonymous’ and this is the normal behavior. Set it to ‘use-credentials’ when credentials are needed.

Deprecated attributes

type=”text/Javascript”

The type attribute is optional, or rather the browser will assume the standard value ‘text/javascript’ when you don’t write it (only in HTML5). Known as the MIME type, it indicates the content type of the scripting language you use inside the script tag.

Other variations are “text/ecmascript”, “application/javascript”, “application/ecmascript” and even “application/x-javascript”. In effect, the attribute is deprecated, but still used.

If you write something invalid in type, the browser will ignore the inside of the script tag. BUT!, You can still access the data inside it with JavaScript. This is used in some situations and some template libraries use this hack as well.

Language=”Javascript1.2″

Avoid this attribute, it’s deprecated and ignored by all browsers. Older browsers used the language attribute until the type attribute replaced it. The current browsers ignore this attribute, if you’re lucky.

CHARSET

Don’t use it. period.

 

 

Convert Video files for playing on tv

Last week, I had a problem for wich I needed to convert video files. I don’t know much about encoding videofiles, but since I work with computers, I’m the designated guy to fix this (for free) and I’m supposed to know everything computer related.

Play a Video on tv from a harddrive, sure thing! what could possibly go wrong?

I wanted to play a movie from a USB harddrive on my TV. So, I connected the cable, turned on the tv and accessed the file. It started playing, but I didn’t hear any sound. I tried some other files and they all had the same problem. Great image, but no sound.

A fancy tv which can’t play audio from a .mp4 file. I couldn’t believe it. So, I did what I do best, fix the problem. First, I went to a pure audio file and played that. The music came out beautifully. I now knew that my tv can play sounds from my harddrive.

I then turned to the web for answers, and after a little research I found that my television was unable to play audio with high bitrates. The presented solution is to lower the audiobitrate: suggested was 128kb/sec. When I checked my files, it showed that they had a bitrate of 265kb/sec.

To do this, I need to convert video files to a different format and so I need a video converter program. I found a very good one. It’s good because it works, and it’s very good because it’s completely free.

Format Factory

Format Factory is a multifunctional converter that’s able to convert all types of video, audio and image files.

The install comes with some unwanted software, so be carefull before you click next.

FormatFactory - convert video files

How does it work
  1. Select to which filetype you want to convert. (So if you want .mp4 files, click on that)
  2. Next you’ll get a pop-up screen in which you can add files
  3. In the same pop-up screen you set the options and requirements of the new file (this is where you change the audio bitrate)
  4. click OK, and then click START

Your video files are now converting to the new filetype.

One word of caution: FormatFactory converts your files as fast as possible, this means it doesn’t throttle your cpu usage. Expect it to use 100% of your cpu when you do this. Every process uses 1 core. For example, my pc has 4 cores, so it’s converting 4 files at the same time.

Filenames on your tv

I like to give my files long describing names, so that it’s easy to see what they represent. This works on a computer where I can see the full name. Unfortunately, my tv only shows 10 characters per file, this had the consequence that I had to guess filenames based on the position they had on the tv-screen.

For Example: Let’s say you copied one of your cd onto you harddrive for personal use. All the filenames are like this: “VeryLongBandName_songname”.  On the computer, no problem. On the tv: “VeryLongBan…”

So, I renamed everything to fit the lenght of my pc. I removed the bandname, since I use it in the foldername and so on…

How a browser implements JavaScript

According to Wikipedia, JavaScript is the following: (please click the link and skim the wikipage)

JavaScript is a high-level, dynamic, untyped, and interpreted programming language…

As correct as this statement and the rest of the wikipage is, it’s not the entire truth. The wikipage talks about JavaScript as an ECMAScript implementation, and when you use JavaScript outside of the browser (in PDF-documents or desktop widgets), this is the only thing you have to know. But you will need a bit more power when you add dynamic behavior inside a browser page.

Javascript implementation

The full Javascript implementation consists of 3 things:

JavaScript Implementation

  • The Core, implemented according to the ECMA-262 standard.
    • This covers syntax, data types, objects, inheritance and so on.
  • Document Object Model (DOM)
    • This allows you to access and modify your HTML
  • Browser Object Model (BOM)
    • Everything outside the context of your page (windows & frames, history, sound…)

EcmA-262 and Ecmascript

ECMA-262 is the standard which defines ECMAScript and JavaScript  is an implementation of ECMAScript. There are other implementations of ECMAScript, for example: ActionScript for Flash.

ECMAScript defines how you write the language. It defines its syntax and how the data types work. Furthermore, it defines what happens when you add a number to a string and also describes the behavior when you parse a string into a number. It defines objects, prototypes and inheritance and much much more…

ECMA-262 also evolved and has different edition’s. Currently, most browsers support edition 5, while edition 6 is only supported by the most recent versions of the major browsers.

Document Object Model (DOM)

Next on the list is the DOM. The main purpose of JavaScript is to make a richer web experience. This is mostly done by manipulating the HTML. This is were the DOM API comes in.

The DOM API provides methods and functions for finding elements in your HTML and then manipulating or deleting them. You can also create new elements from scratch.

W3C standardized the BOM and has levels instead of editions. Currently all the major browsers support DOM Level 3.

Some examples of the DOM API in action

Historically, the DOM is used for input validation and the next thing that comes to mind are calendar widgets, advertizing and drop-down menu’s (although the last one can be done by CSS too).

With the arrival of HTML5 and the canvas element, you can make huge interactive games with it, it even rivals flash games.

Browser Object MODEL (BOM)

The BOM API gives you access to some browser related functionality. For example, create new windows and frames, change the size of the browser and  create custom back and forward buttons.

The arival of HTML5 standardized the BOM. Before it that, it was pure chaos. There is still some browser specific functionality, but this mostly relates to the ActiveXObject of IE and mobile features for smartphones.

 

JavaScript shines with a codified BOM

The Browser Object Model (or BOM) is an API you use it to access and manipulate the browser window. With the BOM, you can interact outside the boundaries of the displayed page, which is an awesome capability. But the BOM is also an evil dragon, because it doesn’t has any standard, and thus each browser has a different BOM API.

So, no standard eh? Well, for a long time, that was completely true. But HTML5 sought to standardize the BOM and created a specification for it. So now, the major browser have some agreed upon names and methods for the most used functionalities.

What does the BOM do?

Anything that’s browser specific is part of the BOM, but generally you will use it for manipulating windows and frames.

  • ‘Window’: properties and methods related to windows and frames
    • pop-up windows
    • move, resize and close windows
    • alert(“Hello world!”);  //I’m sure you’re familiar with this statement 🙂
  • ‘navigator’: this object provides detailed information about the browser
    • used for user-agent sniffing
    • ‘geolocation’: this is usefull for directed commercials and such.
    • ‘cookieEnabled’: usefull to know.
  • ‘location’: usefull methods to retrieve the URL or parts of the URL of the loaded page
  • ‘screen’: Returns the width and height of the screen.
  • ‘history’: Returns the browser history and allows you to go back or forward to a specific page.
    • privacy related, you cannot read the specific entries of the history object, you only know how many entries their are.
    • It’s mostly used to create custom back and forward buttons

All the major browsers implement the above since HTML5 codified it, and it’s expected that the standard will expand and grow in the future, thus ending the confusion surrounding the BOM.

Then what’s not the same?

Anything that’s browser specific. IE has it’s ‘ActiveXObject’ and mobile browsers will have mobile specific methods.   Fortunately, a lot is the same (since HTML5) and you can do a lot with the standard functionalities already.

If you’re not sure you can use something, then go and check ‘Can I use?‘.

What’s the Difference between BOM and DOM

The Document Object Model (DOM) handles everything related to your page, while the Browser Object Model handles everything outside of the page.

 

Javascript and the DOM API

Javascript comes with the Document Object Model (DOM), it would be useless without it.  The DOM is not HTML, but it’s an Application programming interface (API) for XML, and it enables you to access your HTML. As a result, it gives you the ability to read, add, delete and modify your html without a page reload.

HTML is an XML variant, and below is a small example of it. (If the following looks unfamiliar to you, then learn some basic HTML)

<html>
<head>
<title>example title</title>
</head>
<body>
<p>This is an example of a DOM</p>
</body>
</html>

The above example is what you type and read, but JavaScript represents it as a node tree that looks like this:

DOM Node Hierarchy

The birth of the DOM API

Javascript only had one purpose when it was first created, and that was to minimize round trips to the server. It was first used for client-side input validation, which needed you to alter the html. Unfortunately, Netscape Navigator 4 and Internet Explorer 4 each implemented it’s own method for accomplisching this feat. It was a big step forward for usability, but it was also a nightmare for programmers, since they couldn’t write cross-platform webpages anymore.

Therefore, the World Wide Web Consortium (W3C) stepped in and created a standard for creating with HTML. And so, DOM Level 1 was born.

Level up

The DOM API has two big groups of methods. The core: which is used for every XML based document and the DOM HTML extensions: for html specific objects and methods.

The internet evolved and so did the API. Level 1 focused on the structure of a document, whereas Level 2 added support for mouse and user-interface events as well as better Cascading Style Sheets (CSS) and traversal methods to iterate over a DOM document. Then came Level 3 which added load and save functionality and validation methods.

You might also hear about DOM level 0, but this never existed. NN4 and IE4 use it to reference to the original DHTML.

=> More detailed info about each level.

It’s only a recommendation

It’s not mandatory, no government enforced a browser manufacturer to use the standard. As a result, not all browsers support everything. A clear overview of which browser supports what is currently not available (read: I can’t find one). As a result, my first option is to go to ‘Can I use‘ and if I can’t find it there, I go to Mozzila’s Developer Network. It covers every method and function, and contains information about browser compatibility.

Hence, use feature detection if you implement an unsupported method. Otherwise you can prompt the user to upgrade to an other browser that does support the recommendations of the standard. Fortunately, most of the modern web browsers implement all of the Level 3 specification.

 

Question’s and Answers about the DOM

Do other XML based formats have an API?

There are numerous XML markup languages like HTML, furthermore, each comes with it’s own API. They come in all shapes and sizes. A web-based environment uses multiple,but some are only server-side and others represent specific research data and such. Some XML variants: Documents (HTML, XHTML),  Graphics (SVG, XAML),  Mathematics (MathML, CellML), Multimedia presentations (SMIL), Authentication and Authorization (SAML), web feeds (Atom) and many more…

Is the DOM JavaScript Specific?

No, it is not, a lot of other languages implement it as well. That said, EcmaScript Implements the DOM and is a big part of the JavaScript Language.

Is DOM and HTML the same?

Again no, The browser uses the HTML page to built the DOM object. Then in JavaScript, you can access the object and make manipulations. If you take it to the extreme, you can load a page with only JavaScript (so only a html, head and script tag) and generate your entire page from scratch.