{"id":6864,"date":"2020-09-05T11:38:28","date_gmt":"2020-09-05T09:38:28","guid":{"rendered":"https:\/\/blog.via-internet.de\/?p=6864"},"modified":"2020-09-05T11:38:28","modified_gmt":"2020-09-05T09:38:28","slug":"frontend-frontend-toolbox","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/09\/05\/frontend-frontend-toolbox\/","title":{"rendered":"Frontend | Toolbox"},"content":{"rendered":"\n

Installation Overview<\/h2>\n\n\n\n

NodeJS<\/h3>\n\n\n\n
<\/pre>\n\n\n\n
Angular<\/h3>\n\n\n\n
<\/pre>\n\n\n\n
Ionic<\/h3>\n\n\n\n
Install<\/h4>\n\n\n\n
npm install -g @ionic\/cli<\/pre>\n\n\n\n
Create App<\/h4>\n\n\n\n
ionic start Getting-Started tabs --type react<\/pre>\n\n\n\n
Start App<\/h4>\n\n\n\n
ionic serve<\/pre>\n\n\n\n
React \/ ReactJS<\/h3>\n\n\n\n
Install<\/h4>\n\n\n\n
<\/pre>\n\n\n\n
<\/h2>\n\n\n\n
React Native<\/h3>\n\n\n\n
<\/pre>\n\n\n\n
Stencil<\/h3>\n\n\n\n
npm init stencil\nnpm install --save-exact @stencil\/core@latest \nnpm install --save-dev @types\/jest@26.0.12 jest@26.4.2 jest-cli@26.4.2 \nnpm install --save-dev @types\/puppeteer@3.0.1 puppeteer@5.2.1\nnpm test\nnpm start<\/pre>\n\n\n\n
Gatsby<\/h3>\n\n\n\n
NextJS<\/h3>\n\n\n\n
NestJS<\/h3>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Usefull Libraries<\/h2>\n\n\n\n
VideoJS<\/td>HTML5 player framework<\/td>Video<\/td>Home<\/a><\/td><\/td>Github<\/a><\/td><\/tr>
Animate on Scroll<\/td><\/td>Animation<\/td>Home<\/a><\/td><\/td>michalsnik\/aos<\/a><\/td><\/tr>
ScrollMagic<\/td><\/td>Animation<\/td>Home<\/a><\/td><\/td><\/td><\/tr>
ScrollRevealJS<\/a><\/td><\/td>Animation<\/td>Home\/<\/a><\/td><\/td>jlmakes\/scrollreveal<\/a><\/td><\/tr>
PixiJS<\/td><\/td>Graphics<\/td>Home<\/a><\/td><\/td>pixijs\/pixi.jsthub<\/a><\/td><\/tr>
Anime<\/td><\/td>Animation<\/td>Home<\/a><\/td><\/td>juliangarnier\/anime<\/a><\/td><\/tr>
ThreeJS<\/td><\/td>Graphics<\/td>Home<\/a><\/td><\/td>mrdoob\/three.js<\/a><\/td><\/tr>
animate.css<\/td><\/td>Animation<\/td>Home<\/a><\/td><\/td>animate-css\/animate.css<\/a><\/td><\/tr>
HowlerJS<\/td>Audio library <\/td>Audio<\/td>Home<\/a><\/td><\/td>Github<\/a><\/td><\/tr>
RevealJS<\/td>HTML Presentation Framework<\/td>Presentation<\/td>Home<\/a><\/td><\/td>Github<\/a><\/td><\/tr>
ChartJS<\/td><\/td>Chart<\/td>Home<\/a><\/td><\/td>G<\/a>ithub<\/a><\/td><\/tr>
anime.js<\/a><\/td><\/td><\/td>Home<\/a><\/td><\/td><\/td><\/tr>
granim.js<\/td>Create fluid and interactive gradient animations<\/td>Graphics<\/td>Home<\/a><\/td><\/td>sarcadass\/granim.js<\/a><\/td><\/tr>
Multiple.js<\/td>Sharing background across multiple elements using CSS<\/td><\/td>Home<\/a><\/td><\/td>NeXTs\/Multiple.js<\/a><\/td><\/tr>
choreographer-js<\/td>A simple library to take care of complicated animations.<\/td><\/td>Home<\/a><\/td><\/td>christinecha\/choreographer-js<\/a><\/td><\/tr>
cleave.js<\/td>Format your <input\/> content when you are typing<\/td><\/td>Home<\/a><\/td><\/td>nosir\/cleave.js<\/a><\/td><\/tr>
premonish<\/td><\/td><\/td>Home<\/a><\/td><\/td>mathisonian\/premonish<\/a><\/td><\/tr>
Splitting<\/td><\/td>Animation<\/td>Home<\/a><\/td>Codepen<\/a><\/td>shshaw\/splitting\/<\/a><\/td><\/tr>
<\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
<\/td><\/td><\/td><\/td><\/td><\/td><\/tr>
<\/td><\/td><\/td><\/td><\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
More to read<\/h2>\n\n\n\n