@thetrg/tamed v0.1.0

Tamed

A set of web components to be included in a project. Also provides a base framework to have a working REST api server.

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

Project Libs

These are libraries that can be used at the start of any project that is using Tamed.

Frameworks

• @thetrg/tamed
• nuxt

Ui

• element-ui
• mint-ui - A mobile first Ui.
• vue-spinners - Vue Spinners for indicating async ui actions.
• page - Used for the frontend router.
• Ky - An HTTP Request lib for making ajax calls.
• Ky Universal - Universal (Browser and Server) HTTP Request lib for making ajax calls.
• FontAwesome for Vue

Development

• less
• less-loader
• VocaJs - String manipulation in Javascript.

Server

• express
• JSON Server - JSON Rest API for development
• webpack-cli

https://www.npmjs.com/package/vue-awesome


@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/vue-fontawesome

// Dependencies
npm install --save axios cross-env mint-ui page voca vue-awesome vue-spinners loglevel mitt queue reload shortid table window-or-global @thetrg/json-server github:thetrg/json-server kill-port deepmerge cors query-string

// OLD
ky ky-universal
node-fetch

// Dev Dependencies
npm install --save-dev less less-loader nodemon webpack-cli webpack-node-externals

// Create a script
- Too create linked folders for
  - static folders to tamed
  - script for installing dependencies
  - script for installing dev dependencies

Resources

Miscellaneous resources that can help in developing a project.

NuxtJs

• Set Project Port
• Is Browser or Server? - How to check which environment we are running on.
• Rollup Vue Plugin - Take Nuxt and Vue components and make them into libraries to share between projects.
• Rollup Vue Plugin Sample Repo
• General Guide to Rollup and Component Libraries
• Bili - Tool for building component libraries (very opinionated).
• Rollup General Info

Javascript and ES6

• Composition
• DocumentationJs
• JS Mixins
• JsDoc
• WalllabyJs - Continuous testing integration.
• TestCafe - Automated end to end testing.
• InchJs - Grade documentation quality of JS code.

Webpack, NodeJs, and NPM

• ReactJs + Babel + Webpack Boilerplate
• Getting Started with Webpack
• How to run and build Webpack
• Test your local NPM Module
• Understanding NPM Link
• Link Local Branch of Local Module
• Node Lib with Babel Boilerplate
• CommonJs Modules in Babel
• CommonJs Modules in Babel
• Vue Loader
• Vue Single File Web Components
• Webpack FS Fix - Fix for the build error "fs module not found"
• Sharing Libs with Lerna
• Creating Command-Line Package

Onsen Ui and Monaca

• Monaca Docs
• Components
• Component Themeing

CLI frameworks

• Seeli
• Glugun
• oclif
• Cliffy
• Cliff - Formatting the output text for the cli.
• Vorpal
• Commander
• Caporal

Boilerplates

• REST Api with Express
• REST Api with Express and Mongoose
• JSON Api Server

Git

• Productive Git for Devs

Rollup

• Make Sure Rollup runs Babel
• UMD as a possible export format
• Handling 3rd Party Dependencies

Social Network Frameworks and Libraries

• Seguir - Pure api social network.
• VueJS Mini Social Network - Sample Social network built in VueJs as part of this article.
• HumHub - Social Network framework built in PHP.

PeerToPeer Libraries and Tools

• PeerTube
• PeerTube Wiki
• Mastodon
• Mastodon Wiki(https://en.wikipedia.org/wiki/Mastodon_(software)
• Friendica

Learning and Teaching Platforms

• LearnBoost - Commercial learning platform.

Video and Images

• PeerTube - Peer to peer video sharing.

CSS and LessCSS

• Flexbox Guid
• Using REM instead of EM - Using REM because it keep font size relative to root instead of parent element.
• Webpack @Import - Work with paths that are absolute or link to some node module.

REST API

• Working with CORS
• Sending Cookies - Resolving possible issues with cookies not being set with CORS.
• Planning Center

Vue

• How To Setup Vue Js With Webpack 4 Example From Scratch - Nice a simple tutorial for setting up Vue and Webpack.
• How to configure Webpack 4 with VueJS: A complete guide - Current tutorial for setting up Vue and Webpack along with a few extras.
• Vue Webpack Boilerplate - This is the repo for the tutorial above on setting up VueJs and Webpack.
• Setting up a Vue.js Project with webpack 4 and Babel 7
• Vue Lifecycle Hooks
• Vue Reactivity
• Multiple Ways to Import - An example of how to build a module to allow for multiple ways to import.
• Render Dynamic Components
• Passing Data Back To Parent Component
• Watching Nested Props
• Recursive Components
• Passing Data to Slots
• Common Vue Gotchas
• Props vs Data
• 26 Time Saving Tips for Vue

ReactJs

• React App - A good starting point for working with React.
• React + Webpack4 + Babel 7 Tutorial - Bare manual setup for a React project.

NextJs

• Getting Started
• NextJs Transpile Modules - Allow for NextJs to compile files in node_modules folder.
• Layout Example
• Adding a Favicon
• Fix for Warning Prop ClassName - Fix for an issue with prop class names not matching the names rendered on the server. Usually just installing npm install --save-dev babel-plugin-styled-components will solve it.
• Example of Warning Prop ClassName - The babelrc is the file to focus on.
• Discussion on Warning Prop ClassName

React Ui Component Frameworks

• Material Ui - React components that implements Googles Material Design guidelines.
• Evergreen - A core set of ui components for quick prototyping.
• Gormmet - A core set of ui components used by Netflix and Boeing.
• Blueprint - For building Desktop Apps with React.
• 18 Best ReactJs Ui Toolkits as of 2019

Security

• 23+ Security Best Practices - Things to consider when locking down a NodeJs server.
• BCrtypt - NodeJs encryption Library.

Testing

• Cypress - A very nice E2E testing suite.
• Cypress Cucumber Preprocessor
• PickleJs - Used for Cypress E2E testing in Gerhkin and Cucumber style.
• Gherkin Sample 1
• Gherkin Sample 2
• Cucumber Tags

Misc

• Quill - An Opensource WYSIWYG editor for simple to complex projects.
• Passport - Authentication library compatible with Express.
• LowDB - A local db storage in JSON for projects.
• LokiJs - Local storage in JSON format.
• SQLite for NodeJs
• SQLite for NodeJs
• Tips for Integrating Vue into Legacy Site
• Github post on possible ways to build Vue Components
• Create and Publish Vue Components
• Publishing your own Vue Component Library
• Jss - Styling inside JS. Useful for React components.
• Clusterize - Display a large set of table data.
• Jets - Used for filtering DOM elements with CSS.
• ListJs - Sorting and filtering for list of items.
• Mitt - Event emitter library.
• Queue - Event queue library.
• jsPDF - Library for creating PDF files from a Javascript Api.
• The Brain - Brainmapping Software. Good for notes and brainstorming.
• KeystoneJs - A CMS platform in NodeJs.
• Orange - ORM for ArangoDB.
• Trustpilot - A customer experience and rating website.
• jsPDF - A library for generating PDF from the browser.
• html2canvas - Take screenshots of a page (can be used for PDF generation) and place it in a canvas.
• Haraka - Email receiving and sending server.
• FlatIcon - A resource of free and premium icons.
• NodeJs Request with Basic HTTP Auth - Basic HTTP Authorization with NodeJs Request library.
• NodeJs Buffer Update for Basic HTTP Auth

#####Terminal IDE?

• Slap Editor Widget - The editor component of the Slap Terminal IDE.
• Blessed Vue - A Terminal GUI based on VueJs.
• Blessed Contrib - Build Dashboards with blessed.
• HighlightJs - Highlight.js is a syntax highlighter written in JavaScript.
• VueHighlightJs - A Vue based version of the HighlightJs library.

Reference

Single Page Site and Apps

• Non Profit Inspiration Sites
• Tovo App
• Chatloop App
• Pacific SPA
• Solido
• Awwwwards Minimal Design

Church

• https://www.blessedhopechapel.org/
• Invisible Children
• The Running Charity
• Rock RMS

Nonprofit

• Adopt a Love Story
• TSE Foundation
• LifeAid

Gaming

• Isometric Tile Editor - Cool tile editor in less than 350 lines of code.
• Colyseus - Multiplayer network game lib
• Lance - Multiplayer network game lib

Credits

Icons

Icons are coming from the Flaticon site. Please visit them for more details.

• Lightbulb - Made by Chanut under Creative Commons License 3.0

Brainstorm

- Arango Dump and Restore of a Database
  - First we need to SSH into the ArangoDB docker container, ref: https://stackoverflow.com/a/30173220
  - Then we navigate to the dir: /var/lib/arangodb3
    - This should have been mounted to an actual directory on the host's computer.
  - dump a database:
    - run a command like: arangodump --output-directory "<the-output-directory>" --server.database some_existing_database
    - NOTE: In secure mode the password will be needed.
    - ref: https://www.arangodb.com/docs/3.3/administration-arangodump.html
  - restore a database:
    - run a command like: arangorestore --input-directory "<the-output-directory>" --server.database some_existing_database
    - NOTE: In secure mode the password will be needed.
    - ref: https://www.arangodb.com/docs/3.3/administration-arangorestore.html

- Server
  - Dev server
    - REST API
    - JSON server middleware
  - Webpack server
    - build vue
    - build react
    - build babel js

  - on server code change
    - build server code
    - restart server

  - Commits
    - Last REST server working
      135684a
      97a9b37
      73a35cd
      8e43dca
      2f8c03f

    - Mixins
      97a9b37


This is what typically makes up a Tamed object.

* /mario (ex: Player, User, Blog)
  * Mario.js - object
    * state, data of object
    * What would normally be extended from or mixed in
    * Contains methods to bind to ui component
    * integrates:
      * api
      * message
      * component
  * MarioApi.js - api, no logic just read write
    * fetch, raw ajax call
    * routing, specified endpoints
  * MarioMsg.js - handle recieved messages
    * logic, validation, data manipulation, and communication
    * 'some action' (ex: 'loading', 'saving', etc)
    * work on data
    * data
    * communiate
  * MarioComponent.js, MarioComponent.vue, MarioComponent
    * visual component (react, vue, ssr html, etc)
    * SomeObject.js, SomeObject.vue,
    * In the future possible component for games?
      * MarioComponent.js - 2d
      * MarioComponent.js - 3d