Skip to content

Instantly share code, notes, and snippets.

View drublic's full-sized avatar
🌐
Remote by default

Hans Christian Reinl drublic

🌐
Remote by default
View GitHub Profile
@drublic
drublic / useHasLoader.ts
Created September 22, 2019 07:55
Custom Hook
// 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 September 21, 2019 19:42
Conceptual Hooks
// 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 September 21, 2019 19:04
Without Conceptual Hooks
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 September 7, 2019 08:05
Component JS to TS
// 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,
}) => {
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"noImplicitAny": false,
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
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)',
/**
* Module
*/
// External Library
import _ from '../node_modules/lodash/dist/lodash.js';
// Private variables
let _eventName = '_test';
Donations for beer
@drublic
drublic / dabblet.css
Created August 4, 2014 13:42
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
div {
border-radius: 50%;
height: 200px;
background: #ddd;
width: 200px;
}