Overview of tools and projects I did research and test during Dec.

1. Tools & Projects
Dec 2018 Edition
by Jesus Manuel Olivas / weKnow

2. $ whoami
Jesus Manuel Olivas
jmolivas@weknowinc.com
jmolivas
jmolivas
drupal.org/u/jmolivas
jmolivas.weknowinc.com

3. Mexicali
Mexico + California
Calexico
California + Mexico
$ ifconfig

4. weAre

5. weKnow

6. weGive
3,300,780

7. JSON Server
https://github.com/typicode/json-server

8. Local installation
npm install -g json-server
Create a db.json file with some data
{
"posts": [
{ "id": 1, "title": "Lorem Ipsum", "views": 254, "user_id": 123 },
{ "id": 2, "title": "Sic Dolor amet", "views": 65, "user_id": 456 }
],
"users": [
{ "id": 123, "name": "John Doe" },
{ "id": 456, "name": "Jane Doe" }
],
"comments": [
{ "id": 987, "post_id": 1, "body": "Consectetur adipiscing elit” },
{ "id": 995, "post_id": 1, "body": "Nam molestie pellentesque dui"}
]
}

9. Start JSON Server
json-server --watch db.json
Resources
* http://localhost:3000/posts
* http://localhost:3000/users
* http://localhost:3000/comments
Home
* http://localhost:3000

10. Add records using lowDB
curl -X POST "http://localhost:3000/posts"
-H "accept: application/json"
-H "Content-Type: application/json"
-d '{ "title": "Post created from the CLI", "views":100, "user_id":123}'
https://github.com/typicode/lowdb

11. JSON GraphQL Server
https://github.com/marmelab/json-graphql-server

12. Local installation
npm install -g json-graphql-server
Create a db.js file with some data
module.exports = {
{
"posts": [
{ "id": 1, "title": "Lorem Ipsum", "views": 254, "user_id": 123 },
{ "id": 2, "title": "Sic Dolor amet", "views": 65, "user_id": 456 }
],
"users": [
{ "id": 123, "name": "John Doe" },
{ "id": 456, "name": "Jane Doe" }
],
"comments": [
{ "id": 987, "post_id": 1, "body": "Consectetur adipiscing elit” },
{ "id": 995, "post_id": 1, "body": "Nam molestie pellentesque dui"}
]
}
}

13. Start JSON GraphQL Server
{
allPosts {
id
title
User {
id
name
}
}
}
json-graphql-server db.js

14. react-jsonschema-form
https://github.com/mozilla-services/react-jsonschema-form

15. Create React App
npx create-react-app my-app
Add react-jsonschema-form dependency
$ npm install react-jsonschema-form --save
Add react-jsonschema-form-semanticui dependency
$ npm install react-jsonschema-form-semanticui —-save

16. Schema
# forms/todo.js
export const schema = {
title: "Todo Form",
type: "object",
required: ["title"],
properties: {
title: {type: "string", title: "Title", default: "A new task"},
done: {type: "boolean", title: "Done?", default: false}
}
};

17. Render using ReactJS
import React, { Component } from "react";
import Form from "react-jsonschema-form";
import {schema} from ‘./forms/todo';
const log = (type) => console.log.bind(console, type);
class App extends Component {
render() {
return (
<div className="App">
<Form schema={schema}
onChange={log(“changed")} onSubmit={log(“submitted”) onError={log("errors")} />
</div>
)
}
}
export default App;

18. Schema + uiSchema + formData
# forms/registration.js
export const schema = {
title: "Todo Form",
type: “object"
}
};
export const uiSchema = {
"firstName": {
"ui:autofocus": true,
"ui:emptyValue": ""
}
}
export const formData = {
"firstName": "Chuck",
"lastName": “Norris"
}

19. Render using ReactJS
import React,{ Component } from "react";
import Form from "react-jsonschema-form";
import {schema, formData, uiSchema} from './forms/registration';
const log = (type) => console.log.bind(console, type);
class App extends Component {
render() {
return (
<div className="App">
<Form schema={schema} uiSchema={uiSchema} formData={formData}
onChange={log(“changed")} onSubmit={log(“submitted”) onError={log("errors")} />
</div>
)
}
}
export default App;

20. JSON Schema Resources
> http://json-schema.org
> https://mozilla-services.github.io/react-jsonschema-form
> https://react.semantic-ui.com/layouts/theming
> https://nilportugues.github.io/react-jsonschema-form-semanticui

21. docz
https://www.docz.site/

22. Getting Started
mkdir docz
Add dependencies (make sure you add `docz-theme-default`)
yarn add docz
yarn add docz-theme-default
Run it
yarn docz dev

23. hello-world.mdx
---
name: Hello world
route: /hello-world
---
# Hello world
Hello, I'm a mdx file!
> Lorem ipsum

24. hello-world-textarea.mdx
—
name: Hello textarea
route: /hello-textarea
---
# Hello world
Hello, I'm still a mdx file, but now I have a textarea element
```
<textarea>
Hello there, this is some text in a text area
</textarea>
```
<textarea>
Hello there, this is some text in a text area
</textarea>

25. components/Button.mdx
—
name: Button
menu: Components
---
import { Playground, PropsTable } from 'docz'
import { Button } from './Button'
# Button
Buttons make common actions more obvious and help users more easily perform
them. Buttons use labels and sometimes icons to communicate the action that
will occur when the user touches them.
<Button>Click me</Button>

26. Other tools

27. Other tools
> https://codesandbox.io
> https://runkit.com
> https://www.prisma.io
> https://code.visualstudio.com
> https://www.netlify.com

28. Thank you … Questions?