Skip to content

Instantly share code, notes, and snippets.

@alobato
alobato / google_fonts.css
Created April 13, 2020 19:52 — forked from sadikay/google_fonts.css
All Google Fonts In One CSS File
@font-face {
font-family: 'ABeeZee';
font-style: normal;
font-weight: 400;
src: local('ABeeZee'), local('ABeeZee-Regular'), url(http://fonts.gstatic.com/s/abeezee/v9/JYPhMn-3Xw-JGuyB-fEdNA.ttf) format('truetype');
}
@font-face {
font-family: 'Abel';
font-style: normal;
font-weight: 400;
JSFQUy1BZG9iZS0zLjAKJSVJbnZvY2F0aW9uOiBncyAtZE5PUEFVU0UgLWRCQVRDSCAtc0RFVklDRT1wczJ3cml0ZSAtc091dHB1dEZpbGU9PyA/CiUlQm91bmRpbmdCb3g6IDAgMCA1OTYgODQzCiUlSGlSZXNCb3VuZGluZ0JveDogMCAwIDU5Ni4wMCA4NDMuMDAKJSVDcmVhdG9yOiBHUEwgR2hvc3RzY3JpcHQgOTUwIChwczJ3cml0ZSkKJSVMYW5ndWFnZUxldmVsOiAyCiUlQ3JlYXRpb25EYXRlOiBEOjIwMjAwMTIyMTEyNDE1LTAzJzAwJwolJVBhZ2VzOiAxCiUlRW5kQ29tbWVudHMKJSVCZWdpblByb2xvZwovRFNDX09QREZSRUFEIHRydWUgZGVmCi9TZXRQYWdlU2l6ZSB0cnVlIGRlZgovRVBTMldyaXRlIGZhbHNlIGRlZgpjdXJyZW50ZGljdC9EU0NfT1BERlJFQUQga25vd257CmN1cnJlbnRkaWN0L0RTQ19PUERGUkVBRCBnZXQKfXsKZmFsc2UKfWlmZWxzZQoxMCBkaWN0IGJlZ2luCi9EU0NfT1BERlJFQUQgZXhjaCBkZWYKL3RoaXMgY3VycmVudGRpY3QgZGVmCi95IDcyMCBkZWYKL2VidWYgMjAwIHN0cmluZyBkZWYKL3BybnR7CjM2Ly90aGlzL3kgZ2V0IG1vdmV0by8vZWJ1ZiBjdnMgc2hvdwovL3RoaXMveSAyIGNvcHkgZ2V0IDEyIHN1YiBwdXQKfWJpbmQgZGVmCi9uZXdsaW5lewozNi8vdGhpcy95IGdldCBtb3ZldG8KLy90aGlzL3kgMiBjb3B5IGdldCAxMiBzdWIgcHV0Cn1iaW5kIGRlZgplcnJvcmRpY3QvaGFuZGxlZXJyb3IKe3N5c3RlbWRpY3QgYmVnaW4KJGVycm9yIGJlZ2luCm5ld2Vycm9yCnsoJSVbIEVycm9yIGhhbmRsZWQgYnkg
@alobato
alobato / index.html
Created November 15, 2019 02:18 — forked from hokein/index.html
This is the chrome sample app which writing the image file from chrome.tabs.captureVisibleTab call to HTML5 file system.
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
</head>
<body>
<p>Hello World!</p>
<button id="showButton" >Click me</button>
<div id="screenshot"></div>
</body>
@alobato
alobato / background.html
Created November 15, 2019 00:07 — forked from srsudar/background.html
Pasting from the system clipboard using a Chrome extension.
<!DOCTYPE html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<textarea id="sandbox"></textarea>
</body>
@alobato
alobato / async-examples.js
Created June 9, 2019 12:46 — forked from developit/async-examples.js
Async Array utilities in async/await. Now available as an npm package: https://github.com/developit/asyncro
/** Async version of Array.prototype.reduce()
* await reduce(['/foo', '/bar', '/baz'], async (acc, v) => {
* acc[v] = await (await fetch(v)).json();
* return acc;
* }, {});
*/
export async function reduce(arr, fn, val, pure) {
for (let i=0; i<arr.length; i++) {
let v = await fn(val, arr[i], i, arr);
if (pure!==false) val = v;
import React from 'react'
import ReactDOM from 'react-dom'
import App from './containers/App'
import * as serviceWorker from './serviceWorker'
import { ApolloClient } from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { split } from 'apollo-link'
cd ~/projects
npx create-react-app app_name
cd app_name
yarn add graphql graphql-tag subscriptions-transport-ws apollo-client react-apollo apollo-cache-inmemory apollo-link apollo-link-http apollo-link-ws apollo-utilities apollo-link apollo-link-context apollo-link-error apollo-upload-client
yarn add @reach/router
yarn add styled-components styled-system styled-theming styled-tools polished
yarn add formik yup smooth-scroll-into-view-if-needed
yarn add react-popper
rm src/logo.svg src/App* src/index.css
mkdir src/hooks src/constants src/utils src/containers src/components
// https://github.com/drcallaway/apollo-link-timeout/
import { ApolloLink, Observable } from 'apollo-link'
const DEFAULT_TIMEOUT = 15000
class ApolloLinkTimeout extends ApolloLink {
constructor(timeout) {
super()
this.timeout = timeout || DEFAULT_TIMEOUT
// https://github.com/drcallaway/apollo-link-timeout/
import { ApolloLink, Observable } from 'apollo-link'
const DEFAULT_TIMEOUT = 15000
export default class TimeoutLink extends ApolloLink {
constructor(timeout) {
super()
this.timeout = timeout || DEFAULT_TIMEOUT
import React, { useContext, useState, useEffect } from 'react'
const ApolloContext = React.createContext()
export function ApolloProvider({ children, client }) {
return (<ApolloContext.Provider value={client}>{children}</ApolloContext.Provider>)
}
export function useApolloClient() {
return useContext(ApolloContext)