Dylan Piercey DylanPiercey

Don't break the web. 👾

DylanPiercey / index.marko

Last active August 18, 2020 18:00

Marko gif keyboard component

	static const API_KEY = "ENTER YOUR API KEY";

	static const GIF_LIMIT = 7;

	class {
	onCreate() {
	this.state = {
	page: 0,
	search: "",
	images: [],

DylanPiercey / index.marko

Created August 18, 2020 17:23

Simple Marko counter component.

	<div.count class=(state.count > 0 ? "positive" : "negative")>
	${state.count}
	</div>

	<button on-click('increment', -1)>
	-1
	</button>

	<button on-click('increment', 1)>
	+1

DylanPiercey / client-side-await.marko

Last active February 23, 2021 00:20

	static var isBrowser = typeof window !== "undefined";

	static var LOADING = 0;

	static var RESOLVED = 1;

	static var REJECTED = 2;

	static function isPromise(val) {
	return val && val.then;

DylanPiercey / issue.marko

Created March 17, 2020 14:27

Marko-issue-1532

-- Email de test ! C'est génial ça (test accents)

DylanPiercey / automatically-add-browser-plugin.js

Last active February 2, 2020 17:58

Options for the Marko Rollup server side plugin

	import marko from "@marko/rollup";

	const commonPlugins = [...];

	export default {
	input: "src/index.js",
	plugins: [
	marko.server({
	browser: {
	// before passing to rollup would add the Marko plugin in hydrate mode.

DylanPiercey / stream.js

Created October 31, 2019 17:36

Progressive HTML with AJAX

	const END_MARKER = `#${Math.random()}`;
	const END_COMMENT = `<!${END_MARKER}>`;

	function streamInto(container, url) {
	const doc = document.implementation.createHTMLDocument(""); // Using a detached document as a streaming html parser.
	const xhr = new XMLHttpRequest();
	let pos = 0;

	doc.write("<body>"); // We don't expect a head, so we flush the body to begin parsing in that context.
	const streamRoot = document.adoptNode(doc.body); // We adopt the body into the main document, this overrides the document for the subsequent writes which flags scripts as executable in the main document.

DylanPiercey / index.marko

Last active January 3, 2019 15:21

Recursive Marko component

DylanPiercey / async-ssr.html

Created December 4, 2017 20:34

Potential async flushing syntax for html.

	<script>
	// Prolyfill for watching for loading tags and shuffeling around dom.
	// Could potentially come on first flush.
	</script>

	<body>
	<header>
	<h1>Hello world!</h1>
	</header>

DylanPiercey / html-log.js

Created September 15, 2017 05:28

Log HTML

	const body = document.body
	const container = document.createElement('div')
	container.style.visibility = 'hidden'
	container.style.position = 'absolute'
	container.style.zIndex = -1

	export default function htmlLog (html) {
	// Add html to a container to get its height.
	const width = window.innerWidth - 46 // Account for console padding.
	container.innerHTML = html

DylanPiercey / jsx-example.js

Last active June 26, 2017 03:29

JSX Example

	// Create your jsx 'templates'
	class NameTag extends React.Component {
	render () {
	return <div>My Name is {this.props.name}</div>
	}
	}

	// Create the element.
	const myNameTag = <NameTag name="Dylan"/>