nilshartmann

My very subjective impressions and opinions about VS Code and IntelliJ mainly for TypeScript development.

Note 1: This is not an objective comparison, just a list of points that I noticed when working with the two tools, and which I liked better or worse in each case.

Note 2: For IntelliJ, I used IntelliJ Ultimate Edition 2020.3

Note 3: I have used VS Code for TypeScript much longer than IntellIJ so also for this reason, this is not a "fair" comparison, because many things will turn out only in the long run, if good or bad

Note 4: many/some of the differences maybe could be adjusted by changing settings and/or keyboard shortcuts. And of course by learning the tools better.

nilshartmann

Release Notes

• ...including Breaking Changes: https://github.com/facebook/create-react-app/releases/tag/v4.0.0

Upgrade react-scripts and dependencies:

yarn add --exact [email protected]
yarn add react react-dom

nilshartmann

@@ -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

class SprottyWrapper {
  
  
  componentDidMount() {
    // Diagramm erzeugen, wie in multicore.ts (hier stark gekürzt:)
    
    this.processor = ...;
    
    
    const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);

nilshartmann

• The GitHub GraphQL API Ankündigung und Begründung für die GitHub GraphQL API

• https://developer.github.com/v4/guides/ - Allgemeine GraphQL API Doku von Github

• Mutations in der GitHi API Hier seht ihr zumindest, wie die API aussieht (leider keine Begründung, warum sie so aussieht)

• GraphQL Best Practices - leider recht abstrakt

• Pagination - Paginierung in GraphQL. Mein Tipp ist, dass man in der Regel sich die Sache vereinfachen kann, wenn man statt eines Cursors eine "gewohnte" Seiten-basierte Paginierung verwendet. Trotzdem ist der Artikel eine gute Inspiration.

• Öffentliche GraphQL APIs - Eine Liste mit öffentlichen GraphQL APIs, hier könnt ihr Euch "inspirieren" lassen

• [Mein Talk](https://n

nilshartmann

Color Scheme Generators

Web

• khroma The AI color tool for designers
• coolors The super fast color schemes generator
• paletton The Color Scheme Designer
• colormind The ai powered color scheme generator
• picular Google, but for colors
• adobe colors Adobe Color CC

nilshartmann

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.

nilshartmann

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({

nilshartmann

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/

nilshartmann

class Hello {
  async greet() {
    return new Promise(res => {
      setTimeout(() => res("Hallo Welt"), 1000);
    });
  }
}

const hello = new Hello();
(async () => {