Skip to content

Instantly share code, notes, and snippets.

View nilshartmann's full-sized avatar
🐿️
https://graphql.schule

Nils Hartmann nilshartmann

🐿️
https://graphql.schule
View GitHub Profile
@@ -1,32 +0,0 @@
#! /bin/bash
DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
URL="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap"
http -p b "${URL}">${DIR}/fonts.css
@nilshartmann
nilshartmann / Wrapper.jsx
Created March 11, 2020 13:40
sprotty wrapper
class SprottyWrapper {
componentDidMount() {
// Diagramm erzeugen, wie in multicore.ts (hier stark gekürzt:)
this.processor = ...;
const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);
@nilshartmann
nilshartmann / graphql-links.md
Created November 12, 2019 08:13
GraphQL Links

Color Scheme Generators

Web

@nilshartmann
nilshartmann / README.md
Created April 30, 2018 16:14
Transform Apollo GraphQL Query Types

Currently when using apollo-codegen to generate TypeScript types for query definitions (ts-modern target), the generated types are called as the query name. So if you have a GetUserQuery your basetype is called GetUserQuery.
But in fact the type does not desribe the actual query, but the outcome, the result of the query, so it would be better if the type would have been named like UserQueryResult.

There is an issue in apollo-codegen where this issue is discussed: apollographql/apollo-tooling#315

But as there is currently no progress I wrote a little codemod (using jscodeshift) that renames the types after they have been generated. You can find the transform.js script below.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloProvider, withApollo } from "react-apollo";
const apolloClient = new ApolloClient({

Libraries and Tools for React

If you're developing an application based on React it can be helpful if you don't need to develop all the basic UI components yourself. Here you can find a list with various components, component libraries and complete design systems developed with and for React.

As the list got longer and longer I thought it would be better to have a "real" site for it.

👉 Please find the (new) list here: https://react-libs.nilshartmann.net/

class Hello {
async greet() {
return new Promise(res => {
setTimeout(() => res("Hallo Welt"), 1000);
});
}
}
const hello = new Hello();
(async () => {
@nilshartmann
nilshartmann / getEventTarget.js
Last active December 31, 2022 16:56
React and Web Component ()
function getEventTarget(nativeEvent) {
var target = nativeEvent.target || nativeEvent.srcElement || window;
// If encapsulated in a Web Component
// use the Event path
if(nativeEvent.path && nativeEvent.path[0]) {
return nativeEvent.path[0];
}
// Normalize SVG <use> element events #4963
@nilshartmann
nilshartmann / main.jsx
Created February 28, 2017 10:52
Access React Component using 'ref'
import React from 'react';
import ReactDOM from 'react-dom';
class Input extends React.Component {
constructor() {
super();
this.state = {
greeting: ''
}
}