Frontend Development Tools

Enkele tools die we binnen ons frontend team gebruiken.

Javascript

Core JS

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

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

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

Libraries and Tools

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

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

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

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

 

HTML & CSS

CSS

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

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

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

 HTML

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/

a11y

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/