Arabic-friendly Exeption reporting in Slim Framework 2 & 3

Today I've been upgrading my Slim PHP project from version 2 to version to version 3 beta. And one of the issues I had was reporting my Arabic exceptions from some models I have. I did this before in version 2, to end up with moving from this scrambled message:

to this one:

In Slim Framework 2, I had to edit Middleware / PrettyExceptions.php to add a meta tag for content UTF-8 encoding:

<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>

Now, when I moved to Slim Framework 3.0.0-beta2, I had to do this again but in Handlers/Error.php.

I hope that this trick helps someone on the planet. And I think I may create a pull request for this small hack.

Update: pull request has been merged. (#1470)

[Node JS] Test specific files with Mocha

This is a handy command line I use for testing specific files while developing a certain module for a faster test. I just call Mocha, (optionally) specify my preferred terminal reporter, then I call the files to go through:

mocha --reporter spec ./test/modules/abc.js ./test/modules/def.js

That's it. It is that simple. This way I can run tests on specific files and save some time.

How to detect jQuery mmenu close event

A few days ago, I was trying jQuery mmenu. I had a close button (called #mmenu-btn) that changed shape between open and close states and I wanted to make sure that it will never get stuck in a state different than the desired one.

    

After some reading in the mmenu docs about events and configurations, and after playing a lot with the button and mmenu on desktop and mobile, I had two states to cover:
1- An event is triggered by code (mmenu API): In this case, it is my code, so I can handle it.
2- The user clicks/touches the part outside the mmenu. In this case, the mmenu does not tell me that it is closing now.

For the second case, I found a nice solution that depends on how mmenu works. When mmenu opens, there is a created overlay called #mm-blocker that covers the part outside the menu. When this overlay is clicked, the mmenu is closed. So what I did was to bind the click event (and other similar events) of this #mm-blocker and do whatever I want to change the state of my close button.

// if user clicks outside the mmenu, change the state of mmenu-btn
$('#mm-blocker').on('click mousedown touchstart', function() {
  $('#mmenu-btn').removeClass('close');
});

This was my little trick. I hope it helps.