System Development: Must Have 3rd Party Library

Nasrul Hazim Bin Mohamad
► HTML ► HTML5 ►

System Development: Must Have 3rd Party Library

Dec

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, beautiful alert messages and even you can customize for login or registration modal.

DropzoneJS, similar to WordPress uploading Media.

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.

Bootstrap, CSS3, Development, HTML5, JavaScript, jQuery alert, dropzonejs, javascript, jquery, ply, prompt, sortable, Upload 0 Comment

Website Development – Front-end

Dec

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

Parallax
Carousel
Animate
Smooth Scrolling
Flat UI Design
Nice & Clean Icons
UI Framework
JavaScript Library with their extensions
Slider

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

Carousel – Owl Carousel
Parallax – Parallax.js
Animate – Animate.css
Smooth Scroll – see my post here
Fontello – include Font Awesome, Fontellico, etc.
Ui Framework – Bootstrap, Foundation
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.

Bootstrap, Development, FontAwesome, Foundation, HTML, HTML5, JavaScript, jQuery, Material Design animate, carousel, fontello, HTML5, parallax 0 Comment

Y2016

Dec

Year 2016, InsyaAllah, next year to be a year of sharing knowledge of what I’ve learnt so far. Following are the trainings I would like to conduct:

1. Mobile Apps Development with jQuery Mobile
2. Mobile Apps Development with Intel XDK (incoming)
3. API Development with Slim Framework (incoming)
4. PHP Basic / Advanced
5. Web Development with CakePHP 3 (incoming)
6. Web Development with Laravel 5 (incoming)
7. Web Development with Yii Framework 2 (incoming)
8. WordPress for Developers – Beginner Level
9. WordPress Theme Development
10. WordPress Plugin Development

Those status incoming, it’s the one I’m preparing the syllabus & materials, summarizing the process, and so on. Hope more things can be share other than mentioned above such as the tools I’ve used along the process of the development – Sublime Text 3, SQLYog, Putty, Git and so on

WordPress: Custom Post Type Slider

Nov

Getting Light Slider

Download Light Slider here.

Then extract the content, copy the img, js and css in src directory into your WordPress Plugin folder.

Include Light Slider JavaScript & CSS

wp_enqueue_style( 'light-slider-css', plugin_dir_url( __FILE__ ) . 'css/lightslider.css', array(), $this->version, 'all' );
wp_enqueue_script( 'light-slider-js', plugin_dir_url( __FILE__ ) . 'js/lightslider.js', array( 'jquery' ), $this->version, false );

Add Some Padding to the item and set link to white

<style type="text/css">
  .lslide {
    min-height: 250px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }
  .lSSlideOuter .lSPager.lSpg > li a {
    background-color: white !important;
  }
</style>

Getting posts

$posts = wp_get_recent_posts( ['numberposts' => 5,'category_name' => 'Announcement'], OBJECT );

The View Part

<?php $index = 0; ?>

<ul id="light-slider">
  <?php foreach ($posts as $key => $value): ?>
    <li>
      <h4 style="color:white !important;font-style: bold !important;"><?= $value->post_title; ?></h4>
      <p style="color:white !important;"><?= strip_tags($value->post_content, ['p','span']); ?></p>
      <a href="<?= $value->guid; ?>" style="color:white !important;text-decoration: underline;float: right;"><?php echo (get_locale() != 'ms_MY') ? 'Read More':'Baca Lagi'; ?></a>
    </li>
    <?php $index++; ?>
  <?php endforeach ?>
</ul>

Final Part: initialize the Light Slider

jQuery(document).ready(function($) {
    jQuery("#light-slider").lightSlider({auto:true,item:1,speed:1000});
});

Result

lkim-slider

WordPress Post Slider available here

Bootstrap, HTML5, jQuery, Wordpress jquery, light slider, plugin, wordpress 0 Comment

HTML5 & CSS3: Sticky Footer

Oct

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>

CSS, CSS3, HTML, HTML5 CSS3, HTML5, sticky footer 0 Comment

Bootstrap Studio: Demos

Oct

Bootstrap Studio, is a powerful web design tool for creating responsive websites using the Bootstrap framework.

Here are some screen shots that I have when working with it. An awesome desktop application, recommended for frond-end developer, reducing time spent for front-end development.

Carousel

Columns Sizing

Options for Columns

Similar to Chrome Developer Tools CSS Panel

For Dekstop

The Files

For Desktop

For Mobile

Clean Source Code Generated

Here are some samples that I’m able to create with Bootstrap Studios. Hope you guys enjoy it.

Source code available here

Here are the summary from my experience using Bootstrap Studio:

Reducing time spent for front-end development

Doing two job at one time – design & write codes

Lightweight and easy-going UI

Anyways, before you consider to buy Bootstrap Studio, please make sure that you’re understand how HTML5, CSS3, JavaScript works, and of course Twitter Bootstrap itself, else, you might get confusing or too dependent with the tool.

Happy Bootstrapping!

Bootstrap, HTML, HTML5, JavaScript, jQuery Bootstrap, bootstrap studio, CSS3, HTML5, javascript, jquery 0 Comment

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

Aug

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:

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

Important Articles:

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

Bootstrap DatePicker I18N – Malay

Jun

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

Reference: Bootstrap DatePicker I18N

Bootstrap, HTML, HTML5, JavaScript, jQuery Bootstrap, calendar, I18N, jquery 0 Comment

jQuery: Create Loading Indicator with ajaxSend & ajaxComplete

May

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:

CSS, CSS3, HTML, HTML5, JavaScript, jQuery css, html, javascript, jquery, loading 0 Comment

CakePHP 2.x: Pagination Element

May

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

References:

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

Bootstrap, CakePHP, CSS, HTML, HTML5 Bootstrap, CakePHP, pagination 0 Comment