Skip to content

Instantly share code, notes, and snippets.

@nikgraf
nikgraf / data.js
Last active Nov 20, 2018
React Exercises
View data.js
export default {
places: [
{
id: "2ea45f13-3a69-4583-a789-c92b25405760",
name: "FlipLab Vienna",
description:
"Come in and Flip out! Mit FLIP LAB ... expanding my limits setzen wir neue Maßstäbe in der Welt des Trampolinsports, Freestyle- und Parkour-Runnings. Auf mehr als 2.500 Quadratmetern findest du eine Erlebniswelt, die dich stundenlang beschäftigen kann. Für jeden ist hier etwas dabei! Fun-Trampoline, Dodgeball-Fields, Wandtrampoline, Basketball- und Freestyltrampoline mit Bounceboards, Bungees und Halfpipe sowie Parkour oder auch eine Ninja Warrior Area sind im FlipLab Vienna anzutreffen.",
location: {
lat: 48.14099,
long: 16.48131
View atomic-block-plugins.js
import Editor, { composeDecorators } from 'draft-js-plugins-editor';
import createImagePlugin from 'draft-js-image-plugin';
import createAlignmentPlugin from 'draft-js-alignment-plugin';
import createFocusPlugin from 'draft-js-focus-plugin';
import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';
const focusPlugin = createFocusPlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
@nikgraf
nikgraf / toolbar.js
Created Nov 9, 2017
draft-js-plugins 2.0
View toolbar.js
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin];
@nikgraf
nikgraf / .eslintrc.js
Last active Jul 12, 2019
Prettier / Eslint Setup
View .eslintrc.js
module.exports = {
root: true, // make to not take in any user specified rules in parent folders
parser: 'babel-eslint',
extends: ['airbnb', 'prettier', 'prettier/flowtype', 'prettier/react'],
env: {
browser: true,
node: true,
jest: true,
},
plugins: ['flowtype'],
View keybase.md

Keybase proof

I hereby claim:

  • I am nikgraf on github.
  • I am nikgraf (https://keybase.io/nikgraf) on keybase.
  • I have a public key ASBDDKDpkbOxY1imH96860QA-z0ar_-3Ttq_SHnj4Qhu5Ao

To claim this, I am signing this object:

@nikgraf
nikgraf / question.md
Last active Apr 17, 2019
Providing sensitive information to a Lambda
View question.md

I’m struggling with providing sensitive information like a password or api key to a Lambda:

In the AWS docs it says: When you create or update Lambda functions that use environment variables, AWS Lambda encrypts them using the AWS Key Management Service.

But they also mention

Storing Sensitive Information

For sensitive information, such as database passwords, we recommend you use client-side encryption using
@nikgraf
nikgraf / reactive-2016.md
Last active Dec 17, 2018
Proposal for lightning talk at Reactive Conf 2016
View reactive-2016.md

Rich text editing with DraftJS Plugins

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.

Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓

DraftJS Plugins

Draft JS Plugins Logo

@nikgraf
nikgraf / UnicornEditor.js
Created Feb 25, 2016
someOtherVariable doesn't trigger an error!?
View UnicornEditor.js
type UnicornEditorState = {
editorState: any,
}
export default class UnicornEditor extends Component {
state: UnicornEditorState = {
editorState: EditorState.createEmpty(compositeDecorator),
someOtherVariable: 'Should throw an error?',
};
@nikgraf
nikgraf / chai-react-shallow.js
Created Dec 18, 2015
Chai React Shallow Testing
View chai-react-shallow.js
import {findAll} from 'react-shallow-testutils';
import objectMatches from 'object-matches';
import inspectReactElement from 'inspect-react-element';
const findAllMatching = (rootElementTree, elementTreeToMatch) => {
return findAll(rootElementTree, (element) => {
// In case a null is passed for a template value
if (element === null) return false;
const matchType = (elementTreeToMatch.type ? element.type === elementTreeToMatch.type : true);
@nikgraf
nikgraf / destructuring+defaults.js
Last active Dec 10, 2015
I'm a big fan of the destructuring assignment syntax in combination with setting default values in JavaScript ❤️
View destructuring+defaults.js
export default ({options = {}}) => {
const {
min = Number.MAX_SAFE_INTEGER,
max = Number.MIN_SAFE_INTEGER,
step = 1,
} = options;
return `Range between ${min} and ${max} with a step of ${step}`;
};