text:
---
categories:
  -
date: 2018-05-14T12:46:47+01:00
description: ""
draft: false
resources:
- src: images/mobile-phone-1875813_1280.jpg
  name: "header"
- src: "gallery/*.jpg"
  name: gallery-:counter
  title: gallery-title-:counter
url: /stories/simple-things/pixabay/
slug:
stories:
  - simple-things
subtitle:
title: Pixabay
options:
  unlisted: false
tags:
  - web
  - stock photos
---

This is more than a gallery of free images. Pixabay connects you with the artists and allows you to follow their work or show appreciation in a number of ways, including donating through the site.

https://pixabay.com/

Photo source: https://pixabay.com/en/mobile-phone-smartphone-3d-1875813/

repository: brunoamaral/Hugo-Now-UI

repo_name: brunoamaral/Hugo-Now-UI


text:
# Snake

This game will be a multiplayer snake game.

AIs will compete to grow and destroy the other players.
The API can also be used to create clients which human players can control.

Food will be placed randomly by the server and snakes can eat it to grow longer.
Snakes can cut off other snakes, and they will be killed. When a snake dies it turns into food.
The larger the snake, the larger the turning circle of the snake.
Snakes may cross themselves but not other snakes, unless they are in a team.
Snakes will be made up of many segments. Snakes have segment size, segment separation, and segment count.

#### Network Protocol:
The network protocol will consist of 2 stages. Connection and The Game Loop.
During the connection phase, all the data required for setup of the game will be sent to the client.
During the game loop phase, every tick the client will interact with the game.

###### Connection

1. Request ID - The client should request an id from the server it is trying to connect to.
2. Request Map - The client should request the map. This will remain fixed for the game.
3. Request Snakes - The client should request the initial state of all the snakes.

###### Game Loop

Data will be sent from the server to the client about all food, snakes and objects that are nearby.
The Snake will have a radius of vision inside which data will be sent.

* Snake Locations - Update fragments will be sent each tick.
* Food Locations - New food will be sent each tick. Old food will be sent every few ticks.

- Snake Request - Requests information about a snake.
  - This should be used when there are update fragments for a snake that doesn't exist locally.

license: MIT

repository: liamtbrand/script-wars

branch_name: refs/heads/master

extension: md

gha_language: Java

license_type: permissive

repo_name: liamtbrand/script-wars


text:
+++
title = "azure_migrate_project_machine Resource"
platform = "azure"
draft = false
gh_repo = "inspec-azure"

[menu.inspec]
title = "azure_migrate_project_machine"
identifier = "inspec/resources/azure/azure_migrate_project_machine Resource"
parent = "inspec/resources/azure"
+++

Use the `azure_migrate_project_machine` InSpec audit resource to test the properties related to an Azure Migrate Project machine.

## Azure REST API Version, Endpoint, and HTTP Client Parameters

{{% inspec_azure_common_parameters %}}

## Installation

{{% inspec_azure_install %}}

## Syntax

`resource_group`, `project_name`, and `name` are required parameters.

```ruby
describe azure_migrate_project_machine(resource_group: 'RESOURCE_GROUP', project_name: 'PROJECT_NAME', name: 'PROJECT_MACHINE_NAME') do
  it{ should exist }
  its('properties.discoveryData') { should_not be_empty }
  its('properties.discoveryData.first') { should include({ osType: 'WINDOWSGUEST' }) }
end
```

```ruby
describe azure_migrate_project_machine(resource_group: 'RESOURCE_GROUP', project_name: 'PROJECT_NAME', name: 'PROJECT_MACHINE_NAME') do
  it  { should exist }
end
```

## Parameters

`name`
: Name of the Azure Migrate Project machine to test.

`resource_group`
: Azure resource group where the targeted resource resides.

`project_name`
: Azure Migrate Assessment Project name.

The parameter set that must be provided for a valid query is `resource_group`, `project_name`, and `name`.

## Properties

`id`
: Path reference to the Migrate Project machine.

`name`
: Unique name of a Migrate Project machine.

`type`
: Type of the object. `Microsoft.Migrate/MigrateProjects/Databases`.

`properties`
: Properties of the assessment.

`properties.assessmentData`
: The assessment details of the machine published by various sources.

`properties.discoveryData`
: The discovery details of the machine published by various sources.

`properties.migrationData`
: The migration details of the machine published by various sources.

`properties.lastUpdatedTime`
: The time of the last modification of the machine.

For properties applicable to all resources, such as `type`, `name`, `id`, and `properties`, refer to [`azure_generic_resource`]({{< relref "azure_generic_resource.md#properties" >}}).

Also, refer to [Azure documentation](https://docs.microsoft.com/en-us/rest/api/migrate/projects/machines/get-machine) for other properties available.

Any attribute in the response nested within properties may be accessed with the key names separated by dots (`.`), and attributes nested in the **assessmentData** are pluralized and listed as a collection.

## Examples

### Test that the Migrate Project machine has a Windows OS

```ruby
describe azure_migrate_project_machine(resource_group: 'RESOURCE_GROUP', project_name: 'PROJECT_NAME', name: 'PROJECT_MACHINE_NAME') do
  its('properties.discoveryData.first') { should include({ osType: 'WINDOWSGUEST' }) }
end
```

## Matchers

This InSpec audit resource has the following special matchers. For a full list of available matchers, please visit our [Universal Matchers page](/inspec/matchers/).

### exists

```ruby
# If a migrate project machine is found, it will exist.

describe azure_migrate_project_machine(resource_group: 'RESOURCE_GROUP', project_name: 'PROJECT_NAME', name: 'PROJECT_MACHINE_NAME') do
  it { should exist }
end
```

### not_exists

```ruby
# If migrate project machine is not found, it will not exist.

describe azure_migrate_project_machine(resource_group: 'RESOURCE_GROUP', project_name: 'PROJECT_NAME', name: 'PROJECT_MACHINE_NAME') do
  it { should_not exist }
end
```

## Azure Permissions

{{% azure_permissions_service_principal role="contributor" %}}

repository: inspec/inspec-azure

branch_name: refs/heads/main

gha_language: Ruby

gha_license_id: NOASSERTION

repo_name: inspec/inspec-azure


text:
---
name: Business Advantages
description: Aurelia is open source platform with commercial backing. If your business is going to spend significant money building software, you want to do it on a platform that's committed to you as a customer. You want to be able to form a relationship with your technology provider to ensure that you and your developers have a solid platform upon which to build your business now and in the years to come.
author: Rob Eisenberg (https://robeisenberg.com)
---

## Commercially Backed

* Commercial support options available.
* Custom contracts available for enterprises.
* Internally "dogfooded" by Blue Spire Inc. in its own products.

## Commercial Products and Services

* Official on-site or virtual training.
* Consulting, advisory, and code-review services.
* Aurelia UX (In Development) - Cross-platform, mobile UI components.

## Strategic Partnerships

* Partnerships with both large and boutique consulting organizations in order to provide scale-out of developer resources as needed by businesses adopting Aurelia.
* Official training partners around the world to deliver training anywhere and anytime.

## Broad Customer Reach

* Applications developed in virtually every space: healthcare, insurance, finance, entertainment, technology, developer tools, LOB, gaming, etc.
* Used internally at many well-known enterprises.
* Adoption among large, international organizations and governments as well as small and medium businesses.

repository: aurelia/documentation

filename: 3. business-advantages.md

gha_license_id: MIT

repo_name: aurelia/documentation


text:
# Project-Alpha
Open Source EEG Analysis Software

## Shiny Suite

The app.R and server.R files can be compiled on a Shiny Server or RStudio to provide a functional interface for EEG and Cognitive data analysis.

One can visualize regressors in a scatter plot matrix, perform logistic regressions, and reactively adjust parameters.

Features are automatically extracted from data that is uploaded with the defined structure.

### Required data

The cognitive data must be formatted with a unique identifier in each row.

The EEG data must contain an identically named unique identifier column. Furthermore, a column with electrode positions must exist to aggregate frontal and occipital frequency bands.

# BIS Processing

BIS data stored in a .bin datatype can be converted to a standard MATLAB data structure and then preprocessed automatically using EEGLAB and Fieldtrip. Ensure EEGLAB and Fieldtrip has already been installed before use.

repository: farice/Project-Alpha

repo_name: farice/Project-Alpha


text:
# Change Log

## 2.1.0 (2019-12-04)

Updated:

* `aws-sdk` peer dependency removed. Will use peer dependency set in `aws-param-store`

Internal:

* Updated dependencies

## 2.0.0 (2019-11-04)

New:

* Added support for automatically loading via environment variable: `AWS_SSM_ENV_PATH`

Updated:

* Node 10.x and higher
* Added `aws-sdk` as a peer dependency

Internal:

* Updated dependencies
* Refactored tests

## 1.2.0 (2018-01-08)

Improved:

* Added options to define region

## 1.1.0 (2017-09-18)

New:

* `load()` function that executes the query with a given path

## 1.0.0 (2017-09-13)

Initial Release

repository: kinlane/links

repo_name: kinlane/links


text:
# Angular.js Project Architecture. Part I
---
> This practical guide will help you avoid mistakes in construction of building complex architecture and more readable code.

> Here you can find the often used tricks, which compliance certainly would help you in real projects.

> Document is periodically updated, so you can always read and download the latest version here:  https://github.com/asduser/angularjs-recipes.

> Made by @asduser - https://github.com/asduser.

#### Download in PDF

https://github.com/asduser/angularjs-recipes/blob/master/Angular_ViewingAround.pdf

---

## 1. Decrease the HTML confusion.

**Description:**

As you know, HTML is a hypertext markup language, not a programming and not a some application logical core. It was invented to solve an issues of UI representation.

But with the release the Angular.js, many beginner developers have written a lot of critical logic inside html-blocks. Why it can be dangerous?

1. You can't to debug that code properly. Variables, expressions, functional methods and the sets of data - all of that may be ignored in debugger mode.
2. Each new JavaScript code inside HTML significantly makes worse the common code readability. Over time you will find it difficult to support that "view".
3. In most cases this approach prevents the code reuse, because each block has been closely related with a corresponding application logic.

**Solution:**

Try decrease the javascript uses inside html blocks. Do it so often as you can. It may cause some discomfort (you have to take care about application architecture), but after a time you reach a success.

## 2. Dont forget about ng-include.

Angular.js provides a powerful methodology of using html-templates and ignoring them - a real offence. If html page has a lot of code, the good practice is a dividing it to the smaller functional views. As a consequence, code editing will be a much easier and readable.

```html

<!-- Instead of: -->

<div id="tabs">
  <div id="tab-1"> ... </div>
  <div id="tab-2"> ... </div>
</div>

<!-- Use: -->

<div id="tabs">
  <div ng-include=" 'tabs/my-tab1.html' "> ... </div>
  <div ng-include=" 'tabs/my-tab2.html' "> ... </div>
</div>

```

Now, to make changes enough modify *my-tab1.html* or *my-tab2.html* which are located in appropriate directory.

## 3. Explicit named variables.

Dont try mislead your teammates or another developers, who will support you code, they have enough problems. On the contrary, help them to read each line of code like a sentences of adventure book.

For example:
```html
<!-- #1 -->
<div ng-hide="!isVisible" class="container"></div>

<!-- #2 -->
<div ng-show="isVisible" class="container"></div>

```

At the second example you clearly understand what does the code. First example provides you a logic of double negation. It's so easy sample, but the each complication in code will make understanding more difficult (e.g ternary operator with a multiple sequence).

## 4. Project architecture.

There are a lot of different cases how to develop an internal application levels, but I would like to share you my own solution which allows to create a flexible and scalable structure in the future.

![Image](https://github.com/asduser/angularjs-recepies/blob/master/image1.png?raw=true)

In app.js declare the common modules, dependencies and the master module. It's looks like this:

```javascript

angular.module("app", [

  "app.constant",
  "app.filters",
  "app.helpers",
  "app.modals",
  "_webApi_",
  "app.utils",

  // another dependencies

]);

```

Now let's talk about project architecture above. First of all, a main module was declared that means all another components have to be injected into it.

There is a naming methodology for native application modules such as "filters, helpers, utils" etc. According to this principle we certainly prevent the presence of suspicious or undesirable components in project.

Explanation:

* **Constant**: contains all static variables for the common entities.
* **Controllers**: project controllers store with 2-level nesting, for example: *controllers -> login -> LoginController.js*, *controllers -> login -> ForgotPasswordController.js*.
* **Css**: styles for different .html representation.
* **Directives**: angular.js directives store with 2-level nesting, for example -> *directives -> form-validator -> formValidator.js*.
* **Filters**: set of filters.
* **Helpers**: a special components to work with controllers (see below).
* **Translations**: different languages for the current application.
* **Images**: graphic objects, .svg, .gif etc.
* **Lib**: external libraries (see below).
* **Modals**: interactive user windows to expose some additional functionality.
* **Repositories**: internal entities to interact with webApi component.
* **Settings**: project configuration file (.js).
* **Utils**: set of specific services, factories which are independent from the current project structure and may bi included into another project.
* **Views**: .html views. Desirable to use an analogical level nesting which is described in controllers directory. For example: we have *controller -> food -> FoodController*. So, a good solution is creating a directory *views -> food -> main.html*, where will be displayed all existing items. To add a new .html page, which is responsible for some Food actions, just add it *into views -> food -> editFood.html*.
* **webApi**: $http requests manager.

You may be sure you will save a lot of time and there is no need for finding a concrete method not knowing where the parent file is exactly located.

## 5. Designation Components.

It is a good approach to use the single modules for each functional set of entities due to code modularity, structuration, a single component responsibility.

As for declaring component dependencies, so I recommend you work with "IoC container" like this:

```javascript

// Module.js file in repositories directory.
angular
  .module("app.repositories", []);

// Some repository is here.
angular
  .module("app.repositories")
  .factory("repositories.Food", foodRepository);

function foodRepository(appSettings){

  // logic is here...

}

// IoC container.
foodRepository.$inject = [
  "constant.APP_SETTINGS"
];

```

"IoC container" is responsible for external dependencies, functional components and another entities inside a current item.

## 6. Use filters.

If your application uses a lot of different conversions, expression, values translation or smth else - just use a filters. It makes your code clearly, shorter and easy to support. Any time a specific block of code could be changed, modified or absolutely replaced by another logic.

```html

<div ng-app="myApp">

<div ng-controller="MyCtrl">
  <ul>
  <li ng-repeat="u in users"> {{ u | userinfo }}
  </ul>
</div>

</div>

```

```javascript

var myApp = angular.module('myApp',[]);

myApp.controller("MyCtrl", function($scope){

$scope.users = [
	{name: "Bob", age: 20},
  {name: "John", age: 25}
];

});

myApp.filter("userinfo", function(){
	return function(item) {
  	return "My name is " + item.name + ". I am " + item.age;
  }
});

```

**Result is:**

```html
My name is Bob. I am 20
My name is John. I am 25
```

## 7. Controller logic division.

Controller is your place where you may manage your data, invoke an appropriate methods and use different factories, services etc. One of the benefits of using multiple controllers is a lack of code duplication. Each repeating block of logic recommended to transfer into a suitable entity.

```javascript
  angular
    .module("app")
    .service("dateConverter", function(){
      // some code...
    });
```

You have to think out your further actions immediately before creating a new service or factory, because there are independent controls, which may be injected into a special controller to manage the data. Each service or factory responds only for one goal. That principle helps to create more powerful and scalable entities.

```javascript
// Example #1

app.controller("UserController",  ["$scope", "imageService",
  function($scope, imageService){

    // ....

    $scope.getAvatar = function(url){
      return imageService.get(url);
    };

    // Returns default image url.
    var image1 = $scope.getAvatar(null);

  }]);

```

We dont need the details what the imageService does, which actions and operations are exist there. You have to understand a one thing - the imageService will return a valid link or default image url (which is determined by a constant type).

But dont rush to write a code and clone a bunch of services, which won't be a unique entity or responds only for one JavaScript method. Service or factory is a set of methods, which have a similar behaviour and exist as a different plain levels of big complicated task.

## 8. Controller naming.

Try use postfix Controller instead a famous Ctrl. It does titles more readable and looks like a completed word.

```javascript

app.controller("PlayerController", ["$scope", function($scope){

//some code ...

}]

```

## 9. Helpers.

**Description:**

If two or more controllers have a resembling blocks of code, methods here is a solution: create a service\factory which performs within itself all of that logic. Helpers aren't like a utils, services a factories like you used to see them. There are a special entities, which implement only a specific set of methods for one or more controllers.

For example, here is a FoodController where user may order food, see the current food directory, rank them or just browse a chemical composition of famous items.

Quite possibly will be the case when it will be necessary to covnert one value into another (ex. *kilograms* (kg) to *pounds* (lb), *liters* (l) to *milliliters* (mL) etc.). Create a single factory or service isn't a best decision, because service is responsible for a specific functionality and may be injected into another Angular.js entity.

What do you think, is it up to our expectations? There are a several disadvantages of using such services:

1. The service will be very common and has a lot of unnecessary functions.
2. Inability division of existing functionality into single entities, because there are a lot of codependent JavaScript blocks.
3. With increasing the size of application will increase the number of methods.

**Solution:**

Create a single service\factory which will depend on a specific controller(s), but implement some logic inside without duplicating throughout the application.

```javascript

app.service("foodConversionService", function(){

//some conversion methods...

});

```

And here is a good place to work with weight transformation, changing the liquid values and other physical and chemical food properties.

## 10. Useful directives.

Often we need to pass some data into a specific entity to gain a some functional html-code. And here is a solution - Angular.js directives. But remember, each component consumes a certain amount operating memory, moreover it exponentially loads the browser.

There is a reason why we need to use a directives deliberately. Use derectives only for use - it's a main mistake of beginners Angular.js developers, cause in many times we can do the usual template without a specific logic and postrenderring.

* Think twice, before you'll use some component.
* Use directives in places repetition code blocks.
* Be careful when you work with graphic elements, try simplify an existing code as much as it possible.

## 11. Constants.

For a qualitative interation a several components we may take care about the process of data representation. Don't forget that a truly scalable application shouldn't depend on the variables. As a result, use a special Angular.js component - constant.

```javascript

app.constant("userDetails", {

    "GENDER": {
      "0": "Female",
      "1": "Male"
    },

    "MIN_AGE": 18

});

```

Here we can see a special *"userDetails"* constant, which contains the additional information about our application visitors. To add a new property or modify an existing - just enough to change it in one location, there is no need search for it throughout the whole application.

A good practive to use constants for the complicated block of logic, repeating methods, codependent components etc.

Initial application settings, options for different components should be included into suitable constant files too. It prevents a code duplication and significantly simplifies an ability to support current application in the future.

```javascript

app.constant("APP_SETTINGS", {

    "START_PAGE": "app.dashboard",
    "REDIRECT_UNAUTHORIZED": "app.login",
    // another variables ...

});

```

Thereafter quite enough refer to the existing constant variable from code for calling some action. For example:

```javascript

if (user.role != "Anonymous") {
  $state.go(APP_SETTINGS.START_PAGE);
} else {
  $state.go(APP_SETTINGS.REDIRECT_UNAUTHORIZED);
}

```

The process of variable value changing includes:

1. Openning a specific constant file.
2. Setting a new value to variable.

There is no need to find all existing variables within application, which significantly saves the time and simplifies a common work.

Better to spend more time thinking about the additional constant type, than have only wasting time to find and fix values in the future.

## 12. Utils.

**Description:**

As mentioned above, the repeating code should be involved into a service\factory to it reusing. It a good practice create such a functional modules, which may be transferred into another project without any difficulties.

Supposably, there is a service to wrk with dates: create, filter, convert into appropriate formats, use a special mask etc. But here is a one often repeated question - some block of our service depends on the current application structure.

```javascript

app.service("dateManager", ["constant.countries", "someFactory", function(countries, someFactory){

// Don't do this inside a service!
$("#some-field").datepicker();

// some code...

}]);

```

Static jQuery #id handling, using another modules o factories to exapose some additional functionality, injection of constant files and many other reasons due to which the service cann't be called a "reusable".

**Solution:**

To solve that issue try modify an existing service as much as it possible:

* Get rid of extra dependencies.
* No need to use an internal constant files inside a "utils services\factories".
* Don't use the static jQuery element handling.

But there are cases where the use of additional files to ensure correct operation of the module is necessary. Anyway, try make "utils" service universal.

## 13. Libraries.

External libraries, modules and minified files should be located into a special application directory - lib. There are only libraries, which are not associated with our app.

*For example:* jQuery, D3.js, Angular.js etc.

## 14. Modals.

Often a modern Angular.js applications use modal windows for user interaction, which is especially useful when exist a lot of different dynamic interfaces. *For example:* content filters, confirmations, alerts, run-time installers etc.

To simplify the main logic and prevent code duplication inside each of that modal window, include a special "ModalManager" where exist a common functional methods.

```javascript

// here is some actions within ModalManager controller.

$scope.openFoodDetailsModal = function(size) {

    var modalInstance = $modal.open({
        templateUrl: 'source to .html',
        controller: 'FoodDetailsController',
        size: size,
        resolve: {
            numberCollection: function () {
                return [1, 2, 3, 4, 5];
            }
        }
    });

    modalInstance.result.then(function (response) {
        // some actions with response...
    });

};

```

As you see, we used a special component to manage our modals. At this point it doesn't matter, but it is important to understand how controllers may interact between themselves.

*"openFoodDetailsModal"* method render a new window, which will retrieve specified *"FoodDetailsController"* and some data when it initializes. The last one contains in "resolve" field and it is a plain object, each field of which is a specific data type.

To inject more different values enough add a new files, ex.:

```javascript

resolve: {
            numberCollection: function () {
                return [1, 2, 3, 4, 5];
            },
            user: $scope.currentUser
        }

```

Moreover, you may transmit into it a current controller variables, collections, methods or even $rootScope parameters. Each new dependency injection passes throughout ModalManager and there is no need declare many different controllers, services only for delivering some data into specific modal windows.

## 15. Application Settings.

A lot of Angular.js project have internal data, which declares in many places, complicating the support and modules expansion. It is not just about common constant files (gender, countries, colors). For example, we have an application "TITLE" parameter.

```javascript

app.constant("APP_SETTINGS", {

  "TITLE": "Food Recepies"

});

```

Inject that constant in controller, service, factory is very simple and trivial task, but what about variables definition for using them within html-code? Try do this:

1. Include *"APP_SETTINGS"* constant into $rootScope controller.
2. Declare a suitable variable, which will describe internal application settings like this: $rootScope.appConfig = "APP_SETTINGS".

And declare it inside "Header", "Login Page" and "Forgot Password Page":

```html

<span> {{ appConfig.TITLE }} </span>

```

Now we may change the title without any worrying. Furthermore, each new developer who will work with your code, dont need where is exactly uses that parameter, he have to know just a location for "APP_SETTINGS" constant. Usually, it is a directory "settigns" in main "app" folder.

## 16. webApi module.

Nowadays virtually all Angular.js project have a close relationship with server-side to manage the data. Authorization, getting some data for tables creating, update something or even administrate mobile apps - all of this depend on a stable and well thought out functionality.

It should be a clear division of logic for web Api module, because some block would be changing very often in the early stages of development, but another - not.

Unlikely we need often change the basic types of database queries ($http.put, $http.get, $http.post, $http.delete etc.), thus all of these components should be located into a "core" module. It rarely changes, because the fundamental logic described there and it is no need to make changes every time when you add a new http-request.

At the section *"Useful links"* you can **read and download** the RESTful webApi module with settings, core functionality, a set of special query formatters and filters.

**Notice:** webApi module shouldn't know about your internal data, relationships or smth else, because it has been included only for sending queries to server-side and getting an appropriate responses. It is a really big trouble when somebody declares $http methods inside controllers and specifies a lot of data there.

## 17. Repositories.

In continuation of the previous paragraph, now we'll talk about entities which handle $http requests and do some actions after successful or failure response. But, this components don't know nothing about internal data too.

Repository is responsible for:

* Sending http-requests with specified params.
* Implementation response functionality and notify controller.
* Manage all internal error requests and different exceptions.

```javascript

// repository declaration above...
function getAll(){
  return webApi.getAllFoodItems();
}

```

In this example showed how repository may interact with webApi module without any data or logic disclosing. This approach helps to save the components encapsulation and allows to work at the higher abstraction level.

Recommended to use in repositories for methods without returning a flexible exception handlers, which certainly allow code much easier to read.

```javascript

function update(id){
  webApi.updateFoodById({
    "url": { "id": id }
  }).success(function(response){
    checkResponse(response, "Updated!");
  });
}

// Exception handler.
function checkResponse(response, message) {
  if (response && response.data) {
    // Case #1
    // Example: alert(message);
  } else {
    // Case #2
    // Example: display default message with text from response or constant file.
  }
}

```

**Explanation:**

1. In first case enough to manage an existing response and show on UI a specific message. It doesn't matter which service obtains and  processes a derived message at the moment.
2. In next one we have to write some logic for catching the exceptions and show information from internal constant file if necessary.

To improve an existing code and implementation the encapsulation principles let's use a special *"Message Service"*, because many repositories may contain similar method "checkReponse()".

```javascript

// Code in repository.
function update(id){
  webApi.updateFoodById({
    "url": { "id": id }
  }).success(function(response){
    messageService.checkResponse(response, "Updated!");
  });
}

// Code in some service.
this.checkResponse = function(response, message) {
  // Internal implementation.
}

```

### 18. Useful links.

* https://github.com/asduser/webApi-angularjs - webApi RESTful module. *Powerful and flexible tool to work with $http*.
* https://github.com/asduser/form-validator - html forms validator. *A special directive which provides functionality to work with html forms*.
* https://github.com/asduser/ui-notifications - notifcication service. *Handles a different UI messages*.
* https://github.com/asduser/storage-manager-anguarljs - storage manager. *Service to manage data storages on UI-side*.
* https://github.com/asduser/grunt-automation-example - grunt automation tool. *How to set up task manager to simplify the process of development Angular.js project*.

## Licence

MIT License

Copyright (c) 2017 [asduser](https://github.com/asduser)

repository: asduser/angularjs-recipes

repo_name: asduser/angularjs-recipes


text:
RavenDB.Client.ContextualListeners
==================================

A RavenDB client extension that passing of contextual information into client listeners. You can do this manually by doing something [similar to this](http://dhickey.ie/post/2012/02/12/Getting-contextual-state-into-a-RavenDBs-document-store-listener.aspx), or you can use this library via [NuGet](https://www.nuget.org/packages/RavenDB.Client.ContextualListeners).

There is a small piece about listeners [here](http://ravendb.net/docs/client-api/advanced/document-metadata), under the topic 'Manipulating metadata' but not much else at this moment in time. Basically, listeners allow you to hook into all document operations that occur in each session. The current design of the listeners is that their lifecyle is singleton with respect to the document database, making it a little tricky to pass in contextual information.

There are 4 listeners that allow you to intercept the data sent to, or recieved from a Raven database.

1. IDocumentStoreListener
2. IDocumentDeleteListener
3. IDocumentConversionListener
4. IDocumentQueryListener

Correspondingly, there are 4 context aware listeners that you register:

1. ContextualDocumentStoreListener<>
2. ContextualDocumentDeleteListener<>
3. ContextualDocumentConversionListener<>
4. ContextualDocumentQueryListener<>

... and there are 4 base context type that you inherit from that perform the contextual work:

1. AbstractDocumentStoreListenerContext
2. AbstractDocumentDeleteListenerContext
3. AbstractDocumentConversionListenerContext
4. AbstractDocumentQueryListenerContext

An example is the best way to demonstrate how to use these.

### Example

Say you want to add the current username to the metadata of each document that is stored. Therefore we want an IDocumentStoreListener to intercept each document before storing and add our username metadata.

First define your username document store context type:

public class UserNameContext : AbstractDocumentStoreListenerContext
{
	private readonly string _userName;

	public UserNameContext(string userName)
	{
		_userName = userName;
	}

	protected override void AfterStore(string key, object entityInstance, RavenJObject metadata)
	{}

	protected override bool BeforeStore(string key, object entityInstance, RavenJObject metadata)
	{
		metadata.Add("UserName", RavenJToken.FromObject(_userName));
		return false; //return true if you modify the entityInstance
	}
}

Register your the listener that will be aware of your context:

var documentStore = new DocumentStore()
{
	Url = "http://server"
};

// can be called after .Initialize(), doesn't matter
documentStore.RegisterListener(new ContextualDocumentStoreListener<UserNameContext>());
documentStore.Initialize();

And the sweet bit.. just open a new context before you open a session:

using(new UserNameContext("Damian Hickey"))
using(var session = documentStore.OpenAsyncSession())
{
	await session.StoreAsync(new Doc());
	await session.SaveChangesAsync();
}


text:
# User Interface

- ユーザインターフェースのカスタマイズオプションを説明する
 Describe the user interface customization options.
- カスタムボタン、リンク、およびアクションの機能とユースケースを説明する
 Describe the capabilities of and use cases for custom buttons, links, and actions.
- アプリケーションに Lightning コンポーネントを組み込む場合に利用できる宣言的オプションを説明する
 Describe the declarative options available for incorporating Lightning Components in an application.
- 与えられたシナリオに従って、適切なユーザインターフェース設計を決定する
 Given a scenario, determine the appropriate user interface design.

## Lightning Components
> Use Lightning Components to build modern web apps with reusable UI components.

- Describe what the Lightning Components framework is, and what it’s used for.
	- Lightning Components is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side.
- List at least five different ways you can use Lightning Components to customize Salesforce.
    - Add Apps to the Lightning Experience App Launcher
    - Add Apps to Lightning Experience and Salesforce App Navigation
    - Create Drag-and-Drop Components for Lightning App Builder and Community Builder
    - Add Lightning Components to Lightning Pages
    - Add Lightning Components to Lightning Experience Record Pages
    - Launch a Lightning Component as a Quick Action
    - Override Standard Actions with Lightning Components
    - Create Stand-Alone Apps
    - Run Lightning Components Apps Inside Visualforce Pages
    - Run Lightning Components Apps on Other Platforms with Lightning Out
    - Customize Flow Screens

`Quizs`

- Which of the following descriptions about the Lightning Component framework is true?
	- It's a UI framework for developing web apps for mobile and desktop devices.
	- It uses JavaScript on the client side and Apex on the server side.
	- It's a modern framework for building single-page applications.
	- **All of the above**
- What can you build with the Lightning Component framework?
	- Standalone app
	- Components to use inside Visualforce pages
	- Drag-and-drop components for Lightning App Builder
	- **All of the above**
- How is Lightning Components different from other web app frameworks?
	- Lightning Components is optimized for both mobile and desktop experiences and proves it with Salesforce1 and Lightning Experience.
	- Lightning Components connects natively with services provided by the Salesforce platform.
	- Lightning Components has specific opinions about how data access is performed and has specific security requirements.
	- **All of the above**

### What Is an App?

- An app is just a special kind of component! For the purposes of this module, you can think of an app as being different from a component in only two meaningful ways:

	- An app uses `<aura:application>` tags instead of `<aura:component>` tags.
	- Only an app has a Preview button in the Developer Console.

###  What Is a Component?

- As a practical matter, a component is a bundle that includes a definition resource, written in markup, and may include additional, optional resources like a controller, stylesheet, and so on. A resource is sort of like a file, but stored in Salesforce rather than on a file system.

#### Component Attributes
> Attributes on components are like instance variables in objects. They’re a way to save values that change, and a way to name those value placeholders.

- A component attribute is the place where you can store a value
- You define a component attribute using the `<aura:attribute>` tag (attribute definitions)
- The `<aura:attribute>` tag itself takes attributes when you use it! (normaly,  attribute is defined by setting the **name** and type of the attribute)

#### Expressions
> An expression is basically a formula, or a calculation, which you place within expression delimiters (`{!` and `}`)

- An expression is any set of literal values, variables, sub-expressions, or operators that can be resolved to a single value.
- You can pass expression to another component to set the value on that component

```
<aura:component>
    <aura:attribute name="customMessage" type="String"/>
    <p> <c:helloMessage message="{!v.customMessage}"/> </p>
</aura:component>
```

#### Value Providers
> Value providers are a way to group, encapsulate, and access related data. Value providers are a complicated topic, so for now, think of `v` as an automatic variable that’s made available for you to use.

#### Attribute Data Types
> Accessing structured data is a nice segue back to talking about attributes, and specifically about non-primitive attribute types

- Primitives data types, such as Boolean, Date, DateTime, Decimal, Double, Integer, Long, or String. The usual suspects in any programming language.
- Standard and custom Salesforce objects, such as Account or MyCustomObject__c.
- Collections, such as List, Map, and Set.
- Custom Apex classes.
- Framework-specific types, such as Aura.Component, or Aura.Component[].

Other Aspects of Attribute Definitions

- The **default** attribute defines the default attribute value. It’s used when the attribute is referenced and you haven’t yet set the attribute’s value.
- The **required** attribute defines whether the attribute is required. The default is false.
- The **description** attribute defines a brief summary of the attribute and its usage.

### Controllers
> Lightning Components is View-Controller-Controller-Model, or perhaps View-Controller-Controller-Database. Because when interacting with Salesforce, your components will have a server-side controller in addition to the client-side controller we’ve worked with in this unit. This dual controller design is the key difference between Lightning Components and MVC.

For Lightning Components, a controller is a resource in a component bundle that holds the action handlers for that component. And action handlers are just JavaScript functions with a particular function signature.

#### Action Handlers
The combination of name-value pair and specific function signature is an action handler. You’ll hear or see the terms action handler, controller action, and controller function used interchangeably, and for the most part that’s correct. They almost always refer to the same thing.

- **component**—the component
- **event**—the event that caused the action handler to be called.
- **helper**—the component’s helper, another JavaScript resource of reusable functions.

### Input Data Using Forms


text:
# Generate SARIF from Fortify Software Security Center (SSC)

Build secure software fast with [Fortify](https://www.microfocus.com/en-us/solutions/application-security). Fortify offers end-to-end application security solutions with the flexibility of testing on-premises and on-demand to scale and cover the entire software development lifecycle.  With Fortify, find security issues early and fix at the speed of DevOps.

This GitHub Action invokes the Fortify Software Security Center (SSC) API to generate a SARIF log file of Static Application Security Testing (SAST) results. The SARIF output is optimized for subsequent import into GitHub to display vulnerabilities in the Security Code Scanning Alerts.

## Deprecation Notice

This GitHub Action is being replaced by https://github.com/marketplace/actions/export-fortify-vulnerability-data to allow customers to benefit from the following enhancements:

* Support for both FoD and SSC
* Support for additional output formats

The `fortify/gha-export-vulnerabilities` action is mostly a drop-in replacement for `fortify/gha-ssc-generate-sarif`, but will require some changes in your workflows:

* Obviously the `uses:` clause needs to be updated to use the new `fortify/gha-export-vulnerabilities` action
* Input parameter `ssc_user_name` has been renamed to `ssc_user`
* Input parameters for specifying the output file location have changed:
    * The standard input parameter `sarif_output` has been removed
	* Default GitHub SARIF output is written to `${GITHUB_WORKSPACE}/gh-fortify-sast.sarif`
	* Output directory can be changed using the `export_dir` input parameter
	* Output file name can only be changed through custom configuration, not through standard action input parameters

## Usage

The primary use case for this action is after completion of a Fortify SCA or ScanCentral SAST scan. See the [Fortify ScanCentral Scan](https://github.com/marketplace/actions/fortify-scancentral-scan) action for more details on how to initiate a Fortify ScanCentral SAST scan in your workflow. The following sample workflow demonstrates steps to import results from SSC into GitHub Security Code Scanning:

```yaml
name: Import SSC SAST Results
on: [workflow dispatch]

jobs:
  Import-SSC-SAST:
    runs-on: ubuntu-latest

    steps:
      # Pull SAST issues from Fortify Software Security Center and generate SARIF output
      - name: Download Results
        uses: fortify/gha-ssc-generate-sarif@master
        with:
          ssc_base_url: ${{ secrets.SSC_BASE_URL }}
          ssc_auth_token: ${{ secrets.SSC_AUTHTOKEN_DECODED }}
          ssc_version_id: ${{ secrets.SSC_VERSION_ID }}

      # Import Fortify Software Security Center results to GitHub Security Code Scanning
      - name: Import Results
        uses: github/codeql-action/upload-sarif@v1
        with:
          sarif_file: ./gh-fortify-sast.sarif

```

For sample workflows implementing this and other Fortify actions, see:
  * [EightBall](https://github.com/fortify/gha-sample-workflows-eightball/tree/master/.github/workflows)

### Considerations

* Issues that are suppressed or hidden in SSC are ignored.
* SARIF is designed specifically for SAST findings, so this action ignores FoD Dynamic (DAST), Mobile (MAST) and Open Source/Software Composition (OSS/SCA) issues.
* GitHub Code Scanning currently supports SARIF files with up to 1,000 issues. If the SSC application version contains more than 1,000 issues, this action will abort. Consider creating a dedicated filter set on SSC that produces less
than 1,000 issues, in combination with the `ssc_vuln_filter_set_id` option.

## Inputs

### `ssc_base_url`
**Required** The base URL for the Fortify Software Security Center instance where your data resides.

### `ssc_auth_token` OR `ssc_user_name` + `ssc_password`
**Required** Credentials for authenticating to Software Security Center. Strongly recommend use of GitHub Secrets for credential management.  Use a `CI Token` if you wish to use token-based authentication.

### `ssc_version_id` OR `ssc_version_name`
**Required** The target SSC application version ID or name to pull SAST issues from. When specifying an application version name, it must be in the format `<application name>:<version name>`.

### `ssc_vuln_filter_set_id`
**Optional** ID of the SSC filter set from which to pull SAST issues.

### `sarif_output`
**Optional** The location of generated SARIF output, defaults to `${GITHUB_WORKSPACE}/gh-fortify-sast.sarif`

## Outputs
SARIF log file that is optimized for subsequent import and viewing in GitHub Security Code Scanning

repository: fortify/gha-ssc-generate-sarif

repo_name: fortify/gha-ssc-generate-sarif


text:
# Constants

## HORIZONTAL_ALIGNMENT_TYPE

Mirrors [all the different `Bootstrap` alignment specifications](https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment).

## FONT_AWESOME_SIE

Mirrors [all the different `FontAwesome` size values](https://fontawesome.com/how-to-use/svg-with-js). Defaults to `FONT_AWESOME_SIZE.ONE`.

## SERVICE_TYPE

List of services that are supported:

* AngelList
* BitBucket
* CodePen
* Facebook
* Foursquare
* Google Plus
* GitHub
* GitLab
* Instagram
* LinkedIn
* Medium
* Pocket
* Pinterest
* Reddit
* Snapchat
* Spotify
* StackOverflow
* Twitter
* WhatsApp
* YouTube

## TARGET

[`<a>` `HTML` elements can have `target` property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), which specifies how the browser should display the related URL. This constant is a helper for the `__blank`, `__self`, `__parent`, and `__top` values.

## TOOLTIP_PLACEMENT

Contact icons can display the associated account identifier. How the tooltip is displayed is configurable - the set of configurable options mirrors those specified by [the `reactstrap tooltips` documentation](http://reactstrap.github.io/components/tooltips/).

repository: jaebradley/react-contact-information

gha_language: JavaScript

repo_name: jaebradley/react-contact-information


text:
---
layout: post
title: Using rawgit cdn on github repository
---

When our public repository is not popular enough to be hosted on any CDN service,
we can still reference to github url not needed to host it privately on the server get it locally
on the server and having CDN benifit as usual (performance, bandwidth...)

## Why not using directly the Raw GitHub url?

Use web browser we can view raw content of a css/js file on github directly, such as [this][1] but
content type of the response stream is always `text/plan`, not `text/css`, then this file is not understandable
as our expected.

![_config.yml]({{ site.baseurl }}/images/posts/rawgit/github-view-css-content-type.png)

## Use rawgit

Simply take a github url and go to [rawgit.com][3] and paste to its input. You get it then.

![_config.yml]({{ site.baseurl }}/images/posts/rawgit/cssbox.png)

Rawgit uses MaxCDN behind but it [does not guarantee][4] to be 100% up ;)

## References
1. [rawgit faq] (https://rawgit.com/faq)

[1]: https://raw.githubusercontent.com/netvietdev/cssbox/dict/v1.0/cssbox.min.css
[2]: https://rawgit.com/faq
[3]: http://rawgit.com
[4]: https://rawgit.com/faq#no-uptime-guarantee


text:
# Single Demonstration Grasping

This folder contains the OpenDR Learner class for Single Demonstration Grasping.

## Sources

The Detection module is based on Keypoint RCNN by detectron2 [1]. A Webots simulation package is also included that requires franka_description and panda_moveit_config that are modified versions provided by [2] and [3].

## References
1. [Detectron2](https://github.com/facebookresearch/detectron2)
2. [franka_description](https://github.com/erdalpekel/panda_simulation)
3. [panda_moveit_config](https://github.com/erdalpekel/panda_moveit_config.git)

repository: opendr-eu/opendr

gha_language: Python

repo_name: opendr-eu/opendr


text:
# _Airline Planner_

#### _Allows a user to plan flights from city to city, {September 26, 2016}_

#### By _**Angela Smith**_ and _**Stephen Burden**_

## Description

_{An application that allows a user to plan their flights from city to city. They can add a city to a list of cities with airline service as well as add a flight to a list of flights. The flight will include a departure time, departure city and arrival destinations. The user can change the status of an individual flight to either "on time", "delayed", "cancelled" or "complete".}_

## Setup/Installation Requirements

* Clone the repository.
* Type in _"apachectl start"_ in the command line.
* Open a browser and navigate to _localhost:8080/phpmyadmin_, enter username: _"root"_ and password: _"root"_ if prompted.
* Go to the Import tab and under "File to import", browse computer to project, select the zip file and press "Go".
* Using the command line, navigate to the project's root directory.
* Install dependencies by running _$composer install_.
* Navigate to the /web directory and start a local server with _$php -S localhost:8000_.
* Open a browser and go to the address http://localhost:8000 to view the application.

## Known Bugs

_There are no known bugs at this time_

## Support and contact details

_Angela Smith<EMAIL_ADDRESS>or
_Stephen Burden<EMAIL_ADDRESS>
## Technologies Used

_PHP,
mySQL,
Silex,
Twig,
PHPUnit,
Bootstrap,_

### License

*This webpage is licensed under the MIT license.*

Copyright (c) 2016 **_Angela Smith_** and **_Stephen Burden_**


text:
# Anphillia
NWN Scripts for the Anphillia PW

This is a small section of the Anphillia (EE version) script set, curated stuff that might be interesting to others. Many of the includes are missing, and likely some of the functions used as well, so this is not usable as-is, but will hopefully be educational at least.

These scripts were written by eyesolated and myself for the EE incarnation of Anphillia.

repository: mtijanic/anphillia

repo_name: mtijanic/anphillia


text:
# redditSpotifyBot
Bot that creates spotify playlists from the comments in a reddit thread

Call the bot using "!createSpotifyPlaylist"

When called, the bot first scans all the top level comments in the thread.
For each line in the comment,

 Create a Spotify playlist with the name of the post. The playlist ID is stored and indexed on the submission ID of the post.

 Check if the text was meant to be a track by matching it with the regular expression defined. Basically checks for "artist/track - artist/track"

 The search query in Spotify must be made with a track/album parameter. To determine whether the given text is for a track or an album, check for "EP", "Album", "Remixes" in the text.

 When searching for albums, Spotify sometimes returns the title track as a single. To avoid this, the query results are iterated until album with more than 1 track is found.

 The track IDs are stored in a list indexed by the playlist ID to avoid duplicate tracks.

All the comments in the subreddit are streamed. When a comment matching a requested post is found, the track is added to its appropriate playlist

 To be done:

 Work for multiple threads simultaneously

 <TT>subreddit.stream</TT> and <TT>submission.comments</TT> straight up don't work sometimes when all the comments are by one user. (Hard to replicate)

 Improve the regular expression to add more special charaters and symbols

 Error checking on API calls to avoid code termination

 Store playlist information on a local database so that when code is rerun, tracks are still added to their appropriate playlists

repository: hetthakkar/redditSpotifyBot

repo_name: hetthakkar/redditSpotifyBot


text:
---
layout: post
title: "An Interpretable Model for Scene Graph Generation"
date: 2018-11-21 17:51:01
categories: arXiv_CV
tags: arXiv_CV Image_Caption QA Caption Detection Relation
author: Ji Zhang, Kevin Shih, Andrew Tao, Bryan Catanzaro, Ahmed Elgammal
mathjax: true
---

* content
{:toc}

##### Abstract
We propose an efficient and interpretable scene graph generator. We consider three types of features: visual, spatial and semantic, and we use a late fusion strategy such that each feature's contribution can be explicitly investigated. We study the key factors about these features that have the most impact on the performance, and also visualize the learned visual features for relationships and investigate the efficacy of our model. We won the champion of the OpenImages Visual Relationship Detection Challenge on Kaggle, where we outperform the 2nd place by 5\% (20\% relatively). We believe an accurate scene graph generator is a fundamental stepping stone for higher-level vision-language tasks such as image captioning and visual QA, since it provides a semantic, structured comprehension of an image that is beyond pixels and objects.

##### Abstract (translated by Google)

##### URL
[https://arxiv.org/abs/1811.09543](https://arxiv.org/abs/1811.09543)

##### PDF
[https://arxiv.org/pdf/1811.09543](https://arxiv.org/pdf/1811.09543)


text:
## About
A graph implementation in Python for Graph's class

## How to use?

### Getting a graph from a pajek file
```python
import graph

file_name = input()

g = graph.pajek_read(file_name)

```

### Depth-First Search

```python

g.bfs(source) # do DFS from vertex Source

g.bfs(source, dest=dest) # do DFS from vertex Source and,
                          # when it passes throught vertex dest, it returns True and stop the search

```

### Breadth-First Search

```python

g.bfs(source) # Do BFS from vertex Source

g.bfs(source, dest=dest) # Do BFS from vertex Source and, as DFS,
                         # returns True and stop the search when hits vertex dest
```

### Dijkstra (minimum weighted paths)

```python

dists = g.dijkstra(source) # return all minimum distances betwheen source vertex when all others

```
### Prim (minimum spanning tree)

```python

min_tree, weight_sum = g.prim(source) # return a new graph that represents the minimum spanning tree from g graph
                                      # and returns it's weight sum

```

license: Unlicense


text:
# Open Data - Final Project
## Proof of Concept

**Proof of concept** for the **Open Data final project**. This project contains the necessary scripts and data files to populate an initialized Neo4j graph. Then use this graph to generate recommendations

The repository contains:

* Data folder with the provided data files, already preprocessed. These include:
  - *GoodReads* data in CSV format, with books, tags and user rating information.
  - *Letterboxd* data in JSON format with movie and ratings information.
  - Pre-processing R scripts that were used to preprocess mock data for the proof of concept.
* Graph creation Python script that populates an initialized Neo4j graph
* Recommender Python script that runs the recommender queries.

### Requisites

In order to get the recommender started, make sure there is an initialized and started Neo4j empty graph. The graph needs to be accessible through **Bolt** protocol at **[bolt://localhost:7687](bolt://localhost:7687)** with password **odproject**

In addition, the **data/goodreads/*.csv** files must be copied to the correct Neo4j import folder for the graph.

Python module **py2neo** needs to be installed in the system, as the Neo4j wrapper.

### Use instructions

Once the empty graph database is started, run the *GraphCreation.py* script in order to populate it.

When the script is finished, you can run the *Recommender.py* script to start the recommender queries.

When running the script, one can enter two optional integers as command arguments that will be passed to the script as **User_id**, the user who will recieve the recommendations, and **Limit** the number of Movies/Books (limit items of each) that the system will recommend. By the default these are *User_id=1* and *Limit=5*.

repository: rmongeca/od-project-poc

repo_name: rmongeca/od-project-poc


text:
---
title: Feature Flags and Code Deprecation (DRAFT)
---

{% capture version_note %}
{{ site.version_note_part1 }} 1.1 {{ site.version_note_part2 }}
{% endcapture %}

{% include docs/feature_version.html content=version_note %}

## Code deprecation

For complex and rapidly evolving libraries, maintaining backward compatibility while improving existing features can be challenging.
Code deprecation allows to properly mark obsolete code and by warning users, helps them in transitioning to better alternatives.

### @deprecated JSDoc annotation

To mark function, class, method or property as deprecated, use `@deprecated` mark, like in the example:

```typescript
/**
* @deprecated since 1.0.2
* Use better alternative instead
*/
```

Depending on actual deprecation policy, such a code will become a candidate to removal in one of the next major version.

### Marking deprecated logic

Often, to accommodate backward compatibility, some indirectly related code need to contain additional logic that should be removed together with deprecated functionality.
When such a removal is not obvious enough, the best way to make sure that obsolete code will be removed is to mark it with proper TODO comment, preferably linked
to a ticket/issue with additional details.
Such a ticket should be properly labelled (example label: 'deprecated-1.x') to make it easy to reference it in future as a candidate for removal.

```typescript
// TODO(issue:3313) Deprecated since 1.1.1
```

## Feature flags

With each next minor version we release new features.
Sometimes new features are added to existing components that can be already used by customers, making them a breaking change because of some DOM addition or different behavior.
To avoid breaking customer's code and have a flexibility to improve functionality of existing components without the need of releasing next major version too often, we introduced feature flags.

Feature flags allows to:
1. Differentiate features based on feature level, which corresponds to minor version number
2. Differentiate features based on explicit feature flag
   -  Explicit feature flags can be linked to feature level, which means they are enabled by default for this particular level

### Deciding if you need a feature flag

We try to avoid creating new feature flags if they are not needed, to keep our config clean and ease eventual maintenance.
Please follow this guideline to decide, which feature flag you should use (if any):

1. If possible, try to avoid using feature flags
   - Implement feature as a separate module, that could be imported optionally by a customer
   - If your functionality already has separate config, check what will be more convenient:
       - creating new option in module configuration (for general features, where there is an actual value in making them toggleable)?
       - using feature flag (especially, when the only reason for a flag is the backward compatibility)?
2. If possible, try to avoid creating explicit feature flag
    - Try to enable features for specific feature levels, i.e. for minor releases
3. If you want to create the explicit feature flag make sure it's justified, e.g.: feature is important enough to be explicitly disabled or enabled.

### Detecting feature level

1. If your service or component has already the global config injected, you can use a simple utility function to check for feature level:

    ```typescript
    if (isFeatureLevel(this.config, '1.1')) {
      // code that is meant to be executed for feature level 1.1 and above
    }
    ```

2. If your component or service doesn't have access to global config you can inject FeatureConfigService and use it:

    ```typescript
      constructor(
        // ...
        protected featureConfig: FeatureConfigService
      ) {}

      // set a feature flag based on feature level
      readonly isSomeNewFeatureEnabled = this.featureConfig.isLevel('1.1');
    ```

3. If you want to conditionally show a component in a template you can use `cxFeatureLevel` directive:

    ```typescript
    <newComponent *cxFeatureLevel="'1.1'"></newComponent>
    ```

### Explicit feature flags

1. Explicit feature flags are simple string identifiers. You can check their status similarly to checking feature level.

    You can use simple utility function (that consumes global config):

    ```typescript
    if (isFeatureEnabled(this.config, 'consignmentTracking')) {
      // code that is meant to be executed when feature consignmentTracking is enabled
    }
    ```

    FeatureConfigService:

    ```typescript
    consignmentTrackingEnabled = this.featureConfig.isEnabled('consignmentTracking');
    ```

    or directive:

    ```typescript
    <newFeature *cxFeature="'consignmentTracking'"></newFeature>
    ```

2. You can introduce explicit flags without additional configuration, but it's recommended to include them in the type definition of storefront configuration to expose them to customers.
To achieve that, just add your flag to `FeatureToggles` interface in `feature-toggles.ts` file as a new property with `boolean` type:

    ```typescript
    export interface FeatureToggles {
      features?: {
        // ...

        /**
         * Sample feature description
         */
        consignmentTracking: boolean;
      };
    }
    ```

    In this way you can also add description to the flag or even deprecation annotation, if needed.

3. Linking the feature flag to the feature level.

    By linking your feature flag to the feature level, you'll get your flag enabled by default for this and all above levels.
    To achieve that, provide default value for a feature flag as a string representing feature level. You can add this config to your module configuration:

    ```typescript
    ConfigModule.withConfig({
      // ...
      features: {
        consignmentTracking: '1.1',
      },
    })
    ```

    In the above example, the consignment tracking feature is enabled by default if the feature level is set to at least `'1.1'`.

    **Note:** If you want your feature level to always be set to the most recent version, you can use the latest flag (`'*'`), as follows:

    ```typescript
    features: {
      level: '*'
    }
    ```

4. Negation functionality: disabling a feature for a specific feature level.

    You can disable a feature for a specific feature level by including an exclamation mark (`!`) before the version number. The following is an example:

    ```typescript
    <newComponent *cxFeatureLevel="'!1.1'"></newComponent>
    ```


text:
![Downloads][link-download] ![Version][link-version] ![License][link-license]

# redux-config
Reduces boilerplate for redux into a simple configuration pattern

# Installation

```bash
yarn add @sullivan/redux-config
# or
npm i --save @sullivan/redux-config
```

## Documentation
- [Constants][constant]
- [Actions][action]
- [Reducers][reducer]

## Example Usage

#### Constants
Let's start with the most common approach to creating a modularized redux architecture, constants. We know we want to fetch some posts and also have the ability to toggle visiblity.

```javascript
import { constants } from '@sullivan/redux-config';

const { POST_FETCH, POST_TOGGLE } = constants([
  {
    invocation: 'async',
    namespace: 'post',
    verbs: ['fetch'],
  },
  {
    namespace: 'post',
    verbs: ['toggle'],
  },
]);
```

Since we are making an asynchronous call to get posts, so we will use the `async` invocation value to generate an enum for use later in our action and reducer.

#### Actions
Now we can make a couple action dispatchers that will use these constants. Keep in mind, our created action config will need to be initialized with the stores dispatch method.

```javascript
import { actions } from '@sullivan/redux-config';

const { POST_FETCH, POST_TOGGLE } = // constants

const curriedActions = actions({
  fetchPosts: {
    type: POST_FETCH,
    invocation: 'async',
    fn: async () => [
      {
        id: '1',
        visible: true,
        comment: 'hello',
      },
      {
        id: '2',
        visible: true,
        comment: 'oh hi!',
      },
    ],
  },
  togglePostVisiblity: {
    type: POST_TOGGLE,
  },
});
```

The `async` invocation will handle specific states such as REQUESTED, SUCCEEDED, FAILED, and DONE automatically. Wheres the togglePostVisiblity will generate a function and dispatch our action type with whatever params are passed to it.

#### Reducer
Now we want our reducers to update states based on our actions that are dispatched. We want to cover the basic cases, like posts responding, loading states, and the visibility toggle.

```javascript
import { reducers } from '@sullivan/redux-config';

const { POST_FETCH, POST_TOGGLE } = // constants

const reducer = reducers([
  {
    type: POST_FETCH.REQUESTED,
    path: 'posts.loading',
    fn: () => true,
  },
  {
    type: POST_FETCH.SUCCEEDED,
    path: 'posts.items',
    fn: (state, data) => data,
  },
  {
    type: POST_FETCH.DONE,
    path: 'posts.loading',
    fn: () => false,
  },

  {
    type: POST_TOGGLE,
    path: 'posts.items',
    fn: (state = [], { id }) =>
      state.map((it) => {
        if (id === it.id) {
          return {
            ...it,
            visible: !it.visible,
          };
        }
        return it;
      }),
  },
]);
```

Take note of the path used within the type configuration. When the reducer is ran, the state at that path will be used and passed to it. If the path doesn't exist it will be created for you. However, the initial value will not be set, so using a fallback initial value in the `fn` declaration is still suggests.

#### Putting it together
```javascript
import { createStore, applyMiddleware } from 'redux';
import { constants, actions, reducers } from '@sullivan/redux-config';

const logger = (s) => (n) => (a) => {
  console.log('Action:', a);
  const response = n(a);

  console.log('State:', JSON.stringify(s.getState(), null, 2));
  return response;
};

const { POST_FETCH, POST_TOGGLE } = constants([
  {
    invocation: 'async',
    namespace: 'post',
    verbs: ['fetch'],
  },
  {
    namespace: 'post',
    verbs: ['toggle'],
  },
]);

const reducer = reducers([
  {
    type: POST_FETCH.REQUESTED,
    path: 'posts.loading',
    fn: () => true,
  },
  {
    type: POST_FETCH.SUCCEEDED,
    path: 'posts.items',
    fn: (state, data) => data,
  },
  {
    type: POST_FETCH.DONE,
    path: 'posts.loading',
    fn: () => false,
  },

  {
    type: POST_TOGGLE,
    path: 'posts.items',
    fn: (state = [], { id }) =>
      state.map((it) => {
        if (id === it.id) {
          return {
            ...it,
            visible: !it.visible,
          };
        }
        return it;
      }),
  },
]);

const curriedActions = actions({
  fetchPosts: {
    type: POST_FETCH,
    invocation: 'async',
    fn: async () => [
      {
        id: '1',
        visible: true,
        comment: 'hello',
      },
      {
        id: '2',
        visible: true,
        comment: 'oh hi!',
      },
    ],
  },
  togglePostVisiblity: {
    type: POST_TOGGLE,
  },
});

const store = createStore(reducer, {}, applyMiddleware(logger));

const createdActions = curriedActions(store.dispatch);

createdActions.fetchPosts().then(() => {
  createdActions.togglePostVisiblity({ id: '2' });
});
```

Output:
```javascript
Action: { type: '@POST/FETCH_REQUESTED', payload: [] }
State: {
  "posts": {
    "loading": true
  }
}
Action: {
  type: '@POST/FETCH_SUCCEEDED',
  payload: [
    { id: '1', visible: true, comment: 'hello' },
    { id: '2', visible: true, comment: 'oh hi!' }
  ]
}
State: {
  "posts": {
    "loading": true,
    "items": [
      {
        "id": "1",
        "visible": true,
        "comment": "hello"
      },
      {
        "id": "2",
        "visible": true,
        "comment": "oh hi!"
      }
    ]
  }
}
Action: { type: '@POST/FETCH_DONE' }
State: {
  "posts": {
    "loading": false,
    "items": [
      {
        "id": "1",
        "visible": true,
        "comment": "hello"
      },
      {
        "id": "2",
        "visible": true,
        "comment": "oh hi!"
      }
    ]
  }
}
Action: { type: '@POST/TOGGLE', payload: { id: '2' } }
State: {
  "posts": {
    "loading": false,
    "items": [
      {
        "id": "1",
        "visible": true,
        "comment": "hello"
      },
      {
        "id": "2",
        "visible": false,
        "comment": "oh hi!"
      }
    ]
  }
}
```

[link-download]: https://img.shields.io/npm/dt/@sullivan/redux-config
[link-version]<EMAIL_ADDRESS>[link-license]<EMAIL_ADDRESS>
[action]: https://github.com/icarus-sullivan/redux-config/blob/master/documentation/actions.md
[constant]: https://github.com/icarus-sullivan/redux-config/blob/master/documentation/constants.md
[reducer]: https://github.com/icarus-sullivan/redux-config/blob/master/documentation/reducers.md

## Changelog

**0.6.0**
- Updating how reducer config is declared
- Deprecated `invocationType` in favor of `invocation`
- Performance improvements

**0.5.3**
- Expose the actionCreator for one-off actions

repository: victorbalan/redux-config

repo_name: victorbalan/redux-config


text:
# Squonk Ansible OpenShift Deployment for CI/CD

## Prerequisites
Before running the playbooks: -

1.  You're on the bastion node, or you are on a node with...
    1.  Ansible installed (any version from 2.5)
    1.  The `oc` command-set is available to you as a user
1.  An OpenShift cluster has been installed
1.  There is an `admin` user known to the cluster
1.  There is a `developer` user known to the cluster
1.  You have setup your own `setenv.sh` (typically in `openshift/env`),
    created a suitable `params` file and you have run `source setenv.sh`.

The CI/CD deployment requires a number of additional environment variables,
normally defined in your `setenv.sh` script: -

1.  `IM_SQUONK_CICD_TRIGGER_SECRET`
1.  `IM_SQUONK_CICD_CXN_MAVEN_USER`
1.  `IM_SQUONK_CICD_CXN_MAVEN_PASSWORD`

## Deploying the CI/CD components
You can run the Squonk CI/CD playbooks from this
directory with the commands: -

    ansible-playbook playbooks/squonk-cicd/deploy.yaml

>   Remember to first `source` an appropriately crafted
    `../env/setenv.sh` script first!

>   If you see an error relating to `../../../env/{{ ansible_env.IM_PARAMETER_FILE }}`
    you've probably not sourced your setenv file or provided a value
    for the `IM_PARAMETER_FILE` environment variable

>   If you see the error `User "admin" cannot list serviceaccounts`
    you're probably using **MiniShift** but you've not run the MiniShift
    preparation playbook, which you have to do before running any other
    playbooks.

### Adding a GitHub web-hook
Refer to the OKD 3.11 documentation on [webhooks]. You can obtain the Github
web-hook URL for the Squonk CI/CD build config using the following command: -

    oc describe bc/squonk-build

## Removing the CI/CD components
Remove the CI/CD deployment with the following playbook...

    ansible-playbook playbooks/squonk-cicd/undeploy.yaml

[webhooks]: https://docs.openshift.com/container-platform/3.11/dev_guide/builds/triggering_builds.html#github-webhooks

repository: hharzer/squonk

repo_name: hharzer/squonk


text:
# PBS 83 of X — Bootstrap Cards

In this instalment we’ll finish our first exploration of Bootstrap 4 with a look at one its most versatile components, the so-called _Card_. This is one of those components that’s so generic it’s hard to describe, but once you learn about it, you’ll start seeing it all over the web. Cards really are ubiquitous!

It’s important to stress that, while we’re wrapping up our exploration of Bootstrap 4 with this instalment, that does not mean we’ve come close to covering every feature this impressive library offers. Instead, the aim was to cover the big-picture items, and leave you with enough experience to be able to learn the rest independently by reading [Bootstrap’s excellent documentation](https://getbootstrap.com/docs/).

You can [download this instalment’s ZIP file here](https://www.bartbusschots.ie/s/wp-content/uploads/2019/10/pbs83.zip) or [here on GitHub](https://cdn.jsdelivr.net/gh/bbusschots/pbs-resources/instalmentZips/pbs83.zip).

## Matching Podcast Episode 610

Listen along to this instalment on [episode 610 of the Chit Chat Across the Pond Podcast](https://www.podfeet.com/blog/2019/10/ccatp-610/)

<audio controls src="https://media.blubrry.com/nosillacast/traffic.libsyn.com/nosillacast/CCATP_2019_10_04.mp3">Your browser does not support HTML 5 audio 🙁</audio>

You can also Download the MP3

## PBS 82 Challenge Solution

The challenge set at the end of the previous instalment was to update the number guessing game we’ve been working on for many of the recent challenges so it uses an async function to load all its needed bootstrap templates and initialise the game.

The first step I chose to take in migrating my version of the game to using async functions is to make the function `loadTemplates()` async. Since I had already written the function to return a promise, this is not strictly necessary, but it’s a good idea to explicitly mark functions you expect to always return promises with the `async` keyword for clarity. It will be much more obvious to future you that you intend the function to always return a promise if it’s explicitly coded as an async function. As an added bonus, the `async` keyword should also be picked up by any documentation solution you might be using, again making things clearer for future you. So, all I did was update the function definition to:

```javascript
async function loadTemplates(...templateNames){
  \\ …
}
```

The next step is to make my document ready event handler async by altering the relevant anonymous function expression:

```javascript
// The Document Ready Handler
$(async function(){
  // …
}
```

We can now update the body of the document ready handler to use the `await` keyword for dealing with the template loading.

This is how the templates are loaded before we make our change:

```javascript
// load the templates and if successful, reset the game
loadTemplates('gameMessage', 'guesses', 'guessPopover', 'gameWon', 'gameGrid', 'confirmQuit').then(
  function(){
    // the template all loaded without error, so go ahead and reset (init) the game
    resetGame();
  },
  function(err){
    // something went wrong loading the templates
    $GAME_INTERFACE.empty().html(Mustache.render(
      TEMPLATES.gameInitError
    ));
    console.log('failed to load templates with error', err);
  }
);
```

Notice the standard promise handling — passing `.then()` to callbacks, the first to execute when all goes well, and the second when there is an error. Note that, without the comments at the top of each callback, it would not be at all obvious which part of that code is dealing with success and which is doing the error handling. It’s just two anonymous functions as callbacks.

Let’s go ahead and refactor the code to use `await` instead:

```javascript
// load the templates
try{
  await loadTemplates('gameMessage', 'guesses', 'guessPopover', 'gameWon', 'gameGrid', 'confirmQuit');
}catch(err){
  $GAME_INTERFACE.empty().html(Mustache.render(
    TEMPLATES.gameInitError
  ));
  console.log('failed to load templates with error', err);
}

// reset the game
resetGame();
```

Notice how much clearer it is which parts of the code are dealing with regular successful execution, and which parts are dealing with error handling.

Finally, for completeness, and as a nice example of one possible use for self-executing anonymous async functions, or async IIFEs (async **I**mmediately **I**nvoked **F**unction **E**xpressions), I also updated my `resetGame()` function to make use of the `await` keyword.

As a reminder, this function fetches a random number from a web service using AJAX, then either starts the game or renders an error. The function does not return anything, and deals with all potential errors internally. We don’t want to alter the functions behaviour from the point of view of the rest of our code. So when we’re done making changes, it must still not return anything, and must still deal with all its errors internally. This means we can’t mark the function as async, because then it will return a promise, and all code that calls the function will need to be updated to deal with potential promise rejections. Remember, good code handles all potential promise rejections!

So, rather than marking the entire function as async, we just want to make part of the function’s contents run asynchronously. This can be easily achieved with an async IIFE. This is what the function looks like before we refactor it:

```javascript
function resetGame(){
  // set the game on flag to false
  GAME_ON = false;

  // blank and hide the modal
  $MODAL.modal('hide');
  $MODAL_CONTENT.empty();

  // set the game UI to the loading spinner & empty $GAME_MESSAGE_CONTAINER & $GUESSES_DISPLAY
  $GAME_INTERFACE.html(SPINNER_HTML);
  $GAME_MESSAGE_CONTAINER = null;
  $GUESSES_DISPLAY = null;

  // fetch a random number via AJAX
  $.ajax({
    url: 'https://bartbusschots.ie/utils/fakerWS/numberBetween/1/text',
    data: {
      arg1: MIN,
      arg2: MAX
    },
    method: 'GET',
    cache: false,
    dataType: 'text'
  }).then(
    function(rn){ // resolved
      // save the random number
      RANDOM_NUMBER = rn;

      // blank the guesses
      GUESSES = [];
      MIN_POSSIBLE_GUESS = MIN;
      MAX_POSSIBLE_GUESS = MAX;

      // reset the game UI
      resetGameUI();

      // game on!
      GAME_ON = true;
    },
    function(){ // rejected
      $GAME_INTERFACE.empty().html(Mustache.render(
        TEMPLATES.gameInitError
      ));
    }
  );
}
```

Again, the comments are the only thing clearly distinguishing the error handling code.

Now let’s replace the AJAX call and its `.then()` with an async IIFE that makes use of `await`:

```javascript
function resetGame(){
  // set the game on flag to false
  GAME_ON = false;

  // blank and hide the modal
  $MODAL.modal('hide');
  $MODAL_CONTENT.empty();

  // set the game UI to the loading spinner & empty $GAME_MESSAGE_CONTAINER & $GUESSES_DISPLAY
  $GAME_INTERFACE.html(SPINNER_HTML);
  $GAME_MESSAGE_CONTAINER = null;
  $GUESSES_DISPLAY = null;

  // switch to async for the remainder of the function
  (async ()=>{
    try{
      // get the random number
      RANDOM_NUMBER = await $.ajax({
        url: 'https://bartbusschots.ie/utils/fakerWS/numberBetween/1/text',
        data: {
          arg1: MIN,
          arg2: MAX
        },
        method: 'GET',
        cache: false,
        dataType: 'text'
      });

      // blank the guesses
      GUESSES = [];
      MIN_POSSIBLE_GUESS = MIN;
      MAX_POSSIBLE_GUESS = MAX;

      // reset the game UI
      resetGameUI();

      // game on!
      GAME_ON = true;
    }catch(err){
      $GAME_INTERFACE.empty().html(Mustache.render(
        TEMPLATES.gameInitError
      ));
      console.log('random number error', err);
    }
  })();
}
```

You’ll find the full code to my solution in the folder `pbs82-challengeSolution` in this instalment’s ZIP file.

## Bootstrap Cards

The single most versatile Bootstrap component is the so-called _Card_. If you need to present a small snippet of information, perhaps one of many, perhaps not, the chances are you can get what you want from the Card component. Cards support a very wide variety of optional components that can be combined in a near infinity of combinations. This makes cards very powerful, but a little daunting to try to explain 🙂

Note that as usual, we’ll be covering the highlights, not exploring every possible feature. So you can find out more in [the relevant section of the Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/card/).

Let’s start with the few things all cards have in common — all cards are contained within a tag with the class `.card`. Any tag can be used for cards, but the tag you’ll see used most often is `<div>`. Unless you use a Bootstrap utility class or additional CSS to alter the behaviour, Cards always expand to fill the available width. You’ll commonly find Cards used within flex boxes or within `.col`s in the Bootstrap grid.

At the top level, cards can contain the following (all of which are optional):

*   A header with `.card-header`.
*   A footer with `.card-footer`.
*   Image caps with `img.card-img-top` (an `<img>` tag with the class `card-img-top`). These must appear as the first and/or last items within a Card.
*   A list with `ul.list-group.list-group-flush` (a `<ul>` tag with the classes `list-group` & `list-group-flush`). Each item in the list must be an `li.list-group-item`.
*   A Card image with `.card-img`. The image will retain its aspect ratio while filling the full width of the card.
*   A Card body with `.card-body`.

Any tag can be used for the header, footer, or body, but again, `<div>` is generally used.

The body of a card can then, in turn, contain the following:

*   Card titles with `<h1>` … `<h6>` tags with the class `card-title`.
*   Card sub-titles with `<h1>` … `<h6>` tags with the class `card-subtitle`.
*   Card text with `.card-text`.
*   Card links with `a.card-link`.

Finally, note that the standard Bootstrap utility classes can be used with Cards.

### Kitchen Sink Example 1 — Everything but Image Caps

The easiest way to illustrate Cards in use is with an example. As a first example, let’s create a Card that has everything but image caps. That is to say, a Card with a header, a regular Card image (not an image cap), a Card body, a Card list, and a Card footer. The Card body will contain a Card title, a Card subtitle, some regular Card text, and a Card link.

```html
<!-- The Card -->
<div class="card" style="width: 300px;">
  <!-- A Card header -->
  <h2 class="card-header h4">A Card Header</h2>

  <!-- A regular Card image -->
  <img src="PBS-Logo.png" class="card-img" alt="The PBS Logo" title="A card image">

  <!-- A Card body -->
  <div class="card-body">

    <!-- A Card title -->
    <h3 class="card-title h5">A Card Title</h3>

    <!-- A Card sub-title -->
    <h4 class="card-subtitle h6 text-muted">A Card Subtitle</h4>

    <!-- Regular Card text -->
    <p class="card-text">This is some card text. It's really not very exiting in any way.</p>

    <!-- A Card link -->
    <a href="" class="card-link">A Card Link</a>
  </div>

  <!-- A Card list -->
  <ul class="list-group list-group-flush">
    <li class="list-group-item">List Item 1</li>
    <li class="list-group-item">Second List Item</li>
    <li class="list-group-item">Another item in a list</li>
  </ul>

  <!-- A Card footer -->
  <div class="card-footer text-muted">A Card Footer</div>
</div>
```

This produces a card that looks like this:

![Kitchen Sink Card 1](../assets/pbs83/Screenshot-2019-10-03-at-23.56.30.png)

### Kitchen Sink Example 2 — Everything but Header & Footer

Since a Card can have either a header, or an image cap on top, and either a footer or an image cap on the bottom, let’s look at a sample card that replaces the header and footer with a pair of image caps.

```html
<!-- The Card -->
<div class="card" style="width: 300px;">

  <!-- The top image cap -->
  <img src="NC-Logo.png" class="card-img-top" alt="The NosillaCast Logo" title="A card image">

  <!-- A Card body -->
  <div class="card-body">

    <!-- A Card title -->
    <h3 class="card-title h5">A Card Title</h3>

    <!-- A Card sub-title -->
    <h4 class="card-subtitle h6 text-muted">A Card Subtitle</h4>

    <!-- Some regular Card text -->
    <p class="card-text">This is some card text. It's really not very exiting in any way.</p>

    <!-- A Card link -->
    <a href="" class="card-link">A Card Link</a>
  </div>

  <!-- A Card list -->
  <ul class="list-group list-group-flush">
    <li class="list-group-item">List Item 1</li>
    <li class="list-group-item">Second List Item</li>
    <li class="list-group-item">Another item in a list</li>
  </ul>

  <!-- The bottom image cap -->
  <img src="Podfeet-Footer.png" class="card-img-top" alt="Podfeet Icons">
</div>
```

Notice that, rather confusingly, both the top and bottom image caps have the class `.card-img-top`.

The code above produces a Card that looks like this:

![Kitchen Sink Card Example 2](../assets/pbs83/Screenshot-2019-10-04-at-00.19.19.png)

## Collections of Cards

Cards can be used individually, perhaps to call out a piece of information that is separate from the remainder of the page. More often than not, you’ll use a collection of cards to display multiple chunks of information of a similar type.

**You can use the standard Bootstrap grid to lay out your Cards** by simply adding a single Card per `.col` within your grid.

However, you can get more fancy than that — Bootstrap provides two special containers for Cards, [Card Groups](https://getbootstrap.com/docs/4.3/components/card/#card-groups), and [Card Decks](https://getbootstrap.com/docs/4.3/components/card/#card-decks).

There is a third layout provided, [Card Columns](https://getbootstrap.com/docs/4.3/components/card/#card-columns), but the docs warn that this feature is still quite immature, and is not as reliable as it could be. We’ll be ignoring them in this series, at least for now.

### Card Groups & Card Decks

Card Groups and Card Decks are extremely similar — both will ensure that the headers and footers in each card within them line up horizontally, and both will keep the cards at an equal width as they stretch and shrink.

The only noticeable difference is that, in a Card Group, the Cards touch each other like buttons in a [Button Group](https://getbootstrap.com/docs/4.3/components/button-group/), but in a deck, each Card is separate and there is some empty space between the Cards.

Let’s start with a sample card group consisting of three cards representing some podcasts you might have heard of 😉. You’ll find the full code in the file `pbs83a.html` in the ZIP file, but the snippet below shows the overall structure of the Card Group:

```html
<div class="card-group">
  <div class="card">
    <!-- … -->
  </div>
  <div class="card">
    <!-- … -->
  </div>
</div>
```

In this case, each Card is a little simpler than the kitchen sink examples above. Each Card consists of an image cap and a Card body containing just a Card title, some regular Card text, and a Card link.

This produces a Card Group that looks like this:

![Card Group Example](../assets/pbs83/Screenshot-2019-10-04-at-00.33.07.png)

We can convert this card group into a card deck by simply changing `card-group` to `card-deck`. When we do that, we get a Card Deck that looks like this:

![Card Deck Example](../assets/pbs83/Screenshot-2019-10-04-at-00.35.26.png)

## A Challenge

This challenge aims to draw together many of the topics we’ve recently covered into a single real world example.

The website [exchangeratesapi.io](https://exchangeratesapi.io/) makes a list of currency exchange rates published by the European Central Bank (ECB) available via a JSON web service.

When you send a GET request to the URL `https://api.exchangeratesapi.io/latest`, you’ll get back a JSON string representing the current exchange rates between the Euro and a number of major world currencies. Here’s a sample of the kind of data the web service returns:

```javascript
{
  "rates": {
    "CAD": 1.4606,
    "HKD": 8.5882,
    "ISK": 135.7,
    "PHP": 56.738,
    "DKK": 7.4656,
    "HUF": 333.02,
    "CZK": 25.739,
    "AUD": 1.6294,
    "RON": 4.747,
    "SEK": 10.833,
    "IDR": 15520.3,
    "INR": 77.7155,
    "BRL": 4.5094,
    "RUB": 71.2751,
    "HRK": 7.418,
    "JPY": 117.17,
    "THB": 33.461,
    "CHF": 1.0957,
    "SGD": 1.5128,
    "PLN": 4.34,
    "BGN": 1.9558,
    "TRY": 6.2448,
    "CNY": 7.8282,
    "NOK": 10.0165,
    "NZD": 1.7421,
    "ZAR": 16.6077,
    "USD": 1.0951,
    "MXN": 21.6283,
    "ILS": 3.8282,
    "GBP": 0.8879,
    "KRW": 1317.84,
    "MYR": 4.5857
  },
  "base": "EUR",
  "date": "2019-10-03"
}
```

The currencies are all represented using their [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency codes. You’ll find [a full list of all codes here](https://www.xe.com/de/iso4217.php).

Although the web service defaults to showing rates relative to the Euro (`base = "EUR"`), it can show the rates relative to any supported currency by passing the three letter code for the desired currency as an HTTP query parameter named `base`. For example, the URL `https://api.exchangeratesapi.io/latest?base=USD` gives the rates relative to the US dollar.

Using this web service, create a collection of Cards showing the exchange rate relative to a collection of currencies of your choosing against another collection of currencies of your choosing. You should show at least three cards, and each card should show at least 5 rates.

You should use a Mustache template to build your cards. That template, as well as the currency information, should be fetched using AJAX.

## Final Thoughts

We’ve now finished our exploration of Bootstrap 4. We’ve not covered even nearly everything, but we have looked at a broad range of the highlights. We’ve learned that Bootstrap can be conceptually divided into four aspects — layout, styling of existing HTML elements, custom components, and utilities. We’ve explored a representative sample of each of these aspects. We have hopefully imparted enough knowledge to empower you to research the rest independently as and when needed.

The next thing we need to do is circle back to some recent enhancements to the core JavaScript language. That will end our first pass at JavaScript, leaving us ready to embark on an entire new chapter within this ever-expanding series.

repository: bartificer/programming-by-stealth

gha_language: HTML

repo_name: bartificer/programming-by-stealth


text:
# User Guide
Using the web interface of WaTTS is quite simple. Basically, the only thing
one needs to do is to press certain buttons and follow the instructions.

## Login and Logout
### Login
Open the Token Translation Service web-interface in the browser. You will see a
page which contains a drop down field and a `Login` button.

Select your OpenId Connect Provider in the drop down field and press the `Login`
button. This will redirect the browser to the selected Provider.

Login into your account at the provider page. If this is the first time
connecting to the WaTTS instance, you will be asked for permission to
forward the information to WaTTS.
After logging in at your provider, you will be sent back to WaTTS and
automatically recognized as a user.

If you see the login page again, your login has failed or you are not allowed to use
the WaTTS.

### Logout
<!-- After using WaTTS you should logout, so that no one else can create credentials using -->
<!-- your computer. -->
For security considerations, one should always logout from the WaTTS when not used.
To logout, simply press the `Logout` button at the lower border of the page.
After a successful logout you will see the login page again.

## Creating And Revoking Credentials
Once logged in, you will see one or two tables:

- *Services table*, which is always visible.
- *Credentials table*, which may be hidden, if you have no credentials.

### Creating Credentials
In the *Services table* each line represents a service for which one can request a
credential.
You request a credential by simply pressing the `Request` button. The service might
be disabled for you, then the service is grey and the `Request` button disabled.

If the `Advanced` button is enabled it means that the service accepts parameter.
Pressing the button opens a dialog where information can be entered. If there are
more than one configuration possibility, arrows are shown to change the configuration.
One example using the `Advanced` button is deployment of ssh keys, where you can paste your
public key when using the `Advanced` button.

If the request was successful, a dialog will pop up with all the relevant information
of the credential and how to use it.
Once you close this dialog, all information is gone! WaTTS does **not** store
the credentials. It only stores a reference to the credentials you created so
that they can be removed, if needed.

### Revoking Credentials
If you have created credentials before, you will see the *Credentials table*.
Each line represents a credential.
By simply clicking the `Revoke` button, WaTTS revokes your credential and
removes it from the list of credentials.

## Additional Information
### Show Access Token
After pressing the `Show Access Token` button a dialog appears. This dialog
contains the so-called OpenId Connect AccessToken, which can be used to act upon
your behalf. It is e.g. used to request credentials using the REST API.

In general, there is no need to use it, unless doing development work.

repository: indigo-dc/tts

gha_language: Erlang

repo_name: indigo-dc/tts


text:
# 2.0.0-alpha.13 (2016-11-14)

- Added metadata files to dist to support AoT compilation. (#219)

# 2.0.0-alpha.12 (2016-11-04)

- Bundle SKY UX files using rollup and release in dist folder.

# 2.0.0-alpha.11 (2016-11-04)

- Import Font Awesome from SKY UX CSS so it doesn't need to be added by the host page
- Added ability to upload a file from the avatar component (#202)
- Upgraded to Angular 2.1.2

# 2.0.0-alpha.10 (2016-10-24)

- Updates to visual tests
- Fixed issue where page summary and tile dashboard on same page causes tile dashboard to not be responsive (#152)
- Added the radio component (#111)

# 2.0.0-alpha.9 (2016-10-18)

- Fixed issue where two tabsets on one page interfered with each other
- Escaped scss characters properly (#139, #136)
- Upgraded to Angular 2.1.0
- Added the file attachments module (#109)

# 2.0.0-alpha.8 (2016-10-11)

- Fixed missing file reference (#132)

# 2.0.0-alpha.7 (2016-10-06)

- Fixed issue where the checked state of a checkbox was not properly reflected in the UI (#129)
- Added page summary component (#130)
- Upgraded to Angular 2.0.2 (#131)

# 2.0.0-alpha.6 (2016-09-28)

- Added basic navbar component
- Upgraded to Angular 2.0.1

# 2.0.0-alpha.5 (2016-09-21)

- Fixed an issue where code editors could not resolve type references after upgrading to TypeScript 2.0 (#121)
- Updated Angular 2 Dragula and other NPM packages (#123)

# 2.0.0-alpha.4 (2016-09-15)

- Updated to Angular 2 final release (#119)
- Fixed critical issue where alpha 3 did not contain the JavaScript files when installed via NPM (#118)

# 2.0.0-alpha.3 (2016-09-14)

- Updated to Angular 2 RC 7 (#115)
- Updated various other NPM packages (#108)

# 2.0.0-alpha.2 (2016-09-06)

- Updated to Angular 2 RC 6
- Added avatar component (sans upload capabilities)
- Fixed tile width issue when contents expanded past the width of the tile (#93)

# 2.0.0-alpha.1 (2016-08-19)

- Updated to Angular 2 RC 5
- Added type definition files to dist

# 2.0.0-alpha.0 (2016-08-01)

First alpha release.

# 2.0.0-pre-alpha.1 (2016-05-19)

No code changes.  Testing release process.

# 2.0.0-pre-alpha.0 (2016-05-18)

Initial release.


text:
# OpenSubdiv-Model-Fitting
Fitting subdivision surfaces to data.

Implements the main ideas in our CVPR 2016 tutorial (http://awf.fitzgibbon.ie/cvpr16_tutorial), but this is bare-bones code at the moment.  Please use only if you're confident you can fix bugs due to compiler inconsistencies etc.  I would love for someone to make it more polished, but if we wait until then, it may take forever for the code to be released.

Given that...

## Instructions

Clone our modified Eigen (https://bitbucket.org/sergarrido/eigen_pr/branch/block-lma-awf-expts), ensuring you're on the block-lma-awf-expts branch.

Configure this project (OpenSubdiv-Model-Fitting) with cmake

Run the Fit-Subdiv-to-3D-Points project

And view log3d.html in a browser.

repository: PeterZs/OpenSubdiv-Model-Fitting

repo_name: PeterZs/OpenSubdiv-Model-Fitting