text:
---
excerpt: Let's follow the typical path the front-end project takes nowadays and
  add Redux into our React+TypeScript application. TypeScript is a powerful
  beast that we can employ to make our Redux code not only type safe, but also
  much cleaner and more readable.
author: adam
tags:
  - React
  - TypeScript
  - web
date: 2018-04-19T22:00:00.000Z
title: Using TypeScript with Redux
layout: post
image: /images/typescript_redux.png
comments: true
published: true
language: en
---

Recently we've checked [what benefits TypeScript adds in our React project](/blog/5-ways-to-benefit-from-typescript-in-react/). Let's now follow the typical path the front-end project takes nowadays and add [Redux](/blog/from-react-to-react-redux-in-a-few-steps/) into the mix. Unfortunately, by default Redux is not really type safe as it is in most cases presented as [switches over actions with arbitrary payloads](https://redux.js.org/introduction/core-concepts). But TypeScript is a powerful beast and with a bit of care we can make our Redux code not only type safe, but also much cleaner and more readable.

![Redux + TypeScript](/images/react-ts/redux-ts.png)

## Basic typing

Let's dissect the classical To Do list example from the "[Core Concepts](https://redux.js.org/introduction/core-concepts)" introductory Redux guide's page step-by-step. The global app's state originally looks as follows:

```javascript
{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}
```

It is pretty straightforward to create a type definition for this state:

```typescript
interface Todo {
    text: string
    completed: boolean
}

type VisibilityFilter = 'SHOW_COMPLETED' | 'SHOW_ALL'

interface AppState {
    todos?: Todo[]
    visibilityFilter?: VisibilityFilter
}
```

Note that `AppState`'s properties are optional as the state might initially be empty and we need to handle it in our code and thus reflect it in our type definition.

So far so good. Now Actions – they initially look like this:

```javascript
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
```

Let's for now use the typing provided by [`redux` library itself](https://github.com/reactjs/redux/blob/master/.d.ts), specifically `AnyAction` that only enforces the `type` property to be set:

```typescript
const actions: AnyAction[] = [
    { type: 'ADD_TODO', text: 'Go to swimming pool' },
    { type: 'TOGGLE_TODO', index: 1 },
    { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
]
```

Better than nothing, we can't have an Action without a type at least and we can put arbitrary data into it.

Now let me jump to Reducers. Reducers in the original example are implemented this way:

```javascript
function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter
  } else {
    return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }])
    case 'TOGGLE_TODO':
      return state.map(
        (todo, index) =>
          action.index === index
            ? { text: todo.text, completed: !todo.completed }
            : todo
      )
    default:
      return state
  }
}

// top-level reducer
function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}
```

Let's use our State and Action type definitions as a first step:

```typescript
function visibilityFilter(state: VisibilityFilter = 'SHOW_ALL', action: AnyAction): VisibilityFilter {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter
  } else {
    return state
  }
}

function todos(state: Todo[] = [], action: AnyAction): Todo[] {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }])
    case 'TOGGLE_TODO':
      return state.map(
        (todo, index) =>
          action.index === index
            ? { text: todo.text, completed: !todo.completed }
            : todo
      )
    default:
      return state
  }
}

// top-level reducer
function todoApp(state: AppState = {}, action: AnyAction): AppState {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}
```

Note that all reducers, regardless of on which level they exist, share the same generic signature:

```typescript
type Reducer<S> = (state: S, action: AnyAction) => S;
```

This is exactly the type that the built-in Redux typings provide, so we can use it in our code directly if we have an urge to generalize it more for some reason.

## Can we do more?

All we have done so far was to add the basic type definitions that could prevent us from a set of typos. But looking at the reducers, we're far from an actual type safety as `AnyAction`-typed actions – as this `any` in the name suggests – does not give the TypeScript compiler any clue what payload the particular action type actually carries. We might still make a typo while accessing action's payload properties, assume its wrong type or use the properties of action of another type by mistake and TypeScript has no tool to warn us in this case:

```typescript
function visibilityFilter(state: VisibilityFilter = 'SHOW_ALL', action: AnyAction): VisibilityFilter {
    if (action.type === 'SET_VISIBILITY_FILTER') {
        return action.fliter // note the typo here. TypeScript is unable to detect the problem here
    } else {
        return state
    }
}
```

But all hope is not lost yet. TypeScript has a powerful feature of [Discriminated Unions](https://basarat.gitbooks.io/typescript/docs/types/discriminated-unions.html) and even though this name sounds like some kind of organization of a social minority, it might help us a lot here.

Let's create detailed type definitions for each kind of action we support:

```typescript
interface AddTodoAction extends Action {
    type: 'ADD_TODO'
    text: string
}

interface ToggleTodoAction extends Action {
    type: 'TOGGLE_TODO'
    index: number
}

interface SetVisibilityFilterAction extends Action {
    type: 'SET_VISIBILITY_FILTER'
    filter: VisibilityFilter
}
```

Note that we extend Redux-provided `Action` now which only specifies a `type` property. `AnyAction` type we used before permits any property to exist in its implementations, so it defeats our desired type safety. Another interesting bit here is that we specify the `type` property with a literal, making it a good candidate for the discriminator of our discriminated union. Here is the union itself:

```typescript
type TodoAppAction = AddTodoAction | ToggleTodoAction | SetVisibilityFilterAction
```

Now let's replace `AnyAction` in our reducers with `TodoAppAction` and let's see what happens now:

```typescript
function visibilityFilter(state: VisibilityFilter = 'SHOW_ALL', action: TodoAppAction): VisibilityFilter {
    if (action.type === 'SET_VISIBILITY_FILTER') {
        return action.filter
    } else {
        return state
    }
}

function todos(state: Todo[] = [], action: TodoAppAction): Todo[] {
    switch (action.type) {
        case 'ADD_TODO':
            return state.concat([{text: action.text, completed: false}])
        case 'TOGGLE_TODO':
            return state.map(
                (todo, index) =>
                    action.index === index
                        ? {text: todo.text, completed: !todo.completed}
                        : todo
            )
        default:
            return state
    }
}

function todoApp(state: AppState = {}, action: TodoAppAction): AppState {
    return {
        todos: todos(state.todos, action),
        visibilityFilter: visibilityFilter(state.visibilityFilter, action)
    }
}
```

If you use a TypeScript-aware IDE (like [WebStorm](https://www.jetbrains.com/webstorm/), for example), you might notice that the action properties are now properly colored and the code completion works exactly as we might have dreamt. Let's now try our typo example again:

![TypeScript properly checks Action payload types](/images/react-ts/reducer-typo.png)

A victory for humanity, isn't it?

## Connected Components

One more place we might feel betrayed by Redux is where it actually [binds into React components](https://redux.js.org/basics/usage-with-react). Let's use a bit simplified example from the Redux guide again:

```jsx
import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'

// the component itself

const Link = ({active, children, onClick}) => {
  if (active) {
    return <span>{children}</span>
  }

  return <a href="" onClick={onClick}>
    {children}
  </a>
}

// redux binding

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}

const FilterLink = connect(mapStateToProps, mapDispatchToProps)(Link)
```

Let's define the types for the `Link` component's props in the straightforward way:

```typescript
interface LinkProps {
    active: boolean
    onClick: () => void
}

const Link: React.StatelessComponent<LinkProps> = props => {
  if (props.active) {
    return <span>{props.children}</span>
  }

  return <a href="" onClick={props.onClick}>
      {props.children}
  </a>
}
```

This works fine, but this way we can't go further into `mapStateToProps` or `mapDispatchToProps` as these methods compose our final props object from independent parts and we either leave it untyped or describe it with some kind of workarounds like `Partial<LinkProps>` to at least give us the basic checks:

![Workaround on mapStateToProps might help a bit](/images/react-ts/mapprops-partial-typo.png)

Note we don't have a proper type for `ownProps` here, too, and "for convenience" we used `any`. Also, this approach let us return `onClick` property here which we clearly expect to be returned only from `mapDispatchToProps` in this case. Let's be explicit about it and split our props into three separate types: one for own props (passed from the parent component), one for state-based props and one for dispatch-based props:

```typescript
interface LinkOwnProps {
    filter: VisibilityFilter
}

interface LinkStateProps {
    active: boolean
}

interface LinkDispatchProps {
    onClick: () => void
}

type LinkProps = LinkOwnProps & LinkStateProps & LinkDispatchProps
```

And now our Redux bindings are fully type safe:

```typescript
const mapStateToProps = (state: AppState, ownProps: LinkOwnProps): LinkStateProps => {
    return {
        active: ownProps.filter === state.visibilityFilter
    }
}

const mapDispatchToProps = (dispatch: Dispatch<AppState>, ownProps: LinkOwnProps): LinkDispatchProps => {
    return {
        onClick: () => {
            dispatch(setVisibilityFilter(ownProps.filter))
        }
    }
}
```

For me the type safety given by proper TypeScript definitions made Redux great again. How about you?

repository: bright/new-www

branch_name: refs/heads/gatsby

gha_language: TypeScript

repo_name: bright/new-www


text:
---
# Documentation: https://sourcethemes.com/academic/docs/managing-content/
type: project

title: "XLCloud Supra Series"
summary: "Private cloud storage with security and peak performance"
authors: []
featured: true
tags: [ "Solution", "Service", "XLCloud", "Supra", "Nextcloud" ]
categories: [ "Solution", "Service" ]
date: 2019-01-01T00:00:01+08:00

# Optional external URL for project (replaces project detail page).
external_link: ""

# Featured image
# To use, add an image named `featured.jpg/png` to your page's folder.
# Focal points: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.
image:
  caption: ""
  focal_point: ""
  preview_only: false

# Custom links (optional).
#   Uncomment and edit lines below to show custom links.
# links:
# - name: Follow
#   url: https://twitter.com
#   icon_pack: fab
#   icon: twitter

url_code: ""
url_pdf: ""
url_slides: ""
url_video: ""

# Slides (optional).
#   Associate this project with Markdown slides.
#   Simply enter your slide deck's filename without extension.
#   E.g. `slides = "example-slides"` references `content/slides/example-slides.md`.
#   Otherwise, set `slides = ""`.
slides: ""
# {{< gallery >}}
---
{{% xlcloud-menu %}}

The Supra Series are focused on performance.

The Supra series is designed for scenarios where multiple file changes and users are attached simultaneously.

All Supra series storage capacity is fixed, with system upgrades the only path to increased storage capacity.

| SKU #                 |    Memory | Processors | Storage[^1] |  Per Month | XLRestore[^2] |
|-----------------------|----------:|-----------:|------------:|-----------:|--------------:|
| DT1/160ST/8416000     |   8GB RAM |     4 vCPU |       160GB |    S$70.00 |      S$14. 00 |
| DT1/160ST/16632000    |  16GB RAM |     6 vCPU |       320GB |   S$140.00 |      S$28. 00 |
| DT1/160ST/32864000    |  32GB RAM |     8 vCPU |       640GB |   S$280.00 |      S$56. 00 |
| DT1/160ST/481296000   |  48GB RAM |    12 vCPU |       960GB |   S$420.00 |      S$84. 00 |
| DT1/160ST/6416128000  |  64GB RAM |    16 vCPU |      1280GB |   S$560.00 |     S$112. 00 |
| DT1/160ST/9620192000  |  96GB RAM |    20 vCPU |      1920GB |   S$840.00 |     S$168. 00 |
| DT1/160ST/12824256000 | 128GB RAM |    24 vCPU |      2560GB | S$1,120.00 |     S$224. 00 |
| DT1/160ST/19232384000 | 192GB RAM |    32 vCPU |      3840GB | S$1,680.00 |      S$336.00 |

{{% xlcloud-menu %}}

[^1]: XLCloud Supra Series utilize direct attached storage. Space is fixed, with upgrades to the next model (SKU) the only storage expansion path.
[^2]: XLRestore is designed primarily as a disaster recovery solution. A copy of the server and storage contents are encrypted and sent to an overseas storage service at the end of every day. These backups are kept for 30 days before being destroyed.

license: MIT

repository: xltechasia/www-xltech-static

branch_name: refs/heads/master

extension: md

license_type: permissive

repo_name: xltechasia/www-xltech-static


text:
---
layout: post
title:  "Visibility"
subtitle: "There are a number of utility classes, including a set of visibility classes. These allow content to be hidden under certain circumstances (for example at differing screen sizes)."
categories: layout
permalink: /layout/visibility/
---

Each breakpoint has it's own set of classes that can be used:

```sass
$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);
```

``` html
<div class="hide-for-small"></div>
<div class="hide-for-large"></div>
...
<div class="show-for-medium"></div>
<div class="show-for-xlarge"></div>
...
```

repository: pusher/chameleon

gha_language: CSS

gha_license_id: MIT

repo_name: pusher/chameleon


text:
### :bug: [How to report a bug](http://polite.technology/reportabug.html)

## How To Contribute

- Most work happens in sub modules. These are modules prefixed with "turf-".
- If you would like to propose a new feature, open an issue in Turfjs/turf.
- Always include tests. We use [tape](https://github.com/substack/tape).
- Turf modules are small, containing a single exported function.
- GeoJSON is the lingua franca of Turf. It should be used as the data structure for anything that can be represented as geography.
- Avoid large dependencies at all costs.
- Turf is used in a wide range of places. Make sure that your code can run in the browser (ie: don't make calls to external services, don't hit the filesystem, etc.).
- The `README.md` files in `packages/turf-<module>` are automatically generated from the [JSDocs](http://usejsdoc.org/) of the `index.js`. Please modify the JSDocs instead of modifying the `README.md` files directly. Then update/create the `README.md` executing [`./scripts/generate-readmes`](https://github.com/Turfjs/turf/blob/master/scripts/generate-readmes) or runing `npm run docs` from the root TurfJS directory.
- Finally run `npm test` from the project root folder to run all the tests required for deploying the project.

## Code Style

To ensure code style, at the `turf` root level run

```sh
$ npm run lint
```

* Follow the [AirBNB JavaScript code style](https://github.com/airbnb/javascript).
* Turf aims to use ES5 features where rational. We do not use ES6 features.

## Structure of a turf module

```
turf-<MODULE NAME>
│   index.js
│   index.d.ts
│   bench.js
│   test.js
│   types.ts
│   package.json
│   README.md
│   LICENSE
│
└───tests
    │
    ├───in
    │   points.geojson
    │
    └───out
        points.geojson
```
To get started with a new module navigate to the root directory and run
```sh
$ node ./scripts/create-new-module <MODULE NAME>
```
it will create a new folder inside `packages` with a simple boilerplate for your module.

## Publishing

Install lerna:

```bash
$ npm install -g<EMAIL_ADDRESS>```

Publish a test release:

```bash
$ lerna publish --canary
```

repository: wzwxwc/krigingStudy

repo_name: wzwxwc/krigingStudy


text:
# How to compile documentation
```shell script
cd docs
pip install -r requirements.txt
make html
```
And then go to _build/html and open `index.html` in your browser. Please do not commit compiled doc files.


text:
# Docker Python Git App

[![Docker Hub](https://img.shields.io/badge/%20-DockerHub-blue?logo=docker&style=plastic)](https://hub.docker.com/r/davidlor/python-git-app)
![Build status](https://img.shields.io/github/workflow/status/David-Lor/Docker-Python-Git-App/Build,%20Test%20&%20Push?style=plastic)

A Docker image to deploy a Python app from a Git repository, to avoid building a Docker image for each app.
The container will handle the git clone and requirements installing before the app starts for the first time.

## Features

- Clone from GIT repository
- Choose branch to clone
- Install requirements from `requirements.txt` file
- [Multiple base images & tags available](images.json)
- Multi-arch buildings: `linux/amd64`, `linux/arm/v7`
- Automatic builds on monday, wednesday and friday, for keeping images updated with the official base Python images

## Important! Required Python project structure

The entrypoint script expects the cloned repository to have the following structure:

```txt
ProjectRoot (cloned through Git)
│-  __main__.py (app entrypoint that will run)
|-  requirements.txt (if required)
│-  ...and all the other project files/directories
```

Some examples of projects compliant with this structure are:

- [Python-HelloWorld](https://github.com/David-Lor/Python-HelloWorld) (used as Git repository for testing this image)
- [MQTT2ETCD](https://github.com/David-Lor/MQTT2ETCD)
- [VigoBusAPI](https://github.com/David-Lor/Python_VigoBusAPI)
- [TelegramBot-Webhook-Updates-Receiver-Service](https://github.com/David-Lor/TelegramBot-Webhook-Updates-Receiver-Service)

## Getting started

```bash
docker run -it --rm -e GIT_REPOSITORY="https://github.com/David-Lor/Python-HelloWorld.git" davidlor/python-git-app
```

## ENV Variables & ARGs

- `GIT_REPOSITORY`: URL of the remote Git repository to get the app from (required)
- `GIT_BRANCH`: set the Branch to clone from the Git repository (optional, default: use default branch)
- `APP_NAME`: name of your app. This name is given to the directory where project is cloned on(optional, default: _PythonApp_)
- (ARG) `USERNAME`: name of the user that is created on Dockerbuild to run the app with (optional, default: _user_)
- (ARG) `FROM_IMAGE`: base full image name to be used for the build (optional, default: _python:latest_)

Only required variable is (ENV) `GIT_REPOSITORY`.
The variables marked with (ARG) are [build-args](https://docs.docker.com/engine/reference/commandline/build/#set-build-time-variables---build-arg), used on image build.

If your Python script/app is CLI-based and requires to be called with arguments (for example `python . worker --instances=10`), you can provide them as Docker command arguments, like following:

```bash
docker run -it --rm -e GIT_REPOSITORY="https://github.com/David-Lor/Python-HelloWorld.git" -e GIT_BRANCH="args" davidlor/python-git-app worker --instances=10
# This command will clone an existing branch on the example repository, and print out the custom commands provided
```

## Available tags

- The tags available for the image are a limited selection of tags used in base images, such as the [official Python images](https://hub.docker.com/_/python/).
- The list of currently supported base images and output tags, used for periodic auto-builds, are available on the [images.json](images.json) file.
- Older images no longer supported may remain in [DockerHub](https://hub.docker.com/r/davidlor/python-git-app/tags?page=1&ordering=-last_updated).

## Building

If you want to build this image (required in order to change default username, base image tag or building
for unsupported architedtures), you must do on host machine:

- Clone this repository
- Build a new Docker image using the repository directory - you can optionally set these ARGs:
  - a custom username using the `USERNAME` ARG
  - a custom base image using the `FROM_IMAGE` ARG (example: `python:alpine` or `python:slim`)
- Create a new container, setting up the desired ENV variables

```bash
git clone https://github.com/David-Lor/Docker-Python-Autoclonable-App.git DockerPythonClonable
docker build DockerPythonClonable --build-arg USERNAME=user --build-arg FROM_IMAGE=python:slim -t yourname/yourtag:yourversion
docker run [...] yourname/yourtag:yourversion
```

## Entrypoint pipeline

The steps that run when the container starts are:

- If this is the first time the container runs:
    1. clear output directory
    2. git clone
    3. pip install requirements.txt
    4. create a status file to mark the container already ran this setup process
- Start the cloned app

## Caching requirements

The startup process of new containers may be lighten up by persisting the local cache (and even the installed libraries) in volumes.
This way, multiple containers, or the same container when being recreated for upgrading or reinstalling the running application, can skip the download and/or installing process.
The two directories that can be bind to volumes are:

- `/home/user/.cache`: cached libraries; mounting this volume will avoid downloading requirements
- `/home/user/.local`: installed libraries; mounting this volume will avoid installing requirements

**It is important that the mounted directories are owned by UID:GID 1000:1000**, since the container runs as a non-root user.

Example:

```bash
# Create the volumes, unless using binds
docker volume create pythongitapp-cache
docker volume create pythongitapp-local

# Change ownership
docker run -it --rm -v pythongitapp-local:/mnt/local -v pythongitapp-cache:/mnt/cache alpine sh -c "chown 1000:1000 /mnt/*"

# Run
docker run -it --rm -e GIT_REPOSITORY="https://github.com/David-Lor/Python-HelloWorld.git" -e GIT_BRANCH="fastapi" -v pythongitapp-local:/home/user/.local -v pythongitapp-cache:/home/user/.cache davidlor/python-git-app

# Ctrl+C to stop it (container will be removed)
# "docker run" again for verifying that requirements are not downloaded/installed again
```

## Useful Make utils

- `make test` - run tests (requires root/sudo & pytest)
- `make test USE_SUDO=0` - run tests without sudo (if current user is root or part of docker group)
- `make test-classic` - run tests sequentially (make test runs in parallel using pytest-xdist)
- `make test-install-requirements` - pip install test requirements
- `sudo make build FROM_IMAGE=python:slim TO_TAG=slim` - build the image with the `python:slim` base image, and tag as `python-git-app:slim`
- `sudo make build FROM_IMAGE=python:alpine TO_IMAGE=my-python:latest` - build the image with the `python:alpine` base image, and tag as `my-python:latest`

## Changelog

- 0.6.1
  - Exec Python on entrypoint to force PID=1
- 0.5.1
  - Add arm64 support for all images
  - Remove unsupported pyston armv7 arch
- 0.4.1:
  - Allow passing arguments to Python script/app (for example, for calling CLI-like apps)
- 0.3.1
  - Add new tags: pyston (based on [pyston/pyston](https://hub.docker.com/r/pyston/pyston)), pypy (based on [pypy](https://hub.docker.com/_/pypy))
  - Refactor tags.json into images.json, referencing complete source images, target tags and archs for each supported tag
  - Refactor multiple variables for new images.json format on Makefile, tests and workflow
- 0.2.4
  - Update Build-Test-Push workflow: reduce cron frequency to 3 days per week; only test&build when changing files involving the image
  - Add new workflows: Tag from PR, Update license year
- 0.2.3
  - Add new tags: slim-buster, rc, rc-buster, rc-slim, rc-slim-buster, rc-alpine, 3.9, 3.9-slim, 3.9-alpine, 3.8, 3.8-slim, 3.8-alpine, 3.7, 3.7-slim, 3.7-alpine, 3.6-slim
  - Delete tags: 3.7.9-buster, 3.7.9-alpine, 3.7-slim-stretch, 3.6-slim-stretch, 3.5-slim-stretch
- 0.2.2
    - Avoid triggering Github Workflow on tag push
    - Cache Docker builds on Github Workflow
    - Refactor Github Workflow for running "Test No-Build" and "Build&Push" jobs separately
- 0.2.1
    - Multi-arch support in Github Workflow
- 0.1.1
    - Upload to DockerHub from Github Workflow
    - Fix cmd in Dockerfile, change from `bash` to `sh` (Alpine compatibility)
    - Fix `test-nobuild*` rules in Makefile
    - Fix `image_tag` param on tests
    - Rename `IMAGE_TAG` to `IMAGE_NAME` when refering to the full image name (`name:tag`)
    - Remove Python 2 from tags (not officially supported here)
- 0.0.1
    - Initial release

## TODO

- Allow setting GIT repository through CMD
- Allow disabling pip cache
- Allow running arbitrary command for app initialization
- Load SSH private key for cloning SSH git repositories (from path or secret)
- Run as root with an env variable - or another image tag
- Tag & upload images based on official Python image tags, plus versions of this repository

repository: David-Lor/Docker-Python-Git-App

gha_language: Python

repo_name: David-Lor/Docker-Python-Git-App


text:
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) > [@apextoaster/js-config](./js-config.md) > [ConfigOptions](./js-config.configoptions.md) > [include](./js-config.configoptions.include.md)

## ConfigOptions.include property

<b>Signature:</b>

```typescript
include: IncludeOptions;
```

repository: ssube/js-config

repo_name: ssube/js-config


text:
# rails-vacation-portfolio-project

  - Rails Vacation Portfolio Project by Gebremeskel Gebrehiwot attending Flatiron School

My third Flatiron project assignment was to build a rails app from scratch. The project is about creating a location where the user can make trip budget within the list of locations or make a trip budget with a new location.
My app is called, vacation-rails-project, has many-to-many relationships. The app has user to signup and a sessions to login, after sign up or login the user able to access locations to create city and country.
To start the project,  I run 'rails new vacation-rails-project' in my terminal. I used a 'Rails generator resources', which creates a bunch of folder and files for users, locations, trips, & travels.

# Prerequisites/Installation
I added 'gem' on Gemfile:
gem 'bcrypt', '~> 3.1.7'
gem 'omniauth'
gem 'omniauth-google-oauth2'
gem 'omniauth-rails_csrf_protection'
gem 'dotenv-rails'
Run bundle install
Run rails db:create and rails db:migrate
Run rails s to start the application

# Models
The project app is built with Ruby on Rails and follows the basic MVC pattern. There are four models: User,Location,Trip,and Travel.
First I created the relationships between the model class.

  class User < ApplicationRecord
      has_many :locations
      validates :email, presence: true, uniqueness: true
      validates :username, presence: true
      has_secure_password
  end

  class Location < ApplicationRecord
    belongs_to :user
    has_many :trips
    has_many :travels, through: :trips
    validates :city, presence: true
    validates :country, presence: true
  end

  class Trip < ApplicationRecord
    belongs_to :location
    belongs_to :travel
    validates :budget, numericality: {greater_than: 0, less_than: 15000}
  end

  class Travel < ApplicationRecord
      has_many :trips
      has_many :locations, through: :trips
      validates :name, presence: true
      validates :address, presence: true
  end

I also added basic ActiveRecord validations for most things to require input of the group model to validates the attributes. I run rails db:migrate in the terminal to update db/schema.rb file to match the up-to-date structure of  database.
A sample seed file can be created by running "rake db:seed". The db/seeds.rb file can be modified the associations of tables in database. I checked the relationships with running rails console in the terminal.

In the models I created the scope methods, reasonable validations,  has_secure_password in users file model, including signup, login, logout, and passwords, authentication along with Omniauth to allow login using google service.

Also I make a nested routes with the appropriate RESTful URLs with a nested new index or show routes with form that relates to the parents resource. I make the form to display validation errors messages describing the validation failures within the view. I make a lot of partial views to avoid dupulicated codes and the application to be 'DRY' by using layouts, partials, helpers and refactoring.

# Controllers
There are five (locations, sessions,travels, trips, and users) controllers. The controllers implement RESTful routes and more importantly nested routes.  I built a Sessions controller to deal with login and logout logic. I wanted user to be able to login using either username/password combination OR OAuth2 through Google, so there are both “sessions#create” and “sessions#create_with_google” routes.

 Also I setting up partials to use local variables allows you to use the partials across any controller view without needing to duplicate the code.
I created methods in helpers folder, models folder, html in views folder, tables  and data in db folder, routes and omniauth.rb file in config folder, in addition I created .env folder to write google client id & secret.

This project was really fun and challeging to build. I learned a lot and still I feel I’ve to learn more in Rails.

# Code & Demo
You can check out this project on Github 'https://github.com/Gebre2020/vacation-rails-project' or see the demo 'https://www.youtube.com/watch?v=AuyppfWgn9E' hosted.

## License & copyright
Licensed under the [MIT License](LICENCE).

branch_name: refs/heads/main


text:
---
title: Previewing eCatalogs in the eCatalog Viewer
seo-title: Previewing eCatalogs in the eCatalog Viewer
description: null
seo-description: Learn how to preview eCatalogs in the eCatalog viewer.
uuid: fdaf2129-e558-4f27-b30f-564126b6b3f2
contentOwner: admin
content-type: reference
products: SG_EXPERIENCEMANAGER/Dynamic-Media-Classic
geptopics: SG_SCENESEVENONDEMAND_PK/categories/ecatalogs
discoiquuid: 92022dce-6534-4d93-befe-9dd2818c7b41

---

# Previewing eCatalogs in the eCatalog Viewer{#previewing-ecatalogs-in-the-ecatalog-viewer}

You can use Preview to display your eCatalog using different eCatalog Viewer Presets. You can experiment with the different controls to turn pages, write sticky notes, and browse.

See [Configuring Default Viewers](application-setup.md#configuring_default_viewers).

See [Previewing an asset](previewing-asset.md#previewing_an_asset).

**To preview eCatalogs in the eCatalog Viewer**

1. In the Asset Library panel on the left side, in the Show drop-down list, select a video-based asset type such as Video or Video Set.
1. In the Asset Library panel on the left side, navigate the Asset folders that contain videos that you want to preview with an eCatalog Viewer.
1. Do one of the following:

    * Above the Assets window, on the right side of the toolbar, click Grid View. In the Asset window, below the thumbnail image, click Preview > Viewer List.
    * Above the Assets window, on the right side of the toolbar, click List View. In the Asset window, select an asset, and then to the right of the thumbnail image, click Preview > Viewer List.
    * Above the Assets window, on the right side of the toolbar, click Detail View. On the same toolbar, click Preview > Viewer List.

1. In the Viewer List window, in the table, click a viewer link to preview the asset in the selected viewer.
1. Close the displayed viewer to return to the Viewer List screen.
1. In the lower-right corner of the Viewer List window, click Close to return to the Assets screen.

>[!MORELIKETHIS]
>
>* [Setting up eCatalog Viewer Presets](setting-ecatalog-viewer-presets.md#setting_up_ecatalog_viewer_presets)


text:
<!-- Working with third-parties #thirdparties -->

# Working with third-party libraries

## How Styleguidist works

Styleguidist _loads_ your components (see [Loading and exposing components](Components.md#loading-and-exposing-components) for more) but it uses [react-docgen](https://github.com/reactjs/react-docgen) to _generate documentation_ which may require changes in your code to work properly.

React-docgen reads your components as static text files and looks for patterns like class or function declarations that look like React components. It does not run any JavaScript code, so, if your component is dynamically generated, is wrapped in a higher-order component, or is split into several files, then react-docgen may not understand it.

It supports components defined via `React.createClass`, ES6 classes and function components, with optional Flow and TypeScript type annotations.

In many cases you may trick Styleguidist and react-docgen by exporting both components: an enhanced component as the default export and a base component as a named export:

```javascript
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

// Base component will be used by react-docgen to generate documentation
export function Button({ color, size, children }) {
  /* ... */
}

// Enhanced component will be used when you write <Button /> in your example files
export default CSSModules(Button, styles)
```

Each example is rendered in an independent React root. You can control React Context by defining a custom Wrapper component like this:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}
```

Please see our [examples](https://github.com/styleguidist/react-styleguidist/tree/master/examples) and refer to [react-docgen](https://github.com/reactjs/react-docgen) documentation for more information about what types of syntax are supported.

While Styleguidist supports TypeScript out of the box, thanks to `react-docgen`, this support is limited. Consider this example:

```javascript
import Button from 'antd/es/button'

export default Button
```

Here we’re reexporting a third-party component from `node_modules`. Styleguidist won’t be able to render prop types of this component, unless we’re using `react-docgen-typescript`:

1. Install [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript).
2. Create a `styleguide.config.js`, see [configuration](Configuration.md) reference.
3. Update your `styleguide.config.js`:

   ```javascript
   module.exports = {
     propsParser: require('react-docgen-typescript').withCustomConfig(
       './tsconfig.json'
     ).parse
   }
   ```

## Using Styleguidist with other libraries

### Redux

To use Redux store with one component, import it from your Markdown example:

````jsx
// ```jsx inside Markdown
import { Provider } from 'react-redux'
import configureStore from '../utils/configureStore'
const initialState = {
  app: {
    name: 'Pizza Delivery'
  }
}
const store = configureStore({ initialState })
;<Provider store={store}>
  <App greeting="Choose your pizza!" />
</Provider>
````

To use Redux store in every component, redefine the `Wrapper` component:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}
```

```jsx
// src/styleguide/Wrapper.js
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from '../utils/configureStore'
const initialState = {
  app: {
    name: 'Pizza Delivery'
  }
}
const store = configureStore({ initialState })
export default class Wrapper extends Component {
  render() {
    return <Provider store={store}>{this.props.children}</Provider>
  }
}
```

### Relay

**First, mock out Relay.** You’ll need the content from [this Gist](https://gist.github.com/mikberg/07b4006e22aacf31ffe6) for your mocked-out Relay replacement.

```js
// styleguide.config.js
const path = require('path')
const merge = require('webpack-merge')
module.exports = {
  webpackConfig: merge(require('./webpack.config'), {
    resolve: {
      alias: {
        'react-relay': path.join(
          __dirname,
          'src/styleguide/FakeRelay'
        ),
        'real-react-relay': require.resolve('react-relay')
      }
    }
  })
}
```

```js
// src/styleguide/FakeRelay.js
import Relay from 'real-react-relay'
// Copy contents from https://gist.github.com/mikberg/07b4006e22aacf31ffe6
```

**Second, provide sample data to your React components** to send actual results from your GraphQL backend:

```js
// styleguide.config.js
module.exports = {
  context: {
    sample: path.join(__dirname, 'src/styleguide/sample_data')
  }
}
```

```js
// src/styleguide/sample_data.js
module.exports = {
  object: {
    // Something similar to your GraphQL results
  }
}
```

````jsx
// ```jsx inside Markdown
<MyComponent object={sample.object} />
````

_Based on @mikberg’s [blog post](https://medium.com/@mikaelberg/writing-simple-unit-tests-with-relay-707f19e90129)._

### Styled-components

To show PropTypes documentation for [styled-components](https://www.styled-components.com/), you need to add the `@component` JSDoc annotation to the component export:

```jsx
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const SalmonButton = styled.button`
  background-color: salmon;
  border: 1px solid indianred;
  color: snow;
`

Button.propTypes = {
  children: PropTypes.node
}

/** @component */
export default SalmonButton
```

> **Caution:** Object notation isn’t supported yet, use string literals instead:

```diff
- const Button = styled.button({
-  color: 'tomato'
- })
+ const Button = styled.button`
+  color: tomato;
+ `
```

> **Caution:** Other use case for calling the `styled` factory as a function, like styled-system, aren’t supported too:

```diff
- const Input = styled.input(
-  css({
- 		boxSizing: 'border-box',
-     // ...
- 	})
- );
```

#### Adding styled-components `ThemeProvider`

If your styled-components require a theme to render properly, add a `ThemeProvider` to your style guide.

First, create a `Provider` component:

```jsx
// src/Provider.js
import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'

export default function Provider({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}
```

Next, add `Provider` to your `styleguide.config.js`:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/Provider.js')
  }
}
```

This will automatically apply your theme to your styled-components. When you open the style guide by running `npx styleguidist server`, you should see your components render as expected.

### Emotion

The usage is similar to [styled-components](#styled-components).

### Theme UI

The usage is similar to [Adding styled-components `ThemeProvider`](#adding-styled-components-themeprovider).

### Fela

Check out the [official example](https://github.com/rofrischmann/fela/tree/master/examples/example-with-styleguidist).

### CSS Modules with react-css-modules

You need to export two components: (1) unstyled React component as named export and (2) enhanced component as a default export:

```javascript
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

export function Button({ color, size, children }) {
  /* ... */
}

export default CSSModules(Button, styles)
```

This approach will also work with [react-css-themr](https://github.com/javivelasco/react-css-themr) and other similar libraries.

### Styletron

To use Styletron store with one component, require it from your example:

````jsx
// ```jsx inside Markdown
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'
;<StyletronProvider styletron={new Styletron()}>
  <App greeting="Choose your pizza!" />
</StyletronProvider>
````

To use Styletron in every component redefine the Wrapper component:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}
```

```jsx
// src/styleguide/Wrapper.js
import React, { Component } from 'react'
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'
export default class Wrapper extends Component {
  render() {
    return (
      <StyletronProvider styletron={new Styletron()}>
        {this.props.children}
      </StyletronProvider>
    )
  }
}
```

repository: styleguidist/react-styleguidist

repo_name: styleguidist/react-styleguidist


text:
---
layout: post
title: The Brilliance of Scotus
tags:
-
comments: true
date:
---

There is no doubt that John Duns Scotus was brilliant. After arguing that it is possible that a being exist that is not dependent on any other, he then inferred that such a being must exist. If there were no such being, then nothing could be done to cause such a being to exist, for then it would be both dependent and not dependent on another. So, if there is no being that is not dependent on any other being, it would be impossible for there to be one. Since it is possible for there to be one, by Modus Tollens, such a being exists.

repository: rlridenour/jekyll-blog

repo_name: rlridenour/jekyll-blog


text:
# TODO
* Allow version requirements
* Allow flag for "custom installation" when a package needs to be built from source
* Run aptitude show for all packages at once then parse to avoid multi-cmd overhead

repository: ngauthier/aptinstaller

extension: markdown

repo_name: ngauthier/aptinstaller


text:
# Writing Your First Test

This section will describe how to configure Bard in order to write your first API test. This example demonstrates the simplest way to use Bard and does not use the more advanced StoryBook feature which we will cover in more detail in this section of the [documentation](../scenario/given/).

## Configure The Scenario

So before we can start we need to configure our Scenario. To do this we are going to need provide two things.

* A `System.Net.Http.HttpClient` in order to call our API
* A function to tell our Scenario how to log. This is optional but important because Bard provides detailed logs to the test output windows to help with writing and debugging test failures. If not supplied Bard will ouput all log messages to the Console window which may not appear in your test output.

```csharp
var scenario = ScenarioConfiguration
                .Configure(options =>
                {
                     options.Client = httpClient;
                     options.LogMessage = output.WriteLine;
                });
```

{% hint style="info" %}
 The GitHub repository has some example tests you can see a working example [here](https://github.com/sjclark76/Bard/blob/master/src/Bard.Tests/BankingTestBase.cs).
{% endhint %}

## Write The First Test

We've configured our Scenario now. Assuming our API is running now we can start by calling it.

So lets give it a spin by writing a test that calls our fictitious Banking API and creating a new bank account. We expect our API to return a 201 Created response.

```csharp
[Fact]
public void When_creating_a_bank_account()
{
      Scenario
              .When
              .Post("/api/bankaccount/, new BankAccount
                {
                    CustomerName = "Kilian Jornet"
                });

      Scenario
              .Then
              .Response
              .ShouldBe
              .Created();
}
```

And we're done. If we look at the output from our Test we should see some nice logging that includes the request and the response.

```javascript
****************************************
*             WHEN                     *
****************************************

REQUEST: POST api/bankaccounts
{
  "id": null,
  "isActive": false,
  "customerName": "Kilian Jornet",
  "balance": 0.0
}

RESPONSE: Http Status Code:  Created (201)
Header::Location http://localhost/api/bankaccounts/1
{
  "id": 1,
  "isActive": false,
  "customerName": "Kilian Jornet",
  "balance": 0.0
}
```

repository: dennisroche/Bard

repo_name: dennisroche/Bard


text:
Boilerplate app
===================

# Create environment
* Make sure you have nodejs and npm installed, check that using node version 10 or above `node -v`
* Install ionic 5 if you haven't already, run `npm -g i ionic` (this might require `sudo`)
* Check that you have the latest ionic client installed, run `ionic -v`, the version when writing this is higher than 4.6.0
* Run `npm install` to download all dependencies
* Run `ionic serve`
* Go in your browser to the address `http://localhost:8100`

# Connect to firebase
* Create a firebase project
* Go to the project settings (next to Project overview menu item)
* Under general find the webapp config which should look like
```javascript
const environment = {
    production: false,
    firebase: {
        apiKey: '...',
        authDomain: '...',
        databaseURL: '...',
        projectId: '...',
        storageBucket: '...',
        messagingSenderId: '...'
    },
};
```
** Note the app would not work if you don't set up this settings properly **

* Copy these settings to `environments/environment.ts`
* In the Authentication tab, enable authentication types you would like to enable using the app. This boiler plate supports facebook, google and email login.

# Deploy
* Install `firebase-tools` by running `npm i -g firebase-tools` (`sudo` might be required)

# Different views and services
## `LoginPage`
## `SignupPage`
## `AboutPage`
## `AuthService`

### AppComponent
The app starts in this page, which contains also the menu with links to other pages

# Services

### AnalyticsProvider
Google Analytics provider for app

repository: cunla/ionic-firebase-boilerplate

repo_name: cunla/ionic-firebase-boilerplate


text:
# JiNexus Http

`JiNexus Http` is created to provides an object oriented interface to global variables such as
$_GET, $_POST, $_FILES, $_COOKIE and $_SERVER as well as easy access to other
useful request information.

- File issues at https://github.com/jinexus-framework/jinexus-http/issues
- Documentation is at https://framework.jinexus.com/documentation

repository: jinexus-framework/jinexus-http

repo_name: jinexus-framework/jinexus-http


text:
# DadaJS

### Why?

I used AbsurdJS to build the CSS for a major project ([Higher Ed Careers Canada][1], if you are curious or you need a job at a college or university). It was great - the power of a preprocessed without having to learn and switch to another syntax.

However, AbsurdJS is pretty new and far from mainstream. I found myself struggling with a few yet unsolved issues:

  * **Syntax** rules of Javascript itself reduced the readability and power of my code.
  * **Organization** of my AbsurdJS code was a challenge. I found myself wanting to make code modular in ways that weren't elegant or easy.
  * **Quoting** values and _some_ properties became tiresome.
  * **Optically** it looked _too much_ like CSS. My brain kept on wanting to end declarations with semicolons.

In my mind, AbsurdJS didn't go far enough. I wanted it to be more Javascript and less like CSS.

###### Syntax

Key to one of the issues I had with the syntax of Javascript that caused issues is how object literals treat the _left-side_.

    var someSelectors = 'h1,h2,h3',
        myStyle = {
            someSelectors : { color : 'red' }
        };

If you evaluate this, you'll get a result that completely ignores the variable `someSelectors`. Instead of assigning `{ color : 'red' }` to `h1,h2,h3` it goes to `someSelectors` instead. We all know why this happens in Javascript from a language perspective, but, gosh darn it, I want to be able to define a group of selectors easily and elegantly.

Another example of the _left-side_ problem is non-evaluation. Anything in an object literal on the left side is not evaluated - you lack the ability to do anything to it. Here is a simple code style issue caused by the syntax:

    var worksButUgly = {
            '.lots .of-classes .in-super .long-selector, .maybe .you .want .it-in-multiple .lines' : {
                color : 'red'
            }
        },
        causesError = {
            '.lots .of-classes .in-super .long-selector,'+
            '.maybe .you .want .it-in-multiple .lines' : {
                color : 'red'
            }
        };

While long selectors aren't exactly a best practice, they happen sometimes. Putting everything into one line causes some real code readability issues and there isn't an elegant way to solve this.

###### Organization

Say you want to make your styles modular - it can get a bit clunky to mix things together. Dada provides an extra layer of modularity.

###### Quoting

Quoting, for me, was the worst part about defining styles in AbsurdJS. Left-side declarations are cleverly converted from camelCase, but on the right side it is all quoted string land. This become especially painful if you want to do math with values on the right side.

    var
        baselineSize = '24px';
        ugh = {
            h2 : {
                fontSize : baselineSize + '5px' // = 24px5px (not good)
            }
        }

Another issue:

    var
        myStyle = {
            h2 : {
                display : block //should be 'block'
            }
        }

Typing common values in quotes over and over is a pain. This can be solved somewhat by using atoms, but I found that was a game of constant look up and poor readability.

###### Optics

AbsurdJS reminds me of a computer I had as a child when compared to vanilla CSS - a [Tandy][2]. It was sold at Radio Shack and it was _almost_ 100% compatible with IBM standards. Which was great - until that _almost_ part came in. See, your mind was trained into thinking it would just work when you threw IBM PC software at it. And actually, it could do more than a standard IBM product. But when it didn't work because of the slight incompatibilities it was very frustrating.

To my eye, the object literal notation syntax is so optically close to CSS declaration blocks that it _causes_ errors. I can't tell you how many times I failed to escape a selector or used a semicolon instead of a comma.

### How?

###### Array Zero Selectors

DadaJS introduces _Array Zero Selectors_. This means that your zeroth element in an array passed to DadaJS is the selector. This solves the left-hand object literal issue - meaning we can preform operations and use variables in our selectors. Elements 1 to n are standard AbsurdJS declaration blocks and will be combined together from top down. Example:

    var someSelectors = 'h1,h2,h3',
        myStyle = [
            [
                [ someSelectors, { color : 'red' } ],
                [ someSelectors+',h4', { fontWeight : 800 } ]
            ]
        ];

You'll notice that moving from the object literal syntax to array zero, your styles are decidedly not CSS - your mind will be less likely to shift back into vanilla CSS mode.

If you pass an array into the zeroth element of the array, Dada will automatically join the array elements with a comma and treat them like individual selectors.

###### Unit-_izers_

To avoid having to convert numbers into strings, you can use `dada.unit` to create a function that returns the number value plus the unit. This makes math on numeric values elegant.

    var px  = dada.unit('px'),
        h2Size  = 24,
        myStyle = [
            [
                ['h2', { fontSize : px(24) }],
                ['h3', { fontSize : px(h2Size*0.9) }]
            ]
        ]

###### Inbuilt Vocabulary

Quoting the common right side values are a pain. By using `dada.cssVocab` in a `with` statement, you can bestow your styles with a big (but maybe not exhaustive) list of vocabulary. Also included are a number of CSS functions that pass their arguments in the correct format. Now, `with` statements [are often considered harmful][3], but in this limited circumstance, they add a lot of value. It is optional, so if you want to continue to use quotes throughout your styles, by all means.

    var myStyle;

    with (dada.cssVocab) {
        myStyle = [
            [
                ['h2', { display : block }] //look ma, no quotes
            ]
        ];
    }

`dada.cssVocab` adds about 300 new variables inside the with scope. Weigh the naming issue for your particular application. If you have some conflicts, you can use `dada.cssVocabExcluding('vocabToExclude1',...'vocabToExcludeN'_)` to specifically remove certain vocabulary in the with statement.

###### Talking Selectors

CSS selectors are pretty amazing, but they often land on the unreadable side for novice programmers. Dada provides a few 'talking' functions selectors.

    var
        myStyle = [
            [
                [
                    dada.select.allWith('h2','.profile-name','.profile-description'), // evaluates to h2, .profile-name, .profile-decription
                    {
                        color      :    'red'
                    }
                ]
            ]
        ];

###### Setting multiple values at one time

Sometimes you need to set multiple attributes to one value, this can be accomplished easily with `theseTo`

    var
        myStyle = [
            [
                [
                    dada.select.allWith('h1','h2','h3'),
                    dada.theseTo(['padding','margin'], 0)
                ]
            ]
        ];

###### Color Spaces

CSS 'ships' with one colors space - RGB (and the close alpha-enabled cousin, RGBA). Some browsers may expand that, but color is pretty important, so most of the time people stick with RGB. Hex values are quick to type but hard to "see". I had the need to add some others. _Note: these are converted to RGB as it passes to AbusrdJS, so it doesn't actually enable anything new. Also included is an RGB function to allow for quote-free usage._

    // these will all evaluate to 'rgb(221,68,68)'
    console.log(dada.rgb(221, 68, 68));
    console.log(dada.hsl(0, 69.2, 56.7)); //hue, saturation, lightness at 0, 69.2%, 56.7%
    console.log(dada.hsv(0, 69.2, 86.7)); //hue, saturation, value 0, 69.2%, 86.7%

    // these will all evaluate to 'rgba(221,68,68,0.5)'
    console.log(dada.rgba(221, 68, 68, 0.5));
    console.log(dada.hsla(0, 69.2, 56.7, 0.5));
    console.log(dada.hsva(0, 69.2, 86.7, 0.5));

    // CMKY and CMKYa represent a color gamut, so they will get as close as possible
    // in this case it should be the same color as above but evaluates as rgb(222,69,69) / rgba(222,69,69,0.5)
    console.log(dada.cmyk(0, 69, 69, 13));
    console.log(dada.cmyka(0,69,69,13,0.5));

###### Grid

Dada ships with a built in grid system based on [PocketGrid][4]. PocketGrid is very useful and minimal, I suggest you read up on the concepts behind it on the PocketGrid site. The HTML markup is identical.

The following DadaJS creates a minimal grid for a 2 unit sidebar and a 3 unit main area. Notice the two different styles - the `.nav` class we specify the width, and in the `.main` class we are letting Dada create the object. Do what ever is cleanest for your project.

    styles = [
        dada.grid, //this loads in dada.grid, based on PocketGrid
        [
            [   //specify the width in your styles
                '.nav', {
                   width        : dada.gridUnit(2/5)
                }
            ],
            [   // or just let dada put it into an object for you
                '.main', dada.gridWidth(3/5)    //this could have been { width : dada.gridUnit(3/5) }
            ]
        ]
    ];

##### Usage
Dada sits between your styles and Absurd. It is simple as using the `assemblage` method inside the attribute for Abusrd's compile.

    var
      Absurd = require('absurd'),
      dada = require('dada'),
      styles = [/*your styles*/];

    Absurd(dada.assemblage(styles)).compile(function(err, css) {
      if (err) {
        /// handle your error
      } else {
        // send or write your brand new CSS
      }
    });

[1]: http://higheredcareers.ca/
[2]: http://en.wikipedia.org/wiki/File:Sabu_with_his_Tandy_1000_Computer.jpg
[3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with
[4]: http://arnaudleray.github.io/pocketgrid/

repository: stockholmux/dada-js

gha_language: JavaScript

repo_name: stockholmux/dada-js


text:
## Adjusting Network Connection

The Selenium [Mobile JSON Wire Protocol Specification](https://github.com/SeleniumHQ/mobile-spec/blob/master/spec-draft.md) supports an [API](https://github.com/SeleniumHQ/mobile-spec/blob/master/spec-draft.md#104) for getting and setting the network connection for a device. The API works through a bitmask, assigning an integer to each possible state:

| Value (Alias)      | Data | Wifi | Airplane Mode |
| ------------------ | ---- | ---- | ------------- |
| 0 (None)           | 0    | 0    | 0 |
| 1 (Airplane Mode)  | 0    | 0    | 1 |
| 2 (Wifi only)      | 0    | 1    | 0 |
| 4 (Data only)      | 1    | 0    | 0 |
| 6 (All network on) | 1    | 1    | 0 |

### iOS

Unfortunately, at the moment Appium does not support the Selenium network
connection API for iOS.

### Android

There are the following limitations:

#### Real Devices

* Changing Airplane Mode state only works for Android 6 and older
* Chaning data connection state works for Android 4.4 and older. Newer OS releases (5.0+) must be rooted in order to make the feature working (e. g. _su_ binary should available)
* Changing Wi-Fi connection state should work for all Android versions

#### Emulators

* Changing Airplane Mode state only works for Android 6 and older
* Chaning data connection state should work for all Android versions
* Changing Wi-Fi connection state should work for all Android versions

### Windows

Unfortunately, at the moment Appium does not support the Selenium network
connection API for Windows.

```javascript
// javascript
// set airplane mode
driver.setNetworkConnection(1)

// set wifi only
driver.setNetworkConnection(2)

// set data only
driver.setNetworkConnection(4)

// set wifi and data
driver.setNetworkConnection(6)
```

Retrieving the network connection settings returns the same bitmask, from which
the status can be decoded.

```javascript
// javascript
driver.getNetworkConnection().then(function (connectionType) {
  switch (connectionType) {
    case 0:
      // no network connection
      break;
    case 1:
      // airplane mode
      break;
    case 2:
      // wifi
      break;
    case 4:
      // data
      break;
    case 6:
      // wifi and data
      break;
  }
});
```

repository: testerhome/appium

repo_name: testerhome/appium


text:
Exhibition.js
-------------

Create a gallery with your pictures and videos hosted on Flickr. Doesn't use any backend so you can host this gallery wherever you want.

Installation
------------

Just download the project, or git clone it, and place the content of the /public directory in the public area of your web server.

Then create a config.js file, based on example.config.js, and simply put your username and Flickr API key. You can get an API key for free here http://www.flickr.com/services/api/misc.api_keys.html

Enjoy!

repository: podefr/exhibition

repo_name: podefr/exhibition


text:
# bsc1bscDAI

Steps to unwrap:

**bsc1bscDAI → 1bscDAI → bscDAI → DAI**

**bsc1bscDAI → 1bscDAI**

1)  First, you need to bridge your bsc1bscDAI from Harmony to Binance.

Operation details:

from Harmony ****to ****Binance

type: **BEP20**

custom token: **0x418cc9B962c1b2942B8E8395fF349e3b2fEF748b**

![bsc1bscDAI.png](../../../.gitbook/assets/bsc1bscDAI.png)

**1bscDAI → bscDAI**

2) As a result, you will get **1bscDAI**.

Please bridge your 1bscDAI from Binance to Harmony.
Settings: **HRC20,** custom token: **0x1d374ED0700a0aD3cd4945D66a5B1e08e5db20A8**

![1bscDAI.png](../../../.gitbook/assets/1bscDAI.png)

Now you should have **bscDAI** in your wallet.

**bscDAI → DAI**

You can swap your bscDAI tokens or send them back to BSC and get DAI.

If you want to swap your tokens, you can use [https://viperswap.one/#/swap](https://viperswap.one/#/swap) or ask about available DEX in the Harmony community groups.

If you want to bridge your tokens back, you need to do the following operation:
from ****Harmony to **Binance**
type: **BEP20**
Choose **DAI Token (DAI)** from the list (the address is **0x1AF3F329e8BE154074D8769D1FFa4eE058B1DBc3**)

![bscDAI.png](../../../.gitbook/assets/bscDAI.png)

repository: harmony-one/docs-home

repo_name: harmony-one/docs-home


text:
Search `DCLazyInstantiate` on Alcatraz Package Manager

### Via source

1. Clone this repo

2. Then build the `DCLazyInstantiate` target in the Xcode project and the plug-in will automatically be installed in `~/Library/Application Support/Developer/Shared/Xcode/Plug-ins`

3. Restart Xcode.

### Via command-line

```shell
curl -fsSL https://raw.githubusercontent.com/Tengag/DCLazyInstantiate/master/script/install.sh | sh
```

## Usage

Move your cursor to the property you want to generate lazy instantiation.
### In Xcode

```
Xcode -> Edit -> DCLazyInstantiate
```

### DCLazyInstantiate Shortcut (default)

```
Shift + Cmd + -
```

You can change the shortcut in Settings, `Xcode -> Edit -> DCLazyInstantiate -> Settings`.

## Todo

1. Mutiselect property support.
2. Customizing code style.
3. Insert instantiation in specific prama mark section.

gha_language: Objective-C


text:
# CameraCalibration
Contains methods for calibrating a camera

## Compiling Instruction:

### Packages to install

* Gradient Descent
```
git clone https://github.com/Rookfighter/gradient-descent-cpp.git
cd gradient-descent-cpp
mkdir build
cd build
cmake ..
make -j8
sudo make install
```
* LibNabo
* Qt5
* PCL
* Eigen
* OpenMP

Now this package should be compiled without any hassle.

## Run Instructions:
For visualizing the results, do
```./pcl_visualizer <config_file>```
See the example to see how the data is organized. The point cloud used for the optimization should be of the form [cloud name]_[number].[ply/pcd/xyz], where number identifies the camera location base_T_flange. Common issues include, but not limited to wrong metrics, wrong file locations, etc.

The optimizer won't work if the initial estimate is way off. Check this using the visualizer.

For running the optimizer do the following,
```./camera_calibration_optimization <config file>```

The results can be obtained from the file: results.txt

## Brief Summary of the optimizer

The optimizer needs the following inputs:
Point cloud of a plane taken at various orientations and fk values for the corresponding positions.
The approximate flange_T_camera transformation.
Few points on the plane taken in the robot base frame - This is done to get an estimate of the true plane. We can also use the input point clouds transformed to the base frame for obtaining this approximation.

The optimizer runs a discrete combinatorial optimization on the flange_T_camera to minimize the error between the true plane and the individual planes.
Then the flange_T_camera transformation is further optimized using gradient descent.

## License
[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

repository: REXJJ/rgbd-camera-calibration

repo_name: REXJJ/rgbd-camera-calibration


text:
# influxdb-demo

This is a demo of a tick stack.

## Quick Start

Run `vagrant up` to start the vms (Note the provisioning should work automatically however in some cases it isnt run properly and the tick stack will be using default config. If that does happen try running `vagrant provision`)

When its all up go to http://<IP_ADDRESS>:8888

Go through the initial setup (The urls should use the ip address `<IP_ADDRESS>` not the default value of `localhost`).

## Project Structure

### Vagrant

There is a vagrant file that will start two vms, one to run the stack and one to make the metrics more interesting.

The Vagrant vms are provisioned with the docker and shell provisioners.

### Scripts

The `scripts` directory contains the shell scripts used by the vagrant provisioner

| Script        | Description                      |
| ------------- | -------------------------------- |
| telegraf.sh   | Installs and configures telegraf |
| syslog.sh     | Installs and configures syslog   |
| docker.sh     | Configures docker daemon         |

### Config

The `config` directory contains the config files for the various services. These are then either moved into the appropiate directory by one of the scripts or mounted into a docker container.

| Config             | Description                                                 |
| ------------------ | ----------------------------------------------------------- |
| daemon.json        | Configures docker logs to go to telegraf (Work in progress) |
| influxdb.conf      | Config for influxdb                                         |
| kapacitor.conf     | Config for kapacitor                                        |
| syslog.conf        | Configures vm syslog to go to telegraf                      |
| telegraf.conf      | General config for telegraf                                 |
| telegraf_tick.conf | Telegraf config for influx and kapacitor metrics            |

### Dashboards

These are just some dashboards I made. They can be manually impotred into capacitor after its all setup


text:
# ansible-template
a template ansible project to provide simple deployment for other projects

## Usage

### Clone the Project

From your project root, clone this project to the `ansible` directory
```
git clone https://github.com/inoc603/ansible-template.git ansible
```

You can delete git metadata in this project
```
rm -rf ansible/{.git,.gitignore}}
```

### Project layout

```
.
├── Makefile
├── defaults              // default value files
├── files                 // static files
├── inventory             // inventory files for different environment or stage
│   └── example.ini       // the template inventory file
├── roles                 // custom roles
├── templates             // jinja2 templates
├── test-playbook.yml     // an example playbook
└── vars                  // variable files for each environment
    ├── example.yml       // the template variable file
    └── secrets           // encrypted variable files
        └── example.yml   // the tempalte variable file encrypted with ansible vault
```

### Add New Environment

An environment `example` will have 3 files, `inventory/example.ini`,
`vars/example.yml`, `vars/secrets/example.yml`. To create a new environment
from an existing one, run:

```bash
make env tpl=example env=new-env
```

This will copy the 3 files of the `tpl` environment to `new-env`. You can then
modify inventory and var files of `new-env`.

### Add New Playbook

Playbooks should be placed under the project root. As in `test-playbook.yml`,
any playbook should use the following variable files, where the variable
`inventory` is the name of the environment.

```yaml
vars_files:
  - "vars/{{ inventory }}.yml"
  - "vars/secrets/{{ inventory }}.yml"
```

### Managing Secret Values

Sensitive data in a play is encrypted with ansible vault, and stored in
`vars/secrets/*.yml`. You should put the password for ansible vault in file
`.vault.pass` in the project root. The default password is `pass`. To Change the
password, run `make rekey`, and echo the new password to `.vault.pass`.

To edit an encrypted var file, run:

```bash
make edit-secret env=example
```

### Run Playbook

To run a playbook, for example `test-playbook.yml`, run

```bash
make run/test-playbook
```


text:
# react-asynchronous-component

`react-asynchronous-component` resolves component asynchronously  with the support for code-spliting.

`react-asynchronous-component` gives you power to split your bundles into small chunks with webpack and lazy load them,
this reduces the cost of initial JS to be downloaded. for big projects its ideal to use code-spliting because the
bundle size increases and a lot of useless javascript is download which really is not required for the first render.

## Prerequisite
- You are using [React 15+](https://reactjs.org/)
- You are using [Webpack 2+](https://webpack.js.org/)

## INSTALL
`npm install react-asynchronous-component`

## Features
- code spliting
- asynchronously resolves component
- Show a `LoadingComponent` until your component is resolved.
- Show an `ErrorComponent` if your component resolution fails.

## Usage

lets say you have a `Home` component which has a lot of content and assets in it.

```
export default function Home() {
  return <div>hell home</div>
}

```
or
```
const Home = () =>  <div>hello home</div>

```

to implement async rendering and code spliting for home component

```
import React from 'react';
import Async from 'react-asynchronous-component';

const AsyncHome = (props) => (
    <Async
        load={import(/* webpackChunkName: "home" */ './home')}
        loader={()=><p>loading</p>}
        error={()=><p>sime error occured</p>}
        componentProps={props}
    />
);

// loader and error expect a react component or simple string.

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome React Async Component</h1>
            <AsyncHome someProps="somevalue" />
        </div>
      </div>
    );
  }
}
export default App
```

**best usecase**
in your react router you can convert all routing components to async components
which makes each route a chunk. saves a lot of initial load time.

```
import React from 'react';
import PropTypes from 'prop-types';
import { Switch, withRouter, Redirect, Route } from 'react-router-dom';
import Async from 'react-asynchronous-component';

const AsyncHome = props => (
    <Async
        componentProps={props}
        load={import('./Home.component' /* webpackChunkName: "home" */)}
        loading="loading...."
        error="error...."
    />
);

const AsyncProfile = props => (
    <Async
        componentProps={props}
        load={import('./Profile.component' /* webpackChunkName: "profile" */)}
        loading={()=><p>loading....</p>}"
        error={()=><p>Error....</p>}
    />
);
const AsyncErrorPage = props => (
    <Async
        componentProps={props}
        load={import('./ErrorPage.component' /* webpackChunkName: "errorpage" */)}
        loading="loading...."
        error="error...."
        />
    );

const Routes = () => (
  <div className="routes-wrapper">
      <Switch>
        <Route exact path="/"  component={AsyncHome}  />
        <Route exact path="/profile" component={AsyncProfile}  />
        <Route exact path="/error/:type"  component={AsyncErrorPage}  />
        <Redirect to={`/error/not-found`} />
      </Switch>
  </div>
);
export default withRouter(Routes);

```
You can view this snippets in context [here](https://github.com/hannadrehman/react-production) !


text:
# 16S-rRNA End-to-End Analysis

Qiime2 and DADA2 are one of the latest bioinformatics tools used in 16S rRNA End to End RNA analysis. The current Qiime2 and DADA2 pipelines support End to End 16S RNA analysis, -with informative information, among other analyses.

## 16S RNA

### What is the 16S rRNA

[16S rRNA](https://www.cd-genomics.com/16S-18S-ITS-Amplicon-Sequencing.html) (16S ribosomal RNA), is a component of the prokaryotic ribosome 30S subunit. The “S” in 16S is a sedimentation coefficient, that is, an index reflecting the downward velocity of the macromolecule in the centrifugal field. The higher the value, the greater the molecule. The 16S rRNA gene is the DNA sequence corresponding to rRNA encoding bacteria, which exists in the genome of all bacteria. 16S rRNA is highly conserved and specific, and the gene sequence is long enough.

More about 16S RNA sequencing and its importance can be read though the [following link](https://www.cd-genomics.com/blog/16s-rrna-one-of-the-most-important-rrnas/).

While Qiime2 may be interactive and facilatated for your your use as a Bioinformatician, Qiime2 works best through what are termed as Qiime2 artifacts. If you are unfamiliar with Qiime2 as an analysis tool, you can read more about [it here](https://docs.qiime2.org/2020.8/) and participate through its various tutorials.

DADA2 is more straightforward and requires no specially formarted files. DADA2 pipelines are mostly an R package analysis tools with the option of saving images generated in quality plots.

Git clone this repo : https://github.com/BryanAbuchery/16S-rRNA-End-to-End-Analysis.git

The pipelines explored here follow a analysis tutorial pipelines with the end goal of understanding an End to End 16S rRNA analysis with experimental datasets obtained from H3eaBionet as is shown below:

## Set Up And Installation (QIIME2)

`cd 16S-rRNA-End-to-End-Analysis`

For you to be able to follow this workflow;

1. Install Qiime2 by following [this link](https://docs.qiime2.org/2020.8/install/native/).

2. Activate the Qiime2 environment to conda install fastqc through [clicking here](https://anaconda.org/bioconda/fastqc). Alternatively, there is a .yml Qiime2-2020.8 environment on this repo. On the terminal; `cd QIIME2-End-to-End-Analysis/Qiime2_env/` and bash `conda create -f Qiime2_env.yml` After running successfully, bash `conda activate Qiime2-2020.8`

3. To download dataset and metadata used in this mock analysis and run the pipeline, `cd QIIME2-End-to-End-Analysis && bash scripts/16srna-deblur.sh` or `cd QIIME2-End-to-End-Analysis && bash scripts/16srna-dada2.sh` Qiime2 involves both Deblur and DADA2 plugins used for feature table creation. You can run either of the two. However, Training Classifiers with Qiime2 for the SILVA database is resource-intensive. It requires you to be logged onto a HPC. You can move the scripts directory to a HPC and `bash scripts/16srna-deblur.sh` if you decide to use deblur for denoising or `bash scripts/16srna-dada2.sh` to use dada2. You can also use a database of your choice. Remember to module avail Qiime2 and FastQc on the HPC before you bash. If they aren't available, please contact your system administrator. For the purposes of this mock analysis, the Greengenes database was used. The script can work with most local computers and is not as resource-intensive as the SILVA database.

4. Some people prefer to have their downstream downstream analysis done with R. Make sure you have installed the latest R version and then install Phyloseq. Phyloseq is an R package that lets you explore microbiome profiles using R. You can read more about [it here](https://joey711.github.io/phyloseq/). Install Phyloseq through first installing the [Bioconductor package](https://bioconductor.org/install/) and then install Phyloseq itself [through here](http://bioconductor.org/packages/release/bioc/html/phyloseq.html)

5. You can also follow your own 16S or other Microbiome Analyses through following [this Phyloseq tutorial](https://vaulot.github.io/tutorials/Phyloseq_tutorial.html)

6. Please ensure that you read the documentation for each of the scripts used. The automatic manifest file maker was adapted [from this repo](https://github.com/Micro-Biology/BasicBashCode/blob/master/BasicScripts/Q2_manifest_maker.py) The script that exports Qiime2 artifacts into objects that can be used with phyloseq was adopted from [this tutorial](http://john-quensen.com/tutorials/processing-16s-sequences-with-qiime2-and-dada2/) More information about importing dada2 artifacts into phyloseq can also be obtained [from here.](http://john-quensen.com/r/import-dada2-asv-tables-into-phyloseq/)

## Set up and installation (DADA2)

On your terminal (after cloning the repo) `cd 16S-rRNA-End-to-End-Analysis/DADA2-End-to-End-Analysis`

To be able to run a DADA2 analysis pipeline, there are dependency packages that cannot be run on R version lower than 4.0 Therefore, this installation step provides guidelines from updating your R and your packages to setting up your DADA2 pipeline in the event that you are using a 3.x R version. All your older packages will still be preserved.

1. Install and/or update your R version and re-install all of your packages [through here](https://medium.com/@hpgomide/how-to-update-your-r-3-x-to-the-r-4-x-in-your-linux-ubuntu-46e2209409c3)

2. Switch to R.

3. Install the [Bioconductor package](https://www.bioconductor.org/install/) and all its [core packages](https://www.bioconductor.org/install/)

4. Install DADA2 dependency packages; DADA2, Phyloseq, Tidyverse, DECIPHER and Decontam. The links for installing them are found here below, in that order:

* [Installs DADA2](https://www.bioconductor.org/packages/release/bioc/html/dada2.html)

* [Installs Phyloseq](https://bioconductor.org/packages/release/bioc/html/phyloseq.html)

* [Installs Tidyverse](https://www.tidyverse.org/packages/)

* [Installs DECIPHER](https://www.bioconductor.org/packages/release/bioc/html/DECIPHER.html)

* [Installs Decontam](https://bioconductor.org/packages/release/bioc/html/decontam.html)

5. Exit R

6. Download the dataset and the metadata used for this mock analysis by running `bash scripts/download.sh`

7. Run DADA2 End-to-End Analysis by running `Rscript scripts/dada2_pipeline.R`

In a computational resource-challenged environment, move the the scripts directory in this directory to the HPC and run steps 2 to 7. However, the R module used on the HPC has to be R version 4.x Contact your systems administrator to ensure that this is available for you. Load the R VERSION 4.x module and rrun steps 2 to 7. This mock analysis for the DADA2 pipeline assumes that your data has been demultiplexed and the trimming done for to remain with quality datasets.

## Resources

[H3eaBionet Datasets/metadata used and SOP](https://h3abionet.github.io/H3ABionet-SOPs/16s-rRNA)

### QIIME2 Analysis

1. [Moving pictures tutorial](https://docs.qiime2.org/2020.11/tutorials/moving-pictures/)

2. [QIIME2 16S rRNA Analysis tutorial](http://compbio.ucsd.edu/wp-content/uploads/2016/10/20170712_microbiome_16s_tutorial_non-interactive.pdf)

3. [QIIME2 data analysis tutorial](https://docs.qiime2.org/2020.11/tutorials/overview/)

4. [How to make a manifest file for importing data into QIIME2 artifact](https://github.com/Micro-Biology/BasicBashCode/blob/master/BasicScripts/Q2_manifest_maker.py)

### DADA2 Analysis

1. [DADA2 16S rRNA Analysis tutorial](https://astrobiomike.github.io/amplicon/dada2_workflow_ex)

2. [DADA2 analysis tutorial](https://benjjneb.github.io/dada2/tutorial.html#)

3. [DADA2 Pipeline for multiplexed data](https://github.com/amoliverio/dada2_fiererlab)

## Bugs
There are no known bugs, but incase of any feel free to reach any collaborators of this repository.

## LICENSE
[MIT](https://github.com/BryanAbuchery/16S-Qiime2-2020.8-E2E-/blob/main/LICENSE)


text:
# dfrag

A minimalist functional abstraction to create DOM fragments.

# Why this project?

The two target users for this project are:

 + Developers stuck with an old codebase that creates DOM via string concats (or worse yet, via jQuery).
 + Developers building simple apps that don't merit the overhead of setting up Babel, WebPack, React, etc.

The goal of this project is to not be used at all. The target audience is the sad developer that needs to maintain an old codebase where you create lots of HTML by concatenating strings. If this describes a project you're working on, and refactoring that codebase to use React or something slightly more advanced to simplify the DOM creation is not an option, then this project might be a reasonable alternative.

This single function module exists to simplify creation of DOM fragments in a way that is both terse and clear. When you need to concatenate multiple strings to create a tag with a few attributes, mixing those single quotes and double quotes can get difficult to look at, and easy to mess up. With the API exposed in this module, that issue should be solved completely.

This project is not meant to be a new silver bullet. If you're building a new application, or if you have the option to use a full-fledged view framework/library, by all means, use the other alternative.

# API

The API exposed by `dfrag` is simple:

    dfrag(type: string, props: Object, children: string|Array<Element>): Element

If you squint hard enough, you can see `React.createElement` in there...

 + `type` is the name of the element being created. Example: `'p'` or `'div'`
 + `props` is an optional object of DOM properties. Example: `{ className: 'btn btn-primary', id: 'main-button', onClick: () => alert('Clicked!'), dataCustomAttribute: 23 }`
 + `children` is an optional parameter. If it is a string or a number, it will be set as the element's `textContent`. If it is an array, each of the elements will be assumed to be DOM elements, and will be appended to the main element.

# Usage

```javascript
var title = dfrag('h1', { className: 'title', style: 'color: #c00' }, 'DOM Fragments');
var container = dfrag('div', {}, [
   title,
   dfrag('hr'),
   dfrag('ul', {}, [
     dfrag('li', {}, 'Aint no virtual dom'),
     dfrag('li', { style: 'text-decoration: line-through' }, 'Better than Angular'),
     dfrag('li', {}, '...')
   ]),
   dfrag('button', { disabled: true }, 'Submit'),
])

document.body.appendChild(container);
```

repository: formigone/dfrag

repo_name: formigone/dfrag


text:
# KVConstraintExtensionsMaster

## -----: Go Easy On Programatically Constraints :----
### ``` + Points ```

 - [x] No need to use more ``` IBOutlet reference ``` of the constraint instead of this you can directy access already applied constraint (means expected constraint) either applied ``` Programatically ``` or ``` Interface Builder ```on any view.

 - [x] You can easily add those constraints that are not ``` possible or very difficult from StoryBoard/xib```.

 - [x] Since Constraints are ``` cumulative ``` & do not override to each other. if you have an existing constraint, setting another constraint of the same type does not override the previous one. So ``` This library add any constraint only once ``` so you don't need to worry about what happened if we ``` add same ``` constraint many time.
 - [x] Easily ``` modify ``` any constraint and ``` replace ``` it with new constraint too.

 - [x] Easily ``` modify ``` any constraint with nice animation.

 - [x] you can easily ``` add Proportion/Ratio ``` constraints too in iOS 7,8,9 and later.

 - [x] you can ``` add multiple ``` constraints by writing few lines of code.

 - [x] All the methods of this library have prefixes ``` prepare ```or``` apply ``` according their behaviour. so you don't need to remember all methods just type method prefixes then ``` compiler automatically``` gives you ``` suggestions ``` for methods.

 A method which has prefixe ``` prepare ``` - is used to either prepare the constraint or prepare the view for the constraint.
 A method which has prefixe ``` apply ``` - is used to apply\add the constraint into its appropriate view.

``` Usage ```
-----

- drag the KVConstraintExtensionsMaster folder into your project.
- import the KVConstraintExtensionsMaster.h file in class
```objective-c
#import "KVConstraintExtensionsMaster.h"
```

```
##  ------: Just Two steps to Apply\Add constraints by programatically :------
```
  ``` Step 1 ``` Create & configure the view hierarchy for constraint first.

  ``` Step 2 ``` Apply the constraints by calling KVConstraintExtensionsMaster library methods which have prefix
                 ``` apply ``` according to constraints by selected view.

```
@interface ViewController ()

@property (strong, nonatomic) UIView *containerView;// may be any view like /*containerView*/

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.

    [self createAndConfigureViewHierarchy]; // Step 1
    [self applyConstaint];   // Step 2
}

- (void)createAndConfigureViewHierarchy
{
    self.containerView = [UIView prepareNewViewForAutoLayout];
    self.containerView.backgroundColor = [UIColor Purple];
    [self.view addSubview:self.containerView];
}

-(void)applyConstaint
{
    // Here we are going to apply constraints
    [self.containerView applyLeadingPinConstraintToSuperviewWithPadding:20];
    [self.containerView applyTrailingPinConstraintToSuperviewWithPadding:20];

    //  we can also apply leading and trailing of containerView both by using the below method.
        But this method is only useful when both leading and trailing have same pading.
    // [self.containerView applyLeadingAndTrailingPinConstraintToSuperviewWithPadding:0];

    [self.containerView applyTopPinConstraintToSuperviewWithPadding:65.0f];
    [self.containerView applyBottomPinConstraintToSuperviewWithPadding:50.0f];
}

@end

```

License
-----

KVConstraintExtensionsMaster is released under the MIT license.

repository: aayubhagat/KVConstraintExtensionsMaster

repo_name: aayubhagat/KVConstraintExtensionsMaster


text:
# Recipe for Redux with Redux Toolkit, Typescript Thunk and Hooks

After a lot of research and refactoring, I manage to reduce a lot of verbose in my React apps.
I couldn't find a recipe online for Redux, Thunk, Typescript and Hooks.
Hence, I want to share what I did.

![App Demo](AppScrenshot.gif)

For explanation, check my [Medium story](https://medium.com/@christianjocker/recipe-for-redux-with-typescript-thunk-and-hooks-f16bd7e845fe) or [YouTube Video](https://www.youtube.com/watch?v=DAv_GWLRlgg)

repository: cjoecker/counter-reduxtoolkit-example

repo_name: cjoecker/counter-reduxtoolkit-example


text:
# PyData '14 PlanOut Tutorial
Welcome to the PyData '14 Silicon Valley PlanOut tutorial! You'll find a collection of IPython notebooks for Eytan Bakshy's tutorial on PlanOut.

If you want to follow along the live tutorial on your own computer (or are not at PyData!), you need to install some software and clone the PlanOut git repository.

## Requirements
### Software requirements
The tutorial requires IPython, Pandas, and PlanOut. The former two come with Anaconda. PlanOut has only been tested on Mac OS X and Linux.

 * IPython ([installation instructions](http://ipython.org/install.html). We recommend Anaconda.)
 * PlanOut v0.2 or greater (first timers `sudo easy_install planout`, older timers `sudo easy_install --upgrade planout`)
 * Node.js - optional (installation link on the [node.js homepage](http://nodejs.org))

Note that you may need to re-install the `planout` package if you installed PlanOut before installing IPython.

### Downloading the tutorial files
If you have git, you can checkout PlanOut by typing:

```
git clone https://github.com/facebook/planout.git
```

or you can [click here](https://github.com/facebook/planout/archive/master.zip) to download a zip archive.

## Loading up the tutorial notebooks
Navigate to your checked out version of PlanOut and type:

```
cd contrib/pydata14_tutorial/
ipython notebook --pylab inline
```

Tutorial files include:
 * `0-getting-started.ipynb`: This teaches you the basics of how to implement experiments in pure Python.
 * `1-logging.ipynb`: How data is logged in PlanOut and examples of how to analyze PlanOut log data with Pandas.
 * `2-interpreter.ipynb`: How to generate serialized experiment definitions using (1) the PlanOut domain-specific language (2) automatically, e.g., via configuration files or GUIs.
 * `3-namespaces.ipynb`: How to manage simultaneous and follow-on experiments.

repository: marquisthunder/planout

gha_license_id: NOASSERTION

repo_name: marquisthunder/planout


text:
# Password Class

This is a simple class that uses the standard PHP methods _[password_hash()]_ and _[password_verify()]_ to create a hashed password and compare the hash to entered passwords respectively.  The primary purpose of this class is to remove some of the boilerplate code required when performing these password operations.

The class defaults to using the default algorithm that PHP selects (per version) and a cost of 10.  Both can be set when creating the hash.

> _**NOTE:**_ It is recommended that database columns that store hashes created with `password_hash()` are at least 255 characters wide, as the length of hashes will grow in future versions of PHP!

## INSTALLING

#### Via Composer

Run the following command in the same directory as your composer.json file:

`php composer.phar require jabarihunt/password`

#### Via Github

1. Clone this repository into a working directory: `git clone git@github.com:jabarihunt/password .`

2. Include the Password class in your project...

```php
require('/path/to/Password.php')
```
...or if using an auto-loader...
```php
 use jabarihunt/Password;
```

## USAGE

The `Password::create()` and `Password::compare()` methods will throw exceptions if invalid data is passed to them, so be sure to use try/catch blocks!

#### Creating Password Hashes

```php
<?php

    $password = 'FooBar1@';

    try {
        $hash1 = Password::create($password);                       // basic usage
        $hash2 = Password::create($password, PASSWORD_BCRYPT);      // set algorithm
        $hash3 = Password::create($password, PASSWORD_BCRYPT, 12);  // set algorithm & cost
    } catch (\Exception $e) {
        var_dump($e);
    }

    echo "hash1: {$hash1} <br/> hash2: {$hash2} <br/> hash3: $hash3}";

?>
```

```
/* OUTPUT*/
hash1: $2y$10$lqfDbrxDEwnw34uaJCBN4OLatL3XKWnxuIwBTHqhcY5NVvvljlnd6
hash2: $2y$10$2b2nHGE1Jx58AyHxVwWiq.EC039DNB9HLzcY.3b7tpEdIvLg6j30q
hash3: $2y$12$e284Os/7zD4MsxXFX9h5UuKj3disIkmOkIJRzj4CnMoT3np7tyD2y
```
#### Comparing Passwords And Hashes

Using our first hash from above...

```php
<?php

    $password = 'FooBar1@';
    $hash     = '$2y$10$lqfDbrxDEwnw34uaJCBN4OLatL3XKWnxuIwBTHqhcY5NVvvljlnd6';

    try {
        $passwordIsValid = Password::compare($password, $hash);  // returns boolean
        var_dump($passwordIsValid);
    }
    catch (\Exception $e) {
        var_dump($e);
    }

?>
```

```
/* OUTPUT*/
/var/www/html/controllers/HomeController.php:7:boolean true
```

#### Validating Passwords

There is a third method, `Password::isValid()`, that validates if a password follows the below rules and returns a `boolean`.  Eventually I'll add functionallity to pass your own rules.  This method doesn't throw any exceptiones.

**Password Rules:**
- Is not empty
- Contains at least 8 charatcters
- Contains at least 1 uppercase letter
- Contains at least 1 lowercase letter
- Contains at least 1 number
- Contains at least 1 symbol

You can optionally pass a second `string` parameter called `$username` that will make sure the password does not contain the username (or whatever the passed string contains).

```php
<?php

    $username = 'Foo';

    $password1 = 'FooBar';
    $password2 = 'FooBar1@';

    var_dump(Password::isValid($password1));
    var_dump(Password::isValid($password2));
    var_dump(Password::isValid($password2, $username));

?>
```

```
/* OUTPUT*/
/var/www/html/controllers/HomeController.php:8:boolean false
/var/www/html/controllers/HomeController.php:9:boolean true
/var/www/html/controllers/HomeController.php:10:boolean false
```

## CONTRIBUTING

1. Fork Repository
2. Create a descriptive branch name
3. Make edits to your branch
4. Squash (rebase) your commits
5. Create a pull request

## LICENSE

This project is licensed under the MIT License - see the [LICENSE.md] file for details

[password_hash()]: <http://php.net/manual/en/function.password-hash.php>
[password_verify()]: <http://php.net/manual/en/function.password-verify.php>
[LICENSE.md]: <LICENSE.md>

repository: jabarihunt/password

repo_name: jabarihunt/password


text:
# codenames_ai
Using sentence encoders to play codenames!

Still in development.
Check out the [codenames_ai](codenames_ai.ipynb) notebook for a walkthrough.

## Requirements
* tensorflow >= 1.7
* tensorflow_hub
* sklearn