Mathew Kleppin hellsan631

Component definition

File Structure Example:

// Beginning Of File - imports always at the top
import * as React from 'react'
import { trackEvent } from '@app/lib/AnalyticsUtils'
import UserList from './UserList'

React Hooks make including Prism easy.

I've been learning react hooks recently. I love that you can refactor components now and remove a lot of logic that made components giant, and reuse the same logic another components

The example before extrapolates all that behavior of running Prism inside any component.

You can see how I use this for my blog posts on github

Server E2E Mocking Proposal

Rules:

1: All external online API's should be wrapped into our own services.
- This provides a general guideline for developers when they make calls to a said service
- We avoid issues if a service changes their api somewhere, as tests would fail.
2: Services should have 100% static methods.
- API State should be maintained only on the external side of things.
This avoids use of any global state making things more predictable and reproducable.

Raygun Integration

Featuring

AngularJS
Loopback (express)

I've solved some big issues with getting Raygun to work for tracking the javascript in the mean stack. There were several issues with angular and loopback, and the documentation is pretty scarce. So here is my best attempt at outlining my solution. Keep in mind, this may not work if you download and run this, but its working in my web bot project, which uses the same tech.

	import { useState, useEffect } from 'react';

	export const getCloudinaryUrl = (filename, width = 250) => {
	// const base = 'https://res.cloudinary.com/laurabaker/image/fetch'
	const base = 'https://res.cloudinary.com/laurabaker/image/upload'
	const formats = {
	eco: `c_limit,f_auto,fl_apng.awebp,q_auto:low,w_${width}`,
	ecoFull: `c_limit,f_auto,fl_apng.awebp,q_auto:low,w_1024`,
	thumb: `c_limit,f_auto,fl_apng.awebp,q_auto,w_${width}`,
	med: 'c_limit,f_auto,fl_apng.awebp,q_auto:good,w_1024,h_1024',

	interface ComposableComponentProps {
	icon: React.ReactNode;
	NameComponent: React.FC<BaseNameComponentProps>;
	hideIcon?: boolean;
	IndicatorComponent?: React.FC<BaseIndicatorComponentProps>;
	children?: React.ReactNode;
	}

	export default function ComposableComponent({
	icon,

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>functions</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	function createLogHandler(obj: any) {
	return new Proxy(
	obj,
	{
	get(target: any, key: any) {
	console.groupCollapsed(`Reading from ${key}`)
	console.log(`target: ${JSON.stringify(target)}`)
	console.log(`value: ${JSON.stringify(target[key])}`)
	console.trace()
	console.groupEnd()

	import './NameHeader.css'

	export default function NameHeader({ title, name }) {
	return (
	<div className="name-header-container">
	<h1>{title}</h1>
	<h2>{name}</h2>
	</div>
	);
	}

	import { h, Component } from 'preact';
	import { observer } from 'mobx-preact';
	import box from 'mobx-box';

	@observer
	class LightSwitch extends Component {
	@box lightsOn = false;

	render() {
	return (