Skip to content

Instantly share code, notes, and snippets.

View cassler's full-sized avatar

Darin Cassler cassler

15 followers · 22 following
View GitHub Profile
@cassler
cassler / component-reimplementation.tsx
Created August 2, 2022 20:29
Re-implement a Typescript component with types preserved
import React from 'react';
// This allows us to apply the typings of one component to another without
// having to maintain interfaces or types manually.
export type ExtractProps<T> = T extends React.ComponentType<infer P> ? P : T;
// This can be used to maintain behavior from the original component on our
// library customized version. For example. if we want to customize parts of
// HeadlessUI -- we could repackage their components with preserved types
// and props - like so...
@cassler
cassler / es2022-update.md
Last active June 25, 2022 15:22
ES2022 Highlights
@cassler
cassler / darins-vscode-settings.js
Last active June 19, 2021 15:25
My complete VSCode settings as of June 16 2021
modules.export = {
// == Typography & Themes ==============
"workbench.colorTheme": "Ayu Mirage",
"editor.fontFamily": "MonoLisa, Operator Mono Lig, MonoLisa, Menlo",
"editor.fontSize": 16,
"editor.lineHeight": 24,
"editor.letterSpacing": -0.1,
"editor.fontWeight": 300,
"editor.fontLigatures": true,
@cassler
cassler / index.html
Created May 22, 2021 19:18
JS Bin // source https://jsbin.com/mojaces
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
@cassler
cassler / README.md
Last active January 4, 2021 19:50
Full vehicle payload

This is a sample of the entire payload provided to the front end. We are only able to parse data included in this object. Anything not included in this object MUST be a backend story.

@cassler
cassler / usage.tsx
Last active December 10, 2020 20:06
useOnClickOutside hook
import React, { useRef } from 'react'
import useOnClickOutside from './useOnClickOutside'
export default function Component() {
// Set a ref for the handler to use
const ref = useRef(null)
// Handler for outside clicks here
const handleClickOutside = () => {
// Your custom logic here
@cassler
cassler / .eslintrc
Created December 7, 2020 19:44
Darin's ESLint Config - place in root of user home dir.
{
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"ecmaFeatures": {
@cassler
cassler / readme.md
Last active December 19, 2016 20:55

Toggle Application Service

This script can be assigned a keyboard shortcut as a System Service to toggle visibility. Just change appName to whatever suits you

@cassler
cassler / gist:284226596c596e9803fa
Created July 6, 2015 19:29
colorconverter.js
// convert 0..255 R,G,B values to binary string
RGBToBin = function(r,g,b){
var bin = r << 16 | g << 8 | b;
return (function(h){
return new Array(25-h.length).join("0")+h
})(bin.toString(2))
}
// convert 0..255 R,G,B values to a hexidecimal color string
RGBToHex = function(r,g,b){
@cassler
cassler / post_thumbnail_bg.php
Created July 6, 2015 18:52
Post Thumbnail as BG
<?php
$css = "style=''";
if ( has_post_thumbnail( get_the_ID ) ) :
$size = 'large'; // choose size of image to be used
$thumb_id = get_post_thumbnail_id();
$thumb_object = wp_get_attachment_image_src($thumb_id, $size, true);
$thumb_url = $thumb_object[0];
$css = "background-image:url('$thumb_url'); background-size:cover; background-position:top-center no-repeat;"
endif;