Skip to content

Instantly share code, notes, and snippets.

View hellsan631's full-sized avatar

Mathew Kleppin hellsan631

93 followers · 14 following
View GitHub Profile
@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',
@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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / 0 Raygun on the mean stack.md
Last active July 16, 2021 11:11
Raygun Angular.js and Express/Loopback integrations... done right, and documented!

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.