text:
---
title: If we stand still, we go backwards
date: 2015-08-03 08:39:16
summary: "Recently, [ppk claimed the web is going too fast in the wrong
  direction](http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.ht\
  ml), and asked for a year's moratorium on web features. I was so angry I ran
  straight to a dictionary to find out what \"moratorium\" meant. Turns out it
  means \"suspension\".\r

  \r

  I got a bit snarky about it on Twitter, which isn't really fair, so here's a
  more considered response:"
mindframe: ''
image: null
meta: ''
---

Recently, [ppk claimed the web is going too fast in the wrong direction](http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html), and asked for a year's moratorium on web features. I was so angry I ran straight to a dictionary to find out what "moratorium" meant. Turns out it means "suspension".

I got a bit snarky about it on Twitter, which isn't really fair, so here's a more considered response:

# "The web is getting more complicated"

Is it? Let's look at the modern web's "hello world":

```html
<!DOCTYPE html>
<title>Hello</title>
World
```

Let's compare that to the pre-HTML5 "hello world":

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hello</title>
  </head>
  <body>
    <div>World</div>
  </body>
</html>
```

"Hello world" is simpler now than it has ever been.

Ok ok, as many have pointed out, "Hello world" is not a fair judge of complexity, but take the [world's first web site](http://info.cern.ch/hypertext/WWW/TheProject.html) - it still works in modern browsers. For any given page, the complexity of creating it today is the same, or easier.

So it's not that achieving the same has gotten more complicated, it's that…

# User expectations are higher

We shouldn't be surprised by this. Expectations change. Back in 1995, one of my favourite comedians said (something like) this:

I'm not interested in Star Trek or child pornography so the internet has nothing for me
— Stewart Lee

The web has come a long way in twenty years. Transferring data across the globe is no longer a big deal. Making an online purchase is not something you'd wow a dinner party with. Given the web's progress, last decade's "pretty good" is today's "a bit shit".

User experience has become a competitive element on the web. As a result, us developers and designers have had to up our game, but we're getting a better web as a result.

# Is the web platform too big?

To enable us to build better experiences, the web platform gained new features. Is this a problem?

When I left university, I felt I knew all of the web platform.

As new features appeared and I learned more about the existing platform, I realised I wasn't capable of knowing it all. At first this felt like a personal failing, but I've since made peace with it.

Is the web platform too big? For one person, yes. Is it a problem? No. No one can be an expert in the whole web. Surgeons aren't experts in all types of surgery, scientists aren't experts in all of science, web developers aren't experts in all of web development.

A couple of years ago, I ran a [little quiz on browser requests](https://youtu.be/WiOl0Y06xV4?t=2m56s). The top scorer was usually below the 50% mark, not because the audience were idiots, far from it, they were competent web developers, some of them experts. It just wasn't stuff everyone needed to instantly recall, it was stuff you'd be able to work out as and when needed, using developer tools (just as I did when making the quiz).

A few years ago, the sum-total of my "offline web" knowledge was "there is a thing called appcache that does it", and that was enough. I didn't have to learn any more about it until a project came along that would benefit from it. Of course I now know that _every_ project benefits from offline, right? Right?

## Just because it's there, doesn't mean you must learn it and use it

Here's a picture I took of some planes doing a thing:

It could be better, so let's get Photoshop on the case. When faced with Photoshop's expansive set of tools, it's a common beginner mistake to throw everything at it:

This may be Michael Bay's wet dream, but he's the exception. However, I could use a subset of features more subtly:

Same goes for the web. You don't need to achieve 100% browser code coverage in a single page. Use what's right for the project. The best user experience is the simplest thing that achieves the user's goals.

# Are we adding the right features to the web?

ppk argues that we're blindly copying native, I don't think we are, but that doesn't mean we should ignore native altogether. We should add features using evidence, and native is a great source of evidence.

Through native, we've seen users benefit from push messaging, offline data access, gps, speedy payments. Through native we've also seen store management harm openness, packaging hurt linking, and up-front permissioning harm security and privacy. Native's successes and failures are great data points.

And let's be clear here, when we say "native" we mean the class of devices that arrived after the web, mobile & tablet. The web was ready for mobile as soon as we put a browser on it, but it wasn't optimised for it. Media queries, gps, push messaging, and soon, pointer events, these are features that adapt to the new device inputs, new screen dimensions, new usage patterns.

Of course, native isn't the only source of UX evidence. Going back a few years, we were looking at what Flash did best, and took from there. When I read "we shouldn't do [feature] because that's what native does", I wonder if that same person thinks we shouldn't have `<video>` because that's what Flash did.

Libraries and tools are other sources of evidence, they show what developers are fighting. [jQuery](https://jquery.com/) showed developer's frustration with the stagnation of IE, and which DOM features were lacking. [Coffeescript](http://coffeescript.org/) showed frustrations with JavaScript language features. [Sass](http://sass-lang.com/) showed frustrations with CSS. These things, and their popularity, were a clear signal that developers found parts of the web platform lacking, and were unhappy with the pace of development.

Other features, such as HTTP/2, were created by looking at the weak points of the web. Sure, HTTP/2 is more complex than HTTP/1.1, but it also reduces the need for a lot of hacks like concatenation, inlining, spriting, which complicate today's web.

We haven't always gotten it right, see appcache. In that case we didn't have enough evidence, and created a high-level solution that couldn't be used the way developers wanted. Following that, we adopted a different approach, [the Extensible Web](https://extensiblewebmanifesto.org/). Now we try to introduce lower-level features first. Those are more flexible, but require more JavaScript to build into a full experience. Developers' use of these low-level features becomes a new source of evidence for future higher-level features.

# Halting is not a successful strategy

Back in 2007, Apple brought out the iPhone. Compared to its competitors, it was a step forward in terms of its excellent touch screen and interaction design. In other areas, it was lacking. No 3g connectivity, no GPS, no front camera. Did it stick to what it was good at and impose a moratorium on the rest? No.

But one company did. They were called "Research In Motion", and produced a phone called a "BlackBerry". They decided to concentrate on their current set of users, who they decided didn't want change. But that set of users decreased as expectations changed.

BlackBerry had a head start in the mobile race, but they stopped.  Meanwhile, the iPhone gradually assimilated the advantages of its competitors. Not all of them, just the features that mattered, ones that had a proven track record.

I love the web, therefore I react in shock to any suggestion that we should adopt the BlackBerry strategy.

I was a developer during the last moratorium of the web, IE6-8. IE6 came out in 2001 and it was great, but then Microsoft stopped. IE7 came out in 2006, and IE8 in 2009, but they were mostly bug-fix releases, they had little in the way of new features. We're still recovering from that, but it feels like there's light at the end of the tunnel. I don't want to go back there!

# Improve the web forward

The great thing about the web is it doesn't hit 1.0 and stop, it's continual. Table layouts were observed, and CSS was delivered to offer express layout without all the markup cruft. DOM selector libraries were observed, and we got `querySelectorAll`. Viewport diversity was observed, and we got media queries. Mobile usage has sky-rocketed, and it's an exciting new thing to observe.

We shouldn't get snobby about features that appeared on other platforms first. Native apps are looking to gain the web's advantages too, they're figuring out linking, and at some point they're going to figure out progressive loading and get rid of the install process. If we stop, we lose.

The web is feature-rich, and it's great. Media queries, touch events, flexbox, service worker, push messaging, web audio, canvas… these are all features you may use to improve user experience. I'm not sure which of these fall into ppk's "this far, no further" basket, but you don't _have_ to use any of them. You are welcome to draw a line in the sand and refuse to learn new web features from this day forth. But if a competitor does use them, and uses them to create a better user experience than the one you offer, you lose. But users win.

**Update:** [Opera's Bruce Lawson responded to ppk](https://dev.opera.com/blog/on-a-moratorium-on-new-browser-features/) at almost the same time I did. I think I published first by like 5 minutes, so I win. In your face Bruce!

Thanks to Anne van Kesteren, Alex Russell, Peter Beverloo, and Paul Lewis for proofreading and general point-sharpening. For reading this far you win a [free TIE-kitten dogfight desktop wallpaper](https://www.flickr.com/photos/jaffathecake/20065547268/).


text:
---
templateKey: 'blog-post'
title: 'Microservices for beginners, how to get started with right tools'
date: 2017-07-18
featuredpost: false
description: >-
  Microservices for beginners, how to get started with the right tools and when to choose the microservices. An introduction to advantages and disadvantages.
author: Tarun Batra
link: /microservices-for-beginners
category:
- Tutorial
tags:
- microservices
---

__Microservices__ is a vague term which usually points to small independent services which together form up an application. [Microservices architecture](https://martinfowler.com/articles/microservices.html) stands in contrast to Monolithic architecture, where the application is one big system. We will discuss about how to get started as a beginner and choosing the right tools for setting up microservice architechture.

## Rapid Rise in popularity of Microservices
Microservices have recently risen into popularity, as suggested by this Google trends index:

![microservices in Google Trends](./images/Screen-Shot-2017-07-14-at-11.53.15-e1500013748185-1024x404.png)

“microservices” in Google Trends

Before getting into what they are, and how to use them, let’s find out why microservices are rising into popularity even though it’s not a new concept. This can be explained by Conway’s Law which states that:

> Organisations which design systems … are constrained to produce designs which are copies of the communication structures of these organisations

Until recently majority of companies were used to be giant enterprises, making equally giant enterprise software, or monoliths. Not anymore. Since last 5 years, companies are getting more distributed in nature. In fact, some of the new unicorns like [Automattic](https://automattic.com/) and [Gitlab](https://about.gitlab.com/) are entirely distributed. That explains why microservices are rising in popularity.

## Why Microservices?

### Fewer compromises in tech stack

Choosing a tech stack is always a tough call. Skills of the team, scalability, maintenance are all important factors in this choice. But many times what’s good for one portion of the app, is not good for the other.

For example, a trading platform needs PostgreSQL due to support for transactions, the user specific data has to be stored in DynamoDB. Generally, a trade off is made. But in Microservices Architecture, __each microservice owns a set of business logic and related data in the form it deem best__, and provide an interface to interact with it. So there can be microservices for trades and users each, with data hosted on PostgreSQL and DynamoDB, and access to external services is allowed only through the interface. So a computation intensive microservice can be written in Python while the API Server remains in NodeJS, and so on.

A sample architecture would look like

![image](./images/microservices-beginner-2.jpg)

## Independent teams
In a monolithic application, most of the people in a development team needs to know all the parts of the application even to develop a small feature. They have to collaborate with other teams on deployment schedules, versioning, data migrations, etc. On the other hand, in Microservices Architecture the teams just need to know the interface provided by other services and stick to the interface provided by theirs. Each microservice should be __independently deployable.__ CI/CD tools like [CirclCi](https://circleci.com/), [Travis](https://travis-ci.org/) and [Heroku](https://www.heroku.com/) are of great help while developing microservices. To develop/maintain a service, a small team with limited knowledge is enough.

## Do one thing and do it well
Microservices Architecture also resembles the Unix philosophy’s principle, Do one thing and do it well. It is a principle which has proved it’s worthiness and is one of the reasons Unix-like systems are not obsolete even after decades. Microservices should be designed to do one thing, tested to handle all the possible scenarios and then __“piped” together to form a robust and flexible application.__

## Fault isolation
Imagine error in a report generation module, takes the full trading application down. It’s terrible and unnecessary. If the application is based on microservices, the report generation module will fail, taking down only that specific feature. Users who are not generating reports won’t even notice, and __the critical parts of the application will still be working__. That’s a result of __Loose coupling__ between microservices, now achievable through this architecture.

![microservice beginner](./images/microservice-beginner-1.jpg)

## How to develop Microservices?
In Node.js, [Seneca](http://senecajs.org/) is a widely used framework to develop microservices. But if you want to get yours hands dirty, read on.

## API Gateway
Microservices can be deployed without a main central service, but sometimes a thin central layer is usually kept to have shared libraries. Sometimes it also works as an API Gateway.
An API Gateway is used to provide a consistent API to the client side irrespective of the backend service, and vice versa. It is helpful when you have multiple microservices catering to clients like mobile, web, other servers, etc. Also it prevents client to make requests to multiple services by abstracting it into one request.

## Inter-service communication
How should these services communicate to each other?

__HTTP:__ Well, there are plenty of options. Most straightforward is to use HTTP/HTTPS and the interface can be made as RESTful APIs. Though, HTTP makes service discovery difficult and less dynamic. That’s a reason I don’t prefer it.

__Message Queues:__ Message Queuing protocols like AMQP, STOMP and MQTT allows the use of publish subscribe pattern for communication between microservices. Services like [RabbitMQ](https://www.rabbitmq.com/) and [Apache Kafka](https://kafka.apache.org/) are widely used for this purpose. I personally prefer using Message Queues as they are __fault tolerant__ and support __message persistence__.

[microservice-template](https://github.com/Codebrahma/microservice-template) is a basic boilerplate which we use in our projects based on Microservices. It’s in Node and has MongoDB configured as a data store. It connects to RabbitMQ for inter-service communication via[ servicebus](https://www.npmjs.com/package/servicebus). Here’s how it looks in it’s bare minimum:

![Microservice logs](./images/Screen-Shot-2017-07-13-at-19.21.56.png)
Microservice booting up and communicating

There are other concepts like [Event Sourcing](https://martinfowler.com/eaaDev/EventSourcing.html) and [CQRS](https://martinfowler.com/bliki/CQRS.html) which complement the Microservices Architecture. Event Sourcing is basically storing the changes to the data, instead of the changed state of the data. in a highly concurrent environment, __event sourcing brings consistency of a higher order.__

![Productivity in Microservices vs Monolothic Architecture](./images/productivity.png)

Productivity in Microservices vs Monolothic Architecture Source: [Martin Fowler](https://martinfowler.com/bliki/MicroservicePremium.html)

But truth be told, Microservices Architecture is no silver bullet. Using microservices for fairly small apps can lead to loss in productivity, as evident in the above graph. To know if switching to microservices [custom app development](/custom-software-development-company) will help your product do get in touch with us.

license: MIT

repository: Codebrahma/cbweb

branch_name: refs/heads/master

extension: md

gha_language: JavaScript

gha_license_id: MIT

license_type: permissive

repo_name: Codebrahma/cbweb


text:
# CucumberCharacteristics

Gem to profile cucumber steps and features.

## Compatibility

+ (J)Ruby - 1.9.3 -> 2.3.0
+ Cucumber - 1.3.5, 2.4.x+

## High level features

Step analysis including
+ Location of step in steps file & regex
+ Step usage location and number of times executed (background/outline, etc.)
+ Counts for success/failure/pending/etc.
+ Total time taken in test run
+ Average, fastest, slowest times per step
+ Variation, variance & standard deviation calculations

Feature analysis including
+ Feature location
+ Time taken to run feature
+ Result of feature test (pass, fail, etc.)
+ Number of steps run
+ Breakdown of feature by individual example run if a scenario outline

Other features.
+ Reporting of ambiguous step calls
+ Reporting of unused step definitions

## Installation

### Step 1

Add this line to your application's Gemfile:

    gem 'cucumber_characteristics'

And then execute:

    $ bundle install

Or install it yourself as:

    $ gem install cucumber_characteristics

### Step 2

Add the following line to your cucumber environment file typically found at `features\support\env.rb`

    require 'cucumber_characteristics/autoload'

## Usage

1. For always-on automatic loading (recommended), add `require 'cucumber_characteristics/autoload'` to `features/support/yourapp_env.rb`.  It is recommended by cucumber that you do not enhance features/support/env.rb so that upgrades are painless (relatively)

2. Add it to your `cucumber.yml` by adding `--format CucumberCharacteristics::Formatter` i.e.

    `std_opts = "-r features/. -r --quiet --format CucumberCharacteristics::Formatter --format progress"`

3. Use it via command line with `--format CucumberCharacteristics::Formatter`.

## Configuration

You can configure the export of step characteristics via the following (defaults are same as example)

    CucumberCharacteristics.configure do |config|
      config.export_json = true
      config.export_html = true
      config.precision = 4
      config.target_filename =  'cucumber_step_characteristics'
      config.relative_path =  'features/characteristics'
    end

This again can be added to your cucumber environment file typically found at `features\support\env.rb`

## Results

Exported characteristic information is listed out at the end of the cucumber run in a message similar to

    Step characteristic report written to /home/singram/projects/gems/cucumber_characteristics/features/characteristics/cucumber_step_characteristics.html
    Step characteristic report written to /home/singram/projects/gems/cucumber_characteristics/features/characteristics/cucumber_step_characteristics.json

depending on the options specified.

The JSON option is provided for convenience in case there is a further use case/analysis required that is not provided by the gem.

An example can be found [here](features/characteristics/cucumber_step_characteristics.json)

## Problem

The formatting hooks on the face of it provide the necessary event points to profile any given feature file.
This is true for a Scenario, but consider the following ScenaioOutline

    Feature: As a user I want to understand where my tests are spending their time

      Scenario Outline: Timings for scenario outline
        Given I wait <given_wait> seconds
        When  I wait <when_wait> seconds
        Then  I wait <then_wait> seconds
        And   I wait 0.2 seconds
        Examples:
        | given_wait | when_wait | then_wait |
        |          1 |         2 |         3 |
        |          5 |         6 |         7 |

Running

    cucumber --format debug features/outline.feature

A couple of problems become evident

1. There are step definitions walked prior to the examples_array.  These steps are not actually invoked rendering these hooks points misleading for profiling purposes
2. There are only 3 table_cell element blocks. These can be profiled, but what about the last step that does not have an input from the examples?  There are no hook points to profile this step.

This is why when you use the 'progress' formatter you would get 4 'skipped' for the initial step hooks triggered and then only 6 green dots representing steps when there should be 8 as it key's off table cells not steps.

Possible solutions

1. Introduce new hook point for all true step invocations regardless of context.
2. Adjust table_cell hooks to include 'null' cells when considering steps without definitions.
3. Include profile information in runtime master object to parse out at end.

As it turns out it was pretty simple to enhance the runtime object to reliably return profile information.

## Development

1. Install development environment

    `bundle install`

2. Run formatter over default cucumber version

    `bundle exec cucumber`

3. Run tests across all supported cucumber versions

    `bundle exec rake versions:bundle:install`

    `bundle exec rake versions:test`

* NOTE.  When running the cucumber tests failures, pending etc are expected.  All specs should pass *

## Contributing

1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request (after running tests!)

## Credits
1. Ryan Boucher [cucumber_timing_presenter](https://github.com/distributedlife/cucumber_timing_presenter) for inspiration.
2. AlienFast [cucumber_statistics](https://github.com/alienfast/cucumber_statistics) for inspiration.
3. [Brandon Hilker](http://brandonhilkert.com/blog/ruby-gem-configuration-patterns/) for gem building tutorials
4. Nathan Menge for helping QA the ruby 2.3.0 / cucumber 2.3.0 updates

gha_language: Ruby


text:
# FoodBot-Hackathon
Slack Bot that gives you the top 4 rated places based on your desired food Cuisine! Utilizes Google's Places API to search for food based on the given location and search criteria.

## Search Criteria
You can search based on Radius and Price on your favorite cuisine!

## Note
In order to run this on your slack, you would have to **create a google developers account and generate an API Key** and add it into /src/constants/GoogleApiConstants.js. As this app is built using **AWS lambda**, you will also have to create an AWS account and fill in the provider section in src/handler/handler.js.


text:
# WeatherCalendar
A Simple App with a 5-day Weather Forecast.

This app makes use of the free, 5-day/3-hour forecast OpenWeatherMaps API:

https://openweathermap.org/api

The key for this API is omitted from this repository.  To add the API key, you must create a new xml file:

WeatherCalendar/app/src/main/res/values/secrets.xml

and add the following resource:

`<resources>`

    `<string name="OpenWeatherMaps_API_Key_Secret">YOUR_API_KEY_HERE</string>`

`</resources>`

repository: danerbland/WeatherCalendar

repo_name: danerbland/WeatherCalendar


text:
[![Build Status](https://travis-ci.org/nickpegg/cookbook-np-users.svg?branch=master)](https://travis-ci.org/nickpegg/cookbook-np-users)

# np-users
Sets up users on one of my machines, including SSH keys, U2F keys, and dotfile
repos. The `nick` user has a few extra things, so there's a separate recipe for those.

## Personal Cookbook Notice
This is a personal cookbook and I haven't really taken the care to generalize
it. It's public in hopes that maybe it's of use to someone, either directly
with its content or seeing how I do things with Chef.

## Testing
It's assumed that you have chefdk installed.

```bash
chef exec rake
chef exec kitchen test
```

repository: nickpegg/cookbook-np-users

branch_name: refs/heads/main

repo_name: nickpegg/cookbook-np-users


text:
---
sidebar_position: 6
---

# Operating a Hydra Node

```mdx-code-block
import TerminalWindow from '@site/src/components/TerminalWindow';
```

This page aims at helping Hydra users troubleshoot issues when running their own instances of `hydra-node` and participate in a Hydra Head.

## Logs

Following [ADR-9](/adr/9) design principles, the `hydra-node` provides [JSON](https://json.org) formatted logs on the `stdout` stream, one line per log item. The log items follow a [JSON schema](https://github.com/input-output-hk/hydra/blob/master/hydra-node/json-schemas/logs.yaml). This logging capability is kept voluntarily simple and non configurable in order to ease integration of Hydra logging into more general log analysis infrastructure, whether a custom ELK stack, third-party services, docker sidecars...

:::info

There is an unpublished [log-filter](https://github.com/input-output-hk/hydra/blob/master/hydra-cluster/exe/log-filter/Main.hs) executable that one can attach to a hydra-node in order to trim down the volume of information in the log stream. This filter provides _some_ filtering features, namely removing transactions bodies and replacing them with transaction ids, but it's not general enough to warrant publication. Similar capabilites can be easily provided with tools like [jq](https://stedolan.github.io/jq/).

:::

## Monitoring

When given `--monitoring-port PORT` argument, the hydra-node executable will expose a [Prometheus](https://prometheus.io) compatible HTTP `/metrics` endpoint on the given port to enable _scraping_ of exposed metrics.

For example, assuming a hydra-node was started with `--monitoring-port 6001`, this command

```mdx-code-block
<TerminalWindow>
curl http://localhost:6001/metrics
</TerminalWindow>
```

will output

```
# TYPE hydra_head_confirmed_tx counter
hydra_head_confirmed_tx  0
# TYPE hydra_head_events counter
hydra_head_events  50467
# TYPE hydra_head_requested_tx counter
hydra_head_requested_tx  0
# TYPE hydra_head_tx_confirmation_time_ms histogram
hydra_head_tx_confirmation_time_ms_bucket{le="5.0"} 0.0
hydra_head_tx_confirmation_time_ms_bucket{le="10.0"} 0.0
hydra_head_tx_confirmation_time_ms_bucket{le="50.0"} 0.0
hydra_head_tx_confirmation_time_ms_bucket{le="100.0"} 0.0
hydra_head_tx_confirmation_time_ms_bucket{le="1000.0"} 0.0
hydra_head_tx_confirmation_time_ms_bucket{le="+Inf"} 0.0
hydra_head_tx_confirmation_time_ms_sum  0.0
hydra_head_tx_confirmation_time_ms_count  0
```

## Common Issues

### No Head is observed from the chain

* `hydra-node` is connected to a `cardano-node` that's on the wrong
  network. Check the `--network` command-line argument and the
  `cardano-node` configuration
* Note that the `hydra-node` cannot start if it cannot connect to the
  `cardano-node`, which might require some time as the `cardano-node`
  needs to revalidate its database and possibly even reconstruct its
  ledger state when it starts and its connections are not open until
  it's ready. If running as a service or a container, make sure the orchestrator restarts the process when it crashes
* The _Scripts_ transaction identifier is invalid. This transaction id
  is available in the
  [release](https://github.com/input-output-hk/hydra/releases/tag/0.10.0)
  page for the 3 major networks (`preview`, `preprod`, `mainnet`)
* The `hydra-node`'s _Cardano signing key_ is inconsistent with the
  _Verification key_ from the `Init` transaction. Check the
  `--cardano-signing-key` parameter points to the right key, and that
  peers have the correct `--cardano-verification-key` for your host.
* The peers' _Cardano verification keys_ are incorrect. This is
  mirroring the above issue, check parameters on all peers.

### Head does not make progress

* Peers are not correctly connected to each others'. Check the
  `--peer` arguments point to the right `host:port` for each
  peer. `PeerConnected` message should be sent to the client (or
  appears in the logs) and be consistent for all peers involved in a
  Head.
* The _Hydra signing key_ for our node or the _Hydra verification
  keys_ for peers do not match what's expected by each node. Check
  that `AckSn` messages are received by all parties and that the
  `LogicOutcome` log does not contain any `Error`

repository: input-output-hk/hydra

gha_language: Haskell

repo_name: input-output-hk/hydra


text:
# express-form-data
Module to parse multiform data. Based on [connect-multiparty](https://github.com/expressjs/connect-multiparty)

# Install
`npm install express-form-data`

# Example
```js
const formData = require("express-form-data");
const express = require("express");
const app = express();

const multipartyOptions = {
  autoFiles: true;
};

// parse a data with connect-multiparty.
app.use(formData.parse(multipartyOptions));
// clear all empty files (size == 0)
app.use(formData.format());
// change file objects to node stream.Readable
app.use(formData.stream());
// union body and files
app.use(formData.union());
```

After this functions we can see in req:
* req.files = {...} all files
* req.body = {...} all data including files(or streams if you use .stream())

repository: ciriusblb/biblioteca-app

repo_name: ciriusblb/biblioteca-app


text:
# Maxi Vega website
My portfolio built using ReactJS, Styled Components, and Github Pages.

## Requirements
This app was built using create-react-app so the requirements are the same.

- Node >= 8.10

## Tree

````
src/
├── components
│   ├── Body
│   │   ├── Intro
│   │   ├── Samples
│   │   └── Services
│   ├── Footer
│   ├── Header
│   └── commons
│       ├── Button
│       └── Icons
└── config
````

## How to set up the project
The basic steps to set up the project are:
- Clone the repo
- Open the folder
- Run ```npm install```
- Run ```npm start```


text:
# Useful SSH commands

```
# get the fingerprint
ssh-keygen -lf /etc/ssh/ssh_host_ecdsa_key.pub

# get the with MD5
ssh-keygen -E md5 -lf /etc/ssh/ssh_host_ecdsa_key.pub

# get public keys from the host

```

repository: GunnuD/easyio

repo_name: GunnuD/easyio


text:
# CSS Animation Blocks
_A JavaScript library for managing and applying CSS animations with the following features:_

1. **Animation Blocks:** Uses JavaScript objects to manage animation blocks in timeline format. Blocks can be nested, allowing complex animations by combining small, easily-maintained blocks.

2. **Additive Animations:** Multiple CSS Animations can be added to Dom elements in sequence, and will not cancel out running animations, as long as the added animations don't target the same attributes.

3. **Multiple Transform Animations:** To allow multiple sequential transform animations, CSS Animation Blocks creates nested wrapper elements around your elements. Each transform animation is applied to its own wrapper element. Without wrapper elements, transforms would cancel each other out.

## Installation
There are two npm options for adding CSS Animation Blocks to your JS project. First run `npm install css-animation-blocks`, then include in your project using 'require' or 'import'.
* `const { AnimationBlock } = require 'css-animation-blocks';`
* `import AnimationBlock from 'css-animation-blocks';`

You can also include css-animation-blocks directly in the head of an html page:
* `<script src="https://unpkg.com/css-animation-block"></script>`

## Documentation

### Instantiate
To create an AnimationBlock, require 'css-animation-blocks' and call `new AnimationBlock()` with a block timeline object and an optional configuration object.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const mainBlock = new AnimationBlock({
  '00:00.000': {}
}, {
  Defaults: {},
  Loop: {}
});

mainBlock.start();
```

### AnimationBlock timeline objects
Within a block timeline object, the main object keys are timecode strings, in the format 'minutes:seconds.milliseconds (00:00.000)'. This represents the moment in time your defined animations will start.

Each timecode key holds an object with an **'animations'** array. This is where you'll call your **'cssAnimation'** and **'cssTransform'** keyframes on a Dom **'elementSelector'** in an html page.

* **'cssAnimation'** is an array of CSS Animations.
* **'cssTransform'** is an object. The keys are the CSS Transform type, and the values are CSS Animations.
* **'elementSelector'** is a string value for any valid Dom selector that works with `document.querySelectorAll`.

> Use standard CSS animation shorthand syntax.
> [See the Mozilla docs for detailed info on CSS Animation shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/animation), and also [for more info about the CSS transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform).

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const mainBlock = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease normal forwards'
        ],
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards',
        },
        elementSelector: 'h1'
      }
    ]
  }
}, {
  defaults: {},
  loop: {}
});

mainBlock.start();
```

The above would add the **'cssAnimation'** 'fade-in 1s ease normal forwards' and **'cssTransform'** animation 'rotate 2s ease normal forwards 1' to all 'h1' elements.

In order for this to work, you must define CSS keyframes 'fade-in' and 'rotate' in an external CSS stylesheet included in you html page. That CSS might look like this:

```css
h1 {
  opacity: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

You'll also need an HTML page that includes a h1 element:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- include the CSS mentioned above -->
    <link href="style.css" rel="stylesheet">
    <script src="https://unpkg.com/css-animation-block"></script>
    <script>
      /* JavaScript goes here */
    </script>
  </head>

  <h1>CSS Animation Blocks</h1>
</html>
```

#### groupOffset

When applying animations to multiple objects, it's possible to add a delay between each one. **'groupOffset'** is an object that contains a **'delayTime'** or **'delayRange'** element.

  * **'delayTime'** is the number of milliseconds to
  wait between applying animations to the each of the chosen elementSelectors.
  * **'delayRange'** is an array containing two 'delayTime' numbers representing the min/max time to delay between applying animations to the each of the chosen elementSelectors. At runtime, a number will be randomly selected using the 'delayRange' values as the min/max to choose from.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const mainBlock = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease normal forwards'
        ],
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards',
        },
        elementSelector: 'h1',
        groupOffset: {
          delayTime: 300
        }
      }
    ]
  }
}, {
  defaults: {},
  loop: {}
});

mainBlock.start();
```

The above adds a **'groupOffset'** of 300 milliseconds, so each 'h1' element's animation will start with a 300 millisecond delay.

#### Nested AnimationBlocks
Another element you can add to timecode objects is a **'blocks'** array. Animations can be split into smaller blocks combined into another AnimationBlock.

In the previous example, there's a mainBlock with animations applied to an 'h1' elementSelector. Let's move that animation into its own 'h1Block' and include that in the mainBlock's **'blocks'** array.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const h1Block = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease normal forwards'
        ],
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards',
        },
        elementSelector: 'h1',
        groupOffset: {
          delayTime: 300
        }
      }
    ]
  }
});

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [h1Block]
  }
}, {
  defaults: {},
  loop: {}
});

mainBlock.start();
```

### AnimationBlock config object
The optional config object can be used to apply settings to an entire AnimationBlock.

#### Defaults object
To apply default **'elementSelector'** and **'groupOffset'** settings to an entire AnimationBlock, use the defaults object. When a default value is set, that value applies to all animations in the AnimationBlock, unless that value is already defined.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const h1Block = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease normal forwards'
        ],
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards',
        },
      }
    ]
  },
  '00:03.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease reverse forwards'
        ],
      }
    ]
  }
}, {
  defaults: {
    elementSelector: 'h1',
    groupOffset: {
      delayTime: 300
    }
  }
});

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [h1Block]
  }
}, {
  defaults: {},
  loop: {}
});

mainBlock.start();
```

The above **'defaults'** settings applies all animations to the 'h1' **'elementSelector'**, and sets a 300 millisecond **'groupOffset'** **'delayTime'** before applying the animation to each 'h1' element on the page.

#### Loop object

Use the **'loop'** object to make an AnimationBlock play multiple times.

* **'count'** is a number representing how many times to repeat the AnimationBlock.
* **'infinite'** is a boolean (true/false). If set to true, the AnimationBlock will repeat continuously.
* **'endTime'** this is a timecode string (00:00.000) indicating when to end the current loop and start the next loop.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const h1Block = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease normal forwards'
        ],
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards',
        },
      }
    ]
  },
  '00:03.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease reverse forwards'
        ],
      }
    ]
  }
}, {
  defaults: {
    elementSelector: 'h1',
    groupOffset: {
      delayTime: 300
    }
  },
  loop: {}
});

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [h1Block]
  }
}, {
  defaults: {},
  loop: {
    count: 2,
    endTime: '00:05.000'
  }
});

mainBlock.start();
```

## Basic Tutorial

This short tutorial should provide a basic understanding of CSS Animation Blocks by building a simple animation.

### HTML
Here's an html page with a _".container div"_, _".box div"_ and an _"h1"_ .

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Animation Blocks</title>
  <link href="style.css" rel="stylesheet">
  <script src="index.js" type="module"></script>
</head>
<body>

  <div class="container">
    <div class="box">
      <h1>CSS Animation Blocks</h1>
    </div>
  </div>

</body>
</html>
```

It also includes two external files, _"style.css"_ and _"index.js"_. That's where we'll place code to animate the _"box"_ element.

### CSS
In the _"style.css"_ file, add styles to set the _"box"_ element's initial state, and create animation keyframes that can be applied with Animation Blocks.

The following styles create a square red box with _"opacity"_ set to 0 (invisible), and keyframes _"fade-in"_, _"move-down"_,  _"background-red"_ and _"rotate"_.

> _NOTE: These examples only include the @keyframes syntax. You may require @-webkit-keyframes and other vendor prefixes for cross-browser compatibility._

```CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 1.4rem;
  text-transform: lowercase;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 180px;
  background: black;
  opacity: 0;
  position: relative;
  border-radius: 10px;
  padding: 0;
  margin: 1em;
  overflow: hidden;
}

h1 {
  width: 100%;
  text-align: center;
  color: #fff;
  opacity: 0;
  padding: 0;
  margin: 0;
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes move-down {
  0% { transform: translateY(0%); }
  100% { transform: translateY(20%); }
}

@keyframes background-red {
  to { background: red; }
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}
```

Opening the html file in a browser now would show an empty page, because our elements have '0' opacity. Create an Animation Block to apply the _"fade-in"_, _"move-down"_ and _"background-red"_ keyframes to the _"box"_ element.

### JavaScript
In the _"index.js"_ file, import the AnimationBlock library and create a new AnimationBlock:

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const mainBlock = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        elementSelector: '.box',
        cssAnimation: [
          'fade-in 1s ease normal forwards',
          'background-red 1s steps(1) normal forwards',
        ],
        cssTransform: {
          translateY: 'move-down 2s ease normal forwards',
        },
      },
    ]
  }
},{});

mainBlock.start();
```

At time _"00:00.000"_ we have an _animations_ array containing animation objects. Each animation object:
* Must have one _"elementSelector"_. The _"elementSelector"_ above targets _".box"_ (all elements with the class "box").
* Can (optionally) have one _"cssAnimation"_ array containing CSS animation shorthand strings.
* Can (optionally) have one _"cssTransform"_ object. Object keys should match the transform type, and the values are CSS animation shorthand strings.

The animation block above applies three animations, _"fade-in"_, _"background-red"_ and _"move-down"_. Load the page in a browser and you should see the box fade in, move down and turn red.

> _NOTE: Animations are written in standard CSS animation shorthand. For more info, [visit the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)_

### Nested Blocks

One benefit of CSS Animation Blocks is that you can include blocks in other blocks. To illustrate let's extend the previous example by moving the _".box"_ animation into its own block, and include that block in the _"mainBlock"_.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const boxBlock = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        elementSelector: '.box',
        cssAnimation: [
          'fade-in 1s ease normal forwards',
          'background-red 1.5s steps(1) normal forwards',
        ],
        cssTransform: {
          translateY: 'move-down 2s ease normal forwards',
        },
      },
    ]
  }
},{});

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [boxBlock]
  }
},{});

mainBlock.start();
```

We created a new Animation Block named _"boxBlock"_. To nest that block in our _"mainBlock"_, we added a _"blocks"_ array containing the new block.

Nested blocks can also contain other nested blocks. Here, we'll add a new block to animate the _"h1"_ element in our _".box"_ element, and we'll nest the new block in the _"boxBlock"_.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const titleBlock = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        elementSelector: 'h1',
        cssAnimation: [
          'fade-in 1s steps(1) normal forwards',
        ],
        cssTransform: {
          scale: 'scale-down 0s ease normal forwards',
        },
      }
    ]
  },
  '00:02.500': {
    animations: [
      {
        elementSelector: 'h1',
        cssTransform: {
          scale: 'scale-down 3s linear reverse forwards',
          rotate: 'rotate 2s ease normal forwards 1',
        },
      }
    ]
  },
},{});

const boxBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [titleBlock],
    animations: [
      {
        elementSelector: '.box',
        cssAnimation: [
          'fade-in 1s ease normal forwards',
          'background-red 1s steps(1) normal forwards',
        ],
        cssTransform: {
          translateY: 'move-down 2s ease normal forwards',
        },
      },
    ]
  },
  '00:03.000': {
    animations: [
      {
        elementSelector: '.box',
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards 1',
        },
      }
    ]
  },
  '00:05.000': {
    animations: [
      {
        elementSelector: '.box',
        cssAnimation: [
          'fade-in 1s ease reverse forwards',
        ],
      }
    ]
  },
},{});

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [boxBlock]
  }
},{});

mainBlock.start();
```

### Group Offset

So far, we've looked at animations on single elements, one _".box"_ and one _"h1"_, but those selectors could apply to multiple elements. Let's duplicate the existing _".box"_ element and see how the animation is applied. Change the _".container"_ div in _"index.html"_ to match this:

```HTML
<div class="container">
  <div class="box">
    <h1>CSS</h1>
  </div>
  <div class="box">
    <h1>Animation</h1>
  </div>
  <div class="box">
    <h1>Blocks</h1>
  </div>
</div>
```

Now, if you reload the page, you should see three boxes all animating at the same time. This is fine, but what if you wanted to run the same animation on those elements, but delay the start of each element to create a "stepped" animation?

Each element in an _"animations"_ array can include a _"groupOffset"_ object with a _"delayTime"_ key with value a in milliseconds. If the animation applies to multiple elements, each element will be delayed by the _"groupOffset.delayTime"_ amount. Let's update the first animation in the _"boxBlock"_ and add a _"groupOffset"_:

```JavaScript
'00:00.000': {
  blocks: [titleBlock],
  animations: [
    {
      elementSelector: '.box',
      cssAnimation: [
        'fade-in 1s ease normal forwards',
        'background-red 1s steps(1) normal forwards',
      ],
      cssTransform: {
        translateY: 'move-down 2s ease normal forwards',
      },
      groupOffset: {
        delayTime: 300
      }
    },
  ]
},
```

Reload the page, and each block should have a slight pause before fading in. You can add a different groupOffset for each object in an _"animations"_ array. Trying copy the _"groupOffset"_ from the _".box"_ element and adding it to the first animation in the _"titleBlock"_. That should make the _"h1"_ elements appear one-at-a-time, as each _".box"_ turns red.

What if you want all animations in a block to have the same groupOffset? It's possible to set a default offset for an entire block in the configuration settings.

### Configuration

Animation Blocks have a second optional parameter for setting configurations. The options are _"defaults"_  and _"loop"_.

For example, you can see the config object here:

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [boxBlock]
  }
},{
  defaults: {},
  loop: {}
});
```

#### Defaults
When an entire Animation Block targets a single _"elementSelector"_ and/or _"groupOffset"_, it can be tedious to enter the same _"elementSelector"_ and/or _"groupOffset"_ in each time entry. That's where the _"defaults"_ config settings can help.

Any settings you add to the _"defaults"_ config will apply to all objects in the _"animations"_ array that do not already have those settings applied.

#### Default Element Selector
The _"boxBlock"_ Animation Block we've been working applies animations to _".box"_ elements, and each animation time key includes the same _"elementSelector"_ for _".box"_. We can simplify our code, and save some future typing, by applying a Default Element Selector to this Animation Block.

Here's the same code as before, but using a Default Element Selector:

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const boxBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [titleBlock],
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease normal forwards',
          'background-red 1s steps(1) normal forwards',
        ],
        cssTransform: {
          translateY: 'move-down 2s ease normal forwards',
        },
        groupOffset: {
          delayTime: 300
        }
      },
    ]
  },
  '00:03.000': {
    animations: [
      {
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards 1',
        },
      }
    ]
  },
  '00:05.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease reverse forwards',
        ],
      }
    ]
  },
},{
  defaults: {
    elementSelector: '.box',
  }
});
```

As you can see, all _"elementSelector"_ keys were removed from individual _"animations"_ array objects, and a _"defaults.elementSelector"_ setting was added to the config object. If you reload the page, the animation should continue working as before.

#### Default Group Offset

You can also set a default _"groupOffset"_ that will apply to all animations in the current Animation Block. Here's the _"boxBlock"_ Animation Block with a Default Group Offset config setting added.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const boxBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [titleBlock],
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease normal forwards',
          'background-red 1s steps(1) normal forwards',
        ],
        cssTransform: {
          translateY: 'move-down 2s ease normal forwards',
        },
      },
    ]
  },
  '00:03.000': {
    animations: [
      {
        cssTransform: {
          rotate: 'rotate 2s ease normal forwards 1',
        },
      }
    ]
  },
  '00:05.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s ease reverse forwards',
        ],
      }
    ]
  },
},{
  defaults: {
    elementSelector: '.box',
    groupOffset: {
      delayTime: 300
    }
  }
});
```

#### Loop

Another config setting is _"Loop"_. You can use this to run an Animation Block more than once. The possible settings are _"count"_, _"infinite"_, and _"endTime"_.

The settings _"count"_ and _"infinite"_ are both ways to set the number of times an animation will play."  You only need one of these settings, either _"count"_ or _"infinite"_.

The _"endTime"_ setting is the time the current animation loop ends and the next loop can begin. The _"endTime"_ can be higher than the highest time in the Animation Block, adding a gap/pause at the end of the loop. The _"endTime"_ can also be lower than the highest time in an Animation Block, causing only part of the animation to play.

Here we add the _"loop"_ config to the "mainBlock" Animation Block. The animation will play twice and each loop will run for 7.5 seconds.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [boxBlock]
  }
},{
  loop: {
    count: 2,
    endTime: '00:07.500',
  },
});
```

Here's the same animation with _"loop.infinite"_. This animation will run continuously.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const mainBlock = new AnimationBlock({
  '00:00.000': {
    blocks: [boxBlock]
  }
},{
  loop: {
    infinte: true,
    endTime: '00:07.500',
  },
});
```

Nested blocks can be looped independently from the main block. The only limitation, is that the number of loops in nested blocks can't exceed the time length of the main block. So, if you created an infinite loop in a nested block, it would only run until is hit the _"endTime"_ of the main block. In the example above, that would be 7.5 seconds.

To illustrate, let's set a short, infinite loop on our "titleBock". As you'll see, the animation will only run until it hits the end of the main block.

```JavaScript
const { AnimationBlock } = require('css-animation-blocks');

const titleBlock = new AnimationBlock({
  '00:00.000': {
    animations: [
      {
        cssAnimation: [
          'fade-in 1s steps(1) normal forwards',
        ],
        cssTransform: {
          scale: 'scale-down 0s ease normal forwards',
        },
      }
    ]
  },
  '00:02.500': {
    animations: [
      {
        cssTransform: {
          scale: 'scale-down 3s linear reverse forwards',
          rotate: 'rotate 2s ease normal forwards 1',
        },
      }
    ]
  },
},{
  loop: {
    endTime: '00:02.000',
    infinite: true
  },
  defaults: {
    elementSelector: 'h1',
    groupOffset: {
      delayTime: 300
    }
  }
});
```

repository: scrawlon/CSS-Animation-Blocks

repo_name: scrawlon/CSS-Animation-Blocks


text:
# set image property

```sig
blockObject.setImageProperty(blockObject.create(), blockObject._imageProperty(ImageProp.myImage), null)
```

Sets a property of type Image on the given BlockObject using the given ImageProp.

## Parameters

* **object**: the BlockObject to set the property on
* **property**: the ImageProp to set
* **value**: the value to store for this ImageProp in the BlockObject

```package
blockObject=github:riknoll/blockobject
```

repository: riknoll/blockobject

repo_name: riknoll/blockobject


text:
# Welcome to ethereumj
[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/ethereum/ethereumj?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Build Status](https://travis-ci.org/ethereum/ethereumj.svg?branch=master)](https://travis-ci.org/ethereum/ethereumj)
[![Coverage Status](https://coveralls.io/repos/ethereum/ethereumj/badge.png?branch=master)](https://coveralls.io/r/ethereum/ethereumj?branch=master)

######  :small_blue_diamond: .
######  :small_blue_diamond: . Talk to us:  http://forum.ethergit.com/categories/all
######  :small_blue_diamond: .

# About
ethereumj is a pure-Java implementation of the Ethereum protocol. For high-level information about Ethereum and its goals, visit [ethereum.org](https://ethereum.org).

This repository consists of:
 * [ethereum-core](ethereumj-core): a library suitable for inclusion in any JVM-based project.
 * [ethereum-studio](ethereumj-studio): a simple GUI for exploring Ethereum functionality and usage of the ethereumj API.

To see ethereum-studio in action, watch this [video](https://youtu.be/D5ok7jh7AOg).

# Todo
The Ethereum protocol is under heavy development, thus so is this implementation. See the [todo list](TODO.md), GitHub [Issues](https://github.com/ethereum/ethereumj/issues) and [milestone schedule](https://github.com/ethereum/ethereumj/milestones). Issues are prioritized using [waffle](http://waffle.io/ethereum/ethereumj).

# Contact
Chat with us via [Gitter](https://gitter.im/ethereum/ethereumj) or [#ethereumj](https://webchat.freenode.net/?channels=ethereumj) on Freenode.

# Building from source

 - Clone this repository and run `./gradlew build` (or at least `./gradlew antlr4` to generate sources).
 - Import all sources into IntelliJ IDEA (14+) with `File->Import project` and point to the top-level `build.gradle` file.
 - Make sure to set your language level in `File->Project Structure...` to JDK 8.
 - Run `Build->Make Project`. When complete, there should be no errors.

# Usage
For complete details on downloading, building and using [etherumj-core](ethereumj-core) and [ethereumj-studio](ethereumj-studio), see their respective readme files.

# License
ethereumj is released under the [MIT license](LICENSE).

repository: danielnovy/ethereumj

repo_name: danielnovy/ethereumj


text:
# Karel Interpreter

A interpreter for programs written in the Apartment List dialect of Karel.

## Installation

Add this line to your application's Gemfile:

```ruby
gem 'karel-interpreter'
```

## Usage

The interpreter takes a single file as an argument and prints out the final state
of the Karel grid after executing the program.

### Example

```
# square_dance.krl
move
put
turn_left
move
turn_left
move
put
turn_left
move
```

```
% karel square_dance.krl
location: (0, 0)
direction: right
tokens: [{"location"=>"(-1, 0)", "count"=>1}, {"location"=>"(0, 1)", "count"=>1}]
operations: 9
```

### Options

The interpreter optionally takes a Karel configuration file (`-i FILE`) to initialize
tokens on the Karel grid. The file format looks like

```
tokens: [{"location": "(-1, 0)", "count": 1}, {"location": "(0, 1)", "count": 2}]
```

The above initialization file will place one token at location (-1, 0) and two tokens
at (0, 1)

#### Example

```
# initial_tokens.kin
tokens: [{"location": "(-1, 0)", "count": 1}, {"location": "(0, 1)", "count": 2}]
```

```
# noop_program.krl
# Do nothing
```

```
% karel -i initial_tokens.kin noop_program.krl
location: (0, 0)
direction: up
tokens: [{"location"=>"(-1, 0)", "count"=>1}, {"location"=>"(0, 1)", "count"=>2}]
operations: 0
```

### Output

* Location - location of Karel when the program finishes
* Direction - direction Karel is facing when the program finishes
* Tokens - location and counts of all tokens left on the grid
* Operation - number of built-in commands executed

## Karel Language Specification: Apartment List Dialect

Karel is a creature that lives on an infinite two dimensional grid. Using built-in
commands as the basic building blocks, rudimentary control flow, and user-defined
commands, programs can move Karel around the grid and place and remove tokens from
squares on the grid.

The Karel language is case-sensitive and indentation-sensitive. All built-in commands
and reserved words for control flow and user-defined commands are lower case. Statements
within the body of control flow branches and user-defined commands must be indented
two spaces beyond the containing branch/command definition. Only one statement is
allowed per line. Blank lines are permitted.

Comments begin with a `#` and continue to the end of the line. Comments can be placed
on their own line or after a statement.

### Built-in commands

The following commands are available out of the box.

* `move` - Move Karel one square forward in the direction she is facing
* `turn_left` - Turn Karel left (CCW) 90 degrees
* `token?` - Return `true` if there is one or more tokens on Karel's current location, otherwise false
* `pick` - Pick up one token from Karel's current location. If there are no tokens, this command will crash the program.
* `put` - Put one token down on Karel's current location.

### Control flow

Karel responds to `if`/`else` branching and `while` loops. The condition evaluated for
these two control flow structures can be negated with a `!` (no spaces are allowed between
the negation operator and the condition)

#### Example: a basic `if` statement

```
if token?
  pick
end
```

#### Example: `if`/`else`

```
if token?
  pick
else
  move
end
```

#### Example: negated condition

```
if !token?
  put
end
```

#### Example: nested `if`

```
if token?
  pick
  if token?
    move
  end
end
```

#### Example: a basic `while` statement

```
# This will safely remove all tokens from a square.
while token?
  pick
end
```

### User-defined commands

The Karel language supports user-defined commands. These commands do not take
arguments and do not return a value. Commands are defined with the following syntax

```
def <command-name>
  <statement-1>
  <statement-2>
  ...
end
```

#### Example

```
def turn_around
  turn_left
  turn_left
end
```

## Development

After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).

## Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/karel-interpreter. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

## License

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

## Code of Conduct

Everyone interacting in the Karel::Interpreter project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/karel-interpreter/blob/master/CODE_OF_CONDUCT.md).

repository: apartmentlist/karel-interpreter

repo_name: apartmentlist/karel-interpreter


text:
---
  title:       "CakePHP HABTM Relationships"
  description: A slightly misguided post on CakePHP HABTM relationships
  category:    cakephp
  tags:
    - cakephp
    - counterCache
    - habtm
    - join-tables
    - model
    - relationships
  comments:    true
  sharing:     true
  published:   true
  layout:      post
---

I'm working with a startup at the moment and am attempting to add a simple counterCache to a [http://book.cakephp.org/view/83/hasAndBelongsToMany-HABTM](hasAndBelongsToMany) (HABTM) relationship. Let me briefly define the HABTM relationship before I move on and go insane...

An habtm relationship consists of two different objects. Normally it is something like Tag HABTM Post, or Post HABTM Category. These are relatively simple and CakePHP gives a number of options for one to use. A common mistake is that CakePHP sets the 'unique' key on the HABTM relationship to true, and then people forget to pass the existing relationships in when saving new ones. This can be mitigated through:

1. simply setting the 'unique' key to false.
2. behaviors to insert directly into the table
3. using a HasMany<->BelongsTo relationship between the models and the join Table

You might even want to do something like Post HABTM User, if you wanted to track the users that have modified a specific record. This isn't very efficient, but ["...scaling issues are the best issues to have. You should be so lucky."](http://carsonified.com/blog/carsonified/features/why-50-isnt-good-enough/) I actually make use of Alkemann's [Logable Behavior](http://github.com/alkemann/CakePHP-Assets/blob/master/models/behaviors/logable.php) for this, but you can do what you want.

Solution number 1 is cool, except that you'll definitely have fun when CakePHP inserts multiple of the exact same relationship. Have fun if you don't have a Primary Key on that table :)

Solution number 2 has been [spoken](http://bakery.cakephp.org/articles/view/add-delete-habtm-behavior) [about](http://stackoverflow.com/questions/1588318/cakephp-habtm-relationship-saving-data) [before](http://www.jamesfairhurst.co.uk/posts/view/full%5Fcakephp%5Fapplication%5Fpart%5F5/). Funstuff. Don't really need to explain how it works.

If you made a HasMany<->BelongsTo relationship, then you can just do whatever you want. Treat the table as if it were a regular model. Post HasMany PostsTags BelongsTo Post and Tag HasMany PostsTags BelongsTo Tag. Think about that for a second and treat it kindly. You can just pump things into the join table and everything will be hunky dory.

Now for my problem. The last solution provides built-in support for counterCache. It's incredibly easy to do it (Post and Tag tables can have their own little `posts_tags_count` field). Suppose you don't want to do that one though? Well, then there are two behaviors out there to do what we need.

- [http://bakery.cakephp.org/articles/view/counter-cache-behavior-for-habtm-relations](http://bakery.cakephp.org/articles/view/counter-cache-behavior-for-habtm-relations)
- [http://gist.github.com/235599](http://gist.github.com/235599)

I would use these, except the app I am working on is using HABTM INCORRECTLY! errg. Let me explain.

The application has Businesses, and Users can Favorite them. Of course, Users can also own their own businesses. So Users have many Favorite Businesses and Users own many businesses. These two are best modeled by the HABTM relationship. So what the company did was to create a businesses_users table, and then set a type on that table. The type indicates what kind of relationship it is.

:-\\

This is wrong. Clearly wrong. Why? Because there should be, ideally, a `business_users` table that tracks ownership (you can name it `owners` if you really want to show the relationship in the database), and a `favorites` table to track the favoriting aspect. This would remove the need for a type, and allow the app to use CakePHP's built-ins for adding HABTM relations between records. Then I would be able to use any of the two previous HABTM CounterCache solutions. Instead, they add directly to the table, as if it were a HasMany<->BelongsTo relationship, when it most clearly is not (even in the models). This is very upsetting, as now I have to do an updateAll manually.

Please, when modeling your relationships in a table, think of the whoagies. Don't stuff two relationships into one table because they track the same kinds of records. The relationships are different, so mark them as such.

extension: markdown


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

### Description

The kernel in Microsoft Windows 8, Windows 8.1, Windows Server 2012 Gold and R2, and Windows RT Gold and 8.1 does not properly validate an unspecified address, which allows local users to bypass the KASLR protection mechanism, and consequently discover the cng.sys base address, via a crafted application, aka "Windows Kernel Security Feature Bypass Vulnerability."

### POC

#### Reference
- https://www.exploit-db.com/exploits/37052/

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

repository: trickest/cve

gha_language: HTML

repo_name: trickest/cve


text:
Pagination control Helps you Display information on multiple pages.

# Usage
for more informations see [Pagination Demo](https://github.com/HandyOrg/HandyControl/blob/master/src/Shared/HandyControlDemo_Shared/UserControl/Controls/PaginationDemoCtl.xaml)
***

![](https://github.com/HandyOrg/HandyOrgResource/blob/master/HandyControl/Resources/Pagination.gif)

repository: AdarshRise/HandyControl

gha_language: C#

repo_name: AdarshRise/HandyControl


text:
# GetCharactersCharacterIdMailMailIdOk

## Properties
Name | Type | Description | Notes
------------ | ------------- | ------------- | -------------
**Body** | **string** | Mail's body | [optional] [default to null]
**From** | **int32** | From whom the mail was sent | [optional] [default to null]
**Labels** | **[]int32** | Labels attached to the mail | [optional] [default to null]
**Read** | **bool** | Whether the mail is flagged as read | [optional] [default to null]
**Recipients** | [**[]GetCharactersCharacterIdMailMailIdRecipient**](get_characters_character_id_mail_mail_id_recipient.md) | Recipients of the mail | [optional] [default to null]
**Subject** | **string** | Mail subject | [optional] [default to null]
**Timestamp** | [**time.Time**](time.Time.md) | When the mail was sent | [optional] [default to null]

[[Back to Model list]](../README.md#documentation-for-models) [[Back to API list]](../README.md#documentation-for-api-endpoints) [[Back to README]](../README.md)

repository: antihax/goesi

gha_language: Go

repo_name: antihax/goesi


text:
## Architectures
 1. Lambda
 1. Kappa
 1. Event Based
 1. Big Data
 1. Microservices
 1. Reliable Actors

---
# Lambda
![full](https://microshak.github.io/MicroNotes/Images/IoTRef/lambda.png)
---

# Kappa

![Left](https://microshak.github.io/MicroNotes/Images/IoTRef/Kappa.png)

---
# Microservices

![full](https://microshak.github.io/MicroNotes/Images/IoTRef/Microservice_Architecture.png)

---

# Big Data

![left](https://microshak.github.io/MicroNotes/Images/IoTRef/Kafka.png)

---

# IoT Official Reference Architecture
![full](https://microshak.github.io/MicroNotes/Images/IoTRef/OfficialReferenceArchitecture.png)

---

# Basic
![full](https://microshak.github.io/MicroNotes/Images/IoTRef/Basic.png)

---
# Streaming Dashboards

![full](https://microshak.github.io/MicroNotes/Images/IoTRef/StreamingDashboards.png)

---
# IoT using Cosmos DB

[![Full](https://microshak.github.io/MicroNotes/Images/IoTRef/IoTCosmos.png)](https://azure.microsoft.com/en-us/solutions/architecture/iot-using-cosmos-db/)

---

# Real Time

[![full](https://microshak.github.io/MicroNotes/Images/IoTRef/RealTime.png)](https://azure.microsoft.com/en-us/solutions/architecture/real-time-analytics/)

---
# IoT Issues
* Transactions vs Telemetry
*  Limits in Message Volumes
* Connectivity
  * Always
  * Semi-Connected
  * Disconnected
  * Fall Back (sms)

---

# Security
* Cloud
* Device
  * TPM
  * Certs/Keys
  * Provisioning
  * Ports

---

# OTA Updates
  * Roll back
  * Modularized
  * Container Based

repository: umapathyv/MicroNotes

repo_name: umapathyv/MicroNotes


text:
### Russian Roulette

In this game, you are given by the computer a revolver loaded with one bullet and five empty chambers. You spin the chamber and pull the trigger by inputting a “1,” or, if you want to quit, input a “2.” You win if you play ten times and are still alive.

Tom Adametx wrote this program while a student at Curtis Jr. High School in Sudbury, Massachusetts.

⚠ This game includes EXPLICT references to suicide, and should not be included in most distributions, especially considering the extreme simplicity of the program.

---

As published in Basic Computer Games (1978):
- [Atari Archives](https://www.atariarchives.org/basicgames/showpage.php?page=141)
- [Annarchive](https://annarchive.com/files/Basic_Computer_Games_Microcomputer_Edition.pdf#page=153)

Downloaded from Vintage Basic at
http://www.vintage-basic.net/games.html

#### Porting Notes

(please note any difficulties or challenges in porting here)

license: Unlicense

repository: allyn-bottorff/basic-computer-games

repo_name: allyn-bottorff/basic-computer-games


text:
# Images

Images can be a great supplement to technical documentation text. Sphinx provides control for their alignment in the content, as well as the ability to add captions.

## Basic Usage

```{furo-demo}
![](https://source.unsplash.com/200x200/daily?cute+animals)

This is from Markdown.

+++

.. image:: https://source.unsplash.com/200x200/daily?cute+animals

This is from reStructuredText.
```

## Alignment

````{furo-demo}
```{image} https://source.unsplash.com/200x200/daily?cute+animals
:align: center
```

This is from Markdown.

+++

.. image:: https://source.unsplash.com/200x200/daily?cute+animals
   :align: center

This is from reStructuredText.
````

## Captions

````{furo-demo}

```{figure} https://source.unsplash.com/200x200/daily?cute+animals
This is a captioned image, which needs the "figure" directive.
```

This is from Markdown.

+++

.. figure:: https://source.unsplash.com/200x200/daily?cute+animals

    This is a captioned image, which needs the "figure" directive.

This is from reStructuredText.
````

(light-dark-images)=

## Different images for dark/light mode

Furo supports [light mode and dark mode](../customisation/colors) colours
out-of-the-box. However, certain images do not work well against certain
backgrounds (eg: if the image has a white background).

You can use the `only-light` and `only-dark` classes, to show different images
based on the currently active colour scheme.

````{furo-demo}

```{image} https://source.unsplash.com/200x200/daily?cute+dogs
:align: center
:class: only-light
```

```{image} https://source.unsplash.com/200x200/daily?cute+cats
:align: center
:class: only-dark
```

```{figure} https://source.unsplash.com/200x200/daily?cute+cats
:align: center
:figclass: only-light
```

```{figure} https://source.unsplash.com/200x200/daily?cute+dogs
:align: center
:figclass: only-dark
```

This is from Markdown.

+++

.. image:: https://source.unsplash.com/200x200/daily?cute+dogs
   :align: center
   :class: only-light

.. image:: https://source.unsplash.com/200x200/daily?cute+cats
   :align: center
   :class: only-dark

.. figure:: https://source.unsplash.com/200x200/daily?cute+cats
   :align: center
   :figclass: only-light

.. figure:: https://source.unsplash.com/200x200/daily?cute+dogs
   :align: center
   :figclass: only-dark

This is from reStructuredText.

````

repository: pavithraes/furo

repo_name: pavithraes/furo


text:
Take a square grid, and put a cross on the center point, like this:

```
+ + + + +

+ + + + +

+ + X + +

+ + + + +

+ + + + +
```

The grid is 5-by-5, and the cross indicates point 1. Let's call the top-left corner location (1, 1), so the center point is at location (3, 3). Now, place another cross to the right, and trace the path:

```
+ + + + +

+ + + + +

+ + X-X +

+ + + + +

+ + + + +
```

This second point (point 2) is now at location (4, 3). If you continually move around anticlockwise as much as you can from this point, you will form a square spiral, as this diagram shows the beginning of:

```
+ + + + +

+ X-X-X .
  |   | .
+ X X-X .
  |     |
+ X-X-X-X

+ + + + +
```

Your challenge today is to do two things: convert a point number to its location on the spiral, and vice versa.
Formal Inputs and Outputs

##Input Specification

On the first line, you'll be given a number S. This is the size of the spiral. If S equals 5, then the grid is a 5-by-5 grid, as shown in the demonstration above. S will always be an odd number.
You will then be given one of two inputs on the next line:
You'll be given a single number N - this is the point number of a point on the spiral.
You'll be given two numbers X and Y (on the same line, separated by a space) - this is the location of a point on the spiral.

##Output Description

If you're given the point number of a point, work out its location. If you're given a location, find out its point number.

##Sample Inputs and Outputs

###Example 1

(Where is 8 on this spiral?)
```
5-4-3
|   |
6 1-2
|
7-8-9
```

####Input
```
3
8
```

####Output
`(2, 3)`

###Example 2

####Input
```
7
1 1
```

####Output
`37`

###Example 3

####Input
```
11
50
```

####Output
`(10, 9)`

###Example 4

####Input
```
9
6 8
```

####Output
`47`

If your solution can't solve the next two inputs before the heat death of the universe, don't worry.

###Example 5

Let's test how fast your solution is!

####Input
```
1024716039
557614022
```

####Output
`(512353188, 512346213)`

###Example 6

:D
####Input
```
234653477
11777272 289722
```

####Output
`54790653381545607`

repository: RossMeikleham/DailyProgrammer

repo_name: RossMeikleham/DailyProgrammer


text:
title: Getting Started with FcmSharp and Firebase Cloud Messaging
date: 2018-05-21 11:23
tags: csharp, dotnet, fcmsharp, fcm
category: fcm
slug: fcmsharp_getting_started
author: Philipp Wagner
summary: This article shows how to do bulk inserts to SQL Server using JSqlServerBulkInsert.

[FcmSharp]: https://github.com/bytefish/JSqlServerBulkInsert
[MIT License]: https://opensource.org/licenses/MIT

[FcmSharp] is a library for sending push messages with the Firebase Cloud Messaging services. A lot of
people seem to have problems getting started, so I thought it is good to show a complete end-to-end
example on how to send and receive messages.

In this tutorial I assume you have followed the official documentation to create a Firebase project:

* [https://firebase.google.com/docs/](https://firebase.google.com/docs/)

## Android-side  ##

[quickstart-android]: https://github.com/firebase/quickstart-android
[messaging]: https://github.com/firebase/quickstart-android/tree/master/messaging/

The Firebase repositories on GitHub provide great quickstart examples for almost all use cases. For this tutorial
we are going to use their Firebase Cloud Messaging Quickstart example, which is located at:

* [https://github.com/firebase/quickstart-android/tree/master/messaging/](https://github.com/firebase/quickstart-android/tree/master/messaging/)

I simply cloned the entire [quickstart-android] repository and opened the [messaging] project.

### Adding google-services.json to the Project ###

[Firebase Console]: https://console.firebase.google.com

The only step, that's left to be done on the Android-side is to download the ``google-services.json`` file and add it to the project.

You start by opening the [Firebase Console] and going to the **Project Settings** of your project:

Then select the **General** Tab and click on the **google-services.json** download link:

And put it in the ``app`` folder of your project. My ``messaging`` project is located at ``D:\github\quickstart-android\messaging``,
so the final link will look like this: ``D:\github\quickstart-android\messaging\app\google-services.json``.

### Additional Android Resources ###

If you still have problems adding Firebase to your Android application, then please consult the official Firebase documentation at:

* [https://firebase.google.com/docs/android/setup](https://firebase.google.com/docs/android/setup)

## FcmSharp-side ##

### Downloading the Service Account Key ###

All messages to the Firebase Cloud Messaging API need to be signed. This requires you to first download the Service Account Key for
you project.

Open the **Project Settings** and then go to the **Service Accounts** Tab. On this page click on **Generate New Private Key** for generating
the required credentials.

A warning will be shown, which reminds you to store the key securely. This is imporant, so be sure to never leak the Private Key into the public.

I have stored the Private Key to ``D:\serviceAccountKey.json``.

### Preparing the FcmSharp.Example project ###

I have added an example project for [FcmSharp] to its GitHub repository at:

* [https://github.com/bytefish/FcmSharp/tree/master/FcmSharp/Examples](https://github.com/bytefish/FcmSharp/tree/master/FcmSharp/Examples)

In the example you need to set your Projects ID, when creating the FcmSharp Settings. To find out your Project ID, in the [Firebase Console]
select the **Project Settings** and copy the Project ID in the **General** Tab. Then in the sample replace ``your_project_id`` with your
Firebase Project ID.

```csharp
// Read the Credentials from a File, which is not under Version Control:
var settings = FileBasedFcmClientSettings.CreateFromFile(@"your_project_id", @"D:\serviceAccountKey.json");
```

We are done with the FcmSharp-side!

## Sending the Message ##

### Getting the Device InstanceID Token ###

In the ``MainActivity.java`` of the Android project I set a breakpoint, where the Instance ID Token is obtained. You can also do it
without a breakpoint and search the Logs for the InstanceID message:

Once you click on the **LOG TOKEN** Button in the sample application, the breakpoint will be hit and you can easily
copy the ``token`` from the Variables pane.

### Using FcmSharp to send a message to the Device ###

Now start the ``FcmSharp.Example`` project. A Console will open and prompt you to enter the Device Token. It is the
Device Token we have just obtained from the Android application:

Before hitting Enter, make sure to set a Breakpoint in the ``onMessageReceived`` handler of the ``MyFirebaseMessagingService.java`` class.

### Receiving the Message in the Android Application ###

So after you have set the Breakpoint in the ``MyFirebaseMessagingService.java``, hit enter in the ``FcmSharp.Example`` console  and you should
receive the message in your Android application:

And that's it!

gha_language: Python


text:
A fast, seamless and contactless classroom attendance taking solution.
Created to help with the the current COVID-19 pandemic.

  Overview •
  Getting Started •
  Deployment •
  Libraries •
  License •
  Special Thanks

 ## Overview
A cross platform, contact-less attendance tracking system designed to help tertiary education institutions go paperless.
This solution was created to minimise contact between students by removing the need to pass a piece of paper around
the classroom.

 ## Getting Started

- Create a firebase account and set up your cloud firestore as follows. Create a document under the "pins" collection named "123456". This is the pin lecturers will use in the app to identify themselves as lecturers. Leave the "beacons" collection empty.

- Download your config files from firebase and add them to this Flutter project.
 (demo: https://www.youtube.com/watch?v=DqJ_KjFzL9I)

- Update the lines below from lecturer_send_attendance.dart file with your own information. This is to email the attendance report to the recipient.

### Prerequisites
 - Flutter
 - Dart
 - Firebase account
 - Cloud firestore database

### Usage
 - Install Flutter
 - Connect your phone to your computer
 - Run this project from Android Studio or VS Code with Flutter plugin installed

## Deployment
 - Build the application for android and iOS using Flutter and install it to your device.

## Libraries
 - cupertino_icons: ^0.1.3
 - beacon_broadcast: ^0.2.1
 - flutter_beacon: ^0.3.0
 - cloud_firestore: ^0.13.7
 - path_provider: ^1.6.11
 - flutter_blue: ^0.7.2
 - mailer: ^3.0.4
 - csv: ^4.0.3

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

## Special Thanks

repository: sss-software/i-attendance

repo_name: sss-software/i-attendance


text:
------------
Instructions
------------
* GitHub local repository
/mnt/c/Users/Eugenio Alcalde/Documents/GitHub/eugenio-alcalde.github.io

* Commands in Ubuntu console
  - current directory: pwd
  - list files: ls
  - list files all attributes: ls -la
  - change directory: cd /mnt/c/Users/Eugenio Alcalde/Documents/GitHub/eugenio-alcalde.github.io
  - back a directory: cd ..
  - $ sudo    ->  administrator password

* Instructions
  - copiar template to local folder
  - run: jekyll server
  - crtl + c ->  stop server

This theme is designed by Xiaoying Riley at 3rd Wave Media (http://themes.3rdwavemedia.com/). Visit her website for more themes [http://themes.3rdwavemedia.com/](http://themes.3rdwavemedia.com/)

I have made this into a Jekyll Theme.
**Demo:** [http://webjeda.com/online-cv/](http://webjeda.com/online-cv/)

The default theme would look like this

![online cv Jekyll theme](https://github.com/sharu725/online-cv/raw/master/assets/images/online-cv-jekyll-theme.png)

The theme is responsive

![online cv responsive Jekyll theme](https://github.com/sharu725/online-cv/raw/master/assets/images/online-cv-responsive-jekyll-theme.png)

There are 6 color schemes available

![online cv Jekyll theme](https://github.com/sharu725/online-cv/raw/master/assets/images/online-cv-jekyll-theme-2.png)

## Installation
* Fork the repository
* Go to settings and set Github Pages source as master.
* Your new site should be ready at https://username.github.io/online-cv/

[Watch my video on instlallation](https://www.youtube.com/embed/T2nx6tj-ZH4)

Thanks to [Nelson Estevão](https://github.com/nelsonmestevao) for all the [contributions](https://github.com/sharu725/online-cv/commits?author=nelsonmestevao).

Check out for more themes: [**Jekyll Themes**](http://jekyll-themes.com)


text:
[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)

# Unit 21 MERN Stack: Google Books Search

## Description
This is an app that can be used to search google books using their search API, and save entries for personal browsing at a later date. This app utilizes a full MERN stack to create a quick and simple experience that can be loaded up on any device and retain all its information.

This app is deployed on heroku at [https://jcx-googlebooksearch.herokuapp.com/](https://jcx-googlebooksearch.herokuapp.com/)

## Table of Contents
* [Installation](#installation)
* [Usage](#usage)
* [License](#license)

## Installation
This app can be installed locally by downloading the repo, and requires an existing local MongoDB database server. After downloading the repo, run 'npm install' to install the required packages. Your local mongoDB server needs a database named "test_db" to function properly.

## Usage
Run "node server" to start a local instance of the app.

![Screenshot](./screenshot.png)

## License
ISC License: Copyright (C) 2021 JingChang Xiao

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

 IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

license: ISC

repository: sinsinkun/UTOR-Googlebooks

repo_name: sinsinkun/UTOR-Googlebooks


text:
# SeleniumDemo
**Once the MainProject is running locally on port 9092**, import the Selenium project, right-click Selenium/src/test/java, Run As -> JUnit Test.
This will then test the webpage by performing tasks on it.

At the moment, the tests are:
*Add List
*Add Item to the List
*Check if both are successful

repository: harryfrescoQA/ToDoListProject

repo_name: harryfrescoQA/ToDoListProject


text:
# Figsvelte

A boilerplate for creating Figma plugins using Svelte.

This starter project has everything you need to start developing a Figma plugin usign Svelte. Your JS, CSS, SVG and image assets can be bundled on build. The package will take care of compiling your typescript + app on save during development, and also minify on build.

Additionally, this package comes preconfigured with [Figma Plugin DS Svelte](https://github.com/thomas-lowry/figma-plugin-ds-svelte) where you have access to a large range of components and icons that match the Figma UI, to get you up and running quickly. Note: installing this boilerplate will install the component library as a dependency.

Only what you import/use will be included in the final build for small bundle size.

## To get started

```bash
npx degit thomas-lowry/figsvelte figma-plugin
cd figma-plugin
npm install
```

_Note that you will need to have [Node.js](https://nodejs.org/) installed._

## Connecting your plugin to Figma

Connecting your plugin to Figma
After installing, go to **Plugins / Development / New Plugin** in the Figma desktop app for Mac OS or Windows and choose the option **"Link existing plugin"**.

_You also can just type "New Plugin" in Figma global search to go there_

From there you need to link a **manifest.json** file located at **public** folder in your directory:

```bash
/figma-plugin/public/manifest.json
```

Now edit this file to give a new name for your plugin, and you will be able call it from Figma: **Plugins / Development / Your Plugin Name**

## Development

During development, watch your project for changes with the following command.

```bash
npm run dev
```

Start building your plugin UI in `'src/Plugin.svelte'`.

## Build

When ready to package up your final Figma Plugin:

```bash
npm run build
```

## Useful info

To include an external CSS file:

```javascript
import styles from "./styles.css";
```

To include an SVG:

```javascript
import SvgName from './image.svg';

//use in your markup
{@html SvgName}
```

_For more info on using the Icon component system with SVGs from [Figma Plugin DS Svelte](https://github.com/thomas-lowry/figma-plugin-ds-svelte), refer to the repo._

_For info about Figma API visit [Figma API Overview](https://www.figma.com/plugin-docs/api/api-overview/)_

repository: thomas-lowry/figsvelte

repo_name: thomas-lowry/figsvelte


text:
---
title: thread-web-mobile
tags: [job, mobile, thread, web]
created: 2021-09-29T06:38:20.588Z
modified: 2021-09-29T06:38:35.002Z
---

# thread-web-mobile

# discuss

##

##

## [Mattermost Mobile Search Optimization Challenge](https://www.youtube.com/watch?v=_qYFonJoyZI)

- This PR speeds up the response time when a user switches between the Messages and Files tabs in the search results screen.
  - https://github.com/mattermost/mattermost-mobile/pull/6579
  - 👉🏻 This was accomplished by mounting the Files and Messages in a view that is twice the device width and transitioning the View left and Right when clicking the Messages or Files tabs. This greatly increases the speed because the posts and files are only rendered once.
  - Another change was to let the two results views scroll independently so the user can scroll in one view, view the other, and upon returning to the original view, their scroll position will have been persisted.

## [design crew, which would you pick for a mobile layout?](https://twitter.com/steveruizok/status/1564893253274673152)

- Wow, Miro’s mobile team has some great solutions here.
- Maybe go back to what we're doing currently, which is to put all styles into a menu that's either open or closed? Basically the same layout as in desktop, but hidden behind a button.

- I think in a case of mobile, less is more.  Kinda like you show with Miro below, hide what's not needed.
  - Also, buttons have to be notably larger to avoid fat-fingering, so delicate, loaded toolbars probably need to avoided entirely in favor of a few larger ones (when applicable)

- Not a designer, but most mobile apps for editing photos and the like (that I’ve used on iOS) have the tool selection at the bottom like C.

## [hacker news: I Replaced My Native iOS App with a Cross-Platform Web App and No One Noticed](https://news.ycombinator.com/item?id=31243501)

- This post makes very big claims based on a very basic application that doesn't seem to be much more than a few toggle buttons and a couple of animations thrown in, and some 'statistics' that don't appear to be based on any actual facts.
  - I work in a team developing an app that has around 5million users, and we abandoned an Ionic first version 5 years ago, after a couple of years of nightmarish development, where (after the first implementation, which went reasonably well)
  - **we spent most of our development time fixing** inexplicable bugs, chasing native features, getting inconsistent UI problems, broken builds from package updates and a myriad other problems that just drained our energy and were generally dispiriting.
  - I personally felt the entire experience was a horrible professional dead-end. Luckily our management decided to switch to a native application, and learning Swift has been the most fulfilling part of my entire career. The application is faster, more reliable, the bugs are locatable and fixable; the entire framework feels solid and professional.

- I like react-native and nativescript's approach a lot more.. They use native UI elements.

- I can second this. My Ionic app runs incredible stable, no issues, users are happy. It is not super complex and doesn't make use of native APIs beyond in app purchases, but it isn't super trivial either.
- The performance is good on modern devices to the point where you don't notice a difference.
- The main downside are these things:
  1. No fine-grained control over input types / the keyboard that is displayed.  The options got better in recent years, but a native app has better control over the type of keyboard it shows (maybe you can achieve similar effects with a plugin).
  2. The UI obviously does not respect accessibility settings. For example, if you enable the O/I markers on toggle buttons on the OS level, your app won't show them. But I think React Native wouldn't show them either, so there's that.
  3. Can be a pro and a con: Your app shows the same UI for every OS version. Let's say a user is still on iOS 11 and Ionic tries to adhere to the design language of iOS 15, an app update will also affect iOS 11 users. Whereas with native apps, you can basically say "take this headline element and show it in the way the OS renders this by default". Imho, this doesn't matter for normal users that much, but if you obsess over design, it can be a downside or at least somewhat unexpected.
- And you get a lot of upsides:
  1. Truly one code base with close to zero custom code for each platform. Hence, a solo developer can easily develop an app for iOS, Android, and the web.
  2. Assuming you use Ionic's Capacitor as a runtime environment on devices: It is basically a thin wrapper for Chrome. Since Chrome is evergreen even on older devices, I usually never run into browser issues if users are on Android 6 for example. They simply have the most recent Chrome version and your app benefits from that.Compare this with iOS: Users with an older iOS version run an old version of Safari and hence, you need to make sure that your JS code doesn't break on older Safari versions. Although the compatibility with modern JS got a lot better since iOS 11.
  3. You can easily force the same design on all platforms if you want. I wouldn't recommend it, but for some enterprise-internal tooling, it might make sense.
- To sum it up, especially indie developers who want to build an app very fast and don't have a team should give Ionic a try.

- React native and flutter are very, very different from a PWA.
  - While a PWA is a web app, react-native renders actual native components, and flutter has its own rendering engine. I wouldn't call them "web-based" tech

- Having a cross platform app (Flutter) with tens of thousands of users for a few years now I can tell you that not a single person has cared to far.
  - I get 20-50 mails daily through a very easy to use feedback and support function, but in none of those thousands of mails has anyone ever cared about how transitions are made or that a button doesn't look like a native iOS button.
  - They care about the value the app provides. About new functions or (in my case) report bad data to fix. That's why they download an app. Not because they want the button to look natural.
  - That's to say. I frequently get feedback about how they love the UX/UI of my app.
  - If there isn't a valid reason to create a native app these days I consider it a waste of time.

## [I Replaced My Native iOS App with a Cross-Platform Web App and No One Noticed](https://javascript.plainenglish.io/i-replaced-my-native-ios-app-with-a-cross-platform-web-app-and-no-one-noticed-1653901ce244)

- So it all started when I came up with the idea for an app that helps parents get their kids ready for school.
  - why not build a todo list for kids? I could make the UX look like a game and even embed gamification design elements to help keep kids focussed and engaged.
- But during my development, I made a huge mistake. I wasted a lot of time building a native iOS app.
- So I decided pretty early on that School Morning Routine couldn’t be a cross-platform web app. My app would involve heavy use of game-style animations and since it’s for kids, it would need to have excellent touch interactions.
  - So… I decided to make native apps.
- I decided to build the web app next.
  - I used React with CSS animations, framer motion, and a dash of delightful Lottie animations thrown in.
- I went to my desk, deleted my native iOS app, and decided to use **Ionic Capacitor**.
- The cost/benefit tradeoff for cross-platform web apps has always been about trading worse performance in exchange for less development time.
  - In 2014 for most apps, that was a bad tradeoff. But in the past 8 years, a lot has changed. Browser performance has steadily increased

- Cross Platform Web Apps don’t work offline though
- I’ve built over ten iOS and Android apps in the past few years.
  - Native apps aren’t dead, and they won’t ever be dead.
  - Cross-platform mobile apps will improve and evolve;
  - **however, there is a reason why native apps won’t ever be dead**.
  - Try to build a streaming service or anything that needs to access low-level APIs, test it, and let’s talk.
  - 60FPS is impossible to get via web apps except for RN and Flutter.
  - Battery or healthy CPU is almost impossible to reach via web cross-platform.
  - Native UX, animations, and user feel are priceless.

## [JavaScript检测手机浏览器的五种方法](https://www.ruanyifeng.com/blog/2021/09/detecting-mobile-browser.html)

- navigator.userAgent
  - if (/Mobi|Android|iPhone/i.test(navigator.userAgent))
  - 最简单的方法就是分析浏览器的 user agent 字符串，它包含了设备信息。
  - 只要里面包含mobi、android、iphone等关键字，就可以认定是移动设备。
  - 优点是简单方便，缺点是不可靠，因为用户可以修改这个字符串，让手机浏览器伪装成桌面浏览器。
- window.screen，window.innerWidth
  - if (window.screen.width < 500)
  - if (window.innerWidth < 768)
  - window.screen对象返回用户设备的屏幕信息，该对象的width属性是屏幕宽度（单位为像素）。
  - window.innerWidth返回浏览器窗口里面的网页可见部分的宽度，比较适合指定网页在不同宽度下的样式。
- window.orientation
  - if (typeof window.orientation !== 'undefined')
  - 第三种方法是侦测屏幕方向，手机屏幕可以随时改变方向（横屏或竖屏），桌面设备做不到。
- ontouchstart
  - 'ontouchstart' in document.documentElement
  - 手机浏览器的 DOM 元素可以通过ontouchstart属性，为touch事件指定监听函数。桌面设备没有这个属性。
- window.matchMedia()
  - window.matchMedia("only screen and (max-width: 760px)").matches
  - 最后一种方法是结合 CSS 来判断。
  - 如果某个针对手机的 media query 语句生效了，就可以认为当前设备是移动设备。
  - window.matchMedia()方法接受一个 CSS 的 media query 语句作为参数，判断这个语句是否生效。
- 工具包
  - https://github.com/duskload/react-device-detect