CSS center

Centering element using CSS

To make the object have vertical and horizontal center we can use 2 option, position absolute and flex. Position absolute will be good for centering simple object, but it will be complicated when using it in object who has dynamic height, that why we will use flex for that.
Below is the sample code for absolute and flex

Centering using position absolute:

See the Pen CSS Center Absolute by hari (@zenasen) on CodePen.

Centering using Flex

See the Pen CSS Center flex by hari (@zenasen) on CodePen.

Wordpress Ajax

How to use ajax in wordpress.

In this post I will explain how to create simple ajax function in wordpress. The ajax function will send json data as string.

Enqueue the js file

We create the js file with file name script.js.  What important in this script is localize the script. The ajax will not working if we not localize the script. There is 2 parameter we need to caution. First is myAjax and the second is ajaxurl both two parameters will be called in our js script.

 
wp_enqueue_script( 'my-script-js', get_template_directory_uri() . '/assets/script.js', array(), '01', true );
wp_localize_script('my-script-js', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

Create js function

Here we will create js function that send json data to php. We will convert json to string, using JSON.stringify. Here is the code:

 
/*-- Json Test --*/
$("#test_json").click(function (e) {
 e.preventDefault();
 var json_data = [{
  "id": 1,
  "first_name": "Rancell",
  "last_name": "Byrkmyr"
 }, {
  "id": 2,
  "first_name": "Ray",
  "last_name": "Hinckes"
 }, {
  "id": 3,
  "first_name": "Cathyleen",
  "last_name": "Crufts"
 }];
 console.log(json_data);

 var json_data_str = JSON.stringify(json_data);
 console.log(json_data_str);

 var data = {
  action:'test_ajax',
  data_json: json_data_str,
 }

 $.ajax({
        type: "post",
        url: my_Ajax.ajax_url,
        data: data,
        dataType: "json",
        success:function(response){
           console.log(response);
        },
        error: function(errorThrown){
           console.log(errorThrown);
        } 
    });

})
/*-- Json Test End  --*/

There is some important thing that we need to have a note:
1. The url we use in ajax is set when we localize the script.
2. action key inside data will be used to call function on the php file.

Create function

Now we will define the function in php that will be called by the js.
we add 2 action wp_ajax_test_ajax and wp_ajax_nopriv_my_action and the function name will be test_ajax_fun. The action name must start with wp_ajax_ and wp_ajax_nopriv_ continued with action name that we use on the javascript. wp_ajax_test_ajax is used when logged in and wp_ajax_nopriv_test_ajax when you not logged in.

add_action("wp_ajax_test_ajax", "test_ajax_fun");
add_action("wp_ajax_nopriv_test_ajax", "test_ajax_fun"); 
function test_ajax_fun(){
 $data_json_str = $_POST['data_json'];
 $data_json_str = stripslashes($data_json_str);
 $data_json_obj = json_decode($data_json_str, true);
 $data_return->status = "new data";
 $data_return->our_data = $data_json_obj;
 echo json_encode($data_return);
 wp_die();
}

you can check this ajax by using inspect on chrome and choose Network.
below is the screenshot:

Create Filter using Algolia

Algolia is a hosted search engine. To make it simple we need the example for that. Let say we have a bunch of data, and hard for we to search all of our data. Then Algolia is the solution. Algolia offering full-text, numerical, and faceted search, capable of delivering real-time results from the first keystroke. The next question is, how we Algolia do that?

Mobile Menu with Flex

Here is the simple menu using flex.

See the Pen NEzKJK by hari (@zenasen) on CodePen.

The explanation of the code:

To make the full height menu, the secret is flex.

What we need first is the parent to have height 100%;

html, body{
   height:100%;
   padding:0px;
   margin:0px;
}

The main point is parent (ul) should have style :
display:flex;
flex-direction:column;

flex-direction => make the li element become going to down or become a row

For the children(li)< we need to give style :
flex: 1;

flex:1 => this code make the li element have the full height of the parent with the even distribution for each li element

Standard html menu :

The Style :

html, body{
 height:100%;
 padding:0px;
 margin:0px;
}
.menu-container{
 width:350px;
 height:100%;
 background:#eee;
 padding:10px;
 box-sizing:border-box;
}
.menu{
 height:100%;
 list-style:none;
 padding-left:0px;
 margin:0px;
 display:flex;
 flex-direction:column;
 overflow-Y:scroll
}
.menu::-webkit-scrollbar {
 width:4px;
}
.menu::-webkit-scrollbar-track {
 background:rgba(0,0,0,0.3);
}
.menu::-webkit-scrollbar-thumb {
 background-color: #000;
}
.menu>li{
 border:1px solid #000;
 border-bottom:0px;
 box-sizing:border-box;
 position:relative;
 flex: 1;
 transition:all ease 0.5s;
 min-height:70px;
}
.menu>li:last-child{
 border-bottom:1px solid #000;
}
.menu>li>a{
 display:block;
 width:100%;
 height:70px;
 line-height:50px;
 padding:10px;
 box-sizing:border-box;
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 transition:all ease 0.5s;
}
span.caret{
 display:block;
 min-height:50px;
 height:100%;
 width:50px;
 background:yellow;
 position:absolute;
 top:0px;
 right:0px;
 transition:0px;
 transition:all ease 0.5s;
 cursor:pointer;
}
.menu>li.aktif>a{
 height:50px;
 line-height:30px;
 top:0px;
 transform:translateY(0%);
 z-index:3;
}
.menu>li.aktif>span.caret{
 height:50px;
 z-index:4;
}
.submenu{
 position:absolute;
 top:50px;
 max-height:0px;
 overflow:hidden;
 transition:all ease 0.5s;
 background:#00000055;
 width:100%;
 box-sizing:border-box;
}
.menu>li:nth-of-type(2) .submenu.aktif{
 max-height:126px;
}
.menu>li.aktif:nth-of-type(2){
 min-height:176px;
}
.menu>li:nth-of-type(3) .submenu.aktif{
 max-height:90px;
}
.menu>li.aktif:nth-of-type(3){
 min-height:140px;
}

The Javascript :

$( document ).ready(function() {
  $("span.caret").click(function(){
    var parent_li = $(this).parent("li");
    var submenu = $(this).next();
    if(parent_li.hasClass("aktif") === false){
      parent_li.addClass("aktif");
      setTimeout(function(){
        submenu.addClass("aktif");
      }, 500);
    }else{
      submenu.removeClass("aktif");
      setTimeout(function(){
        parent_li.removeClass("aktif");
      }, 500);
    }
  });
});

Simple Fixed Header on Srolling

With all the website project I've been working, I already seen something in common. One of those thing is a header. So, here is the 2 header with simple fixed header on scrolling.

1. Header Hide

This header is hide when we scroll the page to bottom by 50px from top, but when you scrolling up, it will shown. I like the header, since we can see all the page without disturbed by header menu, But, some time I miss the header. lol :D

Here is the code :

See the Pen Scrolling Header #1 by hari (@zenasen) on CodePen.

2. Header Shrink

This header is shrink or more tight when we scroll the page to bottom by 50px, but when you scrolling up till you reach the top, the header will grow larger. 

Here is the code :

See the Pen Scrolling Header #2 by hari (@zenasen) on CodePen.

How To Create Widget in Siteorigin Wordpress

Paste this code in Theme > function.php

// this for hook 
function my_awesome_widgets_collection($folders){
    $folders[] = dirname(__FILE__).'/../widgets/';
    return $folders;
}
add_filter('siteorigin_widgets_widget_folders', 'my_awesome_widgets_collection');


// this for add new widget group
function imm_add_widget_tabs($tabs) {
    $tabs[] = array(
        'title' => __('Imm Widgets', 'imm_widget'),
        'filter' => array(
            'groups' => array('imm_widget')
        )
    );

    return $tabs;
}
add_filter('siteorigin_panels_widget_dialog_tabs', 'imm_add_widget_tabs', 20);

hook.php is place where i code on top.

widgets folder is place for all widget

the widget we use as example is imm-carousel

Folder Structure.

 
//***
<?php
/*
Widget Name: Imm Carousel
Description: Carousel
Author: Hari Seanli
Author URI: https://www.islandmediamanagement.com/
Widget URI: https://www.islandmediamanagement.com/,
Video URI: https://www.islandmediamanagement.com/
*/

class Imm_Carousel_Widget extends SiteOrigin_Widget {

 function __construct() {
     //Here you can do any preparation required before calling the parent constructor, such as including additional files or initializing variables.

     //Call the parent constructor with the required arguments.
     parent::__construct(
         // The unique id for your widget.
         'imm-carousel',

         // The name of the widget for display purposes.
         __('Imm Carousel Widget', 'imm-carousel-widget-text-domain'),

         // The $widget_options array, which is passed through to WP_Widget.
         // It has a couple of extras like the optional help URL, which should link to your sites help or support page.
         array(
             'description' => __('A hello world widget.', 'hello-world-widget-text-domain'),
             'help'        => 'http://example.com/hello-world-widget-docs',
             'panels_groups' => array('imm_widget')
         ),

         //The $control_options array, which is passed through to WP_Widget
         array(
         ),

         //The $form_options array, which describes the form fields used to configure SiteOrigin widgets. We'll explain these in more detail later.
         array(
             'text' => array(
                 'type' => 'text',
                 'label' => __('Hello world! goes here.', 'siteorigin-widgets'),
                 'default' => 'Hello world!'
             ),
         ),

         //The $base_folder path string.
         plugin_dir_path(__FILE__)
     );
 }

 function get_template_name($instance) {
     return 'imm-carousel-template';
 }

 function get_template_dir($instance) {
     return 'hw-templates';
 }

}
siteorigin_widget_register('imm_carousel_widget', __FILE__, 'Imm_Carousel_Widget');



?>

<div>
    <?php echo wp_kses_post($instance['text']) ?>
</div>

Json Object

Json object in Js Example :

var datapost = {'id':'01'};
datapost.nama = "i wayan xxx";

when you call it

 console.log(datapost);

it will shown like below

{
id: "01", 
nama: "i wayan xxx"
}

Create Array In Javascript

Simple Array example :

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon", "Pineapple");

Array with key

var ska_bidang_data = [{id:"00",nama_bidang:"ARSITEKTUR"}];
ska_bidang_data.push({id:"01",nama_bidang:"ARSITEKTUR"});
ska_bidang_data.push({id:"02",nama_bidang:"SIPIL"});

Add Bootstrap CSS in Wordpress Plugin

To add css to wordpress is simple.. just use wp_enqueue_style 

example :

wp_enqueue_style( 'wp-astti-style-bootstrap', plugins_url('lib/bootstrap-4/css/bootstrap.min.css', __FILE__));

but the problem when use enqueue to boostrap css like that is the css will effect other element and make wordpress admin page look ugly.
Solution :
solution for this problem is wrapper.

Looping Ajax

from the latest project i do with shopify, i need to use ajax inside looping to add products to cart.
Basically we need product id or product variant id and quantity.
here is the code from shopify to insert product to cart.

jQuery.post('/cart/add.js', {
  quantity: 1,
  id: 794864229,
  properties: {
    'First name': 'Caroline'
  }
});




Review Mi5s

Mi5S merupakan salah satu varian dari mi5 yang memiliki kemampuan lebih. Pada versi mi5s ini terjadi beberapa peningkatan pada beberapa sektor :

	Mi5	Mi5S
CPU	Dual-core 1.8 GHz Kryo & dual-core 1.6 GHz Kryo	Quad-core 2.15 GHz & 1.6 GHz
GPU	Adreno 530	Adreno 530
Chipset	Snapdragon 820	Snapdragon 821

Sedangkan pada sektor kamera terjadi penurunan resolusi dimana yang awalnya mi5 dengan resolusi 16 MP dengan 4 axis Optical Image Stabilization sedangkan mi5s dengan resolusi 12MP. Hal ini dikarenan perubahan sensor kamera.

Mi5 menggunkaan sensor Sony Exmor R IMX298

Mi5s menggunakan sensor  Sony Exmor R IMX378

Sensor kamera yang digunakan  oleh mi5s memang  cuman 12.2 MP saja namun ukuran pixelnya cukup lebar mencapai 1.55 μm. Bandingkan dengan 1.12 μm yang digunakan oleh Mi5.

Dengan adanya sensor ini seharusnya mi5s dapa menyerap cahaya lebih pada saat foto malam, namun dalam foto di bawah dapat di lihat hasil kamera malam tidak cukup baik. belum ada yang bisa mengalahkan samsung s7 dalam foto low light (tergantung pengguna).. :D

Berikut adalah contoh foto dari xiaomi mi5s :

Night Shoot

Auto

Auto

Auto

Raw dan Light Room app

Raw & morning sky effect

HDR

HDR

HDR

Auto

HHT

Review Mi 4

Review Mi4

Hape murah berkualitas ? xiaomi Mi4 saja.

Belakangan hp dengan merek xiaomi sangat di gandrungi di tanah air kita Indonesia. Salah satu produknya adalah Mi4. Mi4 merupakan salah satu produk flagship dari xiaomi. Produk ini dijual pertama kali tahun 2014 july kalo gx salah ya, dengan kisaran harga lebih dari 4juta.. wow..

Tapi sekarang 19 Desember 2016 harganya cuman... RP 1.750.000.  murah kan broh...

Nih, murah kan.. gue aja sampe ngiler.. Tapi... ini hape cuman punya single sim.. apa.. ia SINGLE SIM.. 2016 masih single SIM ? Tapi MURAH... namanya juga hape murah bro..

Gua ngelirik nih hape gara-gara hape gua Mi4i.. Rusak, padahal sayang banget sama tuh hape. Oya rusaknya bukan karena rusak sendiri ya. itu karena kabel charger yang konslet..  ini diakibatkan karena kabel chargernya sering ane tekuk.. satu lagi, kabel charger yang ane pakek bukan asli bawaan xiaomi.  Sekarang batoknya juga ikutan rusak, kalo ngecharge.. Lamaaaa banget. So, hati2 ya sob yang punya kabel charger kalo udah radak rusak.. mending ganti aja dari pada hape lo ikutan rusak.
jadi curhat.. hehehe....

perbandingan dari semua MI4, MI 4i, MI 4c, MI 4S. Dari hasil penelitian ane.. baca2 review lain, liat di youtube, Camera yang paling bagus tuh ada di MI4. kenapa ? mungkin karena sensor nya.. ?

untuk spesifikasi lengkapnya liat di bawah ya.?

Network	Technology	GSM / CDMA / HSPA / EVDO / LTE
	2G bands	GSM 850 / 900 / 1800 / 1900 - all versions
		CDMA 800 / 1900 - Telecom 3G model
	3G bands	TD-SCDMA - 4G model
		HSDPA 850 / 900 / 1900 / 2100 - Unicom 3G model, Telecom 3G model
		CDMA2000 1xEV-DO - Telecom 3G model
	4G bands	LTE band 38(2600), 39(1900), 40(2300) - 4G model
	Speed	HSPA 42.2/5.76 Mbps, LTE, EV-DO Rev.A 3.1 Mbps
	GPRS	Yes
	EDGE	Yes

Launch	Announced	2014, July
	Status	Available. Released 2014, August

Body	Dimensions	139.2 x 68.5 x 8.9 mm (5.48 x 2.70 x 0.35 in)
	Weight	149 g (5.26 oz)
	SIM	Micro-SIM

Display	Type	IPS LCD capacitive touchscreen, 16M colors
	Size	5.0 inches (~72.3% screen-to-body ratio)
	Resolution	1080 x 1920 pixels (~441 ppi pixel density)
	Multitouch	Yes
		- MIUI 5.0

Platform	OS	Android OS, v4.4.3 (KitKat), upgradable to v6.0.1 (Marshmallow)
	Chipset	Qualcomm MSM8974AC Snapdragon 801
	CPU	Quad-core 2.5 GHz Krait 400
	GPU	Adreno 330

Memory	Card slot	No
	Internal	16/64 GB, 3 GB RAM

Camera	Primary	13 MP, f/1.8, autofocus, LED flash, check quality
	Features	1/3" sensor size, 1.12µm pixel size, geo-tagging, touch focus, face/smile detection, panorama, HDR
	Video	2160p@30fps, 1080p@30fps, 720p@120fps, HDR, check quality
	Secondary	8 MP, f/1.8, 1080p@30fps

Sound	Alert types	Vibration; MP3, WAV ringtones
	Loudspeaker	Yes
	3.5mm jack	Yes
		- Active noise cancellation with dedicated mic

Comms	WLAN	Wi-Fi 802.11 a/b/g/n/ac, dual-band, Wi-Fi Direct, DLNA, hotspot
	Bluetooth	v4.0, A2DP
	GPS	Yes, with A-GPS, GLONASS, BDS
	Infrared port	Yes
	Radio	FM radio
	USB	microUSB v2.0, USB Host

Features	Sensors	Accelerometer, gyro, proximity, compass, barometer
	Messaging	SMS(threaded view), MMS, Email, Push Mail, IM
	Browser	HTML5
	Java	No
		- Fast battery charging: 60% in 30 min (Quick Charge 2.0) - MP4/DivX/XviD/WMV/H.264 player - MP3/WAV/eAAC+/FLAC player - Photo/video editor - Document viewer - Voice memo/dial/commands

Battery		Non-removable Li-Ion 3080 mAh battery
	Stand-by	Up to 280 h (3G)

Misc	Colors	Black, White
	SAR US	1.36 W/kg (head)
	Price group	5/10 (About 230 EUR)

Tests	Performance	Basemark OS II: 1324
	Display	Contrast ratio: 929 (nominal), 2.424 (sunlight)
	Camera	Photo / Video
	Loudspeaker	Voice 62dB / Noise 62dB / Ring 66dB
	Audio quality	Noise -91.6dB / Crosstalk -49.7dB
	Battery life	Endurance rating 68h

Create Treelist with column VB.net and DevExpress

First What we  Need is Devexpress, you can Download It Here

and VB.net.. i think you was install it..

okay, we start now.

first drag "TreeList" Control From ToolBox

after That Create Colum in Treelist like picture Below

after this double klik "Button 1"

and copy code below : 

 'RECURTION

    Private Sub InsertNodeChild(ByVal Parent As String, ByVal xtabel As DataTable, ByVal parentNode As TreeListNode)

        Dim lengthChildId = Parent.Length + 2

        Dim xdtrow() As DataRow = xtabel.Select("LEN(id) = " & lengthChildId & " AND substring(id,1," & Parent.Length & ") = " & Parent, "")

        For i = 0 To xdtrow.Length - 1

            TreeList1.AppendNode(New Object() {xdtrow(i).Item("id").ToString, xdtrow(i).Item("Nama").ToString, xdtrow(i).Item("Jumlah")}, parentNode)

            TreeList1.EndUnboundLoad()

            InsertNodeChild(xdtrow(i).Item("id").ToString, xtabel, parentNode.Nodes(i))

        Next

    End Sub

 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        ' DATA EXAMPLE =====

        Dim tb_0 As New DataTable

        tb_0.Columns.Add("id")

        tb_0.Columns.Add("Nama")

        tb_0.Columns.Add("Jumlah", GetType(Double))

        '=== LEVEL 1

        tb_0.Rows.Add(New Object() {"01", "kepala1", 100})

        tb_0.Rows.Add(New Object() {"02", "kepala2", 100})

        tb_0.Rows.Add(New Object() {"03", "kepala3", 100})

        tb_0.Rows.Add(New Object() {"04", "kepala4", 100})

        '=== LEVEL 2

        tb_0.Rows.Add(New Object() {"0101", "kepala11", 100})

        tb_0.Rows.Add(New Object() {"0102", "kepala12", 100})

        tb_0.Rows.Add(New Object() {"0103", "kepala13", 100})

        tb_0.Rows.Add(New Object() {"0104", "kepala14", 100})

        '=== LEVEL 3

        tb_0.Rows.Add(New Object() {"010101", "kepala111", 100})

        tb_0.Rows.Add(New Object() {"010102", "kepala1112", 100})

        tb_0.Rows.Add(New Object() {"010103", "kepala1113", 100})

        tb_0.Rows.Add(New Object() {"010104", "kepala1114", 100})

        '=== GET DATA FROM ALL

        Dim xdtrow() As DataRow = tb_0.Select("LEN(id) = 2", "")

        Dim ParentNothing As TreeListNode = Nothing

        TreeList1.Nodes.Clear()

        For i = 0 To xdtrow.Length - 1

            TreeList1.AppendNode(New Object() {xdtrow(i).Item("id").ToString, xdtrow(i).Item("Nama").ToString, xdtrow(i).Item("Jumlah")}, ParentNothing)

            TreeList1.EndUnboundLoad()

            InsertNodeChild(xdtrow(i).Item("id").ToString, tb_0, TreeList1.Nodes(i))

        Next

    End Sub

after that.. run the program and clik "Button 1"

it will become like this.. 

Or you can download it here

Thank you..

and sory for bad english

Membuat Fungsi Di vb.net

Membuat Fungsi Cek angka di VB.net

  Function ConvertAngka(ByVal angka As String)

        Dim hasil As Double = 0

        If IsNumeric(angka) = True Then

            hasil = CDbl(angka)

        Else

            hasil = 0

        End If

        Return hasil

 End Function

penggunan fungsi ini digunakan untuk mengecek. apakah variabel yg digunakan dapat di rubah menjadi angka atau tidak... jika berhasil maka fungsi ersebut akan akan menghasilkan angka, jika tidak maka fungsi akan menghasilkan 0

penggunaak fungsi di atas dapat di gunakan seperti contoh berikut :

Dim angka1 As Double = ConvertAngka(TextBox1.Text)

Membuat pergerakan karakter dengan flash

jadinya seperti ini..

download pergerakan dasar.rar

Cheat Pokemon Emerald di GPGP

ingin pokemon kalian kayak ini

atau kayak gini 

donload : Cheat Pokemon Emerald

untuk password kunjungi :  password

terima kasih.. :D

Need Password Butuh Password

butuh Password ?

Need Password ?

kunjungi link ini sekali lagi...  

visit this link one more time... 

Kunci

this is the password : http://hariseanli.blogspot.com/

thank you for your passion..

sorry.. :D

Metode serangan pada DNS server

Oleh karena cara kerja DNS yang sederhana dan tidak adanya metode otentikasi dalam system komunikasi dengan paket UDP, maka sangat memungkinkan seseorang untuk berpura-pura menjadi DNS resolver dan mengirimkan paket jawaban palsu dengan nomor identitas yang sesuai ke penanya sebelum paket jawaban dari DNS resolver resmi diterima oleh penanya. Dengan cara ini,

PNGERTIAN DNS SERVER

DNS (Domain Name System) atau Sistem Penamaan Domain adalah sebuah sistem yang menyimpan informasi tentang nama host maupun nama domain dalam bentuk basis data tersebar (distributed database) di dalam jaringan computer.