Call a function when other async functions have finished, pure javascript

Assuming you have a <div id=”x”> or just output to the console

/* This demonstrates how to call a function when two other async functions, f1 and f2, have finished.
f1 and f2 use setTimeout, which is async, meaning the rest of the code will run immediatly after being called, and a callback function will be called when setTimeout has finished.
setTimeout has to be understood as calls to API server functions that can take some time to execute
*/
var req1, req2 = false // flags to know when functions are done. It can very well be a counter if there are many and you don't need to know which function has finished.
x.innerHTML= "waiting for f1 and f2 to end in order to call f3...<br>"
// f1 and f2 are called at the same time
f1();
f2();

function f1(){
x.innerHTML = x.innerHTML + "f1 called...<br>"
setTimeout(function afterThreeSeconds() {
	req1=true;
  x.innerHTML = x.innerHTML + "f1 finished. <br>"
  if (req1&&req2){f3()}
}, 3000)}

function f2(){
x.innerHTML = x.innerHTML + "f2 called...<br>"
setTimeout(function afterTwoSeconds() {
	req2=true
    x.innerHTML = x.innerHTML + "f2 finished. <br>"
  if (req1&&req2){f3()}
}, 2000)}

// f3 will be called immediately after both f1 and f2 are done
function f3(){
	x.innerHTML = x.innerHTML + "f3 called because f1 & f2 finished :)"
}

 

Overrule CORS header Access-Control-Allow-Origin

Enough has been written about the  Access-Control-Allow-Origin error message when one runs JavaScript code from a local browser or a different domain or port.

For testing purposes, you can run Chrome in “unsafe” mode, which will simply ignore CORS rules.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=c:\temp-working-folder

Pretty simple and useful.

Evaluate an object looping back its nodes

The situation is that you want to avoid lines like this one here

if (object.key == null || typeof(object.key)=== "undefined" || object.key==="")

 

Which can be terrible when there are object.grandparent.parent.child and any of them could be undefined.

Considering that eval() isn’t evil, just misunderstood, this solution verifies that all the nodes exist and the “leaf” has a value other than “”

function hasContent(obj, string) {
    st = string.split(".");
    var key, v;
    try {
        key="";
        for (v = 0; v < st.length; v++) {            
            key=(key=="")?st[v]:key+'.'+st[v];
            if (eval("obj."+[key]) === null ||  typeof (eval("obj."+[key])) === "undefined") return false;
        }
        if (eval("obj."+[key])=="") return false
    }
    catch (e) { return false; }
    return true;
}

 

The usage is fairly simple: just call the function sending your object and the string having the full path

if (hasContent(timeEntry,"UserComments.UserComment"))

 

Eval, not evil

Add two -or more- background images with css

The HTML

<div class="cont">
  <input type="text" class="child commentedEntry editedEntry ">
</div>

 

The CSS

.cont{
  
  border: solid; border-width: 1px; border-color:#ccc;
  padding:5px;
}
.child{
  background:white;
  box-sizing: border-box
    
}
.commentedEntry{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gUYCiAar2S4JwAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAANklEQVQYlWP8//8/Azpg3zABQ5AJQxUDA8PPgAJGohRiU4xTIbpivAqRFTNi8ww2QNDEQaAQAC+vDzvnfYDpAAAAAElFTkSuQmCC);
  background-position: right top;
    background-repeat: no-repeat;    
}
.commentedEntry.editedEntry{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gUYCiAar2S4JwAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAANklEQVQYlWP8//8/Azpg3zABQ5AJQxUDA8PPgAJGohRiU4xTIbpivAqRFTNi8ww2QNDEQaAQAC+vDzvnfYDpAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKklEQVQYV2M4wMDwHx0DAQM6ZiBGEYZCXIpQFOJTBFdISBFYISEFQ0khAIh4GEKvITaLAAAAAElFTkSuQmCC);
  background-position: right top, left top;
  
    background-repeat: no-repeat;  
}
.editedEntry{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKklEQVQYV2M4wMDwHx0DAQM6ZiBGEYZCXIpQFOJTBFdISBFYISEFQ0khAIh4GEKvITaLAAAAAElFTkSuQmCC);
  background-position: left top;
    background-repeat: no-repeat;  
}
  /*

The result

You can also use one or the other by just leaving one of the classes class=”child commentedEntry editedEntry “>

 

When an element overlaps its container for no reason (usually when 100% width or height are set)

The situation is you have a container (say a div), with some width and height something simple like this

.cont{
  width: 200px;
  height: 100px;
  border: solid; border-width: 1px; border-color:#ccc;
  padding:5px;
}

 

And then, you put a child element inside

.child{
  width: 100%;
  height: 100%;
}

 

The HTML

<div class="cont">
  <input type="text" class="child">
</div>

 

The result

Why is this happening? The width and height of the child element is 100%, PLUS the border and padding.

To avoid the situation, add box-sizing: border-box to the child element, so that the 100% will include borders and padding, like this:

.child{
  width: 100%;
  height: 100%;
  box-sizing: border-box  
}

 

And your child element will beautifully be were you need it to be:

Console.log(all jQuery events)

JavaScript – jQuery

Sometimes you just don’t know which of your events are triggered, or whether they are triggered twice because of combined handlers (ie mousedown, click, focusin) And then, setting a million console.log() in your code is just not working.

Try to just put this piece of code at the beginning:

$(document).on("click mousedown mouseup focus blur keydown change focus focusin focusout",function(e){
   console.log(e);
 });

 

It will display all the events on your console as they happen

Beautiful, uh?

Callbacks in Node.js: a different explanation

Node is great for many things, but it is mostly know because it uses JavaScript as programming language and it has that amazing feature called asynchronicity using callback.

Now, there are many articles and videos explaining callbacks, most of them great. But it takes a great deal to understand them. I believe this is because they are written by programmers for programmers… and that makes sense. But what if you are a programmer and still are not getting it?

Okay, so, let me give it a try:

The key thing is that you need to understand that there is nothing really new here. Well, there maybe is, but it is easy to understand: a function can be passed to another function as a parameter.
What does that mean? Imagine a simple javascript function. That function has some code and when your program is run, the code of the function sits somewhere in the computer’s memory. Right? Well, say that the function code when it is on memory is 1000. You don’t know where that is and it will change every time you run the program. S, how do you call it? You already know that, you call it by a name. When you declare function hello(), it is placing your code in memory (let’s say this time is position 1000) and that memory address is stored in a variable called ‘hello’, so that everytiem you call ‘hello’ it will go seek some code at the memory position 1000 and process it.
We good? Okay, let’s keep going.

We said that ‘hello()’ is just a pointer to a location in memory with some code. Same as if intestad of a piece of code it is a piece of data. Let say you declare a variable like ‘var a = 2;’. It is doing the same: putting somewhere in the memory the value “2”, and assiging to the name “a” the memory location where the value is. So when you need to retrieve it again, you just need to call ‘a’

The only difference is that when you declare a function, you are telling the machine (preprocessor, compiler or whatever it it) that it is going to find a piece of code (a function) or a piece of data.

So let’s say we have
1000: hello()
1050: 2
1010: goodbye ()

The same way you pass a variable, you can pass a function because it is just a location in the memory. Therefore you can do things like hello(a, goodbye), passing a variable and a function.

Hope this was useful!

Nelson Muskus