Frontend development - nimrody/knowledgebase GitHub Wiki

• How to make your frontend project look better

Typescript

• The concise typescript book

CSS stylesheets

• Sakura theme - Require only bare HTML elements with no classes.
• Tailwind
• Simple Bascss

Charts

• observeablehq's d3 tutorial
• Chart.js
• Apex charts
• Uber's deck.gl for map based visualizations

Themes

• Light blue Vue

• React admin template with node.js backend

• Color palettes

CSS

• HTML and CSS for beginners

• Flexbox and grid

• Every layout

• BEM

Service workers (serviceworkers)

• How to bypass CORS for caching data using service workers

Boilerplate / examples

• React + firebase

Templates

• Lit-html HTML templates with html literal strings

• React

Reactive Extensions

• RX

CSS

• CSS reference

• Modern CSS for dinosaurs

• CSS Grid Garden

• Fetch API problems

• Aborting fetch API

React alternatives

• Preact

• HyperApp - ELM in Javascript

• Lit-HTML client side smart templates

Bootstrap

• Generate custom boostrap builds

• Bootstrap Shuffle - builder

• Bootstrap studio - builder

• Form layouts

• React boostrap

• React bootstrap Github

• Morteza Bootstrap-RTL for Bootstrap-3

• Bootstrap admin theme - gentelella

React

• Create React App

• React ES6 classes

• React router 4

• React Router 4 tutorial

• Alternatives to react router and here and here

Vue.js

• Using d3 with Vue.js

D3

• How to learn d3

• d3 api

• Why d3

• d3 - a linguistic introduction

• Interactive charts with D3

Other

• DomVM - minimal Virtual DOM

• hopscotch - add product tour to your app

• intro.js - add product tour to your app

• AirBnb ES6 Style Guide

• Flexbox patterns

• ES6 book

React

• Using D3 with React

• React Victory Widgets

• React Router

• React non-flux component communication patterns

• React babel webpack starter kit

• React raw patterns

• Starter kit - unicorn

• React boilerplate

• Setting up typescript with React

React forms

• forms with react and redux

• forms with react redux forms

• Example1 Example2

Visualisation

• chartjs
• Echarts
• frappe charts - no dependency

Themes

• Material Design Bootstrap Theme

• material-ui and example here

Tools

• Chrome devtools tips

  • Especially ctrl-shift-p and ctrl-o

• Generate PDF with chrome chromium-browser --headless --disable-gpu --print-to-pdf=output_file_name.pdf file:///path/to/your/html

• Webpack tutorial

• Webpack book

• Installing npm modules into home directory

  $ cat ~/.npmrc prefix=/home/nimrody/.npm-packages

  $ cat ~/.profile export NPM_PACKAGES="$HOME/.npm-packages" export PATH="$NPM_PACKAGES/bin:$PATH" export NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"