text:
Faster GP-LVM Software
======================

This page describes examples of how to use the fast Gaussian process latent variable model Software (`fgplvm`). This toolbox allows for larger GP-LVM models through using the sparse approximations suggested in papers by authors including Titsias, Snelson, Ghahramani, Seeger, and Lawrence.

Release Information
-------------------

**Current release is 0.163**.

As well as downloading the `fgplvm` software you need to obtain the toolboxes specified below.

- [netlab](https://github.com/sods/netlab) mainly used for optimization utilities (like scg).

- [prior](https://github.com/SheffieldML/prior) prior distributions.
- [optimi](https://github.com/SheffieldML/optimi) optimization constriant mappings.
- [kern](https://github.com/SheffieldML/kern) covariance functions.
- [ndlutil](https://github.com/SheffieldML/ndlutil) various utility functions.
- [noise](https://github.com/SheffieldML/noise) noise models.

Required for demos

- [datasets](https://github.com/SheffieldML/datasets) dataset access.

Optional for motion capture experiments.

- [mocap](https://github.com/SheffieldML/mocap) loading in motion capture data.

Changes for compatibility with new SGPLVM toolbox by Carl Henrik Ek.

#### Version 0.162

Added new files fgplvmWriteResults fgplvmLoadResults for saving smaller model files.

#### Version 0.161

Updates for running a GPLVM when the inner produce matrix is used (i.e. dimensionality much greater than data points). Minor changes to fix reading of GPLVM files from latest C++ code.

#### Version 0.16

Incorporate varational approximation from Michalis in the code.

#### Version 0.153

Changes to allow compatibility with SGPLVM and NCCA toolboxes.

#### Version 0.152

Bug fix from fgplvmReadFromFID where the values of model.m weren't being computed correctly.

#### Version 0.151

In this version results for the CMU Mocap data set from [Taylor et al.](http://ml.sheffield.ac.uk/~neil/cgi-bin/publications/bibpage.cgi?keyName=Taylor:motion06&printAbstract=1) of subject 35 running and walking are included, as well as some minor changes to allow hierarchical GP-LVMs to be used.

#### Version 0.15

This version splits the Gaussian process portion into a new GP toolbox, the corresponding version is 0.1. Fixed bug in gpDynamicsExpandParam, gpDynamicsExractParam and gpDynamicsLogLikeGradient where 'fixInducing' option was not being dealt with.

Fixed bug in fgplvmCreate.m where the back constraints were set up, but the latent positions were not being set according to the back constraints in the returned model.

#### Version 0.141

Changed GP-LVM default optimiser to scg rather than conjgrad. Added fgplvmOptimiseSequence and dependent files. This is for optimising a test sequence in the latent space, for the case where there are dynamics on the model.

#### Version 0.14

Carl Ek implemented multiple sequences in the gpDynamics model used for dynamics in the GPLVM, this was refined and integrated by Neil.

Fixed two bugs in gpPosteriorGradMeanVar which appeared if fitc was used or the scales on the outputs were non-zero. This in turn affected fgplvmOptimisePoint.

Default under back constraints switched to not optimise towards a PCA initialisation.

Fixed bug in fgplvmReadFromFID where the old form of fgplvmCreate was being called.

#### Version 0.132

Release 0.132 includes two speed improvements on the pitc approximation. Thanks to [Ed Snelson](http://www.gatsby.ucl.ac.uk/~snelson/) for pointing out that it was unusually slow! New versions of the NDLUTIL and KERN toolbox are also required.

Release 0.131 adds the ability to handle missing data and a new reversible dynamics model.

Release 0.13 is a (hopefully) fairly stable base release for which several results in forthcoming papers will be created. Additional features are better decompartmentalisation of dynamics models, regularisation of inducing variable's inputs and introduction of fgplvmOptions and gpOptions for setting default options for the models.

Release 0.11 is the first release that contains the fully independent training conditional approximation (Snelson and Ghahramani, Quinonero Candela and Rasmussen).

Release 0.1 is a pre-release to make some of the model functionality available. The some of the different approximations (such as fully independent training conditional and partially independent training conditional) are not yet implemented and the dynamics currently has no sparse approximations associated.

This toolbox also implements back constraints (joint work with Joaquin Quinonero Candela). The mappings that can be used as back constraints are those described in [the MLTOOLS toolbox](http://github.com/SheffieldML/mltools/).

Alternative GP-LVM implementations from this site:

The GP-LVM C++ software is available from [here](http://github.com/SheffieldML/gplvmcpp/).

The original MATLAB version of the toolbox is available here [here](http://github.com/SheffieldML/gplvm/).

Examples
--------

### GP-LVM

The three approximations outlined above can be used to speed up learning in the GP-LVM. They have the advantage over the IVM approach taken in the [original GP-LVM toolbox](http://github.com/SheffieldML/gplvm/) that the algorithm is fully convergent and the final mapping from latent space to data space takes into account all of the data (not just the points in the active set).

As well as the new sparse approximation the new toolbox allows the GP-LVM to be run with dynamics as suggested by [Wang *et al.*](http://ml.sheffield.ac.uk/~neil/cgi-bin/publications/bibpage.cgi?keyName=Wang:gpdm05&printAbstract=1).

Finally, the new toolbox allows the incorporation of 'back constraints' in learning. Back constraints force the latent points to be a smooth function of the data points. This means that points that are close in data space are constrained to be close in latent space. For the standard GP-LVM points close in latent space are constrained to be close in data space, but the converse is not true.

Various combinations of back constraints and different approximations are used in the exmaples below.

### Oil Data

The 'oil data' is commonly used as a bench mark for visualisation algorithms. For more details on the data see [this page](http://inverseprobability.com/3PhaseData.html).

The [C++ implementation of the GP-LVM](http://github.com/SheffieldML/gplvmcpp) has details on training the full GP-LVM with this data set. Here we will consider the three different approximations outlined above.

#### FITC Approximation

In all the examples we give there will be 100 points in the active set. We first considered the FITC approximation. The script `demOilFgplvm1.m` runs the FITC approximation giving the result on the left of the figure shown below.

![](./diagrams/demOilFgplvm1.png)![](./diagrams/demOilFgplvm2.png)

*Left*: GP-LVM on the oil data using the FITC approximation without back constraints. The phases of flow are shown as green circles, red crosses and blue plusses. One hundred inducing variables are used. *Right*: Similar but for a back-constrained GP-LVM, the back constraint is provided by a multi-layer perceptron with 15 hidden nodes.
Back constraints can be added to each of these approximations. In the example on the right we used a back constraint given by a multi-layer perceptron with 15 hidden nodes. This example can be recreated with `demOilFgplvm2.m`.

#### DTC Approximation

The other approximations can also be used, in the figures below we give results from the DTC approximation. The can be recreated using `demOil3.m` and `demOil4.m`.

![](./diagrams/demOilFgplvm3.png)![](./diagrams/demOilFgplvm4.png)

*Left*: GP-LVM on the oil data using the DTC approximation without back constraints. The phases of flow are shown as green circles, red crosses and blue plusses. One hundred inducing variables are used. *Right*: Similar but for a back-constrained GP-LVM, the back constraint is provided by a multi-layer perceptron with 15 hidden nodes.
#### PITC Approximation

We also show results using the PITC approximation, these results can be recreated using the scripts `demOilFgplvm5.m` and `demOilFgplvm6.m`.

![](./diagrams/demOilFgplvm5.png)![](./diagrams/demOilFgplvm6.png)

*Left*: GP-LVM on the oil data using the PITC approximation without back constraints. The phases of flow are shown as green circles, red crosses and blue plusses. One hundred inducing variables are used. *Right*: Similar but for a back-constrained GP-LVM, the back constraint is provided by a multi-layer perceptron with 15 hidden nodes.

#### Variational DTC Approximation

Finally we also show results using the variational DTC approximation of Titsias, these results can be recreated using the scripts `demOilFgplvm7.m` and `demOilFgplvm8.m`.

![](./diagrams/demOilFgplvm7.png)![](./diagrams/demOilFgplvm8.png)

*Left*: GP-LVM on the oil data using the variational DTC approximation without back constraints. The phases of flow are shown as green circles, red crosses and blue plusses. One hundred inducing variables are used. *Right*: Similar but for a back-constrained GP-LVM, the back constraint is provided by a multi-layer perceptron with 15 hidden nodes.

### Back Constraints and Dynamics

First we will demonstrate the dynamics functionality of the toolbox. We raw x-y-z values from a motion capture data set, the `Figure Run 1` example available [from Ohio State University](http://accad.osu.edu/research/mocap/mocap_data.htm). To run without dynamics use the script:

```matlab
>> demStickFgplvm1
```

The results are given on the left of the figure below.

![](./diagrams/demStickFgplvm1.png)

GP-LVM on the motion capture data without dynamics in the latent space.
Notice that the sequence (which is a few strides of a man running) is split into several sub-sequences. These sub-sequences are aligned to the strides of the man. By introducing a dynamics prior, we can force the sequence to link up. Samples from the dynamics prior used are shown in the plot below.

![](./diagrams/dynamicsSamp1.png)![](./diagrams/dynamicsSamp2.png)
 ![](./diagrams/dynamicsSamp3.png)![](./diagrams/dynamicsSamp4.png)

Samples from the dynamics prior which is placed over the latent space. This prior has *Left*: GP-LVM on the motion capture data without dynamics in the latent space. *Right*: GP-LVM with dynamics. Samples from the dynamics prior used are given in the figure above.
This prior is used in the model to obtain the results below,

```matlab
>> demStickFgplvm2
```

![](./diagrams/demStickFgplvm2.png)

GP-LVM with dynamics. Samples from the dynamics prior used are given in the figure above.
Note now the circular form of the latent space. Back constraints can also be used to achieve a similar effect,

```matlab
>> demStickFgplvm3
```

![](./diagrams/demStickFgplvm3.png)

GP-LVM with back constraints. A RBF kernel mapping was used to form the back constraints with the inverse width set to 1e-4 (*i.e.*length scale set to 100).

### Loop Closure in Robotics

In on-going work with Dieter Fox and Brian Ferris at the University of Washington we are interested in loop closure for robotic navigation, included as an example is a data set of a robot completing a loop while reading wireless access point signal strengths. To produce a neat track and close the loop it turns out it is necessary to use dynamics and back constraints as seen in the images below. These results can be recreated with
`demRobotWireless1.m` through `demRobotWireless4.m`.

![](./diagrams/demRobotWireless1.png)![](./diagrams/demRobotWireless2.png)
![](./diagrams/demRobotWireless3.png)![](./diagrams/demRobotWireless4.png)

Use of back constraints and dynamics to obtain loop closure in a robot navigation example. *Top Left*: GP-LVM without back constraints or dynamics, *Top right*: GP-LVM with back constraints, no dynamics, *Bottom Left*: GP-LVM with dynamics, no back constraints, *Bottom right*: GP-LVM with back constraints and dynamics.

### Vocal Joystick and Vowel Data

Another ongoing piece of work with Jeff Bilmes and Jon Malkin involves embedding vowel sounds in a two dimensional space as part of [vocal joystick](http://ssli.ee.washington.edu/vj) system. Jon has provided a simple data set of 2,700 examples of different vowels. These are embedded in a two dimensional latent space with and without back constraints.

![](./diagrams/demVowels2.png)![](./diagrams/demVowels3.png)

*Left*: embedding of the vowel data without back constraints, *Right*: embedding of the vowel data with back constraints. */a/* - red cross, */ae/* - green circle, */ao/* - blue plus, */e/* - cyan asterix, */i/* - magenta square, */ibar/* - yellow diamond, */o/* - red down triangle, */schwa/* - green up triangle, */u/* - blue left triangle.

### Larger Human Motion Data Sets

For [an AISTATS paper](http://ml.sheffield.ac.uk/~neil/cgi-bin/publications/bibpage.cgi?keyName=Lawrence:larger07&printAbstract=1) we recreated an experiment from [Taylor *et al.*'s NIPS paper](http://ml.sheffield.ac.uk/~neil/cgi-bin/publications/bibpage.cgi?keyName=Taylor:motion06&printAbstract=1). They created a data set from a motion capture data in the [CMU data base](http://mocap.cs.cmu.edu) of running and walking. The data set can now be recreated using the [DATASETS toolbox](http://github.com/SheffieldML/datasets/). We repeated missing data experiments by Taylor et al.. The model learning for these experiments can be recreated with:

```matlab
>> demCmu35gplvm1
```

for the four dimensional latent space, `demCmu35gplvm2` for the three dimensional latent space and `demCmu35gplvm3` for the five dimensional latent space. The test data reconstruction can then be performed for all models with `demCmu35gplvmReconstruct`. Taylor *et al.*'s nearest neighbour results can be recreated using `demCmu35TaylorNearestNeighbour`.

Data was pre-processed by mapping angles to be between -180 and 180 and scaling the data such that the variance of each dimension was one.

The quality of the trained model was evaluated using a missing data problem with a test sequence of data. The model was required to fill in either upper body angles or right leg angles. Results for the GP-LVM and nearest neighbour in both scaled space and original angle space are given in the table below.

<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>

Leg Cumulative Scaled
Leg RMS Angles
Body Cumulative Scaled
Body RMS Angles

GP-LVM (q=3)
11.4
3.40
16.9
2.49

GP-LVM (q=4)
9.7
3.38
20.7
2.72

GP-LVM (q=5)
13.4
4.25
23.4
2.78

Scaled NN
13.5
4.44
20.8
2.62

Nearest Neighbour
14.0
4.11
30.9
3.20

The cumulative scaled error is a recreation of the error reported in Taylor *et al.* which was the average (across angles) cumulative sum (across time) of the squared errors in the down-scaled (*i.e.* variance one) space of angles. We also present the root mean squared angle error for each joint which we find to be a little easier to interpret.

Taylor *et al.* used a slightly different representation of the data set which included the absolute *x* and *z* position of the root node and rotation around the *y*-axis. For this data set, this information does help, principally because the subject seems to start in roughly the same position at the beginning of each sequence. However, in general absolute position will not help, so we discarded it in favour of a representation of these values in terms of differences between frames. Finally Taylor *et al.* concatenated two frames to form each data point for the model. We chose not to do this as we wanted to test the ability of the Gaussian process dynamics to fully recreate the data set. There results are given in their paper and summarised below.

<colgroup>
<col width="33%" />
<col width="33%" />
<col width="33%" />
</colgroup>

Leg Cumulative Scaled
Body Cumulative Scaled

Binary Latent Variable Model
11.7
8.8

Scaled NN
22.2
20.5

Finally we show a plot of reconstructions of two of the angles in the data.

![](./diagrams/demCmu35gplvmLegReconstruct1_8.png)![](./diagrams/demCmu35gplvmLegReconstruct1_9.png)

Prediction for first two angles of the right hip joint (see plots in [Taylor *et al.*](http://ml.sheffield.ac.uk/~neil/cgi-bin/publications/bibpage.cgi?keyName=Taylor:motion06&printAbstract=1) for comparison). Dotted line is nearest neighour in scaled space, dashed line is GP-LVM with 4-D latent space.

Page updated on Wed May 19 10:04:54 2010


text:
## Finding Volumio

When computers talk to each other they need to know each other's IP addresses.
These are awkward for humans to use, so normally we give computers names and
set up a translation between names and IP addresses. This is known as 'name
resolution'.

Volumio uses a system called mDNS (multicast DNS) to advertise its presence
on the LAN. This allows finding it with the name 'volumio.local'. mDNS is
also called 'Bonjour' and 'Zeroconf' by different vendors.

For this to work, you need a client program that can make mDNS queries and
understand the replies.
 * On MacOS and iOS, mDNS is called 'Bonjour' and should Just Work.
 * On Windows, you may need to install [Bonjour](http://www.raspyfi.com/wp-content/uploads/BonjourSetup.exe)
 * On Linux, it will most likely work if you have the 'avahi' packages installed.
 * On Android, there is a problem. At present there is no native support for mDNS
   but you may be able to install an App to help, such as
   [FING](https://play.google.com/store/apps/details?id=com.overlook.android.fing).

mDNS is a relatively new system and not suitable for all situations.
It uses the special '.local' domain. The next section describes how
traditional name resolution works.

To check if mDNS is working on a Linux computer you can try using these
programs from the'avahi-utils' package:
```shell
$ avahi-resolve -n volumio.local
```
and
```shell
$ avahi-browse -a
```

### Translating names to IP addresses without mDNS

Traditional name resolution works differently.
Instead of listening for advertisements broadcast to all computers on the local
network, a computer wanting to resolve a name into an IP address needs to send
a request to a specific computer - a DNS server.
But it has to be configured to use the *right* DNS server.

In a typical home LAN, when a computer (a 'client') connects to the LAN,
your router will give the client an IP address using the DHCP protocol.
As well as an IP address, it usually tells the client which DNS server(s) to use,
and what DNS domain(s) to search when the client machine wants to translate an
'unqualified' name (e.g. 'volumio').

A simple example: suppose your router has the default search domain set to '.lan'.
When your computer wants to look up the IP address associated with the name
'volumio', your computer will actually ask for the name 'volumio.lan'.
Another person's network might have the default domain set to '.home',
so there a computer would ask for 'volumio.home'.
When a lookup of a 'fully-qualified' name is requested (e.g. 'volumio.org'),
the '.lan' is not added to the name. Whatever name is asked for, your computer
will normally ask the DNS server that the router tells it to use.

There are lots of ways this process can go wrong.
 * the router points your computers to DNS servers that do not know anything
   about the the '.lan' or '.home' DNS domain.
 * the DNS server knows about the .lan domain but can't find the name you
   asked for ('volumio').
 * the device you are using may refuse to use the DNS servers the router
   suggests to use. This can happen on Android phones in particular.

There are lots of possible ways to get this 'name resolution' process working,
but which is the right one for you depends on what equipment you have and how
your network is set up. Try to work out how things are failing, then ask in
the forums for help.

license: MIT

repository: dheijl/docs

branch_name: refs/heads/master

extension: md

gha_license_id: MIT

license_type: permissive

repo_name: dheijl/docs


text:
# The Designated Show

[![Travis](https://img.shields.io/travis/piravp/series-manager.svg)](https://travis-ci.org/piravp/series-manager.svg?branch=master)
[![license](https://img.shields.io/github/license/piravp/series-manager.svg)](https://github.com/piravp/series-manager/blob/master/LICENSE.md)

The Designated Show is a series manager aimed at the professional binge-watcher. TDS lets you find and keep track of all the series you have going on.

**[Live demo](https://the-designated-show.herokuapp.com/)** (remember to add API key - instructions below)

## 1. Download TDS
#### Clone this repository or download ZIP.
```sh
# HTTP
https://github.com/piravp/series-manager.git
# SSH
git@github.com:piravp/series-manager.git
```
## 2. Connect to TMDb
#### Get API key
TDS uses The Movie Database API (TMDb). [Register](https://www.themoviedb.org/account/signup) an account and [aquire](https://developers.themoviedb.org/3/getting-started/introduction) an `API_KEY`.

#### Copy key into the project
Adding the key can be done either directly inside the app or by modifying the `configKey.js` file.
##### Method 1: In the app
After you've run `npm run dev-server` and opened the app navigate to `Home` and open the dropdown menu below the search bar. Click on `Add key` and insert your key.
##### Method 2: Config file
Locate `configKey.js` in the root folder and insert your API_KEY inside the string on line 3.
```node
export const API_KEY = getAPIKey() || "YOU-MUST-PROVIDE-AN-API-KEY-HERE";
```

## 3. Getting Started
#### Install dependencies
```sh
# npm
npm install
# yarn
yarn install
```

#### Start dev-server
```sh
# npm
npm run dev-server
# yarn
yarn run dev-server
```

Nice! You can now navigate to http://localhost:8080 to see the result.

## Demo
[![The Designated Show - A series manager](https://img.youtube.com/vi/wCUCFb-Yr5I/0.jpg)](https://youtu.be/wCUCFb-Yr5I)

**[Click here for live demo](https://the-designated-show.herokuapp.com/)** (remember to add API key, as discussed above)

### Known issues
* Manually adding series has not been implemented yet.
* Sometimes opening the `HomeDetailsModal` doesn't fetch the details. The current fix is to close and re-open the modal (may require several attempts).
* The list view in `Home` shows two empty items even though list is empty.

## Contributing
Please fork this repository and contribute back using pull requests.
Any contributions, large or small, major features, bug fixes, additional language translations, unit/integration tests are welcomed.

repository: piravp/series-manager

gha_language: JavaScript

repo_name: piravp/series-manager


text:
# bg2 engine Swift APPI

## Create a new app

### File structure

The structure of the files and directories is free, but if you decide to choose another structure, you must take it into account to modify the paths specified in the following instructions. Here we detail the proposal of directories that we propose. At the end of this example, we will have implemented a very basic test application with bg2 engine.

- root
	* MyProject.xcodeproj
	* Common (here we'll place application files that are shared between the mac and iOS app)
		+ RotatingComponent.swift (see "common" section)
		+ RendererDelegate.swift (see "common" section)
		+ data (from bg2 engine data resources)
	* iOS or Mac App
		+ iOS or Mac specific files
	* bg2e  (engine source)
		+ Shaders
		+ Source
		+ Other bg2 engine source code and resources

The engine source is extracted directly from the bg2 engine source code, located at `[bg2e root]/bg2e/bg2e`.

### iOS (Storyboard)

- Create a project or target with the template iOS App, using storyboards for the user interface
- Open the main storyboard and change the class to MTKView
- In the target setttings, at `Build Settings` section, search for the section `Objective-C Bridging Header`, and set the path `bg2e/Shaders/ShaderCommon.h`
- Create a group at the root of the project with the name `bg2e`, and add the content of the `bg2e` folder. It should look like this, in Project navigator:

* MyProject
	- bg2e
		+ Shaders
		+ Source
	- iOS App file group
		+ app files

- Modify the view controller source code. Please note that this code will not work until the "Common" section is completed:

```swift
import UIKit
import MetalKit

class ViewController: UIViewController {
	var renderer: BG2Renderer?

	override func viewDidLoad() {
		super.viewDidLoad()

		guard let metalView = view as? MTKView else {
			fatalError("Please, set the view to be an instance of MTKView")
		}

		renderer = BG2Renderer(metalView: metalView)
		renderer?.delegate = RendererDelegate()
	}
}
```

### macOS (Storyboard)

- Create a project or target with the template Mac App, using storyboards for the user interface
- Open the main storyboard and change the class to MTKView
- Add the following code to the `viewDidLoad()` function, in `ViewController.swift`
- In the target setttings, at `Build Settings` section, search for the section `Objective-C Bridging Header`, and set the path `bg2e/Shaders/ShaderCommon.h`
- Create a group at the root of the project with the name `bg2e`, and add the content of the `bg2e` folder. It should look like this, in Project navigator:

* MyProject
	- bg2e
		+ Shaders
		+ Source
	- Mac App file group
		+ app files

- Modify the view controller source code. Please note that this code will not work until the "Common" section is completed:

```swift
import UIKit
import MetalKit

class ViewController: NSViewController {
	var renderer: BG2Renderer?

	override func viewDidLoad() {
		super.viewDidLoad()

		guard let metalView = view as? MTKView else {
			fatalError("Please, set the view to be an instance of MTKView")
		}

		renderer = BG2Renderer(metalView: metalView)
		renderer?.delegate = RendererDelegate()
	}
}
```

### Common

The following files must to be created at the Common folder. If you have one target for mac app and one for iOS app, you will have to add them both.

- Add the following files to the `Common` folder. If you have two targets for macOS and iOS application, don't forget to add the files to both targets

**RotatingComponent.swift:**

```Swift
import Foundation

public class RotatingComponent: BG2SceneComponent {

	public override init() {
		super.init()
	}

	public override func update(delta: Float) {
		guard let so = self.sceneObject,
			let transform = so.transform
		else {
			return
		}

		transform.matrix *= matrix_float4x4.init(rotationY: delta)
	}
}
```

**RendererDelegate.swift:**

```Swift
import MetalKit

public class RendererDelegate {

}

extension RendererDelegate: BG2RendererDelegate {
	public func createScene(renderer: BG2Renderer) -> BG2SceneObject {

		let scene = BG2SceneObject(withRenderer: renderer)

		let cameraNode = BG2SceneObject(withRenderer: renderer)
		let camera = BG2CameraComponent()
		cameraNode.addComponent(camera)

		renderer.mainCamera = camera;

		var transform = BG2TransformComponent()
		transform.matrix =
			matrix_float4x4.init(translate: SIMD3<Float>(0,1,-3)) *
			matrix_float4x4.init(rotationX: Float(12).degreesToRadians)

		cameraNode.addComponent(transform)

		scene.addChild(cameraNode)

		let lightNode = BG2SceneObject(withRenderer: renderer)
		let light = BG2LightComponent()
		lightNode.addComponent(light)

		transform = BG2TransformComponent()
		transform.matrix =
			matrix_float4x4.init(rotationY: Float(33).degreesToRadians) *
			matrix_float4x4.init(rotationX: Float(55).degreesToRadians) *
			matrix_float4x4.init(translate: SIMD3<Float>(0,0,5))
		lightNode.addComponent(transform)

		scene.addChild(lightNode)

		let drawable = loadDrawable(renderer: renderer)
		let drawableNode = BG2SceneObject(withRenderer: renderer)
		drawableNode.addComponent(drawable)
		drawableNode.addComponent(BG2TransformComponent())
		drawableNode.addComponent(RotatingComponent())
		scene.addChild(drawableNode)

		return scene
	}

	func loadDrawable(renderer: BG2Renderer) -> BG2DrawableComponent {
		guard let url = Bundle.main.url(forResource: "test_cube", withExtension: "bg2") else {
			fatalError("Could not load drawable")
		}

		let model = BG2ModelLoad(contentsOfFile: url, renderer: renderer)
		let drawableComponent = BG2DrawableComponent()
		for item in model.drawableItems {
			drawableComponent.drawableItems.append(item)
		}

		return drawableComponent
	}

	public func resize(_ view: MTKView, drawableSizeWillChange size: CGSize, renderer: BG2Renderer) {
		guard let camera = renderer.mainCamera else {
			return
		}

		let aspect: Float = Float(view.bounds.size.width) / Float(view.bounds.size.height)
		camera.projection = float4x4.init(perspectiveFov: 45, near: 0.1, far: 100.0, aspect: aspect)
		//camera.position = float4x4.init(translate: SIMD3<Float>(0, 0, -3))
	}

	public func update(_ delta: Float, renderer: BG2Renderer) {

	}
}
```

-- Add the `data` folder from bg2 engine resources to the common group. If you have two targets for macOS and iOS application, don't forget to add the files to both targets.


text:
---
title: "Array.from()"
date: 2018-01-14T21:38:44-05:00
draft: false
noTitle: false
fullWidth: false
description: "Create a new array from an existing array or array-like object."
weight: 130
---

Create a new array from an existing one, or transform an array-like object (like a NodeList) into an array. Pass the array (or array-like object) to copy in as an argument.

```javascript
let sandwiches = ['turkey', 'tuna', 'ham', 'pb&j'];
let sandwichesCopy = Array.from(sandwiches);
```

repository: cferdinandi/vanilla-js-toolkit

gha_language: CSS

repo_name: cferdinandi/vanilla-js-toolkit


text:
Retinad Javascript plugin
===================================================

## How to use

To use the plugin, subscribe to Retinad directly from [our website](https://www.retinadvr.com "Retinad website"). Copy the App ID and Account Key received by email.

### Installation

* `npm install retinadjs`
* include **node_modules/retinadjs/dist/retinad.min.js** in the **index.html** of the project

### Use
1. Connect: (Mandatory first step)
    * `retinad.connect({appId: RETINAD_APP_ID, accountKey: RETINAD_ACCOUNT_KEY})`
    * **RETINAD_APP_ID** and **RETINAD_ACCOUNT_KEY** are the App ID and the Account Key that has been sent by email.

2. Set context name: (Mandatory step)
    * `retinad.setContextName(name)`
    * Usually, **name** would correspond to the name of the video file, or a unique name to identify it easily.
    * Call this function at the start of all videos. Don't forget to call this function at the beginning of the session as well.

3. Play: (Mandatory step)
    * `retinad.play({u: currentU, v: currentV}, currentTime)`
    * **currentU** and **currentV** are the coordinates of the current camera position, in the UV coordinates system. Please see Coordinates section for more details.
    * **currentTime** corresponds to the playback time in seconds.
    * Call this function when a video begins to play -- this includes when the user presses play or when a video auto-plays.

4. Collect data: (Must be called at each frame)
    * `retinad.collectData({u: currentU, v: currentV}, currentTime)`

5. Pause:
    * `retinad.pause({u: currentU, v: currentV}, currentTime)`
    * Call this function when a video is paused.

6. Stop: (Must be called at the very end of the session)
    * `retinad.stop({u: currentU, v: currentV}, currentTime)`

### Coordinates (UV)

The orientation of the camera needs to be transposed to a UV format (Mercator Projection). Let's unwrap the video sphere:

![](img/earth.jpg)

The lower left corner is U = 0 and V = 0. The upper right corner is U = 1 and V = 1. The front is U = 0.5 and V = 0.5. U is the horizontal component and V is the vertical component.

Right now, only one public conversion function is available : `retinad_convertVector3ToUV({x: vectorX, y: vectorY, z: vectorZ})`. It assumes that the Vector3 is in the right-handed coordinates system.

## How to contribute

Fork this repository and post a pull request when everything is dandy!

### Development

* Run `npm install` before first use
* Use [browserify](https://github.com/substack/node-browserify) to compile the javascript to **dist/** by running `browserify retinad.js > dist/retinad.js`
* Run `npm run serve` to start a local server

### Good to know

* Frames are represented in tenths of seconds. For instance, for a playback time of 1.3 seconds, the frame number will be 13. Hundredths of seconds will be rounded to the nearest tenth of a second. A playback time of 1.25 will have a frame value of 13, while a playback time of 1.21 will have a frame value of 12.

repository: Retinad/retinad

repo_name: Retinad/retinad


text:
# Contributing to Styled-Animation

1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
1. Install the dependencies: `npm i`.
1. Run `npm run storybook` to run the stories behing `/stories` folder.

repository: BlackBoxVision/styled-animation

gha_language: TypeScript

repo_name: BlackBoxVision/styled-animation


text:
## Command Line Build

To build the project at the command line you need to have maven installed. When building with Maven you must specify a profile to use.

For instance

```
mvn clean install -P 0.94.1
```

# Running from Command Line

Once build you can run HRider with the following command:

```
> cd target
> java -jar h-rider-<IP_ADDRESS>.jar
```

## Eclipse Build

To build in eclipse you need the M2E plugin installed in Ecliplse. To setup and build the project do the following:

* Open Eclipse
* Select Menu->File->Import->Existing Maven Project
* Browser to HRider directory
* Select OK
* Once imported Right click on the HRider project and select the "maven" group
* Set "Active Maven Profile" to "0.94.1" (without the quotes)
* Close Properties

## Running in Eclispe

In Eclipse right click on _hrider.ui.forms.Window_ and select "Debug->Java Applicaiton"

repository: yepher/hrider

repo_name: yepher/hrider


text:
# Example Analytics

This folder contains examples of deploying analytics to the
[Voxel51 Platform](https://console.voxel51.com) using the Platform SDK.

## Examples

| Analytic Name | Type | Description |
| ------------- | ---- | ----------- |
| [platform-demo](platform-demo/README.md) | Platform | Example of deploying a simple Platform analytic that generates random video labels |
| [i2v-demo](i2v-demo/README.md) | Image-To-Video | Example of deploying a simple Image-To-Video analytic that generates random video labels |
| [tf-models-detector-i2v](tf-models-detector-i2v/README.md) | Image-To-Video | Example of deploying an object detector from the [TensorFlow Detection Model Zoo](https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/detection_model_zoo.md) as an Image-To-Video analytic |
| [tf-models-segmenter-i2v](tf-models-segmenter-i2v/README.md) | Image-To-Video | Example of deploying an instance segmentation model from the [TensorFlow Detection Model Zoo](https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/detection_model_zoo.md) as an Image-To-Video analytic |
| [tf-semantic-segmenter-i2v](tf-semantic-segmenter-i2v/README.md) | Image-To-Video | Example of deploying a semantic segmentation model stored as a frozen TensorFlow graph as an Image-To-Video analytic |
| [tf-slim-classifier-i2v](tf-slim-classifier-i2v/README.md) | Image-To-Video | Example of deploying a classifier from the [TensorFlow-Slim Model Zoo](https://github.com/tensorflow/models/tree/master/research/slim) as an Image-To-Video analytic |

## Copyright

Copyright 2017-2020, Voxel51, Inc.<br>
[voxel51.com](https://voxel51.com)

branch_name: refs/heads/develop

gha_language: Python

gha_license_id: NOASSERTION


text:
Cloud Native Bootcamp

## Cloud Native Bootcamp

This course is designed to enable developers with the latest tools and techniques for developing cloud native applications.

The course materials can be viewed at- [https://cloudnative101.dev/](https://cloudnative101.dev/)

```
git clone
```

### Install dependencies

```
npm install
```

### Local Development

After forking the repository, you can run your changes locally using the following:

```
npm run dev
```

You can access your local changes via [localhost:8000](http://localhost:8000).

### Contributors

- Hemankita Perabathini<EMAIL_ADDRESS>- Bryan Kribbs<EMAIL_ADDRESS>- Carlos Santana<EMAIL_ADDRESS>- Matt Oberlin<EMAIL_ADDRESS>- Bharath


text:
# Wizard

```javascript
const pages = [
  {
    render() {
      return (
        <span>
          This is the first page of the wizard. By default, the wizard cannot be
          cancelled. The user cannot go back from the first page. Click the Next
          button to proceed.
        </span>
      );
    }
  },
  {
    render() {
      return (
        <span>
          This is the second page of the wizard. The user can click Back or
          Next.
        </span>
      );
    }
  },
  {
    render() {
      return (
        <span>
          This is the third and final page of the wizard. The user can click
          Back or Finish
        </span>
      );
    }
  }
];

<Wizard pages={pages} style={{ border: '1px solid #ccc', padding: '8px' }} />;
```

repository: marcintreder/pivotal-ui

repo_name: marcintreder/pivotal-ui


text:
**This document is out-of-date. See [`lib/loop/loop.js`](https://github.com/benschmaus/nodeload/tree/master/lib/loop/loop.js) and [`lib/loop/multiloop.js`](https://github.com/benschmaus/nodeload/tree/master/lib/loop/multiloop.js).**

## Function Scheduler ##

The `SCHEDULER` object allows a function to be called at a desired rate and concurrency level. See `scheduler.js`.
**Functions:**

* `SCHEDULER.schedule(spec)`: Schedule a function to be executed (see the **Schedule Definition** below)
* `SCHEDULER.startAll(callback)`: Start running all the scheduled functions and execute callback when they complete
* `SCHEDULER.startSchedule(callback)`: Start a single scheduled function and execute callback when it completes
* `funLoop(fun)`: Wrap functions that do not perform IO so they can be used with SCHEDULER

**Usage**:

Call `SCHEDULER.schedule(spec)` to add a job. `spec.fun` must be a `function(loopFun, args)` and call `loopFun(results)` when it completes. Call `SCHEDULER.startAll()` to start running all scheduled jobs.

If `spec.argGenerator` is non-null, it is called `spec.concurrency` times on startup. One return value is passed as the second parameter to each concurrent execution of `spec.fun`.  If null, the value of `spec.args` is passed to all executions of `spec.fun` instead.

A scheduled job finishes after its target duration or it has been called the maximum number of times. `SCHEDULER` stops *all* jobs once all *monitored* jobs finish. For example, 1 monitored job is scheduled for 5 seconds, and 2 unmonitored jobs are scheduled with no time limits. `SCHEDULER` will start all 3 jobs when `SCHEDULER.startAll()` is called, and stop all 3 jobs 5 seconds later.  Unmonitored jobs are useful for running side processes such as statistics gathering and reporting.

Example:

    var t = 1;
    nl.SCHEDULER.schedule({
        fun: nl.LoopUtils.funLoop(function(i) { console.log("Thread " + i) }),
        argGenerator: function() { return t++; },
        concurrency: 5,
        rps: 10,
        duration: 10
    });
    nl.SCHEDULER.startAll(function() { sys.puts("Done.") });

Alternatively, a Job can started independently. A Job instance is analogous to a single thread, and does not understand the `concurrency` parameter.

    var i = 0;
    var job = new nl.Job({
        fun: nl.LoopUtils.funLoop(function() { console.log(i++) }),
        rps: 10,
        duration: 10
    }).start();

**Job Definition**: The following object defines the parameters and defaults for a job run by `SCHEDULER`:

    var JOB_DEFAULTS = {
        fun: null,                  // A function to execute which accepts the parameters (loopFun, args).
                                    // The value of args is the return value of argGenerator() or the args
                                    // parameter if argGenerator is null. The function must call
                                    // loopFun(results) when it completes.
        argGenerator: null,         // A function which is called once when the job is started. The return
                                    // value is passed to fun as the "args" parameter. This is useful when
                                    // concurrency > 1, and each "thread" should have its own args.
        args: null,                 // If argGenerator is NOT specified, then this is passed to the fun as "args".
        concurrency: 1,             // Number of concurrent calls of fun()
        rps: Infinity,              // Target number of time per second to call fun()
        duration: Infinity,         // Maximum duration of this job in seconds
        numberOfTimes: Infinity,    // Maximum number of times to call fun()
        delay: 0,                   // Seconds to wait before calling fun() for the first time
        monitored: true             // Does this job need to finish in order for SCHEDULER.startAll() to end?
    };

## Event-based loops ##

The `ConditionalLoop` class provides a generic way to write a loop where each iteration is scheduled using `process.nextTick()`. This allows many long running "loops" to be executed concurrently by `node.js`. See `evloops.js`.

**Functions:**

* `ConditionalLoop(fun, args, conditions, delay):` Defines a loop (see **Loop Definition** below)
* `ConditionalLoop.start(callback):` Starts executing and call `callback` on termination
* `ConditionalLoop.stop():` Terminate the loop
* `LoopConditions.timeLimit(seconds)`, `LoopConditions.maxExecutions(numberOfTimes)`: useful ConditionalLoop conditions
* `LoopUtils.rpsLoop(rps, fun)`: Wrap a `function(loopFun, args)` so ConditionalLoop calls it a set rate
* `LoopUtils.funLoop(fun)`: Wrap a linearly executing `function(args)` so it can be used with a ConditionalLoop

**Usage:**

Create a `ConditionalLoop` instance and call `ConditionalLoop.start()` to execute the loop. A function given to `ConditionalLoop` must be a `function(loopFun, args)` which ends by calling `loopFun()`.

The `conditions` parameter is a list of functions. When any function returns `false`, the loop terminates. For example, the functions `LoopConditions.timeLimit(seconds)` and `LoopConditions.maxExecutions(numberOfTimes)` are conditions that limit the duration and number of iterations of a loop respectively.

The loop also terminates if `ConditionalLoop.stop()` is called.

Example:

    var fun = function(loopFun, startTime) {
        console.log("It's been " + (new Date() - startTime) / 1000 + " seconds");
        loopFun();
    };
    var stopOnFriday = function() {
        return (new Date()).getDay() < 5;
    }
    var loop = new nl.ConditionalLoop(nl.LoopUtils.rpsLoop(1, fun), new Date(), [stopOnFriday, nl.LoopConditions.timeLimit(604800 /*1 week*/)], 1);
    loop.start(function() { console.log("It's Friday!") });

**Loop Definition:**

The `ConditionalLoop` constructor arguments are:

    fun: Function that takes parameters (loopFun, args) and calls loopFun() after each iteration
    args: The args parameter to pass to fun
    conditions: A list of functions representing termination conditions. Terminate when any function returns `false`.
    delay: Seconds to wait before starting the first iteration


text:
# Dynamic app creation and destruction example

An example of how to create and destroy Yew apps on demand.

## Concepts

Demonstrates the use of the Yew app handle by dynamically creating and destroying apps.

## Running

Run this application with the trunk development server:

```bash
trunk serve --open
```

repository: doytsujin/yew

gha_language: Rust

repo_name: doytsujin/yew


text:
---
layout: post
title: Azure Functions + Container Instances
updated: 2018-08-16 18:12
comments: true
---

I have a node.js application that does some short-lived work and for years i have used crontab to execute the application on a schedule. This would run the application until termination and then the machine would wait for crontab to start the process all over again. Recently, i got an urge to fix this and started looking at Docker. Im sure everyone knows what Docker is, so im going to cut to the chase. There were a few things that crossed my mind:

* I could rent a VM and install Docker and use cron to run the container on a schedule
* I could have an always running Docker container on ACI and use cron inside the container
* I could have a time based Azure function that creates and deletes containers on demand

I ended up going with the last approach based on the costing shown in this [Azure Pricing Calculator estimate](https://azure.com/e/38ccb2b0d20b48358113517def97cdb6) that i put together. In terms of pricing, the virtual machine, which is an Azure A0 instance weighs in at 0.75GBs of RAM and sports a single Intel Xeon E5-2630 v3 core with a price tag of $19.74 per month. Option two: running an always on container as an Azure Container Instance with 1GB of RAM and 1 vCPU would set us back $51.84 per month, with the last option of using Azure Functions to create and delete the containers on the same spec hardware coming in at $12.96 per month. It's also worth noting that Virtual Machines are billed per hour, while Azure Container Instances are billed per second.

#### Container

The first thing i needed to do is actually containerize the application, which was ridiculously easy. We can start with an open source base image that already had node and python configured and craft the following `Dockerfile`. Everyone's `Dockerfile` is going to look different, but nevertheless, this is what it took to containerize my application.

```ruby
FROM beevelop/nodejs-python:latest
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
CMD node src/index.js
```

Next i needed to build the Docker image and push it into a private Docker Hub repository.

```bash
docker run -t taylorgibb/simple-sync
docker push taylorgibb/simple-sync
```

### Creating a Service Principal

I needed this function to run under its own service principal. So the first thing i had to do was register a new application and service principal with the appropriate permissions. To do this, i needed two things, [openssl](http://gnuwin32.sourceforge.net/packages/openssl.htm)and the [Azure cli tools.](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest)

First we needed to generate a good `secret` to start with, openssl proved to be a useful tool to use for this.

```bash
openssl rand -base64 24
```

Now i can register my application in Azure Active Directory.

```bash
az ad app create --display-name simple-sync
                 --homepage http://developerhut.co.za
                 --identifier-uris http://developerhut.co.za
                 --password $SECRET
```
This returned an `application identifier` to me, which i used to create the service principal.

```bash
az ad create --id $APPLICATION_ID
```

The last step was creating a resource group and assigning a role to my newly created service principal. The `az account list` command will give me the subscription ID i need to do the role assignment.

```bash
az group create --location westeurope
                --name simple-sync

az account list

az role assignment create --assignee http://developerhut.co.za
                          --role Contributor
                          --scope /subscriptions/$SUBSCRIPTION_ID/resourceGroups/simple-sync
```

That was a lot of effort. Nevertheless, i now have a service principal that is constrained to the bounds of my resource group. In addition to better security, we also get better billing and peace of mind.

### The Functions

Next we needed to write a couple of Azure functions that coud create and delete our containers on a schedule. I had never written an Azure function before, but a few searches later and i was installing the [Azure Function Core Tools](https://github.com/Azure/azure-functions-core-tools)

```bash
npm install -g azure-function-core-tools
```

Once i had the tools installed, i needed to create a new Function App and then create the actual functions within the app. I am going to be creating a time based function using the JavaScript language option and will call my function `provision`, this is the first of the two functions i will create.

```bash
func init simple-functions
func new
func host start
```

I then needed to crack open the `index.js` file inside the `provision` directory and replace the boilerplate code with our own. My container is hosted in the Docker Hub registry, so you will notice that i pass in a `imageRegistryCredentials` parameter so that Azure knows where to get our container from. I am creating a Linux container in West Europe but the function is easy enough to change.

```javascript
module.exports = function (context) {
    const AZ = require('ms-rest-azure');
    const ACI = require('azure-arm-containerinstance');

    AZ.loginWithServicePrincipalSecret(
        process.env.AZURE_CLIENT_ID,
        process.env.AZURE_CLIENT_SECRET,
        process.env.AZURE_TENANT_ID,
        (err, credentials) => {
            if (err) {
                throw err;
        }
        let client = new ACI(credentials, process.env.AZURE_SUBSCRIPTION_ID);
        client.containerGroups.createOrUpdate('simple', 'simple-containers', {
            containers: [container],
            osType: 'Linux',
            location: 'West Europe',
            restartPolicy: 'never',
            imageRegistryCredentials: [{
                "server": "index.docker.io",
                "username": process.env.DOCKER_USERNAME,
                "password": process.env.DOCKER_PASSWORD}]
        }).then((r) => {
            context.done();
        }).catch((r) => {
            context.done();
        });
    });
 };
```

Next, i needed to run `npm init` in the `provision` folder so that npm would generate a `package.json` file. I could then added the two dependencies you see in the above code.

```
npm install --save azure-arm-containerinstance
npm install --save ms-rest-azure
```

I also needed to edit the cron expression in the `function.json` file. I tried a couple of online cron expression generators, but Azure didn't like the expressions that they generated. I found [this](https://codehollow.com/2017/02/azure-functions-time-trigger-cron-cheat-sheet) article very useful for crafting expressions. After modification, the trigger was set to fire daily, and looked as follows:

```javascript
{
  "disabled": false,
  "bindings": [
    {
      "name": "startTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "0 0 0 * * *"
    }
  ]
}
```

Finally, i follow the above steps again and create another function called `delete`. Just as above, i had to run `npm init` to initialize the project and then install the required modules via `npm` with the `--save` flag.  The contents of the `delete` function is below.

```javascript
module.exports = function (context) {
    const ACI   = require('azure-arm-containerinstance');
    const AZ    = require('ms-rest-azure');

    AZ.loginWithServicePrincipalSecret(
        process.env.AZURE_CLIENT_ID,
        process.env.AZURE_CLIENT_SECRET,
        process.env.AZURE_TENANT_ID,
        (err, credentials) => {
            if (err) {
                throw err;
            }
            let client = new ACI(credentials, process.env.AZURE_SUBSCRIPTION_ID);
            client.containerGroups.deleteMethod('simple', 'simple-containers').then((r) => {
                context.log('Delete completed', r);
            });
    });
};
```

I only wanted the  `delete` function to get executed 6 hours after the `provision` function had started the container, so it has a slightly different `function.json` definition too.

```javascript
{
  "disabled": false,
  "bindings": [
    {
      "name": "endTimer",
      "type": "timerTrigger",
      "direction": "in",
      "schedule": "0 0 6 * * *"
    }
  ]
}
```

At this point, i committed my code to a private Github repository

```bash
az storage account create --name simplestorage --location westeurope --resource-group simple-sync --sku Standard_LRS

az functionapp create --deployment-source-url https://github.com/taylorgibb/simple-sync
                      --resource-group simple-sync
                      --consumption-plan-location westeurope
                      --name simple-functions
                      --storage-account simplestorage
```

In the two functions above, i use environment variables to keep sensitive information from being committed to source control. By definition, environment variables, are configured in the environment itself and that means we need to add a few more things to Azure. The settings i added were generated in the first part of the article on creating a service principal, along with some fake Docker Hub credentials. It goes without saying that these values will need to be substituted with your own if you are following along.

```bash
az functionapp config appsettings set --name simple-functions
                                      --resource-group simple
                                      --settings AZURE_CLIENT_ID=XXX
                                                 AZURE_CLIENT_SECRET=XXX
                                                 AZURE_TENANT_ID=XXX
                                                 AZURE_SUBSCRIPTION_ID=XXX
                                                 DOCKER_USERNAME=XXX
                                                 DOCKER_PASSWORD=XXX
```

Now that all my config is complete, i used some nifty helper methods to mirror it onto my local machine so that i could test the functions locally in the future if i need to. When we run the below, it pulls all the settings into a special file called `local.settings.json` which lives in the root of your function app. The `local.settings.json` file is in the `.gitignore` by default and wont be committed to source control, keeping all your secrets safe.

```bash
func azure functionapp fetch-app-settings simple-functions
```

Thats pretty much all there was to it. At this point, i logged into the Azure portal and manually ran the `provision` function and verified that it created a new container instance, i then ran the `delete` function and ensured the container instance was removed. I ran into a couple of issues while making this, most notably with the Azure Function Core Tools there is a bug that prevents you from publishing functions from the command line if your function contains a `node_modules` folder. You can read more about that over [here](https://github.com/Azure/azure-functions-core-tools/issues/352).


text:
# Campfire Audio Andromeda sample 3
See [usage instructions](https://github.com/jaakkopasanen/AutoEq#usage) for more options and info.

### Parametric EQs
In case of using parametric equalizer, apply preamp of **-7.0dB** and build filters manually
with these parameters. The first 5 filters can be used independently.
When using independent subset of filters, apply preamp of **-5.9dB**.

| Type    | Fc       |    Q | Gain     |
|:--------|:---------|:-----|:---------|
| Peaking | 58 Hz    | 0.26 | -0.7 dB  |
| Peaking | 212 Hz   | 0.38 | -5.8 dB  |
| Peaking | 8624 Hz  | 0.23 | 10.7 dB  |
| Peaking | 15628 Hz | 2.08 | -14.3 dB |
| Peaking | 19155 Hz | 0.27 | -26.0 dB |
| Peaking | 1601 Hz  | 1.59 | -4.8 dB  |
| Peaking | 1940 Hz  | 0.6  | 2.9 dB   |
| Peaking | 8542 Hz  | 2.12 | -3.8 dB  |
| Peaking | 12031 Hz | 2.06 | 5.2 dB   |
| Peaking | 14403 Hz | 5.03 | -4.6 dB  |

### Fixed Band EQs
In case of using fixed band (also called graphic) equalizer, apply preamp of **-8.1dB**
(if available) and set gains manually with these parameters.

| Type    | Fc       |    Q | Gain     |
|:--------|:---------|:-----|:---------|
| Peaking | 31 Hz    | 1.41 | -1.1 dB  |
| Peaking | 62 Hz    | 1.41 | -2.0 dB  |
| Peaking | 125 Hz   | 1.41 | -4.6 dB  |
| Peaking | 250 Hz   | 1.41 | -5.3 dB  |
| Peaking | 500 Hz   | 1.41 | -2.4 dB  |
| Peaking | 1000 Hz  | 1.41 | 0.2 dB   |
| Peaking | 2000 Hz  | 1.41 | 2.2 dB   |
| Peaking | 4000 Hz  | 1.41 | 7.5 dB   |
| Peaking | 8000 Hz  | 1.41 | 6.2 dB   |
| Peaking | 16000 Hz | 1.41 | -30.5 dB |

### Graphs
![](./Campfire%20Audio%20Andromeda%20sample%203.png)

repository: inflextion/AutoEq

path: /results/crinacle/harman_in-ear_2017-1/Campfire Audio Andromeda sample 3/README.md

repo_name: inflextion/AutoEq


text:
1. What are the two values of the Boolean data type? How do you write them?

2. What are the three Boolean operators?

3. Write out the truth tables of each Boolean operator (that is, every possible
   combination of Boolean values for the operator and what they evaluate to).

4. What do the following expressions evaluate to?
  ```python
  (5 > 4) and (3 == 5)
  not (5 > 4)
  (5 > 4) or (3 == 5)
  not ((5 > 4) or (3 == 5))
  (True and True) and (True == False)
  (not False) or (not True)
  ```

5. What are the six comparison operators?

6. What is the difference between the equal to operator and the assignment
   operator?

7. Explain what a condition is and where you would use one.

8. Identify the three blocks in this code:
  ```
  spam = 0
  if spam == 10:
    print('eggs')
  if spam > 5:
    print('bacon')
  else:
  print('ham')
  print('spam')
  print('spam')
  ```

9. Write code that prints Hello if 1 is stored in `spam`, prints Howdy if 2 is
   stored in `spam`, and prints Greetings!  if anything else is stored in
   `spam`.

10. What can you press if your program is stuck in an infinite loop?

11. What is the difference between break and continue?

12. What is the difference between `range(10)`, `range(0, 10)`, and `range(0,
    10, 1)` in a for loop?

13. Write a short program that prints the numbers 1 to 10 using a for loop. Then
    write an equivalent program that prints the numbers 1 to 10 using a while
    loop.

14. If you had a function named `bacon()` inside a module named `spam`, how would
    you call it after importing `spam`?

Extra credit: Look up the `round()` and `abs()` functions on the Internet, and
find out what they do. Experiment with them in the interactive shell..

repository: reedcwilson/programming-fundamentals

repo_name: reedcwilson/programming-fundamentals


text:
# WalkingPal

![](Images/WalkingIcon128x640.png)

WalkingPal is your activity tracker when you need to track your walking, jogging or runnig activity with easy and sample interface.

It track your location and calculate your avg. speed and the distance of your activity.

# Functionality

WalkingPal will show user current location on map and by pressing start button WalkingPal will start to track user locations

![](Images/ScreenShot1.png)

When user doing an activity there are two options to choose:

1: Pasue activity by pressing the pause button and continue activity by pressing it again.

2: Stop activity by swipe the left botton to the right, it will finish the tracking activity.

Perfectly balanced

By ending the activity WalkingPal will show user the tracked path which passed.

![](Images/ScreenShot4.png)

And by tapping the Activity Log button in tab bar user can check all of activities.

![](Images/ScreenShot2.png)

# Contact me

for any support or feedback you can reach me by<EMAIL_ADDRESS>
Thank you so much!


text:
# Feminism in Hollywood

This project was done as part of the EE-558 (A Network Tour for Data Science) class, and it tries to answer the following problem : "Does 'Feminism' sell in Hollywood ?", using the Kaggle TMDB dataset.

This repository is the submission of Team 31, composed of Othman BENCHEKROUN, Sinan BURSA, Sinan GÖKÇE and Dilara GÜNAY.

## Dependencies

Use the package manager [pip](https://pip.pypa.io/en/stable/) to install the following dependencies that were not used in any of the milestones:

```bash
pip install requests
pip install tmdbsimple
```

## Files & Folders

- milestones : as the name indicates, this folder contains all the notebooks that we submitted during the semester. It also contains the analysis of the new network we have made for the project.
- data : this folder contains our database as well as the files that we created in order to save our elements.
- project : this is the folder that contains the most important files for the project per se. The Bechdel_Retrieval notebook was used to complement our database with the Bechdel score of each movie. The Bechdel_Analysis notebook was used to understand a bit more about the Bechdel data and treat it to only keep 2 variables: either the movie passes the test, or it doesn't. The Project_Discovery notebook was used to implement the approach we wanted to use in order to get meaningful information from our network. These are the steps that were used later on. Finally, the .gexf files were used visualize our data.
- adjacencies : this folder contains the 3 different types of adjacencies that we constructed for the project in 3 different folders with their respective feature and adjacency csv outputs and .gexf output for Gephi analysis
- tests : this folder contains 4 different signals for each different adjacency that was constructed in the previously described adjacencies folder

## License
[MIT](https://choosealicense.com/licenses/mit/)


text:
## Installation
http://doc.fedml.ai/#/installation-distributed-computing

## Run Experiments
Note please tune hyper-parameters accordingly.
You can refer the hyper-parameter suggestions at `FedML/benchmark/README.md`), but this may not be the optimal.

# Federated EMNIST experiments
```
sh run_fedopt_distributed_pytorch.sh 10 10 1 4 cnn 100 1 20 0.1 femnist "./../../../data/FederatedEMNIST/datasets" sgd 0

```

repository: NeutrinoLiu/FedML

repo_name: NeutrinoLiu/FedML


text:
# SIMPLE STOPWATCH

## A basic Javascript stopwatch which allows you to count up from zero with start, reset and stop controls.

## 💻Tech Stack

![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

### How to use:

---

- Download or clone the repository

```
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
```

- Go to the directory
- Run the index.html file
- Start the stopwatch

DEFAULT VIEW

![stopwatch3](https://user-images.githubusercontent.com/56999749/124381007-da1aba80-dcdd-11eb-8b0a-630090aa9ac8.JPG)

PREVIEW OF THE STOP BUTTON

![stopwatch](https://user-images.githubusercontent.com/56999749/124381017-eb63c700-dcdd-11eb-9a40-182a13060c8e.JPG)

repository: DilshadNoshad/Web-dev-mini-projects

branch_name: refs/heads/main

repo_name: DilshadNoshad/Web-dev-mini-projects


text:
# Machine based methods to verify and prove Information Inequalities

```@contents
Pages = ["oxitip.md"]
```
## Machine based Information Inequalities Prover
TBD
Discuss the framework, various known tools ITIP, XiTIP, oXiTiP, AITIP

Limitations (verifier vs proof etc.,)

## Basic concepts of ITIP based methods
Yeung's framework, entropic TBD.

### Extend usability of algorithms

Some algorithms require the matrix to have a specific structure in order to be used. TBD.

### Improve numerical stability

Even if the algorithms theoretically work

gha_language: Julia


text:
# A Problem List - Template
[![Travis](https://img.shields.io/badge/language-C++-green.svg)]()

>   From 2022-03-15 23:21 to the present

---

## Legend

| Legend | Description                   |
| ------ | ----------------------------- |
| *      | Tried multiple times          |
| ?      | Might solve after many trials |
| y      | Solved after many practices   |

## Problem List

| *?y  | Title | Tag  | Notes |
| ---- | ----- | ---- | ----- |
|      |       |      |       |

repository: Aden-Q/LeetCode

repo_name: Aden-Q/LeetCode


text:
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
[![LinkedIn][linkedin-shield]][linkedin-url]

Powerdale Excel Tools

    Tools for Eneco made by Lorenzo Bauero

    I made an installation Guide in form of an powerpoint aswell.(Python install guide etc).

     If you don't know how to get the tool running. Please use the Powerpoint

  Table of Contents

      About The Project

Built With

      Getting Started

Prerequisites

Installation

Usage

Contributing

License

Contact

Acknowledgements

Issues

## About The Project

![Product Name Screen Shot][product-screenshot]

Its an easy to use tool which read CSV files generated by the Database and checks them or errors.

### Built With

This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the
acknowledgements section. Here are a few examples.

* [HTMl](https://wiki.selfhtml.org/wiki/HTML)
* [CSS](https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/CSS_basics)
* [Javascript](https://developer.mozilla.org/de/docs/Web/JavaScript)
* [Python](https://www.python.org/)

## Getting Started

There are a few packages that have to be installed before the tool can be used. But doing that is very easy!

### Prerequisites

This is an example of how to list things you need to use the software and how to install them.

* pip
  ```sh
  pip install openpyxl pandas unicodecsv pywebview
  ```

### Installation

1. Download [Git Bash](https://gitforwindows.org/)
2. Clone the repo
   ```sh
   git clone https://github.com/lorenzPowedale/Flask---Excel-Tools.git
   ```
3. Install pip packages
   ```sh
   pip install openpyxl pandas unicodecsv pywebview
   ```

## Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos
work well in this space. You may also link to more resources.

1. Run the python file app.py
   ```sh
   python app.py
   ```
2. Select the tool you want to use
   ![Pitain][pitain-screenshot]

3. Paste in the path (if this is not working see [Issues](#issues))
   ![Path][path-screenshot]

3. Be happy and enjoy!
   ![Path][success-screenshot]

4. If you still have trouble I made a tutorial
   [Youtube Video](https://youtu.be/ziYiXqUGozs)

## Contributing

If you want to change anything to the project, e.g. add a tool or fix a bug.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3.  Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## License

Distributed under the MIT License. See `LICENSE` for more information.

## Contact

Lorenz Bazer - [@lorenzbauer_](https://www.instagram.com/lorenzbauer_/) -<EMAIL_ADDRESS>/
<EMAIL_ADDRESS>
Project
Link: [https://github.com/lorenzPowedale/Flask---Excel-Tools](https://github.com/lorenzPowedale/Flask---Excel-Tools)

## Acknowledgements

* [ReadMe Template](https://github.com/othneildrew/Best-README-Template)
* [Simple Sidebar Template](https://startbootstrap.com/template/simple-sidebar)
* [Guy who answered StackOverflow](https://stackoverflow.com/users/8479387/tlentali)

## Issues

On Mac Terminal there is an Issue with the embeded browser Window.

There is a workaround, it is very easy and doesn't take much time. It's just less comfortable

You have to start the app.py file and then you have to start a WebBrowser (e.g. Google Chrome, Firefox, Edge etc.) and
open the link http://localhost:5000 manually.

This has exactly the same effect as the embeded window!!!

[contributors-shield]: https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white

[contributors-url]: https://github.com/lorenzPowedale

[forks-shield]: https://img.shields.io/github/forks/lorenzPowedale/Flask---Excel-Tools.svg?style=for-the-badge

[forks-url]: https://github.com/lorenzPowedale/Flask---Excel-Tools/network/members

[stars-shield]: https://img.shields.io/github/stars/lorenzPowedale/Flask---Excel-Tools.svg?style=for-the-badge

[stars-url]: https://github.com/lorenzPowedale/Flask---Excel-Tools/stargazers

[issues-shield]: https://img.shields.io/github/issues/lorenzPowedale/Flask---Excel-Tools.svg?style=for-the-badge

[issues-url]: https://github.com/lorenzPowedale/Flask---Excel-Tools/issues

[license-shield]: https://img.shields.io/github/license/lorenzPowedale/Flask---Excel-Tools.svg?style=for-the-badge

[license-url]: https://github.com/lorenzPowedale/Flask---Excel-Tools/blob/master/LICENSE.txt

[linkedin-shield]: https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white

[linkedin-url]: https://www.instagram.com/lorenzbauer_/

[product-screenshot]: ../static/assets/img.png

[pitain-screenshot]: ../static/assets/pitain.png

[success-screenshot]: ../static/assets/success.png

[path-screenshot]: ../static/assets/path.png

repository: lorenzPowedale/Flask---Excel-Tools

repo_name: lorenzPowedale/Flask---Excel-Tools


text:
## Indiviuals Visiualization
### Basic Structure
#### UI
<!--![UI structure](component-view.png)-->

The application is build with lively components. The components are stuck together through the components templates.

#### Backend
![Basic Class Diagram](2020-04-07-class-diagram.drawio)

The applications front-end view can approximately be mirrored in the backend structure of the classes, since every component has its template, that represents its front-end as well as its implementation class, that contains business logic in the back-end.

### How To Integrate a new view into the application
#### Step 1 - Create a bp2019-{your-prototype}-widget component
Use the [component creator](https://lively-kernel.org/lively4/BP2019RH1/components/index.md) of our components folder to create a lively component that contains the view of your prototype, like `group-chaining-widget` contains the view of the group chaining prototype. When created, the components folder should contain two more files

* `bp2019-{your-prototype}-widget.js`
* `bp2019-{your-prototype}-widget.html`

Double check, that the id of the template tag in the `.html` file matches the file name. It is also best practice to have a root `<div>` inside the root template tag with an id, that is unique and lets your component easily be recognized when examining the DOM. It could be something like `id="bp2019-{your-prototype}-root-container"`.

You could get rid of all the code in the class generated in the `.js` file expect of the `async initialize`.

Since lively includes our components folder in its search for components, lively should be familiar with your component and you can proceed to integrate your view in the application. Should lively complain later on, that a component with that name can not be found:

* reset the template cache (workspace `lively.components.resetTemplatePathCache()`)
* reload lively
* execute the script on top of the [individualsAsDots.md](https://lively-kernel.org/lively4/BP2019RH1/prototypes/individualsAsDots.md) by loading the file once.

#### Step 2 - Integrate component in front-end
You can use the `id` of your template as a new HTML Tag in the [`individual-visualization.html`](https://lively-kernel.org/lively4/BP2019RH1/components/individual-visualization.html). Just check out how the group-chaining-prototype is integrated in the individual-visualization.html, your code should look similar.

To register your view in the tab-view of the root application, you have to specify a button as well as a tab content. The content will be your newly generated component tag and the button will be a button that references the content. Please make sure that the button-id matches your content-div-id.

```html
 <tab-widget id="canvas-tab-widget">
    <div id="tab-buttons" slot="tab-buttons" class="p-1">
      <div data-content-id="group-chaining" class="tab">Group-Chain</div>
      <div data-content-id="bp2019-{your-prototype}" class="tab">{Your Prototype}</div>
    </div>
    <div id="tab-contents" slot="tab-contents" class="p-1">
      <group-chaining-widget id="group-chaining"></group-chaining-widget>
      <bp2019-{your-prototype}-widget id="bp2019-{your-prototype}"></bp2019-{your-prototype}-widget>
    </div>
  </tab-widget>
```

In the implementation of the root component, [`individuals-visualization.js`](https://lively-kernel.org/lively4/BP2019RH1/components/individual-visualization.js), you can see that your component gets automatically queried and taken into account when it comes to initializing the application with a selected data set.

Because of that, once you open the root application / root component, your new view can be seen in the tab view, but some errors may occur, since the implementation of your component does not support the interfaces that the root application needs to provide your component with data etc.

Notice that once the root app has queried the DOM element of your component, it automatically holds an instance of the class that is implemented in the `bp2019-{your-prototype}-widget.js` file. With that is has access to its interface.

### Step 3 - Integrate component in back-end
The interface a new prototype view - which is really a canvas-widget, to stay in the naming scheme - needs, is specified in the class diagram, mentioned prior in this file. So you need to implement these in your `bp2019-{your-prototype}-widget.js`. To gain a better understanding what the purpose of the interface is, you could have a look in the existing [`group-chaining-widget.js`](https://lively-kernel.org/lively4/BP2019RH1/components/group-chaining-widget.js). It could also help to take a look at the following sequence diagram which showcases a typical use case of the application. Also, you can check out all the existing interface assertions in [`interfaces.js`](https://lively-kernel.org/lively4/BP2019RH1/src/internal/individuals-as-points/common/interfaces.js). We are using those methods/assertions to check wether an Action-Object or an Root-Application-Object etc. matches the required interface.

Most of the code which is currently in the .md-file of you prototype will be integrated in your new bp2019-{your-prototype}-widget.js. Most of the code which is currently placed after the data fetch will move to the initialize() of your new component. E.g.

AVFParser.loadCovidData().then( data => {
  YOUR-MAIN-DRIVER-CODE
})

Most of the YOUR-MAIN-DRIVER-CODE will move to the initialize of the new component.

![Sequence Diagram of initializing the data and triggering actions](2020-04-07-sequence-diagram.drawio)

### Step 4 - Build an control menu with action capabilities

#### Step 4.1 Build the control menu wrapper
The tab of your prototype is quite empty at the moment. We agreed to include a control panel on the left and a canvas on the right of each view at a minimum. This needs to be included in your template `.html` file. We recommend to wrap the controls in another component, which serves then as the control widget specifically for your canvas widget. This component is responsible for injecting data into the action widgets.

So create a `bp2019-{your-prototype}-control-widget` with the component creator and integrate it in your canvas widget, as you integrated the canvas widget in the root application (Steps 2-3).

Concerning both the `bp2019-{your-prototype}-control-widget.js` as well as `bp2019-{your-prototype}-widget.js`:

Make sure the control-widgets gets your canvas as a listener after initializing, so actions triggered  (if you implemented the interface properly) in the action menus, can be forwarded from the control-widget to the canvas-widget. Since your canvas widget should hold a listener array itself since step 3 (if you implemented the interface properly), an action can be forwarded to the root application. This should happen only if the action is globally applicable.

Concerning `bp2019-{your-prototype}-control-widget.html`:

You may have noticed the tab widget in the root application as an widget that was build by us, and you may notice the same tab widget used in the [`group-chaining-control-widget.html`](https://lively-kernel.org/lively4/BP2019RH1/components/group-chaining-control-widget.html) to manage the various action-widgets. It is recommended to also wrap your action-widgets in a tab view - which is done exactly the way you see in the existing `group-chaining-control-widget.html`, since this way the control menu stays slim and the UI is consistent across different canvas-widgets.

Due to the reusability of components we can use the same tab-view we used in the root application since this component only takes care of displaying tab content when the tab button is clicked.

#### Step 4.2 Build the action widgets for the control menu
Once you have a wrapper component as the control menu as well as the managing tab view in its template, you can fill the control widget with action widgets.

Integrate those into the tab view of the `bp2019-{your-prototype}-control-widget.html` the same way you integrated your canvas widget in the tab view of the root application. (Step 2)

Please make sure the action widgets get your control widget as a listener after initialization, so that actions triggered in the action menu can be received by the control-widget. Also make sure that on the `initializeAfterDataLoad()` call in the control-widget, every action widget you register, gets filled with the correct data. This has to be done in the control-widget, since this makes the action-widgets reusable across different applications. How this is done is explained in Step 5.

Feel free to create new action widgets (Step 1 and 2) or modify the existing ones if they lack functionality. Please make sure that the widgets implement the interfaces specified in the class diagram.

### Step 5 - Make use of helper singletons
There exist two helper singletons for achieving data and color schema consistency across the application.

* [`color-store`](https://lively-kernel.org/lively4/BP2019RH1/src/internal/individuals-as-points/common/color-store.js)
* [`data-processor`](https://lively-kernel.org/lively4/BP2019RH1/src/internal/individuals-as-points/common/data-processor.js)

Those are singletons that can be used the following way:

```javascript
import ColorStore from '../src/internal/individuals-as-points/common/color-store.js'
import DataProcessor from '../src/internal/individuals-as-points/common/data-processor.js'

let attributesForGrouping = DataProcessor.getAllAttributes();
let colorsForAttributeValues = ColorStore.getAllColorsForAttribute(attributesForGrouping[0]);
```

So whenever you have to deal with filling a menu with attributes or values that have to do with the global coloring or the global data scheme, use the API of these classes. This should mostly be the case in the control-widgets, since this fills the control menus with data.

While working with individuals, we've come up with the need to group values for a specific attribute, for example `age`. The values for age are bucketed. These buckets, respectively the labels for the buckets can be defined in the data processor and are returned by the data processor, when attributes or values for attributes are requested through the API.

So what if you want to know - maybe to get the color of an individual - in which bucket he is / which value this attribute has for the individual, provided its raw value?

You can use the API of the data-processor to query exact this information:

```javascript
let indiviualActualValue = DataProcessor.getUniqueValueFromIndividual(individual, currentAttribute)
let colorString = ColorStore.getColorForValue(currentAttribute, indiviualActualValue);
```

### Coding Standards
It would be great if you could put every helper class that your widgets need (mostly the canvas-widget) in a subfolder specific to your view in the [`individual-as-points`](https://lively-kernel.org/lively4/BP2019RH1/src/internal/individuals-as-points/) folder. This way the application stays nicely organized.

We have taken great care to write clean code when implementing the architectural framework. Most of functions are small and we focused on readability of the code. You can do whatever you want when programming on your own prototype-component, but whenever you write code which affects all other prototypes or should be reusable we encourage you to make the code as clean as possible. To have some standards across all reusable components, we suggest the following schema:
* use this template to mark a section of public functions:

  // ------------------------------------------
  // Public Methods
  // ------------------------------------------

* use this template to mark a section of private functions:

  // ------------------------------------------
  // Private Methods
  // ------------------------------------------

* prefix all private functions with an underscore, e.g _registerButtonCallback()

* when possible, *don't* use semicolons to mark the end of statements and expressions


text:
# Tests

Add a small ingress here

## List of Tests
* [Accessibility (Pa11y)](pa11y.md)
* [Accessibility (Lighthouse)](google-lighthouse-a11y.md)
* [Website performance (SiteSpeed)](sitespeed.md)
* [Website performance (Lighthouse)](google-lighthouse-performance.md)
* [Best practice on Web (Lighthouse)](google-lighthouse-best-practice.md)
* [Progressive web apps (Lighthouse)](google-lighthouse-pwa.md)
* [SEO best practise (Lighthouse)](google-lighthouse-seo.md)
* [Validate 404 page (by default checks for Swedish text, though)](page-not-found.md)
* [Validate HTML (W3C)](html.md)
* [Validate CSS (W3C)](css.md)
* [Security, data-protecting & Integrity (Webbkoll)](webbkoll.md)
* [Frontend quality (YellowLab Tools)](yellowlab.md)
* [Energy Efficiency](energy-efficiency.md)
* [Standard files](standard.md)
* [HTTP and Network](http.md)
* [Tracking & Integrity](tracking.md)
* [Email (Beta)](email.md)
* [Software (Alpha)](software.md)
* [Accessibility Statement (Alpha)](a11y-statement.md)

## Code Quality

Add a small ingress here.
TODO: Why do we have this and what good does it do?

### General Regression Test
* [![CodeQL (Security and Code Quality)](https://github.com/Webperf-se/webperf_core/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/codeql-analysis.yml)
* [![Regression Test - Verify Translation(s)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-translations.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-translations.yml)

### Test Specifict Regression Tests
* [![Regression Test - Google Lighthouse Based Test(s)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-google-lighthouse-based.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-google-lighthouse-based.yml)
* [![Regression Test - 404 (Page not Found) Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-404.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-404.yml)
* [![Regression Test - HTML Validation Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-html.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-html.yml)
* [![Regression Test - CSS Validation Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-css.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-css.yml)
* [![Regression Test - Integrity & Security (Webbkoll) Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-webbkoll.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-webbkoll.yml)
* [![Regression Test - Quality on frontend (Yellow Lab Tools) Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-ylt.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-ylt.yml)
* [![Regression Test - Performance (Sitespeed.io) Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-sitespeed.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-sitespeed.yml)
* [![Regression Test - Standard files Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-standard-files.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-standard-files.yml)
* [![Regression Test - HTTP & Network Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-http.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-http.yml)
* [![Regression Test - Tracking & Integrity test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-tracking.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-tracking.yml)
* [![Regression Test - Accessibility (Pa11y) Test](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-pa11y.yml/badge.svg)](https://github.com/Webperf-se/webperf_core/actions/workflows/regression-test-pa11y.yml)


text:
---
title: "Getting started with Nuxt.js"
date: "2020-06-05"
description: "This tutorial is all about, what Nuxt.js in detail is, which features you are getting, and how you can create your first project"
image: "getting-started-with-nuxt.jpg"
author:
  twitter: "webnoobcodes"
  name: "Mario Laurich"
---

If you're building applications with Vue.js, you've probably heard of Nuxt.js. Vue already makes the development of JavaScript applications more convenient, but what's the idea behind Nuxt.js?

It's a **progressive framework based on Vue.js**. It simplifies the development of universal or single-page apps.

And this tutorial is all about, what Nuxt.js in detail is, which features you are getting, and how you can create your first project. Finally, you get an overview of the files and folder structure. There are some differences to a regular Vue.js project.

Do you prefer to watch a video about this topic?

👉 [Nuxt JS - First Look](https://youtu.be/fqGnxrWQUoY)

---

## What is Nuxt.js

Nuxt is based on Vue.js official libraries. That means on Vue, the Vue Router, Vuex. And also on powerful development tools like Webpack or Babel, for example. It extends Vue.js by some helpful features, and only with a few extra kilobytes added to your JavaScript files.

Nuxt makes creating universal apps easier.

### What is a universal app?

A universal app can execute on both the client and the server-side.
If you create a single page application with Vue.js, you have a lot of benefits.

For example, you can make very *snappy* UIs that updates fast. But, and this is a problem, Google and other search engines struggle with them because there's no content initially on the page to crawl for SEO purposes.

All the content is rendered with JavaScript after the fact.

And with a universal app, you have instead of an index.html without content, a preloaded app on a web server that sends rendered HTML for every route to speed up load times and improve SEO by making it easier for search engines to crawl the page.

The next benefit is you can prerender your app to a static website. That's, in my opinion, the most significant innovation. You can create with the command `nuxt generate` a completely static version of your application.

```bash
npm run generate
```

It generates an HTML file for every route, and you have **all the benefits** of a universal app. But the difference is that you don't need a webserver anymore. Everything gets generated during the deployment period.

It's mighty because you get the benefits of universal rendering without the need for a server. You can host your app on GitHub Pages or a cloud service like Google Firebase. You could even host your website with Google Drive, without paying a single coin.

*You are entirely free*.

---

## Create a new Nuxt.js project

You know we can create a new project with `vue create` and then the project-name if you use the vue cli service.

```bash
vue create project-name
```

But if you want to create a Nuxt project, we have to use another tool - `npx`.
The difference to npm is that npx is a tool to execute node.js packages. npm is only a manager for download and installing node packages.
And it's shipped by default since node package manager in version 5, and you don't have to install it separately.

But if you don't have it for some reason, you can install it with `npm install -g npx`, -g to install it globally.

```bash
npm install -g npx
```

Finally, you can create a new project with npx, and there is a scaffolding tool you can use, created by the Nuxt team, `create-nuxt-app`,
followed by a project name of your choice.

```bash
npx create-nuxt-app projectname
```

Now you have to choose different options, for example, setting which UI Framework you want to use or installing an additional module, like PWA or Axios. You can change everything later; It's totally up to you.

Generally, I highly recommend that if you start with new things, **keep it simple** and catch up with all the other stuff like test and UI frameworks later when you feel comfortable.

After that process, you can switch to the new project folder and run it with `npm run dev`, instead of serve.

```bash
npm run dev
```

## Project Overview

If you look in your new directory structure for the first time, you will immediately notice that you can find a lot of new stuff. For comparison, a regular Vue project looks more comfortable at first. But all of this is justified because there are also some beneficial new patterns with all that stuff.

First, you have the assets folder. It's entirely the same as with Vue. You can store here all your static assets, your images, for example. But also uncompiled SCSS files, which you are using in the whole application. Also, the components directory sounds familiar. The name suggests, here is the place for all your components. For all? Not entirely. You have here only all the reusable components that you can use in your whole application. Components for the layout and pages have their own directories.

In the layouts folder is already a `default.vue` file with a template and some CSS definitions. New is the `<nuxt />` tag

```html
<template>
  <div class="container">
    <nuxt />
  </div>
</template>
```

It's a component provided by Nuxt, which renders the current route of your application. You can compare it to the router view component.

It's a fantastic pattern, in my opinion, because you can use more than one layout. For example, if you have a blog besides your main website, you can create for each part of your site, different designs based on these layout files. Distinct layouts for mobile and desktop it's also possible. **It's a powerful pattern**.

It's also the place where you can use a main navigation, a sidebar or the footer, entirely components, which are used by all routes of your application.

Next, we have the middleware folder.

**Middlewares** lets you define custom functions that can be run *before rendering* a page or a group of pages. Also importantly, the middleware has access to the context, which provides additional objects and params from your application.

As an example, you could evaluate the user agent according to the keyword `mobile` and use a different layout depending on the case. The result is then saved in the context so that it can be used later.

```javascript
export default function(context) {
  let userAgent = context.req.headers['user-agent'];
  context.isMobile = /mobile/i.test(userAgent)
}
```

You have here also access to the Vuex store and the Vue Router.
*That's amazing*. You can create a navigation guard, where you can check an authentication status before the requested route is delivered.

You can do here a lot of great stuff. Very powerful.

The **pages directory** contains your application views and routes.
Nuxt reads all the .vue files inside this directory and creates the application router automatically.

And Nuxt provides for each component a bunch of additional attributes you can use. For example, which layout you want to use if you have some.
Or you can also use here the head attribute to define a custom title, description or meta tags for this page, and so on.
Nuxt uses here the plugin `vue-meta` for the head attribute, which is also available for a regular Vue.js project.

```javascript
export default {
  head () {
    return {
      title: 'webnoob',
      meta: [
        { hid: 'description', name: 'description', content: '...' }
      ]
    }
  }
}
```

The **plugins folder** is the place where you can set up additional libraries like font-awesome, for example. But you can also create your reusable pieces of JavaScript code. Register components globally and to inject functions or constants could also be a possibility.

As an example, you can set up a new filter for displaying a date. If you register this plugin in your `nuxt.config.js` file, then you can use it easily in your templates with `{{ date | formatdate }}`.

```javascript
import Vue from "vue";

Vue.filter("formatdate", function(value) {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  const today  = new Date(value);

  return today.toLocaleDateString("en-US", options);
});
```

The **static directory** is directly mapped to the root folder from your application. So that's the place for your robot or sitemap files and so on.

The **store directory** contains your Vuex store files and comes with Nuxt.js out of the box but is disabled by default. Creating a javascript file in this directory enables the store. Nuxt.js lets you decide between 2 store modes at this time. The first one is with the `index.js` file, the classic way, which is also deprecated. So I highly recommend using the second mode with unique names, like `todo.js` or `blog.js`, which gets transferred to the Vuex namespace modules.

The **nuxt.config.js** file is the control center of your entire application.
You can change the mode, from universal to single page application and back. You are entirely free to change that on any time.

```javascript
mode: 'universal',
```

But keep in mind, if you are using the `spa` mode, you can't use server-side rendering or any other special server handling.

Furthermore, you have the default set up from the page head, which you can customize with additional meta tags or external resources like Google Fonts.

```javascript
head: {
  title: process.env.npm_package_name || '',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
  ],
  link: [
    { rel: 'icon', type: 'image/png', href: '/favicon.ico' }
  ],
},
```

Nuxt gives you out of the box a loading progress bar component that's shown between routes. You can customize it, disable it, or create your own. Excellent feature, in my opinion.

```javascript
loading: { color: '#fff' },
```

Below you can register additional global CSS files, plugins and modules.

```javascript
css: [
  { src<EMAIL_ADDRESS>}
],
plugins: [
  { src: '~/plugins/font-awesome' },
  { src: '~/plugins/format-date' }
],
modules: [
  '@nuxtjs/pwa',
],
```

## Conclusion

You have probably already noticed that we don't have here a `main.js` file or an App root component, right?

Well, *you don't need it*. Each component in the pages directory is basically a root component from a specific route. And the fantastic thing is you can for each route set up a different layout if you want.

Additional libraries and other javascript pieces, to register global components and other stuff, can you set up as a plugin.
To me, it all seems well organized and tidy.

Now it's your turn. Create your first Nuxt project today and play around with the new possibilities.
And if you want to see more, I already have a video tutorial about how you can create distinct layouts for mobile and desktop.

👉 [Nuxt JS - Distinct Layouts](https://youtu.be/xh_OrVwgh4M)

gha_language: Vue


text:
# seq
Simple Dockerfile base for rna/whole exome seq analysis using pachyderm.

# Available tools
- [x] [bwa](https://github.com/lh3/bwa)
- [x] [picard](https://github.com/broadinstitute/picard)
- [x] [fastqc](http://www.bioinformatics.babraham.ac.uk/projects/fastqc/)
- [x] [trimmomatic](http://www.usadellab.org/cms/?page=trimmomatic)
- [x] [cnvkit](https://github.com/etal/cnvkit)
- [x] [GATK](https://software.broadinstitute.org/gatk)

repository: fjukstad/seq

repo_name: fjukstad/seq