Paul Williams cyclopslabs

## useResize2.ts
import { useRef, useEffect } from 'react';

// The type of the size object that will be passed to the callback
type Size = {
  height: number;
  width: number;
};

// The type of the callback that will be passed to the hook
type ResizeCallback = (size: Size) => void;

## useResize.ts
import { useEffect, useRef } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

function useResize(ref: React.MutableRefObject<HTMLElement>, callback: (size: { width: number; height: number}) => void) {
  const resizeObserver = useRef(new ResizeObserver(entries => {
    if (!entries || !entries.length) return;
    const entry = entries[0];
    const { width, height } = entry.contentRect;
    callback({ width, height });
  }));

## angularAppController.js
(function() {

    'use strict';

    angular
            .module("app.component.eventLog")
            .controller('EventsCtrl', EventsCtrl);

    /**
     * @ngdoc controller

## angularApp-core.module.js
(function(){
    /**
          * @ngdoc overview
          * @name core
          *
          * @description
          * ## Module core
          * Module to handle core components of the app.
          * These items are not optional
          *

## transfer-data-controller.js
(function() {
    'use strict';

/** NOTES:
 *  Controller names start with a capital since they are 'newed up', like a constructor.
 *  The usage of vm as the variable name in this file, and vm in the HTML file have no effect on each other.
 *  It stands for View Model in both cases, but they are independent names, and can be different.
 *
 *  Attaching a method or anything else to vm (as below) is similar to attaching things to $scope in controllers not used
 *  with the Controller as syntax

## angular-service-with-caching.js
(function() {
    'use strict';

    angular
            .module('app.component.nameOfComponent')
            .factory('angularServiceWithCaching', angularServiceWithCaching);


    /**
     * @ngdoc service

## sample-angular-service.js
(function() {
    'use strict';

    angular
            .module('app.component.nameOfComponent')
            .factory('sampleAngularService', sampleAngularService);

/**
     * @ngdoc service
     * @name app.component.nameOfComponent.services:sampleAngularService

## Gruntfile.js
module.exports = function(grunt) {

    /*
     * ****************************
     * Tasks
     * ****************************
     */
   /*
    * Default - Distribution
    * runs jsHint and karma unit tests

## vertical-gradient.css
background: #bd301f; /* Old browsers */
background: -moz-linear-gradient(left,  #bd301f 0%, #c03322 0%, #bf3b24 3%, #c6462d 6%, #c6482f 7%, #ca5237 10%, #ca5237 11%, #cb5539 11%, #cb5539 12%, #cc563c 12%, #cd573d 12%, #ca573c 13%, #cd5a3f 13%, #ce5b40 14%, #cd5a3d 14%, #d05d40 15%, #d25f44 17%, #d46146 17%, #d26045 18%, #d46247 18%, #d46247 19%, #d5664a 20%, #db694e 25%, #d96a4e 25%, #dc6d51 26%, #dc6d51 28%, #e16f54 30%, #e77155 37%, #ee6d50 43%, #ed6c4f 45%, #ef694c 46%, #f16a4c 47%, #f16649 49%, #f16a4c 50%, #ef694c 52%, #ed6c4f 53%, #ed6d50 56%, #eb6f53 56%, #e77155 61%, #e47154 62%, #e37055 66%, #db6c50 72%, #d96a4e 72%, #d8694d 75%, #d36045 80%, #d15e43 81%, #d15e43 82%, #d05d40 82%, #ce5b3e 83%, #cf5c41 83%, #ca573c 85%, #cb5539 86%, #ca5237 86%, #ca5237 88%, #c6482f 91%, #c6462d 92%, #c4422a 93%, #c4422a 94%, #bf3b24 95%, #c13a26 95%, #c13623 97%, #bd2e1e 98%, #bf2d20 98%, #bc2a1d 99%, #bb271b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bd301f), color-s

## html5-barebones
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>

  <link rel="stylesheet" href="css/styles.css?v=1.0">
	import { useRef, useEffect } from 'react';

	// The type of the size object that will be passed to the callback
	type Size = {
	height: number;
	width: number;
	};

	// The type of the callback that will be passed to the hook
	type ResizeCallback = (size: Size) => void;
	import { useEffect, useRef } from 'react';
	import ResizeObserver from 'resize-observer-polyfill';

	function useResize(ref: React.MutableRefObject<HTMLElement>, callback: (size: { width: number; height: number}) => void) {
	const resizeObserver = useRef(new ResizeObserver(entries => {
	if (!entries \|\| !entries.length) return;
	const entry = entries[0];
	const { width, height } = entry.contentRect;
	callback({ width, height });
	}));
	(function() {

	'use strict';

	angular
	.module("app.component.eventLog")
	.controller('EventsCtrl', EventsCtrl);

	/**
	* @ngdoc controller
	(function(){
	/**
	* @ngdoc overview
	* @name core
	*
	* @description
	* ## Module core
	* Module to handle core components of the app.
	* These items are not optional
	*
	(function() {
	'use strict';

	/** NOTES:
	* Controller names start with a capital since they are 'newed up', like a constructor.
	* The usage of vm as the variable name in this file, and vm in the HTML file have no effect on each other.
	* It stands for View Model in both cases, but they are independent names, and can be different.
	*
	* Attaching a method or anything else to vm (as below) is similar to attaching things to $scope in controllers not used
	* with the Controller as syntax
	module.exports = function(grunt) {

	/*
	* ****************************
	* Tasks
	* ****************************
	*/
	/*
	* Default - Distribution
	* runs jsHint and karma unit tests
	background: #bd301f; /* Old browsers */
	background: -moz-linear-gradient(left, #bd301f 0%, #c03322 0%, #bf3b24 3%, #c6462d 6%, #c6482f 7%, #ca5237 10%, #ca5237 11%, #cb5539 11%, #cb5539 12%, #cc563c 12%, #cd573d 12%, #ca573c 13%, #cd5a3f 13%, #ce5b40 14%, #cd5a3d 14%, #d05d40 15%, #d25f44 17%, #d46146 17%, #d26045 18%, #d46247 18%, #d46247 19%, #d5664a 20%, #db694e 25%, #d96a4e 25%, #dc6d51 26%, #dc6d51 28%, #e16f54 30%, #e77155 37%, #ee6d50 43%, #ed6c4f 45%, #ef694c 46%, #f16a4c 47%, #f16649 49%, #f16a4c 50%, #ef694c 52%, #ed6c4f 53%, #ed6d50 56%, #eb6f53 56%, #e77155 61%, #e47154 62%, #e37055 66%, #db6c50 72%, #d96a4e 72%, #d8694d 75%, #d36045 80%, #d15e43 81%, #d15e43 82%, #d05d40 82%, #ce5b3e 83%, #cf5c41 83%, #ca573c 85%, #cb5539 86%, #ca5237 86%, #ca5237 88%, #c6482f 91%, #c6462d 92%, #c4422a 93%, #c4422a 94%, #bf3b24 95%, #c13a26 95%, #c13623 97%, #bd2e1e 98%, #bf2d20 98%, #bc2a1d 99%, #bb271b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bd301f), color-s
	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title></title>

	<link rel="stylesheet" href="css/styles.css?v=1.0">