Nasrul Hazim Bin Mohamad

Laravel: Minify HTML


Assalamualiakum / Hi,

Just a quick blog post this time.

As part of optimisation, it’s important to minify your JavaScript & CSS – this can be done with Laravel Mix.

But how about HTML?

Seen this?

Ugly HTML Codes

So that’s how it’s look like our generated HTML codes.

And how we going to change into this?

Minified HTML Codes

A simple middleware will do to minify our HTML.

Then register the middleware and you are good to go!

Just grab this the Laravel Page Speed, then you’re done!


Bootstrap Studio: 2.0.0 Review

Bootstrap Studio 2.0.0

Bootstrap Studio 2.0.0


Bootstrap Studio 2.0.0 has been released. New features have been added – as per screen shot below.

So, I’ve tested some of the new features – multiple CSS, pages and JavaScript. I’m trying to use Animate.css & WOW.js.

Here my review:

  1. PAGES – The pages are working great! with Duplicate features, that’s awesome! Except one thing – if one of your menu(for example) change, you need to update all the pages – workaround make sure you use custom components so that you can pull / push any changes to the component.
  2. STYLES – as what it mentioned – yes you can have multiple CSS! But I’m looking for to be able to import external CSS perfectly(currently I just copy-paste the animate.css, but it’s not working – have to export & update my animate.css)
  3. JavaScript – Again, importing JavaScript will be good(currently I’m copy-paste the WOW.js into new JavaScript) and the scripts is in alphabetical order! I hope I can manage my JavaScript position.

Below are some screenshots of the new Bootstrap Studio 2.0.0 and here the demo (with a little tweak to ensure animate.css & WOW.js are working) 🙂

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Pages

Bootstrap Studio 2.0.0: Pages

jQuery: Create Loading Indicator with ajaxSend & ajaxComplete


Referring to my earlier post jQuery: Show Loading…, a better way to show & hide loading icon – by binding to ajaxSend and ajaxComplete event.

The Html Markup

 <div id="loading" class="overlay-loading">
    <i class="loading-icon fa fa-5x fa-circle-o-notch fa-spin"></i>


.overlay-loading {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index: 2000;
.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;

The JavaScript

$(document).bind("ajaxSend", function(){
 }).bind("ajaxComplete", function(){


  1. Ajax Events
  2. JsFiddle
  3. FontAwesome

jQuery: Get Non-empty Text Area Inputs


Simple solutions to get non-empty text area inputs. Let say you have a list or text area like the following:

<textarea name="remark[about_us] id="remark-about_us"></textarea>
<textarea name="remark[about_us2] id="remark-about_us2"></textarea>
<textarea name="remark[about_us3] id="remark-about_us3"></textarea>
<textarea name="remark[about_us4] id="remark-about_us4"></textarea>
<textarea name="remark[about_us5] id="remark-about_us5"></textarea>
var remarks = $('[name^=remark]');
$.each( remarks, function( index, value ){
	var remark = $.trim($('#';
	if(remark.length != 0) { 
		console.log( + ' - ' + value.value);
	} else {
		console.log( + ' - empty');

Here a sample I have on my current working project.

Get Non-Empty Text Area

DomPDF: Production Ready Configuration


DomPDF – Production Ready Configuration


  • Version: 5.3 and above
  • Settings: allow_url_fopen
  • Extensions: MBString (Installation), GD (Installation), DOM(enabled by default)

DomPDF Configuration / Usage

  • Enable Remote – def("DOMPDF_ENABLE_REMOTE", true);
  • Read/Write access to the DOMPDF_TEMP_DIR
  • Use Absolute URL
  • Use Full Document Root or Relative (if you’re still unable to view the image)
  • Use JPEG

UPDATE (2015-02-17): Security Issues on allow_url_fopen or Is allow_url_fopen safe?

Bootstrap: Show and Hide Loading Icon in Modal (option Remote used)



  1. Need to load remote content
  2. Need to display a loading indicator
  3. Need to ensure each time modal display, it’s request new modal body content

Following are the solutions, however…

I’m looking for solutions using event handler instead of using a timer, .change() in jQuery does not monitor the html value change.

&lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-header&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Ă—&lt;/button&gt;
    &lt;h3&gt;Details&amp;nbsp; &lt;img src=&quot;/img/loading-tiny.gif&quot; alt=&quot;loading...&quot; id=&quot;modal-loading&quot; class=&quot;hidden&quot;&gt;&lt;/h3&gt;
  &lt;div id=&quot;modal-body&quot; class=&quot;modal-body&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;modal-footer&quot;&gt;&lt;/div&gt;

&lt;a onclick=&quot;viewRemoteModal()&quot;&gt;View Modal&lt;/a&gt;
var t; // a timer variable
function viewRemoteModal() {
    $('#myModal .modal-body').removeData(); // clean up modal body content
    $('#modal-loading').removeClass('hidden'); // display the loading icon
    t = setInterval(function(){
        // check if modal body is not empty, hide loading icon
        // time interval of 500ms to check the modal body content
        if($('#myModal .modal-body').html() != '')
    // open up modal using remote option
        'remote': '',
        'show': true

GeoServer – GetFeatureInfo Template Data Model (structure)


Extend from this GeoServer – Custom Get Feature Info Display

Knowledge requirement – Freemaker

The standard template files is header.tpl, content.tpl, footer.tpl.

header.tpl usually where JavaScript, CSS, meta tag, title placed here.

footer.tpl where you put your HTML page footer, Copyright, etc.

content.tpl where we going to iterate through all the features to display interactive UI. But here, I’m going to explain the structure of all available variables.

features (array of Feature)
		- fid
		- typeName
		- attributes
			-&gt; name
			-&gt; type
			-&gt; isGeometry
			-&gt; value
		- type
			-&gt; name
			-&gt; title
			-&gt; abstract
			-&gt; description
			-&gt; keywords
			-&gt; metadataLinks
			-&gt; SRS
			-&gt; nativeCRS
type (object of Feature Map)
	- name
	- attributes
		-&gt; name
		-&gt; type
		-&gt; isGeometry

Accessing the variables as following:

&lt;!-- Accessing Feature Type Name --&gt;

&lt;!-- Accessing Features at index 0 and assign to a variable named feature --&gt;
&lt;#assign feature = features[0]&gt;

&lt;!-- Get feature's attributes values and assign to a variable named attrs --&gt;
&lt;#assign attrs = feature.attributes&gt;

&lt;!-- Display an attribute --&gt;

The result may display as below:

This is type name

some field name value


Fullscreen Pageflip Layout | Codrops


Putting CSS Clip to Work: Expanding Overlay Effect | Codrops