text:
Title: Dynamic Load Example

This is a simple example that uses the `<app:music_player>` and dynamically loads and starts playing music from a message.

++example
<app:music_player on="l:load then load[this.data.src]">
</app:music_player>

<app:message name="l:load" args="{'src':'http://media.libsyn.com/media/redmonk/riaweekly008.mp3'}">
</app:message>
--example

The value in the load action can be any valid Javascript expression.  The this scope has the following parameters:

+ data - the data payload of the message
+ parameters - any defined attributes defined on the `app:music_player` tag
+ id - the id of the `app:music_player` tag


text:
---
layout: stt
title: Speaking Times Tables
subtitle: Privacy
bodyclass: stt
---

This is a privacy policy for Mindwarp Consultancy Ltd (the owner / developers of this site) and relates to this site and iOS Speaking Times Tables app. Our app website can be located at www.speakingtimestables.com. The full text for our privacy policy can be located at www.speakingtimestables.com/privacy-policy. Users may go there for information on how to opt-in or opt-out of their information.

We invite you to contact me if you have questions about this policy. You may mail us at the following address:

You may contact me by via our contact form www.speakingtimestables.com/contact. You may call us at +44(0)7939513013.

We take the privacy and safety of children and adults using are apps seriously and abide by the following:

iOS App

We store the students name on your private iCloud account provided by Apple. You can delete all students from the app via the settings screen.

- There are no features like website links or email links that will launch from the app.

- There are no in-app purchases features in our app.

- There are no in-app advert features in our app.

Website

Any personal information you provide to us including and similar to your name, address, telephone number and e-mail address will not be released, sold, or rented to any entities or individuals outside of Mindwarp Consultancy Ltd.

- Newsletters If you sign up for our newsletter, we store only your e-mail address (and name if you give it) for the purposes of e-mailing you with information about Mindwarp Consultancy Ltd products, competitions and news. We will NEVER pass your details on to any third parties.

- Competitions If you or your child win any competitions or contact me with reviews or quotes for our site, we will ask your permission before publishing any details on our website, Twitter or Facebook pages. Even then, we would only ever include first names and ages.

- Credit card details Mindwarp Consultancy ltd will never ask for Credit Card details and request that you do not enter it on any of the forms on Mindwarp Consultancy Ltd.

- External Sites Mindwarp Consultancy Ltd is not responsible for the content of external internet sites. You are advised to read the privacy policy of external sites before disclosing any personal information.

 Cookies themselves do not contain any personal information, and Mindwarp Consultancy Ltd does not use cookies to collect personal information. Cookies may also be used by 3rd party content providers such as news feeds.

- Remember The Risks Whenever You Use The Internet While we do our best to protect your personal information, we cannot guarantee the security of any information that you transmit to Mindwarp Consultancy Ltd and you are solely responsible for maintaining the secrecy of any passwords or other account information. In addition other Internet sites or services that may be accessible through Mindwarp Consultancy Ltd have separate data and privacy practices independent of us, and therefore we disclaim any responsibility or liability for their policies or actions. Please contact those vendors and others directly if you have any questions about their privacy policies.

license: MIT

repository: JulesMoorhouse/web

branch_name: refs/heads/main

extension: md

gha_language: HTML

gha_license_id: MIT

license_type: permissive

repo_name: JulesMoorhouse/web


text:
# ANGULARJS

<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->

- [ANGULARJS](#angularjs)
	- [Overview](#overview)
	- [Controllers](#controllers)
	- [Directives](#directives)
		- [Some Directives Predefined](#some-directives-predefined)
		- [Restrict Types in Directives](#restrict-types-in-directives)
	- [Components](#components)
	- [Directives vs Components](#directives-vs-components)
	- [Services](#services)
		- [Consuming Services](#consuming-services)
		- [Services Error Handling](#services-error-handling)
	- [Factory](#factory)
	- [Factory vs Services](#factory-vs-services)
	- [Router](#router)
		- [Router with ui-router API](#router-with-ui-router-api)
	- [Angular Material](#angular-material)
	- [Unit Testing](#unit-testing)
	- [Design Patterns in angularJS](#design-patterns-in-angularjs)
		- [DP in Services](#dp-in-services)
			- [Singleton](#singleton)
			- [Factory Method](#factory-method)
			- [Decorator](#decorator)
			- [Facade](#facade)
			- [Proxy](#proxy)
			- [Active Record](#active-record)
			- [Intercepting Filters](#intercepting-filters)
		- [Directives](#directives)
			- [Composite](#composite)
			- [Interpreter](#interpreter)
			- [Template View](#template-view)
		- [Scope](#scope)
			- [Observer](#observer)
			- [Chain of Responsabilities](#chain-of-responsabilities)
			- [Command](#command)
		- [Controllers](#controllers)
			- [Page Controller](#page-controller)
	- [Best Practices](#best-practices)
		- [How to Use 'controllerAs' Sintax Properly?](#how-to-use-controlleras-sintax-properly)
		- [Writing Controllers as Classes](#writing-controllers-as-classes)
		- [How to Set Watch](#how-to-set-watch)
		- [Single Responsability](#single-responsability)
		- [Small Functions](#small-functions)
		- [Javascript Scopes](#javascript-scopes)
		- [Avoid Naming Collisions](#avoid-naming-collisions)
		- [Definitions (aka Setters)](#definitions-aka-setters)
		- [Bindable Members Up Top](#bindable-members-up-top)
	- [Bibliography](#bibliography)

<!-- /TOC -->

## Overview
Here's a set of general concepts into angularjs environment which you need to know before we begin:

> AngularJS's HTML **$compiler** allows the developer to teach the browser new HTML syntax. The compiler allows you to attach behavior to any HTML element
or attribute and even create new HTML elements or attributes with custom behavior.

>You can think of a **module** as a container for the different parts of your app – controllers, services, filters, directives, etc. You have to be careful when you used 'cause sometimes people have the error to declare multiples times maybe for the confussion between declare & invoque a module.

```javascript
   //declare a new module
   angular.module('softtekdemo', []);

   //invoque/reference to module
   angular.module('softtekdemo');
```

 >**$scope** is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

 >AngularJS supports Single Page Application via multiple views on a single page. To do this AngularJS has provided **ng-view** and **ng-template** [directives](#directives) and *$routeProvider* services.

 >By the way **MVC** components in angular:

>- Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings.
>- View — The template (HTML with data bindings) that is rendered into the View.
>- Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values

## Controllers

 Is defined by a JavaScript constructor function that is used to augment the AngularJS Scope. When a Controller is attached to the DOM via the
 ng-controller directive, AngularJS will instantiate a new Controller object, using the specified Controller's constructor function. A new child
 scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

 Use controllers to:

* Set up the initial state of the $scope object.
* Add behavior to the $scope object.

Do not use controllers to:

* Manipulate DOM: Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability.
 AngularJS has databinding for most cases and directives to encapsulate manual DOM manipulation.
* Format input: Use AngularJS form controls instead.
* Filter output: Use AngularJS filters instead.
* Share code or state across controllers: Use AngularJS services instead.
* Manage the life-cycle of other components (for example, to create service instances).

```html
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
```

**Exercise 1:** Make your own controller for login handle & show a list of user according some basic crendentials logic. Try by yourself at first place dowloading the [esqueleton project](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/0/), working there and them see the [exercise sample solved](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/1/) to check your result. Some considerations.

1. To implement the list of users you have to take a look in [Some Directives Pre-defined](#some-directives-predefined) topic; particularly in the **ng-repeat** & **ng-click** directive.

>**To execute the example just download this repository and then, in your terminal, type in their correct path:**

> **$> npm start**

## Directives

Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile)
to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

NORMALIZATION: AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by
their case-sensitive camelCase normalized name (e.g. ngModel).

1. Strip x- and data- from the front of the element/attributes. (ng-model & data-ng-model is the same)
2. Convert the :, -, or _ delimited name to camelCase.

we say an element matches a directive when the directive is part of its declaration.

### Some Directives Predefined

- The **ngIf** directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
```html
<element ng-if="expression"></element>
```

- The **ngApp** directive tells AngularJS that this is the root element of the AngularJS application. Here is the bridge between visual deposit & modules. All AngularJS applications must have a root element. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used. In this case mainApp is the name of module.

```html
<div ng-app = "mainApp">
   ...
   <div ng-view></div>

</div>
```

- **ngView** tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.

```html
<div ng-app = "mainApp">
   ...
   <div ng-view></div>

</div>
```

- **ngTemplate** in the other hand ussually it's used to define a visual space to deposit additional visual content on the view container.

```html
<div ng-app = "mainApp">
   ...

   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>

</div>
```

- The **ngController** directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.
```html
<element ng-controller="NameController">
   ...
</element>
```

- The **ngRepeat** directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
```html
<element ng-repeat="item in collection">
   {{item}}
</element>
```

- The **ngClick** directive tells AngularJS what to do when an HTML element is clicked.

```html
<element ng-click="functionToCall()"></element>
```

- The **ngModel** directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

```html
<element ng-model="scope_variable"></element>
```

ngModel is responsible for:

1. Binding the view into the model, which other directives such as input, textarea or select require.
2. Providing validation behavior (i.e. required, number, email, url).
3. Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
4. Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations.

### Restrict Types in Directives

The restrict option is used to specify how a directive can be invoked on the page. $compile can match directives based on element names (E), attributes (A), class names (C), and comments (M).

- A :
```html
<span softtek-directive></span>
```

- E :
```html
<softtek-directive></softtek-directive>
```

- C :
```html
<span class="softtek-directive"></span>
```
- M :
```html
<!-- directive: softtek-directive -->
```

>## Types of Bindings in Directives & Components

>- = : This serves to deliver a reference to an object. So whatever is being delivered is shared between components
>- @ : This serves to deliver a value. No binding of any kind
>- < : This is used for 1 way binding. The father transfers the child a value, but even if the child changes the new value does not travel to the father. However, if the father changes it, it does change in the child.
>- & : The latter alternative allows you to send a pointer to a function

[See examples of directives](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/directive.md)

**Exercise 2:** In the last section, you made a controller with a list of user functionality. Now It's time to separate that logic (just that logic) of the cotroller and create a directive of type 'E'. Some conditios for this:

1. First we are going to change the logical we did in our controller, now the login logic will be replace by add credentials functionality into our array of objects (name/pass) inside the controller (you have to add logical for prevent repetition in the name of new credentials)
2. Create a folder inside the folder app called directives and then another folder (user_list) inside directives
3. Create new files (userList.js & userLit.html) for you directive into folder user_list
4. When you declare your directive don't forget to include scope params to pass to our directive. include for now this
5. Remove for our controller the displayable list of users and put it into new directive (userList)

Use your project of the exercise 1 to start, then see the [exercise sample solved](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/2/) to check your result.

## Components

In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's style of application architecture.

Advantages of Components:

- Simpler configuration than plain directives
- Promote sane defaults and best practices
- Optimized for component-based architecture
- Writing component directives will make it easier to upgrade to Angular

[See the example of component](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/component.md)

**Exercise 3:** Now It's component creation time!. Here, we are going to build a new component (we are not modify the directive beceause we want both of them for comparison purpose). The component consist in make the edition functionality for our list of users. So it means the component needs to have a view where we can edit a single credential when we click on the element and then, the view component will be display. We have to consider the same validation rule in our edit component (while you are editing, elements with the same name are forbiden). Some considerations for the exercise:

1. Create a folder called components into app folder
2. Create folder called user_edit into components folder and then inside of user_edit put your required files for the component (userEdit.js, userEdit.html)
3. Use ngIf to hide/show component according basic logical of edition
4. You will have to modify userList to get access to the click event listener and retrieve the current user model selected to send to our component binding. The goal is use callback methods into the binding (&) of userList. Now when you have already the callback method binding inside of directive you have to set a scope variable (currentUser) in the controller to  send by one way binding (<) that variable to our new component and we finish.

Use your project of the exercise 2 to start, then see the [exercise sample solved](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/3/) to check your result.

## Directives vs Components

When not to use Components:

-For directives that need to perform actions in compile and pre-link functions, because they aren't available
-When you need advanced directive definition options like priority, terminal, multi-element
-When you want a directive that is triggered by an attribute or CSS class, rather than an element

Available options for Directives(D) and Components(C)

Available attribute-Directives |  Directives | Components
--------|-------------|-----------
bindings | | Yes (binds to controller)
bindToController | Yes (Default: false) |
compile function | Yes |
controller | Yes | Yes (default function() {})
controllerAs | Yes (default: false) | Yes (default: $ctrl)
link functions | Yes |
multiElement | Yes |
priority | Yes |
replace | Yes (deprecated) |
require | Yes | Yes
restrict | Yes | No (restricted to element only)
scope | Yes (default: false) | No (scope is always isolate)
template | Yes | Yes, injectable
templateNamespace | Yes | No
templateUrl | Yes | Yes, injectable
terminal | Yes |
transclude | Yes (default: false) | Yes (default: false)

## Services
AngularJS services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

AngularJS services are:
- Lazily instantiated: AngularJS only instantiates a service when an application component depends on it.
- Singletons: Each component dependent on a service gets a reference to the single instance generated by the service factory.

[See example of service](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/service.md)

### Consuming Services
For consuming services we need to prepare the view/template and the controller. To do that we have to binding the view element with a controller function for example as event.

```html
//view1.html
<div class="container">
     <form class="form-signin" role="form">
         <input type="email" class="form-control" ng-model="var1" placeholder="Email address" required="" autofocus="">
         <input type="password" class="form-control" ng-model="var2" placeholder="Password" required="">
         <label class="checkbox">
         <a href="#"> Sign Up</>
     </label>
     <button class="btn btn-lg btn-primary btn-block" ng-click="send()">Sign in</button>
   </form>
 </div>
```

 We Assumed controller is associated with this view throught $routeProvider, It means ng-controller on view is not needed. Now in the controller side we have to declare models, methods to handle events, etc. In this case we have have to pay attention to send() function in the ng-click directive of button in example.

 ```javascript
 //controller view1.js
 .controller('View1Ctrl', ['$scope', 'UserService', function($scope, UserService) {
   $scope.var1 =<EMAIL_ADDRESS>   $scope.var2 = "softtek"

   $scope.send = function() {
     if(UserService.login($scope.var1, $scope.var2)) {
       alert("SUCESS!!")
     }
   }
 }]);
 ```

As we can see, throught inyection dependencies we can include any custom service (UserService) or existing ($http).

### Services Error Handling

In almost all scenarios errors in services born for poor validations in data or in the async request (promise). So in the first case we can use a simple try/catch sentence and handle error types there. The second scenery thanks to promise is relative easy to handle errors 'cause promise has a section dedicate to attendant errors. In the particular case of $http exist a block exclusive for handle errors:

```javascript
$http.get(url).success(function (data) {
  //some logical with data object
}).error(function(error) {
  //handle error
});
```

## Factory

As we know, a service is a method on our module that takes a name and a function that defines the service and in the same way a factory is a method on our module and it also takes a name and a function, that defines the factory. We can inject and use that thing exactly at the same way we did with the service. Now what is the difference here?

Well, you might see that instead of working with this in the factory, we’re returning an object literal. Why is that? It turns out, a service is a constructor function whereas a factory is not.

[See example of Factory](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/factory.md)

**Exercise 4:** In this part we are going to modify again our previous exercise. Do you remember our array of users stored in the controller? Well It's time to move to a properly site, that magic place is a factory. Why a factory against service? [here's the reason](#factory-vs-services).

So the exercise consist in move the provider of data (array of users) into our factory. Some considerations:

1. Create a folder inside app called services
2. Create a js file insider services (userServices.js)
3. Try to simulate a http request doing an async method to handle errors promises (clue: you can use $q todo that)
4. Use if you can, the get-XXX name method convention in the factory (optional)
5. Begin to change some methods to ecmascript way in your app.js & userservices.js (optional)

Use your project of the exercise 3 to start, then see the [exercise sample solved](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/4/) to check your result.

## Factory vs Services

Which one to use? basically Factories allows us to do some configuration stuff or conditionally create an object or not, which doesn’t seem to be possible when creating a service directly, which is why most resources recommend to use factories over services, but the reasoning is inappreciable.

But here's the fact, what happen if service send us an object like factory?. In this point we have the same condition and advantages like factory, so basically it depends how you implement your code and requirements.

## Router

AngularJS routes enables you to show different content depending on what route is chosen. A route is specified in the URL after the # sign. AngularJS ngRoute module provides routing, deep linking services and directives for angular applications. The ngRoute module routes your application to different pages without reloading the entire application. To enabled this functionality on your app is required include a div tag with the directive ngView to tell $compiler that div will be the container of all application.

> $routeProvider is the key service which set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same.

```html
//index.html
<div ng-view></div>
```

```javascript
//app.js
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
    .when("/blue", {
        templateUrl : "blue.htm"
    });
});
```

>**Deprecation Notice**: In an effort to keep synchronized with router changes in the new Angular, this implementation of the Component Router (ngComponentRouter module) has been deprecated and will not receive further updates. We are investigating backporting the new Angular Router to AngularJS, but alternatively, use the ngRoute module or community developed projects (e.g. ui-router). [See info](https://docs.angularjs.org/guide/component-router).

### Router with ui-router API

**ui-router** is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1.x). Support properly well the component routing.

To use ui-router in our index.html we have to change the container element with the **ng-view** directive for a new element:

```html
<div ng-app='softtekdemo'>
  <ui-view></ui-view>
</div>
```

Then in the app.js or other file where our root module was configure, we have to put this new configuration & remove old configuration if exist ($routerprovider).

```javascript
"use strict";

var demo = angular.module('softtekdemo', ['ui.router']);

demo.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('someComponentOr Directive', {
      url: '/blah/:parameter',
      template: './templates/template.html',
      controllerAs: "ctrl",
      controller: function ($scope, $stateParams, myService) {
        this.parameter = myService.getUser($stateParams.parameter)
      }
    })

    .state('main', {
      url: '/',
      templateUrl : "./templates/main.html"
    })

    $urlRouterProvider.otherwise('/main');
  })
```

**Exercise 5:** Modifying my files again? No way, but we have to. So here's the thing; In all the previous exercises we working directly on index.html to display our components & directives. Now It's time to put order and that's exactly where routes enter. Some considerations:

1. Obviously we have to remove some stuffs of index.html & app.js and distribute in properly places
2. We have a big deal here, 'cause we have two different Schemes in our app (directives & components). What's the big deal? When you try to use routes with a combinations of directives & components the $routerprovider is not enougth to attendant the components routes. So in this case to fix this problem we are going to use ui-router as our routing system.
3. Create a folder inside app called templates
4. Create a file inside templates called main.html. Put all elements that are previously in the tag ```<div ng-controller="SofttekCtrl">``` except the edition-user component tag.
5. Create a new file inside templates folder called userEdition.html, Put your edition-user component tag only.
6. Create two routes through $stateProvider (ui-router), one for our main template as our root router (/), and the second route for our component (here you most be careful 'cause you have to take in mind which exist binding parameter for this component), the clue is used combination of controller with $stateParams in the configuration of the route.
7. Now in the index.html remove all children tags from ```<div ng-app='softtekdemo'> ```and put just the **ui-view** tag.
8. Modify your bower.json adding **"angular-ui-router": "*"**  to your dependencies.
9. Include the properly script path ui-router to your index.html

Use your project of exercise 4 to start, then see the [exercise sample solved](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/5/) to check your result.

## Angular Material

AngularJS Material is both a UI Component framework and a reference implementation of Google's Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design. Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes. To use this set of components we need to include into an angular-cli project just importing npm install material dependencies.

**Exercise 6:** In this exercise will be more free, [check the documentation of angularjs-material](https://material.angularjs.org/latest/getting-started) and try to use some components in the last version of your project. Some considerations:

1. Yo can install angular-material by bower or npm or use the cdn of google. For academic purposes we are going to use the last option. Just put in your index file:
```html
<head>
  <!-- Angular Material CSS now available via Google CDN; version 0.9.4 used here -->
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body>

  <!-- Angular Material Dependencies -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>

  <!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
  <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
```
2. Then you just have to inject the dependencie of angular-material in your root module:

```javascript
angular.module( 'YourApp', [ 'ngMaterial' ] )
```
3. The rest of exercise It's all yours, play with angular-material and get a fancy UI, have fun!

Use your project of exercise 5 to start, then see the [exercise sample solved](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/6/) to check your result.

## Unit Testing

Unit testing is a software development process in which the smallest testable parts of an application, called units, are individually and independently scrutinized for proper operation. Unit testing can be done manually but is often automated.

**Why Karma?** Karma is a direct product of the AngularJS team from struggling to test their own framework features with existing tools. As a result of this, they made Karma and rightly suggest it as their preferred test runner within the AngularJS documentation.

**Why Jasmine?** Jasmine is a behavior-driven development framework for testing JavaScript code that plays very well with Karma. Similar to Karma, it’s also the recommended testing framework within the AngularJS documentation. Jasmine is also dependency free and doesn’t require a DOM.

**Exercise 7:** First Install Karma and Jasmine APIs, So in the project we are going to install this packages:

```bash
	npm install karma karma-jasmine jasmine-core karma-chrome-launcher --save-dev
```

Then we proceed to install our karma-cli environment:

```bash
	npm install -g karma-cli
```

When everything is ready, we execute the command **karma init** to create in our project the karma.conf.js. In this case our karma-cli are going to answer some configuration stuffs:

![Configuration of Karma](https://cdn.scotch.io/440/L7sg62M5QWiEOtF9CspX_karma-init.png)

In this particular case we are going to show you an example of UserService test unit where we going to make some simple test cases. [Please take a look](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/karma-example.md).

Then you can copy that code in your angular project and save with name UserService.spec.js next to our UserService factory. Finally we have to modify our karma.config.js in the files section the dependencies what we need to run our test case:

```javascript
		files: [
      './app/bower_components/angular/angular.js',
      './app/bower_components/angular-ui-router/release/angular-ui-router.js',
      './app/bower_components/angular-mocks/angular-mocks.js',

      './node_modules/angular-material/angular-material.js',

      './app/app.js',

      './app/services/userServices.js',
      './app/services/userServices.spec.js',

    ],
```

Now we need only to run our test case **karma start** and that's it. You are free to play more with karma and jasmine and make more test cases for controllers, components, etc.

Use your project of exercise 6 to start, then see the [exercise sample solved](https://github.com/ricardo-perezo/Team.UI.Standards/blob/standars/uiDocs/angularJS/angularJS-docs/exercises/7/) to check your result.

## Design Patterns in angularJS

>Note: This topic was exactly taked from [here](https://github.com/mgechev/angularjs-in-patterns#services-1).

A software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.

### DP in Services

#### Singleton
>The singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects.

We can think of each service as a singleton, because each service is instantiated no more than a single time. We can consider the cache as a singleton manager. There is a slight variation from the UML diagram illustrated above because instead of keeping static, private reference to the singleton inside its constructor function, we keep the reference inside the singleton manager (stated in the snippet above as cache).

This way the services are actually singletons but not implemented through the Singleton pattern, which provides a few advantages over the standard implementation:

- It improves the testability of your source code
- You can control the creation of singleton objects (in our case the IoC container controls it for us, by instantiating the singletons lazy)

#### Factory Method
>The factory method pattern is a creational pattern, which uses factory methods to deal with the problem of creating objects without specifying the exact class of object that will be created. This is done by creating objects via a factory method, which is either specified in an interface (abstract class) and implemented in implementing classes (concrete classes); or implemented in a base class, which can be overridden when inherited in derived classes; rather than by a constructor.

Lets consider the following snippet:

```javascript
myModule.config(function ($provide) {
  $provide.provider('foo', function () {
    var baz = 42;
    return {
      //Factory method
      $get: function (bar) {
        var baz = bar.baz();
        return {
          baz: baz
        };
      }
    };
  });
});
```

In the code above we use the config callback in order to define new "provider". Provider is an object, which has a method called $get. Since in JavaScript we don't have interfaces and the language is duck-typed there is a convention to name the factory method of the providers that way.

Each service, filter, directive and controller has a provider (i.e. object which factory method, called $get), which is responsible for creating the component's instance. We can call the provider a "ConcreteCreator" and the actual component, which is being created a "Product".

There are a few benefits of using the factory method pattern in this case, because of the indirection it creates. This way the framework can take care of the boilerplates during the instantiation of new components like:

- The most appropriate moment, when the component needs to be instantiated
- Resolving all the dependencies required by the component
- The number of instances the given component is allowed to have (for services and filters only a single one but multiple for the controllers)

#### Decorator

>The decorator pattern (also known as Wrapper, an alternative naming shared with the Adapter pattern) is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class.

AngularJS provides out-of-the-box way for extending and/or enhancing the functionality of already existing services. Using the method decorator of $provide you can create "wrapper" of any service you have previously defined or used by a third-party:

```javascript
myModule.controller('MainCtrl', function (foo) {
  foo.bar();
});

myModule.factory('foo', function () {
  return {
    bar: function () {
      console.log('I\'m bar');
    },
    baz: function () {
      console.log('I\'m baz');
    }
  };
});

myModule.config(function ($provide) {
  $provide.decorator('foo', function ($delegate) {
    var barBackup = $delegate.bar;
    $delegate.bar = function () {
      console.log('Decorated');
      barBackup.apply($delegate, arguments);
    };
    return $delegate;
  });
});
```
Using this pattern is especially useful when we need to modify the functionality of third party services. In cases when multiple similar decorations are required (like performance measurement of multiple methods, authorization, logging, etc.), we may have a lot of duplications and violate the DRY principle. In such cases it is useful to use aspect-oriented programming. The only AOP framework for AngularJS I'm aware of could be found at github.com/mgechev/angular-aop.

#### Facade

>A facade is an object that provides a simplified interface to a larger body of code, such as a class library. A facade can:
1. Make a software library easier to use, understand and test, since the facade has convenient methods for common tasks
2. Make the library more readable, for the same reason
3. Reduce dependencies of outside code on the inner workings of a library, since most code uses the facade, thus allowing more flexibility in developing the system
4. Wrap a poorly designed collection of APIs with a single well-designed API (as per task needs).

There are a few facades in AngularJS. Each time you want to provide higher level API to given functionality you practically create a facade. For example to do a http request. Before the $http service, we had to use a XmlHttpRequest object to do that.

With XmlHttpRequest:

```javascript
var http = new XMLHttpRequest(),
    url = '/example/new',
    params = encodeURIComponent(data);
http.open("POST", url, true);

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function () {
  if(http.readyState == 4 && http.status == 200) {
    alert(http.responseText);
  }
}
http.send(params);
```

With $http service:
```javascript
$http.post('/someUrl', data)
.then(function (response) {
  alert(response);
});
```

#### Proxy

>A proxy, in its most general form, is a class functioning as an interface to something else. The proxy could interface to anything: a network connection, a large object in memory, a file, or some other resource that is expensive or impossible to duplicate. We can distinguish three different types of proxy: Virtual Proxy, Remote Proxy & Protection Proxy.

For example when we have a variable in our $scope called user, we can think of this object as virtual proxy (a simple placeholder), which would be populated with the actual data once the client receives response by the server. Initially when the snippet above executes, the property user of the $scope object will be with value an empty object ({}), which means that user.name will be undefined and nothing will be rendered. Internally AngularJS will keep reference to this empty object. Once the server returns response for the get request, AngularJS will populate the object with the data, received from the server. During the next $digest loop AngularJS will detect change in $scope.user, which will lead to update of the view.

#### Active Record

>The Active Record object is an object, which carries both data and behavior. Usually most of the data in these objects is persistent, responsibility of the Active Record object is to take care of the communication with the database in order to create, update, retrieve or delete the data. It may delegate this responsibility to lower level objects but calls to instance or static methods of the active record object cause the database communication.

AngularJS defines a service called $resource. In the current version of AngularJS (1.2+) it is being distributed in module outside of the AngularJS' core.

```javascript
var User = $resource('/users/:id'),
    user = new User({
      name: 'foo',
      age : 42
    });

user.$save();
```

The call of $resource will create a constructor function for our model instances. Each of the model instances will have methods, which could be used for the different CRUD operations.

#### Intercepting Filters

>Create a chain of composable filters to implement common pre-processing and post-processing tasks during a Web page request.

In some cases you need to do some kind of pre and/or post processing of HTTP requests. In the case of the Intercepting Filters you pre/post process given HTTP request/response in order to include logging, security or any other concern, which is influenced by the request body or headers. Basically the Intercepting Filters pattern include a chain of filters, each of which process data in given order. The output of each filter is input of the next one.

In AngularJS we have the idea of the Intercepting Filters in $httpProvider. $httpProvider has an array property called interceptors, which contains a list of objects. Each object may have properties called: request, response, requestError, responseError.

```javascript
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
  return {
   'request': function(config) {
       // same as above
    },
    'response': function(response) {
       // same as above
    }
  };
});
```

### Directives

#### Composite

>The composite pattern is a partitioning design pattern. The composite pattern describes that a group of objects are to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies.

According to the Gang of Four, MVC is nothing more than combination of:

- Strategy
- Composite
- Observer

#### Interpreter

>In computer programming, the interpreter pattern is a design pattern that specifies how to evaluate sentences in a language. The basic idea is to have a class for each symbol (terminal or nonterminal) in a specialized computer language. The syntax tree of a sentence in the language is an instance of the composite pattern and is used to evaluate (interpret) the sentence.

Behind its $parse service, AngularJS provides its own implementation of interpreter of a DSL (Domain Specific Language). The used DSL is simplified and modified version of JavaScript. The main differences between the JavaScript expressions and AngularJS expressions that AngularJS expressions:

- may contain filters with UNIX like pipe syntax
- don't throw any errors
- don't have any control flow statements (exceptions, loops, if statements although you can use the ternary operator)
- are evaluated in given context (the context of the current $scope)

#### Template View

>Renders information into HTML by embedding markers in an HTML page.

The dynamic page rendering is not that trivial thing. It is connected with a lot of string concatenations, manipulations and frustration. Far easier way to build your dynamic page is to write your markup and embed little expressions inside it, which are lately evaluated in given context and so the whole template is being compiled to its end format. In our case this format is going to be HTML (or even DOM). This is exactly what the template engines do - they take given DSL, evaluate it in the appropriate context and then turn it into its end format.

Templates are very commonly used especially in the back-end. For example, you can embed PHP code inside HTML and create a dynamic page, you can use Smarty or you can use eRuby with Ruby in order to embed Ruby code inside your static pages.

For example:

```html
<script type="template/mustache">
  <h2>Names</h2>
  {{#names}}
    <strong>{{name}}</strong>
  {{/names}}
</script>
```

### Scope

#### Observer

>The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems.

There are two basic ways of communication between the scopes in an AngularJS application. The first one is calling methods of parent scope by a child scope. This is possible since the child scope inherits prototypically by its parent, as mentioned above. This allows communication in a single direction - child to parent. Some times it is necessary to call method of given child scope or notify it about a triggered event in the context of the parent scope. AngularJS provides built-in observer pattern, which allows this. Another possible use case, of the observer pattern, is when multiple scopes are interested in given event but the scope, in which context the event is triggered, is not aware of them. This allows decoupling between the different scopes, non of the scopes should be aware of the rest of the scopes.

Each AngularJS scope has public methods called $on, $emit and $broadcast. The method $on accepts topic as first argument and callback as second. We can think of the callback as an observer - an object, which implements the Observer interface (in JavaScript the functions are first-class, so we can provide only implementation of the notify method):

```JavaScript
function ExampleCtrl($scope) {
  $scope.$on('event-name', function handler() {
    //body
  });
}
```

In this way the current scope "subscribes" to events of type event-name. When event-name is triggered in any parent or child scope of the given one, handler would be called.

#### Chain of Responsabilities

>The chain-of-responsibility pattern is a design pattern consisting of a source of command objects and a series of processing objects. Each processing object contains logic that defines the types of command objects that it can handle; the rest are passed to the next processing object in the chain. A mechanism also exists for adding new processing objects to the end of this chain.

As stated above the scopes in an AngularJS application form a hierarchy known as the scope chain. Some of the scopes are "isolated", which means that they don't inherit prototypically by their parent scope, but are connected to it via their $parent property.

When $emit or $broadcast are called we can think of the scope chain as event bus, or even more accurately chain of responsibilities. Once the event is triggered it is emitted downwards or upwards (depending on the method, which was called). Each subsequent scope may:

- Handle the event and pass it to the next scope in the chain
- Handle the event and stop its propagation
- Pass the event to the next scope in the chain without handling it
- Stop the event propagation without handling it

#### Command

>In object-oriented programming, the command pattern is a behavioral design pattern in which an object is used to represent and encapsulate all the information needed to call a method at a later time. This information includes the method name, the object that owns the method and values for the method parameters.

Each $scope has method called $watch. When the AngularJS compiler find the directive ng-bind it creates a new watcher of the expression foo + ' ' + bar | uppercase, i.e. ```javascript $scope.$watch("foo + ' ' + bar | uppercase", function () { /* body */ }); ```. The callback will be triggered each time the value of the expression change. In the current case the callback will update the value of the span.

We can think of the watcher object as a command. The expression of the command is being evaluated on each "$digest" loop. Once AngularJS detects change in the expression, it invokes the listener function. The watcher command encapsulates the whole information required for watching given expression and delegates the execution of the command to the listener (the actual receiver). We can think of the $scope as the command's Client and the $digest loop as the command's Invoker.

### Controllers

#### Page Controller

>An object that handles a request for a specific page or action on a Web site. Page Controller pattern accept input from the page request, invoke the requested actions on the model, and determine the correct view to use for the resulting page. Separate the dispatching logic from any view-related code

Since there is a lot of duplicate behavior between the different pages (like rendering footers, headers, taking care of the user's session, etc.) page controllers can form a hierarchy. In AngularJS we have controllers, which are with more limited scope of responsibilities. They don't accept user requests, since this is responsibility of the $route or $state services and the page rendering is responsibility of the directives ng-view/ui-view.

Similarly to the page controllers, AngularJS controllers handle user interactions, provide and update the models. The model is exposed to the view when it is being attached to the scope, all methods invoked by the view, in result of user actions, are ones, which are already attached to the scope. Another similarity between the page controllers and the AngularJS controllers is the hierarchy, which they form. It corresponds to the scope hierarchy. That way common actions can be isolated to the base controllers.

## Best Practices

### How to Use 'controllerAs' Sintax Properly?

Angular is a very powerful framework, sometimes too powerful causing some developers to make some architecture mistakes. The two-way data binding and the power of directives are awesome, but you need to think about what are you doing and try to use some best practices to avoid common pitfalls during the development process.

Controllers are class-like objects to “control” the model and update the view, and as you know everything is based around the magic and mystic $scope property.

A good practice is to avoid binding everything to $scope, because too many bindings crowd the watch list of the $digest loop. To avoid that, Angular give us the controllerAs property.

### Writing Controllers as Classes

Depending if you have access to ES6 into your angularjs use ES5:

```javascript
var aClass = function () {
  this.name = 'Class name';
};
var instance = new aClass();
```
Use this over $scope inside your class, It's much better.

### How to Set Watch

One question that comes to mind when you use this kind of syntax is how to use a $watch call because you need to inject $scope. We fight to remove the use of $scope, and now we need to inject it anyway.

Well, we can keep using controllerAs and keep binding methods and properties to the this object that is binded to the current $scope. At the same time, we can keep the separation of concerns using $scope only for special cases, like $watch, $on, or $broadcast. Example:

```javascript
app.controller('Ctrl', function ($scope) {
    this.name = 'name';

    $scope.$watch(angular.bind(function () {
      return this.title
    }), function (newVal, oldVal) {

    });
});
```
### Single Responsability

Define 1 component per file, recommended to be less than 400 lines of code. Why?

- One component per file promotes easier unit testing and mocking.

- One component per file makes it far easier to read, maintain, and avoid collisions with teams in source control.

- One component per file avoids hidden bugs that often arise when combining components in a file where they may share variables, create unwanted closures, or unwanted coupling with dependencies.

### Small Functions

Define small functions, no more than 75 LOC (less is better). Why?

- Small functions are easier to test, especially when they do one thing and serve one purpose.

- Small functions promote reuse.

- Small functions are easier to read.

- Small functions are easier to maintain.

- Small functions help avoid hidden bugs that come with large functions that share variables with external scope, create unwanted closures, or unwanted coupling with dependencies.

### Javascript Scopes

Wrap Angular components in an Immediately Invoked Function Expression (IIFE). Why?

- An IIFE removes variables from the global scope. This helps prevent variables and function declarations from living longer than expected in the global scope, which also helps avoid variable collisions.

- When your code is minified and bundled into a single file for deployment to a production server, you could have collisions of variables and many global variables. An IIFE protects you against both of these by providing variable scope for each file.

```javascript
/* avoid */
// logger.js
angular
    .module('app')
    .factory('logger', logger);

// logger function is added as a global variable
function logger() { }

// storage.js
angular
    .module('app')
    .factory('storage', storage);

// storage function is added as a global variable
function storage() { }
```

```javascript
/**
 * recommended
 *
 * no globals are left behind
 */

// logger.js
(function() {
    'use strict';

    angular
        .module('app')
        .factory('logger', logger);

    function logger() { }
})();

// storage.js
(function() {
    'use strict';

    angular
        .module('app')
        .factory('storage', storage);

    function storage() { }
})();
```

### Avoid Naming Collisions

Use unique naming conventions with separators for sub-modules.
Why?: Unique names help avoid module name collisions. Separators help define modules and their submodule hierarchy. For example app may be your root module while app.dashboard and app.users may be modules that are used as dependencies of app.

### Definitions (aka Setters)

Declare modules without a variable using the setter syntax.

Why?: With 1 component per file, there is rarely a need to introduce a variable for the module.

```javascript
/* avoid */
var app = angular.module('app', [
    'ngAnimate',
    'ngRoute',
    'app.shared',
    'app.dashboard'
]);
```

```javascript
/* recommended */
angular
    .module('app', [
        'ngAnimate',
        'ngRoute',
        'app.shared',
        'app.dashboard'
    ]);
```

### Bindable Members Up Top

Place bindable members at the top of the controller, alphabetized, and not spread through the controller code. Why?

- Placing bindable members at the top makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View.

- Setting anonymous functions in-line can be easy, but when those functions are more than 1 line of code they can reduce the readability. Defining the functions below the bindable members (the functions will be hoisted) moves the implementation details down, keeps the bindable members up top, and makes it easier to read.

```javascript
/* avoid */
function SessionsController() {
    var vm = this;

    vm.gotoSession = function() {
      /* ... */
    };
    vm.refresh = function() {
      /* ... */
    };
    vm.search = function() {
      /* ... */
    };
    vm.sessions = [];
    vm.title = 'Sessions';
}
```

```javascript
/* recommended */
function SessionsController() {
    var vm = this;

    vm.gotoSession = gotoSession;
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions';

    ////////////

    function gotoSession() {
      /* */
    }

    function refresh() {
      /* */
    }

    function search() {
      /* */
    }
}
```

[For more good practice check this page](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)

## Bibliography

1. https://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html
2. https://docs.angularjs.org/guide/
3. https://www.w3schools.com/angular/angular_routing.asp
4. http://tutorials.jenkov.com/angularjs/routes.html
5. https://desarrolloweb.com/articulos/bindings-componentes-angularjs.html
6. https://github.com/mgechev/angularjs-in-patterns#services-1
7. https://www.toptal.com/angular-js/tips-and-practices
8. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

branch_name: refs/heads/master


text:
---
layout: post
title: Guide to Submitting Pull Requests
series: github-reviews
series-title: 'Guide to Submitting'
---

_I am not an authority on this topic: what follows is advice that works for me and for others who have taken the advice on board._

Most dev teams have a code review process where another dev has to approve your code before it can be merged into the master branch. You may think that once your code is pushed to the feature branch and a corresponding Pull Request (PR) is submitted, your work is done. It is not.

## Read your own code first

Before even assigning reviewers you should read your own PR's changes as if you were a reviewer. This will help you catch silly mistakes like commented out code, and `console.log` calls. As a reviewer, it's frustrating when you have to leave a comment telling your colleague to lose the stray `console.log` call. It's like cleaning somebody else's room for them!

## Put effort into the description

Your description should contain the following (not necessarily in the following order):

- link(s) to the issue/ticket that the PR relates to, if any
- link(s) to related PRs
- a description of what has changed
- a description of the motivation behind the change

Once the reviewer has read through your description, they shouldn't be too surprised by anything they come across in the diff of changes.

## Guide the reader through the changes

### Explain why you are making a change

Comments that elucidate the intention behind the code belong in the code base. Comments that explain the _motivation_ behind a _change_ in the code from one commit to the next (or one PR to the next) belong on the PR. Comments like 'we're batching this now because the old way was super slow' aren't relevant within the codebase, but will be relevant to the person reviewing your code.

### Make copy/cut pastes explicit

There is nothing worse for a reviewer than reading and comprehending a huge block of code only to find that as you scroll down through a PR's changes, that huge block was simply cut and pasted from another file. If GitHub is displaying the addition before the removal, give the reviewer a heads up. If the removal comes first, and the addition is more than a flick of the scrollbar away, leave a comment saying you're just moving that code.

The far darker side of this coin is that if rather than cut and paste you _copy_ and paste a huge chunk of code, you'd better make that clear to the reviewer, because unlike with a cut-paste where the cut code is visible, the reviewer will only know that the code was copied by channeling their inner psychic powers. If you have copied a huge chunk of code without many modifications, that is a sign you need to DRY things up.

### Guide the reviewer through the code

You don't really have a say in the order in which changes appear, so if the top-to-bottom flow is awkward, leave some comments giving additional context where necessary.

If the diff is easier to view without whitespace then say so.

If the code is easiest to follow on a commit-by-commit basis, then say so.

The goal is to make it as easy as possible for the reviewer to make sense of your changes and the motivations behind them.

## Managing commits

### Lay off the force-pushing after assigning reviewers

I like to keep my commits clean so I do a lot of `git commit amend`'s. Once I've assigned reviewers however, I need to hold off the force-pushes so that it's easier for them to see which new commits I've added on the back of their feedback.

### Squash your commits

Before merging, you should clean up your commits before merging to master. You don't need to squash everything into one commit, but typically you shouldn't have more than two or three commits to merge in the end. You should never have code that gets added in one commit and then removed in another commit under the one PR, because it makes it harder for others to read through the git log when something goes wrong down the line.

## Justify newly added dependencies

If you add a new dependency to a repo you should explain why you chose that specific dependency and why it's better to use that dependency than implementing the functionality yourself.

Here are some points worth capturing:

### How popular it is

E.g. number of GitHub stars or number of noteworthy orgs using the dependency.

### How well-maintained it is

If there haven't been any recent commits to master but the issues board is choc-a-bloc that's a red flag.

### The quality of the code itself

Skim through the code to get a feel for the health of the codebase. Well organised codebases not only have a better chance of adapting to new requirements, they also reflect conscientiousness and experience on the part of the maintainers.

### Its licence

If you're working on a closed-source codebase for a company you typically want to avoid copy-left licences like GPL. Check the licence and ensure its permissive (e.g. BSD, MIT, Apache).

### Any security concerns

This is the hardest one: check if anything stands out in the code as a security risk.

Another risk is if the maintainer is lazy and lets a contributor slip malicious code into the code base, or if the maintainer themselves goes postal one day and adds the malicious code themselves. These outcomes are basically impossible to predict so don't linger too long on them.

### The dependency's dependencies

Does the depdenency have other dependencies that fail on any of the above tests? If you really want to do your due diligence here it can take quite some time to recursively audit each dependency, but you get to choose your own risk tolerance depending on context.

## Vendor Lock-in

You may hesitate to commit (pun not intended) so heavily to Github, or any other git hosting service, given that if you switch services, the history of your PRs and all the contextual comments will be lost. You may instead want to keep all your comments within the git ecosystem system via commit messages and [git notes](https://git-scm.com/docs/git-notes). I don't have a strong opinion either way. If we get to a point where I can easily add comments to individual diff lines in a commit, with comment threads, and it's easy for me and everybody on my team to go back and understand why a particular change was made, then I'll advocate for that. But at the moment I don't believe that's a straightforward process outside of a particular vendor.

gha_language: SCSS


text:
# package.json config (`@hint/parser-package-json`)

This parser detects if a `package.json` file is present in the project and
validates its configuration against the `package.json` schema.

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        ...
    },
    "parsers": ["package-json"],
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Events emitted

This `parser` emits the following events:

* `parse::start::package-json`, of type `PackageJsonParseStart`
  which contains the following information:

  * `resource`: the resource we are going to parse.

* `parse::end::package-json`, of type `PackageJsonParsed`
  which contains the following information:

  * `resource`: the parsed resource.
  * `config`: an object with a valid configuration.
  * `getLocation`: method yeilding the resource's problem location.

* `parse::error::package-json::json`, of type `PackageJsonInvalidJSON`
  which contains the following information:

  * `resource`: the parsed resource.
  * `error`: the error emited parsing the package.json.

* `parse::error::package-json::schema`, of type `PackageJsonInvalidSchema`
  which contains the following information:

  * `resource`: the parsed resource.
  * `error`: the error message.
  * `errors`: all the errors that the schama validator returns.
  * `prettifiedErrors`: the errors formatted in a way that is easy to understand.

## Types

If you need to import any type or enum defined in this parser,
you need to import them as follows:

```ts
import { TypeOrEnumYouWantToUse } from '@hint/parser-package-json';
```

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/

repository: webhintio/hint

gha_language: TypeScript

repo_name: webhintio/hint


text:
# Test time augmentation

Test time augmentation (TTA) is a data augmentation strategy used during the testing phase. It involves applying various augmentations, such as flipping and scaling, to the same image and then merging the predictions of each augmented image to produce a more accurate prediction. To make it easier for users to use TTA, MMEngine provides [BaseTTAModel](mmengine.model.BaseTTAModel) class, which allows users to implement different TTA strategies by simply extending the `BaseTTAModel` class according to their needs.

The core implementation of TTA is usually divided into two parts:

1. Data augmentation: This part is implemented in MMCV, see the api docs [TestTimeAug](mmcv.transforms.TestTimeAug) for more information.
2. Merge the predictions: The subclasses of `BaseTTAModel` will merge the predictions of enhanced data in the `test_step` method to improve the accuracy of predictions.

## Get started

A simple example of TTA is given in [examples/test_time_augmentation.py](https://github.com/open-mmlab/mmengine/blob/main/examples/test_time_augmentation.py)

### Prepare test time augmentation pipeline

`BaseTTAModel` needs to be used with `TestTimeAug` implemented in MMCV:

```python
tta_pipeline = [
    dict(type='LoadImageFromFile'),
    dict(
        type='TestTimeAug',
        transforms=[
            [dict(type='Resize', img_scale=(1333, 800), keep_ratio=True)],
            [dict(type='RandomFlip', flip_ratio=0.),
             dict(type='RandomFlip', flip_ratio=1.)],
            [dict(type='PackXXXInputs', keys=['img'])],
        ])
]
```

The above data augmentation pipeline will first perform a scaling enhancement on the image, followed by 2 flipping enhancements (flipping and not flipping). Finally, the image is packaged into the final result using `PackXXXInputs`.

### Define the merge strategy

Commonly, users only need to inherit `BaseTTAModel` and override the `BaseTTAModel.merge_preds` to merge the predictions of enhanced data. `merge_preds` accepts a list of enhanced batch data, and each element of the list means the enhanced single data of the batch.

The BaseTTAModel class requires inferencing on both flipped and unflipped images and then merges the results. The merge_preds method accepts a list where each element represents the results of applying data augmentation to a single element of the batch. For example, if batch_size is 3, and we flip each image in the batch as an augmentation, merge_preds would accept a parameter like the following:

```python
# `data_{i}_{j}` represents the result of applying the jth data augmentation to
#  the ith image in the batch. So, if batch_size is 3, i can take on values of
# 0, 1, and 2. If there are 2 augmentation methods
# (such as flipping the image), then j can take on values of 0 and 1.
# For example, data_2_1 would represent the result of applying the second
# augmentation method (flipping) to the third image in the batch.

demo_results = [
    [data_0_0, data_0_1],
    [data_1_0, data_1_1],
    [data_2_0, data_2_1],
]
```

The `merge_preds` method will merge the predictions `demo_results` into single batch results. For example, if we want to merge multiple classification results:

```python
class AverageClsScoreTTA(BaseTTAModel):
    def merge_preds(
        self,
        data_samples_list: List[List[ClsDataSample]],
    ) -> List[ClsDataSample]:

        merged_data_samples = []
        for data_samples in data_samples_list:
            merged_data_sample: ClsDataSample = data_samples[0].new()
            merged_score = sum(data_sample.pred_label.score
                               for data_sample in data_samples) / len(data_samples)
            merged_data_sample.set_pred_score(merged_score)
            merged_data_samples.append(merged_data_sample)
        return merged_data_samples
```

The configuration file for the above example is as follows:

```python
tta_model = dict(type='AverageClsScoreTTA')
```

### Changes to test script

```python
cfg.model = ConfigDict(**cfg.tta_model, module=cfg.model)
cfg.test_dataloader.dataset.pipeline = cfg.tta_pipeline
```

## Advanced usage

In general, users who inherit the `BaseTTAModel` class only need to implement the merge_preds method to perform result fusion. However, for more complex cases, such as fusing the results of a multi-stage detector, it may be necessary to override the test_step method. This requires an understanding of the data flow in the BaseTTAModel class and its relationship with other components.

### The relationship between BaseTTAModel and other components

The BaseTTAModel class acts as an intermediary between the DDPWrapper and Model classes. When the Runner.test() method is executed, it will first call DDPWrapper.test_step(), followed by TTAModel.test_step(), and finally model.test_step().

The following diagram illustrates this sequence of method calls:

### data flow

After data augmentation with TestTimeAug, the resulting data will have the following format:

```python
image1 = dict(
    inputs=[data_1_1, data_1_2],
    data_sample=[data_sample1_1, data_sample1_2]
)

image2 = dict(
    inputs=[data_2_1, data_2_2],
    data_sample=[data_sample2_1, data_sample2_2]
)

image3 = dict(
    inputs=[data_3_1, data_3_2],
    data_sample=[data_sample3_1, data_sample3_2]
)
```

where `data_{i}_{j}` means the enhanced data, and `data_sample_{i}_{j}` means the ground truth of enhanced data. Then the data will be processed by `Dataloader`, which contributes to the following format:

```python
data_batch = dict(
    inputs = [
              (data_1_1, data_2_1, data_3_1),
              (data_1_2, data_2_2, data_3_2),
             ]
    data_samples=[
         (data_samples1_1, data_samples2_1, data_samples3_1),
         (data_samples1_2, data_samples2_2, data_samples3_2)
     ]
)
```

To facilitate model inferencing, the `BaseTTAModel` will convert the data into the following format:

```python
data_batch_aug1 = dict(
    inputs = (data_1_1, data_2_1, data_3_1),
    data_samples=(data_samples1_1, data_samples2_1, data_samples3_1)
)

data_batch_aug2 = dict(
    inputs = (data_1_2, data_2_2, data_3_2),
    data_samples=(data_samples1_2, data_samples2_2, data_samples3_2)
)
```

At this point, each `data_batch_aug` can be passed directly to the model for inferencing. After the model has performed inferencing, the `BaseTTAModel` will reorganize the predictions as follows for the convenience of merging:

```python
preds = [
    [data_samples1_1, data_samples_1_2],
    [data_samples2_1, data_samples_2_2],
    [data_samples3_1, data_samples_3_2],
]
```

Now that we understand the data flow in TTA, we can override the BaseTTAModel.test_step() method to implement more complex fusion strategies based on specific requirements.

repository: open-mmlab/mmengine

gha_language: Python

repo_name: open-mmlab/mmengine


text:
I handle basic multi-line text.
See AbstractWidgetPresenter

self example

You can also have a look at ListSelectionPresenter and ScrollSyncExample for more examples.

My main purpose is to handle source code (I have editing shortcuts support).

I provide the following variables and their accessors
- autoAccept is a boolean representing if the text is accepted on each keystroke.
- text is the text of the text zone.

I provide the following methods
- beForCode and beForText are shortcut for configuring me.
- getSelection return the interval currently selected.
- getText is a getter of the text

todo
- aboutToStyleBlock  is the block used to know if the text must be styled, it returns a boolean. aboutToStyle: is a shortcut to set directly the boolean.
- accept , accept:notifying:
- acceptBlock should convert the text in a boolean representing if it is to be accepted.
- askBeforeDiscardingEdits
- behavior
- clearSelection
- codePaneMenu:shifted:
- doItContext
- doItReceiver
- specializing eventKeyStrokesForNextFocus , eventKeyStrokesForPreviousFocus
- getMenu
- hasEditingConflicts
- hasUnacceptedEdits
- isAboutToStyle
- isCodeCompletionAllowed
- isForSmalltalkCode
- menuHolder
- notify:at:in:
- readSelection , readSelectionBlock
- registerEvents , registerEventsForShout
- scrollValue
- selectedBehavior
- selectedClassOrMetaClass
-  setSelection: select the text in the interval in argument, selectAll is a shorcut that set the larger interval.
- setSelectionInterval:
- textArea

branch_name: refs/heads/development


text:
---
layout: default
---

# 1994-02-10 - Meeting Logs

## Header Data

From: "Robert A. Hayden"<EMAIL_ADDRESS>To: Cypherpunks Mailing List<EMAIL_ADDRESS>Message Hash: ff4434a5abbecea01ab2f7f54e7b0c7c705adf590887592697f9c59ee530fbde

Message ID<EMAIL_ADDRESS>Reply To: _N/A_

UTC Datetime: 1994-02-10 07:00:17 UTC

Raw Date: Wed, 9 Feb 94 23:00:17 PST

## Raw message

```
{% raw  %}From: "Robert A. Hayden"<EMAIL_ADDRESS>Date: Wed, 9 Feb 94 23:00:17 PST
To: Cypherpunks Mailing List<EMAIL_ADDRESS>Subject: Meeting Logs
Message-ID<EMAIL_ADDRESS>MIME-Version: 1.0
Content-Type: text/plain

If anyone is interested, I do have some logs from tonights Cypherpunks
virtual meeting.

It's not a perfectly clear file, as it has lots of help requests in it (I
don't know MOO too well, but the substance is still there.

If you want it, just drop me a line and I'll get it right off to you.  It
is about 90k big.

____        Robert A. Hayden          <=><EMAIL_ADDRESS>\  /__          -=-=-=-=-             <=>          -=-=-=-=-
 \/  /   Finger for Geek Code Info    <=> In the United States, they
   \/  Finger for PGP 2.3a Public Key <=> first came for us in Colorado...
-=-=-=-=-=-=-=-
(GEEK CODE 1.0.1)  GAT d- -p+(---) c++(++++) l++ u++ e+/* m++(*)@ s-/++
		       n-(---) h+(*) f+ g+ w++ t++ r++ y+(*)

{% endraw %}
```

## Thread

+ Return to [February 1994](/archive/1994/02)

+ Return to "["Robert A. Hayden" <hayden@krypton.mankato.msus.edu>](/authors/robert_a_hayden_hayden_at_krypton_mankato_msus_edu_)"

+ 1994-02-10 (Wed, 9 Feb 94 23:00:17 PST) - Meeting Logs - _"Robert A. Hayden"<EMAIL_ADDRESS>


text:
Plugin for JS logger [loglevel](https://github.com/pimterry/loglevel) which will forward all log messages to the server

# Features
- Send is async and wouldn't slow down the application
- Messages send one by one, so the order is maintained
- Any server which accept POST request should be supported
- You can specify prefix function which would dynamically add prefix for all log messages (app name, current user, etc.)

# Installation
- Using bower - `bower install loglevel-server-send`
- Manually - take [loglevel-serverSend.js](loglevel-serverSend.js)

# Configuration
Add `loglevel` and `loglevel-serverSend` scripts to your page first. Then configure the plugin:

##loglevelServerSend(logger, options)
Extend loglevel with new plugin which will send log information to the log-sever

| Param | Type | Description |
| ----- | ---- | ----------- |
| logger | object | loglevel instance to be extended |
| options | object |  |
| \[options.url='http://localhost:8000/main/log'\] | string | Server url which would be used as a log server |
| \[options.prefix=null\] | string \| function | Prefix for all log messages. Either string or function wich should return string and accept log severity and message as parameters |
| \[options.callOriginal=false\] | Bool | If set to true - original loglevel method for logging would be called |

**Example**
```js
loglevelServerSend(log,{url:'https://example.com/app/log',prefix: function(logSev,message) {
    return '[' + new Date().toISOString() + '] ' + logSev + ': ' + message + '\n'
}})
```

# Servers
It should be fairly easy to create a server which will store all the log messages, but most probably [node-log-server](https://github.com/divhide/node-log-server) would be good enough for you

repository: nagyv/loglevel-serverSend

gha_license_id: NOASSERTION

repo_name: nagyv/loglevel-serverSend


text:
---
title: What is an Application?
permalink: /docs/what-is-an-application/
---

An *Application Model* acts like a template and holds a number of resources to store data. An application model can be released for later use on a Site. Actually, an application model can be used in several sites so it is important to create applications using the micro service pattern to keep them small and only modelled to hold data for specific domains. This way the same models can be reused in different sites, e.g. a Person Registry application model.

An Application contains:

- Any number of Resources
- One Authorization Model (Optional)

### Workflow:
------
**1.** Create an Application.

**2.** Create one or more Resources in your Application.

**3.** Model your Resource.

**4.** Repeat **2** to **3** until you are satisfied.

**3.** Create a release.

### Create an Application
------

**1.** In the sidebar menu of the OOPSIE dashboard click on the *Application Models* menu item.

**2.** Click the *Create Application* button.

**3.** Enter a name for your application and choose an [Authorization Model](/docs/what-is-auth). Authorization is optional but we strongly recommend choosing one since your application will be totally open for anyone if none is chosen. If no Authorization Model exist then  you can create one using one of the two buttons. When ready click *OK* to create your application.

**4.** Now your Application Model will appear in the list of applications. By clicking on the row you will navigate to the application view. You can also delete the application if you aren't satisfied with it.

### Create a Resource
------

If you followed the steps in the previous chapter *Create an Application* then you should now be in the *Application Models* view. In this view you model your application by adding resources, creating releases and other configurations for your application model.

To create a resource for your application model head over to the [Resource Section](/docs/resources) in this guide.

### Create a release of your Application
------

When you are done modeling your Application Model you should tag it (create a release), doing so will make it available for sites.

> When a site is deployed you can update the applications to another version. Note that some updates are not supported.
> **NOT SUPPORTED UPDATES - The most important ones (Not all are listed)**
> * Changing the name of an attribute is not supported.
> * Changing the data type of an attribute is not supported.
> * Changing the key and/or value data type of collection attributes.
> * Changing the type of a resource is not supported.

### The API / Docs
------
If you decide to use the site REST api to connect your client to your OOPSIE site then you can always look how you will use your Application later on when it is deployed on a site.

The documentation is generated using Swagger.

<img src="/img/docs-app.png" width="650">

repository: techoopsie/oopsie-docs

gha_language: CSS

repo_name: techoopsie/oopsie-docs


text:
---
layout: kanji
v4: 2010
v6: 2166
kanji: 震
keyword: quake
elements: quake, rain, weather, sign of the dragon, cliff, two, hairpin, safety-pin
strokes: 15
image: E99C87
on-yomi: シン
kun-yomi: ふる.う、ふる.える
permalink: /rtk/震/
prev: 辱
next: 振
---

1) [dingomick] 16-3-2007(151): Bruce Lee has magical abilities in his newest movie. He can conjure rain and earthquakes.

2) [Zactacular] 15-10-2007(77): A la Kung Fu Hustle, Bruce Lee descends from the storm and causes an earthquake by smashing the ground.

3) [Floatingweed5] 18-12-2007(31): Bruce Lee looks up and sees rain clouds gathering, so he decides to abandon filming and play Quake III instead.

4) [Monkeys_Spiders] 24-1-2010(29): It is said that earthquakes are caused when Bruce Lee gets rained on, he just hates it and punishes mother earth, punching the ground. The popularity of the legend lead to the kanji meaning anything that quakes.

5) [Harrow] 21-3-2009(27): Instant mythology: When heavy rains disturb a dragon hiding under the earth, an earthquake may result.


text:
buildah-bud tests under podman
==============================

This directory contains tools for running 'buildah bud' tests
under podman. The key concept of the workflow is:

* Pull buildah @ version specified in go.mod
* Apply a small set of patches to buildah's tests directory, such that
  * BATS will use 'podman build' instead of 'buildah bud'; and
  * some not-applicable-under-podman tests are skipped

It's a teeny bit more complicated than that, but that's really most of
what you need to know for most purposes. The tests run in podman CI,
and for the most part are expected to just pass.

Troubleshooting
---------------

If you're reading this, it's probably because something went wrong.
At the time of this writing (March 2021, initial commit) it is
impossible to foresee what typical failures will look like, but
my prediction is that they will fit one of two categories:

* Failure when vendoring new buildah (e.g., by dependabot)
* Other failure

Let's examine those in reverse order:

Failure when not vendoring
--------------------------

Aside from flakes, my only guess here is that you broke 'podman build'.
If this is the case, it is very likely that you are aware of what you
did; and if this is the case, your change likely falls into one of
these two categories:

* "OOPS! I didn't mean to break that". Solution: fix it!
* "Uh, yeah, this is deliberate, and we choose to be incompatible with buildah". In this case, you'll need to skip or edit the failing test(s); see below.

If neither of those is the case, then I'm sorry, you're on your own.
When you figure it out, please remember to update these instructions.

Failure when vendoring new buildah
----------------------------------

This is what I predict will be the usual case; and I predict that
failures will fall into one of two bins:

* failure to apply the patch
* failure because there are new buildah tests for functionality not in podman

In either case, the process for solving is the same:

* Start with a checked-out podman tree with the failing PR applied
* run `./test/buildah-bud/run-buildah-bud-tests`

Presumably, something will fail here. Whatever the failure, your next step is:

* `cd test-buildah-v<TAB>` (this is a new directory created by the script)

If the failure was in `git am`, solve it (left as exercise for the reader).

If the failure was in tests run, solve it (either by adding `skip`s to
failing tests in bud.bats, or less preferably, by making other tweaks
to the test code).

You now have modified files. THOSE SHOULD ONLY BE test/bud.bats or
test/helpers.bash! If you changed any other file, that is a sign that
something is very wrong!

Commit your changes: `git commit --all --amend`

Push those changes to the podman repo: `./make-new-buildah-diffs`

cd back up to the podman repo

As necessary, rerun `run-buildah-bud-tests`. You can use `--no-checkout`
to run tests immediately, without rerunning the git checkout.

If you're happy with the diffs, `git add` the modified `.diff` file
and submit it as part of your PR.

repository: jepsenwan/podman

repo_name: jepsenwan/podman


text:
---
layout: post
title:  "Render pdf from HTML using widked_pdf"
date:   2017-10-29 14:30:00 +0800
categories: Ruby on Rails, pdf, html to pdf
---

# Rendering pdf from HTML using wicked_pdf

Assalamualaikum.

I'm using wicked_pdf to generate pdf file direct from HAML templates within my Ruby on Rails application. In this guide, I would like to share how I render pdf file inline to print charge sheet for customer.

## Install gem

```ruby
# generate PDF from html to print
gem 'wicked_pdf'
# required by wicked_pdf
gem 'wkhtmltopdf-binary'
```

## Create templates

I've created haml templates at
`views/layouts/pdf/charge_sheet.pdf.haml`
`views/layouts/pdf/header.pdf.haml`
`views/layouts/pdf/footer.pdf.haml`

```ruby
# views/layouts/pdf/charge_sheet.pdf.haml

!!!
%html
  %head
    %title PDF
    = wicked_pdf_stylesheet_link_tag "pdf"
  - bg_color = Rails.env.development? ? "" : "#eee2ef";
  %body{style: "background-color: #{bg_color}"}
    .row
      .col
        = yield

# views/layouts/pdf/header.pdf.haml

.container-fluid
  .row
    .col
      - if Rails.env.development?
        %p.text-left
          %h5.text-danger Sample for development
    .col
      %p.text-right
        = ItemRequest::CHARGE_SHEET_ISO_NUMBER
  %br
  .row
    .col-5
      = wicked_pdf_image_tag 'company_logo.jpg', class: "img-fluid rounded float-left"
    .col-7
      %strong
        Charge Sheet for Medical Implant and Devices
        %br
        Yavin4 Community Hospital

# views/layouts/pdf/footer.pdf.haml
!!!
%html
  %head
    :javascript
      function number_pages() {
        var vars={};
        var x=document.location.search.substring(1).split('&');
        for(var i in x) {var z=x[i].split('=',2);vars[z[0]] = decodeURIComponent(z[1]);}
        var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
        for(var i in x) {
          var y = document.getElementsByClassName(x[i]);
          for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
        }
      }
  %body{:onload => "number_pages()"}
    .container.footer
      .row
        .col-10
          %small
            %strong
              Notes: Patient needs to make payments at our front cashier
            %br
            Any enquiries please call Tel: 98123-29-733-3060-YAVIN,
            email<EMAIL_ADDRESS>|
        .col-2
          Page
          %span.page
          of
          %span.topage

```

1. noticed that the sylesheet tag is using `wicked_pdf_stylesheet_link_tag`
2. i've downloaded twitter/bootstrap v4.0 and imported it into `pdf.css.scss` inside `assets/styleshetts/`
3. I've also set the backgroud-color to bluish in development environment.
4. There is also another similar tag,  `wicked_pdf_image_tag` for importing image to our pdf document.
5. Also noticed that in footer.pdf.haml, there are javascripts coding to display page number.

this is the content of pdf.css.scss
```scss
@import "bootstrap4.min.css";

body{
  font-size: 10pt;
  padding: 1px;
}

table{
  font-size: 9pt;
}

thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }

.footer{
  page-break-before: auto;
}
```
> Table thead and page-break
>   when a pdf create a new page, and inside the rendered content is a table, the css setting for thead, tfoot and tr is necessary to ensure the table header doesn't overlapped on page 2.

## Generate PDF
```ruby
def generate_pdf_string
    return render_to_string pdf: "charge-sheet",
    template: 'item_requests/charge_sheet',
    layout: "layouts/pdf/charge_sheet.pdf.haml",
    encoding: 'UTF-8',
    page_size: 'A4',
    orientation: 'Portrait',
    locals: {item_request: @item_request, patient: @patient, request_items: @request_items},
    margin: { top: 38, bottom: 18 , left: 5 , right: 5},
    header: {
      html:{
        template: 'layouts/pdf/header.pdf.haml'
      }
    },
    footer: {
      html:{
        template: 'layouts/pdf/footer.pdf.haml'
      },
      locals: {page: '[page]', topage: '[topage]'}
    }
end
```

> In order to be able to save the pdf somewhere, or perhaps to email the pdf afterwards, I've come to solution to generate the dpf as tring and then sent to browser as application/pdf

# the Controller

```ruby
# GET /item_request/1/charge_sheet
  def charge_sheet
    # @current_user is from session
    # @item_request is from action filter

    pdf = generate_pdf_string
    cs = ChargeSheet.new(pdf_string: pdf, filetype: 'application/pdf', user_id: @current_user.id, item_request_id: @item_request.id)
    if cs.save
      send_data(pdf, type: 'application/pdf', filename:'charge_sheet.pdf', disposition: 'inline')
    else
       @item_request, alert: "Error Saving Charge Sheet: #{cs.errors.messages} "
    end
  end
```

so, I set up a button to this controller and a new tab opened up with the rendered pdf file.

I hope that helps.

Thanks..

yusdirman

extension: markdown


text:
### Use mappings whenever possible (cheaper storage and faster to execute)

For example:
- https://github.com/hebusnimbus/Amazys/blob/master/contracts/MarketPlace.sol#L24-L26
- https://github.com/hebusnimbus/Amazys/blob/master/contracts/MarketPlace.sol#L28-L30

### Separate logical units in their own contracts (easier to read code and avoid bugs)

- Followed object oriented approach (Store, Product, MarketPlace) to keep the flow between contracts as simple as possible.

### Implemented a circuit breaker

- The circuit breaker `stopInEmergency` stops any write operations in the MarketPlace contract (read operations are still allowed).

repository: hebusnimbus/Amazys

repo_name: hebusnimbus/Amazys


text:
## Migration Testing Scripts

Scripts to provide better automation and coverage on the testing strategy of the WebTrends to Snowplow migration.

These scripts are part of an ongoing project while WebTrends migration is ongoing.

## Getting Help

These scripts are intended for internal use. Please Contact the GDX Analtics Team for more information.

## Contributors

The GDX analytics team will be the main contributors to this project currently. They will also maintain the code as well.

## License

Copyright 2015 Province of British Columbia

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.

repository: bcgov/GDX-Analytics

repo_name: bcgov/GDX-Analytics


text:
[Options]: https://pkg.go.dev/github.com/bzub/config-functions/consul?tab=doc#Options
[ConsulSnapshotSave]: https://www.consul.io/docs/commands/snapshot/save.html
[ConsulSnapshotRestore]: https://www.consul.io/docs/commands/snapshot/restore.html

# Consul Backup and Restore CronJobs

When the `backup_cron_job_enabled` [option][Options] is enabled, three CronJob
Resource configs are created.

## Backup CronJob

This CronJob periodically [saves][ConsulSnapshotSave] Secrets that Consul
depends on, as well as its state snapshot in a bundle to a backup Secret. The
name of the backup Secret is configurable with the `backup_secret_name`
[option][Options].

This backup bundle can then be downloaded via `kubectl`, or otherwise shipped
to whatever storage you like. When a restore from backups is needed, the
restore CronJobs detailed below will only need this Secret to function.

## Restore CronJobs

These CronJobs automate the task of restoring a Consul instance. Their
`spec.suspend` value is `true`, so they can only start their Job manually via
`kubectl`. The name of the Secret they look for that contains backups to
restore from is configurable with the `restore_secret_name` [option][Options].

### Restore Secrets CronJob

This CronJob restores Secrets needed by the Consul StatefulSet.

### Restore Snapshot CronJob

This CronJob runs a [snapshot restore][ConsulSnapshotRestore] against the
Consul StatefulSet.

## Disaster Recovery Example

This example picks up after the [production demo](./productionExample.md), and
refers to the same Resources/Namespace, applied to a Kubernetes cluster.

### Get A Backup Bundle Secret

First you will need a copy of a backup bundle secret generated by the [backup
CronJob](#backup-cronjob). In this case we will simply retrieve it via
`kubectl`.

```sh
# Manually trigger a backup Job in case it hasn't run yet.
kubectl -n example create job --from cronjob/my-consul-backup my-consul-backup

# Get the backup bundle secret and change the name to the restore Secret name.
kubectl -n example get secrets my-consul-example-backup -o yaml |\
  sed 's/  name: .*/  name: my-consul-example-restore/' \
  > secret_my-consul-example-restore.yaml
```

### Simulate A Disaster

We delete and recreate the Namespace Consul was deployed in, to simulate total
data loss. Then we recreate the Namespace, and apply our backup bundle Secret
to restore from.

```sh
kubectl delete ns example
kubectl create ns example
```

### Perform A Restore

There are a few high-level steps to restoring from backups in this
empty Namespace scenario.
1. Apply the backup bundle Secret, Consul ConfigMaps, and restore CronJob
   Resources.
1. Create a Secret restore Job.
1. Apply Consul server Resources, starting a new server.
1. Create a snapshot restore Job, restoring the Consul state from backups.

For this example, the following script will perform a restore:

```sh
# Apply the backup bundle Secret and Consul ConfigMaps.
kubectl apply -f secret_my-consul-example-restore.yaml
kustomize config grep "kind=ConfigMap" $DEMO |\
  kustomize config fmt |\
  kubectl apply -f -

# Apply Consul restore CronJobs.
kustomize config grep "metadata.name=my-consul-restore" $DEMO |\
  kustomize config fmt |\
  kubectl apply -f -

# Create a Secret restore Job.
kubectl -n example create job \
  --from cronjob/my-consul-restore-secrets my-consul-restore-secrets

# Apply Consul server Resources.
kustomize config grep "metadata.name=my-consul-server" demo |\
  kustomize config fmt |\
  kubectl apply -f -

# NOTE
# You may want to ensure the Consul server Pod is passing health checks before continuing.

# Create Consul snapshot restore Job.
kubectl -n example create job \
  --from cronjob/my-consul-restore-snapshot my-consul-restore-snapshot
```

repository: bzub/config-functions

gha_language: Go

repo_name: bzub/config-functions


text:
---
title: Docker on Windows
author: Constanze Kratel<EMAIL_ADDRESS>date: 2015-10-03
permalink: docs/tutorials/docker-on-windows/
description: How to get started with Docker on Windows
docker-versions:
  - 1.8.2
topics:
  - docker
  - beginner
  - windows
---

Docker supports running the Docker Toolbox on Windows systems. You can use a Docker client directly from your Windows machine to manage containers that are running on Linux hosts.

###Prerequisites
To run Docker on Windows, your system must be running Windows 7.1 or later.

Ensure that your Windows system supports Hardware Virtualization Technology and that virtualization is enabled. Use the following instructions.

####For Windows 8 or Windows 8.1

1. Select **Start** > **Task Manager** and click the **Performance** tab.
2. Under **CPU**, verify that the value for **Virtualization** is **Enabled**.
![Windows Control Panel screenshot]({% asset_path 003-docker-on-windows/window-8-virtualization-enabled-highlighted-360.png %})

3.	If virtualization is *not* enabled, follow the manufacturer’s instructions for enabling it.

####For Windows 7

Download the [Microsoft® Hardware-Assisted Virtualization Detection Tool] (http://www.microsoft.com/en-us/download/details.aspx?id=592) and follow the instructions.

###Getting started
To get started with Docker on Windows, you perform the following tasks:

1. [Install Docker Toolbox on Windows](/docs/tutorials/docker-install-windows/)
2.	[Set up a virtual environment with a Docker host](/docs/tutorials/set-up-docker-machine/)
3. [Load a Docker environment on Windows](/docs/tutorials/load-docker-environment-on-windows/)

###Troubleshooting Docker on Windows
To troubleshoot Docker on Windows, read the follwoing articles:

* [Error running interactive Docker shell on Windows](/docs/references/troubleshooting-cannot-enable-tty-mode-on-windows/)
* [Troubleshooting the Docker Toolbox setup on Windows 7, 8.1, and 10](/docs/tutorials/troubleshooting-the-docker-toolbox-setup-on-windows-7-8-1-and-10/)

repository: stanzikratel/docs-container-service

repo_name: stanzikratel/docs-container-service