Skip to content

Instantly share code, notes, and snippets.

🛎
Your order please

Hans Christian Reinl drublic

🛎
Your order please
Block or report user

Report or block drublic

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View useHasLoader.ts
// Testable Custom Hooks
import { useEffect } from "react";
// Function that can be tested with clear API, easily unit-testable
const handleHasLoader = ({ isLoading, hasFocus, setHasLoader }) => {
if (isLoading && !hasFocus) {
return setHasLoader(true);
}
return setHasLoader(false);
@drublic
drublic / Button.tsx
Last active Sep 21, 2019
Conceptual Hooks
View Button.tsx
// Presentational Component
// contains only the UI and has a clear UI (props) for testing
import React from "react";
import Loader from "../Loader";
const Button = ({ onFocus, onBlur, hasLoader, label }) => (
<button type="button" onFocus={onFocus} onBlur={onBlur}>
{hasLoader ? <Loader /> : label}
</button>
@drublic
drublic / Button.tsx
Last active Sep 21, 2019
Without Conceptual Hooks
View Button.tsx
import React, { useState, useEffect, useCallback } from 'react';
import Loader from '../Loader';
const Button = ({ label, isLoading }) => {
const [hasFocus, setHasFocus] = useState<boolean>(false);
const [hasLoader, setHasLoader] = useState<boolean>(false);
const handleFocus = useCallback(() => {
setHasFocus(true);
}, []);
const handleBlur = useCallback(() => {
@drublic
drublic / Card.jsx
Last active Sep 7, 2019
Component JS to TS
View Card.jsx
// This is an exisiting React Component written as a Function Component using JavaScript.
import React from "react";
import { string, any } from "prop-types";
const Card = ({
headline,
createdAt,
children,
}) => {
View tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"noImplicitAny": false,
View mute.automator
on run {input, parameters}
set inputVolume to input volume of (get volume settings)
if inputVolume = 0 then
set inputVolume to 35
set displayNotification to "Microphone Unmuted"
else
set inputVolume to 0
set displayNotification to "Microphone Muted"
end if
View .hyper.js
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 12,
// font family with optional fallbacks
fontFamily: 'Consolas, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
// terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
cursorColor: 'rgba(248,28,229,0.8)',
View module.js
/**
* Module
*/
// External Library
import _ from '../node_modules/lodash/dist/lodash.js';
// Private variables
let _eventName = '_test';
@drublic
drublic / dabblet.css
Created Aug 4, 2014
The first commented line is your dabblet’s title
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
div {
border-radius: 50%;
height: 200px;
background: #ddd;
width: 200px;
}
You can’t perform that action at this time.