Nasrul Hazim Bin Mohamad

System Development: Must Have 3rd Party Library

Dec
22

A list of useful libraries used for system development – such as uploading, sorting, beautiful alert messages.

So, you don’t have to stick to those old schools methods for all the above. ūüôā

ply

Ply, beautiful alert messages and even you can customize for login or registration modal.

DropzoneJS, similar to WordPress uploading Media.

DropzoneJS, similar to WordPress uploading Media.

sortable

Sortable, useful when it’s come to sort out your staff list for instance, or probably you have a list of products need to be sort.

Website Development – Front-end

Dec
20

I’ve been working recently on what’s the basic / features used in most websites in 2015. Here is the list:

  1. Parallax
  2. Carousel
  3. Animate
  4. Smooth Scrolling
  5. Flat UI Design
  6. Nice & Clean Icons
  7. UI Framework
  8. JavaScript Library with their extensions
  9. Slider

From all of features above can be achieve by using following plugins/extension/library:

  1. Carousel – Owl Carousel
  2. Parallax – Parallax.js
  3. Animate – Animate.css
  4. Smooth Scroll – see my post here
  5. Fontello – include Font Awesome, Fontellico, etc.
  6. Ui Framework – Bootstrap, Foundation
  7. Slider – Light Slider

In 2016, I think most of the above still remain use.

A bit of reading just now Рprobably my next project will use Angular Material.

Slide in Elements

Dec
17

CSS

.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

jQuery

$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});

Reference: Bootstrap Theme “Company”

CSS: Custom Scrollbar

Nov
22

custom-scrollbar

/* Let's get this party started */
::-webkit-scrollbar {
    width: 9px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background: rgba(242,242,242,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    cursor: pointer !important;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(242,242,242,0.3); 
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(242,242,242,0.5); 
}

Reference: Custom Scrollbar

HTML5 & CSS3: Sticky Footer

Oct
27
Sticky Footer

Sticky Footer

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>kklw</title>
    <link rel="stylesheet" href="./embed/bootstrap/default/bootstrap.min.css" />
    <link rel="stylesheet" href="./embed/bootstrap/fonts/font-awesome.min.css" />
</head>

<body>

<div id="wrapper">

<header></header>


<div id="content"></div>


<div id="footer"></div>

    </div>

</body>

</html>
div#wrapper{
  min-height:100%;
  position:relative;
  background-color:blue;
}

body{
  padding:0;
  height:100%;
  background-color:grey;
}

div#content{
  padding-bottom:200px;
}

div#footer{
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  left:0;
  background-color:black;
}

header{
  width:100%;
  min-height:200px;
  background-color:red;
}

html{
  height:100%;
  margin:0;
}

Source code: <a href=”https://github.com/nasrulhazim/bootstrap-studio-samples/tree/master/sticky-footer”>Sticky Footer</a>

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit –¬†https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration –¬†https://bit.ly/training-mobile-app-android-config
  3. API Template –¬†https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration –¬†http://bit.ly/android-config-xml
  3. Chrome Device Mode –¬†http://bit.ly/chrome-device-mode

 

Bootstrap DatePicker I18N – Malay

Jun
24

Setting up for Malay Language. Copy & paste the following, save it as bootstrap-datepicker.my.js and include in your HTML pages as needed.

$.fn.datepicker.dates['my'] = {
    days: ["Ahad", "Isnin", "Selasa", "Rabu", "Khamis", "Jumaat", "Sabtu"],
    daysShort: ["Ahd", "Isn", "Sel", "Rab", "Kha", "Jum", "Sab"],
    daysMin: ["Ah", "Is", "Sl", "Rb", "Kh", "Jm", "Sa"],
    months: ["Januari", "Februari", "Mac", "April", "Mei", "Jun", "Julai", "Ogos", "September", "Oktober", "November", "Disember"],
    monthsShort: ["Jan", "Feb", "Mac", "Apr", "Mei", "Jun", "Jul", "Ogo", "Sep", "Okt", "Nov", "Dis"],
    today: "Hari Ini",
    clear: "Bersihkan"
};

Sample usage:

$('.input-daterange').datepicker({
    language: 'my',
    format: "MM yyyy",
    startDate: "Januari 2000",
    minViewMode: 1
});
Bootstrap DatePicker - Malay

Bootstrap DatePicker – Malay

Reference: Bootstrap DatePicker I18N

jQuery: Create Loading Indicator with ajaxSend & ajaxComplete

May
27

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>
 </div>

The CSS

.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(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

References:

  1. Ajax Events
  2. JsFiddle
  3. FontAwesome

CakePHP 2.x: Pagination Element

May
25

Being working on Bootstrap Pagination with CakePHP. Here the final one. Use it as you needed.

References:

  1. CakePHP 2.x Pagination
  2. Bootstrap Pagination
  3. CakeDC Users
<nav>
  	<ul class="pagination">	
  	<?php
		echo $this->Paginator->prev('< ' . __d('users', 'previous'), array('tag' => 'li'), null, array('disabledTag' => 'span', 'class' => 'disabled'));
		echo $this->Paginator->numbers(array(
			'separator' => '',
			'tag' => 'li',
			'currentTag' => 'span',
			'currentClass' => 'active'
		));
		echo $this->Paginator->next(__d('users', 'next') . ' >', array('tag' => 'li'), null, array('disabledTag' => 'span', 'class' => 'disabled'));
	?>
	</ul>
</nav>

Phalcon: Multiple-Module Skeleton

Mar
20

Assalamualaikum,

I’ve been learning Phalcon Framework recently and end up built a Multiple-Module Skeleton app – basically to ease development process to manage modules. Looking forward to add in more features. I have it on GitHub.

I have the directory structure as follow:

Phalcon - Multi Modules Structure - NHM - 1.0 - 20150313

Phalcon – Multi Modules Structure – NHM – 1.0 – 20150313

Hope to get some feedbacks.

Jazakumullahu khairan.