Communication between .NET WebView2 client and web page using JavaScript PostMessages

When embedding a web page in your Windows desktop or mobile application usually one requires to have some kind of communication between them.  

In the old Internet Explorer days, the WebBrowser component was the way to go and a web page could send a message by writing  it on the status bar. The application would then read the status bar content and this simple mechanism allowed some kind of communication.
These days Internet Explorer and the status bar are pretty much dead and there are different ways to communicate.

The WebView2 is the current way to go (get it from NuGet) and even it it is a far more complete and complex component, upgrade is not really that hard for the basic stuff such as getting the event of document complete or location has changed.

WebView embraces new ways for interoperability between the application and the web page.
One simple way to replace the status bar messages mechanism is to use the ExecuteScriptAsync to execute JavaScript code to read information from your page. For instance, using the old hidden field trick as a message store.

But new and more powerful ways are available to have better communication.
While researching on this topic, I found a post that describes multiple ways to reach this goal, like using "postMessage" and "hostObject": Chromium WebView2 Control and .NET to JavaScript Interop - Part 2 

Microsoft also has tutorials on this:

• Get started with WebView2 in WinForms apps (check Step 10 if you know the basics)
• Interop of native-side and web-side code

./M6

How to setup VSCode launch.json for Xdebug version 2

I had to make some maintenance on a web application using Yii 1.1.4 framework running on PHP 7 and for that, I set up an Ububtu 18.04 LTS Desktop on a virtual machine. 

After the usual bunch of "apt-get install" commands and a few configurations, I got the new development environment up and running having Visual Studio Code as my IDE.

But, almost as soon as I got it running, I got the need to step debug it. For that, I went to Xdebug, I installed it via "apt-get" and configured it, but it was not working as expected.
I check the configuration parameters and give it another try. No go. Xdebug was installed, PHP was recognizing it on both cli and web, but it was still not working.
After a few seconds, I spotted the issue: it was a Xdebug version 2!

A lot has changed between version 2 and 3 of Xdebug.

The thing was that I wanted to keep version 2, and for that I had to configure "launch.json" file and Xdebug in the appropriate way.

On PHP configuration file:

zend_extension=xdebug.so
xdebug.idekey=XDEBUG_VC
xdebug.remote_port=9003
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

 

And on "launch.json":

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
       
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 0,
            "runtimeArgs": [
                "-dxdebug.remote_autostart=yes"
            ],
            "env": {
                "XDEBUG_MODE": "debug,develop",
                "XDEBUG_CONFIG": "client_port=${port}"
            }
        },
        {
            "name": "Launch Built-in web server",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-dxdebug.mode=debug",
                "-dxdebug.remote_autostart=yes",
                "-S",
                "localhost:0"
            ],
            "program": "",
            "cwd": "${workspaceRoot}",
            "port": 9003,
            "serverReadyAction": {
                "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
                "uriFormat": "http://localhost:%s",
                "action": "openExternally"
            }
        }
    ]
}

The default port is 9000, but I'm used to have Xdebug on 9003, so I reconfigured it. The remaining parameters are, basically, the version 2 way of activation the debugger on a request.

./M6

Could not close zip file php://output.

Ever got a "Could not close zip file" when using PHPExcel Writer? Usually the full error message is something like

[exception.PHPExcel_Writer_Exception] exception 'PHPExcel_Writer_Exception' 
with message 'Could not close zip file php://output.' 
in /var/www/vhosts/yourdomain/phpexcel/Classes/PHPExcel/Writer/Excel2007.php:399

This is caused because the PHPExcel requires access to the /tmp directory but the apache configuration is not allowing it.

The solution is easy and fast, just add the /tmp to your php_admin_value open_basedir parameter, as in this example:

php_admin_value open_basedir "[your current paths]:/tmp"

When using EHCP, it is recommended to update the Virtualhost configuration in all your templates (apachetemplate, apachetemplate_ipbased, apache_subdomain_template, apache_subdomain_template_ipbased) located in /var/www/new/ehcp:

php_admin_value open_basedir "{homedir}:/usr/share/php:/usr/share/pear:/tmp"

./M6

Debugging in PHP with XDebug

Debugging in PHP does not necessarily mean "print" or "log" debugging, even if one's using Lampp.

While checking out how to set up a good Joomla! 3 development environment, I've learned how to set up XDebug and configure it for PHP debugging.
Just check the correct XDebug version numbers and don't just "copy-paste" the settings.

./M6

How to include a local font in CSS

Web development usually includes nice fonts defined from a CSS file. The fonts can be located on a third party server, like Google Fonts, or locally at your own server, just beside the CSS file.

Sometimes one finds very nice fonts but cannot rely on third party servers, which forces one to include the fonts locally.
I've come up with a simple solution to avoid this tedious task:

1. Download the fonts you wish, e.g. from Google Fonts add them to your collection and then get them as a zip file.
2. Go to Font Squirrel Webfont Generator and upload the font files.
3. Wait for the end of the font process and download the kit.

With this simple steps, one gets the fonts and the correspondent CSS file ready for usage, just import the "stylesheet.css" file into your own CSS files.

./M6

Debug Email in Web Applications

Email debugging may be painless.

This simple technique shows how one can do it in a very simple way.
It aims at Django applications, but the first technique is actually a generic one that anyone can use if Python is installed in the development machine: Debugging email on Django application development

./M6

Testing websites in Internet Explorer

Here's a great solution for testing website development in the various versions of Internet Explorer: Testing for Internet Explorer.

./M6

Stripe, Payments for Developers

While developing in Django, sometimes one needs to access a payment system.

Django is a development framework and it does not have payment plugins like VirtueMart or Magento.

One possible and fast solution is to use Stripe.

It's focused to help developers to overcome the payment solution implementation, it has wrappers for Ruby, PHP, Python and more.

./M6

Learn Yii Framework

After evaluating some PHP frameworks, I've picked Yii because it seems to have the best ratio between cost/benefit. It's quite complete, easy to learn, performs fast and even has some similarities with Django, my favorite web framework.

Here's my Yii learning process:

• Start with Larry Ullman Learning the Yii framework tutorial.
• Read the Larry Ullman Working with layouts in Yii to learn how to change the GUI.
• Read the Configuring controller access rules to default-deny to learn how to control the user access.
• Read the Relational Active Record to learn about the model relations.
• Get Yii Bootstrap and read the documentation to get great widgets. 
• Get Yiiclipse, if you use Eclipse as an IDE.

If you'r new to Yii and are looking for a starting point, this one worked for me.

./M6