text:
---
layout: layout-basic.html
title: Write your tests
order: 7
tags:
  - develop
---

::: section header
# {{ title }}
:::

::: section
Let's write tests for `pfe-cool-element`.

We rely on a few tools to ensure our element is reliable in production:

1.  [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/), built and maintained by the [Modern Web](https://modern-web.dev) team, makes testing easy. All we have to do is create a new test file, provide example markup and write some tests.
2.  We'll use the [Chai Assertion Library](http://chaijs.com/api/assert/) to make sure our tests pass since Mocha and Chai are both included in Web Test Runner. Additional [Web Component specific test helpers](https://open-wc.org/docs/testing/helpers/) are also available.

## Web Test Runner

If you followed the [Prerequisites](/docs/develop/setup/#prerequisites) in [Setup](/docs/develop/setup), your setup should already be done.

### Test Setup

In the root of the element, there's a `/test` directory with an `pfe-cool-element.spec.js` file. This file will be where we add all of our tests.

Let's add four stubs for the functionality we need to test in our test file:

```javascript
// Import testing helpers. For more information check out:
// https://open-wc.org/docs/testing/helpers/
import { expect, elementUpdated } from<EMAIL_ADDRESS>
// Import our custom fixture wrapper. This allows us to run tests
// in React and Vue as well as a normal fixture.
import { createFixture } from '../../../test/utils/create-fixture.js';

// Import the element we're testing.
import '../dist/pfe-cool-element';

// One element, defined here, is used
// in multiple tests. It's torn down and recreated each time.
const element =
  `<pfe-cool-element photo-url="https://avatars2.githubusercontent.com/u/330256?s=400&u=de56919e816dc9f821469c2f86174f29141a896e&v=4">
    Kyle Buchanan
   </pfe-cool-element>
   `;

describe("<pfe-cool-element>", () => {

  it("it should upgrade", async () => {
    const el = await createFixture(element);

    expect(el).to.be.an.instanceOf(
      customElements.get("pfe-cool-element"),
      'pfe-cool-element should be an instance of PfeCoolElement'
    );
  });

  it('should set a username from the light DOM', async () => {

  });

  it('should allow a user to follow a profile', async () => {

  });

  it('should set the state to follow if the following attribute is present', async () => {

  });

  it('should set a profile pic from the photo-url attribute', async () => {

  });

});
```

Note that we using `import '../dist/pfe-cool-element';` to load our element definition to make sure we're testing the true source of our element instead of the transpiled version.

You'll also notice the `createFixture(element)` function. A [test fixture](https://open-wc.org/docs/testing/helpers/#test-fixtures) renders a piece of HTML and injects into the DOM so that you can test the behavior of your component. It returns the first dom element from the template so that you can interact with it if needed. For example you can call functions, look up DOM nodes or inspect the rendered HTML.

Test fixtures are async to ensure rendering is properly completed.

By using `createFixture()`, separate instances of tests that use a React or Vue wrapper are automatically created at run time. This allows us to easy test our elements within a React or Vue context.

Now that our setup is complete, we can start building our tests.

### Test Cases

Let's build out the 'pfe-cool-element' tests. We'll use fixtures and `querySelector` to grab our element and include DOM API methods to interact with what we're testing.

Here is the full JavaScript code:

```javascript
// Import testing helpers. For more information check out:
// https://open-wc.org/docs/testing/helpers/
import { expect, elementUpdated } from<EMAIL_ADDRESS>
// Import our custom fixture wrapper. This allows us to run tests
// in React and Vue as well as a normal fixture.
import { createFixture } from '../../../test/utils/create-fixture.js';

// Import the element we're testing.
import '../dist/pfe-cool-element';

// One element, defined here, is used
// in multiple tests. It's torn down and recreated each time.
const element =
  `<pfe-cool-element photo-url="https://avatars2.githubusercontent.com/u/330256?s=400&u=de56919e816dc9f821469c2f86174f29141a896e&v=4">
    Kyle Buchanan
   </pfe-cool-element>
   `;

describe("<pfe-cool-element>", () => {

    it("it should upgrade", async () => {
      const el = await createFixture(element);

      expect(el).to.be.an.instanceOf(
        customElements.get("pfe-cool-element"),
        'pfe-cool-element should be an instance of PfeCoolElement'
      );
    });

    it('should set a username from the light DOM', async () => {
      const el = await createFixture(element);

      // Grab the text content from the light DOM and trim off any extra white space.
      const elementLightDOMContent = el.textContent.trim();
      const shadowRoot = el.shadowRoot;

      // Grab the text content from the slot and trim off any extra white space.
      const slotContent = shadowRoot.querySelector('slot').assignedNodes()[0].textContent.trim();

      // Make sure the slot text matches the light DOM text.
      expect(slotContent).to.equal(elementLightDOMContent);
    });

    it('should allow a user to follow a profile', async () => {
      const el = await createFixture(element);
      // Click the button.
      el.button.click();

      // Make sure the follow attribute is now updated.
      expect(el.hasAttribute("follow")).to.be.true;
      // Make sure the text is updated to reflect the "unfollowed" state.
      expect(el.button.textContent).to.equal("Unfollow");

      // Click the button again.
      el.button.click();

      // Make sure the follow attribute is updated.
      expect(el.hasAttribute("follow")).to.be.false;
      // Make sure the text is updated to reflect the "follow" state.
      expect(el.button.textContent).to.equal("Follow");

    });

    it('should set the state to follow if the following attribute is present', async () => {
      const el = await createFixture(element);

      // Manually add the follow attribute.
      el.setAttribute("follow", "");

      // Wait for the element to be done updating.
      // This isn't really necessary in this example but it's helpful to know about.
      await elementUpdated(el);

      // Make sure the follow attribute is now updated.
      expect(el.hasAttribute("follow")).to.be.true;
      // Make sure the text is updated to reflect the "unfollowed" state.
      expect(el.button.textContent).to.equal("Unfollow");

      // Manually remove the follow attribute.
      el.removeAttribute("follow");

      // Wait for the element to be done updating.
      await elementUpdated(el);

      // Make sure the follow attribute is updated.
      expect(el.hasAttribute("follow")).to.be.false;
      // Make sure the text is updated to reflect the "follow" state.
      expect(el.button.textContent).to.equal("Follow");
    });

    it('should set a profile pic from the photo-url attribute', async () => {
      const el = await createFixture(element);

      // Grab the `photo-url` attribute.
      const photoUrlAttribute = el.getAttribute('photo-url');

      // Find the background image in the shadow root css.
      const shadowRoot = el.shadowRoot;
      const profilePicContainer = shadowRoot.querySelector('#profile-pic');
      const backgroundImageUrl = profilePicContainer.style.backgroundImage.slice(5, -2);

      // Make sure the photo url attribute matches the background image url.
      expect(photoUrlAttribute).to.equal(backgroundImageUrl);
    });
});
```

You may notice we're accessing the `shadowRoot` here, available to our element by extending `PFElement` in the definition of our element. You can also access content in the `<slot></slot>` of your element by using the `assignedNodes()` method.

We use a slot for the username in `pfe-cool-element`, making it available to us in the array returned by `assignedNodes()`.

```javascript
shadowRoot.querySelector('slot').assignedNodes()[0].textContent.trim();
```

### Run the Test

Lastly, we can run the test command below to see how we did. You can focus on this specific test so you're only running the tests for `pfe-cool-element`.

```bash
npm run test:watch --element="pfe-cool-element"
```

This command starts up web test runner and allows us to debug our test in the browser.

![npm test command](/images/develop/develop-testing-first-pass.png)

Debugging the test in the browser should give you the following:

![Browser test debugging](/images/develop/develop-testing-final-pass.png)

#### Note

![Unexpected reserved word error](/images/develop/develop-testing-error.png)

If you run into an `SyntaxError: Unexpected reserved word` error while writing tests, chances are it's because you're using an `await` function without an `async` parent.

**Will error out**

```JavaScript
it('should set a username from the light DOM', () => {
  const el = await createFixture(element);
});
```

**Fixed by adding the `async` keyword**

```JavaScript
it('should set a username from the light DOM', async () => {
  const el = await createFixture(element);
});
```

### Testing against Vue and React

Now that our vanilla JavaScript tests are passing, let's use Vue and React wrappers to run the same tests.

Run the same tests within React by using:

```bash
npm run test:watch --group="with-react"
```

Run the same tests within Vue with:

```bash
npm run test:watch --group="with-vue"
```

This works exactly the same as the normal `npm run test:watch` command, the only difference is the fixture will be wrapped with React or Vue.

Finally we can run the test "ci" command which will run the following:

1. All tests.
2. Those same tests with React wrappers.
3. Those same tests with Vue wrappers.

```bash
npm run test:ci
```

![Final test output](/images/develop/develop-testing-npm-test.png)

Nice! All tests are working in Chrome and with React and Vue wrappers. 🎉

A quick note about the framework testing—the Vue and React tests are meant to be an initial first pass in those frameworks just to make sure that the functionality is working and that the component renders properly.

That's it for testing! Now that we've created our `pfe-cool-element` and all of our code passes, the final step is to submit a pull request to get this merged.

<pfe-cta>
  Next up: Open a pull request
</pfe-cta>
:::

repository: hraverkar/patternfly-elements

repo_name: hraverkar/patternfly-elements


text:
# Workout-Tracker
![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)

## Description

In this app a user can create and track their daily workouts. The user can add cardio workouts where they can track their distance traveled and resistance workouts were they can track weight,sets,and reps.

## Table of Contents

* [Installation](#installation)

* [Features](#features)

* [Technologies](#technologies)

* [License](#license)

* [Questions](#questions)

## Installation

To install necessary dependencies, run the following command:

```
npm i
```

## Features
* Add a resistance work out with weight,sets,and reps.

* Add a cardio work out.

* Add new exercises to a new workout plan.

* View the combined weight of multiple exercises from the past seven workouts on the `stats` page.

* View the total duration of each workout from the past seven workouts on the `stats` page.

 Deloyed link :https://app-workout-tracker.herokuapp.com/

![image](https://user-images.githubusercontent.com/72588525/109782870-5e95e900-7bd7-11eb-97a3-ebcf97803e1e.png)

![image](https://user-images.githubusercontent.com/72588525/109782477-f0e9bd00-7bd6-11eb-9ee0-da11000d94bf.png)

![image](https://user-images.githubusercontent.com/72588525/109784042-aa955d80-7bd8-11eb-8ca3-a38dd3ffdd06.png)

## Technologies

* Mongoose

* Mongodb

* Express

* Morgan

## License

This project is licensed under the MIT license.

## Questions

If you have any questions about the repo, open an issue or contact me directly at<EMAIL_ADDRESS>You can find more of my work at [Taiyahm](https://github.com/Taiyahm/).

license: MIT

repository: Taiyahm/Workout-Tracker

branch_name: refs/heads/main

extension: md

license_type: permissive

repo_name: Taiyahm/Workout-Tracker


text:
# Nokogiri::Toolkit

My personal Nokogiri toolkit. I use this for wrapping Nokogiri, without having to create pull requests, test the code thoroughly etc.

## Current features

  * TestMerge, this is capable of nested to_text from a higher root node with an optional separator character (which I believe is missing from Nokogiri)

## Installation

Add this line to your application's Gemfile (bundler):

    gem 'wiki-api', git: "git://github.com/dblommesteijn/nokogiri-toolkit.git"

And then execute:

    $ bundle

Or install it yourself as (RubyGems):

    $ gem install nokogiri-toolkit

## Usage

### TextMerge (merge text with optional separator)

```ruby
# open a HTML with uri open
doc = Nokogiri::HTML(open("https://en.wikipedia.org/wiki/Ruby_on_Rails"))
# get the bodyContent (main wiki content)
xs = doc.xpath("//div[@id='bodyContent']")

# get text of the NodeSet (using the pipe for extra clarification, you can set any other character)
text = xs.text_merge_opt "|"

# printing text verbose
puts text.inspect
```

repository: dblommesteijn/nokogiri-toolkit

branch_name: refs/heads/master

repo_name: dblommesteijn/nokogiri-toolkit


text:
Description
===========

A collection of [Heavy Water Software Inc's](http://hw-ops.com)
evolving opinions on best practises for configuring and integrating a
Rails application.

Requirements
============

A Rails application code repository that is configured to manage gem
dependencies via Bundler.

Attributes
==========

* `node["app"]["repository"] ` - Code to deploy (defaults to an
  example Rails 3.1 app)
* `node["db"]["adapter"]` - Database such as postgresql, mysql, mongodb or
  sqlite3 (default)

Usage
=====

Include "recipe[app::deploy]" in a run list to install an example
Rails 3.1 application backed by a SQLite3 database.

If you're cloning a private repository add a deploy key at
app/files/default/deploy_key_id_rsa

A more practical case might be to create an "app" role:

```ruby
name "app"
description "My Rails app"

run_list [ "role[base]",
           "recipe[postgresql::server]",
           "recipe[app::deploy]" ]

default_attributes( "app" => {
                      "repository" => "git@github.com:me/myapp.git",
                      "use_deploy_key" => true },
                    "db" => {
                      "adapter" => "postgresql" } )
```

repository: sabril/chef-repo

repo_name: sabril/chef-repo


text:
# CustomerScoring

This gem is a wrapper for the Customer Scoring Advice API and allows easy access to the API with simple Ruby.

## Dependencies
The gem requires Ruby v. 2.2.3 and the following gems:
```ruby
"bundler", "~> 1.11"
"rake", "~> 10.0"
"rspec", "~> 3.0"
"vcr", "~> 3.0.1"
"webmock", "~> 1.24.3"
```

## Installation

Download or clone the repo.  Using terminal, navigate to the root directory and execute:

```ruby
bundle exec rake install
```

## Usage

Open irb and require the gem:
```ruby
require 'customer_scoring'
```
To access the API, initialize a customer using their income, zip code, and age as arguments.  Arguments are passed as strings.
```ruby
customer = CustomerScoring::Customer.score("income", "zipcode", "age")
```
Example:
```ruby
customer = CustomerScoring::Customer.score("50000", "60201", "35")
```

To access propensity and ranking for the customer:
```ruby
customer.propensity
=>0.26532
customer.ranking
=>"C"
```

## Testing

RSpec tests are included.  These tests will test the for both number of arguments and the server response. To run the tests, navigate to the root directory in terminal and execute:
```ruby
rspec
```

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/cconnell/customer_scoring.

## License

The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

repository: cconnell/lfo-api

gha_language: Ruby

repo_name: cconnell/lfo-api


text:
# CURLFile Compatibility Library

[![Build Status](https://travis-ci.org/imnotjames/curlfile-compat.svg?branch=master)](https://travis-ci.org/imnotjames/curlfile-compat)
[![Coverage Status](https://img.shields.io/coveralls/imnotjames/curlfile-compat.svg)](https://coveralls.io/r/imnotjames/curlfile-compat)

Compatibility library to add a [CURLFile](http://php.net/class.curlfile) class to older versions of PHP.
[The RFC](https://wiki.php.net/rfc/curl-file-upload) has some more information on it as well.

This class abuses the fact that the PHP `CURLOPT_POSTFIELDS` option will coerce classes to strings when
sending it as data, and outputs the older style of including files in the post data.

## Installation

New school or old school, your choice.

For a new school installation with [Composer](http://getcomposer.org) simply [add it to your list of dependencies.](https://packagist.org/packages/imnotjames/curlfile-compat)

If you're kicking it old school you've got to `require` `src/CURLFile.php` and `src/imnotjames/CURLFILE.php`.

Either way, the non-namespaced CURLFile will only be created if the class doesn't already exist.  Same goes for the `create_curl_file` function.

## Usage

Exactly the same as [PHP's CURLFile'](http://php.net/curlfile)

```php
$handle = curl_init('http://example.com');

$cfile = new CURLFile('puppy.jpg','image/jpeg','puppy_boquet');

// Assign POST data
$data = array('test_file' => $cfile);

curl_setopt($handle, CURLOPT_POST, true);
curl_setopt($handle, CURLOPT_POSTFIELDS, $data);

curl_exec($handle);
```

repository: imnotjames/curlfile-compat

repo_name: imnotjames/curlfile-compat


text:
# Documentation

## Merge Sort for Linked List

#### Problem Statement

Given Pointer/Reference to the head of the linked list, the task is to Sort the given linked list using Merge Sort.
Note: If the length of linked list is odd, then the extra node should go in the first list while splitting.

    Example 1:

    Input:
    N = 5
    value[]  = {3,5,2,4,1}
    Output: 1 2 3 4 5
    Explanation: After sorting the given
    linked list, the resultant matrix
    will be 1->2->3->4->5.

#### Solution

To be added soon ... .. ...

repository: LetsUpgrade/Algorithmic-Treasure

path: /Chaitali Gaitonde/Linked Lists/Question 1/Doc.md

gha_language: JavaScript

gha_license_id: MIT

repo_name: LetsUpgrade/Algorithmic-Treasure


text:
# Install RabbitMQ Using Helm

In this lab you will install RabbitMQ into a Kubernetes cluster using Helm.

Lesson goals:

1. Use Helm to deploy RabbitMQ

## Deploy to Kubernetes

The final step in this lab is to deploy the services to K8s. The docker-compose environment is convenient for the F5 experience and debugging, but ultimately most production systems will run on K8s or something similar.

### Deploy RabbitMQ to Kubernetes

Open a CLI window.

1. Type `helm install my-rabbitmq bitnami/rabbitmq`
1. Helm will display information about the deployment
   1. Copy-paste the command to retrieve the RabbitMQ password (make note of value)
   1. Copy-paste the command to retrieve the RabbitMQ erlang key (make note of value)
1. Explore the installation
   1. Type `helm list` to list installed releases
   1. Type `kubectl get pods` to list running instances
   1. Type `kubectl get services` to list exposed services

At this point you should have an instance of RabbitMQ running in Kubernetes. The output from `kubectl get services` should be something like this:

```text
$ kubectl get services
NAME                   TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)                                 AGE
kubernetes             ClusterIP   <IP_ADDRESS>        <none>        443/TCP                                 88d
my-rabbitmq            ClusterIP   <IP_ADDRESS>   <none>        4369/TCP,5672/TCP,25672/TCP,15672/TCP   8m
my-rabbitmq-headless   ClusterIP   None             <none>        4369/TCP,5672/TCP,25672/TCP,15672/TCP   8m
```

Make note of the service name, and also notice how it has been provided with a `CLUSTER-IP` address. This address is how the RabbitMQ service is exposed within the K8s cluster itself. This isn't a hard-coded or consistent value however, so later on you'll use the _name_ of the service to allow our other running container images to interact with RabbitMQ in the next lab.

### Configure Guest User in RabbitMQ

In a production environment you (or your IT ops team) will create one or more user accounts in RabbitMQ for use by your apps. The "default" username/password is guest/guest, and this is disabled in the Helm chart install for security reasons.

For the purposes of the next lab, to keep things as simple as possible, it is necessary to enable the guest user in RabbitMQ. This is done using the administrative web GUI provided by RabbitMQ.

Use the `kubectl port-forward` comamnd to create a network tunnel from localhost to the RabbitMQ container running in Kubernetes.

```text
kubectl port-forward svc/my-rabbitmq 15672:15672
```

> ⚠ Make sure `my-rabbitmq` matches the service name from Kubernetes.

Now open a browser and navigate to `localhost:15672`. Use the credentials provided for RabbitMQ from when you ran the Helm chart ealier to log into the web portal.

Click the Admin option.

![RabbitMQ admin](images/rabbit-admin.png)

On the admin screen, click Users, then Add a user, then add a user with the username `guest` and password `guest` and the tag `administrator`.

![Add user](images/rabbit-add-user.png)

At this point the user list should include guest and admin. It is possible that guest will not have access to any virtual hosts. In this case, click `guest` to edit the user profile and add the default (global) virtual host.

![Add user](images/rabbit-add-permission.png)

The result should be that the guest user has access to the `/` virtual host.

Now RabbitMQ is running in the k8s clusted, and has a cluster IP address so it can be used by others services running inside the cluster. The next lab will make use of this new service.

## References

* https://phoenixnap.com/kb/install-and-configure-rabbitmq-on-kubernetes

repository: rockfordlhotka/Cloud-Native-HOL

gha_language: C#

repo_name: rockfordlhotka/Cloud-Native-HOL


text:
# Calycina Nees ex Gray, 1821 GENUS

#### Status
ACCEPTED

#### According to
The Catalogue of Life, 3rd January 2011

#### Published in
Nat. Arr. Brit. Pl. (London) 1: 669 (1821)

#### Original name
Calycina Nees ex Gray, 1821

### Remarks
null

repository: mdoering/backbone

repo_name: mdoering/backbone


text:
Data Report on  the Autolib electric car- sharing company to analyse the usage and stations.

This project is a part of the Data Science Prep at Moringa School.

Report objective
The Autolib company has seen a drastic increase in the level of demand on the electric car sharing company for the past few years of establishment. There has been increased demand for the different car types and brandings that they have offered-the bluecar, the Utilib and the Utilib 1.4 brands. The market share has been shrinking due to the entry of other players into the same business space.This has necessitated the need to analyse and come up with the best business strategy that will give Autolib the competitive advantage in the market. The main aim of this data report is to manipulate the data that has been selected and best suits.
The CRISP-DM will be used in this project to help come up with the objectives and give a step by step process of how best to deploy their resources in upgrading their infrastructure so as to increase customer satisfaction and loyalty. The pertinent issues concerning the data will be tackled as follows:

Methods Used

Data analysis using python panda and numpy
Data Visualization
Predictive Modeling

Technologies

Python
MySql
Pandas, google colaboratory

Project Description

The Autolib company has been a key and the major stakeholder in the electric car hiring sector of the economy. But due to competition they have now to step up and just up their game to achieve the desired milestone.However, this is not enough as there is a need to look into how they have been providing services to their customers by looking at the current usage of the three brands of electric cars they are having in the market.
This analysis and report is developed with aim of;
Reviewing the usage per city and region.
To enhance innovation that will steer the market expansion
Improving  the customer experience with the three available brands.
The performance of each brand would be measured in relation to the city and the time of the day and month that the most brands would be taken.
The prediction of the market based on the available data.
Business background
Autolib has its outlets in many cities in the region of operation. The company is managed centrally frome Paris and has station managers in specific stations. Nevertheless the company has its databases managed remotely from one point. As the business is occured on cloud computing technology.
On deployment this project will affect the operation of the company from the brands rolled to the market and the hours of operation to increase the number of the electric cars.


text:
### [CVE-2001-0465](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2001-0465)
![](https://img.shields.io/static/v1?label=Product&message=n%2Fa&color=blue)
![](https://img.shields.io/static/v1?label=Version&message=n%2Fa&color=blue)
![](https://img.shields.io/static/v1?label=Vulnerability&message=n%2Fa&color=brighgreen)

### Description

TurboTax saves passwords in a temporary file when a user imports investment tax information from a financial institution, which could allow local users to obtain sensitive information.

### POC

#### Reference
- http://www.turbotax.com/atr/update/

#### Github
No PoCs found on GitHub currently.

repository: trickest/cve

gha_language: HTML

repo_name: trickest/cve


text:
- Authentication mechanism is the key to identify the users.
- Incorrectly implemented authentication mechanisms in REST APIs can lead to various problems, which include :
  - Complete compromise of API
  - Compromising system's ability to identify user

## Bypass Authentication With Sql Injection

Send login request with which not exists in the application.

![Image](/img/usernotexists.png)

Send sql injection payload to the username parameter : `' or '1'='1'-- ` (url encode)

![Image](/img/sqlinjectionpayload.png)

## Vulnerable Code

```
//LOGIN and VIEW PROFILE CODE

if( $_SERVER['REQUEST_METHOD'] == "GET"){

    if(isset($_GET['token'])){

        $token = $_GET['token'];

        $selectquer = $mysqli->query("SELECT * FROM user WHERE token='".$token."'");
         if($selectquer->num_rows > 0) {

             while($row = $selectquer->fetch_assoc()) {

             $username = $row['username'];
             $email = $row['email'];
             $token = $row['token'];
             $password = $row['password'];

             $response['code'] = 1;
             $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
             $response['data'] =  array(
                 username => $username,
                 emailid => $email,
                 token => $token,
                 password => $password);
             }
        }
        else{

    $response['code'] = 4;
    $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
    $response['data'] = 'No Data found with this token';

        }

    }
    else{

    $username = $_GET['username'];
    $password = $_GET['password'];

    if(!empty($username)&&!empty($password))
    {
    $selectquer = $mysqli->query("SELECT * FROM user WHERE username='".$username." 'and password='".$password." ' ");

        if($selectquer->num_rows > 0) {

        while($row = $selectquer->fetch_assoc()) {

             $name = $row['username'];
             $email = $row['email'];
             $token = $row['token'];

             $response['code'] = 1;
             $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
             $response['data'] =  array(
                 username => $username,
                 emailid => $email,
                 token => $token);
        }

    }
     else{

    $response['code'] = 4;
    $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
    $response['data'] = 'Invalid Username or Password';
     }
    }
    else
    {
    $response['code'] = 0;
    $response['status'] = $api_response_code[ $response['code'] ]['HTTP Response'];
    $response['data']['user'] = 'unknown';
    $response['data']['message'] = 'incomplete';
    }
    }
}

```

extension: markdown

gha_license_id: NOASSERTION


text:
# Nzuri Client

The Nzuri Client is a cross-platform VPN or proxy client for Windows and Android. This project is a fork of [Outline Client](https://travis-ci.org/Jigsaw-Code/outline-client) developed by Jigsaw. The Nzuri Client is designed for use and to be fully compatible with the [Outline Server](https://github.com/Jigsaw-Code/outline-server) software,
 but it is fully compatible with any [Shadowsocks](https://shadowsocks.org/) server. Future optimizations include creating a standalone server/manager application with independent backend infrastructure for this client.

The client's user interface is implemented in [Polymer](https://www.polymer-project.org/) 2.0. Platform support is provided by [Cordova](https://cordova.apache.org/) and [Electron](https://electronjs.org/), with additional native components in this repository.

## Requirements for all builds

All builds require [yarn](https://yarnpkg.com/en/docs/install), in addition to other per-platform requirements. After cloning this repo, you should run "yarn" to install all dependencies.

## Building the web app

Outline clients shares the same web app across all platforms. This code is located in the src/www directory. If you are making changes to the shared web app and do not need to test platform-specific functionality, you can test in a desktop browser by running:

yarn gulp build --platform=browser
 yarn cordova run browser

The latter command will open a browser instance running the app. Browser platform development will use fake servers to test successful and unsuccessful connections.

UI components are located in [src/www/ui_components](src/www/ui_components). The app logic is located in [src/www/app](www/app).

## Building the Android app

Additional requirements for Android:

* Android Studio
* Android SDK 28

To build for android, run:

    yarn gulp build --platform=android

To rebuild after modifying platform dependent files, run:

    yarn cordova platform rm android && yarn gulp build --platform=android

If this gives you unexpected Cordova errors, run:

    yarn run clean && yarn && yarn gulp build --platform=android

Cordova will generate a new Android project in the platforms/android directory.  Install the built apk by  platforms/android/build/outputs/apk/android-armv7-debug.apk

To learn more about developing for Android, see [docs/android-development](docs/android-development.md).

## Building for Android with Docker

A Docker image with all pre-requisites for Android builds is included. To build:

* Install dependencies with `./tools/build/build.sh yarn`
* Then build with `./tools/build/build.sh yarn gulp build --platform=android`

## Windows

Additional requirements for building on Windows:

* [Cygwin](https://cygwin.com/install.html). It provides the "missing Unix pieces" required by build system such as rsync (and many others)

To build for Windows, run:

    yarn do src/electron/build

Unlike the Android and Apple clients, the Windows build uses the Electron framework, rather than Cordova.

repository: Mansa-Technology/nzuri-client

repo_name: Mansa-Technology/nzuri-client


text:
# PSRule

An Azure DevOps extension for using PSRule within Azure Pipelines.

## Disclaimer

If you have any problems please check our GitHub [issues] page.
If you do not see your problem captured, please file a new issue and follow the provided template.

## Getting started

The PSRule extension includes the following tasks for Azure Pipelines:

Name                | Friendly name   | Description | Reference
----                | -------------   | ----------- | ---------
`ps-rule-assert`    | PSRule analysis | Run analysis with PSRule. | [reference][ps-rule-assert]
`ps-rule-install`   | Install PSRule module | Install a PowerShell module containing rules. | [reference][ps-rule-install]

To add these tasks, use the name for YAML pipelines or friendly name of classic pipelines.

### Installing PSRule extension

To use PSRule within Azure DevOps Services, install the [extension] from the [Visual Studio Marketplace][extension].
For detailed instructions see [Install extensions][extension-install].

If you don't have permissions to install extensions within your Azure DevOps organization,
you can request it to be installed by an admin instead.

### Using within YAML pipelines

To use these tasks within YAML pipelines:

- Install rule modules with the `ps-rule-install` task (optional).
- Run analysis one or more times with the `ps-rule-assert` task.
- Publish analysis results with the [Publish Test Results](https://docs.microsoft.com/azure/devops/pipelines/tasks/test/publish-test-results?view=azure-devops&tabs=yaml) builtin task.

For example:

```yaml
steps:

# Install PSRule.Rules.Azure from the PowerShell Gallery
- task: ps-rule-install@2
  inputs:
    module: PSRule.Rules.Azure   # Install PSRule.Rules.Azure from the PowerShell Gallery.

# Run analysis from JSON files using the `PSRule.Rules.Azure` module and custom rules from `.ps-rule/`.
- task: ps-rule-assert@2
  inputs:
    modules: 'PSRule.Rules.Azure'            # Analyze objects using the rules within the PSRule.Rules.Azure PowerShell module.
    outputFormat: NUnit3                     # Save results to an NUnit report.
    outputPath: reports/ps-rule-results.xml  # Write NUnit report to 'reports/ps-rule-results.xml'.

# Publish NUnit report as test results
- task: PublishTestResults@2
  displayName: 'Publish PSRule results'
  inputs:
    testRunTitle: 'PSRule'                          # The title to use for the test run.
    testRunner: NUnit                               # Import report using the NUnit format.
    testResultsFiles: 'reports/ps-rule-results.xml' # The previously saved NUnit report.
```

## Changes and versioning

Extensions and tasks in this repository uses [semantic versioning](http://semver.org/) to declare breaking changes.
For a list of module changes please see the [change log].

## Contributing

This project welcomes contributions and suggestions.
If you are ready to contribute, please visit the [contribution guide].

## Code of Conduct

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
or contact [opencode<EMAIL_ADDRESS>with any additional questions or comments.

## Maintainers

- [Bernie White](https://github.com/BernieWhite)
- [Sam Bell](https://github.com/ms-sambell)

## License

This project is [licensed under the MIT License][license].

[issues]: https://github.com/Microsoft/PSRule-pipelines/issues
[extension]: https://marketplace.visualstudio.com/items?itemName=bewhite.ps-rule
[extension-install]: https://docs.microsoft.com/en-us/azure/devops/marketplace/install-extension?view=azure-devops&tabs=browser
[ps-rule-assert]: https://github.com/Microsoft/PSRule-pipelines/blob/main/docs/tasks.md#ps-rule-assert
[ps-rule-install]: https://github.com/Microsoft/PSRule-pipelines/blob/main/docs/tasks.md#ps-rule-install
[contribution guide]: https://github.com/Microsoft/PSRule-pipelines/blob/main/CONTRIBUTING.md
[change log]: https://github.com/Microsoft/PSRule-pipelines/blob/main/CHANGELOG.md
[license]: https://github.com/Microsoft/PSRule-pipelines/blob/main/LICENSE

repository: microsoft/PSRule-pipelines

gha_language: PowerShell

repo_name: microsoft/PSRule-pipelines


text:
---
author: Jens-Christian Fischer
categories: ["musings"]
comments: true
date: 2005-08-25 22:30:34+00:00
layout: post
link: https://invisible.ch/2005/08/25/mail-tools/
slug: mail-tools
tags: ["blog"]
title: Mail Tools
type: post
wordpress_id: 449
---

[MailTags](https://www.indev.ca/MailTags.html) for Apple Mail, adding Spotlight Meta Information to mails. Looks good, I'll try it out. From the same people that gave us [Mail ActOn](https://www.indev.ca/MailActOn.html) (a plugin that I uses extensively)

Technorati Tags: [mac](https://technorati.com/tag/mac), [mail](https://technorati.com/tag/mail)


text:
# riot-lol-match-trends

Code: Notebooks/LoL Trend Analysis.ipynb

Reference: [Kaggle Dataset by Minyong Shin](https://www.kaggle.com/gyejr95/league-of-legends-challenger-ranked-games2020)

## Hypothesis
## The map in League of Legends is one-sided, in favor of the blue side.

How did I come to this hypothesis?
I have been playing League of Legends on and off for more than six years. In that time, I often felt that the map was slightly in favor of the blue team due to the placement of the HUD and the layout of the map. The blue team has a favorable position when coming to contest the largest obective in the game, Baron Nashor. Not only this, but the placement of the HUD at the bottom center of the screen forces the Red team player to play with their camera un-fixed on their champion in order to ensure it is not blocking their enemy. If someone is not used to playing with their camera like this, or opts not to un-fix their camera and play with the slight vision block, I believe this map impact the viewable win percentages in the data we're about to review. Let's do this!

![game_map](https://static.wikia.nocookie.net/leagueoflegends/images/5/53/Summoner%27s_Rift_Update_Map.png)

## Data
Please view Data acknowledgements file in Data Files folder.

## Cleaning
The dataset was free of null values and other common cleaning issues. The data types were properly detected by Pandas and the DataFrame was workable right after import. I started by separating the dataframes based off of team, and then from wins and losses. From there, I continued my analysis.

## Win Rates
The first, and most obvious thing to check for this hypothesis, is how many times each time one on average.

### Master Elo
![master_win_avg](Images/master_elo_win_sum.png)

Blue won a total of 53041 matches.
Red won a total of 54084 matches.
The difference is 1043 - in favor of the Red team.
Percentage of wins for blue is: 0.495%
Percentage of wins for red is: 0.505%

### Grand Master Elo
![gmaster_win_avg](Images/grandmaster_elo_win_sum.png)

Blue won a total of 32659 matches.
Red won a total of 33237 matches.
The difference is 578 - in favor of the Red team.
Percentage of wins for blue is: 0.496%
Percentage of wins for red is: 0.504%

### Challenger Master Elo
![challenger_win_avg](Images/challenger_elo_win_sum.png)

Blue won a total of 13454 matches.
Red won a total of 13450 matches.
The difference is 4 - in favor of the Blue team.
Percentage of wins for blue is: 0.50007%
Percentage of wins for red is: 0.49993%

## Gold Income vs. Game Length

### Master Elo
![master_goldincome_avg](https://i.imgur.com/XHNmdTs.png)

### Grand Master Elo
![gmaster_goldincome_avg](https://i.imgur.com/NaaFoE2.png)

### Challenger Master Elo
![challenger_goldincome_avg](https://i.imgur.com/eBEHLKS.png)

## Other Charts
Please view the jupyter notebook + notebook report files in 'Notebooks' folder. There is a plethora of histograms comparing wins against objectives and kills.

## Correlation

### Master
![corr1](Images/master_corr_matrix_blue.png)
![corr2](Images/master_corr_matrix_red.png)
### Grand Master
![corr1](Images/grandmaster_corr_matrix_blue.png)
![corr2](Images/grandmaster_corr_matrix_red.png)
### Challenger
![corr1](Images/challenger_corr_matrix_blue.png)
![corr2](Images/challenger_corr_matrix_red.png)

# Conclusion

There was no statistical signifiance between one side winning more than the other. The means are extremely close to one another, and the frequencey of statistically significant winning events are also extremely close, and within a margin of error. Whilst this dataset cannot speak to the issue of the HUD being in the way, red did win more than blue within the Master and Grand Master rankings. In Challenger, blue had 4 more matches won over red. There is a noticable decrease in Red's margin of total won matches over blue as you go up in Rank. What DOES matter is objectives. Objectives in the game have the highest statistically significant correlation to a win than any other variable. If blue takes structural objectives first in these ranks, their odds of winning are marginally higher than red's. Red's odds of winning are marginally higher than blue's if red takes dragon or baron first within these three ranks.

I conclude that blue does win more games than red if blue takes a structural objective first within the limits of the ranks this dataset includes. I can not say with confidence that the map is 'one-sided' per-se. What is apparent to me is the masterful work Riot has done in balancing the game. The margins are incredibly narrow. With a different dataset, I would like to further explore blue and red's win chances after taking first objectives. More can be revealed this way, and could allow me to make recommendations towards team balance.

Thus, my hypothesis was proven wrong by my analysis.

repository: josephchancey/riot-lol-match-trends

repo_name: josephchancey/riot-lol-match-trends


text:
# Project Layout

When building a project, the layout of it is crucial.  Many times developers will just start adding sources to a folder and ignore the consequences of not having a well laid out solution.

This doesn't mean your structure needs to be perfect immediately.  However, keep in mind as a project grows, the structure of a project should grow to aid in navigation of your codebase.

This has been a point of issue as I've seen several situations where small solutions grow out of control and harder to maintain because finding the proper code requires a lot of code digging.

This is a growing set of guidelines I like to use when building new projects, or things I've learned from past experience.  This is not meant to be something everyone will agree on, but a starting point for project organization.

These principles are not meant to standalone and can often work in conjuction or be put into practice in different parts of a folder structure.

## The Importance of a Good Layout

* Poor layout leads to confusion for other developers.  Coding is a colaborative effort, and the layout of your repository should guide others in how to navigate the solution.

* A good structure can lead to better architectual decisions.  For example, if you group your sources by domain concepts, you can get a full view of what implementation work needed to be done for that domain concept and apply it to others going forward.

* Good structure helps lead to good design decisions and fosters patterns.

* If a new area of an application needs to be coded, and there is an existing area that is similar, if the code is properly structured, you can use the existing area as a "template".

## Common Pitfalls

* Poorly applied structuring patterns.  While structuring guidelines are great, misapplied structuring guidelines can be just as bad and prevent your code structure from being discoverable.

* Matching your files based on your class hierarchy.  I've seen many cases where because a class has derived from a base class the programmer chose to put the code in a new folder for all derrivations of the base class.  This can be catastrophic to helping others understand your domain.  The structure of the code becomes based on design instead of domain or architecture.

## The Importance of Folders

Imagine if there were no folders on a filesystem.  We'd be left with a huge collection of files in a single directory.  Imagine the windows files being mixed with program files being mixed with pictures.

Folders have served us well being able to organize things, but think of cases where the folder structure did not make sense, or the folders were mapped.

In the same way using folders in a software project gives us immense opprotunities to give insights into the layout of a project and aid in locating files.  In the end the folder structure should help you locate things in the solution.

## Universal Guidelines

These are gudelines that can apply regardless of language, or type or technology.  While I may reference specific technologies,

### Match the basic architecture of your application

For example, when I create a react / redux application, I suggest the following folder structure for organizing the main source of the application.  This makes it simple to easily locate the different portions of the architecture of the application, while giving the oprotunity to seperate the source into domain concepts

| folder | description |
|-|-|
| ui | This contains the UI portion of the application, typically anything to do with the views of the application. Your react code should be organized under this folder.
| state | This contains the state management portion of the application, the redux reducers and actions should be organized under this folder.
| model | This contains any logic needed to call APIs that the UI is relying on, or if there is any business specific logic you need for your application.

This makes it clear.  If there is something in the UI to be extended, go to the UI folder.  If the calls to the APIs aren't working correctly, go to the model folder.

### Match your domain model

If you have very well defined concepts in a domain, or say you are working to model some tangible object.

## UI Project Guidelines

### Match the navigation structure

If there is a navigation system in the UI, such as a single page application, or a browser application, the folder structure should match the navigation for the UI components.

This typically was just a given in the past for web applications when they had many HTML pages.  However, now that we've entered the realm of single page applications, this is easier in today's day and age to misrepresent.

### Separate base components to a common folder

If a component is something that is considered a common or base component, then move it to a shared folder.  For example, a component exposing a special flavor of a text box.  If it can be reused, it's good to put it someplace were reuse will occur.

With frameworks that offer breaking down a UI into components, I've seen many cases with a "components" folder and all the UI elements from different screens in the application are jumbled together.  This leads to confusion as it's not easy to match.

If a component at all is tied to a domain concept, then it is not a base component, and should not be put in a common folder.

## Unit Tests Guidelines

Have the structure of the tests match the structure of the code.  For unit tests, I am assumming there is a test per class.

This makes it easy to see if a class is tested or not with a side by side comparison of the folder structures.  It also makes it easy find the class under test, or the original tests.

## API Test Guidelines

If you are testing APIs, have your folder structure match the path of the API.  In some cases, it may be sufficient to not have to create folders for these.  However, if you have a lot of APIs to test for some given resource path, creating folders that match the APIs being tested, will make it easy to navigate and ensure all APIs are covered.

repository: jerhon/developer-notes

repo_name: jerhon/developer-notes


text:
# docker-pelican
Docker and Fig containers for Pelican static site generation, served by Nginx.

This project creates two Docker containers, one for the Pelican blog static file blog generator and another for the serving of the content using an Nginx contrainer.  Fig is used to orchestrate the building of the images and running of the containers.

To Install:

1. Install [Docker](https://docs.docker.com/), version 1.3 or higher, on a Linux box or VM.
2. Install [Fig](http://www.fig.sh/install.html), version 1.0 or higher.
3. Clone the repository: git clone https://github.com/turnkey-commerce/docker-pelican.git docker-pelican

To start, from the docker-pelican directory:

1. fig build
2. fig up -d

To view the site:

1. http://localhost

To stop:

1. fig stop

To add more content add or modify Markdown (.md) or reStructuredText (.rst) files in the docker-pelican/pelican/content directory and the blog will automatically be regenerated on change. For more information check the [Pelican documentation](http://docs.getpelican.com/en/latest/index.html).

repository: SietsevanderMolen/docker-pelican

repo_name: SietsevanderMolen/docker-pelican


text:
This BMI calculator was based on the Flutter bootcamp class from the London App Brewery.

It uses Imperial measurements:
  Weight in pounds.
  Height in feet and inches.

It also uses the weight ranges for small, medium, and large frame sizes from the MetLife insurance company.


text:
# Aplanopsis spinosa M.W. Dick, 1960 SPECIES

#### Status
SYNONYM

#### According to
The Catalogue of Life, 3rd January 2011

#### Published in
Trans. Br. mycol. Soc. 43: 60 (1960)

#### Original name
Aplanopsis spinosa M.W. Dick, 1960

### Remarks
null

path: /life/Chromista/Oomycota/Oomycetes/Saprolegniales/Saprolegniaceae/Newbya/Newbya pascuicola/ Syn. Aplanopsis spinosa/README.md


text:
---
sidebarDepth: 2
---

# VueJS :: Conventiions (aka Style Guide)

[[toc]]

Info taken from [VueJS Style Guide](https://vuejs.org/v2/style-guide/)

## ESSENTIAL

### Multi-word component names

**ESSENTIAL:**

**Component names should always be multi-word, except for root `App` components**.

This [prevents conflicts](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name) with existing and future HTML elements, since all HTML elements are a single word.

```js
Vue.component('todo-item', {
  // ...
})

// TodoItem.vue
<script>
  export default {
    name: 'TodoItem',
    // ...
  }
</script>
```

-------

### Component data

**ESSENTIAL:**
**Component `data` must be a function**.

When using the `data` property on a component (i.e. anywhere except on `new Vue`), the value must be a function that returns an object.

```js
Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
```

#### In a Root Vue instance

You can use an object directly in a root Vue instance, since only a single instance will ever exist.

```js
// It's OK to use an object directly in a root
// Vue instance, since only a single instance
// will ever exist.
new Vue({
  data: {
    foo: 'bar'
  }
})
```

-------

### Prop definitions

**ESSENTIAL:**

**Prop definitions should be as detailed as possible**.

In committed code, `prop definitions` should always be as detailed as possible, specifying at least type(s).

Detailed `prop definitions` have two advantages:

* They document the API of the component, so that it’s easy to see how the component is meant to be used.

* In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error.

```js
props: {
  status: String
}
```

#### Even better!
```js
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}
```

-------

### Keyed `v-for`

**ESSENTIAL:**

**Always use `key` with `v-for`**.

`key` with `v-for` is always required on components, in order to maintain internal component state down the subtree. Even for elements though, it’s a good practice to maintain predictable behavior, such as [object constancy](https://bost.ocks.org/mike/constancy/) in animations.

```html
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>
```

-------

### Avoid `v-if` with `v-for`

**ESSENTIAL:**
**Never use `v-if` on the same element as `v-for`**.

There are two common cases where this can be tempting:

* To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace users with a new computed property that returns your filtered list (e.g. activeUsers).

* To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. ul, ol).

#### Detailed Explanation

When Vue processes directives, `v-for` has a higher priority than `v-if`, so that this template:

```html
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>
```

Will be evaluated similar to:

```js
this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})
```

So even if we only render elements for a small fraction of users, we have to iterate over the entire list every time we re-render, whether or not the set of active users has changed.

By iterating over a computed property instead, like this:

```js
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
```

```html
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>
```

We get the following benefits:

* The filtered list will _only_ be re-evaluated if there are relevant changes to the `users` array, making filtering much more efficient.

* Using `v-for="user in activeUsers"`, we _only_ iterate over active users during render, making rendering much more efficient.

* Logic is now decoupled from the presentation layer, making maintenance (change/extension of logic) much easier.

We get similar benefits from updating:

```html
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>
```

to:

```html
<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  <li>
</ul>
```

By moving the `v-if` to a container element, we’re no longer checking `shouldShowUsers` for _every_ user in the list. Instead, we check it once and don’t even evaluate the `v-for` if `shouldShowUsers` is false.

-------

### Component style scoping

**ESSENTIAL:**

**For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped**.

This is only relevant for `single-file components`. It does _not_ require that the `scoped` [attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html) be used. Scoping could be through [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html), a class-based strategy such as [BEM](http://getbem.com/), or another library/convention.

**Component libraries, however, should prefer a class-based strategy instead of using the `scoped` attribute**.

This makes overriding internal styles easier, with human-readable class names that don’t have too high specificity, but are still very unlikely to result in a conflict.

#### Using the `scoped` attribute

```html
<template>
  <button class="button button-close">X</button>
</template>

<!-- Using the `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>
```

#### Using CSS modules

```html
<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- Using CSS modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
```

#### Using the BEM convention

```html
<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- Using the BEM convention -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>
```

-------

### Private property names

**ESSENTIAL:**

**Always use the `$_` prefix for custom private properties in a plugin, mixin, etc. Then to avoid conflicts with code by other authors, also include a named scope (e.g. `$_yourPluginName_`)**.

#### Detailed Explanation

Vue uses the `_` prefix to define its own private properties, so using the same prefix (e.g. `_update`) risks overwriting an instance property. Even if you check and Vue is not currently using a particular property name, there is no guarantee a conflict won’t arise in a later version.

As for the `$` prefix, its purpose within the Vue ecosystem is special instance properties that are exposed to the user, so using it for _private_ properties would not be appropriate.

Instead, we recommend combining the two prefixes into `$_`, as a convention for user-defined private properties that guarantee no conflicts with Vue.

```js
var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}
```

-------

## STRONGLY RECOMMENDED

IMPROVING READABILITY

### Component files

**STRONGLY RECOMMENDED:**

**Whenever a build system is available to concatenate files, each component should be in its own file**.

This helps you to more quickly find a component when you need to edit it or review how to use it.

##### Bad
```js
Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})
```

#### Good
```
components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue
```

-------

### Single-file component filename casing

**STRONGLY RECOMMENDED:**

**Filenames of [single-file components](https://vuejs.org/v2/guide/single-file-components.html) should either be always PascalCase or always kebab-case**.

PascalCase works best with autocompletion in code editors, as it’s consistent with how we reference components in JS(X) and templates, wherever possible. However, mixed case filenames can sometimes create issues on case-insensitive file systems, which is why kebab-case is also perfectly acceptable.

##### Bad
```
components/
|- mycomponent.vue

components/
|- myComponent.vue
```

#### Good
NOTE!! First CAPITAL letter

```
components/
|- MyComponent.vue

components/
|- my-component.vue
```

-------

### Base component names

**STRONGLY RECOMMENDED:**

**Base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with a specific prefix, such as `Base`, `App`, or `V`**.

#### Detailed Explanation

These components lay the foundation for consistent styling and behavior in your application. They may __only__ contain:

* HTML elements,
* other base components, and
* 3rd-party UI components.

But they’ll __never__ contain global state (e.g. from a Vuex store).

Their names often include the name of an element they wrap (e.g. `BaseButton`, `BaseTable`), unless no element exists for their specific purpose (e.g. `BaseIcon`). If you build similar components for a more specific context, they will almost always consume these components (e.g. `BaseButton` may be used in `ButtonSubmit`).

Some advantages of this convention:

* When organized alphabetically in editors, your app’s base components are all listed together, making them easier to identify.

* Since component names should always be multi-word, this convention prevents you from having to choose an arbitrary prefix for simple component wrappers (e.g. `MyButton`, `VueButton`).

* Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with Webpack:

```js
var requireComponent = require.context("./src", true, /^Base[A-Z]/)
requireComponent.keys().forEach(function (fileName) {
  var baseComponentConfig = requireComponent(fileName)
  baseComponentConfig = baseComponentConfig.default || baseComponentConfig
  var baseComponentName = baseComponentConfig.name || (
    fileName
      .replace(/^.+\//, '')
      .replace(/\.\w+$/, '')
  )
  Vue.component(baseComponentName, baseComponentConfig)
})
```

##### Bad

```
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
```

#### Good

```
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
```

-------

### Single-instance component names

**STRONGLY RECOMMENDED:**

**Components that should only ever have a single active instance should begin with the `The` prefix, to denote that there can be only one**.

This does not mean the component is only used in a single page, but it _will only be used once per page_. These components never accept any props, since they are specific to your app, not their context within your app. If you find the need to add props, it’s a good indication that this is actually a reusable component that is _only used once per page for now_.

##### Bad
```
components/
|- Heading.vue
|- MySidebar.vue
```

#### Good

```
components/
|- TheHeading.vue
|- TheSidebar.vue
```

-------

### Tightly coupled component names

**STRONGLY RECOMMENDED:**

__Child components that are tightly coupled with their parent should include the parent component name as a prefix__.

If a component only makes sense in the context of a single parent component, that relationship should be evident in its name. Since editors typically organize files alphabetically, this also keeps these related files next to each other.

#### Detailed Explanation

You might be tempted to solve this problem by nesting child components in directories named after their parent. For example:

```
components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue
```

or:

```
components/
|- TodoList/
   |- Item/
      |- Button.vue
   |- Item.vue
|- TodoList.vue
```

This is NOT recommended, as it results in:

* Many files with similar names, making rapid file switching in code editors more difficult.

* Many nested sub-directories, which increases the time it takes to browse components in an editor’s sidebar.

##### Bad

```
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
```

#### Good

```
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
```

-------

### Order of words in component names

**STRONGLY RECOMMENDED:**

**Component names should start with the highest-level (often most general) words and end with descriptive modifying words**.

#### Detailed Explanation

You may be wondering:

> “Why would we force component names to use less natural language?”

In natural English, adjectives and other descriptors do typically appear before the nouns, while exceptions require connector words. For example:

* Coffee with milk
* Soup of the day
* Visitor to the museum

You can definitely include these connector words in component names if you’d like, but the order is still important.

Also note that **what’s considered “highest-level” will be contextual to your app**. For example, imagine an app with a search form. It may include components like this one:

```
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
```

As you might notice, it’s quite difficult to see which components are specific to the search. Now let’s rename the components according to the rule:

```
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue
```

Since editors typically organize files alphabetically, all the important relationships between components are now evident at a glance.

You might be tempted to solve this problem differently, nesting all the search components under a “search” directory, then all the settings components under a “settings” directory. We only recommend considering this approach in very large apps (e.g. 100+ components), for these reasons:

* It generally takes more time to navigate through nested sub-directories, than scrolling through a single `components` directory.

* Name conflicts (e.g. multiple `ButtonDelete.vue` components) make it more difficult to quickly navigate to a specific component in a code editor.

* Refactoring becomes more difficult, because find-and-replace often isn’t sufficient to update relative references to a moved component.

##### Bad

```
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
```

#### Good

```
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
```

-------

### Self-closing components

**STRONGLY RECOMMENDED:**

**Components with no content should be self-closing in [single-file components](https://vuejs.org/v2/guide/single-file-components.html), string templates, and JSX - but never in DOM templates**.

**Components that self-close communicate that they not only have no content, but are meant to have no content**.

It’s the difference between a blank page in a book and one labeled “This page intentionally left blank.” Your code is also cleaner without the unnecessary closing tag.

NOTE!!

Unfortunately, HTML doesn’t allow custom elements to be self-closing - only [official “void” elements](https://www.w3.org/TR/html/syntax.html#void-elements). That’s why the strategy is only possible when Vue’s template compiler can reach the template before the DOM, then serve the DOM spec-compliant HTML.

##### Bad

```html
<!-- In single-file components, string templates, and JSX -->
<MyComponent></MyComponent>

<!-- In DOM templates -->
<my-component/>
```

#### Good

```html
<!-- In single-file components, string templates, and JSX -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>
```

-------

### Component name casing in templates

**STRONGLY RECOMMENDED:**

**In most projects, component names should always be PascalCase in [single-file components](https://vuejs.org/v2/guide/single-file-components.html) and string templates - but kebab-case in DOM templates.**

PascalCase has a few advantages over kebab-case:

* Editors can autocomplete component names in templates, because PascalCase is also used in JavaScript.

* `<MyComponent>` is more visually distinct from a single-word HTML element than `<my-component>`, because there are two character differences (the two capitals), rather than just one (a hyphen).

* If you use any non-Vue custom elements in your templates, such as a web component, PascalCase ensures that your Vue components remain distinctly visible.

Unfortunately, due to HTML’s case insensitivity, DOM templates must still use kebab-case.

Also note that if you’ve already invested heavily in kebab-case, consistency with HTML conventions and being able to use the same casing across all your projects may be more important than the advantages listed above. In those cases, **using kebab-case everywhere is also acceptable**.

##### Bad

```html
<!-- In single-file components and string templates -->
<mycomponent/>

<!-- In single-file components and string templates -->
<myComponent/>

<!-- In DOM templates -->
<MyComponent></MyComponent>
```

#### Good

```html
<!-- In single-file components and string templates -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>

OR

<!-- Everywhere -->
<my-component></my-component>
```

-------

### Component name casing in JS/JSX

**STRONGLY RECOMMENDED:**

Component names in JS/JSX should always be PascalCase, though they may be kebab-case inside strings for simpler applications that only use global component registration through Vue.component.

```js
Vue.component('MyComponent', {
  // ...
})

Vue.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  // ...
}
```

-------

### Full-word component names

**STRONGLY RECOMMENDED:**

**Component names should prefer full words over abbreviations**.

The autocompletion in editors make the cost of writing longer names very low, while the clarity they provide is invaluable. Uncommon abbreviations, in particular, should always be avoided.

##### Bad
```
components/
|- SdSettings.vue
|- UProfOpts.vue
```

#### Good

```
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
```

-------

### Prop name casing

**STRONGLY RECOMMENDED:**

**Prop names should always use camelCase during declaration, but kebab-case in templates and JSX**.

We’re simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is.

##### Bad

```js
props: {
  'greeting-text': String
}
```
```html
<WelcomeMessage greetingText="hi"/>
```

#### Good

```js
props: {
  greetingText: String
}
```

```html
<WelcomeMessage greeting-text="hi"/>
```

-------

### Multi-attribute elements

**STRONGLY RECOMMENDED:**

**Elements with multiple attributes should span multiple lines, with one attribute per line**.

In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it’s much easier to read. Our templates and JSX deserve the same consideration.

##### Bad

```html
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>
```

#### Good

```html
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>
```

-------

### Simple expressions in templates

**STRONGLY RECOMMENDED:**

**Component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods**.

Complex expressions in your templates make them less declarative. We should strive to describe _what_ should appear, not _how_ we’re computing that value. Computed properties and methods also allow the code to be reused.

##### Bad

```js
{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}
```

#### Good

```html
<!-- In a template -->
{{ normalizedFullName }}
```
```js
// The complex expression has been moved to a computed property
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}
```

-------

### Simple computed properties

**STRONGLY RECOMMENDED:**

**Complex computed properties should be split into as many simpler properties as possible**.

##### Bad
```js
computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}
```

#### Good

```js
computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}
```

-------

### Quoted attribute values

**STRONGLY RECOMMENDED:**

**Non-empty HTML attribute values should always be inside quotes (single or double, whichever is not used in JS)**.

While attribute values without any spaces are not required to have quotes in HTML, this practice often leads to _avoiding_ spaces, making attribute values less readable.

##### Bad
```html
<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>
```

#### Good
```html
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
```

-------

### Directive shorthands

**STRONGLY RECOMMENDED:**

**Directive shorthands (`:` for `v-bind:` and `@` for `v-on:`) should be used always or never**.

##### Bad

```html
<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>
<input
  v-on:input="onInput"
  @focus="onFocus"
>
```

#### Good
```html
<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>
<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>
<input
  @input="onInput"
  @focus="onFocus"
>
<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>
```

-------

## RECOMMENDED

-------

### Empty lines in component/instance options

**RECOMMENDED:**

**You may want to add one empty line between multi-line properties, particularly if the options can no longer fit on your screen without scrolling**.

When components begin to feel cramped or difficult to read, adding spaces between multi-line properties can make them easier to skim again. In some editors, such as Vim, formatting options like this can also make them easier to navigate with the keyboard.

#### Good
```js
props: {
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  },

  label: String,
  icon: String
},

computed: {
  formattedValue: function () {
    // ...
  },

  inputClasses: function () {
    // ...
  }
}
```

-------

repository: kematzy/vuejs-notes

repo_name: kematzy/vuejs-notes


text:
---
layout: post
title: "FISDay1"
date: 2012-10-03 09:10
comments: true
categories: FIS
---
###Lessons learned from day0 project###

- Positives:  worked well in a group, made sure that everyone got there page done.
- Mistakes: could have walked around and see what other teams were doing, could have focused more on layout/style and then breakout overnight to write the content.

shell
: guis are an illusion. They are a visualizations of the shell.
	: BASH- invented by [Stephen Bourne](http://en.wikipedia.org/wiki/Stephen_R._Bourne)
	: ZSH- alternative shell that isn't standard

- [learning the shell](http://linuxcommand.org/lts0040.php)

BASH
: Bourne Again Shell

[surfraw](http://surfraw.alioth.debian.org/)

[POSIX system](http://en.wikipedia.org/wiki/POSIX) based off of BASH

dot files are hidden files

bash profile runs everytime I open up a new file

pwd will output the full path
~ => home directory

BASHrc(runs second) and BASHLogin(runs first)

*BIN*

- create a path that says these files and directories can be considered local at all times-- make them local at all times.
- all binaries programs which are executables are in the bin dir

*RVM*

- if you find yourself in the wrong version of ruby it must have been because the path was messed up

ps - shows what is available
ps aux - shows all the programs that are running at all times
```
kill 81367 #=> kills the task with the id x
ps aux | grep sub #=> this takes the output of ps aux and output it to the other side of the pipe
```

ssh keys- private/public key encryption key. Can't decrypt a message with my private key, but not my public key.
encryption is with the public and
decryption is the private

Brew:
package manager for open source software
```
brew doctor
```

[solarized](http://ethanschoonover.com/solarized)

[IRBRC](http://drnicwilliams.com/2006/10/12/my-irbrc-for-consoleirb/) - runs everytime I open IRB
gcc - C compiler
need a visualizer

solarized
prgrammer fonts

*symbolic link*
usr/local/bin is where we put all of our binaries

ln -s "link the stuff from here to..." 'also look here'

ls -lah

*RVM*
If the wrong version is being used:
```
rvm use 1.9.3 --default
```

*.irbrc file*

- local_method is added here
```ruby
class Object
  def local_methods
    (methods - Object.instance_methods).sort
  end
end
```

*Git*

- [.gitignore file](https://help.github.com/articles/ignoring-files)

*Bash*

- .bash_profile > .bash_login > .profile
- .bash_logout would run when you log out
- .bashrc - always get loaded afterwards through the source command

subshell is a non-login shell
.bashrc runs every time you pull up a non-login terminal

*SublimeText2*

[Package installer](http://wbond.net/sublime_packages/package_control/installation) allows you to install packages for sublime using cmd+shift+p

[*Deploying to GitHub Pages*](http://octopress.org/docs/deploying/github/)

- I deployed a new octopress [test blog](http://ajonas04.github.com/jonas/)
- Some nice features on github pages that don't seem available on heroku
- It looks faster, can use the command 'rake deploy' to deploy

*Fun*

[Anagrams](http://www.mbhs.edu/~bconnell/cgi-bin/anagram.cgi)

repository: adamjonas/blog

repo_name: adamjonas/blog


text:
# Sunlo
Language learning with friends.
A user-generated, individually-curated phrase book to learn a language starting
from the most useful phrases, for you and your social circle. Named for the
first useful phrase I learned in Hindi "Sunlo iski baht", which I used to say,
"I don't understand your question, but my friend will answer you."

## Run Locally
1. Clone this repository
1. Set up a postgres database called `sunlo` or use sqlite
1. Set up a virtual environment and `pip install -r 'requirements.txt.'`
1. Set up the database and static files with
```bash
./manage.py migrate \
  && ./manage.py createsuperuser \
  && ./manage.py collectstatic \
  && ./manage.py loaddata cards/seed.json
```
1. Run your dev server with `./manage.py runserver`

## Run on Heroku
1. Run locally, install heroku toolbelt
1. Create your heroku app, provision your db, and `git push heroku`
1. Run the same setup steps on your heroku machine as you did on local:
```bash
heroku run ./manage.py migrate \
  && ./manage.py createsuperuser \
  && ./manage.py collectstatic \
  && ./manage.py loaddata cards/seed.json
```
1. For local development, copy or rename `.env.example` to `.env` for the option
to run with `foreman start` or `heroku local`

## Roadmap
1. Button and modal for "Pronunciation help"
1. Share this card on various 1-to-1 messengers
1. Button, form, and view to "Link this card to a related phrase"
1. Button, form, and view to "Add a new phrase related to this card"
1. Menu item and screen to "Search cards" / "Search deck"
1. "Levels" interface where you peruse a set of cards with the same
difficulty rating

## Chores
1. Add Users with public signup and forgot password link
  * ~~user login / logout~~
  * ~~create user~~
  * ~~reset password~~
  * forgot password

## Yak-shaving
1. Track session info like which deck we're currently working on
1. Compile bootstrap locally with mixins/vars

repository: michaelsnook/sunlo

repo_name: michaelsnook/sunlo


text:
# LuaDate v2.1

[![Build Status](https://travis-ci.org/Tieske/date.svg?branch=master)](https://travis-ci.org/Tieske/date)
[![Coverage Status](https://coveralls.io/repos/github/Tieske/date/badge.svg?branch=master)](https://coveralls.io/github/Tieske/date?branch=master)

Lua Date and Time module for Lua 5.x.

## Features:

* Date and Time string parsing.
* Time addition and subtraction.
* Time span calculation.
* Support ISO 8601 Dates.
* Local time support.
* Lua module (not binary).
* Formats Date and Time like strftime.

## License

[MIT license](http://opensource.org/licenses/MIT).

## Documentation

Documentation is available in the `doc` folder, or [online at Github](http://tieske.github.io/date/).

## Tests

Tests are located in the `spec` directory and can be run using [busted](http://olivinelabs.com/busted/).

## Changes:

- v2.1.2 fix scientific notation [#9](https://github.com/Tieske/date/pull/9), now available for Lua 5.3
- v2.1.1 fix for '>=' operator [#3](https://github.com/Tieske/date/pull/3), added test suite, added Travis CI, license MIT
- v2.1 Lua 5.2 support. Global 'date' will no longer be set.
- v2.0 original by Jas Latrix

repository: drmargarido/d-tracker

gha_language: Lua

repo_name: drmargarido/d-tracker


text:
# typescript-node-project-template
A basic node project template suitable for command line tools, micro-services, prototyping, etc.

## Getting Started
After cloning this repository:
  * npm install
  * npm run production help
  * npm run production


text:
# A Trivial Markov App

## About
I wanted a web service that grabs another web page, and uses it as a corpus for a single Markov-chain generated sentence for a joke [Slack  slash command](https://api.slack.com/slash-commands).

This repository is mostly so that when it inevitably breaks somehow, the code is still around so I don't have to rewrite it.

## Installation
1. Put `app.py` somewhere the webserver can read it.
2. Edit `app.py` to specify the verification token and corpus page. Note that the use of verification tokens has been deprecated by Slack, so this will probably eventually break.
3. Install the modules (probably in a virtualenv)
4. [Deploy it somewhere](http://flask.pocoo.org/docs/1.0/deploying/#deployment)

license: Unlicense

repository: cmchittom/trivial-markov-app

repo_name: cmchittom/trivial-markov-app


text:
```
University of Canterbury
SENG302 Group Project
29th February - 29th September 2016
```

![Xinity Logo](https://raw.githubusercontent.com/South-Paw/Xinity/master/doc/logo_xinity.png)

# Xinity
A web based musical application by EchoTech (team 4)

## What is it?
Xinity is a web based musical application for assisting with learning and improvement of various
musical skills and knowledge.

## Running Xinity
1. Package Xinity by navigating to the root folder and running `mvn clean site package`
2. Navigate to the `/target` folder and run `java -jar Xinity-X.X.X.jar`
    * Replace X's with the corresponding version number of `.jar` file.
    * This will start the application with the GUI.
3. You can also execute the application with the following additional parameters;
    * `-server` Start's the application in server mode.
    * `-server -withtestdata` Start's the application in server mode and generates databases
    populated with test data (Caution: Will overwrite any existing database contents!)

## Test Data
The `-withtestdata` flag will generate a user with test data (user details, 2 schedules and a few
schedule attempts).

* Username = `test`
* Password = `apples`

## Repo Contents
* `/.idea` IntelliJ workspace & run configurations.
* `/doc` A copy of the applications user manual and a copy of the product backlog we worked from. Also has some example runnable files and run scripts.
* `/src` Project source code.

## Sprint Releases
Please check out the sprint [release tags](https://github.com/South-Paw/Xinity/releases).

Each has an attached jars of the sprint's release. They're a pretty good indication of how far we came.

## Project Contributors
* [Adam Hunt](https://github.com/KiwiPolarBear)
* [Alex Gabites](https://github.com/South-Paw)
* Jono Smythe
* Liam McKee
* Matthew Jensen
* Peter Roger
* [William Scott](https://github.com/babycat)

![Echotech Logo](https://raw.githubusercontent.com/South-Paw/Xinity/master/doc/logo_echotech.png)

repository: South-Paw/Xinity

repo_name: South-Paw/Xinity


text:
# Indian Crossroads Traffic Warden

Indian crossroads is a Python project for traffic control solution.
The project contains three jupyter notebooks:
Actor_critic.ipynb contains the Neural Network model used for training the agent.
Environment.ipynb contains the Environment used for training the agent.
Agent.ipynb contains the training function for the Actor critic algorithm.

The algorithm used for training is Actor critic. The state space and the action space are continous.
The Neural Network estimates the parameters alpha and beta for a Beta distribution, from which the algorithm samples, in order to pick an action pair.
The actions the agent can take for each of the four cars are acceleration and curvature.
Both accelerationa and curvature are capped in the (0,1) range.
The Neural Network also estimates the sign with which the agent would take the acceleration (negative sign means the agent will decelerate the velocity of a certain car).

## Rewards per episode for different training hyperparameters

## Rewards per episode for different training hyperparameters (rolling average window = 5 episodes)

## Results
The model is unstable and very dependent on the rewards in the environment. The graphs show the fluctuations of the model.

## Usage

Clone the repo locally, and execute the code in the Environment.ipynb and Actor_critic.ipynb notebooks.
After that you can execute the code in the Agent.ipynb, as it imports the classes "Actor_Critic" and "Square_Crossroads".

Modify the hyperparameters and the rewards in the Square_Crossroads class to check how this affects the training.

**NB!** The training procedure is heavily dependant on the hyperparamters and the rewards in the Environment, which makes the training procedure prone to fluctuations.
**NB2!** The deep neural network library used is **Pytorch**

To install the latest version of Pytorch, run:

```bash
pip install torch
```

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

gha_language: Jupyter Notebook


text:
# Part 2 - Unit 1

- Abstraction
    - Assembler
    - Virtual machine
    - Compiler
    - Operating system

Example of a program written on the Jack programming language.

```
class Main {
    function main void() {
        var Point p1, p2, p3;
        let p1 = Point.new(1, 2);
        let p2 = Point.new(3, 4);
        let p3 = p1.plus(p2);
        do p3.print();
        do Output.println();
        do Output.println(p1.distance(p3));
        return;
    }
}
```

Steps:

```
                    +--> VM Emulator
                    |
  High             VM           Assembly      Machine
  level            code         code          code

program.jack ->  program.vm -> program.asm -> program.hack -> Hack CPU

             1st            2nd          assembler
            stage          stage
           compiler       compiler
```

## Virtual Machine

- Thinking in an abstract level, independent of implementation
- Stack machine
    - Operations: Push, Pop
    - Stack pointer (SP)
    - Stack memory segment

## Arithmetic/logical commands:

Command | Return value | Return type
--------|--------------|------------
add     | x + y        | integer
sub     | x - y        | integer
neg     | -y           | integer
eq      | x == y       | boolean
gt      | x > y        | boolean
lt      | x <> y       | boolean
and     | x and y      | boolean
or      | x or y       | boolean
not     | not y        | boolean

## VM memory segments

- Segments: argument, local, static, constant, this, that, pointer, temp
- Variable names/symbols not translated
- push *segment* *i*
- pop *segment* *i*

## Stack implementation

- SP stored in RAM[0] points at next available
- Stack base address = 256

Example of a translation for the VM instruction `push constant 17` into Hack assembly:

```
@17
D=A
@SP
A=M
M=D   // *SP = 17
@SP
M=M+1 // SP++
```

## Segments

### *local* segment

- LCL stored in RAM[1] is base address for *local* segment

Implementation logic:

```
pop local i:
    addr = LCL + i
    SP--
    *addr = *SP

push local i:
    addr = LCL + i
    *SP = *addr
    SP++
```

### *argument, this, that* segments

- All implemented in the same way, just using different base pointers.

### *contant* segment

- No `pop constant`
- Implementation: `push constant i` -> `*sp = i, sp++`

### *static* dedicated segment (global space)

- Translate into assembly as `filename.i`
- Example:

File `Foo.vm`
```
pop static 5

    // ... pop value from stack into D
    @Foo.5
    M=D
```

- Assembly will map from RAM[16] to RAM[255] in the order they appear

### *temp* segment

- 8 fixed positions
- Mapped on RAM[5] to RAM[12]

```
pop temp i:
    addr = 5 + i
    SP--
    *addr = *SP

push temp i:
    addr = 5 + i
    *SP = *addr
    SP++
```

### *pointer* segment

- Used by the compiler to handle THIS/THAT
- 2 fixes positions 0/1
- Accessing `pointer 0` result in accessing THIS
- Accessing `pointer 1` result in accessing THAT
- Implementation:

```
push pointer 0/1
    *sp = THIS/THAT
    sp++

pop pointer 0/1:
    sp--
    THIS/THAT = *sp
```

## Standard VM mapping

Hack RAM
- SP: 0
- LCL: 1
- ARG: 2
- THIS: 3
- THAT: 4
- Temp: 5-12
- General registers: 13-15
- Static variables: 16-255
- Stack: 256-2047

## Implementation

Suggested design:
- Main
    - Get input: filename.vm
    - Get output: filename.asm
    - Marches through input file, parsing each line and generating code from it
- Parser
    - Open file for reading
    - Reads VM command, parses into lexical components and provides access to these components
    - Ignores all white spac and comments
    - Methods: constructor, hasMoreCommands, advance, commandType (C_ARITHMETIC, C_PUSH, C_POP, C_CALL, etc), arg1: string, arg2: int
- CodeWriter
    - Generate assembly code from parsed VM command
    - Methods: Constructor, writeArithmetic, writePushPop, Close


text:
Release notes
=============

This document describes all the changes made to the *EWP Mobility Process
Explained* document, starting from its first released version.

0.5.1
-----

* Fix wording to mention approval notifications.

0.5.0
-----

**Major update of almost all chapters.**

See comments to version 0.4.0. Again, lots have changed in the APIs since last version.

0.4.0
-----

**Major update of almost all chapters.**

Lots have changed in the APIs since version 0.3.0 of this document was
released. There's no point in reiterating all the changes here - try reviewing
Git's diff instead (or simply read the new version of the document).

0.3.1
-----

* Just added a warning that the current version of this document is a bit
  obsolete in places, and that the reader should keep this mind while reading.
  (We plan to update the document thoroughly after all APIs are stable.)

0.3.0
-----

* It now describes the newer versions of the IIA-related APIs (see
  [here](https://github.com/erasmus-without-paper/general-issues/issues/12#issuecomment-231486102)).
  The workflow related to handling IIAs was significantly changed.

* The "General Workflow" section has been split into two sections:
  "Introduction to Mobilities" and "Migrating from other workflows". The latter
  one has also been moved to the end of the document.

* Minor changes and updates to all sections.

0.2.1
-----

* Added a note, that partners are not required to implement all features of the
  mobility timeline (e.g. they can implement nominations only).

0.2.0
-----

The document has been completely rewritten (as part of
[this issue](https://github.com/erasmus-without-paper/ewp-specs-mobility-flowcharts/issues/5)).
This new design [covers](https://github.com/erasmus-without-paper/ewp-wp4-use-cases)
WP2's use cases, but it hasn't been officially accepted yet. Once it is
accepted, it will be released as `v1.0.0`.

0.1.0
-----

Initial draft release.

This version hasn't been accepted nor reviewed by any partner, it's a snapshot
of a work in progress. We're assigning a version number to this particular
snapshot, because it has been briefly presented on a workshop in Brussels (it
might be easier to refer to it if it has a version number).


text:
---
path: /docs/group/
redirect_from:
  - /components/group/
  - /components/group/groupitem/
---

# Group

Accessible `Group` component that is used to identify a set of user interface objects. It implements the [WAI-ARIA Group Role](https://www.w3.org/TR/wai-aria-1.1/#group).

<carbon-ad></carbon-ad>

## Installation

```sh
npm install reakit
```

Learn more in [Get started](/docs/get-started/).

## Usage

```jsx
import { Group } from "reakit/Group";
import { Button } from "reakit/Button";

function Example() {
  return (
    <Group>
      <Button>Button1</Button>
      <Button>Button2</Button>
      <Button>Button3</Button>
    </Group>
  );
}
```

## Accessibility

- `Group` has role `group`.

Learn more in [Accessibility](/docs/accessibility/).

## Composition

- `Group` uses [Box](/docs/box/).

Learn more in [Composition](/docs/composition/#props-hooks).

## Props

<!-- Automatically generated -->

### `Group`

No props to show

repository: coreybruyere/reakit

repo_name: coreybruyere/reakit


text:
---
title: CS in Algebra Curriculum
nav: educate_nav
---

# Computer Science in Algebra
### Powered by Bootstrap

Code.org has partnered with [Bootstrap](http://www.BootstrapWorld.org) to develop a curriculum which teaches algebraic and geometric concepts through computer programming. The twenty lessons focus on concepts like order of operations, the Cartesian plane, function composition and definition, and solving word problems - all within the context of video game design. By shifting classwork from abstract pencil-and-paper problems to a series of relevant programming problems, Code.org CS in Algebra demonstrates how algebra applies in the real world, using an exciting, hands-on approach to create something cool.

At the end of the course, students will have written programs to build composite images, animations, and a complete video game of their own design, all of which can be shared to demonstrate mastery of programming and algebra. For more information, you can view our [Course Overview](/curriculum/docs/algebra/overview) and [Course Framework](/curriculum/docs/algebra/framework).

CS in Algebra is aligned to Common Core Standards for Mathematics, making it possible to integrate our curriculum into the classroom smoothly. CS in Algebra is also a model implementation of Common Core Standards for Mathematical Practice, offering explicit pedagogical recommendation across all eight practice standards. Our curriculum also satisfies several of the CSTA (Computer Science Teacher's Association) standards across levels 1 (grades K-6) and 2 (grades 6-9). For more information, you can view our [complete standards alignment](/curriculum/docs/algebra/standards).

## How do I start teaching CS in Algebra?

To offer CS in Algebra in your school, teachers are required to attend a multi-phased professional development program. The professional development program is only available in the context of a full school district partnership with Code.org. [Inquire about a District Partnership](/educate/districts) to bring CS in Algebra to your entire district. Or learn more about [middle school professional development](/educate/professional-development).

<%= partial('course_block',
	:url => "https://studio.code.org/s/algebra",
	:image => "/shared/images/courses/logo_algebra.png",
	:title => "CS in Algebra",
	:description => "Code.org CS in Algebra is a block-based adaptation of the Bootstrap curriculum, designed to provide scaffolded support to both students and teachers who are new to computer science. The twenty lessons focus on concepts like order of operations, the Cartesian plane, function composition and definition, and solving word problems - all within the context of video games."
	) %>

## Curriculum Documents

Curriculum Documents

  Lesson 1: Video Games and Coordinate Planes [U]

  Lesson 2: Evaluation Blocks and Arithmetic Expressions

  Lesson 3: Strings and Images

  Lesson 4: Contracts, Domain, and Range [U]

  Lesson 5: Writing Contracts

  Lesson 6: Defining Variables and Substitution

  Lesson 7: The Big Game - Variables

  Lesson 8: Composite Functions

  Lesson 9: The Design Recipe [U]

  Lesson 10: Rocket Height

  Lesson 11: Solving Word Problems with the Design Recipe

  Lesson 12: The Big Game - Animation

  Lesson 13: Booleans and Logic [U]

  Lesson 14: Boolean Operators

  Lesson 15: Sam the Bat

  Lesson 16: The Big Game - Booleans

  Lesson 17: Conditionals and Piecewise Functions [U]

  Lesson 18: Conditionals

  Lesson 19: Collision Detection and the Pythagorean Theorem [U]

  Lesson 20: The Big Game - Collision Detection

## Additional Support Documents
[Teacher Manual](/curriculum/docs/algebra/teacher_manual.pdf)

[Student Workbook](/curriculum/docs/algebra/student_workbook.pdf)

[Course Overview](/curriculum/docs/algebra/overview)

[Course Framework](/curriculum/docs/algebra/framework)

[Standards Alignment](/curriculum/docs/algebra/standards)

## Videos

1. Why is Algebra so Hard?

      Download the video

2. Modeling and Coordinates

      Download the video

3. Order of Operations

      Download the video

4. Domain and Range

      Download the video

[<button>See the complete collection of ten "CS in Algebra" videos</button>](videos)

## Try Bootstrap's Hour of Code tutorial
The Computer Science in Algebra course was inspired by and developed in partnership with [Bootstrap](http://www.BootstrapWorld.org). If you enjoyed CS in Algebra and you want to go further with your students, Bootstrap uses WeScheme instead of block based programming and allows you and your students to explore more complex apps, games or algebraic concepts such as recursion. If you would like to try WeScheme, or you're looking for an Hour of Code tutorial for an algebra class, we recommend this short, 1 hour tutorial designed for beginners.

[<button>Try Bootstrap: Intro to Programming</button>](http://www.bootstrapworld.org/materials/fall2015/tutorial/)

repository: stevekrenzel/code-dot-org

branch_name: refs/heads/staging

repo_name: stevekrenzel/code-dot-org


text:
# React - Redux Chat Application with Socket.io

### Getting Started

There are two methods for getting started with this repo.

#### Try the App as follows
Checkout this repo, install dependencies, then start the gulp process with the following:

```
> git clone https://github.com/askeralim/node-react-socket.io-docker-compose.git
> cd ChatApp-ReactReduxSocket.io
> npm install
#### Staring the React Server
> npm start
#### Staring the Socket.io server
> node server.js
```

http://linkedin.com/in/askeralim


text:
# scrapy-engine
A typescript WebGL game engine.

[sample](https://scrapy-sample.kami-dev.eu)

Installation
```
$ npm install scrapy-engine
```

gha_language: TypeScript