https://github.com/inside/frontend-resources

A list of articles, books, projects, etc... about frontend development
https://github.com/inside/frontend-resources

Last synced: 3 months ago
JSON representation

A list of articles, books, projects, etc... about frontend development

• Host: GitHub
• URL: https://github.com/inside/frontend-resources
• Owner: inside
• Created: 2016-11-08T10:39:07.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-21T10:45:03.000Z (over 8 years ago)
• Last Synced: 2025-03-27T16:51:58.769Z (about 1 year ago)
• Size: 14.6 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# frontend-resources

A list of articles, books, projects, etc... about frontend development

* Books about javascript

  * Javascript

    * https://medium.com/javascript-scene/12-books-every-javascript-developer-should-read-9da76157fb3

  * Web Sites Performance

    * High performance web sites (oreilly)

    * Even faster web sites (oreilly)

    * Browser networking (oreilly)

    * https://developers.google.com/web/tools/lighthouse

  * Javascript cheatsheet

    https://github.com/mbeaudru/modern-js-cheatsheet

* Redux ressources

  * https://robwise.github.io/blog/using-flow-annotations-in-your-redux-reducers

  * http://devguides.io/redux/

  * https://css-tricks.com/learning-react-redux/

  * https://egghead.io/courses/building-react-applications-with-idiomatic-redux

  * https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

  * http://blog.getstream.io/react-redux-best-practices-gotchas/?fthr=redditreact

  * https://www.ckl.io/blog/3-simple-steps-to-improve-react-redux-code/?

  * https://github.com/markerikson/redux-ecosystem-links

  * https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44

  * Redux async operations

    See this reddit thread:

    https://www.reddit.com/r/reactjs/comments/4ui5fj/is_there_a_community_consensus_on_async_actions/

    where the redux-saga emerge to me:

    https://github.com/yelouafi/redux-saga

  * Validate the shape of your state:

    see point 2 and 3

    http://movio.co/blog/5-useful-tips-real-world-redux/

  * What file hierarchy for a redux application?

    http://marmelab.com/blog/2015/12/17/react-directory-structure.html

    https://github.com/marmelab/javascript-boilerplate

    https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346

  * A Dummy’s Guide to Redux and Thunk in React

    https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3#.hk9mhcf19

  * https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1

* App Starters

  * https://github.com/kriasoft/react-starter-kit

  * https://www.npmjs.com/package/kyt

  * Electrode, nwb, neo, next, gatsby, kyt

* Continuous integration

  * How does travis work?

    http://putaindecode.io/fr/articles/ci/travis-ci/

    http://www.raywenderlich.com/109418/travis-ci-tutorial

* Module bundlers

  * How does webpack work?

    https://egghead.io/lessons/tools-intro-to-the-production-webpack-course

    What's new in webpack 2:

    https://gist.github.com/sokra/27b24881210b56bbaff7

    http://javascriptplayground.com/blog/2016/06/react-webpack-workflow-screencast/

  * https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a

    1. Install DefinePlugin, DedupePlugin, UglifyJsPlugin, AggressiveMergingPlugin

    2. Serve gzipped file in production

* Transpilation

  * https://github.com/thejameskyle/babel-react-optimize

* CSS

  * How does css modules work?

  * https://www.sitepoint.com/how-and-why-you-should-inline-your-critical-css/

  * https://css-tricks.com/snippets/css/complete-guide-grid/

  * https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* Node modules

  * Take a deep look on how npm works

    peerDependencies: https://nodejs.org/en/blog/npm/peer-dependencies/

    https://docs.npmjs.com/

    https://www.jayway.com/2014/03/28/running-scripts-with-npm/

  * yarn, a package manager by facebook

    https://code.facebook.com/posts/1840075619545360/yarn-a-new-package-manager-for-javascript/

    yarn cheatsheet:

    https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc

* Unit testing

  * http://codeutopia.net/h/mastering-javascript-unit-testing/

  * https://thoughtbot.com/upcase/fundamentals-of-tdd

  * http://thereignn.ghost.io/a-step-by-step-tdd-approach-on-testing-react-components-using-enzyme/

  * Code coverage tool

    https://github.com/gotwarlost/istanbul

    https://github.com/douglasduteil/isparta

    (Its intention is to be used with karma and karma-coverage, which

    provides code coverage reports using istanbul.)

  * https://medium.com/selleo/testing-react-components-best-practices-2f77ac302d12

* Type systems

  * Flow and Typescript

    http://putaindecode.io/fr/articles/js/flow/

* Code linting

  * Eslint

    http://codeutopia.net/docs/eslint/

  * For a faster linting

    https://www.npmjs.com/package/eslint_d

* es6

  * Learn es6

    https://egghead.io/courses/learn-es6-ecmascript-2015

  * The spread operator

    http://putaindecode.io/fr/articles/js/es2015/rest-spread/

  * Async/await

    http://putaindecode.io/fr/articles/js/es2016/async-await/

  * Object.assign

    http://putaindecode.io/fr/articles/js/es2015/object-assign/

  * Promises

    http://www.html5rocks.com/fr/tutorials/es6/promises/

    https://bitsofco.de/javascript-promises-101/

* React

  * Look for Michael Jackson and Ryan Florence

  * HOC

    http://putaindecode.io/fr/articles/js/react/higher-order-component/

    https://www.sitepoint.com/react-higher-order-components/

  * React europe

    http://blog.mojotech.com/a-look-back-at-react-europe/

  * Isomorphic

    * https://reactjsnews.com/isomorphic-react-in-real-life

    * https://github.com/DominicTobias/universal-react

    * https://github.com/petehunt/react-server-rendering-example

    * https://github.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md

    * https://medium.com/@firasd/quick-start-tutorial-universal-react-with-server-side-rendering-76fe5363d6e#.t0xw63ksc

    * http://www.electrode.io/docs/what_is_electrode.html

    * building isomorphic javascript apps oreilly book

    * Hastening React SSR with Component Memoization and Templatization

      https://www.youtube.com/watch?v=sn-C_DKLKPE

    * https://github.com/walmartlabs/react-ssr-optimization

    * https://github.com/aickin/react-dom-stream

    * https://github.com/redfin/react-server

    * Speed up server side rendering

      https://www.youtube.com/watch?v=PnpfGy7q96U

      https://github.com/alt-j/fast-react-server

      https://github.com/alt-j/fast-react-render

      https://babeljs.io/docs/plugins/transform-react-inline-elements/

      https://github.com/facebook/react/issues/6420

    * http://putaindecode.io/fr/articles/js/react/cote-serveur/

    * https://github.com/zeit/next.js

    * Faster React SSR With Rapscallion

      https://formidable.com/blog/2017/introducing-rapscallion/

    * A service for server-side rendering your JavaScript views

      https://github.com/airbnb/hypernova

    * Scaling React Server-Side Rendering

      https://arkwright.github.io/scaling-react-server-side-rendering.html

  * React howto by pete hunt

    https://github.com/petehunt/react-howto

  * State handling

    https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c#.v5am41omg

  * React ressources, awesome list

    https://github.com/enaqx/awesome-react

  * React starter kit (boilerplate)

    https://github.com/kriasoft/react-starter-kit

    https://github.com/gaearon/react-hot-boilerplate

  * React patterns

    https://github.com/krasimir/react-in-patterns

    https://blog.risingstack.com/react-js-best-practices-for-2016/

    https://www.reactenlightenment.com

    https://medium.com/@marcacyr/domain-architecture-software-engineering-23a0510ebdf

  * Top 10 react articles in july 2016

    https://medium.mybridge.co/top-10-react-js-articles-for-the-past-month-v-july-9840fd0ddb0#.ofa9pxx8h

  * http://devtalk.com/learn-react-js/

  * React monocle, A developer tool to visualize a React application's component hierarchy.

    https://github.com/team-gryff/react-monocle

  * Binding methods in components

    http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

    http://stackoverflow.com/questions/35734008/how-to-add-arguments-to-event-handler-in-es6-react-when-functions-are-bound-in-c

  * React native

    http://nativebase.io/

  * Components

    http://blueprintjs.com/

    https://github.com/brillout/awesome-react-components

    http://jxnblk.com/rebass

  * A react faq

    https://github.com/timarney/react-faq

  * React fiber

    https://github.com/acdlite/react-fiber-architecture

  * React performance tools and articles

    https://facebook.github.io/react/docs/perf.html

    https://github.com/crysislinux/chrome-react-perf

    https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

* Express: learn how it works http://expressjs.com/

* Web Ressources to track

  https://nodejs.org/en/blog/

  https://facebook.github.io/react/blog/

  http://putaindecode.io/

* Code quality

    http://developer.telerik.com/featured/improving-quality-front-end-projects-automatically-pt-3-javascript-accessibility/

* Browser Performance

    What forces layout / reflow:

    https://gist.github.com/paulirish/5d52fb081b3570c81e3a

    see what css property triggers what:

    https://csstriggers.com/

    https://jakearchibald.com/2016/fun-hacks-faster-content/

    https://jakearchibald.github.io/isserviceworkerready/

* Immutable data

    https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md

* Progressive Web Apps

    https://developers.google.com/web/progressive-web-apps/

* Progressive loading

    https://medium.com/@lavrton/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6#.e57nyr6bf

    https://medium.com/react-weekly/code-chunking-with-webpack-a-pragmatic-approach-e17e8bcc6453

    http://brotzky.co/blog/a-beginners-step-by-step-guide-to-code-splitting-with-webpack-2-and-react-router/?utm_source=reactnl&utm_medium=email

    https://github.com/thejameskyle/react-loadable

    https://github.com/aweary/react-perimeter

* Frontend masters

    https://frontendmasters.com/courses/good-parts-javascript-web/

* Error handling

  * https://www.sitepoint.com/logging-errors-client-side-apps/

* Angular

    https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c

* Vim

  * Vim test for running your tests:

    https://github.com/janko-m/vim-test

  * Setup vim for javascript:

    https://davidosomething.com/blog/vim-for-javascript/

  * vim snippets for React

    https://github.com/epilande/vim-react-snippets

  * vim snippets for es6

    https://github.com/epilande/vim-es2015-snippets

* Misc

  * How can translation keys string not be more than 80 characters?

    http://stackoverflow.com/questions/24562849/translating-multi-line-strings-in-javascript-with-django

    https://www.gnu.org/software/gettext/manual/html_node/Long-Lines.html

  * A pool to measure the usage of tools used by the js community: http://stateofjs.com/

* DDD

  * Eric Evans

    https://www.amazon.com/Domain-Driven-Design-Tackling-Complexity-Software/dp/0321125215

  * Three Rules For Structuring (Redux) Applications

    https://jaysoo.ca/2016/02/28/organizing-redux-application/

* Metrics

  * https://github.com/rangle/redux-beacon

  * https://github.com/rangle/redux-segment

  * http://engineering.blogfoster.com/redux-for-better-in-app-analytics/

  * https://github.com/nfl/react-metrics

  * https://github.com/yahoo/react-i13n

  * https://github.com/rangle/redux-segment

* I18n internationalization

  * https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/

* UI frameworks / tookits

  * http://www.material-ui.com

    * Use it with https://www.npmjs.com/package/formsy-material-ui

  * http://blueprintjs.com

  * https://ant.design/

  * http://elemental-ui.com/

  * http://nikgraf.github.io/belle/#/?_k=gf9j9f

  * https://react-bootstrap.github.io/

  * https://grommet.github.io/

  * http://amazeui.org/react/

  * https://react.foundation/

  * https://github.com/brillout/awesome-react-components#ui-frameworks

  * https://devarchy.com/react-components

  * https://reactstrap.github.io/

  * https://github.com/Semantic-Org/Semantic-UI-React

  * https://cxjs.io/v/master/docs/intro/about

  * http://webix.com/

  * https://github.com/fex-team/fit

* GraphQL

  * https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf

* Curated items

  * https://github.com/facebook/react/wiki

  * https://codeutopia.net/blog/2017/04/03/230-curated-resources-and-tools-for-building-apps-with-react-js/

* Debugging

  * https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27

  * http://stackoverflow.com/questions/1911015/how-do-i-debug-node-js-applications/16512303#16512303

* Theming

  * https://github.com/javivelasco/react-css-themr