Frontend Hacks.md

Frontend

https://codepen.io/ – Web snippets for everyday use

http://tympanus.net/codrops/ – great CSS Tutorials with code examples

https://pttrns.com – Mobile Dev mooc-ups

https://www.useronboard.com/user-onboarding-teardowns/ – Make your Onboarding #1

React

• Use UI Kits and existing themes, not just only components from Material, Bootstrap, etc.
• Try Rekit - React IDE that will boost app development at hack at least 2 times.
• Use React starters/templates.

Here is very cool starter-kit for Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync kit.

And here is whole collection of kits, makes fit for almost every project, even production.

Angular

• ng add is your friend to use packages
• Use starters and existing apps

Node.js

• Use yeomann generator/loopback framework to generate CRUD REST API fast as fuck.

This (TypeScript) and this is good to use and create complete API.

You should definitely check headless CMS if your idea is to create something really fast with everything in the box. Strapi and Sanity are good for this.

ML in frontend

CAUTION! There are no way back!

You can setup and run ML models in browser much faster, than Python/C++ ones, but training may take much longer. You can use trained Python/C++ models in browser with Tensorflow.

You can use Tensorflow.js, Brain, ML.js and existing models to use right in your browser. Not every ML lib will work on the server side, keep this in mind.

Workflow

• Use Heroku/Now/GitGub Actions/Bitbucket Pipelines for CI and quick demo workflow

Landing Pages:

• https://klart.io/pixels
• https://www.awwwards.com/
• https://www.lapa.ninja/

Text Editors for Landings:

• https://paper.dropbox.com/
• https://notion.so

UX-Prototype:

• https://www.figma.com/

Landing editors:

• https://tilda.cc

• https://webflow.com

Speed test for landing page:

• https://developers.google.com/speed/pagespeed/insights/

Advanced analytics with click history:

• https://www.fullstory.com

Source: https://embacy.ru/lp/