ES2015 (ES6) Template Strings

Example: https://jsfiddle.net/ehdgpvyb/

ES2015 provides a better way to use variables inside strings.


function exampleJS5( name , age ) {
console.log("Hello " + name + ", you are " + age + "!");
}

function exampleJS6( name , age ) {
console.log(`Hello ${name}, you are ${age}!`);
}

exampleJS5('Bob', 20);
//Hello Bob, you are 20!
exampleJS6('Bob', 20);
//Hello Bob, you are 20!

ES2015 (Es6) Default Parameters Syntax

Example: https://jsfiddle.net/pkygohf3/

ES2015 provides a good way to define default parameters in functions.


function example( x = 2 ) {
 console.log(x);
}
example(5);
// 5
example();
// 2

In this example, if the argument of ‘x’ is not passed to the function, it falls back to the default value of ‘2’.


function objExample1( x ) {
 console.log(x.length);
}
function objExample2( x = [] ) {
 console.log(x.length);
}
objExample1();
// Cannot read property 'length' of undefined
objExample1(['test']);
// 1
objExample2();
// 0
objExample2(['test']);
// 1

You can see here that the built in Array.length() function is failing in objExample1 as it trying to call it on ‘undefined’ argument. objExample2 fixes this by using the ES2015 default syntax as the function parameter.

This is more powerful with default objects:


const $initSetup = {
width: 400,
height: 200,
background: 'blue'
}

function defaultTest({
width = $initSetup.width,
height = $initSetup.height,
background = $initSetup.background
} = $initSetup) {

console.log(`'${width} x ${height}' with background: ${background}.`);

};

let $userSetup = {
width: 250,
background: 'red'
}

defaultTest();
//'400 x 200' with background: blue.
defaultTest($userSetup);
//'250 x 200' with background: red.

 

 

Differences in syntax between AngularJS, Angular2, React, and Vue.js

(by AXDS)

Here’s some examples showing the differences in syntax between AngularJS, Angular2, React, and Vue.js  🙂

All of these examples are doing pretty much the same thing:

AngularJS: https://jsfiddle.net/g7bk9Lk5/

Angular2: https://jsfiddle.net/pt5ox9mp/

React: https://jsfiddle.net/ma9bg0gt/

Vue.js: https://jsfiddle.net/2ojtoaxx/

 

 

 

Experiment with JSON date format.

(by AXDS)

I have found out that the JSON standard for date is in this format: ‘yyyy-MM-ddTHH:mm:ssZ’. This format is the preferred way to handle dates inside a JSON object.

For example, 21st March 2016 at 17:04:33, would be, 2016-03-21T17:04:33.000Z.

In order to convert a JavaScript Date into the JSON standard format, toJSON() can be called on this date. toISOString() is another function that can be used to convert a Date into this format.

There is no real functional difference between these functions, in fact, toJSON() will call toISOString(). The main difference is that toJSON() is included in JS 1.8.5, while toISOString() is included in JS 1.8. This makes toJSON() preferable for converting Date to JSON’s standard date format.

This JSON date format can be parsed into milliseconds using the usual Date.parse() function.

JSFiddle: https://jsfiddle.net/3e0sj0mm/

AXDS Plugin: JSON to styled jQuery Datatable

(by AXDS)

Useful for quick data visualisation. Converts a JSON object into a styled filterable/sortable table. Also uses Bootstrap and jQuery Datatable libraries.

Example: https://jsfiddle.net/kvndLfn8/

The plugin, once called on a target location, requires a table ID and an object of data in order to work.

HTML:

<div id="examplePlace"></div>

Script:

var tableId = "tableID";
var targetElement = "#examplePlace";
$(targetElement).Create_AXDS_Table({
"tableId": tableId,
"data": {
"tableColumnHeaders": tableColumnHeaders,
"tableContentsValues": tableContentsValues
},
"options": tableOptions
});
});

The data and objects are formatted as below:

The tableData is split into the header and the values to populate the rows. The id inside the headers is linked to the key of the values. For example: The column ‘fstName’ will be populated with any keys with ‘fstName’.


 var tableColumnHeaders = [{
"id": "fstName",
"text": "First Name"
}, {
"id": "lstName",
"text": "Last Name"
}, {
"id": "mobile",
"text": "Mobile Number"
}, {
"id": "dob",
"text": "Date of Birth"
}];

var tableContentsValues = [{
"fstName": "Wade",
"lstName": "Wilson",
"mobile": "07567 567 432",
"dob": "01/01/1985",
}, {
"fstName": "Peter",
"lstName": "Parker",
"mobile": "07594 567 890",
"dob": "01/01/1995",
}, {
"fstName": "Fred",
"lstName": "Flintstone",
"dob": "01/01/1965",
}, {
"fstName": "Tony",
"lstName": "Stark",
"mobile": "01345 987 234",
"dob": "01/01/1975",
}]

The tableOptions is for styling the table. This is pretty self explanatory.


var tableOptions = [{
"tableBordered": true,
"tableStriped": true,
"responsive": true,
"cellspacing": 0,
"noWrap": true,
"width": "100%",
"rowStyling": {
"fontStyle": "italic",
"color": "red"
},
"tableStyling": {
"textAlign": "center",
"color": "blue"
}
}];

This will produce a styled table with the given ID in the target location. This table and ID can be used with the jQuery Datatable library to produce a filterable/sortable table.

How to: ReactJS basics

(by AXDS)

ReactJS is a library developed at Facebook. It uses a concept called a Virtual DOM that renders nodes based on state changes. It performs mostly on the client side, but can be rendered server side.

The CDN links: https://facebook.github.io/react/downloads.html

ReactJS blank JSFiddle: https://jsfiddle.net/00d9dwzs/

The main idea around ReactJS is that is built around rendering components.

Firstly, we need to define a place in the HTML for the ReactJS application to render to. (You could also just use the HTML document or body)

<div id="container">

</div>

Components are defined using the 'createClass' method.

var App = React.createClass({

render: function() {
return (
<h1>Hello world!</h1>
)
}

});

Rendering out this components is pretty straight forward:

React.render(<App/>, document.getElementById('container'));

The above should render and display ‘Hello world!’ in the defined location.
components are custom classes, which can call and use other components.

Here’s a JSFiddle showing component rendering: https://jsfiddle.net/o0e73fqf/

In order to make this more useful we can introduce ‘props’. These are variables passes through components using attributes. For example, including 'attributeName="Hello"' This attributes are then available using '{this.props.attributeName}'

var App = React.createClass({

render: function() {
return (
<h1>Hello, {this.props.firstName} {this.props.lastName}!</h1>
)
}
});

React.render(<App firstName="John" lastName="Smith"/>, document.getElementById('container'));

Here’s a JSFiddle of the use of props:  https://jsfiddle.net/13jg12t9/

Another thing to know about ReactJS is it’s use of ‘state’. A component has state variables, these variables can be initialised straight away by setting them inside of the ‘getInitialState’ function. This can be available and read using '{this.state.stateVariable}' or, set using the 'this.setState' function.

var App = React.createClass({

getInitialState: function(){
return{
firstName: "John",
lastName: "Smith"
}
},


render: function() {
return (
<h1>Hello, {this.state.firstName} {this.state.lastName}!</h1>
);
}

});

React.render(<App />, document.getElementById('container'));

Here’s a JSFiddle of the use of state: https://jsfiddle.net/jrk9ycmn/

Components can be called and used inside of another component. This can be useful as you can set up a component that branches off to relevant other components that handle and return some HTML creation given their data attributes.

 

var peopleList =
[
{
firstName: "John",
lastName: "Smith"
},
{
firstName: "James",
lastName: "Bond"
}
];

var App = React.createClass({
render: function() {
return (
<div>
<Message message="Hello, world!"/>
<MakeListOfPeople data={this.props.data}/>
</div>
);
}
});

var Message = React.createClass({
render: function() {
return (
<div className="messageDiv">
<h1>{this.props.message}</h1>
</div>
);
}
});

var MakeListOfPeople = React.createClass({
render: function() {
var PeopleList = this.props.data.map(function(people) {
return (
	<li>{people.firstName} {people.lastName}< /li>
);
});
return (
<ul className="commentList">
{PeopleList}</ul>
);
}
});

React.render(<App data={peopleList}/>, document.getElementById('container'));

Here’s a JSFiddle of components inside components: https://jsfiddle.net/2m4vLL56/

Although there are a lot more component functions to know, it’s pretty much the basics of ReactJS.


 

Information/Tutorials Links:

 

Useful Examples:


 

Add a ‘Scroll to top of page’ Button

(by AXDS)

Thanks to: http://www.webtipblog.com/adding-scroll-top-button-website/


Example: https://jsfiddle.net/zgmnhLkL/

Checks for a scroll event past a threshold. Once triggered uses jQuery to toggle a class on the button. This class shows/hides the button using CSS. A click event is added to the button to scroll the window to a given element or id.

HTML:

<div style="height:3000px;border:1px solid black;">
<!-- Mimics the site content -->
</div>
<div class="scroll-top-wrapper ">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>

JavaScript (jQuery):


$(function() {
$(document).on('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({
scrollTop: offsetTop
}, 500, 'linear');
}

CSS:


.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.scroll-top-wrapper:hover {
background-color: #888888;
}

.scroll-top-wrapper.show {
visibility: visible;
cursor: pointer;
opacity: 1.0;
}

.scroll-top-wrapper i.fa {
line-height: inherit;
}