PWA, WebAssembly and GraphQL – 2018 new tech trends and what a web developer needs to know

After another tech giant Facebook adapted the PWA, it seems PWA has become one of the most popular technical terms for current web development.

Reference: “Facebook takes first steps in Progressive Web Apps (PWA)”

 

As you can see there are two trends for the web development in 2018 that you (a web developer) should be very well aware of:

  1. PWA – will be integrated to Magento 2.3 with PWA studio – this will instantly enable most of PWA features for Magento on mobile platforms
  2. GraphQL – this is another Facebook invention, it’s becoming more and more popular and it’s going to replace RESTful API and XML based web services.

 

By the end of the year PWA and GraphQL would be very likely to become main stream since more and more big players are coming onboard.

 

Coming from a PHP / Laravel background I’ve leant Vue.js and used it in the production, however Magento 2.3 will be released with React as the front-end PWA choice. What’s more, because React had performance advantage over other frameworks, so if you are new to PWA, maybe it’s the best choice to start learning React PWA since learning it could provide the best value return in the near future.

 

Just quote it here from “What to Expect from Magento in 2018” (https://trellis.co/blog/expect-magento-2018/):

“In mid-2018, Magento will introduce Progressive Web Applications (PWA) to the platform with Magento PWA Studio. The suite of tools will allow users to build online stores as PWA’s and serve as a learning tool for developers.”

……

“The studio will introduce the new GraphQL 1.0 API style to the API collection.”

For more information, you can read about Magento PWA Studio here.

Further reading:

First Windows 10 Progressive Web Apps (PWA) published by Microsoft hit the Store https://www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here

On the other hand, Golang has officially added the WebAssembly architecture to its road map and had the first commit to the compiler not long ago. Here is the technological statement of WebAssembly architecture for Go.

The WebAssembly architecture will allow Go to become an alternative to JavaScript for writing code that runs in a web browser. This new freedom of choice will hopefully have a positive impact on the software engineering ecosystem overall.

Now it’s becoming more interesting.

HTML5 JavaScript canvas based smooth signature drawing – Online / web signature capture / hand draw signature input

HTML5 JavaScript canvas based smooth signature drawing – Online / web signature capture / hand draw signature input

This JavaScript library make it possible to hand draw smooth signatures from user input, it’s useful in some applications that require user signature for signups, it can output as svg and png formats, and you can use PHP or other server side language to capture the output signature image and store for further use.

https://github.com/szimek/signature_pad

HTML5 canvas based smooth signature drawing http://szimek.github.io/signature_pad/

 

 

Example

Demo

Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in HTML5 Rocks tutorial.

JavaScript object operations – How to add / remove item from a JavaScript object

Getting into JavaScript frameworks like vue.js and react.js, now it’s time to review some of the JavaScript fundamentals.

 

How to remove item from a JavaScript object

Say I create an object as follows:

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};

What is the best way to remove the property regex to end up with new myObject as follows?

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI"
};
var test = {'red':'#FF0000', 'blue':'#0000FF'};
delete test.blue; // or use => delete test['blue'];
console.log(test);

this deletes test.blue

 

There are two ways to add new properties to an object:

var obj = {
    key1: value1,
    key2: value2
};

Using dot notation:

obj.key3 = "value3";

Using square bracket notation:

obj["key3"] = "value3";

The first form is used when you know the name of the property. The second form is used when the name of the property is dynamically determined. Like in this example:

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

real JavaScript array can be constructed using either:

The Array literal notation:

var arr = [];

The Array constructor notation:

var arr = new Array();

Your element is not an array, however your cart needs to be an array in order to support many element objects. Code example:

var element = {}, cart = [];
element.id = id;
element.quantity = quantity;
cart.push(element);

If you want cart to be an array of objects in the form { element: { id: 10, quantity: 1} } then perform:

var element = {}, cart = [];
element.id = id;
element.quantity = quantity;
cart.push({element: element});

JSON.stringify() was mentioned as a concern in the comment:

>> JSON.stringify([{a: 1}, {a: 2}]) 
      "[{"a":1},{"a":2}]" 
How do I add a property to a JavaScript Object using a variable as the name?

You can use this equivalent syntax:

obj[name] = value;
 
How do I check if an object has a key in JavaScript? 

http://stackoverflow.com/questions/455338/how-do-i-check-if-an-object-has-a-key-in-javascript

Try the javascript in operator.

if ('key' in myObj)

And the inverse.

if (!('key' in myObj))

Be careful! The in operator matches all object keys, including those in the object’s prototype chain.

Use myObj.hasOwnProperty('key') to check an object’s own keys and will only return true if keyis available on myObj directly:

myObj.hasOwnProperty('key')

Unless you have a specific reason to use the in operator, using myObj.hasOwnProperty('key')produces the result most code is looking for.

 

You’ll have to iterate:

for (var k in obj) {
  if (!obj.hasOwnProperty(k)) continue;
  if (obj[k] === "orange") {
    /* yaay! an orange! */
  }
}

Now that “hasOwnProperty” test in there is to make sure you don’t stumble over properties inherited from the prototype. That might not be desirable in some cases, and really it’s one of the things you kind-of need to understand in order to know for sure whether you do or don’t want to make that test. Properties that you pick up from an object’s prototype can sometimes be things dropped there by various libraries. (I think the ES5 standard provides for ways to control whether such properties are “iterable”, but in the real world there’s still IE7.)

 

11.2.1 Property Accessors

I want to use the value of an objects property to name the property of another object. Easy to do in PHP:

$object1->property = 'name';
$object2->{$object1->property} = "value";
echo $object2->name; //outputs "value"

But in Javascript I can’t figure out how to do this. The curly braces are used a different way.

Anyone know the php equivalent in javascript?

Thanks 🙂

object2[object1.property] = "value";

 

obj[type]

You use subscript notation.

11.2.1 Property Accessors

Properties are accessed by name, using either the dot notation:

MemberExpression . IdentifierName
CallExpression . IdentifierName

or the bracket notation:

MemberExpression [ Expression ]
CallExpression [ Expression ]

Detect iOS in OctoberCMS to differ the script or other resources loads

in the “code” section of the CMS page editor

put in below codes

function onStart()
{
 //Detect special conditions devices
 $iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
 $iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
 $iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
 $Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
 $webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

 $this['isIos'] = false;

 //do something with this information
 if( $iPod || $iPhone ) {
 //browser reported as an iPhone/iPod touch -- do something here
 $this['isIos']= true;
 } else if($iPad) {
 //browser reported as an iPad -- do something here
 $this['isIos']= true;
 } else if($Android) {
 //browser reported as an Android device -- do something here
 $this['isIos']= false;
 } else if($webOS) {
 //browser reported as a webOS device -- do something here
 $this['isIos']= false;
 }
 //var_dump($this['isIos']);
}

then you can call the isIos variables in html section

{% if isIos %}
{% partial “some-partial-for-ios” %}
{% else %}
{% partial “some-partial-not-for-ios” %}
{% endif %}

reference: http://stackoverflow.com/questions/6322112/check-if-php-page-is-accessed-from-an-ios-device

 

Using .on for dynamically generated elements $(document).on jQuery

This is an issue that usually beginner would encounter when things like .hover and .click did not work with dynamically generated elements.

To resolve the issue, instead of using element.click(), $(document).on(“click”, “element_selector”, function() should be used for live contents. Note that the .hover takes two callback functions, in order to achieve the same effect, mouseenter and mouseleave events should be put in when using $(document).on in this case.

$(document).on("mouseenter", "li", function() {
    // hover starts code here
});

$(document).on("mouseleave", "li", function() {
    // hover ends code here
});

reference: http://stackoverflow.com/questions/14950321/how-to-bind-hover-to-dynamically-created-li-elemtent

 

 

jQuery store locator plugin

The jQuery store locator plugin can easily help you to create a feature rich widget for your website or web application.

Demos:

Tutorials

On github: https://github.com/bjorn2404/jQuery-Store-Locator-Plugin

Author blog: http://www.bjornblog.com/web/jquery-store-locator-plugin/comment-page-3

Perfect Responsive Background Image solutions – Backstretch jQuery plugin

Backstretch – jQuery plugin – responsive background image plugin

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes. http://srobbin.com/jquery-plugins/backstretch/

Backstretch on GitHub: https://github.com/srobbin/jquery-backstretch

Other references:

Perfect Full Page Background Image

OR change the image via @media query
use different images for @media query
https://teamtreehouse.com/community/how-to-create-a-responsive-div-with-a-background-image
OR CSS
http://stackoverflow.com/questions/12609110/responsive-css-background-images

Combine Magento with Angular – Magento-on-Angular

This project brought Magento together with Angular, however it looked like no longer being developed, the latest release was dated Jun 30, 2015.

https://github.com/Wildhoney/Magento-on-Angular

Moa

Tired of Magento’s lack of unit testing? Configuration over convention? Use of Prototype.js? Badly written JavaScript? Untested third-party modules? Likewise! Moa brings Magento into the 21st century.

Some of the jQuery / BootStrap Datepicker datetime input

Customizable Dropdown Birthday Picker Plugin with jQuery

This one’s with 3 input fields.

http://www.jqueryscript.net/time-clock/Customizable-Dropdown-Birthday-Picker-Plugin-with-jQuery.html

Customizable Dropdown Birthday Picker Plugin with jQuery

Datepicker for Bootstrap

The best part for this one is the start and end date / check in and check out date control

http://www.eyecon.ro/bootstrap-datepicker/

Datepicker for Bootstrap

DateTime Picker Bootstrap – form component to handle date and time data.

http://www.malot.fr/bootstrap-datetimepicker/

DateTime Picker Bootstrap - form component to handle date and time data.

 

Pikaday A refreshing JavaScript Datepicker JS Lib

This is a simple yet fully functional datetime picker

Pikaday A refreshing JavaScript Datepicker

Link: https://github.com/dbushell/Pikaday

PHP date function: http://php.net/manual/en/function.date.php

I’ve found an issue when the instance is not bound to the filed value, eg. I’d like to preload the field value value=”{{ __SELF__.userDob }}”, this will cause the picker not work.

In order to solve this, try to bind the instance to the field value:

change the onSelect line

onSelect: function()

to

picker = new Pikaday({
    onSelect: function(date) {
        field.value = picker.toString();
    }

Then it should work.