codebubb codebubb

🎯

Focusing

codebubb / package.json

Created October 16, 2020 10:57

Parcel JS package file

	{
	"name": "parcel-example",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"serve": "parcel serve src/index.html"
	},
	"keywords": [],
	"author": "",

codebubb / styles.scss

Last active October 16, 2020 12:24

Parcel JS styles

	h1 {
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 50px;
	}

codebubb / Button.js

Created October 16, 2020 11:51

ParcelJS Button Event

codebubb / app.js

Last active October 16, 2020 11:55

ParcelJS App JS

	import { btnEvent } from './Button';

	document
	.getElementById('btn')
	.addEventListener('click', btnEvent);

codebubb / package json

Last active October 16, 2020 12:18

ParcelJS Build

	{
	"name": "parcel-example",
	...
	"scripts": {
	"serve": "parcel serve src/index.html",
	"build": "parcel build --no-source-maps src/index.html"
	},
	...
	}

codebubb / index.html

Created October 16, 2020 12:33

Parcel JS Index output

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ParcelJS</title><link rel="stylesheet" href="/styles.173a965c.css"></head><body> <h1>Hello from Parcel!</h1> <button id="btn">Click Me</button> <script src="/app.700f0921.js"></script>
	</body></html>

codebubb / app.ts

Created October 16, 2020 12:51

ParcelJS TypeScript

	import { BtnEvent } from './Button';

	let btnElem: HTMLElement;
	btnElem = document
	.getElementById('btn');
	btnElem.addEventListener('click', BtnEvent);

codebubb / index.html

Created October 16, 2020 12:52

ParcelJS TypeScript HTML

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ParcelJS</title>
	<link rel="stylesheet" href="scss/styles.scss">
	</head>
	<body>
	<h1>Hello from Parcel!</h1>

codebubb / beacon-01-request-onunload.js

Last active October 28, 2020 09:13

Beacon and Page Visibility API

	window.addEventListener('unload', async () => {
	await fetch('/log', { method: 'POST', body: JSON.stringify({ data: 'test' }) });
	});

codebubb / beacon-02-sendBeacon.js

Last active October 28, 2020 09:11

Beacon and Page Visibility API

	window.addEventListener('unload', () => {
	navigator.sendBeacon('/log', JSON.stringify({ data: 'test' });
	});