Forem: Artur Czemiel

Database just from GraphQL! Dgraph Backend template

Artur Czemiel — Wed, 30 Oct 2019 15:58:38 +0000

GraphQL Editor Team - Dgraph Backend template

This template is worth 2020 ✨.

Brought by GraphQL Editor Team

Why?

You get database with GraphQL interface for storing your data just from GraphQL Schema.

How it works

Like that, and it is only from GraphQL Schema!! :

Dependencies

Docker

These 2 are needed to run this

npm

Quick Start

Clone this repo

git clone https://github.com/graphql-editor/graphql-backend-template-dgraph

npm install

To start with this template you will need GraphQL Schema. Create one with GraphQL Editor and copy its contents to schema.graphql file.
Example schema can look like this Schema
Remember when using Dgraph you need only Types, Interfaces and Enums. Also there is a small bug in Dgraph which doesnt allow comments in schema files.

Or if you are lazy:

Forget about the schema and use one inside repo. Do nothing and proceed.

Run this command in one terminal

npm run dgraph

And run this command in the other one

npm run inject-dgraph-schema

Voila. Your GraphQL native database is ready to use. Run queries in a tool like Firecamp, so Insomnia, GraphiQL etc.

Generate Client libraries

When the server is running you can generate the actual dgraph generated schema file and autcomplete library for Javascript or TypeScript Frontend

Browser / React Native

TypeScript

npm run generate-nodets

Javascript

npm run generate-nodejs

Node

TypeScript

npm run generate-ts

Javascript

npm run generate-js

Author

Twitter - follow me for latest news with this boilerplate

Github - follow me for the latest news with this boilerplate

Under the hood

Dgraph

Zeus

Additional resources

Dgraph Definitions
Dgraph tutorial

Beginners Guide to communication with GraphQL Server in Javascript with Pokemon Schema

Artur Czemiel — Thu, 25 Jul 2019 12:36:19 +0000

First of all, I want to tell you I created the tool graphql-zeus it is GraphQL client on top of the fetch function. What it means? Basically, you point Zeus to the GraphQL schema and it generates libraries for you.

Sounds fun? It is even more fun because you don't have to know gql the query language of GraphQL because Zeus provides you with its own GraphQL query like autocompleted syntax.

Create a project folder:

mkdir zeus-tutorial
cd zeus-tutorial

Let's start then. First, you will have to init a new npm package:

npm init

click enter enter enter etc.

Install dev dependencies.

npm i -D @babel/core @babel/node @babel/preset-env

Install dependencies.

npm i node-fetch

Then Create .babelrc file

echo '{ "presets": ["@babel/preset-env"] }' >> .babelrc

Then Create the src directory

mkdir src

and create a index.js file

touch src/index.js

Add script to your package.json

{
  "scripts": {
    "start": "babel-node src/index.js"
  },
}

Your whole package.json should look like this:

{
  "name": "zeustutorial",
  "version": "1.0.0",
  "description": "",
  "main": "main/index.js",
  "scripts": {
    "start": "babel-node src/index.js"
  },
  "author": "Aexol <aexol@aexol.com> (http://aexol.com)",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/node": "^7.5.5",
    "@babel/preset-env": "^7.5.5"
  },
  "dependencies": {
    "node-fetch": "^2.6.0"
  }
}

Now it is high time to generate some code from GraphQL. Go ahead install graphql-zeus.

install graphql-zeus

npm i -g graphql-zeus

Generate files from pokemon schema

zeus https://graphql-pokemon.now.sh/ ./src

Hurray! You should have definition files generated in ./src folder.
Now go and open some editor of choice - I prefer VSCode but it is up to you. I can guarantee it works with VSCode though.

Open package directory with editor. Open src/index.js
In the first part of the series, we will write simple query loading first ten pokemon names and images and display it in the terminal.

import { Chain } from "./graphql-zeus";

const chain = Chain("https://graphql-pokemon.now.sh");

const run = async () => {
  const { pokemons } = await chain.Query({
    pokemons: [
      {
        first: 10
      },
      {
        name: true,
        image: true
      }
    ]
  });
  console.log(pokemons);
  return pokemons;
};
run();

In zeus everything is typed so when you write chain. You should see Query and when you open {} parentheses you should see all the possible queries.

In zeus everything is autocompleted so you don't have to learn gql syntax.

And run it with being in the project folder

npm run start

You should see the first ten pokemon in the output! Congratulations you've just done your first GraphQL query.

Support

If you want to support me creating graphql-zeus visit

graphql-editor / graphql-zeus

GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native ( apollo compatible )

Strongly Typed GraphQL from the team at GraphQL Editor

How it works

GraphQL Zeus is the absolute best way to interact with your GraphQL endpoints in a type-safe way. Zeus uses your schema to generate Typescript types and strongly typed clients to unlock the power, efficiency, productivity and safety of Typescript on your GraphQL requests.

Features

⚡️ Validates queries and selectors ⚡️ Types mapped from your schema
⚡️ Fetch all primitive fields with one function
⚡️ Works with Apollo Client, React Query, Stucco Subscriptions (*more coming soon...)
⚡️ Works with Subscriptions
⚡️ Infer complex response types
⚡️ Create reusable selection sets (like fragments) for use across multiple queries
⚡️ Supports GraphQL Unions, Interfaces, Aliases and Variables
⚡️ Handles massive schemas
⚡️ Supports Browsers, Node.js and React Native in Javascript and Typescript
⚡️ Schema downloader
⚡️ JSON schema generation

Full documentation

Our full documentation has all the use cases of:

scalars
…

View on GitHub

and leave a star. That's it.

GraphQL queries easy again - Welcome GraphQL Zeus

Artur Czemiel — Tue, 16 Jul 2019 14:55:18 +0000

Today I released GraphQL Zeus library. It provides generated strongly typed libraries for GraphQL endpoints. So you don't have wonder what's wrong in your query - you can just use autocomplete from the generated library.

It is very complicated in case of Generics in TypeScript.

You can see a working example on my repo. If you have any comments or feature requests write here/ on GitHub.

How to use it?



$ zeus https://faker.graphqleditor.com/aexol/olympus/graphql ./generated

Just provide GraphQL endpoint or file and it will generate lib in desired location.

graphql-editor / graphql-zeus

GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native ( apollo compatible )

Strongly Typed GraphQL from the team at GraphQL Editor

How it works

Features

Full documentation

Our full documentation has all the use cases of:

scalars
…

View on GitHub

TypeScript Tutorial - Use "as const" to export colors!

Artur Czemiel — Mon, 15 Jul 2019 08:39:26 +0000

Hello, This is the fourth article of the advanced typescript tutorial series. Today I'll cover small usage of

as const

Imagine you have some colors defined:

const Colors = {
  cherry: "#F9193F",
  mars: "#F19037",
  meteor: "#FFE3C8"
}

When you try to use them somewhere else TypeScript will show you type of the Colors.cherry is string. This is ok if we have 3 colors, but what if we have 50 colors with strange names? We can use new typescript as const or <const>:

const Colors = {
  cherry: "#F9193F",
  mars: "#F19037",
  meteor: "#FFE3C8"
} as const

Now if we type Colors.cherry typescript will show us the real value of cherry color, which is #F9193F !

CSS in JS -> write your own engine

Artur Czemiel — Thu, 11 Jul 2019 11:05:54 +0000

The why?!

Nowadays advanced frameworks like React, Vue, Angular, etc. are using CSS in JS syntax. You should write your own CSS in JS minimal engine to understand what's going on under the hood.

Javascript

function o2s(o, className) {
  var elm = new Option();
  Object.keys(o).forEach(function() {
    (elm.style)[a] = o[a];
  });
  return `.${className}{\n${elm.getAttribute("style")}\n}`;
}
/**
 * Class responsible for small css functionalities rendered in HTML like menu
 *
 * @export
 * @class CSSMiniEngine
 */
export class CSSMiniEngine {
  classes = [];
  /**
   * add css class with css params
   *
   * @memberof CSSMiniEngine
   * @param {Partial<CSSStyleDeclaration>} o
   * @param {string} className
   */
  addClass = (o, className) => {
    this.classes.push(o2s(o, className));
  };
  /**
   * compile to style tag in head
   *
   * @memberof CSSMiniEngine
   */
  compile = () => {
    const head = document.head || document.getElementsByTagName("head")[0];
    const style = document.createElement("style");
    head.appendChild(style);
    style.type = "text/css";
    style.appendChild(document.createTextNode(this.classes.join("\n")));
  };
}

Typescript

function o2s(o: Partial<CSSStyleDeclaration>, className: string) {
  var elm = new Option();
  Object.keys(o).forEach(function(a: string) {
    (elm.style as any)[a as any] = o[a as any];
  });
  return `.${className}{\n${elm.getAttribute("style")}\n}`;
}
/**
 * Class responsible for small css functionalities rendered in HTML like menu
 *
 * @export
 * @class CSSMiniEngine
 */
export class CSSMiniEngine {
  classes: string[] = [];
  /**
   * add css class with css params
   *
   * @memberof CSSMiniEngine
   * @param {Partial<CSSStyleDeclaration>} o
   * @param {string} className
   */
  addClass = (o: Partial<CSSStyleDeclaration>, className: string) => {
    this.classes.push(o2s(o, className));
  };
  /**
   * compile to style tag in head
   *
   * @memberof CSSMiniEngine
   */
  compile = () => {
    const head = document.head || document.getElementsByTagName("head")[0];
    const style = document.createElement("style");
    head.appendChild(style);
    style.type = "text/css";
    style.appendChild(document.createTextNode(this.classes.join("\n")));
  };
}

Usage example

Instantiate

const cssEngine = new CssMiniEngine()

Create Class

const className = "MyClass"
cssMiniEngine.addClass(
      {
        visibility: "visible",
        position: "fixed",
        background: "transparent",
        border: "0",
        textAlign: "center",
      },
      className
);

Use it

In pure js

const div = document.createElement("div")
div.classList.add(className)

In React

export const MyDiv = () => (
  <div className={className}>Hello</div>
)

In the end call

cssEngine.compile()

So it will insert all your classes to DOM as a style tag
Thank you for reading!

TypeScript Tutorial - return based on args

Artur Czemiel — Thu, 18 Apr 2019 07:26:24 +0000

Hello, This is the third article of the advanced typescript tutorial series. Today I'll cover basic usage of generic functions

type Point = {
  x?: number
  y?: number
  z?: number
}
const myFunc = <T extends Point>(args: T): T => {
  return args
}

As arguments, I'll provide an object containing Point properties. This function will only return Partial of Point based on provided parameters in args argument;

const result = myFunc({
  x: 1,
  y: 1,
})

And the intellisense for such function is

As you see there is no z property here. Typescript already knows we provided these 2 args and it should return only them!

This part is super short as I can provide the infinite number of generic functions usages.

TypeScript Tutorial - conditional types

Artur Czemiel — Wed, 17 Apr 2019 14:05:22 +0000

Hello, This is the second article of the advanced typescript tutorial series. Today I'll cover the basic usage of

extends

keyword and conditional types. How does conditional type looks like?

type StringOrArray<T> = T extends string[] ? 'array' : T extends string ? 'string' : never
const a:string = "hello"
const b:string[] = ["hello","world"]
const c:number = 1

const d:StringOrArray<typeof a> = "string"
const e:StringOrArray<typeof b> = "array"
let f:StringOrArray<typeof c>

So let's analyze this code:

We check if our generic Type is a string array
If it is array make type as string constant 'array'
If it does not check the type. If it is string make type as string constant 'string'
Else the type is never

To be the truth this code is useless but can give you some scope how extends keyword works. Next example will be a real-world example where we determine the type of the form field to give the user correct options.

type FieldType = "string" | "float" | "date"

type BaseField = {
    name:string
}

type Field<T extends FieldType> = BaseField & {
    value: T extends "string" ? string : T extends "float" ? number : T extends "date" ? Date : never
}

const stringField:Field<"string"> = {
    name:"myfield",
    value:"aaa"
}
const floatField:Field<"float"> = {
    name:"myfield",
    value:1.0
}

const dateField:Field<"date"> = {
    name:"myfield",
    value: new Date()
}

This is a little bit more advanced. What's going on with FieldType? It just checks the string converted to generic type to return correct type.


type FieldType = "string" | "float" | "date";
type BaseFieldExtended = {
  name: string;
  type: FieldType;
};
const FieldExtended = <T extends BaseFieldExtended>(
  baseField: T & {
    value: T["type"] extends "string"
      ? string
      : T["type"] extends "date"
      ? Date
      : T["type"] extends "float"
      ? number
      : never;
  }
) => baseField;

FieldExtended({
  name: "a",
  type: "string",
  value: "bbb"
});

FieldExtended({
  name: "a",
  type: "float",
  value: 12
});

FieldExtended({
  name: "a",
  type: "date",
  value: new Date()
});

And this is what typescript is made for. To provide complicated autocompletion stuff :). Wait for the next series of advanced typescript tutorial.

TypeScript Tutorial - 'infer' keyword

Artur Czemiel — Fri, 12 Apr 2019 12:00:42 +0000

Hello, this is starting the article for advanced TypeScript tutorial series. Today I'll cover basic usage of:

infer

For me, it was hard to understand at the beginning what I can really do with infer. Let's start with a really basic example.

type FlattenIfArray<T> = T extends (infer R)[] ? R : T

So let's analyze this code:

We check if our generic Type is the array
If it is array extract the real type from it
If it does not leave it as is

Still, it is not clear what infer is doing, so let's proceed with another example

type Unpromisify<T> = T extends Promise<infer R> ? R : T

This one looks more clear as it doesn't have parenthesis:

We check if type extends Promise
If it does we extract the type from the promise
If it does not leave it as is

See? If you use extends only just to check if the type is a promise you would use

type Unpromisify<T> = T extends Promise<any> ? T : never

And in infer instead of any keyword, you infer the value from type. Let's try with more advanced types then:

type FuncWithOneObjectArgument<P extends { [x: string]: any }, R> = (
  props: P
) => R;

type DestructuredArgsOfFunction<
  F extends FuncWithOneObjectArgument<any, any>
> = F extends FuncWithOneObjectArgument<infer P, any> ? P : never;

const myFunction = (props: { x: number; y: number }): string => {
  return "OK";
};

const props: DestructuredArgsOfFunction<typeof myFunction> = {
  x: 1,
  y: 2
};

Intellisense for props works like this:

You can make use of it inferring React Component props for example or another function that uses destructured params.

How to write a blog publish link CLI with Yarrrgs!

Artur Czemiel — Fri, 22 Mar 2019 08:53:25 +0000

Introduction

Hello, today I will write a little bit about tooling. 2 weeks ago I thought about starting this blog. I asked my friend who blogs what blog engine should I use. His answer was rather surprising as he told me I should have used static website and commit blog posts as pull requests to it :O.

Searching for the perfect solution

So, I started exploring the internet to find the best blog layout ( reactjs ) tool to write my static blog. I was able to dig out gatsby starter blog from hundreds of Chinese repos which GitHub is flooded with right now. At the moment I created this blog I had no experience with Gatsby ecosystem but it looked promising for me.

Running

Running this kind of Gatsby package required me only to install gatsby-cli and run the command gatsby develop. Pretty easy? Huh?

Modifications

I decided to add some tweaks to this simple blog package as it was a really pure blog with one author. So to add other authors( who I don't have yet :( ) I added authors folder, so to add you as an author you need to create a folder with your name and create index.js file with this kind of content inside it:

export const Artur = {
  photo: require('./Artur.jpeg'),
  desc:
    'GraphQL passionate. Code generation guru. Short code lover. Father. CTO. CEO.',
  name: 'Artur Czemiel',
  email: 'aexol@aexol.com',
}

and add of course this line to authors/index.js :

import { Artur } from './Artur'
export const Authors = {
  Artur,
}

Later on, you can use it inside your blog post.

How to add your blog post

Adding your blog post is pretty easy though. Again you have to create a folder inside pages folder with blog post slug-like my-very-interesting-article. Add an index.md file to it with this kind of header which is formatted by graymatter package then:

---
title: My very interesting article
date: '2018-10-27T13:23:04.284Z'
author: Artur
---

ł
That's it. After writing the article you just submit pull request to your fork. I merge the pull request and publish your article to the website.

Publish tools

Sometimes I am kinda lazy person. I added small publish CLI to this project, which automatically using opn opens the browser with prefilled URL and title fields for: reddit LinkedIn twitter hackernews. So it is much easier to share your blog posts from this blog. It lives in bin/index.js folder of this blog and uses yargs and inquirer and graymatter which I mentioned before.

Here is the code

const yargs = require('yargs')
const fs = require('fs')
const inquirer = require('inquirer')
const opn = require('./opn')
const matter = require('gray-matter')

const HOSTNAME = 'https://blog.graphqleditor.com'
const pagesDirectory = __dirname + '/../src/pages'
const reddits = [
  'typescript',
  'javascript',
  'reactnative',
  'reactjs',
  'reactxp',
  'node',
  'webdev',
  'graphql',
  'programming',
  'technology',
  'startups',
  'learnprogramming',
  'marketing',
  'entrepreneur',
  'golang',
  'ruby',
  'dotnet',
  'java',
  'python'
].sort()
const voats = ['technology']
const mediums = [
  {
    name: 'voat',
    fn: ({ url, title }) =>
      inquirer
        .prompt([
          {
            type: 'list',
            name: 'voat',
            message: 'What voat you would like to publish to?',
            choices: voats,
          },
        ])
        .then(answers =>
          submit({
            medium: 'voat',
            reddit: answers.voat,
            title,
            url,
          })
        ),
  },
  {
    name: 'reddit',
    fn: ({ url, title }) =>
      inquirer
        .prompt([
          {
            type: 'list',
            name: 'reddit',
            message: 'What reddit you would like to publish to?',
            choices: reddits,
          },
        ])
        .then(answers =>
          submit({
            medium: 'reddit',
            reddit: answers.reddit,
            title,
            url,
          })
        ),
  },
  {
    name: 'hackerNews',
    fn: ({ url, title }) =>
      submit({
        medium: 'hackerNews',
        title,
        url,
      }),
  },
  {
    name: 'linkedIn',
    fn: ({ url, title }) =>
      submit({
        medium: 'linkedIn',
        title,
        url,
      }),
  },
  {
    name: 'twitter',
    fn: ({ url, title }) =>
      submit({
        medium: 'twitter',
        title,
        url,
      }),
  },
]
const submit = ({ medium, title, url, reddit }) =>
  opn(
    {
      voat: `https://voat.co/submit?linkpost=true&title=${title}&url=${url}&subverse=${reddit}`,
      hackerNews: `http://news.ycombinator.com/submitlink?u=${url}&t=${encodeURIComponent(
        title
      )}`,
      reddit: `https://www.reddit.com/r/${reddit}/submit?title=${encodeURIComponent(
        title
      )}&url=${url}`,
      linkedIn: `https://www.linkedin.com/shareArticle?mini=true&url=${url}&source=${encodeURIComponent(
        HOSTNAME
      )}`,
      twitter: `http://twitter.com/share?url=${url}&text=${encodeURIComponent(
        title
      )}`,
    }[medium],
    {
      wait: false,
    }
  )

const argv = () =>
  yargs
    .command(
      'publish',
      'Publish your blog post for different mediums',
      {},
      async argv => {
        const pageNames = fs
          .readdirSync(pagesDirectory)
          .filter(page =>
            fs.lstatSync(`${pagesDirectory}/${page}`).isDirectory()
          )
        const pages = pageNames.map(page => ({
          url: `${HOSTNAME}/${page}`,
          title: matter(
            fs.readFileSync([pagesDirectory, page, 'index.md'].join('/'))
          ).data.title,
        }))
        inquirer
          .prompt([
            {
              type: 'list',
              name: 'page',
              message: 'Which page would you like to publish',
              choices: pages.map(p => p.title),
            },
          ])
          .then(answers => pages.find(p => p.title === answers.page))
          .then(page =>
            inquirer
              .prompt([
                {
                  type: 'list',
                  name: 'medium',
                  message: 'What medium you would like to publish to?',
                  choices: mediums.map(m => m.name).concat('All mediums'),
                },
              ])
              .then(
                answers =>
                  answers.medium === 'All mediums'
                    ? Promise.all(
                        mediums
                          .filter(m => m.name !== 'reddit' && m.name !== 'voat')
                          .map(m => m.fn(page))
                      )
                    : mediums
                        .find(m => m.name === answers.medium)
                        .fn(page)
                        .then(proc =>
                          inquirer
                            .prompt([
                              {
                                type: 'list',
                                name: 'again',
                                message: 'What next?',
                                choices: ['Exit', 'Next Action'],
                              },
                            ])
                            .then(({ again }) => {
                              if (again === 'Exit') {
                                return
                              }
                              return argv()
                            })
                        )
              )
          )
      }
    )
    .help().argv
argv()

After that, it opens a window so I can post on Reddit. Simple and beautiful!

Graphsourcing new way to build systems

Artur Czemiel — Tue, 12 Mar 2019 14:04:11 +0000

Introduction

Have you ever heard about graphsourcing? Sure you have. UML system is a system where you make graph that define your system. Then you write code which must meet the requirements of your UML diagram. Then frontend developer also have to write frontend which is compliant with UML diagram and backend. Also graphic designer is the one that should know something about UML technology.

This is too much for me.

Graphsourcing good way

Few months ago we created our own graphsourcing tool named Slothking. Learning to use it may not be an easy thing, but benefits we have from graphsourcing are huge. First of all you need to create graph which defines your system. Then you generate frontend, backend, app and so on type definitions. So everybody knows whats going on

One state to rule them all

With all the benefits of graphsourcing, the one I like most is one state. It is possible to make one state with same types on backend and frontend. With fabulous typescript autocomplete you get a superfast workflow where frontend and backend devs dont have to talk to each other.

Proof of concept

As a proof of concept we rewrote our food delivery service system Foodeli in Aexol. First phase of rewriting backend we finished ( 3 people team) in 8 hours + we had everything in one place.

It's a perfect example because Foodeli ecosystem consist of:

Administrator panel, Web
Restaurant individual panels, Web
Driver app, iOS, Android
Client app, Web

And all of them have to use the same backend system.

Code

So how graphsourcing looks in practice?

Backend

Generation command:

sloth sync nodets foodeli api.ts

Small Part of the generated code

export type DriverType = {
  _id?: ObjectId
  name: string
  phone?: string
  Address?: ObjectId | AddressType
  pushToken?: string
  snsEndpoint?: string
  snsSubscriptiom?: string
  foodeliDriver?: boolean
  User: ObjectId | UserType
  PESEL?: string
  deliveryRate?: number
}
export type GPSType = {
  _id?: ObjectId
  geoLocation?: ObjectId | geoLocationType
  Driver?: ObjectId | DriverType
  created?: Date
}

Types for endpoint and middlewares are also provided

Frontend

Generate api and state

sloth sync fetch-api foodeli api.ts

Part of frontend state

const endpoints: {
    name: string;
    endpoints: {
      addOrder: (params:{props:         {
          comments?: string;
          paymentForm: string;
          totalPrice: number;
          readyin: number;
          phone: string;
          Address: Partial<AddressType> | string;
          token: string;
        },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise<        {
          Order: OrderType;
        }>;
      myOrders: (params:{props:         {
          period?: string;
          token: string;
        },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise<        {
          Orders: OrderType[];
        }>;
      restaurantOrderDetails: (params:{props:         {
          orderId?: string;
          token: string;
        },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise<        {
          Order: OrderType;
          orderSteps: orderStepType[];
        }>;
      updateOrderStatus: (params:{props:         {
          status?: OrderStatus;
          orderId?: string;
          token: string;
        },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise<        {
          Order: OrderType;
        }>;
    }
} = foodeli: {
    name: 'foodeli',
    endpoints: {
      addOrder: ({ props, method = 'POST' }) =>
        fn(`${host}foodeli/addOrder`, {
          props,
          method,
        }).then(res => res.json()),
      myOrders: ({ props, method = 'POST' }) =>
        fn(`${host}foodeli/myOrders`, {
          props,
          method,
        }).then(res => res.json()),
      restaurantOrderDetails: ({ props, method = 'POST' }) =>
        fn(`${host}foodeli/restaurantOrderDetails`, {
          props,
          method,
        }).then(res => res.json()),
      updateOrderStatus: ({ props, method = 'POST' }) =>
        fn(`${host}foodeli/updateOrderStatus`, {
          props,
          method,
        }),
    },
  },
}
//Small part of the state
export type foodeliExtensionState = {
  Order: OrderType;
  Orders: OrderType[];
  orderSteps: orderStepType[];
  Restaurant: RestaurantType;
  restaurantDeliveryZone: restaurantDeliveryZoneType[];
  geoParams: geoParams;
  deliveryCost: deliveryCost;
  dishCategoryList: dishCategoryType[];
  DishList: DishType[];
  dishVariantList: dishVariantType[];
  dishAdditionList: dishAdditionType[];
  Drivers: DriverType[];
  Address: AddressType;
  deliveryZones: deliveryZoneType[];
  Settlements: OrderType[];
};

So you just call generated endpoint with certain params on front end and you have typed response automatically injected to state using state. If everybody were using it , it would be a huge boost to Backend Driven development

Corona SDK Apps

Yes we are writing apps in corona so we decided we should have Api generator for Corona SDK too. Here is a small part of it.

local json = require 'json'
local library = {}

function library:init(host,errHandler)
    self.errorHandler = errHandler
    self.host = host
    self.requestTab = {}
end

function library:removeRequest(id)
  for i=1,#self.requestTab do
    if self.requestTab[i] == id then
      table.remove(self.requestTab,i)
    end
  end
end

function library:addRequest(id)
  table.insert(self.requestTab,id)
end

function library:cancelRequest(id)
  for i=1,#self.requestTab do
    if self.requestTab[i] == id then
      network.cancel( self.requestTab[i] )
      table.remove(self.requestTab,i)
    end
  end
end

function library:cancelAllRequests()
  for i=1,#self.requestTab do
    network.cancel( self.requestTab[i] )
  end
  self.requestTab = {}
end
function library:aws_sns_registerDevice(callback,token,platform,applicationArn, method)
  local requestId
  if method == nil then
    method = "POST"
  end
  local function networkListener( event )
    self:removeRequest(requestId)
      if event.isError then
            if self.errorHandler then
                self.errorHandler(event)
            else
                callback(event)
            end
      else
      if callback then
        callback(event)
      end
    end
  end
  local headers = {}
  headers["Content-Type"]="application/json"
  local params = {}
  params.headers = headers
  local bodyParams = {
    token=token;
    platform=platform;
    applicationArn=applicationArn;
  }
  params.body = json.encode(bodyParams)
  requestId = network.request(self.host.."/".."aws_sns".."/".."registerDevice", method, networkListener, params )
  self:addRequest(requestId)
end

Conclusion

Graphsourcing is so powerful man, all this code has been generated from visual graph!

I presented only micro parts of it as it is a huge one!

Alpha user?

If you want to become an alpha user, mail me for instructions or you can start your self for free, just by using few repos( as this is oopen source technology )

Slothking app
CLI
Boilerplate to start with backend
State manager based on unstated

Power of typeof & typestyle in react apps

Artur Czemiel — Tue, 12 Mar 2019 14:00:20 +0000

Have you ever heard of typestyle? No? It is a great no-webpack styling solutions. In my life I tried almost everything possible:

pure CSS
SCSS
SASS
CSS modules
CSS Next
inline react styles
typestyle

Most of solutions are bundled with webpack which means if you want to write library which have extendable replacable styles included you mustn't use webpack! So automatically you need to disqualificate these solutions:

CSS Next
CSS modules
SCSS
SASS
pure CSS

So lets take a closer look on these:

inline react styles
typestyle

Inline react styles are nice but producing spaghetti code

import * as React from 'react'
export const MyInlineComponent = ({ children, style }) => (
  <div
    style={{
      fontSize: 15,
      ...style,
    }}
  >
    {children}
  </div>
)

Moreover you cannot include media and hover directives. Using onmouseover is ugly though and you need state to control that.

Lets try with typestyle then

import * as React from 'react'
import { style, classes, media } from 'typestyle'

export const MyComponentStyle = style(
  {
    fontSize: 15,
    $nest: {
      '&:hover': {
        fontSize: 18,
      },
    },
  },
  media({ maxWidth: 480 }, { fontSize: 10 })
)

// Extending the style

const MyNewStyle = classes(
  MyComponentStyle,
  style({
    color: '#0ae',
  })
)

export const MyStyledComponent = ({ children, style = '' }) => (
  <div className={classes(MyNewStyle, style)}>{children}</div>
)

Looks great yeah? It is high time for advanced programmers style solution. Imagine a component which have more styles. I will write styles in separate file for this solution

styles.tsx

import { style } from 'typestyle'

export const Title = style({
  fontSize: 18,
})
export const SubTitle = style({
  fontSize: 18,
})
export const ImageSize = style({
  width: 20,
  height: 20,
})

component.tsx

import * as React from 'react'
import * as styles from './styles'

export const MyStyledComponent = ({
  overrideStyles = {},
}: {
  overrideStyles: typeof styles
}) => {
  const componentStyles = {
    ...styles,
    ...overrideStyles,
  }
  return (
    <div>
      <div className={componentStyles.Title}>Hello</div>
      <div className={componentStyles.SubTitle}>World</div>
      <img
        className={componentStyles.ImageSize}
        src="https://source.unsplash.com/random"
      />
    </div>
  )
}

usingComponent.tsx

import * as React from "react";
import { style } from "typestyle";
import { MyStyledComponent } from "./component";

const Page = () => (
  <div>
    <MyStyledComponent
      overrideStyles={{
        Title: style({
          color: "#00F"
        })
      }}
    />
  </div>
);

Voila you can use the component and override its styles with full intelisense!! Just by using typeof on the module.

Export Color Palette from Figma to JSX

Artur Czemiel — Tue, 05 Mar 2019 12:03:50 +0000

How to export colors from figma to JSX?

I wrote simple regex that works inside VS CODE.

Select all the colors you want to export
Go to the code tab inside figma
Copy all the code to the text document in VS CODE
Use my regex1 \/\* (.*) \*\/\nbackground: #(.*); and in replace ['$1']: '#$2'
Use another regex to wipe out unwanted CSS position: absolute;\nleft:(.*);\nright:(.*);\ntop:(.*);\nbottom:(.*);\n and in replace ``

Remember to turn on regex in find and replace in VS Code

It saves like 30 minutes of composing this file for huge color palettes. It is kinda hacky, so please tell me if there is any other method.