text:
# RenderScriptMigration Sample

## Introduction

[RenderScript is being deprecated](https://android-developers.googleblog.com/2021/04/android-gpu-compute-going-forward.html) since Android 12. We recommend computationally intensive applications to use [Vulkan](https://www.khronos.org/vulkan), the cross platform industry standard API. Please refer to the [RenderScript Migration Guide](https://developer.android.com/guide/topics/renderscript/migrate) for more details.

To help developers for the migration, this sample is created to demonstrate how to apply the image filtering to a bitmap with the Vulkan compute pipeline. The sample creates a common ImageProcessor interface, on the top of Vulkan Compute and RenderScript, that performs two compute tasks:
- HUE rotation: A simple compute task with a single compute kernel.
- Blur: A more complex compute task which executes two compute kernels sequentially.

Both tasks are implemented with RenderScript (intrinsics & custom scripts) and Vulkan to demonstrate the migration from RenderScript to Vulkan Compute pipeline.

## Pre-requisites

- Android Studio Arctic Fox 2020.3.1+
- SDK Build Tools 31.0.0+
- NDK r20+
- Android API 29+

## Getting Started

1. Download Android Studio.
2. Launch Android Studio.
3. Open the sample directory.
4. Click Tools/Android/Sync Project with Gradle Files.
5. Click Run/Run 'app'.

## Screenshots

## Support

We highly recommend to use [Stack Overflow](http://stackoverflow.com/questions/tagged/android) to get help from the Andorid community.

If you've found an error in this sample, please file an issue:
https://github.com/android/renderscript-samples

Patches are encouraged, and may be submitted by forking this project and
submitting a pull request through GitHub.

repository: android/renderscript-samples

repo_name: android/renderscript-samples


text:
---
layout: post
title:      "Find Your Support Group(s)!"
date:       2019-04-16 12:15:55 -0400
permalink:  find_your_support_group_s
---

I wanted to talk about my support groups in Slack that I could not live without! I am very close to those who are in my first support group, and we talk about random life stuff as much as we talk about school and coding. I've also started to get to know some more of my fellow students and have created separate groups, which currently are a bit more formal, talking mainly about the labs and helping with curriculum.

And without any of them, I'm not sure how I could have gotten this far in the program. I am grateful to have as many resources as possible. I would argue that is critical to reach out and connect with as many people as you can.

Of course everyone is different, as well as our processes for learning and working. However, it's hard for me to imagine a scenario where, once graduated, I will be working on projects on my own. Therefore, not only are my support groups helpful and necessary now, it feels like practice for the "real world."

If you're reading this, going through one of the programs, and you haven't cultivated one or more small groups within your cohort, reach out to a couple people today. Make those connections!

Whenever I feel burnt out, or completely lost, I can always count on my groups to give me a lift. It's also nice to see others sharing your similar frustrations and be able offer them words of support and comfort too. We praise each other's accomplishments, help where we can, and sometimes talk about Game of Thrones or Avengers theories...

I am thankful for my Flatiron friends and without them I don't think I'd be where I am today in the program!

branch_name: refs/heads/master

extension: markdown

license_type: permissive


text:
# Network interfaces

Declare a MicroVM's virtual network interfaces like this in its NixOS
configuration:
```nix
{
  microvm.interfaces = [ {
    type = "tap";

    # interface name on the host
    id = "microvm-a1";

    # Ethernet address of the MicroVM's interface, not the host's
    #
    # Locally administered have one of 2/6/A/E in the second nibble.
    mac = "02:00:00:00:00:01";
  } ];
}
```

## `type = "user"`

User-mode networking is only provided by qemu and kvmtool, providing
outgoing connectivity to your MicroVM without any further setup.

As kvmtool seems to lack a built-in DHCP server, additional static IP
configuration is necessary inside the MicroVM.

## `type = "tap"`

Use a virtual tuntap Ethernet interface. Its name is the value of
`id`.

Some Hypervisors may be able to automatically create these interfaces
when running as root, which we advise against. Instead, create the
interfaces before starting a MicroVM:

```bash
sudo ip tuntap add $IFACE_NAME mode tap user $USER
```

When running MicroVMs through the `host` module, the tap network
interfaces are created through a systemd service dependency.

## `type = "macvtap"`

*MACVTAP* interfaces attach to a host's physical network interface,
joining the same Ethernet segment with a separate MAC address.

Before running a MicroVM interactively from a package, do the
following steps manually:

```bash
# Parent interface:
LINK=eth0
# MACVTAP interface, as specified under microvm.interfaces.*.id:
ID=microvm1
# Create the interface
sudo ip l add link $LINK name $ID type macvtap mode bridge
# Obtain the interface index number
IFINDEX=$(cat /sys/class/net/$ID/ifindex)
# Grant yourself permission
chown $USER /dev/tap$IFINDEX
```

When running MicroVMs through the `host` module, the macvtap network
interfaces are created through a systemd service dependency. Per
interface with `type = "macvtap"`, a `link` attribute with the parent
interface, and `mode` attribute for the MACVTAP filtering mode must be
specified.

## `type = "bridge"`

This mode lets qemu create a tap interface and attach it to a bridge.

The `qemu-bridge-helper` binary needs to be setup with the proper
permissions. See the `host` module for that. qemu will be run
*without* `-sandbox on` in order for this contraption to work.

license: MIT

branch_name: refs/heads/main

extension: md

gha_language: Nix

gha_license_id: MIT


text:
# dotfiles
Linux shell dotfiles

* Clone the repository into temporary folder
```bash
git clone https://github.com/MariusUrkis/dotfiles.git
```
* Issue command
```bash
make install
```

repository: MariusUrkis/dotfiles

repo_name: MariusUrkis/dotfiles


text:
# Tracking tester

Copyright (c) 2020-2021 [Antmicro](https://www.antmicro.com)

*For an example on how to use this repository, see* [ros-tracking-policy-examples repository](https://github.com/antmicro/ros-tracking-nodes-policy-examples).

The ROS node, which gives annotated frames, tests a detecting/tracking system, measures its performance and returns results in a `.csv` file.
It also uses the `stopwatch` node from the [ros-tracking-nodes-stopwatch repository](https://github.com/antmicro/ros-tracking-nodes-stopwatch) to gather additional measurements.

### Node usage

The node is created to run one test and dies afterwards.

* `-v`, `--visualize` - Print frames on screen, optional
* `-f`, `--fps` - FPS of playback, optional - wait mode is default
* `-i`, `--input` - path to directory containing frames and annotations
* `-o`, `--output` - path where output should be saved, .csv file extension, optional

The tested node should subscribe to topic `tracking_tester/frame` and publish to topic `tracking_tester/bbox`.

### Input format

There should be an image file of a common format (readable by OpenCV) for each frame and one annotation in the input directory.

Image names should be in format `number.extension` where `number` is an arbitrary integer (possibly with leading zeros).
Frames are processed in the increasing number order (sorted numerically, not lexicographically).

The annotation file should have the [ALOV dataset](http://alov300pp.joomlafree.it/dataset-resources.html) format, that is:

* there is one line for each frame
* each line is in form `ord X1 Y1 X2 Y2 X3 Y3 X4 Y4`
* `ord` is an integer describing frame number, starting from one
* the other 8 numbers describe corners of the rectangular bounding box, (current version assumes `Y1 = Y2`, `Y3 = Y4`, `X1 = X3`, `X2 = X4`)

It is assumed that the target is visible in every frame.

### Output

The result of one test is a `.csv` file (with a header) in the following format:

`frame_number,time,iou,left,top,width,height,realLeft,realTop,r ealWidth,realHeight`

where:

* `time` is `ros::Time` as a real number.
* `left`, `top`, `width`, `height` specify the parameters of the bounding box received from the tested policy.
* `realLeft`, `realTop`, `realWidth`, `realHeight` describe the ground-truth bounding box from the dataset.
* `iou` is Intersection over Union of these two bounding boxes.

Other files might be written to the directory containing the provided output file.

## Automated tester script

There is a Python3 script `test.py` supplemented, which runs tester and generates output, which can be parsed by `vot-report-generator`.

### Script and config

The script can test multiple policies at once. For each policy to be tested, there should be four consecutive lines in `test.config` file.

```
policy_name
an integer - FPS of playback or zero for wait mode
a command which will be exectued before a test
a command which will be executed after a test
```

Example:

```
my_detector                             # name of the policy
60                                      # run at 60 fps
./detector-node --threshold 0.7         # start the node before every test
rosnode kill detector-node              # kill the node after every test
...
detector2                               # name a different of the policy
0                                       # use wait mode
rosservice call /detector2/node-init    # the node is already running, just initialize it
rosservice call /detector2/node-reset   # reset the node after test
```

### Script usage

The script call looks as follows:

```
python3 test.py dataset/sequence1 dataset/sequence2 ... out_path --passes 5 --config-path sample.config
```

* `dataset/sequence1 dataset/sequence2 ...` - paths to directories with sequences in ALOV format
* `out_path` - path to empty directory - where results should be saved
* `--passes` - number of passes over all datasets for all policies
* `--config-path` - path to test configuration file

### Output

The script generates a directory for each tested policy as well as a metadata file.
In each of created directories there are `.csv` files in following format: `<test_name>_<pass_number>.csv`.
The metadata file contains lines in following format `<property>=<value>`, like `test1=hills`.

## Video sequences generation

This tester requires video sequences with annotations in the [ALOV dataset](http://alov300pp.joomlafree.it/dataset-resources.html) format.
Those can be generated using the [video2dataset tool](https://github.com/antmicro/video2dataset).

## Licensing

The sources are published under the Apache 2.0 License, except for files located in the `third-party/` directory.
For those files the license is either enclosed in the file header or in a separate LICENSE file.

repository: antmicro/ros-tracking-nodes-tester-node

repo_name: antmicro/ros-tracking-nodes-tester-node


text:
# TriStateSlider
Tri-State Analog Slider Javascript Component

Allows for varying selection between 1 or 2 of 3 possibilities.

<img src="https://raw.githubusercontent.com/Madengineer667/TriStateSlider/master/TriStateSlider/Selector.png"/>


text:
# RevealJS Remote

Simple remote control for RevealJS presentations.

It makes you able to drive your presentations from your mobile phone very easily.

## Configuration

In order to be able to use it you need to configure your slides as follow:

```js
Reveal.initialize({
    /** various settings **/
    dependencies: [
        /** other modules **/
        { src: 'http://localhost:8080/socket.io/socket.io.js', async: true },
        { src: 'http://localhost:8080/html2canvas.min.js', async: true },
        { src: 'http://localhost:8080/listener.js', async: true },
    ]
});
```

## Run it!

Run the script `app.js` using `node`.

```bash
npm install #install required packages
npm start   #run app.js and open a server on port 8080
```

Open your phone browser on: [http://<computer_url>:8080/](http://<computer_url>:8080/), your remote is connected.

Open your presentation as before, it will log onto the app to get the controls sent by the remote.

## Available features

- arrows: swiping left, right, up or down will emulate arrows on presentation side
- lazer pointer: long click on the screen
- live snapshot of the presentation sent to the remote

repository: dubzzz/revealjs-remote

gha_language: JavaScript

repo_name: dubzzz/revealjs-remote


text:
# xa-006: Quick fix

A demo made using WebGL (three.js) for Edison 2016.

[See the latest version of the demo in your browser](https://rawgit.com/joakimk/xa-006/master/releases/xa-006/xa-006-final-version.html).

See comments and reviews on [pouet.net](http://www.pouet.net/prod.php?which=67689).

![](https://dl.dropboxusercontent.com/u/65616109/quickfix-merged-scr.png)

## About

It's made using Google Chrome. May work in other browsers.

Made under a short deadline with no need to create maintainable code :)

This is a project based on <https://github.com/joakimk/livecoding_workspace>.

# Development

## Installing

Before you start, ensure you have Node and Elixir installed. I'm using Elixir 1.3.0 and Node v5.5.0, but other versions will likely work as well.

    mix deps.get
    npm install

## Editing code

Start the server

    mix phoenix.server

0. Visit <http://localhost:4000>
0. Then edit [web/static/js/demo.coffee](web/static/js/demo.coffee) and see the changes appear in the browser right away.

## Editing the music sync

0. Get "GNU rocket" with websocket support (needs QT5)
0. Go to <http://localhost:4000/?tracker=true>
0. The tracks will appear in the editor.
0. Load the existing data file from web/static/assets/demo.rocket.
0. Press space and the demo will run.
0. Edit
0. Save
0. Commit the changes made to demo.rocket.

## Exporting the final result to xa-006.html

    mix release

## Credits

Music by "Yirsi". https://soundcloud.com/yirsi/unknown-world.

## License

Copyright (c) 2016 [Joakim Kolsjö](https://twitter.com/joakimk) and [Anders Asplund](https://github.com/danter)

MIT License

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


text:
**Functional specifications for `oclude` OpenCL kernel driver**

---

- Inputs:
-- **A \*.cl file** containing one or more OpenCL kernel(s).
-- **The name of one of the kernels** included in the \*.cl file that needs to be run.
-- **Platform ID (pid)** and **device ID (did)** specifing the hardware on which to run the selected kernel. The user could be prompted for these arguments interactivelly, after identifing the platforms and the devices that exist on the current machine.
-- **A random number** used as seed to populate OpenCL memory objects (the kernel arguments) with random\* values. Apart from that, this number could be used to decide the NDRange.
-- **Number of work groups**. Not necessary.

- Outputs:
-- **Time elapsed** while the kernel was executing on the specified platform and device. Pretty straight-forward.
-- **LLVM IR instructions count** of the kernel execution. Not straight-forward at all. Could be undoable given that we want a compiled kernel to actually run it on an OpenCL device.
-- (optionally) **A memory dump** of the kernel arguments, as a kind of kernel execution output.

- Assumptions:
-- No `Image` objects (part of the OpenCL specification, but very rarely used)
-- No `vector` objects (part of the OpenCL specification [here](https://www.khronos.org/registry/OpenCL/sdk/2.1/docs/man/xhtml/vectorDataTypes.html), sometimes used, `mergesort.cl` uses them)
-- No user-defined structs (part of the OpenCL specification, sometimes used, `nearestNeighbor_kernel.cl` uses them)

- Possible extentions:
-- **A plugin API**: Instead of random initialization of the kernel arguments, a user may want to run a kernel on real input data. These could be formatted in arbitrary ways (e.g. a csv file). A plugin API could give the user the ability to define a C++ class, say `InputFormatter`, which could process their data and transform them into a form that `oclude` can use (a specification is needed, obviously). This class could be compiled as a shared library and loaded at runtime in order to process the real input data of the user. The same could be done for the output, with an `OutputFormatter`. Click [here](https://github.com/jrprice/Oclgrind/wiki/Creating-Plugins) here to see how `oclgrind` does the same thing.
-- Implementation of **`vector` objects** as kernel arguments.
-- Implementation of **user-defined structs** as kernel arguments.

**\*** Not *entirely* random. The value range for each argument should be dictated by its type, e.g. an argument of the `uint` type should be populated with non-negative integers.

repository: zehanort/oclude

gha_language: C

repo_name: zehanort/oclude


text:
---
id: wrapping-up
title: Wrapping Up
sidebar_label: Wrapping Up
---

We have learned almost all the concepts needed to build Engine apps. There is a
bit more to Engine API, about which you can read in the [API
section](/docs/implementations/react).

Let's wrap up by finishing our Todos app. Three last UI elements that left
putting life in are:
1. Clearing completed Todos
2. Toggling status of all Todos
3. Removing a todo item when "X" button in `Todo` is clicked

All these operations will follow the principles seen so far in the tutorial. A
`view` will accept user's input, and store it in view agnostic manner in the
global state, a `producer` will get triggered and perform the actual operation.

## Clearing completed Todos

Since removing Todo's is a new operation (i.e isn't an instance of deriving our
state to shape it differently), the producer responsible for it is kept closer
to the view that will trigger the producer.

In `src/Footer.tsx`, add a click event listener for "Clear Completed" todos
button. The view is going to use state as a communication channel to trigger the
producer (as discussed in [last
chapter](/docs/tutorials/react/state-as-communication-channel)).

```diff
const Footer: view = ({
  pendingCount = observe.pendingCount,
  filter = observe.filter,
  updateFilter = update.filter,
+ updateClearRequest = update.clearRequest
}) => (
...
-     <button className="clear-completed">Clear completed</button>
+     <button
+       className="clear-completed"
+       onClick={() => updateClearRequest.set(new Date().getTime())}
+     >
        Clear completed
    </button>
```

A new path has been introduced in the state (`clearRequest`), which will contain
a value when a clear operation need to be performed. In same file (i.e
`src/Footer.tsx`), add a new producer which performs the actual operation of
clearing completed todos.

```tsx
const handleClearRequest: producer = ({
  clearRequest = observe.clearRequest,
  updateClearRequest = update.clearRequest,
  getTodosById = get.todosById,
  updateTodosById = update.todosById
}) => {
  if (!clearRequest) {
    return;
  }

  const todosById = getTodosById();
  const nextTodos = Object.values(todosById)
    .filter((todo: any) => todo.status !== TodoStatuses.done)
    .reduce((accum: any, todo: any) => {
      accum[todo.id] = todo;

      return accum;
    }, {});

  updateTodosById.set(nextTodos);
  updateClearRequest.set(null);
};
```

Add it to `Footer`'s producers:

```tsx
- (Footer as any).producers = [pendingCounter];
+ (Footer as any).producers = [pendingCounter, handleClearRequest];
```

Notice how `handleClearRequest` producer is changing the value that acts as its
trigger, practically resetting it. This is also a common pattern in Engine apps.

## Toggling status of all Todos

Similarly, to toggle status of all Todos, create a new path in state to when the
"Toggle All" checkbox is clicked, and a producer that gets triggered to do the
actual work.

In `src/App.tsx`, store the value in state:

```diff
- const App: view = ({ todoIds = observe.visibleTodoIds }) => (
+ const App: view = ({
+   pendingCount = observe.pendingCount,
+   todoIds = observe.visibleTodoIds,
+   updateToggleAllRequest = update.toggleAllRequest
+ }) => (
...
-       <input id="toggle-all" className="toggle-all" type="checkbox" />
+       <input
+         id="toggle-all"
+         className="toggle-all"
+         type="checkbox"
+         checked={pendingCount === 0}
+         onChange={() => updateToggleAllRequest.set(new Date().getTime())}
+       />
```

Add a new producer `handleToggleAllRequest`:

```tsx
const handleToggleAllRequest: producer = ({
  toggleAllRequest = observe.toggleAllRequest,
  updateToggleAllRequest = update.toggleAllRequest,
  getTodosById = get.todosById,
  getPendingCount = get.pendingCount,
  updateTodosById = update.todosById
}) => {
  if (!toggleAllRequest) {
    return;
  }

  const todosById = getTodosById() as TodosById;
  const pendingCount = getPendingCount();

  const nextTodos = Object.values(todosById)
    .map(todo => {
      return {
        ...todo,
        status: pendingCount !== 0 ? TodoStatuses.done : TodoStatuses.pending
      };
    })
    .reduce((accum, todo) => {
      accum[todo.id] = todo;

      return accum;
    }, {} as TodosById);

  updateTodosById.set(nextTodos);
  updateToggleAllRequest.set(null);
};
```

Add it to `App`'s producers:

```diff
- (App as any).producers = [syncVisibleTodoIds];
+ (App as any).producers = [syncVisibleTodoIds, handleToggleAllRequest];
```

## Removing Todos

Check out the documentation for [update](/docs/api/update), and try to implement
this feature by yourself 🙂

<details>
<summary>Solution</summary>

In `src/Todo/View.tsx`,

```diff
-       <button className="destroy" />
+       <button className="destroy" onClick={() => updateTodo.remove()} />
```
</details>

repository: dumconstantin/engine

repo_name: dumconstantin/engine


text:
# Gopher.community

Welcome to the main repository for the [gopher.community][gc] website! The goal
of this project is to provide an index of all the awesome activities happening
all around the world related to the Go programming language. It should also
offer a starting point in as many languages as possible for anyone who wants to
get to know the language.

Currently, the site is mostly empty but we are looking for suggestions what
content should be included here! So, if you have an idea, please take a look at
the [issue tracker][issues] and create a new ticket or comment to an existing
one!

For now, make sure to check the following ressources:

* [NonEnglish on golang.org](https://github.com/golang/go/wiki/NonEnglish)
* [Gophers Slack](https://gophers.slack.com/)
* [#go-nuts on freenode](irc://freenode.net/#go-nuts)
* [go-nuts mailinglist](https://groups.google.com/group/golang-nuts)

[gc]: https://gopher.community
[issues]: https://github.com/GopherCommunity/main/issues

repository: GopherCommunity/main

repo_name: GopherCommunity/main


text:
# Turorial-PHP
----
![Learn PHP](http://makeawebsitehub.com/wp-content/uploads/2016/02/learn-php.jpg)
### PHP学习，本地开发环境搭建2018：
1. 建议安装 __Homestead__ 虚拟机集成环境 [Laravel Homestead version 2.2.1 教程](https://github.com/mayusa/Tutorial-Laravel/blob/master/LaravelHomesteadSetup.md)

2. __XAMPP__ MAC本机 PHP开发环境集成软件包 [Apache+MySQL+PHP+PERL](https://www.apachefriends.org/download.html)

3. __PHP内置HTTP 服务器__
 It’s a great way to write and preview HTML locally without installing MAMP, WAMP, or a heavyweight web server.
````
 php -S localhost:8000
 ````

It’s not uncommon for an application to require its own PHP INI configuration file, especially if it has unique requirements for memory usage, file uploads, profiling, or bytecode caching. You can tell the PHP built-in server to use a specific INI file with the -c option:
php -S localhost:8000 -c app/config/php.ini

Tip
It’s a good idea to keep the custom INI file beneath the application’s root directory and, optionally, version-control the INI file if it should be shared with other developers on your
team.

资源：

[laravel-china](https://laravel-china.org/)

repository: ashucn/Tutorial-PHP

repo_name: ashucn/Tutorial-PHP


text:
# NodePing POSIX PUSH check client

A client for the NodePing PUSH check (<https://nodeping.com/push_check.html>) for POSIX systems

## Tested distros and systems

- CentOS 7
- Rocky/Alma Linux 8 & 9
- Debian 10
- Debian 11/Devuan Chimaera 4.0
- Fedora 36, 37
- FreeBSD 12.x, 13.x
- OpenBSD 7.0+
- OpenSUSE LEAP 15
- Raspbian STRETCH
- Ubuntu 18.04
- Ubuntu 20.04
- Ubuntu 22.04

Requires installation of curl

## Configuration

* Modify the 'moduleconfig' file and put the module names you want to run. You can add or remove any metric modules you desire.
* On line 3 of NodePingPUSH.sh, add your Check ID to the `CHECK_ID` variable (found in the check drawer - click on the name of the check).
* On line 4 of NodePingPUSH.sh, add your Checktoken to the `CHECK_TOKEN` variable (also found in the check drawer).

 Default is the current directory of `NodePingPUSH.sh`.
* Modify the 'NodePingPUSH.sh' file and edit the retries on line 11 to set the number of times you want the client to retry connecting if the client is unable to connect the first time.
* Modify the 'NodePingPUSH.sh' file and edit the timeout on line 12 to determine how many seconds you want to timeout the connection if the server cannot be reached.

## Usage

Execute the NodePingPUSH.sh

Example:

```sh
./NodePingPUSH.sh
```

### Logging

To enable logging of the metrics sent and the response received from NodePing on each results push use the -log argument.

Example:

```sh
./NodePingPUSH.sh -log
```

The default logging location is ./NodePingPUSH.log.  Modify the log location in the NodePingPUSH.sh script.

### Debug mode

To run the client and see in the console what metrics would be submitted, run it with the -debug flag. Debug mode does not submit any results to NodePing, it only spits out the metrics JSON.

Example:

```sh
$ ./NodePingPUSH.sh -debug
{"data":{"load":{"1min":0.31,"5min":0.46,"15min":0.36},"memfree":21414,"diskfree":{ "/":0.95}}}
```

The default metrics sent are:

- Load: 1 minute, 5 minute, and 15 minute system load
This is tacked by the path/name field "load.1min", "load.5min", and "load.15min".

- Memory free space: MB RAM free
This is tracked by the path/name field "memfree"

- Disk free space: percentage of each partition that is free space by mount point
This is tracked by the path/name field "diskfree.yourmountpoint" - example: "diskfree./".

## Modules

The NodePing POSIX PUSH client is built to be extended with your own script modules. This allows you to add any metric to the payload and NodePing will track and alert on your check settings for those metrics.

Create your own script that outputs valid JSON to stdout and then place your unique module name and script path in the moduleconfig file.

For examples, see the modules in the metrics directory.

## Contributions

Found a bug? Built a cool module for xyz? Send it to us!
We encourage pull requests for any changes or additions to the clients, new modules, or documentation.

copyright NodePing LLC 2022

gha_language: Python


text:
---
title: Distributed Data Collection
description_seo:
duration: "15:13"
keywords: key, word, list, for, seo
programming_lang:
venue:
location:
author: Matthew Salganik
author_title: Professor
is_bootcamp: false
date_published:
has_order: 23
preview: https://i.ytimg.com/vi/S0foUGRnYIo/hqdefault.jpg
video_url: https://www.youtube.com/watch?v=S0foUGRnYIo
embed_url: https://www.youtube.com/embed/S0foUGRnYIo
materials:
  - title: Slides
    url: https://github.com/compsocialscience/summer-institute/blob/master/2020/materials/day5-mass-collaboration/04-distributed_data_collection.pdf
exercises:
  - title: Lesson plan (participants)
    url: https://github.com/compsocialscience/summer-institute/blob/master/2021/materials/day5-mass-collaboration/activity/lesson_plan_masscollaboration_participant.md#lesson-plan-for-participants
  - title: Lesson plan (instructors)
    url: https://github.com/compsocialscience/summer-institute/blob/master/2021/materials/day5-mass-collaboration/activity/lesson_plan_masscollaboration_instructor.md#lesson-plan-for-instructors
code:
---

Professor Matt Salganik of Princeton University discusses Distributed Data Collection.

repository: compsocialscience/summer-institute

gha_language: HTML

repo_name: compsocialscience/summer-institute


text:
Upgrade Guides
==============

Compatibility Policy
--------------------

Slick 3.4.0 requires 2.12 or 2.13 and Java 8, 11 or higher.

Slick version numbers consist of an epoch, a major and minor version, and possibly a qualifier
(for milestone, RC and SNAPSHOT versions).

For release versions (i.e. versions without a qualifier), backward binary compatibility is
guaranteed between releases with the same epoch and major version (e.g. you could use 2.1.2 as a
drop-in replacement for 2.1.0 but not for 2.0.0). Binary compatibility is not preserved for
`slick-codegen`, which is generally used at compile-time.

We do not guarantee source compatibility but we try to preserve it within the same major release.
Upgrading to a new major release may require some changes to your sources. We generally deprecate
old features and keep them around for a full major release cycle (i.e. features which become
deprecated in 2.1.0 will not be removed before 2.2.0) but this is not possible for all kinds of
changes.

Release candidates have the same compatibility guarantees as the final versions to which they
lead. There are *no compatibility guarantees* whatsoever for milestones and snapshots.

Latest changes
--------------

See @ref:[the generated tables of incompatible changes](compat-report.md)

Upgrade from 3.4.x to 3.5.0
-----------------------

- `SynchronousDatabaseAction` has 5 type parameters instead of 4. See for instance
  https://github.com/tminglei/slick-pg/pull/651/files#diff-208b921209dd4b53867be1f55f1fa054d81f6473575ae4b7efd960a3d8c7a298L17

### Dependency upgrades

Slick 3.5.x drops [scala-collection-compat](https://github.com/scala/scala-collection-compat) for Scala versions
2.13 and higher. This shouldn't affect end users unless you happen to be transitively relying on
`scala-collection-compat` on a version of Scala 2.13 or higher. If this is the case then it's recommended to migrate
your codebase away from `scala-collection-compat`, otherwise if this is not possible then you can just add the

```sbt
"org.scala-lang.modules" %% "scala-collection-compat" % "2.10.0"
```

dependency manually.

### ResultConverter

``ResultConverter`` is an internal interface for converting between values handled in JDBC and values handled in
application code (case classes, etc.). While you most likely aren't using it directly, you may need to call methods
of this interface if you are override behavior of a profile or writing a new one.

In order to support a single insert statement with multiple rows, the `set` method now takes an `offset` parameter.
If you have extended a profile and used the `set` method of this interface, you may need to specify 0 for the offset
(unless the number of variable placeholders in the SQL dynamically changes).

Upgrade from 3.3.x to 3.4.0
-----------------------

The full list of bug fixes and changes in version 3.4.0 is
[available on github](https://github.com/slick/slick/pulls?q=is%3Apr+is%3Amerged+milestone%3A3.4.0).

### Dependency upgrades

Slick 3.4.0 updates the following upstream dependencies. If you use these libraries as part of your build,
you should update your dependency versions to match:

| Dependency                                                                                | Slick 3.3 depends on | Slick 3.4 depends on | Notes                                                                                |
|----------------------------------------------------------------------------------------------------|----------------------|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [com.typesafe:config](https://github.com/lightbend/config)                                         | 1.3.2                | 1.4.2                | See the `config` library's [release notes](https://github.com/lightbend/config/blob/main/NEWS.md) for changes.                                                                 |
| [com.zaxxer:HikariCP](https://github.com/brettwooldridge/HikariCP)                                 | 3.2.0                | 4.0.3                | See the `HikariCP` [changelog](https://github.com/brettwooldridge/HikariCP/blob/dev/CHANGES) for changes. This only affects users who depend on the `slick-hikaricp` artifact. |
| [org.scala-lang.modules:scala-collection-compat](https://github.com/scala/scala-collection-compat) | 2.0.0                | 2.6.0                | Versions >= 2.0.0 should be binary-compatible, so no issues are expected. This only affects users building with Scala 2.11 or 2.12.                                            |

### AsyncExecutor defaults

`AsyncExecutor` wraps the thread pool that Slick uses to run blocking I/O (such as database queries). The
previous default constructor arguments could potentially cause deadlocks in some cases, so Slick 3.4 changes these
to safer defaults. In most cases this should be a drop-in replacement but users are encourage to test performance
carefully after upgrading. See issue [#1938](https://github.com/slick/slick/issues/1938) for details.

### PostgreSQL `java.time` mappings

The following bug fixes are highlighted here because they change the default mapping behaviour for some `java.time`
columns in PostgreSQL:

- `java.time.Instant.MIN` and `java.time.Instant.MAX` are now correctly mapped to `-infinity` and `infinity`
  respectively in PostgreSQL profile ([#2237](https://github.com/slick/slick/issues/2237))
- changes to handling of timezone part of `java.time.Instant` in PostgreSQL profile
  ([#2005](https://github.com/slick/slick/issues/2005))

Upgrade from 3.2.x to 3.3.0
-----------------------

### Create / Drop If Not Exists

There is no major changes in the API except for the addition of `createIfNotExists` and `dropIfExistsPhase`.
This has only impact on database profile developers. Regular users are not impacted by it.

In other to support `createIfNotExists` and `dropIfExistsPhase`, the following changes were made:

* slick.jdbc.JdbcStatementBuilderComponent#TableDDLBuilder.createTable receives not a `checkNotExists: Boolean` as
  argument
* slick.jdbc.JdbcStatementBuilderComponent#TableDDLBuilder.dropTable receives not a `ifExists: Boolean` as argument
* slick.sql.SqlProfile#DDL.apply has two more arguments `createIfNotExists: Iterable[String]` and
  `dropIfExists: Iterable[String]`

### Support for `java.time` columns

Slick 3.3.0 profiles now supports `java.time` types as columns (for example, in `Table` `column` definitions).

If you already have [custom mappings](https://scala-slick.org/doc/3.3.0/userdefined.html#scalar-types) for these types,
please review the formats in the tables below.
These formats are the built-in Slick mappings,
and they are the ones applied when you upgrade to Slick 3.3.0.
That is, they take precedence over any `MappedColumnType` you may have defined for the `java.time` types.

The types are: `Instant`, `LocalDate`, `LocalTime`, `LocalDateTime`, `OffsetTime`, `OffsetDateTime`, and `ZonedDateTime`.

If you need to customise these formats,
you can by extending a `Profile` and overriding the appropriate methods.
For an example of this see: <https://github.com/d6y/instant-etc/blob/master/src/main/scala/main.scala#L9-L45>.
Also of use will be an example of a full mapping, such as: <https://github.com/slick/slick/blob/v3.3.0/slick/src/main/scala/slick/jdbc/JdbcTypesComponent.scala#L187-L365>.

If you wish to upgrade your application to use the new formats,
you may need to migrate your database columns to match the Slick column formats.

In the tables that follow there are many similarities between databases. However, not all databases can directly map the
various `java.time` semantics. In these cases, a `VARCHAR` may have been used to store a formatted time representation.
For more details see the [description of Slick's approach](https://scala-slick.org/doc/3.3.0/datetimetypes.html) to
these mappings.

#### `slick.jdbc.DB2Profile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `VARCHAR(254)` | `'2019-02-03T18:20:28.660Z'` |
| `java.time.LocalDate` | `DATE` | `'2019-02-03'` |
| `java.time.LocalTime` | `VARCHAR(254)` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TIMESTAMP` | `'2019-02-03 18:20:28.661'` |
| `java.time.OffsetTime` | `VARCHAR(254)` | `'18:20:28.661Z'` |
| `java.time.OffsetDateTime` | `VARCHAR(254)` | `'2019-02-03T18:20:28.661Z'` |
| `java.time.ZonedDateTime` | `VARCHAR(254)` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

#### `slick.jdbc.DerbyProfile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `VARCHAR(254)` | `'2019-02-03T18:20:28.660Z'` |
| `java.time.LocalDate` | `DATE` | `'2019-02-03'` |
| `java.time.LocalTime` | `VARCHAR(254)` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TIMESTAMP` | `'2019-02-03 18:20:28.661'` |
| `java.time.OffsetTime` | `VARCHAR(254)` | `'18:20:28.661Z'` |
| `java.time.OffsetDateTime` | `VARCHAR(254)` | `'2019-02-03T18:20:28.661Z'` |
| `java.time.ZonedDateTime` | `VARCHAR(254)` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

#### `slick.jdbc.H2Profile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `TIMESTAMP(9) WITH TIME ZONE` | `'2019-02-03T18:20:28.660Z'` |
| `java.time.LocalDate` | `DATE` | `'2019-02-03'` |
| `java.time.LocalTime` | `VARCHAR` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TIMESTAMP` | `'2019-02-03 18:20:28.661'` |
| `java.time.OffsetTime` | `VARCHAR` | `'18:20:28.661Z'` |
| `java.time.OffsetDateTime` | `VARCHAR` | `'2019-02-03T18:20:28.661Z'` |
| `java.time.ZonedDateTime` | `VARCHAR` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

#### `slick.jdbc.HsqldbProfile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `TIMESTAMP(9) WITH TIME ZONE` | `'2019-02-03 18:20:28.66'` |
| `java.time.LocalDate` | `DATE` | `'2019-02-03'` |
| `java.time.LocalTime` | `TIME(3)` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TIMESTAMP` | `'2019-02-03 18:20:28.661'` |
| `java.time.OffsetTime` | `TIME(9) WITH TIME ZONE` | `'18:20:28.661+0:00'` |
| `java.time.OffsetDateTime` | `TIMESTAMP(9) WITH TIME ZONE` | `'2019-02-03 18:20:28.661+0:00'` |
| `java.time.ZonedDateTime` | `LONGVARCHAR` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

#### `slick.jdbc.SQLServerProfile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `DATETIMEOFFSET(6)` | `(convert(datetimeoffset(6), '2019-02-03 18:20:28.66 '))` |
| `java.time.LocalDate` | `DATE` | `'2019-02-03'` |
| `java.time.LocalTime` | `TIME(6)` | `(convert(time(6), '18:20:28.661'))` |
| `java.time.LocalDateTime` | `DATETIME2(6)` | `'2019-02-03 18:20:28.661'` |
| `java.time.OffsetTime` | `VARCHAR(MAX)` | `'18:20:28.661Z'` |
| `java.time.OffsetDateTime` | `DATETIMEOFFSET(6)` | `(convert(datetimeoffset(6), '2019-02-03 18:20:28.661 '))` |
| `java.time.ZonedDateTime` | `VARCHAR(MAX)` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

#### `slick.jdbc.MySQLProfile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `TEXT` | `'2019-02-03T18:20:28.660Z'` |
| `java.time.LocalDate` | `DATE` | `'2019-02-03'` |
| `java.time.LocalTime` | `TEXT` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TEXT` | `'2019-02-03T18:20:28.661'` |
| `java.time.OffsetTime` | `TEXT` | `'18:20:28.661Z'` |
| `java.time.OffsetDateTime` | `TEXT` | `'2019-02-03T18:20:28.661Z'` |
| `java.time.ZonedDateTime` | `TEXT` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

#### `slick.jdbc.OracleProfile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `TIMESTAMP(9) WITH TIME ZONE` | `TO_TIMESTAMP_TZ('2019-02-03 18:20:28.660 +00', 'YYYY-MM-DD HH24:MI:SS.FF3 TZH')` |
| `java.time.LocalDate` | `DATE` | `TO_DATE('2019-02-03', 'SYYYY-MM-DD')` |
| `java.time.LocalTime` | `VARCHAR2(254)` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TIMESTAMP` | `TO_TIMESTAMP('2019-02-03 18:20:28.661', 'YYYY-MM-DD HH24:MI:SS.FF3')` |
| `java.time.OffsetTime` | `TIMESTAMP(6) WITH TIME ZONE` | `TO_TIMESTAMP_TZ('1970-01-01 18:20:28.661 +0000', 'YYYY-MM-DD HH24:MI:SS.FF3 TZH:TZM')` |
| `java.time.OffsetDateTime` | `TIMESTAMP(6) WITH TIME ZONE` | `TO_TIMESTAMP_TZ('2019-02-03 18:20:28.661 +0000', 'YYYY-MM-DD HH24:MI:SS.FF3 TZH:TZM')` |
| `java.time.ZonedDateTime` | `TIMESTAMP(6) WITH TIME ZONE` | `TO_TIMESTAMP_TZ('2019-02-03 18:20:28.661 Europe/London', 'YYYY-MM-DD HH24:MI:SS.FF3 TZR')` |

#### `slick.jdbc.PostgresProfile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `TIMESTAMP` | `'2019-02-03 18:20:28.66'` |
| `java.time.LocalDate` | `DATE` | `'2019-02-03'` |
| `java.time.LocalTime` | `TIME` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TIMESTAMP` | `'2019-02-03 18:20:28.661'` |
| `java.time.OffsetTime` | `TIMETZ` | `'18:20:28.661Z'` |
| `java.time.OffsetDateTime` | `VARCHAR` | `'2019-02-03T18:20:28.661Z'` |
| `java.time.ZonedDateTime` | `VARCHAR` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

#### `slick.jdbc.SQLiteProfile`

| Java Type | SQL Type | Example SQL Literal |
|-----------|----------|---------------------|
| `java.time.Instant` | `TIMESTAMP` | `1549218028660` |
| `java.time.LocalDate` | `DATE` | `1549152000000` |
| `java.time.LocalTime` | `VARCHAR(254)` | `'18:20:28.661'` |
| `java.time.LocalDateTime` | `TIMESTAMP` | `1549218028661` |
| `java.time.OffsetTime` | `VARCHAR(254)` | `'18:20:28.661Z'` |
| `java.time.OffsetDateTime` | `VARCHAR(254)` | `'2019-02-03T18:20:28.661Z'` |
| `java.time.ZonedDateTime` | `VARCHAR(254)` | `'2019-02-03T18:20:28.661Z[Europe/London]'` |

Upgrade from 3.1.x to 3.2.0
-----------------------

This section describes the changes that are needed when upgrading from Slick 3.1 to 3.2. If you are
currently using an older version of Slick, please see the older [Slick Manuals] for details on other
changes that may be required.

### Profiles vs Drivers

Slick's `driver` concept has been renamed to `profile` to end the confusion over Slick drivers vs JDBC drivers.
All references to `drivers` from now on refer to JDBC drivers. Slick `profiles` can be either abstract
(like @scaladoc[JdbcProfile](slick.jdbc.JdbcProfile)) or concrete (like @scaladoc[H2Profile](slick.jdbc.H2Profile)). The old names are still
available as deprecated forwarders.

The renaming also affects configuration parameters (for example, for  @ref:[Databaseconfig](database.md#databaseconfig)).
The old parameter names are still supported but their use will generate warnings at runtime.

### Slick Extensions

The `Slick Extensions` package with additional profiles for Oracle, DB2 and SQL Server does not exist
anymore for Slick 3.2. These profiles have been added to the core Slick package:

* @scaladoc[OracleProfile](slick.jdbc.OracleProfile)
* @scaladoc[DB2Profile](slick.jdbc.DB2Profile)
* @scaladoc[SQLServerProfile](slick.jdbc.SQLServerProfile)

### Database Action Scheduling

When configuring a  @ref:[database connection](database.md) with a connection pool with a limited maximum size, you
should always specify the correct size limit in Slick. This is necessary to prevent deadlocks when using transactions
(or other pinned sessions). The configuration is done automatically when using Slick's built-in HikariCP support.
You only need to configure it manually if you use a connection pool through a JDBC `DataSource` or JNDI name.

@@@ index
  * @ref:[.](compat-report.md)
@@@

repository: slick/slick

gha_language: Scala

repo_name: slick/slick


text:
# 3D Print Central

3D Print Central is a small web app to help queue and manage print jobs for 3D printers. It is designed for use by Leighton Park School students and therefore new user registrations are limited to the<EMAIL_ADDRESS>domain, however this is easily changed by the `ALLOWED_EMAIL_DOMAINS` setting.

This project is incomplete and therefore errors could occur, although I like to think I've ironed the majority out :p.

It is built with [Python][0] using the [Django Web Framework][1].

### Quick start

To set up a development environment quickly, first install Python 3. It
comes with virtualenv built-in. So create a virtual env by:

    1. `$ python3 -m venv print_queue`
    2. `$ . print_queue/bin/activate`

Install all dependencies:

    pip install -r requirements.txt

Run migrations:

    python manage.py migrate
    python manage.py makemigrations
    python manage.py migrate

Run the same as all Django projects:

    python manage.py runserver 8000

Or deploy using your favourite WSGI solution :p

[0]: https://www.python.org/
[1]: https://www.djangoproject.com/
[2]: https://testbed.aliakseipilko.com/3dprintcentral/


text:
---
templateKey: event-info
title: Cambridge Band Comp - Final
heroData:
  isActive: true
dateTimeRange:
  startDateTime: 2021-10-28T17:30:00.000Z
image:
  alt: Band on Stage
  shouldDisplay: true
  src: >-
    https://res.cloudinary.com/strawberryfair/image/upload/v1587206750/Events/band-comp-jump_bbclzx.jpg
eventTypes:
  - Band competition
---
The Cambridge Over 18’s Band Competition Final will be at the Junction, Cambridge Leisure Park,   alongside the heat winners of the Under 18’s. Prizes for the winners and for best acts in many different categories, PLUS the prestigious Kimberley Rew Best Song Prize.

* Shambertans
* Pink Lemonade
* Bleed Easy
* The Routine
* Jenem
* Strawberry Lace
* Chloe Lorentzen

**https://www.junction.co.uk/cambridge-band-competition-final**

Please note that The Junction have a Covid policy for entry that you can see here:    **https://www.junction.co.uk/covid-19-entry-requirements**

repository: Softwire/strawberry-fair

repo_name: Softwire/strawberry-fair


text:
Takes picture every time interval (defaults to one picture a second) and make a video of it at the end.
It has a motion detection mode that will detect motion and put a purple rectangle around it (by default it does not do a video at the end but you can call make_video manually if you want to).

## Installation

```python
pip install -r requirements.txt
```
Don't forget to install dependencies (jpg lib and ffmpeg or something that works with opencv, libav for Ubuntu) for OpenCV before installing it, otherwise things won't work.
On Ubuntu:

```bash
$ sudo apt-get install libjpeg-dev libavcodec-dev libavformat-dev libswscale-dev
```

OpenCV is not pip installable so either install it from your package manager or follow the instructions for your OS at [the download page](http://opencv.org/downloads.html) (you can install it in a virtualenv by following this post: [Installation of Opencv, numpy, scipy inside a virtualenv](https://medium.com/@manuganji/installation-of-opencv-numpy-scipy-inside-a-virtualenv-bf4d82220313)).

## How to use
```python
$ python rodent.py
```
There are 4 commands:

- capture: takes a picture from the webcam at a given interval forever or until the time specified in the folder given
- make_video: takes all the pictures in the folder and makes a video out of it (better than watching pictures!)
- automate: does both capture and make_video, I use it for example to record until 15 minutes before I wake up and the video will be ready by the time I get to the kitchen for example
- motion: takes a picture only if it detects a movement

## How it works
Look at the [article on my blog](http://vincent.is/turning-a-laptop-into-cctv/)

repository: Keats/rodent

repo_name: Keats/rodent


text:
[![Build Status](https://travis-ci.org/artem-smotrakov/tlsbunny.svg?branch=master)](https://travis-ci.org/artem-smotrakov/tlsbunny)
[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
[![Coverage](https://sonarcloud.io/api/project_badges/measure?metric=coverage&project=tlsbunny)](https://sonarcloud.io/component_measures?id=tlsbunny&metric=coverage&view=list)
[![Lines of code](https://sonarcloud.io/api/project_badges/measure?metric=ncloc&project=tlsbunny)](https://sonarcloud.io/component_measures?id=tlsbunny&metric=ncloc&view=list)
[![Maintainability](https://sonarcloud.io/api/project_badges/measure?metric=sqale_rating&project=tlsbunny)](https://sonarcloud.io/component_measures?id=tlsbunny&metric=Maintainability&view=list)

# tlsbunny

This is a framework for building negative tests and fuzzers for TLS 1.3 implementations.
The idea is to split the TLS handshake and application data exchange to simple steps
which can be easily configured and re-used in various TLS clients and servers.

The framework provides a set of basic steps which can be used in a TLS connection,
for example:

- Generating a `ClientHello` message
- Wrapping a handshake message into a `Handshake` structure
- Wrapping a handshake message into a `TLSPlaintext` structure
- Key exchange and deriving symmetric keys
- Receiving incoming encrypted data
- Parsing a `TLSCiphertext` message
- Decrypting a `TLSCiphertext` message
- and so on

These basic blocks allow to control and test each step in a TLS 1.3 connection.

The framework also provides an engine which runs specified actions.
The engine allows adding checks which can be run after a connection finishes.
The checks can examine the established connection, and detect potential issues.

## Supported features

- [TLS 1.3 protocol defined in RFC 8446](https://tools.ietf.org/html/rfc8446)
- Client and server modes
- Key exchange with `ECDHE` mechanism and `secp256r1` curve
- Signatures with `ecdsa_secp256r1_sha256`
- Both client and server authentication
- AES-GCM cipher with 128-bit key

## Example

Here is what a simple HTTPS client looks like:

```java
Engine.init()
    .set("localhost", 433)
    .set(StructFactory.getDefault())
    .set(Negotiator.create(secp256r1))

    .run(generatingClientHello()
            .supportedVersions(TLSv13)
            .groups(secp256r1)
            .signatureSchemes(ecdsa_secp256r1_sha256)
            .keyShareEntries(Negotiator::createKeyShareEntry))
    .run(wrappingIntoHandshake()
            .type(client_hello)
            .update(Context.Element.first_client_hello))
    .run(wrappingIntoTLSPlaintexts()
            .type(handshake)
            .version(TLSv12))
    .send(OutgoingData::new)

    .send(OutgoingChangeCipherSpec::new)

    .until(Condition::serverDone)
    .receive(IncomingMessages::fromServer)

    .run(GeneratingFinished::new)
    .run(wrappingIntoHandshake()
            .type(finished)
            .update(Context.Element.client_finished))
    .run(WrappingHandshakeDataIntoTLSCiphertext::new)
    .send(OutgoingData::new)

    .run(PreparingHttpGetRequest::new)
    .run(WrappingApplicationDataIntoTLSCiphertext::new)
    .send(OutgoingData::new)

    .until(Condition::applicationDataReceived)
    .receive(IncomingMessages::fromServer)

    .run()
    .require(noFatalAlert());
```

## Fuzzing

tlsbunny provides several fuzzers for TLS 1.3 structures
such as `TLSPlaintext`, `Handshake`, `ClientHello`, `Finished` and so on.

On the one hand, such a fuzzer is not going to be as fast as, for example, LibFuzzer.
On the other hand, the fuzzer can be easily re-used with multiple TLS implementations
written in any language (not only C/C++).

Traditionally, fuzzing is used for testing applications written in C/C++
to uncover memory corruption issues which most likely may have security implications.
However, fuzzing can also be also used for testing applications written in other languages
even if those languages, like Java, prevent using memory directly.
See for example [AFL-based Java fuzzers and the Java Security Manager](https://www.modzero.ch/modlog/archives/2018/09/20/java_bugs_with_and_without_fuzzing/index.html).

No matter which programming language is used,
a good TLS implementation should properly handle incorrect data
and react in an expected way, for example, by throwing a documented exception.
An unexpected behavior while processing incorrect data may still have security implications.
even it the TLS implementation is written in a memory-safe programming language.

## Example: Fuzzing TLSv1.3 server

Let's run `DeepHandshakeFuzzyClient` that fuzzes a TLSv1.3 server.

First, make sure that you use Java 11+. Then, build tlsbunny:

```bash
mvn clean install -DskipTests
```

Next, start a target TLSv1.3 server that you'd like to fuzz. Let's assume that it runs on port `50101`.
It is better to run the server with AddressSanitizer and other sanitizers. They'll report memory corruptions
that didn't result to a crash.

Then, prepare a config for tlsbunny:

```
client.certificate.path=certs/client_cert.pem
client.key.path=certs/client_key.pkcs8
target.host=localhost
target.port=50101
total=10000
```

The [certs](https://github.com/artem-smotrakov/tlsbunny/tree/master/certs) directory contains certiticates and keys for testing.

`total` is a number of iterations for the fuzzer.

Finally, run the fuzzer:

```bash
java -cp target/tlsbunny-1.0-SNAPSHOT-all.jar \
    com.gypsyengineer.tlsbunny.tls13.client.fuzzer.DeepHandshakeFuzzyClient
```

Watch how the server handles fuzzed TLS messages.

## Similar projects

- [tlsfuzzer](https://github.com/tomato42/tlsfuzzer):
  SSL and TLS protocol test suite and fuzzer (python)
- [TLS-Attacker](https://github.com/RUB-NDS/TLS-Attacker):
  TLS-Attacker is a Java-based framework for analyzing TLS libraries.
  It is developed by the Ruhr University Bochum and the Hackmanit GmbH.

## Discovered bugs

- [Java: TLS 1.3 server fails if ClientHello doesn't have pre_shared_key and psk_key_exchange_modes](https://bugs.openjdk.java.net/browse/JDK-8210334), [patch](http://hg.openjdk.java.net/jdk/jdk/rev/b6ccd982e33d)
- [wolfSSL: Buffer overread while parsing key_share extension in TLS 1.3](https://wolfssl.zendesk.com/hc/en-us/requests/4798), [test](src/main/java/com/gypsyengineer/tlsbunny/poc/wolfssl/HeapOverReadInKeyShareEntry.java), [patch](https://github.com/wolfSSL/wolfssl/pull/2082)
- [wolfSSL: Buffer over-read in DoTls13SupportedVersions()](https://wolfssl.zendesk.com/hc/en-us/requests/5487), [test](src/main/java/com/gypsyengineer/tlsbunny/poc/wolfssl/SupportedVersionsHeapOverRead.java), [patch](https://github.com/wolfSSL/wolfssl/pull/2381)

repository: artem-smotrakov/tlsbunny

gha_language: Java

repo_name: artem-smotrakov/tlsbunny


text:
FMI Library
===========

FMI Library (FMIL) is a software package written in C that enables integration
of Functional Mock-up Units (FMUs) import in applications. FMI Library is an
independent open-source implementation of the [FMI open standard](https://fmi-standard.org).

The documentation for the latest version of FMI Library can be downloaded from the [release page](https://github.com/modelon-community/fmi-library/releases).

Please report issues related to FMI Library to the [GitHub issues page](https://github.com/modelon-community/fmi-library/issues).

For information about contributing, see [here](https://github.com/modelon/contributing).

# Building
Instructions on how to build FMI Library can be found in the HTML documentation for each release. [See the release page.](https://github.com/modelon-community/fmi-library/releases)

repository: fmi-tools/fmi-library

gha_license_id: NOASSERTION

repo_name: fmi-tools/fmi-library


text:
# User Testing Report

User testing was conducted by Jesus Monsalve on 22 October, 2013 between the times of 8:25 and 9:00 with the following participants:

- Jillian Lim
- Mansura
- William Shaw

## Tasks

1. Enter Website and find the social media and click it.
2. Find information about the development of the Plate Tectonic Theory
3. Mobile experience of the website

---

## Individual Results & Observations

### Jillian Lim

- She knew where the social media was.
- It was easy to get to the information of development.
- Fix the navigation.
- She liked the mobile version.
- Change the colour of the nav that you are in.
- Link the Name“Plate Tectonic” to the homepage.

### William Shaw

- Fix the Nav on mobile.
- Move the article layout so the image is on the right. Or It could wrap aroun the content.
- Nav bar is too large.
- When he looked for the “Development” article was a bit confused to know which one was it.

### Mansura Chowdhury

- She found the Social media easy.
- The H1 should be on the same indent.
- Highlight the page you are in.
- Change the tittle to the page name.
- Fix nav bar on mobile.

---

## Trends

### Critical, Needs Fixing, Unable to Complete

- None

### Serious, Causes Frustration, May Hinder Completion

- None

### Minor, Annoying, Won’t Hinder Completion

- Fix the Nav bar on mobile
- Rearrange the layout of the articles in development. Images should wrap or move to the left of the layout.
- Highlight the page you are in.
- Make the H1 into the name of the page you are in.

repository: jesusmonsalve/large-data-website

branch_name: HEAD

repo_name: jesusmonsalve/large-data-website


text:
# From spomky-labs/jose

The following pages will help you to migrate from [spomky-labs/jose](https://github.com/Spomky-Labs/jose) and [spomky-labs/jose-bundle](https://github.com/Spomky-Labs/jose-bundle) to that new framework.

* [Keys \(JWK\)](keys-jwk.md)
* [Key Sets \(JWKSet\)](key-sets-jwkset.md)
* [Signed Tokens \(JWS\)](signed-tokens-jws.md)
* [Encrypted Tokens \(JWE\)](encrypted-tokens-jwe.md)
* [Header Checking](header-checking.md)
* [Claim Checking](claim-checking.md)

repository: web-token/jwt-doc

repo_name: web-token/jwt-doc


text:
---
layout: post
title: notes on craft
categories: [poetry]
---

## Notes on craft (and Kraft)
Super-efficient lollipop machined to
the end of bleached white stick,
Wrapped in and out with an orange
glow that feels outside of natural.

**marginal food**
**almost edible**
**dyspeptic and heartless it dominates through some unknowable magic**

…no, fuck that. i know the magic.

it's [Bernays' sauce](http://en.wikipedia.org/wiki/Edward_Bernays).

it's the factory, {the machine}, the automatic
wind of mass production that seeps itself
in a cloud, as a datapoint, as an enumerated
step on a list where this happens then that.

it's the store, {the product}, the sweet
need for inclusion planted in the air
conditioned subconscious and shielded from
the growing heat by your American shopping malls.

yes, it's the sweet need for inclusion.

(Somewhere in this process is the thing)
(that makes us all human again.)
(Some slow familiar foam bubbles in the)
(gaslit boroughs of the ego branded city.)


text:
---
title: Materialized View
author: rxcontributorone
category: working-with-data-model
subcategory: database-approach
type:simple
linktitle:materializedview
---
# Materialized View

To perform effective quering becomes much necessary when we want to recieve our desired resultset which depends upon many factors that is the size of the data, integrity of the data. For example you want to show the candidate data and the data is coming from the multiple tables instead of writing complex SQL query or LINQ query from C#, create a Materialized View, this saves the execution time as compared to other approaches. It requires less maintenance. Besides this the data in the views get high availability and resilency benefits.

> It is preferable to create a view if the number of records are limited upto 500 to 3k. If it exceeds it is preferable to create a [stored procedure] for it. The records criteria may change based upon the `JOINS` are used in the view.

In our HumanResourceApplication we have to work on candidates functionality, As we have defined the candidates table and now we are going to define the views for getting the records. Here there are three cases where making materialized view can be helpful which are stated below:

Download the Code

## 1. Displaying List of records
Suppose we want to display a list of candidates, we will make a `vCandidates` view for the same. Here Candidates id the table name and we add a abbreviation `v` which is here meant for a view. We do this to maintain a consistency of the naming convention used all over the application.

````
CREATE VIEW [dbo].[vCandidates]
AS
SELECT        CandidateId, FirstName, EmailId, Designation, Experience
FROM            dbo.Candidates
````

## 2. Displaying Data while Editing
Now we want to display specific fields of the states while edit call, we will make `vStateRecords`. We make seperate view for displaying list of records and editing because there might be some additional column or column value differing from list and edit. For example for displaying list you dont have StatusId column but in edit mode you want that column to be displayed.

````
CREATE VIEW [dbo].[vCandidateRecords]
AS
SELECT        CandidateId, FirstName, EmailId, CountryId, Designation, Experience
FROM            dbo.Candidates
GO
````

## 3. Binding data in a dropdown
In some of the areas where we have to bind the name of the countries in the dropdown, in that case we have to define the lookup view of Countries the name should be `vCountryLookups` in this case because we only need fields which are required in the lookup.

````
CREATE VIEW [dbo].[vCountryLookups]
AS
SELECT       CountryId, CountryName
FROM            dbo.Countries
GO
````


text:
# sapcli supported commands

1. [program](commands/program.md) - Reports aka programs
2. [include](commands/include.md) - Includes
3. [functiongroup](commands/functiongroup.md) - Function Groups
4. [functionmodule](commands/functionmodule.md) - Function Modules
5. [class](commands/class.md) - Object Oriented Classes
6. [interface](commands/interface.md) - Object Oriented Interfaces
7. [ddl](commands/ddl.md) - Core Data Services aka CDS views
8. [package](commands/package.md) - Development Classes aka Packages
9. [aunit](commands/aunit.md) - ABAP Unit Test framework
10. [atc](commands/atc.md) - ATC aka Source Code Inspector
11. [cts](commands/cts.md) - Change Transport System
12. [gcts](commands/gcts.md) - git enabled Change Transport System
13. [checkout](commands/checkout.md) - Source Code Management System
14. [datapreview](commands/datapreview.md) - Simple ABAP OSQL queries
15. [startrfc](commands/startrfc.md) - Run arbitrary RFC enabled Function Modules
16. [user](commands/user.md) - Create, read, and modify AS ABAP users
17. [bsp](commands/bsp.md) - Management of BSP applications
18. [flp](commands/flp.md) - Fiori Launchpad
19. [rap](commands/businessservice.md) - RAP Business Services
20. [strust](commands/strust.md) - SSL Certificates
21. [table](commands/table.md) - ABAP DDIC transparent tables
21. [badi](commands/badi.md) - New style (Enhancements) BAdI operations

repository: jfilak/sapcli

repo_name: jfilak/sapcli


text:
# Making interactive graphics with D3 and React
An original tutorial for [Journocoders London](https://www.meetup.com/Journocoders/), October 12, 2017.

🚶 David Blood | [@davidcblood](https://twitter.com/davidcblood) | [first] dot [last] at ft.com

## Introduction

Thanks for joining us at this month's Journocoders. We're going to build an interactive data visualisation using two of the world's most popular [JavaScript libraries](https://en.wikipedia.org/wiki/JavaScript_library):

* 📊 [D3.js](https://d3js.org/) is a library that's widely used for building data visualisations. It enables you to [bind data](https://github.com/d3/d3-selection/blob/master/README.md#joining-data) to web elements (usually [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) elements) then control how those elements look based on properties of the bound data. D3 was created by [Mike Bostock](https://twitter.com/mbostock), a former New York Times graphics editor, and is probably the only really indispensable tool for making online dataviz.
* ⚛ [React](https://facebook.github.io/react/) is a library for building user interfaces (UIs) from self-contained components that automatically update with changes to their underlying data. This component-based approach makes React a popular choice for building anything from basic interactive components all the way up to whole apps. React was created by Facebook, which [looked to be problematic](https://medium.com/@raulk/if-youre-a-startup-you-should-not-use-react-reflecting-on-the-bsd-patents-license-b049d4a67dd2) but [doesn't so much anymore](https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/).

A selection of D3 + React examples can be found [here](https://react.rocks/tag/D3).

We'll use React to build a simple app featuring a D3 chart with dynamic filters and transitions. This is not an advanced D3 tutorial; instead, the aim is to explore some of the possibilities for interactive development offered by this powerful combination of tools.

### Why React?
There are plenty of reasons why so many developers choose to use React, many of which have to do with the workflow it enables rather than any specific features of the library itself. Three of the best ones are:
* It's component-based and pluggable: React makes it easy to compose complex UIs from simple components, plug individual components into existing apps or integrate them with other technologies.
* It introduces [JSX](https://reactjs.org/docs/introducing-jsx.html): JSX is a syntax for writing HTML-like markup in JavaScript files, which is ultimately rendered by React as regular HTML.
* It utilises a virtual DOM: React minimises slow UI updates by comparing the current state of your page structure — specifically, its [document object model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model), or DOM — to a new, desired state and determines the most efficient way to update the DOM in order to achieve this state.

## Before you start
You'll need to ensure you have the software below installed and working. Mac users may wish to install [Homebrew](https://brew.sh/), which will make it quicker and easier to install most of these requirements. I'm assuming Linux users have all this stuff squared away.

### A terminal emulator
| macOS                                    | Windows                                  |
| ---------------------------------------- | ---------------------------------------- |
| [iTerm2](https://www.iterm2.com/index.html) | [cmder](http://cmder.net/) (download the ‘full’ as opposed to the ‘mini’ version, as it includes Git) |

### Git
| macOS                      | Windows                                  |
| -------------------------- | ---------------------------------------- |
| [Git]()/`brew install git` | [Git]() (unnecessary if you installed the full version of cmder) |

### Node.js
| macOS                                    | Windows                                  |
| ---------------------------------------- | ---------------------------------------- |
| [Node.js](https://nodejs.org/en/download/)/`brew install node` | [Node.js](https://nodejs.org/en/download/) |

### A code editor
| macOS                                    | Windows                                  |
| ---------------------------------------- | ---------------------------------------- |
| [Atom](https://atom.io/)/`brew cask install atom` | [Atom](https://atom.io/)                 |
| [Sublime Text](https://www.sublimetext.com/3)/`brew cask install sublime-text` | [Sublime Text](https://www.sublimetext.com/3) |

## Up and running
Open a terminal and run the command

`cd ~`

Now run

`git clone https://github.com/davidbjourno/making-interactive-graphics.git`

followed by

`cd making-interactive-graphics`

This'll pull down the tutorial project from GitHub into your home directory and ensure you're working in the project directory. The project requires several Node software packages to be installed before it'll work, so install them all using [npm](https://www.npmjs.com/) by running

`npm install`

When NPM has finished installing the project dependencies, run

`npm start`

to start a local web server, then navigate to `localhost:3000` in a browser. You should see this page:

![Welcome to React](images/react-app.png)

This is a simple React app rendering a logo, header and paragraph of text.

The boilerplate code for this project was created by a tool called [Create React App](https://github.com/facebookincubator/create-react-app), which generates a project structure containing everything we need to start developing with React. It doesn't include D3, though, so we'll need to install that using npm. While we're at it, let's also install [React-Bootstrap](https://react-bootstrap.github.io/), so our page elements will be styled with [Bootstrap](https://getbootstrap.com/) CSS:

`npm install --save d3 react-bootstrap bootstrap@3`

Open the project directory in your code editor (either Atom or Sublime Text) and open the file `src/index.js`. Include the Bootstrap CSS in your app by inserting this at line 4:

```javascript
import 'bootstrap/dist/css/bootstrap.css';
```

At this point, you're ready to start writing React code.

## The App component
**If at any point you need to compare your code to a completed version of the tutorial project, you can view all the files [here](https://github.com/davidbjourno/making-interactive-graphics/tree/completed).**

With the project directory open in your code editor, you should see that it has a structure like this:

```
making-interactive-graphics
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── images
│   └── react-app.png
├── public
│   └── data.csv
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js
```

Let's take a quick spin through the main files in the project. `public/index.html` is a standard HTML page with the familiar `<head>` and `<body>` elements. The interesting part of it, for our purposes, is line 29:

```html
<div id="root"></div>
```

This `<div>` element is the “root” node for the simple app created by Create React App. Everything inside this element is created and controlled by React. This is established in `src/index.js`, where the key line is:

```jsx
ReactDOM.render(<App />, document.getElementById('root'));
```

Here, the `render()` method from the `react-dom` package (installed into the project by Create React App) is called and passed two parameters separated by a comma:

1. A component to render (`<App />`)
2. A root node, i.e. an element within which to display the output of that component (in this case, the element with the ID `root` — the `<div>` on line 29 of `index.html`)

(I know this is a lot of jargon. Bear with me.)

It's standard practice to have a short `index.js` like this in a React project. Its primary function is to establish an entry point for the app on the page. A common name for the top-level component in a React app is ‘App’; hence we render `<App />` to `document.getElementById('root')` (which returns the `<div>` on line 29 of `public/index.html`).

Where does the App component come from? Take a look at the first five rows of `index.js`:

1. `import React from 'react';`: makes the `react` package available for use in this file — pretty crucial for a React app!
2. `import ReactDOM from 'react-dom';`: does the same for the `react-dom` package.
3. `import './index.css';`: loads `src/index.css` as a CSS module for styling page elements.
4. `import 'bootstrap/dist/css/bootstrap.css';` does the same for the Bootstrap CSS.
5. **`import App from './App';`: makes the JavaScript in `src/App.js` available for use in this file (i.e. the App component).**
6. `import registerServiceWorker from './registerServiceWorker';`: not relevant to this tutorial. If you want to learn more about service workers, [this](https://developers.google.com/web/fundamentals/primers/service-workers/) is probably a good place to start.

So the App component starts life as another JavaScript file called, astonishingly, `src/App.js`. Open it up. This is where we start to get into the real, meaty Reacty goodness.

In `App.js`, you'll see some more JavaScript and CSS module imports followed by a [JavaScript class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) called `App`. This class defines the App component.

Not all React components have to be defined by a class; they can also be JavaScript functions that simply return some JSX to be rendered. We only have two hours for this tutorial, so I'm going to skip over the details of the differences between the two component types and how they work, but you can always go back and read about them [here](https://reactjs.org/docs/components-and-props.html).

Back in `App.js`, if you edit some of the text inside the `<p>` tags and save the file, you should see the page reload automatically in your browser to reflect your changes. This is because Create React App projects are set up in such a way that they live-reload by default.

Let's take a leap into the unknown and replace the App component with one that manages its own internal [state](https://reactjs.org/docs/react-component.html#state). A component's state is a [JavaScript object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) containing data that determines how and when the component's output is rendered and updated. You can think of it as a sort of control panel for the component: changes made to the data in its state will cause the component to automatically re-render. In this way, a component's state serves as its “single source of truth”, which goes a long way towards simplifying the logic required to make the component behave in the way you want it to.

To see state in action, replace lines 4-19 of `App.js` with this:

```jsx
import { Col, ToggleButtonGroup, ToggleButton } from 'react-bootstrap';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { year: '2012' }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value) {
    this.setState({ year: value });
  }

  render() {
    const years = ['2012', '2013', '2014', '2015', '2016'];
    const yearButtons = years.map((year) => {
      return <ToggleButton value={year} key={year}>{year}</ToggleButton>
    });

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>

        <Col xs={12} md={8} mdPush={2}>
          <h2>Economic growth of G7 countries</h2>
          <h3>Select a year</h3>
          <ToggleButtonGroup type="radio" name="yearButtons" defaultValue={'2012'} onChange={this.handleChange} justified>
            {yearButtons}
          </ToggleButtonGroup>
          <h1>{this.state.year}</h1>
        </Col>
      </div>
    );
  }
}
```

Now your page features a toggle button group which controls the value of the header beneath it. Let's unpack some of what's happening here:

* Line 4: import some pre-built and pre-styled components from React-Bootstrap.
* Lines 6-16: define a [class constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor) that initialises the component, sets its initial state to `{ year: '2012' }` and binds the `handleChange()` [event handler](https://reactjs.org/docs/handling-events.html) to the class as a [method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Prototype_methods) (once bound, methods can be called using `this.methodName()`).
* Lines 14-16: define `handleChange()`. When called following an interaction with an element (in this case, a button), `handleChange()` receives a value from that element and calls `setState()` to set the value of `this.state.year` to that value.
* Line 18: define a [render method](https://reactjs.org/docs/react-component.html#render) to establish the component's output (what will be rendered in the DOM).
* Lines 19-22: define an array of values that we want our users to be able to select from and [map](https://mdn-mixmix.hashbase.io/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map.html) those values to an array of `ToggleButton` components.
* Lines 24-39: the JSX that will ultimately be rendered as elements on our page. Key lines to note here are:
    * Line 33: `onChange={this.handleChange}` passes `handleChange()` to the `ToggleButtonGroup` component as the method to call when its `onChange` [event](https://react-bootstrap.github.io/components.html#btn-groups-toggle-group-props) is fired.
    * Line 34: include the array of `ToggleButton` components we created via `.map()` on lines 20-22.
    * Line 36: set the text of the `<h1>` element to the value of `this.state.year` (which, on line 10, we gave an initial value of '2012').

The cumulative effect of all this is that, when a button element is clicked, `this.state.year` is set to the value of that button, and with this update to the component's state, React triggers a smart update of the DOM that changes the text of the `<h1>` element to the value of `this.state.year`.

We can use state to manage more than simple string values, however; we're going to use it to manage the data that will be filtered and then passed to our chart component. We'll load some [IMF data](https://www.imf.org/external/pubs/ft/weo/2017/01/weodata/index.aspx) on G7 countries' GDP per capita growth rates from `public/data.csv` and render this data first in an HTML table to illustrate how our data handling is going to work. Start by importing the Table component from React-Bootstrap on line 4 of `App.js`:

```javascript
import { Col, ToggleButtonGroup, ToggleButton, Table } from 'react-bootstrap';
```

Then import D3 in its entirety on line 5 (there are [alternatives to doing this](https://github.com/d3/d3#installing), but we're not getting into the modularity of D3 v4 here):

```javascript
import * as d3 from 'd3';
```

Replace your class constructor with this expanded one, which adds a couple of empty arrays as properties of state:

```javascript
constructor(props) {
  super(props);

  this.state = {
    year: '2012',
    rawData: [],
    filteredData: [],
  };
  this.handleChange = this.handleChange.bind(this);
}
```

We're going to load the complete data from `public/data.csv` into the `this.state.rawData` array. To do so, we'll make use of one of the React component [lifecycle hooks](https://reactjs.org/docs/react-component.html#the-component-lifecycle) — methods which are invoked automatically at specific points in the component render and update cycles. The `componentDidMount()` method is invoked when a component successfully [“mounts”](https://reactjs.org/docs/react-component.html#mounting) (when it's initialised and its output added to the DOM). This is the point at which it's advised to load remote data. Insert this code at line 19:

```javascript
componentDidMount() {
  d3.csv('data.csv', (error, data) => {
    if (error) throw error;

    this.setState({ rawData: data }, () => {
      this.handleChange('2012');
    });
  });
}
```

So when `componentDidMount()` is invoked by React, D3's [`.csv()`](https://github.com/d3/d3-request/blob/master/README.md#csv) method reads our CSV file and returns the individual rows of data. We then call `setState()` to replace the previously empty `this.state.rawData` array with this data.

You'll have noticed that `setState()` here also calls `handleChange()` to be fired immediately after the state update. This is how we'll ensure that our future chart component only ever needs to work with the portion of `data.csv` that corresponds to the selected year. Let's modify `handleChange()` to make it do just that:

```javascript
handleChange(value) {
  const filteredData = this.state.rawData.map(row => {
    return {
      country: row.Country,
      growth: parseFloat(row[`y${value}`]),
    };
  });

  this.setState({
    year: value,
    filteredData,
  });
}
```

As with our ToggleButton components, we're mapping the array in `this.state.rawData` to a new array which contains only the properties `country` and `growth` for whichever year value is passed to `handleChange()`. We then update state again, replacing the `this.state.filteredData` array with our newly filtered data.

With all of our data-handling set up, replace your `render()` method with the following to render a data table to the page (with a loading message that displays until the data is loaded):

```jsx
render() {
  const years = ['2012', '2013', '2014', '2015', '2016'];
  const yearButtons = years.map((year) => {
    return <ToggleButton value={year} key={year}>{year}</ToggleButton>;
  });
  let table = <h3>Loading data…</h3>;

  if (this.state.filteredData.length) {
    const rows = this.state.filteredData.map((row) => {
      return (
        <tr key={row.country}>
          <td>{row.country}</td>
          <td>{row.growth}</td>
        </tr>
      );
    });

    table = (
      <Table striped bordered>
        <thead>
          <tr>
            <th>Country</th>
            <th>{this.state.year} growth rate (% GDP per capita)</th>
          </tr>
        </thead>
        <tbody>
          {rows}
        </tbody>
      </Table>
    );
  }

  return (
    <div className="App">
      <div className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>Welcome to React</h2>
      </div>

      <Col xs={12} md={6} mdPush={3}>
        <h3>Select a year</h3>
        <ToggleButtonGroup type="radio" name="yearButtons" defaultValue={'2012'} onChange={this.handleChange} justified>
          {yearButtons}
        </ToggleButtonGroup>
        {table}
      </Col>
    </div>
  );
}
```
You should see the contents of the table update when you click on the toggle buttons.

That wasn't too painful, right? By now, I'm hoping you'll be starting to get a sense for the flexibility provided by a React-based approach. Using state, and methods which perform specific updates to state, to manage the flow of data in our app gives us a high degree of control over its functionality, with the added bonus that we don't need to learn a lot of library-specific methods or techniques (as you would with, for example, [Angular](https://angular.io/)). With the exceptions of React's default component methods and JSX, everything we're doing here is pure JavaScript.

## The Chart component
Our D3 chart will be a separate React component that'll be rendered as a _child component_ of App. Keeping components distinct and as self-contained as possible helps make them easier to debug and more reusable. Our chart will be based on Mike Bostock's example [bar chart with negative values](https://bl.ocks.org/mbostock/2368837). Get started by creating a new file called `Chart.js` in your project's `src` directory, importing the now-familiar essentials and setting up the backbone of a class that we'll call, obvs, `Chart`:

```javascript
import React, { Component } from 'react';
import * as d3 from 'd3';

class Chart extends Component {
  constructor(props) {
    super(props);

    this.updateD3 = this.updateD3.bind(this);
  }

  componentWillReceiveProps(newProps) {
  }

  updateD3(props) {
  }

  render() {
  }
}

export default Chart;
```

Couple of new things here:
* `componentWillReceiveProps()` is another React lifecycle hook. This one is invoked before the component receives new [props](https://reactjs.org/docs/components-and-props.html). In React, “props” refers to data passed to a component by its parent component in order that it can do something with that data. Like state, a component's props are contained within a JavaScript object; they can also be accessed via `this.props` from within the component class. Unlike state, though, props are read-only from the point of view of the component receiving them.

  We have to use this particular lifecycle hook here because React will render the Chart component _before_ the App component has finished filtering our data — and it's the filtered data that we need to pass to our Chart component as a prop. (I promise this'll make sense.)
* `updateD3()` will be a custom method for rendering the particular SVG elements of the chart that will need to update whenever the data (received as a prop from the App component) changes.

At this point, it's worth saying something about a key issue we face when combining D3 and React: both libraries are designed to control the DOM (D3 via its [general update pattern](https://bl.ocks.org/mbostock/3808218) and React via its [virtual DOM diffing](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation)). Allowing them both to do so would create conflicts and unanticipated behaviours and generally just break stuff. At present, there doesn't appear to be any consensus around how best to address this issue, but one approach is to use D3 to make dataviz-related calculations (scales, element height/width/position etc.) and allow React and only React to render elements in the DOM. That's what we're going to do, anyway 😇

Start by defining the chart dimensions and D3 [scales](https://github.com/d3/d3-scale) in your constructor:

```javascript
constructor(props) {
  super(props);

  this.margin = { top: 20, right: 30, bottom: 40, left: 30 };
  this.width = 700 - this.margin.left - this.margin.right;
  this.height = 500 - this.margin.top - this.margin.bottom;
  this.x = d3.scaleLinear()
    .rangeRound([0, this.width]);
  this.y = d3.scaleBand()
    .rangeRound([0, this.height])
    .padding(0.1);
  this.updateD3 = this.updateD3.bind(this);
}
```

Comparing these to the first few lines of Bostock's [example](https://bl.ocks.org/mbostock/2368837), you should notice more than a few similarities (complicated slightly by the fact that this example uses D3 v3, whereas we're using v4):

```javascript
// Don't copy-paste me anywhere! I'm just here for comparison
var margin = {top: 20, right: 30, bottom: 40, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], 0.1);
```

Maybe they're not all that similar. Anyway, whatever; the principles are the same! We've established our chart dimensions and defined a [continuous scale](https://github.com/d3/d3-scale#continuous-scales) for the x-axis and an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) for the y-axis. Next, let's write our `updateD3()` method:

```jsx
updateD3(props) {
  this.x.domain([-3.5, 3.5]);
  this.y.domain(props.data.map(d => d.country));

  this.bars = props.data.map((d) => {
    return (
      <rect
        className={`bar bar--${d.growth > 0 ? 'positive' : 'negative'}`}
        x={this.x(Math.min(0, d.growth))}
        y={this.y(d.country)}
        width={Math.abs(this.x(d.growth) - this.x(0))}
        height={this.y.bandwidth()}
        style={{ fill: 'steelblue' }}
        key={d.country}
      />
    );
  });
}
```

On lines 23-24, we're setting the domains (the range of input values) of the x- and y-scales based on properties of the incoming data. We don't want the x-axis to change every time the data is updated, so we're fixing its maximum and minimum values at -3.5 and 3.5, based on the fact that no values in our data go any higher or lower than that. The number of countries (plotted along the y-axis) won't change at any point, but even if it did, our y-scale `bandwidth()` would update to account for that.

`this.bars` defines the bar elements of our chart, which are technically SVG [`<rect>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect) (rectangle) elements. As we've done several times now, we're using `.map()` to create a new array from an existing one, in this case returning a `<rect>` for each row in `props.data`. These bars each receive the following attributes:
* `className`: a CSS class name that's conditional upon whether the bar represents a positive or negative value.
* `x`: the bar's position along the x-axis, according to our x-scale (`this.x()`). See [Bostock's example](https://bl.ocks.org/mbostock/2368837) for an explanation of why this looks a little weird.
* `y`: the bar's position along the y-axis, according to our y-scale (`this.y()`).
* `width`: self-explanatory, calculated by subtracting the x-axis position of the bar's right edge (always expressed as a positive number, courtesy of [`Math.abs()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs)) from the x-axis position of zero.
* `height`: self-explanatory, calculated by our y-scale based on the number of countries plotted along the y-axis (`this.y.bandwidth()`).
* `key`: a unique identifier [required by React](https://reactjs.org/docs/lists-and-keys.html#keys) whenever an array of elements is created by `.map()`. We're just using country name here.

Make sense? Great! Make sure `componentWillReceiveProps()` calls `updateD3()`:

```javascript
componentWillReceiveProps(newProps) {
  this.updateD3(newProps);
}
```

Finally, tell `render()` to return an SVG element with a [`<g>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g) (SVG group) element inside it with the dimensions we defined earlier, and enclose `this.bars` inside the `<g>` element:

```jsx
render() {
  let svg = <h3>Loading chart…</h3>;

  if (this.props.data.length) {
    svg = (
      <svg
        width={this.width + this.margin.left + this.margin.right}
        height={this.height + this.margin.top + this.margin.bottom}
      >
        <g transform={`translate(${this.margin.left}, ${this.margin.top})`}>
          {this.bars}
        </g>
      </svg>
    );
  }

  return svg;
}
```

Now we're ready to connect our Chart component to our App component. Return to `App.js` and insert this at line 6:

```javascript
import Chart from './Chart';
```

Call the Chart component and pass it the data filtered by the App component as a prop on line 89:

```jsx
<Chart data={this.state.filteredData}></Chart>
```

Check your page. You should see a chart with black bars and no axes that updates whenever you click one of the toggle buttons. Congrats, you've made an interactive data visualisation with React and D3!

### Add axes
In his book [‘React + D3v4’](https://swizec.com/reactd3js/), Swizec Teller suggests abandoning the no-D3-DOM-control rule when it comes to rendering chart axes, and I'm inclined to agree with him. Axes are fiddly and annoying to build from scratch, so we're going to let D3 control a small part of the DOM in order to render axes in our Chart component. First, add the following [D3 axis methods](https://github.com/d3/d3-axis#d3-axis) to your constructor in `Chart.js`:

```javascript
this.xAxis = d3.axisBottom(this.x)
  .tickFormat(d => `${d}%`);
this.yAxis = d3.axisLeft(this.y)
  .tickSize(0)
  .tickPadding(6);
```

Next, add a pair of `<g>` elements with the appropriate class names and [`transform()`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) attributes to your `render()` method. The transforms ensure that our axes will be positioned correctly within the SVG. These elements go inside the existing `<g>` element, below `{this.bars}`:

```jsx
<g className="x axis" transform={`translate(0, ${this.height})`}/>
<g className="y axis" transform={`translate(${this.x(0)}, 0)`}/>
```

Checking your page at this point will show the axes are still missing. This is because we haven't yet told D3 to apply our axis methods to anything on the page. We need to use the `componentDidUpdate()` lifecycle hook to do this, because D3 can't target an element that doesn't exist yet and `componentDidUpdate()` will be invoked _after_ the updates triggered by `componentWillReceiveProps()` have been rendered in the DOM:

```javascript
componentDidUpdate() {
  d3.select('.x.axis')
    .call(this.xAxis);

  d3.select('.y.axis')
    .call(this.yAxis);
}
```

💥

All that's left to do is add a bit of CSS to colour the chart and bring it more into line with our page styling. Put this code in a file called `src/Chart.css` and import it into `Chart.js` as a CSS module:

```css
.bar--positive {
  fill: steelblue;
}

.bar--negative {
  fill: darkorange;
}

g text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.x {
  font-size: 12px;
}

.y {
  font-size: 14px;
}
```

And **remove** the line in `Chart.js` that specifies the fill of each `<rect>`:

```css
style={{ fill: 'steelblue' }}
```

## D3 transitions in React

TK


text:
charczuk.com
============

This is my personal photoblog. It is a series of photos I've taken, with some basic tagging and metadata.

# Building

Make sure you have `blogctl` installed:

```bash
> go get -u github.com/wcharczuk/blogctl
```

Then you can build the site with:

```bash
> blogctl build
```

And serve a local copy with

```bash
> blogctl server
```


text:
# shush.js
Duplicate form entries suck. This should help combat them.
* * *

Shush is a simple and easy to use plugin for stopping duplicate form submissions.

## Usage

Link shush.js/shush.min.js into your page, and run the ```.shush()``` method on the selector for your form. For example:

```
$("form#login").shush();
```

It's that easy. It also optionally takes in a single paramether (either a string or a jQuery/Zepto object) that is considered your submit button. Otherwise, it'll just use the submit input that's inside the form .shush() is called on.

```
$("form#login").shush("button#submit");
```

## Disclaimer

This plugin is still under heavy development and has yet to be majorly tested. Use it at your own risk.

### Thanks

Thanks to the following people for their help:
* [@nathggns](https://github.com/nathggns)
* [@elidupuis](https://github.com/elidupuis)

repository: cdl/shush

repo_name: cdl/shush