dalaidunc

dalaidunc / social-stats-part5.js

Created October 31, 2018 18:41

dalaidunc / social-stats-part4.js

Created October 31, 2018 18:40

dalaidunc / social-stats-index.html

Created October 31, 2018 18:35

dalaidunc / social-stats-part3.js

Created October 31, 2018 18:33

dalaidunc / social-stats-part2.js

Created October 31, 2018 18:32

dalaidunc / social-stats-part1.js

Created October 31, 2018 18:29

dalaidunc / SimpleComponent.vue

Last active April 20, 2024 18:33

A simple example of a Vue single file component

	<template>
	<div id="app">
	<ul>
	<li v-for='number in numbers' :key='number'>{{ number }}</li>
	</ul>
	<form @submit.prevent='addNumber'>
	<input type='text' v-model='newNumber'>
	<button type='submit'>Add another number</button>
	</form>
	</div>

dalaidunc / asyncForEach.js

Created August 25, 2017 15:23

Creating an async version of forEach on Array.prototype

	// extend the Array prototype with an asyncForEach method
	Array.prototype.asyncForEach = async function (fn) {
	for (let i = 0; i < this.length; i++) {
	await fn(this[i], i);
	}
	};

	const arr = ['a', 'b', 'c', 'd'];

	// define a Promise wrapper around the setTimeout function

dalaidunc / improperAsyncForEach.js

Created August 25, 2017 15:22

Improper async forEach loop

	// define a Promise wrapper around the setTimeout function
	function wait (fn, time) {
	return new Promise(resolve => setTimeout(() => {fn();resolve();}, time));
	}

	const arr = ['a', 'b', 'c', 'd'];

	// if we want to call an async function for each element in the array
	// in series, this would not work:
	arr.forEach(async (item, index) => {

dalaidunc / makedata.js

Last active February 14, 2019 09:28

Create CSV files with dummy data (using node.js)

	const fs = require('fs');

	const cols = 8;

	function randomChar () {
	return String.fromCharCode(Math.floor(Math.random() * (122-65) + 65));
	}

	function randomString (length) {
	let string = '';

	function getDefaultTemplate(
	name,
	oldnum = 1,
	newnum = 1,
	target = 1,
	color = '#880011'
	) {
	const width = (newnum / target) * 100 + '%';
	return h(
	'div',

	class SocialStats extends HTMLElement {
	static get observedAttributes() {
	return ['oldnum', 'newnum', 'colour', 'target', 'name'];
	}
	constructor() {
	super();
	this.shadow = this.attachShadow({ mode: 'open' });
	}
	connectedCallback() {
	this.css = getDefaultStyle();

	<html>
	<head>
	<script src='index.js'></script>
	</head>
	<body>
	<div style='width: 300px'>
	<social-stats name='twitter' oldnum='107' newnum='120' target='1000' colour='#1f78b4'></social-stats>
	<social-stats name='facebook' oldnum='238' newnum='250' target='500' colour='#33a02c'></social-stats>
	<social-stats name='instagram' oldnum='9000' newnum='7000' target='10000' colour='#fb9a99'></social-stats>
	<social-stats name='reddit' oldnum='4' newnum='8' target='10' colour='#FF00FF'></social-stats>

	function h(elemName, props, ...children) {
	const elem = document.createElement(elemName);
	if (props) {
	Object.assign(elem, props);
	}
	if (children) {
	children.forEach(child => {
	if (typeof child === 'object') {
	elem.appendChild(child);
	} else {

	class SocialStats extends HTMLElement {
	constructor() {
	super();
	this.shadow = this.attachShadow({ mode: 'open' });
	}

	connectedCallback() {
	this.css = getDefaultStyle();
	this.template = getDefaultTemplate();
	this.shadow.appendChild(this.css);

	// Create a class extending from HTMLElement to represent our new web component
	class SocialStats extends HTMLElement {
	constructor() {
	// inherit everything from HTMLElement
	super();
	}
	}

	// define the element so it can be used in our HTML page
	// The name of the element has to have a hyphen in the middle, but could be named pretty much anything