Skip to content

Instantly share code, notes, and snippets.

@nikgraf
nikgraf / App.tsx
Created July 21, 2022 10:43
Teaching useEffect
import { useEffect, useRef, useState } from "react";
function App() {
const [counter, setCounter] = useState(3);
console.log("App render", counter);
useEffect(() => {
console.log("App Effect");
// console.log("App Effect", counter);
@nikgraf
nikgraf / reactive-2016.md
Last active August 5, 2021 15:31
Proposal for lightning talk at Reactive Conf 2016

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. 🤓

Draft JS Plugins Logo

@nikgraf
nikgraf / .eslintrc.js
Last active July 12, 2019 19:11
Prettier / Eslint Setup
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'],
@nikgraf
nikgraf / question.md
Last active April 17, 2019 22:24
Providing sensitive information to a Lambda

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 / data.js
Last active November 20, 2018 15:56
React Exercises
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
@nikgraf
nikgraf / atomic-block-plugins.js
Created November 9, 2017 22:06
draft-js-plugins 2.0
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 November 9, 2017 22:04
draft-js-plugins 2.0
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin];
@nikgraf
nikgraf / keybase.md
Created October 15, 2017 08:07
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 / UnicornEditor.js
Created February 25, 2016 19:00
someOtherVariable doesn't trigger an error!?
type UnicornEditorState = {
editorState: any,
}
export default class UnicornEditor extends Component {
state: UnicornEditorState = {
editorState: EditorState.createEmpty(compositeDecorator),
someOtherVariable: 'Should throw an error?',
};
import 'package:mdv/mdv.dart' as mdv;
void main() {
mdv.initialize();
}