CKEditor 5 adding image upload plugin

CKEditor 5 is good because of easy installation and usage.

However when I tried to add image upload plugin, it wasn’t that easy.

I would like to share the tips how to add.

Below instruction was very helpful for figuring out how to:

  • Install CKEditor 5 classic
npm install --save @ckeditor/ckeditor5-build-classic 
yarn run build
  • Install image upload, simple upload plugin.
npm install --save @ckeditor/ckeditor5-upload 
npm install ckeditor5-simple-upload
  • Open src/ckeditor.js file and add below
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import SimpleuploadPlugin from 'ckeditor5-simple-upload/src/simpleupload'
  • After adding the plugin, run build command
yarn run build
  • Create test page.
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <script src="/adm/ckeditor_classic/ckeditor5-build-classic/build/ckeditor.js"></script>
  <div id="editor"></div>
var cb = function() { return (new Date()).getTime() }
    .create( document.querySelector( '#editor' ), {
      simpleUpload: {
        uploadUrl: {url:'/adm/ckeditor_classic/upload_image.php', headers:{ 'x-header':'myhead', 'x-header-cb': cb } }
    } )
    .catch( error => {
        console.error( error );
    } );

Vagrant error: failed to open /dev/vboxnetctl: No such file or directory

I haven’t used vagrant + virtualbox for a while and an error shows up when I tried to reuse.

I have googling about it and I found solution.

sudo /Library/StartupItems/VirtualBox/VirtualBox restart

But I got different error when I tried this.

sudo: /Library/StartupItems/VirtualBox/VirtualBox: command not found

And I have checked vagrant version.

vagrant version
Installed Version: 1.9.1
Latest Version: 2.2.3

I found my vagrant version is quite old. So I have downloaded new vagrant file and reinstalled. You can download updated version from

Also I have upgraded Virtualbox as well.

Then Vagrant start working as before.

$ vagrant up

It’s always good to have things are updated.

Optimize CSS asynchronous load

One of way to make website loading faster is CSS async load.
It need to use Javascript to load CSS after loading.

There’s a few steps to make it work.

1. Make css file to Json data format.
Let’s take this css file for example.
It contains css code like this.

@charset "UTF-8";

/* untitled-font-1 */
@font-face {
  font-family: "untitled-font-1";
  src:url("") format("embedded-opentype"),
    url("") format("woff"),
    url("") format("truetype"),
    url("") format("svg");
  font-weight: normal;
  font-style: normal;

[data-icon]:before {
  font-family: "untitled-font-1" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;


Let’s minify it from

@charset "UTF-8";[class*=" icon-"]:before,[class^=icon-]:before,[data-icon]:before{font-family:untitled-font-1!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:untitled-font-1;src:url(;src:url( format("embedded-opentype"),url( format("woff"),url( format("truetype"),url( format("svg");font-weight:400;font-style:normal}[data-icon]:before{content:attr(data-icon)}.icon-chevron-right:before{content:"\61"}.icon-chevron-left:before{content:"\62"}.icon-twitter-alt:before{content:"\64"}.icon-youtube:before{content:"\63"}.icon-facebook:before{content:"\65"}.icon-pinterest-circled:before{content:"\66"}.icon-search:before{content:"\69"}.icon-star-1:before{content:"\6b"}.icon-instagram:before{content:"\6c"}.icon-rss:before{content:"\68"}.icon-googleplus:before{content:"\67"}.icon-pinterest:before{content:"\6a"}.icon-remove:before{content:"\6d"}.icon-arrow-circle-right:before{content:"\6e"}.icon-bars:before{content:"\6f"}.icon-share-alt:before{content:"\70"}

It became much smaller.
Using editor, escape backslash (\) like this (\\). And then escape double quote (“) to (\”). Also escape slash (/) to (\/)

Then it will look like this.

@charset \"UTF-8\";[class*=\" icon-\"]:before,[class^=icon-]:before,[data-icon]:before{font-family:untitled-font-1!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:untitled-font-1;src:url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.eot);src:url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.eot?#iefix) format(\"embedded-opentype\"),url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.woff) format(\"woff\"),url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.ttf) format(\"truetype\"),url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.svg#1491933871) format(\"svg\");font-weight:400;font-style:normal}[data-icon]:before{content:attr(data-icon)}.icon-chevron-right:before{content:\"\\61\"}.icon-chevron-left:before{content:\"\\62\"}.icon-twitter-alt:before{content:\"\\64\"}.icon-youtube:before{content:\"\\63\"}.icon-facebook:before{content:\"\\65\"}.icon-pinterest-circled:before{content:\"\\66\"}.icon-search:before{content:\"\\69\"}.icon-star-1:before{content:\"\\6b\"}.icon-instagram:before{content:\"\\6c\"}.icon-rss:before{content:\"\\68\"}.icon-googleplus:before{content:\"\\67\"}.icon-pinterest:before{content:\"\\6a\"}.icon-remove:before{content:\"\\6d\"}.icon-arrow-circle-right:before{content:\"\\6e\"}.icon-bars:before{content:\"\\6f\"}.icon-share-alt:before{content:\"\\70\"}

Let’s wrap this with this javascript function. callbackCSS({"data":"json content goes here"})

Final myfontastic.json file look like this.

callbackCSS({"data":"@charset \"UTF-8\";[class*=\" icon-\"]:before,[class^=icon-]:before,[data-icon]:before{font-family:untitled-font-1!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:untitled-font-1;src:url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.eot);src:url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.eot?#iefix) format(\"embedded-opentype\"),url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.woff) format(\"woff\"),url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.ttf) format(\"truetype\"),url(https:\/\/\/eNzJBJA24QdpMtRZDEqjmX\/fonts\/1491933871.svg#1491933871) format(\"svg\");font-weight:400;font-style:normal}[data-icon]:before{content:attr(data-icon)}.icon-chevron-right:before{content:\"\\61\"}.icon-chevron-left:before{content:\"\\62\"}.icon-twitter-alt:before{content:\"\\64\"}.icon-youtube:before{content:\"\\63\"}.icon-facebook:before{content:\"\\65\"}.icon-pinterest-circled:before{content:\"\\66\"}.icon-search:before{content:\"\\69\"}.icon-star-1:before{content:\"\\6b\"}.icon-instagram:before{content:\"\\6c\"}.icon-rss:before{content:\"\\68\"}.icon-googleplus:before{content:\"\\67\"}.icon-pinterest:before{content:\"\\6a\"}.icon-remove:before{content:\"\\6d\"}.icon-arrow-circle-right:before{content:\"\\6e\"}.icon-bars:before{content:\"\\6f\"}.icon-share-alt:before{content:\"\\70\"}"})

And define this javascript function on the top of your page. You can include this in common javascript file on the header.

var LSYE=function(h){var s=document.createElement('script');s.src=h;document.getElementsByTagName('head')[0].appendChild(s);};
var callbackCSS=function(d){var o=document.createElement("style");;document.getElementsByTagName('head')[0].appendChild(o);};

LYSE function is put javascript to header async way.
And callbackCSS will put css data to header after that.

So you can put this line at the bottom of page, this css will be loading asynchronous way.


You can add async attribute to loading file during page load.

<script async>LSYE("myfontastic.json");</script>

Or add defer attribute to loading file after page load finished.

<script async>LSYE("myfontastic.json");</script>

In my case, this css file contains icons for the site. So icons are appeared just few seconds later, but shows totally fine.
This will be helpful when the file is not loading or slow. So this doesn’t affect to site speed.


Upgrade PHP5 to PHP7

I have older server to upgrade to PHP7.

PHP7 has better performance and cleaner library.
But some of functions are depricated like ereg_replace, ereg and also mysql is not supported anymore. Instead, preg_replace, preg_match and mysqli are available.

So some of php programming may not work and need to be updated.

To upgrade, use below commands:

sudo add-apt-repository ppa:ondrej/php
sudo apt-get install php7.0 libapache2-mod-php7.0
sudo a2dismod php5
sudo a2enmod php7.0
sudo apachectl restart

It’s quite simple, but I had to change those depricated functions.
Especially mysqli’s usage is slightly different than mysql.

To connect db:

$this->lid = mysqli_connect(DB_HOST,DB_USER,DB_PWD,DB_NAME);

Select DB:



$this->qid = mysqli_query($this->lid, $q);

Fetch Array:

$this->record = mysqli_fetch_array($this->qid);

Upgrading to PHP7 wasn’t night mare, it was quite simple and easy.

Get JSON data using CURL

There’s lots of communication using json, this is useful PHP function for getting JSON data using CURL function.

  $args = '{"tid":"'.$taxonomy_id.'"}';
  $content = curl_request('http:/', $args, 'POST');
if (!function_exists('get_url_data_curl')) {
  function get_url_data_curl($url, $args='', $httpmethod){
      if (function_exists('curl_init') && function_exists('curl_setopt')){
      	$ch = curl_init();
      	curl_setopt($ch, CURLOPT_URL, $url);
      	curl_setopt($ch, CURLOPT_HTTPHEADER,array('Content-Type:application/json'));     
      	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
      	curl_setopt($ch, CURLOPT_TIMEOUT, 10);
      	if(strcmp($httpmethod, "POST") == 0){
      		curl_setopt($ch, CURLOPT_POST, true);
      		curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $httpmethod); 
      	if(strcmp($httpmethod, "POST") == 0 || strcmp($httpmethod, "PUT") == 0 && !empty($args)){
      			curl_setopt($ch, CURLOPT_POSTFIELDS, $args);
      	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
      	$result = curl_exec($ch);
      	return $result;
    }catch(Exception $e){
      $error = array(
      	'status' => 'failed',
      	'errorMessage' => $e->getMessage(),
      	'errorCode' => '500'
      return json_encode($error);

How to use is simple.

$args = '{"tid":"'.$taxonomy_id.'"}';
$content = curl_request('http:/', $args, 'POST');


Put $args variable what you want to pass through.

Method can be either GET or POST.

Easy and fast git commit

I am sick and tired with typing git commands.

So I decided to use short and quick for git.

First create file

#!/bin/bash -e
git pull
git add . -A
git commit -m "$commit_message"
git push

Then add short command on .bash_profile

alias commit="~/path_to_sh_file/"

Now, it’s ready to use. Restart terminal.

And just type like this,

commit 'this is test commit'

Works great, I can save 10 second per commit.

Usually I push the changes like 100 times, then I save 1000 seconds.

1000 seconds / 60 = 16 mins

I can save 16 mins per day!


Dynamic grid layout using Freewall Javascript

Recently I have created gallery page. And I wanted to have something cool looking and save space for thumbnails.

Not like this:

Not organized gallery layout

But instead like this dynamic layout style:

Dynamic block layout using Freewall

The images are keep moving and save space while I am resizing. Isn’t it cool?

There’s couple of Javascript developed for dynamic layout: Freewall, Mansonry, uikit dynamic grid, Shapeshift and etc.

I liked Freewall the most, it is simple to use.

Here’s an example page that I have created.

It is very easy to use. I put setTimeout() function and trigger function again because there’s overlapping image problem. I guess it is because the images are not loaded fully and it doesn’t scale the size of each blocks.

If it is just html block then we don’t need.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Freewall Testing</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="freewall.js"></script>
<style type="text/css">
body { background: rgba(231, 231, 231, 0.43);}
.free-wall { margin: 15px; }
.brick { width: 221.2px; }
.info { padding: 15px; color: #333; }
.brick img { margin: 0px; padding: 0px; display: block; }

<div class="free-wall" id="freewall">
    <?php foreach($vars['items'] as $item){ ?>
    <div class="brick">
      <img src="<?php echo $item['src']?>" width="100%">

    <?php } ?>
<script type="text/javascript">
  var wall = new Freewall("#freewall");
    selector: '.brick',
    animate: true,
    cellW: 200,
    cellH: 'auto',
    onResize: function() {
$( document ).ready(function() {	



“Flows like water. Sweet like honey”