Skip to content

Instantly share code, notes, and snippets.

View hellsan631's full-sized avatar

Mathew Kleppin hellsan631

102 followers · 14 following
View GitHub Profile
@hellsan631
hellsan631 / MockingProposal.md
Created February 5, 2018 18:44

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.
@hellsan631
hellsan631 / LightSwitch.jsx
Created June 6, 2018 17:30
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 (
@hellsan631
hellsan631 / 00 - prism.md
Last active January 28, 2019 18:29
React Hooks - Prism

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

@hellsan631
hellsan631 / css-component.jsx
Last active February 2, 2019 16:48
import './NameHeader.css'
export default function NameHeader({ title, name }) {
return (
<div className="name-header-container">
<h1>{title}</h1>
<h2>{name}</h2>
</div>
);
}
@hellsan631
hellsan631 / object_proxy_logger.ts
Last active November 18, 2020 20:51
Creates a proxy which helps for debugging of objects
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()
@hellsan631
hellsan631 / index.html
Created June 15, 2021 23:38
functions (http://jsbench.github.io/#a9178bea7b9d4fd104d51f2bc6b42306) #jsbench #jsperf
<!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>
@hellsan631
hellsan631 / GENERAL_STYLE_GUIDE.md
Last active June 16, 2021 19:45

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'
@hellsan631
hellsan631 / ios.example.tsx
Created June 23, 2021 18:16
interface ComposableComponentProps {
icon: React.ReactNode;
NameComponent: React.FC<BaseNameComponentProps>;
hideIcon?: boolean;
IndicatorComponent?: React.FC<BaseIndicatorComponentProps>;
children?: React.ReactNode;
}
export default function ComposableComponent({
icon,
@hellsan631
hellsan631 / useImgResource.js
Created February 18, 2023 19:02
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',