Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ulrich-merkel/www.ulrichmerkel.com
This is just a playground for React and all the corresponding technologies.
https://github.com/ulrich-merkel/www.ulrichmerkel.com
babel css3 cssnext es6 javascript jsdoc playground portfolio-website react redux responsive sassdoc webpack yarn
Last synced: about 1 month ago
JSON representation
This is just a playground for React and all the corresponding technologies.
- Host: GitHub
- URL: https://github.com/ulrich-merkel/www.ulrichmerkel.com
- Owner: ulrich-merkel
- License: mit
- Created: 2016-09-07T22:24:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T03:28:48.000Z (over 1 year ago)
- Last Synced: 2024-04-14T12:31:20.220Z (5 months ago)
- Topics: babel, css3, cssnext, es6, javascript, jsdoc, playground, portfolio-website, react, redux, responsive, sassdoc, webpack, yarn
- Language: TypeScript
- Homepage: https://www.ulrichmerkel.com
- Size: 36.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# www.ulrichmerkel.com
[](https://travis-ci.org/ulrich-merkel/www.ulrichmerkel.com)
[](https://coveralls.io/github/ulrich-merkel/www.ulrichmerkel.com?branch=master)
[](https://codeclimate.com/github/ulrich-merkel/www.ulrichmerkel.com)
[](www.ulrichmerkel.com)
[](https://github.com/ulrich-merkel/www.ulrichmerkel.com)
[](https://github.com/ulrich-merkel/www.ulrichmerkel.com)
[](https://github.com/ulrich-merkel/www.ulrichmerkel.com)
[](https://lbesson.mit-license.org/)
[](https://snyk.io/test/github/ulrich-merkel/www.ulrichmerkel.com)
## About
This is just a playground for React and all the corresponding ecosystem technologies. It features the following technologies:
### Frameworks and tools
* [React](https://github.com/facebook/react) - JavaScript library for building user interfaces
* [Redux](https://github.com/reactjs/redux) - Predictable state container for JavaScript apps
* [Reselect](https://github.com/reactjs/reselect) - Selector library for Redux
* [Babel](https://babeljs.io/) - A JavaScript compiler for
Using next generation JavaScript today
* [Webpack](https://webpack.github.io/) - A bundler for JavaScript and friends
* [Express](http://expressjs.com/de/) - Fast, unopinionated, minimalist web framework for Node.js
* [CSSNext](http://cssnext.io/) - Use tomorrow’s CSS syntax today
* [SASS](http://sass-lang.com/) - Stable and powerful professional CSS extension language
* [Yarn](https://yarnpkg.com/) - Fast, reliable and secure dependency management
### Testing and linting
* [ESLint](http://eslint.org/) - The pluggable linting utility for JavaScript and JSX
* [Stylelint](https://github.com/stylelint/stylelint) - A mighty, modern CSS linter
* [Jest](https://facebook.github.io/jest) - Painless JavaScript testing framework
* [Typescript](https://www.typescriptlang.org/) - Typed JavaScript at Any Scale
* [Snyk](https://snyk.io/) - Continuously finds and fixes vulnerabilities in your dependencies
* [Node Security Platform](https://github.com/nodesecurity/nsp) - Helps you keep your node applications secure
* [RetireJS](https://github.com/RetireJS/retire.js) - Detecting the use of JavaScript libraries with known vulnerabilities
* [BackstopJS](https://garris.github.io/BackstopJS/) - An easy way for CSS regression tests
* [PageSpeed Insights](https://github.com/addyosmani/psi) - Google pagespeed insights with reporting
* [Travis CI](https://travis-ci.org/) - Test and Deploy with Confidence
* [Codeclimate](https://codeclimate.com/) - Code Climate empowers organizations to take control of their code quality
* [Coveralls](https://coveralls.io/) - Help you deliver code confidently by showing which parts of your code aren’t covered by your test suite
### Documentation
* [JSDoc](https://github.com/jsdoc3/jsdoc) - An API documentation generator for JavaScript
* [SassDoc](https://github.com/SassDoc/sassdoc) - A SCSS documentation system to build pretty docs
## Developing
### Prerequisites
This is needed to set up the dev environment:
* [Node](https://nodejs.org) - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine
* [NPM](https://www.npmjs.com/) - npm is the package manager for JavaScript and the world’s largest software registry
* [Yarn](https://yarnpkg.com/) - Fast, reliable and secure dependency management
### Setting up Dev
This project is loads environment variables from [.env](https://github.com/motdotla/dotenv) files for nodejs projects. To keep private credentials secret i don't add these files to git. Adjust the given `.env.sample` file and save it as `.env`.
If you're using [Coveralls](https://coveralls.io/) adjust the `coveralls.sample.yml` config file to fit your needs and save it as `coveralls.yml`.
### Basic NPM script commands
```Shell
$ npm run watch
```
* Start watching source files and rebuild them when changes occur.
* Build all files in development mode before start watching.
```Shell
$ npm run dev
```
* Build files in development mode, which is nearly the same as production but without minification.
* Try to run subtasks in parallel if possible.
```Shell
$ npm run build
```
* Build files in production mode, minify and optimize files as much as possible.
* Try to run subtasks in parallel if possible.
```Shell
$ npm run test
```
* Executes all testing and linting tools in parallel.
```Shell
$ npm run doc
```
* Generate JSDoc and SassDoc files and folders.
## Some links which inspired my work
### React & Webpack & JavaScript
* [Plotly Academy](http://academy.plot.ly/)
* [Component Rendering Performance in React](https://medium.com/modus-create-front-end-development/component-rendering-performance-in-react-df859b474adc#.8qyu2qbv9)
* [Getting Started with Webpack 2](https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783#.6eciwkv63)
* [Webpack — The Confusing Parts](https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.5m75wyl2e)
* [Optimizing React + ES6 + Webpack Production Build](http://moduscreate.com/optimizing-react-es6-webpack-production-build/)
* [Index as a key is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.wi9haug7n)
* [Typing React Components](https://datarockets.com/blog/typing-react-components)
* [We have a problem with promises](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html)
### Node & NPM
* [Nodejitsu](https://docs.nodejitsu.com/)
* [Node Hero - Node.js Security Tutorial](https://blog.risingstack.com/node-hero-node-js-security-tutorial/)
* [How to Use npm as a Build Tool](https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/)
* [How to Use npm Scripts as Your Build Tool](https://egghead.io/courses/how-to-use-npm-scripts-as-your-build-tool)
* [Writing cross-platform Node.js](https://shapeshed.com/writing-cross-platform-node/)
* [Using Promises with Express.js](http://first-time-ceo.tumblr.com/post/104273001643/using-promises-with-expressjs)
* [Unit testing express middleware](http://de.slideshare.net/morrissinger/unit-testing-express-middleware)
* [Introduction to Using NPM as a Build Tool](https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.1gtcn19os)
* [Testing and deploying with ordered npm run scripts](http://blog.npmjs.org/post/127671403050/testing-and-deploying-with-ordered-npm-run-scripts)
* [npm scripting: configs and arguments... and some more tricks](http://www.marcusoft.net/2015/08/npm-scripting-configs-and-arguments.html)
* [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices)
* [The Ultimate Guide to Configuring NPM](http://stackabuse.com/the-ultimate-guide-to-configuring-npm/)
* [5 steps to making a Node.js frontend app 10x faster](https://engineering.gosquared.com/making-dashboard-faster)
* [NPM vs Yarn Cheat Sheet](https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc#.ay5ro7jpv)
* [Unit testing CLI programs](https://glebbahmutov.com/blog/unit-testing-cli-programs/)
* [Awesome Node.js](https://github.com/sindresorhus/awesome-nodejs)
* [Awesome npm scripts](https://project-awesome.org/RyanZim/awesome-npm-scripts)
### Babel
* [Clearing up the Babel 6 Ecosystem](https://medium.com/@jcse/clearing-up-the-babel-6-ecosystem-c7678a314bf3#.dwkqhkv55)
* [Babel Handbook](https://github.com/thejameskyle/babel-handbook)
### Boilerplates and examples
* [Ghost](https://github.com/TryGhost/Ghost)
* [Create React App](https://github.com/facebookincubator/create-react-app)
* [Retro Board](https://github.com/antoinejaussoin/retro-board)
* [Express application generator](http://expressjs.com/en/starter/generator.html)
* [Flux React Router Example](https://github.com/gaearon/flux-react-router-example/)
* [Yahoo flux-examples](https://github.com/yahoo/fluxible/tree/master/examples)
* [Phenomic website generator](https://github.com/MoOx/phenomic)
* [React Redux Universal Hot Example](https://github.com/erikras/react-redux-universal-hot-example)
* [React Boilerplate](https://github.com/mxstbr/react-boilerplate/blob/master/README.md)
* [React Transform Boilerplate](https://github.com/gaearon/react-transform-boilerplate)
* [React, Universally](https://github.com/ctrlplusb/react-universally)
* [Advanced Boilerplate](https://github.com/sebastian-software/advanced-boilerplate)
* [Universal React Router](https://github.com/voronianski/universal-react-router-flux-2016)