Kresna Satya kresnasatya

🤫

Shh!

kresnasatya / primary-button.js

Created January 10, 2018 22:34

Custom elements lifecycle

	class PrimaryButton extends HTMLElement {

	// Wajib diisi ketika elemen dibuat atau ditingkatkan.
	// Berguna untuk inisialisasi state, setting event listener,
	// atau membuat shadow DOM.
	constructor() {...}

	// Dipanggil setiap kali elemen dimasukkan ke dalam DOM.
	// Berguna saat menjalankan setup kode (menarik resource atau rendering).
	connectedCallback() {...}

kresnasatya / adding-dom.js

Last active January 13, 2018 00:13

Adding DOM

	...
	connectedCallback() {
	this.innerHTML = '<strong>Foo bar</strong>';
	}
	...

kresnasatya / html-template.html

Created January 11, 2018 11:47

HTML Template

	<template id="template-author">
	<h2>Rijk</h2>
	<img src="..." alt="The author of this article (Rijk)" />
	</template>

kresnasatya / no-a11y-form.html

Last active January 13, 2018 13:12

Form with no a11y

kresnasatya / form-a11y-alternative-1.html

Created January 23, 2018 14:18

A11y form alternative 1

kresnasatya / form-a11y-alternative-2.html

Created January 23, 2018 14:25

A11y form alternative 2

kresnasatya / assosiated label alternative 1

Created January 24, 2018 13:04

	<label for="email">Email</label><br>
	<input id="email" type="email" name="email">

kresnasatya / assosiated label alternative 2

Created January 24, 2018 13:22

	<label>
	Email<br>
	<input type="email" name="email"><br><br>
	</label>

kresnasatya / contoh-trigger.php

Created February 10, 2018 07:51

Trigger php dan JS

	/* Controller */
	class Foo extends Controller {

	public function removeRequest() {
	print_r($_POST); // atau $_GET tergantung method yang kamu pakai untuk memicu script tadi
	// tujuannya membatalkan perintah berikutnya dan melihat hasil keluaran dari $_POST tadi.
	exit();
	$this->Your_model->permintaan2Delete($_POST);
	}
	}

kresnasatya / response-fetch.js

Created March 15, 2018 04:17

Contekkan pada saat fetch return response (json, text, whatever)

	let contentType = response.headers.get('content-type')
	if (contentType.includes('application/json')) {
	return response.json()
	} else if (contentType.includes('text/html')) {
	return response.text()
	} else {
	throw new Error(`Sorry, content-type ${contentType} not supported`)
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Form with no a11y</title>
	</head>
	<body>
	<form action="#">

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Form with a11y - Alternative 1</title>
	</head>
	<body>
	<form action="#">

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Form with a11y - Alternative 2</title>
	</head>
	<body>
	<form action="#">