Skip to content

Instantly share code, notes, and snippets.

View segunadebayo's full-sized avatar
😃

Segun Adebayo segunadebayo

😃
View GitHub Profile
@segunadebayo
segunadebayo / markdown-reset.css
Last active September 24, 2020 08:39 — forked from chakhsu/reset.css
[markdown reset css] #css
/* Reset
=============================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
/* Body

Keybase proof

I hereby claim:

  • I am segunadebayo on github.
  • I am segunadebayo (https://keybase.io/segunadebayo) on keybase.
  • I have a public key ASBtVZhQf8x-7k_u2iDgxtq2GHJ7Y_95v2SS0-viWQg2fwo

To claim this, I am signing this object:

@segunadebayo
segunadebayo / apollo-middleware.js
Created September 5, 2020 14:10
Applying Middleware to Apollo Server
const { ApolloServer, gql, makeExecutableSchema } = require('apollo-server')
const { applyMiddleware } = require('graphql-middleware')
const uppercaseCategory = async (resolve, parent, args, context, info) => {
const result = await resolve(parent, args, context, info)
return result.toUpperCase()
}
const postsMiddleware = async (resolve, parent, args, context, info) => {
@segunadebayo
segunadebayo / rename-camel-to-dash.js
Created August 26, 2020 08:21 — forked from finalclass/rename-camel-to-dash.js
recursively renames every file and directory in the script path from camelCase and UpperCamelCase to dash-case
/*jshint node:true*/
'use strict';
/**
* This scripts recursively renames every file and directory in the script path
* from camelCase and UpperCamelCase to dash-case
*
* Do a backup before executing this script
*
* @lecense MIT
@segunadebayo
segunadebayo / colors.md
Created April 20, 2020 10:10 — forked from 0x263b/colors.md
Random color from string in javascript

Random color from string in javascript

Consider a list of strings you need to permanently assign a random color.

First you should turn the string into a hash.

var string = "string"
var hash = 0
@segunadebayo
segunadebayo / color-mode.tsx
Created December 31, 2019 13:50
Color Mode
import * as React from "react";
const storageKey = "chakra-ui-color-mode";
const cx = (mode: ColorMode) => `chakra-ui-${mode}`;
const supportsLocalStorage = typeof Storage !== "undefined";
const getBodyElement = () => {
// for SSR
const mockBody = {
classList: {
@segunadebayo
segunadebayo / modal-route.jsx
Created December 12, 2019 12:11
Router Tabs and Modal Routes
import React, { Component } from "react";
import { Switch, Route, Link } from "react-router-dom";
import "./app.css";
const Home = () => <div>You're on the Home Tab</div>;
const Photo = ({ location }) => {
const { state = {} } = location;
const { modal } = state;
return (
<div className={modal ? "modal" : undefined}>
@segunadebayo
segunadebayo / machine.js
Last active November 19, 2019 22:41
Generated by XState Viz: https://xstate.js.org/viz
const menuButtonMachine = new Machine(
{
id: "menu-button",
initial: "idle",
context: {
activeIndex: -1,
items: [1, 2, 3],
focused: ""
},
states: {
@segunadebayo
segunadebayo / machine.js
Created October 31, 2019 14:26
Generated by XState Viz: https://xstate.js.org/viz
const machine = Machine({
id: "menu-button",
initial: "unmounted",
context: {
button: null,
menu: null,
items: [],
search: "",
highlightIndex: -1
},

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

  • Accessible
  • Composable
  • Stylable