Category Archives: Javascript

Apache Cordova Gotchas

Few months ago I have started developing a hybrid mobile app using Cordova. I encountered a lot of headaches and frustrations using this technology but the more time you spend on it, the better you get at googling about your issues (lol). Here I list all my headache and quirk fixes I found make it at least bearable to develop for Cordova.

  • Apache Cordova is Phonegap/Ionic . Phonegap and Ionic builds on top of Cordova so most likely ionic or phonegap plugin will work with Cordova.
  • Push notifications.  Use Google Firebase ( messaging platform. You create an application for free app for iOS and Android. You must provide the same app ID you set in your application. Use this plugin , as this allows you to avoid build errors.
  • Use the latest version of Cordova. If for some reason the current version is spitting out errors , use Cordova 8. npm install -g cordova@8.1.2 as this is a stable version.
  • Accessing photos , camera, videos and files. If by any chance you need to access the local resources of the device. Use
    cordova-plugin-file plugin. Take note android/ios has different path scheme. Use window.resolveLocalFileSystemURL to access the local file to get the blob or base64 encoded data eg. data://…  Dont forget that also when you take a photo, the image orientation might not be correct. Use , this library will sniff the EXIF data and return the correct orientation of the image as a BLOB.
  • Fetch() is a function that lets you grab the blob of the file to be inserted into formData to submit files to the server. It works for base64 encoded data or localhost file such as ‘/path/to/something’
  • Keyboard is recently my main issue making chat system by having a text field on top of soft keyboard. Use cordova-plugin-keyboard (iOS) , cordova-plugin-ionic-keyboard (Android) . Make sure you have cordova-plugin-ionic-webview installed otherwise on iOS you will see a black panel when keyboard is up. And since you are using ionic webview, you must add <preference name=”ScrollEnabled”value=”true”/> to enable body scrolling particularly with iOS.
  • Chat feature , creating a chat feature in cordova is hard/tricky. Remember when the soft keyboard in iOS is up , position: fixed wont work anymore. Remember to Keyboard.shrinkView(true); (disable by default) for the view to shrink and make the div bottom: 0px to attach to the keyboard. It will also help to
    Keyboard.disableScrollingInShrinkView(true); to disable any scrolling while the soft keyboard is up. Put them back to normal afterwards.

JS: Using import/export VS require (file)

In JavaScript there is 2 ways of importing a file from another file.

  • import /export is ES6 syntax and not every browser support yet. Using Babel to transpile javascript is actually using CommonJS which NodeJS use.
import "myfile.js"; 
// include the file as is

export default function(){
 return 1
import func from "file1.js"
var x = func();

var func1 = ()=> { return 1; };
var func2 = ()=> { return 0; };
export func1;
export func2;
import {func1} from "file1.js";
import {func2} from "file1.js";
  • require(file) is mostly used in CommonJS and Node.JS
module.exports = {
   x: 0, func1: ()=> 1
var obj = require("file1.js");
console.log ( obj.x); // return 0

When you are using NodeJS you are more likely to use “require” but in other situation like React. It is most likely ES6 import and export.

Here below is  nice quick cheat sheet I found on the net.

Webpack 4

Howdy you! Its been 2 months since my last post. And I have been taken aback from my usual routine of learning stuff everyday. (Damn you gaming!). Here I want to remind myself of the basic of Webpack configuration primarily v4.

module.exports = {
 entry: __dirname + "/app/entry.js",
 // This is where you set the entry point of your script.
 output: {
   path: __dirname + "/public",
   // where you would put your bundle.js
   filename: "bundle.js"
   // the name of your outputted file to include
 devtool: "eval-source-map",
 // devtool option allows webpack to create source-map so browser can point to an specific line in the script making debugging easier for developers.
 devServer : {
   contentBase: "./public",
   // contentBase is where to watch changes for, for auto-reloading with web-dev-server
   port: "8080",
   // port to use by web-dev-server
   colors: "red",
   inline: true, 
   // set to true if you want all info about auto-reload in the console false if you want it displayed in your app as an IFRAME
   historyApiFallback: true
   // good for SPA. Set to true if you want the browser when back button is press to go to your main index.html not the actual previous history page.
 // devServer is used when you have web-dev-server installed as well. There is alot more options available
  plugin: {

Each object entry in webpack above has purpose to learn more of its configuration head to:

The documentation is pretty easy to follow!

So future self remember. Every “entry”, “output”, “devServer” in your webpack configuration points to more option specific to the entry.

Time for some Lodash action

Please note: Lodash functions may already been implemented on ES6(Ecmascript) so look it up first before commiting. Othwerwise lodash is still a very good utility function for general javascript programming.

I been developing in React for a couple of weeks now and Its starting to make sense to me now. Especially the widely use Redux architecture. As always I ponder if I am doing the right thing or not. One of the questions that pops in my head is.. “There must be a better way of doing this without mocking about?”

I know of lodash but why am I not using it? Well I just need a well written out reference to start. Because to be honest with the VAST libraries available to us, its hard to keep up. Even for an IT person like me and you.

Here as always link to lodash  quick tutorial, the author really made effort for noobs like me to better understand it.

Javascript: Promise, Await/Async and Closure


So been seeing these two pops up in the Javascript world, and finally gave it time to study what they are.

Closure , basically a term in Javascript where a value in a function is retained.

This is when you pass a value to a function and the function itself is returned. The value that you pass to the main function gets stored inside the sub-function.

And when its finally time to call the returned (function), every variables stored is kept. See the link below for more information, and skip to 10:00 to actually see whats happening.

Promise a new concept, and only available from EcmaScript 2015 or ES6. It is an object that receives a function with 2 parameters, a resolve and  reject function parameters. Then use the “.then(function(return_from_resove){})” when the promise call the “resolve(pass))” inside it, the “then” will be triggered according to what was called. It is like a true or false ,and to promise to return true or to return false. You use “catch(function(){})” chaining when “reject()” is invoke. Here is a quick snippet of the promise:

let promise = new Promise(function(resolve,reject){
       if(true) resolve("anything");
       else if(false) reject("anything");
   // Do anything here
    // Do anything here

Below are excellent video explaining how it works.

Await/Async is a ECMASCRIPT 2017 (ES8) feature that would let you set a function to be asynchronous.

You need to set your function with async and can only use await inside this type of function example below:

async my_function(){
     var result = await getting_json();
     // Im dont waiting let see the result
     console.log ("Im done");
my_function(); // Asynchronous function
console.log("Im not waiting for my_function to finish"); // This will trigger straight away 

// You can also return promise in a async function
    var prom = new Promise((resolve,reject) => resolve() // or call reject if error);
    return prom;
func_promise().then(alert("Success") ).catch(alert("Failed!"));

// You dont need to use promise with async/await they are both asynchronous

A good article about async/await:

[Update: May/2018 – NodeJS  version 8] Supports ASYNC/AWAIT function.

I started learning React

I have finally gotten to the point where its time for me to dive in to what everybody these days are buzzing about. The Javascript world of front end development. I wanted to learn VUE.js first but knowing how React is just a view I can implement them with any systems available and flexibility is the name of my game.

I love how Im able to implement the things that I know already, for example using PHP and MySQL and just making them work. I have already dived into PHP Frameworks such as Laravel and micro-frameworks plus I got a little bit of taste of Webpack which Im glad I did. There so many dependencies and tools out there that we have to get into that mindset that they are there to make our development a little easier.

Okay here are the links that help me understand how React world works. If you are beginner in React I suggest to start on this one:

Also you might want to have a read about the life cycle of the react components:

And also you might to use this boiler plate to examine the code to have a feel of whats going on.

By the way Redux/Flux is sort of like an architecture for building react web apps. Maybe similar to MVC architecture but of course there are others out there but in this scenario will stick with the popular ones.

Once you brushed up and like have a firm grasp on react, you might want to do some more example and readings. Heres a good example of one.

Links of course is credit to the Author , I wouldnt have the knowledge I have now without them.


Javascript Galore ECMAScript

I have been using javascript on my day to day development but never really tried to analyze the standardization of things and the separation between versions over the years.

This is to remind myself that javascript has evolved to a really mature scripting language for the browser. Also a reminder when somebody says ES6 it actually means EcmaScript2015, just minus the number by 1 for example ES7 means Ecmascript2016.

Here below are some reading materials especially new features every iteration:

ES6 Features:

Programming: JQuery Questions

Recently been asked few programming questions, and the heck wasnt ready for those. The questions were 1. whats the difference between .parent() and closest() in JQuery, and surprise surprise I wasnt able to give an answer, all I can think about is parent(), is of course getting the parent of the element but wasnt sure whats the closest() function was. A simple search takes me to Traversing and there it is. I just had a look at the description and yep. closest(selector) takes an argument selector to look for the closest element and traverse to the tree all the way up the root html.

2. create a function isPalindrome($x), this one I just didnt know what palindrome means, went to search again and there it was, the term palindrome any text given and if reverse should be the exact same as the original. when I was cooking dinner.. just thought there might be a function the reverses the string and then match it against the original.meek .. too late.

3. (selector, selector, selector).fadeIn() how do you construct a function so they dont fade at the same time? Ugh another challenge when you are at the moment not using JQuery. Since I havent really delve into much in JQuery lately, top of my head just said just separate each one so they fade in order. Later that day I did a quick search “multiple selection”  and there it is the each() function, then I thought there must be a way to delay it for some milliseconds and there I went and look for the function there it was delay(milliseconds) chain them together with passing each(index) and voila .each(function(index) { $(this).delay(500*index).fadeIn(1000) }); would have been the answer again too late! lol

4. The last question I couldnt put together was to construct a regular expression, I can answer it but I just needed more time to pull up all my symbols expression using these: ^ $ * { } [] a-z 1-9 ? ! + ABC.  I know how to use them and what they means. Again out of time and too late.

Anyways Ive learned something new that day, which Im always happy about. Just so excited in the world of programming, I may not get a good result but it was definitely fun!

Putting your NodeJS up for production, user consumption?

Now that I have a better understanding in how WebApps with NodeJS, it seems like a very daunting task having not deal with Apache/PHP technology anymore. As a PHP Developer myself its hard trying to wrap the idea of doing everything in Javascript, from logic to api calls.

It is expected that web technology will go in this direction, making the browser do all the work in the front-end side of things to asynchronously calling apis for data.

When your app is good to go, then what?? Put it up of course! How?? Its not like apache serving all dynamic and static files for you now.

Check this site out for reference as well:

– NginX
– Nodejs
– PM2
– Express
– Any database of your choosing, I found out that relational databases is not a very popular choice for developers in the Node Community, but you can use them and its base wholly on your preference and use cases.

Check the video below for reference.

Javascript Inheritance

How do you do inheritance in Javascript? These 3 lines of code are the key:

Child.prototype = new Parent();

you assign the prototype of child to parent, to inherit parents prototype, methods and data.

Child.prototype.constructor = Child;

Then you assign the name of the child object, to its constructor property to give back its identity.

And inside the Child object constructor, you call the super class constructor, to take the context of “this” of the Child object into the Parent constructor. Here you can initialize any members of the parent object of the child property and control goes back to the child’s constructor and initialize the child property this time. Also known as Constructor Chaining.

Took me  awhile to understand it. I hope anyone reading this would get it the first time otherwise let me know!