Fix typos
This commit is contained in:
@@ -8,7 +8,7 @@ JFrog [Artifactory](https://www.jfrog.com/open-source/)is a software tool, which
|
|||||||
In addition to storage, it provides a managing interface, which also allows to store build information, properties as well as dependencies per artifact which are organized within repositories.
|
In addition to storage, it provides a managing interface, which also allows to store build information, properties as well as dependencies per artifact which are organized within repositories.
|
||||||
A fine grained security system enables easy management of which artifacts are available to whom.
|
A fine grained security system enables easy management of which artifacts are available to whom.
|
||||||
The artifacts are exposed via an HTTP(S)-Url Artifactory, which can generate package-manager compatible manifests for the repositories.
|
The artifacts are exposed via an HTTP(S)-Url Artifactory, which can generate package-manager compatible manifests for the repositories.
|
||||||
AOE utilizes Artifactory to serve Maven, Apt, Npm, Composer and Docker Repositories.
|
AOE utilizes Artifactory to serve Maven, Apt, npm, Composer and Docker Repositories.
|
||||||
|
|
||||||
In addition to storing own assets, Artifactory is able to proxy remote Repository for and cache resolved artifacts locally.
|
In addition to storing own assets, Artifactory is able to proxy remote Repository for and cache resolved artifacts locally.
|
||||||
This results in an increased build performance and decouples builds from external service dependencies and ensures builds still work even if they utilize outdated dependencies that might not be publicly available anymore.
|
This results in an increased build performance and decouples builds from external service dependencies and ensures builds still work even if they utilize outdated dependencies that might not be publicly available anymore.
|
||||||
|
|||||||
@@ -18,4 +18,4 @@ always stores the result of one task as files on the disk.
|
|||||||
On large projects where a lot of automation is required, it can get very tedious to maintain complex and parallel running tasks.
|
On large projects where a lot of automation is required, it can get very tedious to maintain complex and parallel running tasks.
|
||||||
The grunt configuration files sometimes simply don´t gave us the flexibility that we needed.
|
The grunt configuration files sometimes simply don´t gave us the flexibility that we needed.
|
||||||
|
|
||||||
Currently, our preferred way to go is either simply use [NPM scripts](https://docs.npmjs.com/misc/scripts) or rely on [Webpack loaders](https://webpack.js.org/concepts/loaders/) for file preprocessing. For non-webpack projects we also utilize Gulp.
|
Currently, our preferred way to go is either simply use [npm scripts](https://docs.npmjs.com/misc/scripts) or rely on [Webpack loaders](https://webpack.js.org/concepts/loaders/) for file preprocessing. For non-webpack projects we also utilize Gulp.
|
||||||
|
|||||||
@@ -4,9 +4,10 @@ ring: adopt
|
|||||||
quadrant: tools
|
quadrant: tools
|
||||||
---
|
---
|
||||||
|
|
||||||
Gulp is a javascript task runner much like Grunt. The tasks are written in javascript code.
|
Gulp is a JavaScript task runner much like Grunt. The tasks are written in JavaScript code.
|
||||||
|
|
||||||
It is a tool that helps you automate numerous tasks surrounding web development. A typical use is to configure preprocessors for Sass, to compile CSS or to optimize CSS, Javascript and Images.
|
It is a tool that helps you automate numerous tasks surrounding web development.
|
||||||
|
A typical use is to configure preprocessors for Sass, to compile CSS or to optimize CSS, JavaScript and Images.
|
||||||
|
|
||||||
With Gulp and its many plugins you can also do stuff such as start a web server and reload the browser if changes happen.
|
With Gulp and its many plugins you can also do stuff such as start a web server and reload the browser if changes happen.
|
||||||
|
|
||||||
@@ -17,7 +18,6 @@ npm install gulp -g
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
You also need it locally in your project, so you have to install it as a dependency in your project .
|
You also need it locally in your project, so you have to install it as a dependency in your project .
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ ring: assess
|
|||||||
quadrant: tools
|
quadrant: tools
|
||||||
---
|
---
|
||||||
|
|
||||||
[Jest](https://facebook.github.io/jest/) is a javascript testing framework by facebook to test javascript code **and** react applications / components.
|
[Jest](https://facebook.github.io/jest/) is a JavaScript testing framework by facebook to test JavaScript code **and** React applications / components.
|
||||||
|
|
||||||
We started using Jest (and [watchmen](https://github.com/facebook/watchman)) instead of Karma because it:
|
We started using Jest (and [watchmen](https://github.com/facebook/watchman)) instead of Karma because it:
|
||||||
|
|
||||||
@@ -13,6 +13,8 @@ We started using Jest (and [watchmen](https://github.com/facebook/watchman)) ins
|
|||||||
- gives us integrated code coverage report
|
- gives us integrated code coverage report
|
||||||
- automatically runs tests related to changed files (instead of all tests)
|
- automatically runs tests related to changed files (instead of all tests)
|
||||||
- gives us parallel test execution
|
- gives us parallel test execution
|
||||||
- gives us snapshot testing for react components
|
- gives us snapshot testing for React components
|
||||||
|
|
||||||
It is easy to set up. And even if you have a running setup with karma/chai you can easily replace karma with jest. With a small [workaround](https://medium.com/@RubenOostinga/combining-chai-and-jest-matchers-d12d1ffd0303#.3callo273), chai and jest test matchers work fine together.
|
It is easy to set up.
|
||||||
|
And even if you have a running setup with Karma/Chai you can easily replace Karma with Jest.
|
||||||
|
With a small [workaround](https://medium.com/@RubenOostinga/combining-chai-and-jest-matchers-d12d1ffd0303#.3callo273), Chai and Jest test matchers work fine together.
|
||||||
@@ -1,14 +1,14 @@
|
|||||||
---
|
---
|
||||||
title: "NPM"
|
title: "npm"
|
||||||
ring: adopt
|
ring: adopt
|
||||||
quadrant: tools
|
quadrant: tools
|
||||||
---
|
---
|
||||||
|
|
||||||
[NPM](https://www.npmjs.com/) is one of, if not the most, popular package manager for JavaScript. Because of the big community, you can find nearly every dependency in npm.
|
[npm](https://www.npmjs.com/) is one of, if not the most, popular package manager for JavaScript. Because of the big community, you can find nearly every dependency in npm.
|
||||||
|
|
||||||
Instead of other package managers such as [bower](/tools/bower.html), you have to write your packages as [modules](https://en.wikipedia.org/wiki/CommonJS). This unifies the way you have to use, test and, of course, understand dependencies.
|
Instead of other package managers such as [bower](/tools/bower.html), you have to write your packages as [modules](https://en.wikipedia.org/wiki/CommonJS). This unifies the way you have to use, test and, of course, understand dependencies.
|
||||||
|
|
||||||
NPM creates a tree for your dependencies and their nesting dependencies. Because of this, you don't need to handle version conflicts, since every dependency uses there own version of e.g. [webpack](/tools/webpack.html).
|
npm creates a tree for your dependencies and their nesting dependencies. Because of this, you don't need to handle version conflicts, since every dependency uses there own version of e.g. [webpack](/tools/webpack.html).
|
||||||
|
|
||||||
With [shrinkwrap](https://docs.npmjs.com/cli/shrinkwrap) you have a robust tool to lock down and manage the versions of your dependencies - following the [Pin (external) dependencies](/methods-and-patterns/pin-external-dependencies.html) approach.
|
With [shrinkwrap](https://docs.npmjs.com/cli/shrinkwrap) you have a robust tool to lock down and manage the versions of your dependencies - following the [Pin (external) dependencies](/methods-and-patterns/pin-external-dependencies.html) approach.
|
||||||
|
|
||||||
|
|||||||
@@ -15,10 +15,10 @@ therefore resolves the complete transient dependencies on the fly.
|
|||||||
Most of these package- or dependency management solutions support two artefacts:
|
Most of these package- or dependency management solutions support two artefacts:
|
||||||
|
|
||||||
* a semantic dependency definition. This defines the compatible versions of the
|
* a semantic dependency definition. This defines the compatible versions of the
|
||||||
required dependencies. (Composer: composer.json / NPM: package.json)
|
required dependencies. (Composer: composer.json / npm: package.json)
|
||||||
* a lock file defining the exact revisions of the dependencies and the transient
|
* a lock file defining the exact revisions of the dependencies and the transient
|
||||||
dependencies (dependencies of dependencies). This is created after running the
|
dependencies (dependencies of dependencies). This is created after running the
|
||||||
tool. (Composer: composer.lock / NPM: npm-shrinkwrap.json / yarn: yarn.lock).
|
tool. (Composer: composer.lock / npm: npm-shrinkwrap.json / yarn: yarn.lock).
|
||||||
|
|
||||||
We suggest the following:
|
We suggest the following:
|
||||||
|
|
||||||
|
|||||||
@@ -13,4 +13,4 @@ Sure, not all of them are useful, but the sheer number of plugins shows how easy
|
|||||||
In fact, it´s just a matter of writing a single JS function.
|
In fact, it´s just a matter of writing a single JS function.
|
||||||
|
|
||||||
Finally, PostCSS is very fast and easy to setup because it runs 100% in JavaScript.
|
Finally, PostCSS is very fast and easy to setup because it runs 100% in JavaScript.
|
||||||
Compared to [SASS](/languages-and-frameworks/sass.html) as a preprocessor, it feels much more powerful but at the same time less bloated with superfluous functionality because everything comes in its own little plugin
|
Compared to [Sass](/languages-and-frameworks/sass.html) as a preprocessor, it feels much more powerful but at the same time less bloated with superfluous functionality because everything comes in its own little plugin
|
||||||
|
|||||||
@@ -6,12 +6,10 @@ quadrant: languages-and-frameworks
|
|||||||
|
|
||||||
RX/JS aka reactive streams
|
RX/JS aka reactive streams
|
||||||
|
|
||||||
RxJS is an implementation for the reactive programming paradigm which implements mostly the observer and iterator
|
RxJS is an implementation for the reactive programming paradigm which implements mostly the observer and iterator pattern and follows the functional programming ideas.
|
||||||
pattern and follows the functional programming ideas. The pattern actually got a renaissance because it's not completely
|
The pattern actually got a renaissance because it's not completely new but has new implementations in many frameworks and languages like Angular, Akka, Spring and many more.
|
||||||
new but has new implementations in many frameworks and languages like Angular, Akka, Spring and many more. Reason for
|
|
||||||
that attention actually is (in the javascript world), that observables can be cancelled (by rules too) and observables
|
|
||||||
can pass (stream) data on multiple events. Both aspects are not well realizable using promises e.g. and both were also
|
|
||||||
detected as a huge limitation in the JavaScript community — and so it's worth to get an understanding for reactive
|
|
||||||
programming in general.
|
|
||||||
|
|
||||||
We at AOE actually use RxJS in combination with Angular and think that it's worth to dive deeper into this paradigm.
|
Reason for that attention actually is (in the JavaScript world), that observables can be cancelled (by rules too) and observables can pass (stream) data on multiple events.
|
||||||
|
Both aspects are not well realizable using promises e.g. and both were also detected as a huge limitation in the JavaScript community — and so it's worth to get an understanding for reactive programming in general.
|
||||||
|
|
||||||
|
We at AOE actually use RxJS in combination with Angular and think that it's worth to dive deeper into this paradigm.
|
||||||
|
|||||||
@@ -1,29 +1,30 @@
|
|||||||
---
|
---
|
||||||
title: "SASS"
|
title: "Sass"
|
||||||
ring: adopt
|
ring: adopt
|
||||||
quadrant: languages-and-frameworks
|
quadrant: languages-and-frameworks
|
||||||
---
|
---
|
||||||
|
|
||||||
SASS (Syntactically Awesome Style-Sheets) is an extension to native CSS, which, as a preprocessor, simplifies the generation of CSS by offering features that enable developers to more efficiently write robust, better readable and maintainable CSS.
|
Sass (Syntactically Awesome Style-Sheets) is an extension to native CSS, which, as a preprocessor, simplifies the generation of CSS by offering features that enable developers to more efficiently write robust, better readable and maintainable CSS.
|
||||||
|
|
||||||
Core features of SASS are:
|
Core features of Sass are:
|
||||||
|
|
||||||
* Nesting of rules: CSS rules can be indented, reducing redundancy of selectors and increasing readability due to shorter selectors.
|
* Nesting of rules: CSS rules can be indented, reducing redundancy of selectors and increasing readability due to shorter selectors.
|
||||||
* Use of variables: Commonly-used values such as colors can be stored in variables
|
* Use of variables: Commonly-used values such as colors can be stored in variables
|
||||||
* Mixins: Often-used CSS blocks can be referenced by using mixins, which work like functions
|
* Mixins: Often-used CSS blocks can be referenced by using mixins, which work like functions
|
||||||
* Extends: CSS properties can be inherited
|
* Extends: CSS properties can be inherited
|
||||||
* SASS files can be split into modules, which leads to smaller files and better file structures
|
* Sass files can be split into modules, which leads to smaller files and better file structures
|
||||||
* Operators: Simple math calculations can be applied to CSS properties
|
* Operators: Simple math calculations can be applied to CSS properties
|
||||||
* Easily to integrate in nodejs-environments and build tools such s [NPM](/tools/npm.html), [Gulp](/tools/gulp.html) and [Grunt](/tools/grunt.html).
|
* Easily to integrate in nodejs-environments and build tools such as [npm](/tools/npm.html), [Gulp](/tools/gulp.html) and [Grunt](/tools/grunt.html).
|
||||||
|
|
||||||
SASS has been widely adopted for many years and has evolved to an industry-standard backed by an active community since 2006.
|
Sass has been widely adopted for many years and has evolved to an industry-standard backed by an active community since 2006.
|
||||||
|
|
||||||
The learning curve is very smooth as SASS is fully compatible to CSS, meaning that all features are optional: Starting with SASS is as easy as renaming .css-files to .scss in a first step and then refactoring it step-by-step with the use of SASS features.
|
The learning curve is very smooth as Sass is fully compatible to CSS, meaning that all features are optional:
|
||||||
|
Starting with Sass is as easy as renaming .css-files to .scss in a first step and then refactoring it step-by-step with the use of Sass features.
|
||||||
|
|
||||||
At AOE, SASS has been recommended by the frontend COI and is used in nearly every current project.
|
At AOE, Sass has been recommended by the frontend COI and is used in nearly every current project.
|
||||||
|
|
||||||
More information:
|
More information:
|
||||||
|
|
||||||
* [SASS Language](http://sass-lang.com/)
|
* [Sass Language](http://sass-lang.com/)
|
||||||
* [SASSDoc](http://sassdoc.com/)
|
* [SassDoc](http://sassdoc.com/)
|
||||||
* [Improving Sass code quality on](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom) [theguardian.com](http://theguardian.com)
|
* [Improving Sass code quality on](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom) [theguardian.com](http://theguardian.com)
|
||||||
@@ -8,4 +8,4 @@ quadrant: tools
|
|||||||
|
|
||||||
Since it is integrated in tools like Confluence, IntelliJ and GitLab we use it a lot to quickly document results of software design sessions.
|
Since it is integrated in tools like Confluence, IntelliJ and GitLab we use it a lot to quickly document results of software design sessions.
|
||||||
|
|
||||||
Another similar tools that use just plain javascript to render the diagrams is [mermaid](https://mermaid-js.github.io/mermaid/#/)
|
Another similar tools that use just plain JavaScript to render the diagrams is [mermaid](https://mermaid-js.github.io/mermaid/#/)
|
||||||
Reference in New Issue
Block a user