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
CLI frameworks
Boilerplates
Git
Rollup
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
Church
Nonprofit
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