Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tools and Projects Dec 2018 Edition

194 views

Published on

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

Published in: Technology
  • Be the first to comment

Tools and Projects Dec 2018 Edition

  1. 1. Tools & Projects Dec 2018 Edition by Jesus Manuel Olivas / weKnow
  2. 2. $ whoami Jesus Manuel Olivas jmolivas@weknowinc.com jmolivas jmolivas drupal.org/u/jmolivas jmolivas.weknowinc.com
  3. 3. Mexicali
 Mexico + California Calexico
 California + Mexico $ ifconfig
  4. 4. weAre
  5. 5. weKnow
  6. 6. weGive 3,300,780
  7. 7. JSON Server https://github.com/typicode/json-server
  8. 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. 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. 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. 11. JSON GraphQL Server https://github.com/marmelab/json-graphql-server
  12. 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. 13. Start JSON GraphQL Server { allPosts { id title User { id name } } } json-graphql-server db.js
  14. 14. react-jsonschema-form https://github.com/mozilla-services/react-jsonschema-form
  15. 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. 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. 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. 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. 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. 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. 21. docz https://www.docz.site/
  22. 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. 23. hello-world.mdx --- name: Hello world route: /hello-world --- # Hello world Hello, I'm a mdx file! > Lorem ipsum
  24. 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. 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. 26. Other tools
  27. 27. Other tools > https://codesandbox.io > https://runkit.com > https://www.prisma.io > https://code.visualstudio.com > https://www.netlify.com
  28. 28. Thank you … Questions?

×