gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
guide/english/developer-tools/bower/index.md Normal file
View File

@ -0,0 +1,27 @@
---
title: Bower
---
## Bower
Bower is a package manager for the web. Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower is optimized for the front end. If multiple packages depend on a package - jQuery for example - Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.
### Install Bower
Bower is a command line utility. Install it with npm.
```shell
npm install -g bower
```
### Install Packages
Install packages with bower install. Bower installs packages to bower_components/.
```shell
bower install <package>
```
### More Information:
The Bower website: <a href='https://bower.io' target='_blank' rel='nofollow'>bower.io</a>
Manage Front End Resources with Bower: <a href='https://scotch.io/tutorials/manage-front-end-resources-with-bower' target='_blank' rel='nofollow'>scotch.io</a>
Streamline Web workflow with Bower: <a href='https://www.youtube.com/watch?v=Vs2wduoN9Ws' target='_blank' rel='nofollow'>youtube</a>
Using Bower with Heroku: <a href='https://hackernoon.com/using-bower-with-heroku-cdc791320c88' target='_blank' rel='nofollow'>medium</a>

45
guide/english/developer-tools/build-automation/index.md Normal file
View File

@ -0,0 +1,45 @@
---
title: Build Automation
---
## Build Automation
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
Build is a version of software program. The term is used in reference to a program that is still in development. Build automation is the process of automating the creation of a software build and the associated processes including: Compiling computer source code into binary code, packaging binary code and running automated tests. Build automation software automates commonly performed tasks in the software development process.
Build is automated when the steps to creating a software are repeatable, require no direct human intervention and can be performed at any time with no information other than what is stored in the source code control repository. Build automation software often integrates with software testing products, version control systems, IDEs, bug tracking tools and PaaS providers.
Historically, build automation was accomplished through 'makefiles'. Today, there are two general categories of tools for build automation:
## - Build automation utility:
Its primary purpose is to generate build artifacts through activities like compiling and linking source code.
## - Build automation servers:
They are general web based tools that execute build automation utilities on a scheduled or trigger basis; continuous integration server is a type of build automation server.
There are three subcategories to Build automation: Continuous Integration, Configuration management and other Build automation.
Below is a list of some notable tool associated with automating build processes:
- GNU make
- make
- mk
- Apache Ant
- BitBake
- Boot
- Ninja
- Qt Build system
- Rake
- Stack
- Psake
- MSBuild
- Visual Build
- Tweaker
- Waf
- [Jenkins](https://jenkins.io/)
- TeamCity and others.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href="https://www.agilealliance.org/glossary/automated-build/#q=~(filters~(postType~(~'page~'post~'aa_book~'aa_event_session~'aa_glossary~'aa_organizations~'aa_research_paper~'aa_video)~tags~(~'automated*20build))~searchTerm~'~sort~false~sortDirection~'asc~page~1)">What is Build Automation?</a> <br>
<a href="https://en.m.wikipedia.org/wiki/List_of_build_automation_software">List of Build Automation Software</a> <br>
<a href="https://en.m.wikipedia.org/wiki/Build_automation">Build Automation - Wikipedia</a> <br>
<a href="https://www.webopedia.com/TERM/B/build.html">Webopedia</a> <br>
<a href="https://www.g2crowd.com/categories/build-automation">Build Automation</a>

22
guide/english/developer-tools/certbot/index.md Normal file
View File

@ -0,0 +1,22 @@
---
title: Certbot
---
## Certbot
Certbot is a client for [Let's Encrypt](https://guide.freecodecamp.org/developer-tools/lets-encrypt), created by the EFF (Electronic Frontier Foundation). It allows users to create and automatically renew SSL certificates from Let's Encrypt. A Let's Encrypt certificate can last 90 days so Certbot will automatically fetch a new cert before the old ones expires.
#### System Requirments
- Unix-based OS
- Terminal Root Access
- Python 2.7 or 3.4^
#### Implementation
Depending on your server environment, CertBot is should be reletively easy to setup. [This](https://certbot.eff.org/) website is a great place to go to get a step-by-step guide for most hosting environments. In order to setup it is crucial that you have root terminal access to the hosting enviornment. If you don't or aren't familiar with the terminal check to see if host has direct integration with Let's Encrypt.
#### More Information:
- https://certbot.eff.org/ \
Automatically enable HTTPS on your website with EFF's Certbot, deploying Let's Encrypt certificates.
- https://guide.freecodecamp.org/developer-tools/lets-encrypt \
Learn more about what Let's Encrypt is.

64
guide/english/developer-tools/chef/index.md Normal file
View File

@ -0,0 +1,64 @@
---
title: Chef
---
## Chef
Chef is an automation tool that transforms infrastructure into code. In other words, it is a tool that is used to automate the creation and configuration of your infrastructure. It is also used to maintain your infrastructure once it is created.
### Why use Chef
There are several things to consider before a fully completed and tested application goes to production. Some of the main things are,
* Infrastructure creation (cloud or on-premisis)
* Configuration
* Maintain infrastructure
You can manually create your infrastructure, configure it and maintain it. It is a very tedious process and the chances of making a mistake is high. Anything manual requires a lot of attention to details, training other in your team and constantly keeping an eye on it to make sure everything is working as expected. If your application evolves quickly then every time it goes to production you have to do all these work manually.
Chef is a tool that helps in automating this process. You write code (chef uses *Ruby*) for your infrastructure and source control it. Chef will read this code to create and configure your infrastructure automatically. The advantages of using Chef are,
* Infrastructure creation and configuration is automated
* Monitoring and maintaining is automated
* Chances of a mistake is negligible
* Infrastructure is source controlled
* Deploy application quickly and often
### Big picture and Components
![Chef big picture](https://docs.chef.io/_images/chef_overview.svg "Chef overview")
The main components are,
* Cookbook and Recipes
* Node
* Workstation
* Chef Server
* Chef Client
#### Cookbook and Recipes
A Cookbook is the fundamental unit of configuration. It defines a scenario and contains everything that is required to support that scenario. Cookbook contains the following things,
* Recipes
* Attribute values
* File distributions
* Templates
* Extensions to custom resources and libraries
Recipe is the most fundamental configuration element. It is authored using *Ruby* and consists of a collection of resources that is required to configure a system. It must be stored in a Cookbook.
#### Node
A node is any machine that is managed by Chef. It can be physical, virtual, cloud, network device, etc,.
#### Workstation
Workstation (the blue region in big picture) is a computer running the Chef Development Kit (ChefDK) to develop and test cookbooks and recipes. Basically, it is your local machine where you write and test Chef scripts that is used later for automating Infrastructure. Chef scripts from Workstation is uploaded to Chef Server once it is ready.
#### Chef Server
The chef server acts as a hub for configuration data. It stores all the configuration data such as cookbooks, recipes, templates and file distributions that are needed for Infrastructure creation and configuration.
#### Chef Client
A Chef Client is an agent that runs locally on every node that is managed by Chef. It communicates with the Chef Server to get configuration data that is needed to configure the node. The Chef client is responsible for running all the required steps to bring a node into the expected state. The different steps include,
* Registering and authenticating the node with the Chef server
* Synchronizing Cookbooks
* Compiling and running the required recipes
* Handling exceptions and notifications
#### More Information:
A more detailed documentation can be found here - [Chef documentation](https://docs.chef.io/chef_overview.html "Chef")

23
guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/index.md Normal file
View File

@ -0,0 +1,23 @@
---
title: Chrome Developer Tools
---
## Chrome Firefox Development Tools
Chrome and Firefox Developer tools assist web developers in analyzing the HTML, CSS and Javascript on a web page. They are useful for debugging, optimizing code, inspecting elements and much more.
**Features:**
* **Page Inspector:** View and edit page content and layout.
* **Web Console:** See javascript console.log() messages and erros
* **JavaScript Debugger:** View and modify JavaScript running on a page
* **Network Monitor:** See network requests made when pages are loaded
* **Performance Tools:** Analyze computer resources used by the site
### Accessing the development tools
1. In the menu bar at the top of the screen select View > Developer > Developer Tools. The tools will appear on the bottom, side, or as a pop-out window.
2. On a web page right click on an element. When the menu appears select ‘Inspect’.
### More Information:
* [Chrome DevTools](https://developer.chrome.com/devtools)
* [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools)

15
guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/javascript-console/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: JavaScript Console
---
## JavaScript Console
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/chrome-developer-tools/javascript-console/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/javascript-debugger/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: JavaScript Debugger
---
## JavaScript Debugger
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/chrome-developer-tools/javascript-debugger/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/network-performance/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Network Performance
---
## Network Performance
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/chrome-developer-tools/network-performance/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/profiling-memory-and-execution/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Profiling Memory and Execution
---
## Profiling Memory and Execution
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/chrome-developer-tools/profiling-memory-and-execution/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/render-performance/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Render Performance
---
## Render Performance
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/chrome-developer-tools/render-performance/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

13
guide/english/developer-tools/developer-tools-in-browsers/chrome-developer-tools/screenshot-utility/index.md Normal file
View File

@ -0,0 +1,13 @@
---
title: Useful screenshot shortcuts
---
### DevTools screenshot functionality
When using Chrome developer tools, it can be useful to capture a screenshot of the entire page. And while there are add-ons to achieve this, google chrome has it's own functionality built in.
## Steps
1. Open Chrome Devtools
2. in Devtools Ctrl+P (Cmd+P on Mac)
3. Start typing >screenshot
4. Choose from the available functions (capture full size screenshot has been by far my most useful)
5. Enjoy your new screenshot

15
guide/english/developer-tools/developer-tools-in-browsers/firefox-developer-tools/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Firefox Developer Tools
---
## Firefox Developer Tools
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/firefox-developer-tools/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/developer-tools/developer-tools-in-browsers/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Developer Tools in Browsers
---
## Developer Tools in Browsers
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

15
guide/english/developer-tools/developer-tools-in-browsers/internet-explorer-developer-tools/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Internet Explorer Developer Tools
---
## Internet Explorer Developer Tools
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/developer-tools/developer-tools-in-browsers/internet-explorer-developer-tools/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

71
guide/english/developer-tools/docker/index.md Normal file
View File

@ -0,0 +1,71 @@
---
title: Docker
---
[logo]: https://www.docker.com/sites/default/files/Whale%20Logo332_5.png "Docker"
Docker is an open-source software aimed at facilitating application deployment. It offers the possibility to build containers, including an operating system,
libraries and all you need to run your application. Therefore, your application can then be deployed on any machine. Its lightweight structure enables you to
run several containers on the same machine. A container image is a lightwieght, stand-alone, executable package of a piece of software that includes everything
needed to run it.
### Features
Docker containers running on a single machine share that machine's operating system kernel; they start instantly and use less compute and RAM. Images are
constructed from filesystem layers and share common files. This minimizes disk usage and image downloads are much faster.
Docker containers are based on open standards and run on all major \*nix distributions, Microsoft Windows, and on any infrastructure including VMs, bare-metal
and in the cloud.
Docker containers isolate applications from one another and from the underlying infrastructure. Docker provides the strongest default isolation to limit app
issues to a single container instead of the entire machine.
## Overview
A container image is a lightweight, stand-alone, executable package of a piece of software that includes everything needed to run it: code, runtime, system tools, system libraries, settings. Available for both Linux and Windows based apps, containerized software will always run the same, regardless of the environment. Containers isolate software from its surroundings, for example differences between development and staging environments and help reduce conflicts between teams running different software on the same infrastructure.
### See also
- Docker Compose : to create and manage several containers at the same time.
### Containers Vs. Virtual Machines
* Containers virtualise the Operating System making them more portable, whereas VMs virtualise the hardware.
* Containers are an abstraction at the application layer that packages code and dependencies together. VMs are an abstraction of physical hardware turning one server into many. Hypervisor helps VM to do so.
* [CONTAINERS ARE NOT VMS](https://blog.docker.com/2016/03/containers-are-not-vms/)
### Installation of Docker
Docker is available in two editions: Community Edition (CE) and Enterprise Edition (EE).
[Install it from here](https://docs.docker.com/engine/installation/)
Once installed try this
```
$ docker run hello-world
Hello from Docker!
```
This message shows that your installation appears to be working correctly.
### Where to use Docker
* [8 Proven Real-World Ways to Use Docker](https://www.airpair.com/docker/posts/8-proven-real-world-ways-to-use-docker)
* [What is Docker and When to Use It](https://www.ctl.io/developers/blog/post/what-is-docker-and-when-to-use-it/)
### Docker Tutorials
* [Documentation](https://docs.docker.com/get-started/)
* [Docker for beginners](https://docker-curriculum.com/)
* [Docker Tutorials and Courses](https://hackr.io/tutorials/learn-docker)
* [Docker Training. Learn Docker From Docker. Official Docker Training.](https://training.docker.com/)
#### More Information:
You can find plenty of information in the following sites :
- <a href='https://www.docker.com/' target='_blank' rel='nofollow'>Docker website</a>
- <a href='https://docs.docker.com/' target='_blank' rel='nofollow'>Docker docs</a>
- <a href='https://hub.docker.com/' target='_blank' rel='nofollow'>DockerHub</a>

118
guide/english/developer-tools/grunt/index.md Normal file
View File

@ -0,0 +1,118 @@
---
title: Grunt
---
## Grunt
`Grunt` is a JavaScript Task Runner you can use to automate repetitive tasks.
### Why Use Grunt?
There are many repetitive tasks in web development. For example: compiling, minifying, and copying files. Doing these tasks manually takes a lot of effort and time.
You will make your job easier with Grunt. You only need to configure the tasks through a <a href='https://gruntjs.com/sample-gruntfile' target='_blank' rel='nofollow'>Gruntfile</a>.
### Getting Started
1. Install <a href='https://www.npmjs.org/' target='_blank' rel='nofollow'>npm</a>.
2. Install Grunt's command line interface (CLI) globally with `npm install -g grunt-cli`.
3. List Grunt and the Grunt plugins as devDependencies in a `package.json` file.
4. Install Grunt and the Grunt plugins with `npm i`.
5. Configure tasks in a `Gruntfile.js` file.
6. Run Grunt with `grunt`.
### Example
Below is an example of a `package.json` and `Gruntfile.js` to do the following tasks:
1. Minify HTML files.
2. Add vendor prefixes and minify CSS file.
3. Concatenate and minify JavaScript files.
4. Minify images.
#### package.json
```json
{
"name": "project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "latest",
"grunt-contrib-htmlmin": "latest",
"grunt-postcss": "latest",
"autoprefixer": "latest",
"cssnano": "latest",
"grunt-contrib-uglify": "latest",
"grunt-contrib-imagemin": "latest",
}
}
```
#### Gruntfile.js
```javascript
module.exports = function(grunt) {
grunt.initConfig({
htmlmin: {
options: {
removeComments: true,
collapseWhitespace: true
},
html: {
files: [{
expand: true,
cwd: "src/",
src: "**/*.html",
dest: "dest/"
}]
}
},
postcss: {
options: {
processors: [
require("autoprefixer")(),
require("cssnano")()
]
},
css: {
src: "dest/css/*.css"
}
},
uglify: {
js: {
files: {
"dest/js/main.js": "src/js/*.js"
}
},
},
imagemin: {
img: {
options: {
optimizationLevel: 5,
quality: 75
},
files: [{
expand: true,
cwd: "src/img/",
src: "**",
dest: "dest/img/"
}]
}
},
});
grunt.loadNpmTasks("grunt-contrib-htmlmin");
grunt.loadNpmTasks("grunt-postcss");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-imagemin");
grunt.registerTask("default", ["htmlmin", "postcss", "uglify, imagemin"]);
};
```
#### More Information:
Grunt documentation: <a href='https://gruntjs.com/getting-started' target='_blank' rel='nofollow'>Getting Started</a>

63
guide/english/developer-tools/gulp/index.md Normal file
View File

@ -0,0 +1,63 @@
---
title: Gulp
---
## Gulp
`Gulp` is a JavaScript task runner that is used for automating various tasks that are parts of a JavaScript development workflow.
It is used to run tasks that you have programmed, and its main use case is to perform repetitive actions that are used as a path of the build process for a JavaScript project.
### Why Gulp is Useful
These tasks often include things like `code minification` (removing whitespace from html files and shortening variable names to make the file size smaller) and `css bundling` (Converting multiple CSS files into one for distribution with your app), which are needed to optimize code to load fast in a web browser.
The reason that `Gulp` is useful in the above situations is that the minification and bundling process needs to potentially happen with every change. It would not be efficient to do this manually with every change, which is where a tool like `Gulp`, that does this automatically is a great tool for JavaScript developers.
As well as the relatively simple examples above, `Gulp` has hundreds of plugins to enable it to automate more complex tasks. These tasks can include things like:
- Running unit tests to test your code is working correctly.
- Refreshing your web browser any time a file is saved, allowing your changes to be viewed instantly.
- Conversion of `SASS` / `LESS` to `CSS`, so that it can be used in a browser.
- Optimising images to create `web friendly` versions with lower file sizes for speed.
### How to use Gulp
To start using `Gulp`, the first step is to install it using `npm`. After it is installed, a `gulpfile.js` has to be created. This `gulpfile` is a file that contains all the `Gulp` tasks that should run as part of your automated process. The tasks are written in JavaScript. Below is a very simple example of a `gulpfile`, which takes any `CSS` files from the `client/templates` folder, minifies them and puts the minified file in the `build/css` folder.
```javascript
var gulp = require('gulp');
var minifyCSS = require('gulp-csso');
gulp.task('css', function(){
return gulp.src('client/templates/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
```
To run this gulp task, all you would have to do is type `gulp css` in a terminal in your project root.
To watch the CSS files for any changes and run the "css" task after it is saved.
```javascript
gulp.watch('css')
.on('change', ['css']);
```
### Task Dependencies
By default gulp will run all of the tasks defined at the same time and wait for nothing. To run multiple task in the correct order, you can add a task as a dependencies to another task.
```javascript
gulp.task('two', ['one'], function() {
// task 'one' is done now
});
```
With the code snippet above, task `two` will only run after task `one` is completed.
Gulpfiles can have multiple tasks per file, and tasks can also be split up into multiple files for an organization. This, along with the 100's of plugins available make it a very flexible and useful framework for JavaScript developers.
#### More Information:
<a href="https://gulpjs.com/" target='blank' rel='nofollow'>Gulp website</a>
<a href="https://github.com/gulpjs/gulp" target='blank' rel='nofollow'>Gulp github repository</a>
<a href="https://css-tricks.com/gulp-for-beginners/" target='blank' rel='nofollow'>Gulp begginers guide</a>

25
guide/english/developer-tools/ide-integrated-development-environments/arm-mbed/index.md Normal file
View File

@ -0,0 +1,25 @@
---
title: Mbed
---
## The Mbed development platform
Mbed is an online IDE and operating system that allows developers to code **hardware** applications using just a web browser and an internet connection. Similar to Arduino, the platform is oriented to development for IoT devices that have an ARM Cortex-M architecture.
The compilation of the sofware is done on a remote server, allowing the user to download the resulting output binary that then can be drag-and-dropped into compatible devices to run.
### How does it work?
Manufacturers are able to upload library components that add support for using their devices and its components (sensors, LEDs, buttons, communication interfaces) with Mbed. Combining this with the _Hardware Abstraction Layer_ (HAL) Mbed can run transparently on different manufacturer hardware, abstracting out the lower level specifics to the end developer, that just needs to code using the APIs provided.
All the coding can then be done in C++, benefitting from Object-Oriented Programming applied to hardware.
### Additional resources
- [ARM Mbed website](https://www.mbed.com/en/)
- [Official Documentation](https://os.mbed.com/docs/v5.10)
- [A thorough review on Hackaday, including the first compatible hardware](https://hackaday.com/2009/11/21/review-mbed-nxp-lpc1768-microcontroller/)
### Alternatives
- [Particle](https://www.particle.io)

22
guide/english/developer-tools/ide-integrated-development-environments/index.md Normal file
View File

@ -0,0 +1,22 @@
---
title: Integrated Development Environments (IDEs)
---
## Integrated Development Environments (IDEs)
An Integrated Development Environment (IDE) is a software that consolidates the basic tools developers need to write and test software in one application.
IDEs offer a central graphic user interface (GUI) that incorporates the following: *a code editor, a compiler or interpreter, a debugger, and build automation tools.*
Examples of IDEs are:
- [NetBeans](https://netbeans.org/)
- [Eclipse](https://www.eclipse.org/)
- [IntelliJ IDEA](https://www.jetbrains.com/idea/)
- [Visual Studio](https://www.visualstudio.com/vs/)
- [Xcode](https://developer.apple.com/xcode/)
- [Android Studio](https://developer.android.com/studio/index.html)
- [PyCharm](https://www.jetbrains.com/pycharm/)
#### More Information
[AppSec Knowledge Base](https://www.veracode.com/security/integrated-development-environments)
[Eclipse.org](https://www.eclipse.org/home/) - an open source community of tools, project and collaborative working groups
[Top IDEs: 51 Powerful Dev Environments for Streamlined Development by Stackify](https://stackify.com/top-integrated-developer-environments-ides/)

12
guide/english/developer-tools/index.md Normal file
View File

@ -0,0 +1,12 @@
---
title: Developer Tools
---
## Developer Tools
In this section, we'll explain a wide variety of tools used by developers.
Some examples of these tools:
- Version control systems
- DevOps tools
- Build tools
- Package managers

15
guide/english/developer-tools/kubernetes/index.md Normal file
View File

@ -0,0 +1,15 @@
---
title: kubernetes
---
# Kubernetes
"Kubernetes is an open-source system for automating deployment, scaling, and management of containerized applications.It groups containers that make up an application into logical units for easy management and discovery.<sup>1</sup>"
### Links:
* [Kubernetes on GitHub](https://github.com/kubernetes/kubernetes)
* [Kubernetes website](https://kubernetes.io)
* [Kubernetes tutorial](https://kubernetes.io/docs/tutorials/kubernetes-basics/)
### Sources:
* The Kubernetes Authors, 2017, kubernetes.io. Accessed 27 Oct. 2017.

19
guide/english/developer-tools/lets-encrypt/index.md Normal file
View File

@ -0,0 +1,19 @@
---
title: Let's Encrypt
---
## Let's Encrypt
Let's Encrypt is a free to use Certificate Authority. Most all browsers support and trust Let's Encrypt certificates. A CA certificate is a required for serving your site over HTTPS and getting browsers to trust the site.
The easiest way to get started with Let's Encrypt is by using [certbot](https://certbot.eff.org/), a popular Let's Encrypt client that will help you with easily deploying and maintaining your SSL certificate. A Let's Encrypt certificate is set to expire after 90 day's and can be renewed whenever. The 90 days may seem like a short time, but clients like certbot can help you to automate the renewal of the cert.
There are a plethora of Let's Encrypt [clients](https://letsencrypt.org/docs/client-options/) aside from certbot so you can expect Let's Encrypt to be easy to implement on your server.
If you are hosting off of a VPS/dedicated server you don't have to worry about Let Encrypt support. However, if you are on a shared hosting plan your host will have to have Let's Encrypt [specifically](https://community.letsencrypt.org/t/web-hosting-who-support-lets-encrypt/6920) explicitly provided.
#### More Information:
https://letsencrypt.org/
Let’s Encrypt is a free, automated, and open Certificate Authority.
https://community.letsencrypt.org/t/web-hosting-who-support-lets-encrypt/6920
A list of shared host who support Let's Encrypt.
https://letsencrypt.org/docs/client-options/
A List of of Let's Encrypt clients.

14
guide/english/developer-tools/markdown/index.md Normal file
View File

@ -0,0 +1,14 @@
---
title: Markdown
---
## Markdown
Markdown is a lightweight markup language with plain text formatting syntax. It is designed so that it can be converted to HTML and many other formats using a tool by the same name. Markdown is often used to format README files, for writing messages in online discussion forums, and to create rich text using a plain text editor. You can also write Markdown in your text editor (like Sublime Text or Visual Studio Code).
Markdown is gaining in visibility and popularity through the emergence of streamlined, "distraction-free" text editors.
## More Information:
A cheatsheet is one of the easiest way to learn Markdown. Check out <a href='https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet' target='_blank' rel='nofollow'>this popular cheatsheet</a>.
You can also check out this online tutorial: <a href='https://www.markdowntutorial.com' target='_blank' rel='nofollow'>Markdown Tutorial</a>
Love learning by videos? Check out <a href='https://www.youtube.com/watch?v=HndN6P9ke6U' target='_blank' rel='nofollow'>this Youtube video</a>

116
guide/english/developer-tools/npm-cheatsheet/index.md Normal file
View File

@ -0,0 +1,116 @@
---
title: npm Cheat Sheet
---
## npm Cheat Sheet
A list of terminal commands and flags to help use `npm`
## install `package.json` dependencies
```shell
npm install
```
**Shorthand**
```shell
# install
npm i <package>
# uninstall
npm un <package>
# update
npm up <package>
```
## List globally installed packages.
```shell
npm list -g --depth=0
```
## Uninstall global package
```shell
npm -g uninstall <name>
```
## Upgrade NPM on Windows
After trying several times to upgrade npm on Windows I found this whilst poking around in the npm folders.
```shell
npm-windows-upgrade
```
## Updating global packages
To see which packages need updating, use:
```shell
npm outdated -g --depth=0
```
To update global packages individually you can use:
```shell
npm update -g <package> <package> <package>
```
## list available scripts to run
```shell
npm run
```
## update npm
```shell
npm install -g npm@latest
# using windows? Then use
npm-windows-upgrade
```
## flags
`-S` is the same as `--save` not needed in npm 5+
`-D` is the same as `--save-dev`
## installed version
```shell
npm list # for local packages
```
## Node Version Manager `nvm`
nvm is a popular version manager for npm. It lets you install multiple npm instances on the same machine, giving you the opportunity to also have different versions for global packages, for each npm installation. You can find [more information on nvm here](https://github.com/creationix/nvm).
Say you want to install Node v6.9.1 you would write on the terminal:
```shell
nvm install 6
```
If you have multiple versions of Node.js installed on your workspace, you can switch to a specific version by writing:
```shell
nvm use 4.8.4
```
If you want to install another version of Node.js and also re-install all global packages from another installed version:
```shell
nvm install 8.11.1 --reinstall-packages-from=4.8.4
```
### Making a node version default.
In order to set a default version of node for your workspace, just type:
```shell
nvm alias default 6
```
Where 6 was the version you wanted to be used as default.

53
guide/english/developer-tools/npm/index.md Normal file
View File

@ -0,0 +1,53 @@
---
title: npm
---
## npm
npm is a package manager and is used to install and manage dependencies.
npm is central to the vibrant JavaScript(and specifically the Node.js) community, by making module and code reusability across projects very simple.
Currently, npm has upwards of 500,000 available packages.
npm is useful not only for server-side projects. Most popular front-end libraries like Bootstrap and Font Awesome are available too.
**Note:**
* npm comes out of the box with Node.js so it's necessary to install Node.js first
* npm has no full form because of its usage beyond Node.js specific projects. It was formerly called Node Package Manager.
### npm Usage
npm is commonly used from the command line. The commands given below are arguably the most important ones to get you started:
```
npm init
```
Running this command in your project's root directory initializes it for use with npm by creating a `package.json` file. You will be prompted for the
project's name, description, author's name and more. This information is then used to populate the `package.json` file, which will also hold the
information about the project's dependencies and requirements. You can alter that information manually later.
```
npm install [name-of-package]
```
This installs a package and all its dependencies automatically, and saves it in the `package.json` file. If you are installing a development dependency,
you may want to use the `--save-dev` or `-D` switch. npm will then save the package as a development dependency.
Packages are installed locally in the `node_modules` directory in your project's root directory. Sometimes you may want to have a package available across
different projects. This is done with the `--global` or `-g` switch. This is often useful for development tools and command line utilities.
```
npm install
```
Running npm install in a project's root directory without a specific package name, installs all the dependencies required for that project. Those are
calculated according to the project's `package.json` file. This demonstrates the power of npm, where a single command can fetch tens or hundreds of
dependencies automatically for you, and is useful when you `git clone` a repository, for example.
#### More Information:
* Node.js website: <a href='https://nodejs.org' target='_blank' rel='nofollow'>nodejs</a>
* The official website of npm, you can read about npm as well as search for the different available packages: <a href='https://www.npmjs.com' target='_blank' rel='nofollow'>npmjs</a>
* Read more about npm: <a href='https://en.wikipedia.org/wiki/Npm_(software)' target='_blank' rel='nofollow'>Wikipedia</a>
* A Beginner's Guide to npm: <a href='https://www.sitepoint.com/beginners-guide-node-package-manager/' target='_blank' rel='nofollow'>sitepoint</a>
* If you want a comprehensive video series, check this out: <a href='https://youtu.be/6fj0cpmMiVg' target='_blank' rel='nofollow'>youtube</a>
* And here's the official series from npm: <a href='https://youtu.be/pa4dc480Apo' target='_blank' rel='nofollow'>youtube</a>

54
guide/english/developer-tools/puppet/index.md Normal file
View File

@ -0,0 +1,54 @@
---
title: Puppet
---
## Puppet
Puppet is a configuration management tool that allows you to automate the configuration and management of your infrastructure. This helps you save time by automating repetitive tasks and ensuring your systems are kept in a desired state.
Puppet comes in two varieties, Puppet Enterprise and open source Puppet. The supported platforms include most Linux distributions, various UNIX platforms, and Windows.
Puppet was developed by [Puppet Labs](https://puppet.com/company).
### Getting Started
You can configure your infrastructure either in a client/server architecture or in a stand-alone architecture. The former uses the Puppet `agent` and the Puppet `master` applications, while the latter uses the Puppet `apply` aplication.
#### Agent/Master Architecture
In this architecture one or more nodes run the Puppet master application. The master servers control the configuration information of the complete infrastructure.
Managed nodes run the Puppet agent application as a background service, and periodically request their configuration `catalog` from the Puppet master(s).
The Puppet master compiles and returns each nodes catalog, using multiple sources of information. This gathered information is know as `facts`.
Once a Puppet agent receives a catalog, it checks each resource described in it. If a resource is not in the desired state, the agent corrects it.
#### Stand-Alone Architecture
In this architecture each managed node has the copy of the complete configuration.
Each Puppet agent runs the apply application as a scheduled task or cron job.
As in the agent/master architecture, the Puppet apply compiles the catalog and checks each described resource. If a resource is not in the desired state, Puppet apply will correct it.
Like the Puppet master application, Puppet apply needs access to several sources of configuration data, which it uses to compile a catalog for the node it is managing.
#### Catalog
A catalog is a document that specifies the configuration of a machine. It lists all the resources that need to be managed, their desired state, and any dependencies between them.
Puppet configures a system by first compiling a catlog and then applying it.
#### Facts
Puppet gathers facts about all the nodes with a tool called `facter`. Facter gathers the information needed to configure the system. For instance, hostnames, IP addresses, OS names, among others. However, it is also possible to add additional facts.
For more information, see the documentation for the Puppet architecture.
#### More Information:
* Puppet official [website](https://puppet.com)
* An overview of the Puppet [architecture](https://puppet.com/docs/puppet/5.3/architecture.html)
* How To Use Puppet to Manage Your Servers. A series of tutorials from [DigitalOcean](https://www.digitalocean.com/community/tutorial_series/how-to-use-puppet-to-manage-your-servers-2)

34
guide/english/developer-tools/source-code-editors/adding-snippets-to-your-sublime-text-installation/index.md Normal file
View File

@ -0,0 +1,34 @@
---
title: Adding Snippets to Your Sublime Text Installation
---
If you are a user of sublime text (I hope you are, it kicks ass. You can get it <a href='https://www.sublimetext.com/' target='_blank' rel='nofollow'>here</a>), then you may have already noticed some of the tab completion capabilities. For example, when you are opening an html tag such as `<p>`, it automatically closes the tag as soon as you type `/`. You can get similar functionality for pieces of code you end up re-writing over and over, and it's surprisingly easy!
Here's an example, which activates after typing `div` and then tab:
![alt text](//discourse-user-assets.s3.amazonaws.com/original/2X/5/59a4d233d2dcb17b76a9c36ca30c5bb07a35d00b.png)
## Step 1.
Click `Tools > New Snippet...` in the navigation bar. This will open a snippet skeletton file which will look like this:
![alt text](//discourse-user-assets.s3.amazonaws.com/original/2X/a/a56106fbf754f7e641342d1ebdbc3f5bed582263.png)
## Step 2.
You will add the snippet by replacing the text `Hello, ${1:this} is a ${2:snippet}.`
In the case of the `div` snippet, it's as simple as placing the following text in the snippet area:
<!-- $1 -->
<div class= "$1">
</div>
<!-- $1 -->
The `$` operator references the variables that will be typed in once you type `div` and then tab. In fact you can have any number of them!
## Step 3.
Save the file. You can give it any filename you want, but the extension **must** be `.sublime-snippet`. Remember, you can only have one snippet per file! I like to give them descriptive names such as `html-div.sublime-snippet`.
And there you have it! You can get as creative as you want.

75
guide/english/developer-tools/source-code-editors/index.md Normal file
View File

@ -0,0 +1,75 @@
---
title: Source Code Editors
---
## Source code editors
Source code editors are the programs that allow for code creation and
editing. Any text editor can be used to write code. But dedicated code
editors offer many useful features, including: text completion,
markup coloring, and tabs/panes for side-by-side editing. These features can
be useful even to new users who don't know their way around all of the
advanced options.
### Choosing an editor
There are many, many editors availble to download or use
online, both paid and free. They offer many of the same core-features, but
each have their own subtlties. Further research may help find the one that's
right for you. The following editors are all cross-platform and
free to use or evaluate.
### Sublime text
![Sublime Text Icon](https://logo.clearbit.com/sublimetext.com)
Sublime Text is a very popular editor that has been around <a href='https://www.sublimetext.com/blog/articles/one-point-oh' target='_blank' rel='nofollow'>since 2008</a>. There are many options and <a href='https://packagecontrol.io/' target='_blank' rel='nofollow'>extensions</a> available, and a lot of <a href='http://stackoverflow.com/search?q=sublime+text' target='_blank' rel='nofollow'>help available</a> online to help <a href='http://www.websightdesigns.com/wiki/Setting_up_Sublime_Text_3' target='_blank' rel='nofollow'>set it up</a>. (The license for continued use costs $70\. However, Sublime Text is free to download and evaluate, with a nag-screen pop-up.)
<a href='https://www.sublimetext.com/' target='_blank' rel='nofollow'>sublimetext.com</a>
![Sublime Text Screenshot](//discourse-user-assets.s3.amazonaws.com/original/2X/6/63f774c31a7b1a439bcef9d11e95463b6998310e.png)
&nbsp;
### Brackets
![Brackets Icon](https://logo.clearbit.com/brackets.io)
Brackets is a relatively new open-source editor by Adobe. It is very user friendly, especially for people who aren't used to command-line interfaces or JSON-style settings/prefereces. Extensions and themes are quick and easy to find and install through the Extension Manager.
<a href='http://brackets.io/' target='_blank' rel='nofollow'>brackets.io</a>
![Brackets Screenshot](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2f395a58d24ed551ed8440a10ae640777f1143b6.png)
&nbsp;
### Atom
![Atom Icon](https://logo.clearbit.com/atom.io)
Atom is an <a href='https://github.com/atom/atom' target='_blank' rel='nofollow'>open source</a> editor, developed by <a href='https://github.com/' target='_blank' rel='nofollow'>GitHub</a>. Like Sublime Text, Atom is quite popular. It is very configurable ("hackable", as they say) but advanced features may be overwhelming to new users. There is also plenty of <a href='http://readwrite.com/2014/05/20/github-atom-5-tips-getting-started-tutorial-corey-johnson/' target='_blank' rel='nofollow'>helpful</a> <a href='http://flight-manual.atom.io/' target='_blank' rel='nofollow'>documentation</a> <a href='http://stackoverflow.com/search?q=atom' target='_blank' rel='nofollow'>availble</a> online.
<a href='https://atom.io/' target='_blank' rel='nofollow'>atom.io</a>
![Atom Screenshot](//discourse-user-assets.s3.amazonaws.com/original/2X/8/8016e7c0937e8ce6fcb6104c9aee0026443912f5.png)
&nbsp;
### Visual Studio Code
![Visual Studio Code Icon](https://logo.clearbit.com/code.visualstudio.com)
Visual Studio Code (a.k.a vsc or vscode) is a very popular, open source editor, developed by <a href="https://www.microsoft.com" target="_blank" rel="nofollow">Microsoft</a> and fast becoming widely used by developers of all languages. Like Atom and Sublime, Visual Studio Code has a wide range of <a href="https://marketplace.visualstudio.com/VSCode" target="_blank" rel="nofollow">extensions</a> and <a href="https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Downloads" target="_blank" rel="nofollow">themes</a> available to help customise and perfect your experience using it, however VSC is highly configurable "out-the-box". There is also a very active development team behind VSCode, with new features and bug fixes being added by the Visual Studio Code team <a href="https://code.visualstudio.com/updates" target="_blank" rel="nofollow">every month</a>.
<a href='https://code.visualstudio.com/' target='_blank' rel='nofollow'>code.visualstudio.com</a>
&bnsp;
### Notepad++
![Notepad++ Icon](https://upload.wikimedia.org/wikipedia/commons/0/0f/Notepad%2B%2B_Logo.png)
Notepad++ is a free, open source code editor, that runs in the Microsoft Windows Environment. It was developed in 2003, by Dan Ho. It is written in <a href='www.cplusplus.com' target='_blank' rel='nofollow'>C++</a> (the name comes from that). Notepad++ supports tabbed editing, wich allows working with multiple open files in a single window, and also can be use as a plain text editor.
<a href='https://notepad-plus-plus.org' target='_blank' rel='nofollow'>notepad-plus-plus.org</a>

58
guide/english/developer-tools/vagrant/index.md Normal file
View File

@ -0,0 +1,58 @@
---
title: Vagrant
---
## Vagrant
Vagrant is a tool for building and managing virtual machine (VM) environments. Virtual machines can be used for any cause but are particularly useful to developers and DevOps.
### Why Vagrant is Useful
As a developer, by using a VM, you can have a local environment for testing code, that is the same as the production environment, regardless of the environment you use for coding.
For DevOps, VMs are very usefull for having a highly configurable, disposable machine for testing infrastracture, configurations, scripts, or anything else.
With Vagrant, to use a VM you only need a single file, called a `VagrantFile`, which contains the VM as well as all the configuration needed. This way you can easily create a specific, isolated development environment which is very portable and can be shared and used by all members of a team.
Vagrant also has pre-defined `boxes` which are base VMs, which can easily be cloned and expanded upon.
Another very cool feature of Vagrant is the use of `synced folders`. It is possible to sync the folders of the VM, with folders in the guest machine. By doing that, you can use your favorite editor on local files and simultaneously have those files synced to the running VM.
#### More Information:
<a href="https://www.vagrantup.com/" target='blank' rel='nofollow'>Vagrant website</a>
### Install Vagrant
To install Vagrant, first find the [appropriate package](https://www.vagrantup.com/downloads.html) for your system and download it. Vagrant is packaged as an operating-specific package. Run the installer for your system. The installer will automatically add vagrant to your system path so that it is available in terminals. If it is not found, please try logging out and logging back in to your system (this is particularly necessary sometimes for Windows).
### Verify Installation
After installing Vagrant, verify the installation worked by opening a new command prompt or console, and checking that vagrant is available:
```bash
$ vagrant
Usage: vagrant [options] <command> [<args>]
-v, --version Print the version and exit.
-h, --help Print this help.
# ...
```
### Getting Started
```bash
$ vagrant init hashicorp/precise64
$ vagrant up
```
### Boxes
Boxes are added to Vagrant with vagrant box add. This stores the box under a specific name so that multiple Vagrant environments can re-use it. If you have not added a box yet, you can do so now:
```bash
$ vagrant box add hashicorp/precise64
```
### Finding more Boxes
The best place to find more boxes is [HashiCorp's Vagrant Cloud box catalog](https://vagrantcloud.com/boxes/search).
### Common
Youtube: [Getting Started With Vagrant](https://www.youtube.com/watch?v=LyIyyFDgO4o) by [Codecourse](https://www.youtube.com/user/phpacademy)
#### More Information:
The Vagrant website: [vagrantup.com](https://www.vagrantup.com)

74
guide/english/developer-tools/yarn/index.md Normal file
View File

@ -0,0 +1,74 @@
---
title: Yarn
---
## Yarn
Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry about the dependencies of a project.
Yarn allows you to use other developers’ solutions to different problems, making it easier for you to develop your software. If you have problems, you can report issues or contribute back, and when the problem is fixed, you can use Yarn to keep it all up to date.
Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.
To use yarn you must install it on your system first. There are links at the end of this article to help you do that in whatever your operating system is.
When you have Yarn installed, you can start using it. Here are some of the most common commands you’ll need.
### yarn Usage
**Starting a new project**
```
yarn init
```
The `yarn init` command will open an interactive form for creating a yarn project. `yarn init` creates a `package.json` file that stores the information about your project. This interactive form will open up with the following questions:
```
name (your-project):
version (1.0.0):
description:
entry point (index.js):
git repository:
author:
license (MIT):
```
You can either type the answers for each option or just hit enter without typing anything to use the default or to leave blank. You can always go into your favorite text editor to change your `package.json` file, if needed.
Your `package.json` file should look similar to this:
```
{
"name": "your-new-project",
"version": "1.0.0",
"description": "A description of your new project.",
"main": "index.js",
"repository": {
"url": "https://github.com/your-username/your-new-project",
"type": "git"
},
"author": "Your Name <your_name@example.com>",
"license": "MIT"
}
```
**Adding a dependency**
```
yarn add [package]
```
**Upgrading a dependency**
```
yarn upgrade [package]
```
**Removing a dependency**
```
yarn remove [package]
```
**Installing all the dependencies of project**
```
yarn install
```
#### More Information:
* [Yarn website](https://yarnpkg.com)
* [Yarn documentation](https://yarnpkg.com/en/docs)
* [Installing Yarn](https://yarnpkg.com/en/docs/install)
* [Yarn vs npm](https://www.pluralsight.com/guides/node-js/yarn-a-package-manager-for-node-js)