Category Archives: Javascript

Javascript: Promise 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");
}).then(function(from_resolve_value{
   // Do anything here
}).catch(function(from_reject_value)){
    // Do anything here
})

Below are excellent video explaining how it works.

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:

http://busypeoples.github.io/post/react-component-lifecycle/

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

https://github.com/buckyroberts/React-Redux-Boilerplate

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.

https://dev.to/svinci/react-js-web-site-example-almost-real-life-like

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:

https://en.wikipedia.org/wiki/ECMAScript

ES6 Features: https://github.com/lukehoban/es6features#modules

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: http://blog.danyll.com/setting-up-express-with-nginx-and-pm2/

– 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.

Parent.call(this)

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!

My JQUERY reference

var i = {one:1,two:3,three:[{four:8},2,3]} = Array format access by: i.one, i.two, i.three[0].four returns 8, i.three[2] returns 3.

var i = [‘value’,’value2′,’value3′] = Another way to create array
i.one = To access a variable in an array

$.browser = Is an array that will loop through to find the browser you are using.It also contains the version.
$.support = Contains browser capability. To access it you go. $.support.[name], possible values are:
boxModel:if browser supports w3c box model.
cssFloat:if css float i used to acess css float value.
hrefNormalized: doesnt alter the results of getAttribute(‘href’). htmlSerialize: if properly serialize using inneHTML. leadingWhitespace: if browser preserves whitespace with innerHTML.
noCloneEvent: if does not clone handlers when cloned.
objectAll: if getElementByTagName returns all elements. opacity: If browser supports opacity styling.
scriptEval: if appenchild/createTextnode executes.
style: if getAttribute(‘style’) return the correct inline style.
tbody: if browsers allow table without tbody.

JQuery Selectors

$(‘#id’) = Selector of an element
$(‘p’) = Select all P tag in the page
$(‘p.class1’) = Select P with class1 as the class
$(‘div p.class1’) = Select p class1 inside div
$(‘p’).size() = return number of P in the page
$(‘p:first’) = Select the first occurence of P
$(‘p:last’) = Select the last occurence of P
$(‘p’)[0] = Select the first occurence of P but NOT Jquery element just normal DOM.
$(‘p > strong’) =Select <strong> with direct parent <p>
$(‘#div1 p:even’) = Select :even p elements inside #div
$(‘#div1 p:odd’) = Select :odd p elements inside #div
$(‘#div1 p:not(.class1)’) = Select all p but not p with class1
$(‘#div1 p:eq(0)’) = Select p first index
$(‘#div1 p:gt(5)’) = Select all p with index greater than 5
$(‘#div1 p:lt(5)’) = Select all p with index lower than 5
$(‘#div1 p:empty’) = Select all p with no children.
$(‘#div1 p:contains(text)’)= Select all p that contains specified text.
$(‘#div1 p:has(strong)’) = Select all p that has strong tag.
$(‘#div1 p:visible’) = Select all p that are visible.
$(‘#div1 p:hidden’) = Select all p that are hidden.
$(‘#div1 p:[style]’) = Select all p with style property
$(‘#div1 p:[border=1]’) = Select all p with border=1 property
$(‘#div1 p:first-child’) = Select all p that are first child of parent #div1
$(‘#div1 p:last-child’) = Select all p that are last child of parent #div1
$(‘#div1 :input’) = Select all input inside #div1.
$(‘#div1 :text’) = Select all input text inside #div1.
$(‘#div1 :radio’) = Select all input radio inside #div1.
$(‘#div1 :checkbox’) = Select all input checkbox inside #div1.
$(‘#div1 :enabled’) = Select all elements that are enabled inside #div1.
$(‘#div1 :disabled’) = Select all elements that are disabled inside #div1.
$(‘#div1 :checked’) = Select all elements that are checked inside #div1.
$(‘#div1 :selected’) = Select all elements that are selected inside #div1.
$(‘#div1 p:nth-child(3)’) = Select the 3rd p inside #div1.

Continue reading My JQUERY reference

JQuery Plugin Must haves

As I am currently working on a website right now. And Im using JQuery as my javascript library and its the way to the future when it comes to DHTML and this accompanied with plugins that are useful to make developing easy and fun. Here are the plug ins I use for my reference your and yours.

* JQuery Form Submithttp://jquery.malsup.com/form/
This will let you submit forms via AJAX automatically that can save you time doing AJAX. This also lets you upload files via ajax and its pretty daunting doing file upload via ajax.

*JQuery Text Resizer – http://plugins.jquery.com/project/TextAreaResizer
This allows your text area to be resizeable its pretty easy to set up.

I will update this list regulary once I come across other useful plug-ins.