Frontend Development Tools

Enkele tools die we binnen ons frontend team gebruiken.

Javascript

Browser Events	https://javascript.info/introduction-browser-events
Generator functions	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
async/await	https://javascript.info/async-await
fetch	https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Javascript \| Mutating and using an array	https://www.w3schools.com/jsref/jsref_obj_array.asp
map(), filter() and reduce()	https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4
some() and every()	https://mariusschulz.com/blog/the-some-and-every-array-methods-in-javascript

node	https://nodejs.org/en/
a node version manager, eg. fnm (or nvm)	https://github.com/Schniz/fnm
npm	https://www.npmjs.com/
Publishing a package to npm	https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry
package.json	https://docs.npmjs.com/files/package.json
npx: an npm package runner	https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b
yarn	https://yarnpkg.com/lang/en/
yarn workspaces	https://yarnpkg.com/lang/en/docs/workspaces/

React - Core Concepts	https://reactjs.org/docs/hello-world.html
React-Dom	https://reactjs.org/docs/react-dom.html
React - Hooks	https://reactjs.org/docs/hooks-intro.html
React - Portals	https://reactjs.org/docs/portals.html
Redux	https://redux.js.org/introduction/getting-started
Redux React Hook	https://github.com/facebookincubator/redux-react-hook
reselect	https://github.com/reduxjs/reselect
Redux Saga	https://github.com/redux-saga/redux-saga
Redux Thunk	https://github.com/reduxjs/redux-thunk
React Router & React Router DOM	https://github.com/ReactTraining/react-router
React Pose	https://popmotion.io/pose/
Styled Components	https://www.styled-components.com/
create-react-app	https://github.com/facebook/create-react-app
classnames	https://github.com/JedWatson/classnames
query-string	https://github.com/sindresorhus/query-string
react-modal	https://github.com/reactjs/react-modal
React Developer Tools	https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Redux DevTools	https://github.com/reduxjs/redux-devtools

Flickity	https://flickity.metafizzy.co/
Popper.js	https://popper.js.org/
webfontloader	https://github.com/typekit/webfontloader
Lodash	https://lodash.com/
Ramda	https://ramdajs.com/docs/#
Immer	https://github.com/immerjs/immer
LoadJS	https://github.com/muicss/loadjs
Postscribe	https://github.com/krux/postscribe

Webpack	https://webpack.js.org/concepts
Webpack Development Server	https://github.com/webpack/webpack-dev-server
Hot Module Reloading	https://github.com/gaearon/react-hot-loader
A complete guide	https://medium.com/@jeffrey.allen.lewis/the-ultimate-2018-webpack-4-and-babel-setup-guide-npm-yarn-dependencies-compared-entry-points-866b577da6a

Babel - Core Concepts	https://babeljs.io/docs/en/
Babel - @babel/preset-env	https://babeljs.io/docs/en/babel-preset-env
Babel - @babel/babel-polyfill	https://babeljs.io/docs/en/babel-polyfill

eslint	https://eslint.org/
eslint-config-airbnb	https://www.npmjs.com/package/eslint-config-airbnb
eslint-plugin-react	https://github.com/yannickcr/eslint-plugin-react
eslint-plugin-jsx-a11y	https://github.com/evcohen/eslint-plugin-jsx-a11y
eslint-plugin-import	https://github.com/benmosher/eslint-plugin-import

CSS 3	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3
Calc	https://developer.mozilla.org/en-US/docs/Web/CSS/calc
CSS Animations	https://www.w3schools.com/css/css3_animations.asp
(CSS Animations in JS)	https://javascript.info/css-animations
CSS Transitions	https://www.w3schools.com/css/css3_transitions.asp
Flexbox	https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Grid	https://css-tricks.com/snippets/css/complete-guide-grid/
CSS Element Queries	https://github.com/marcj/css-element-queries

SASS	https://sass-lang.com/
Sass default values	https://iamsteve.me/blog/entry/understanding-sass-default-variables
Advanded SASS	https://gist.github.com/jareware/4738651
SMACSS	http://smacss.com/
BEM \| Block Element Modifier	http://getbem.com/introduction/
SASS Project Structure for Big Projects	https://medium.com/@dannyhuang_75970/sass-project-structure-for-big-projects-8c4a740846ee

postcss	https://postcss.org/
autoprefixer	https://github.com/postcss/autoprefixer
cssnano	https://cssnano.co/

HTML5	https://www.w3schools.com/html/html5_intro.asp
HTML5 Boilerplate	https://html5boilerplate.com/
Favicons (for all platforms - eg. android theme color)	https://realfavicongenerator.net/

Anysurfer Checklist	https://www.anysurfer.be/nl/in-de-praktijk/checklist
Web Accessibility Checklist	https://a11yproject.com/checklist
Web Content Accessibility Guidelines (WCAG) 2.1	https://www.w3.org/TR/WCAG21/
Accessibility Insights	https://accessibilityinsights.io/