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:

PWA – will be integrated to Magento 2.3 with PWA studio – this will instantly enable most of PWA features for Magento on mobile platforms
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.

Laravel Tinker Shell – Access a Laravel controller function through command line

Laravel Tinker Shell is an interactive command like tool that allows you to run a controller function directly via the command line.

Let's see an example below:

Say you have a controller as such: App\Http\Controllers\SomeController

Within it, there's a function call SomeFunction().

Now you want to access SomeFunction() via the Tinker command line:

php artisan tinker

$controller = app()->make('App\Http\Controllers\SomeController');

app()->call([$controller, 'SomeFunction'], []);
// the SomeFunction function is called
// the second param array [] is used to hold the parameters
// leave it empty if there's no parameter.

app()->call([$controller, 'SomeFunction'], [param1 => 321]);
// this is how the parameters are passed in

So you can see the outputs from the command line directly, this is very helpful for testing. However if you want something permanent you probably may like to make a custom artisan command for long term use.

Laravel Tinker Docs

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/

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.

PHP 7.1+ Swoole v1.9.5 vs Node.js Benchmark Test PHP7 + Swoole beats Node.js

I'd like to introduce this Swoole PHP extension:

Event-driven asynchronous & concurrent & coroutine networking engine with high performance for PHP.http://www.swoole.com/

This is a game-changing extension that would change how PHP works.

According to the bench mark here, it's 12 times faster than Node.js.

Try swoole extension.

Ubuntu 16.04 LTS
Intel® Core™ i5-4590 CPU @ 3.30GHz × 4
16G Memory


$http = new swoole_http_server("127.0.0.1", 1337, SWOOLE_BASE);

$http->set([
    'worker_num' => 4,
]);

$data = [
  'code' => 'ok',
  'error' => false,
  'payload' => 'Hello World'
];

$http->on('request', function ($request, swoole_http_response $response)  use($data)  {
    $response->header('Content-Type', 'application/json');   
    $response->end(json_encode($data));
});

$http->start();

Node.js v4.2.6

wrk -t4 -c400 -d10s http://127.0.0.1:1337/
Running 10s test @ http://127.0.0.1:1337/
  4 threads and 400 connections
  Thread Stats   Avg      Stdev     Max   +/- Stdev
    Latency    16.08ms    2.70ms 237.82ms   90.94%
    Req/Sec     6.05k   510.34     7.10k    91.00%
  240668 requests in 10.02s, 46.36MB read
Requests/sec:  24026.00
Transfer/sec:      4.63MB

PHP7.1+Swoole-v1.9.5

wrk -t4 -c400 -d10s http://127.0.0.1:1337/
Running 10s test @ http://127.0.0.1:1337/
  4 threads and 400 connections
  Thread Stats   Avg      Stdev     Max   +/- Stdev
    Latency     1.46ms    1.42ms  27.96ms   85.66%
    Req/Sec    75.29k    36.43k  183.55k    72.75%
  3007806 requests in 10.06s, 605.25MB read
Requests/sec: 299103.32
Transfer/sec:     60.19MB

Frontend User Roles Manager Bugs fixes – for OctoberCMS Shahiem Seymor

http://octobercms.com/index.php/plugin/shahiemseymor-roles

Error: Trigger action is not specified

Fix Error: Trigger action is not specified as per https://github.com/octobercms/october/issues/1543
_list_toolbar.htm
data-trigger-action="enable"
the above need to be added to the button

Yaml / configuration file not found error

Found some bugs in:

/plugins/shahiemseymor/roles/controllers/groups/config_form.yaml
/plugins/shahiemseymor/roles/controllers/groups/config_list.yaml
/plugins/shahiemseymor/roles/controllers/permissions/config_form.yaml
/plugins/shahiemseymor/roles/controllers/permissions/config_list.yaml

Instead of full paths to the config files with ~ or code>@ you can change it to $/shahiemseymor/roles/controllers/groups/config_form.yaml etc. In the last builds (347, 348) of October I'm getting errors because you used code>@ in /plugins/shahiemseymor/roles/controllers/groups/config_list.yaml

A list of tools detect what CMS / server / os is used for a website

Sometime, when you found a site looked amazing and functional, you want to know what technology / platform / CMS that was used for building that site. The following is a list of tools that can help you check what kind of components that the site operates with.

But you may also wonder how these online CMS / platform detection work. I think by checking the site urls, and file extensions, HTTP response headers, source code for comments, or standard JS libraries, it could give some clues, as CMS using combinations of components can leave some unique libs and patterns, exactly as "signatures" of a particular platform.

https://builtwith.com/

https://w3techs.com/

http://guess.scritch.org/

https://wappalyzer.com/

TCPDF – PHP library for generating PDF documents on-the-fly

This is a PDF generation library that does not require external libraries for basic functions, image processing will need GD but that's all.

In short this is a PDF generator lib with minimum system requirements, you can integrate it to some older projects.

So if you have an old server with PHP 5.2 / 5.3 and can not install anything like ImageMagicX, you can try this out.

Main Features:

no external libraries are required for the basic functions;
all standard page formats, custom page formats, custom margins and units of measure;
UTF-8 Unicode and Right-To-Left languages;
TrueTypeUnicode, OpenTypeUnicode v1, TrueType, OpenType v1, Type1 and CID-0 fonts;
font subsetting;
methods to publish some XHTML + CSS code, Javascript and Forms;
images, graphic (geometric figures) and transformation methods;
supports JPEG, PNG and SVG images natively, all images supported by GD (GD, GD2, GD2PART, GIF, JPEG, PNG, BMP, XBM, XPM) and all images supported via ImagMagick (http://www.imagemagick.org/script/formats.php)
1D and 2D barcodes: CODE 39, ANSI MH10.8M-1983, USD-3, 3 of 9, CODE 93, USS-93, Standard 2 of 5, Interleaved 2 of 5, CODE 128 A/B/C, 2 and 5 Digits UPC-Based Extension, EAN 8, EAN 13, UPC-A, UPC-E, MSI, POSTNET, PLANET, RMS4CC (Royal Mail 4-state Customer Code), CBC (Customer Bar Code), KIX (Klant index - Customer index), Intelligent Mail Barcode, Onecode, USPS-B-3200, CODABAR, CODE 11, PHARMACODE, PHARMACODE TWO-TRACKS, Datamatrix, QR-Code, PDF417;
JPEG and PNG ICC profiles, Grayscale, RGB, CMYK, Spot Colors and Transparencies;
automatic page header and footer management;
document encryption up to 256 bit and digital signature certifications;
transactions to UNDO commands;
PDF annotations, including links, text and file attachments;
text rendering modes (fill, stroke and clipping);
multiple columns mode;
no-write page regions;
bookmarks, named destinations and table of content;
text hyphenation;
text stretching and spacing (tracking);
automatic page break, line break and text alignments including justification;
automatic page numbering and page groups;
move and delete pages;
page compression (requires php-zlib extension);
XOBject Templates;
Layers and object visibility.
PDF/A-1b support.

on GitHub: https://github.com/tecnickcom/TCPDF

Magento Marketplace / B2B related extensions and solutions

Found some of the Magento extensions are quite sophisiticated and built-ready, while searching for the B2B solutions.

These could help you to come up with a Magento B2B / Marketplace e-commerce platform very quick.

Magento Builder Theme
https://www.magentocommerce.com/magento-connect/frontend-builder-theme.html ($9.00)

B2B / Market place
[Recommended] https://www.magentocommerce.com/magento-connect/marketplace.html (Magento Marketplace Multi Vendor Module US$349.00)
[Membership addon] http://webkul.com/blog/magento-marketplace-membership/ (US$149.00)
[Marketplace Mobile App] https://www.magentocommerce.com/magento-connect/marketplace-mobile-app.html (US$599.00)
author: https://www.magentocommerce.com/magento-connect/developer/webkul
https://www.magentocommerce.com/magento-connect/b2b-suite.html (US$250.00)
https://www.magentocommerce.com/magento-connect/marketplace-2.html (FREE)

Membership
https://www.magentocommerce.com/magento-connect/membership-program-for-magento.html (US$199.00)
https://www.magentocommerce.com/magento-connect/marketplace-membership.html (US$149.00)
https://www.magentocommerce.com/magento-connect/membership-subscription.html (US$149.00)
OR build with Magento recurring profile (membership as a vitual product with recurring payment requirement):
http://docs.magento.com/m1/ce/user_guide/catalog/product-recurring-profile.html

Payment gateway - WestPac and eWay
https://www.magentocommerce.com/magento-connect/fontis-westpac-payway-and-quickgateway.html (FREE) [up to Magento 1.7]
https://www.magentocommerce.com/magento-connect/fontis-eway-au.html (FREE) [eWay transaction fee: 1.6% per transaction]
https://www.magentocommerce.com/magento-connect/eway-rapid-australia.html (FREE)

Vtiger CRM Integration
https://www.magentocommerce.com/magento-connect/vtiger-magento-integration.html (US$299.99)
https://www.magentocommerce.com/magento-connect/vtiger-crm-integration.html (US$149.00)

Comparing Blade and Twig templates in Laravel

Blade and Twig, which one is better ? which one will be your choice?

Let's read through the comparison article listed here: Comparing Blade and Twig templates in Laravel

In my company, we use Twig instead of Blade for our Laravel projects. I know there are a lot of developers that also prefer Twig over Blade. So the question‘Why choose Twig over Blade?’ often pops up. The reason is usually just a matter of preference, but in this post we’re going to compare the Blade and Twig templating engines side-by-side.

link: https://medium.com/@barryvdh/comparing-blade-and-twig-templates-in-laravel-187fde7fcac9

ASP.NET – Publish to a Linux Production Environment

Publish to a Linux Production Environment

Found this handy to help transferring some of the ASP.NET projects to Linux, the goal is to eventually get away from Windows Servers.

In this guide, we will cover setting up a production-ready ASP.NET environment on an Ubuntu 14.04 Server.

We will take an existing ASP.NET Core application and place it behind a reverse-proxy server. We will then setup the reverse-proxy server to forward requests to our Kestrel web server.

Additionally we will ensure our web application runs on startup as a daemon and configure a process management tool to help restart our web application in the event of a crash to guarantee high availability.

Link: https://github.com/aspnet/Docs/blob/master/aspnet/publishing/linuxproduction.rst

reference: https://docs.asp.net/en/latest/publishing/linuxproduction.html

Magento Cards/Knowledge, Developer reference, Code Snippets, and netz98 magerun CLI tools

Some of the useful Magento tools and references:

Magento Code Snippets

This GitHub page gives you a lot of very useful Magento Code Snippets

https://gist.github.com/arosenhagen/2397824

netz98 magerun CLI tools

The swiss army knife for Magento developers, sysadmins and devops. The tool provides a huge set of well tested command line commands which save hours of work time. All commands are extendable by a module API. http://magerun.net/

on GitHub: https://github.com/netz98/n98-magerun

Magento cards

A simple knowledge base for Magento development including code snippets, tips and tricks, commands, configurations and many more other topics.

https://makandracards.com/magento

Magento for Developers: Part 4—Magento Layouts, Blocks and Templates

The official dev guide for Magento 1.x

http://devdocs.magento.com/guides/m1x/magefordev/mage-for-dev-4.html

PHP function to make slug – SEO friendly URL string conversion from title or excerpt

The following is the function that converts string into SEO friendly URL slug

function slugify($text)
{ 
  // replace non letter or digits by -
  $text = preg_replace('~[^\\pL\d]+~u', '-', $text);

  // trim
  $text = trim($text, '-');

  // transliterate
  $text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);

  // lowercase
  $text = strtolower($text);

  // remove unwanted characters
  $text = preg_replace('~[^-\w]+~', '', $text);

  if (empty($text))
  {
    return 'n-a';
  }

  return $text;
}

CSS Vertical Alignment – Bootstrap Bottom Align within Row

.row {
position: relative;
}
.mainBox {
border: solid thin black;
}

.buttonBox {
position: absolute;
bottom:0;
right:0;
}

Heading

Sub Heading

.buttonBox will make the div with the button align to the bottom of the container

Source: http://jsfiddle.net/6pYhx/3/

Instant response for OctoberCMS Flash messages combined with Romanov.Flashmessage plugin (no page reload)

$validation = Validator::make($data, $rules);
 if ($validation->fails()) {
     throw new ValidationException($validation);
 }
 try {
     $user = Auth::authenticate([
         'login' => array_get($data, 'login'),
         'password' => array_get($data, 'password')
     ], true);
 }
 catch (Exception $ex) {
     if (preg_match('/user was not found with the given cred/i',$ex->getMessage())) {
     $flash_message = 'A registered user was not found with that email';
 }
 elseif (preg_match('/hashed credential "password" did not match/i',$ex->getMessage())) {
     $flash_message = 'The password supplied for that user is incorrect';
 }
 }
 if ($flash_message) {
     return ['msgs' => [ 'danger' => $flash_message ], 'options' => [], 'settings' => [] ];
 }

This will replace the error message " user was found to match all plain text credentials however hashed credential "password" did not match." that comes by default with Laravel.

Source:

https://gist.github.com/kdallas/17e07f9b50b066a13bdd#file-account-php-L138

OctoberCMS debugging – DUMP() debug function for templating and Debugbar plugin

This is a very handy function for debugging the template.

reference: https://octobercms.com/docs/markup/function-dump

Usage:

{{ dump(user) }}

{{ dump(user, categories) }}

{{ dump() }}

It'll show you the variable type and its content, eg. if you have an object variable it'll show you the member functions or if you have a collection variable, it'll show you the keys and value types.

The following screenshot indicates the front-end output of an array variable:

Here is another useful OctoberCMS plugin that'll help debugging as it could show much more information in the backend.

OctoberCMS debugbar plugin on GitHub: https://github.com/Flynsarmy/oc-debugbar-plugin

on OctoberCMS plugins page: https://octobercms.com/plugin/bedard-debugbar