teleren/devto huggingface dataset:
Casino game SmartContract deployed on XinFin XDC Network
Tags: blockchain, xinfin, xdc
Published: 2020-11-16 16:44:47

Deployed a Casino smartcontract on XinFin XDC Network, and it is very easy and cheap to deploy on XinFin Network. The stable network where the new generation Developers should deploy their #DAPPS and #SmartContracts.

Check the Solidity Contract for Casino:




`pragma solidity ^0.4.18;
contract CasinoRoulette {
    enum BetType { Color, Number }
    struct Bet {
        address user;
        uint amount;
        BetType betType;
        uint block;
        // @prop choice: interpretation is based on BetType
            // BetType.Color: 0=black, 1=red
            // BetType.Number: -1=00, 0-36 for individual numbers
        int choice;
    }
    uint public constant NUM_POCKETS = 38;
    // RED_NUMBERS and BLACK_NUMBERS are constant, but
    // Solidity doesn't support array constants yet so 
    // we use storage arrays instead
    uint8[18] public RED_NUMBERS = [
        1, 3, 5, 7, 9, 12,
        14, 16, 18, 19, 21, 23,
        25, 27, 30, 32, 34, 36
    ];
    uint8[18] public BLACK_NUMBERS = [
        2, 4, 6, 8, 10, 11,
        13, 15, 17, 20, 22, 24,
        26, 28, 29, 31, 33, 35
    ];
    // maps wheel numbers to colors
    mapping(int => int) public COLORS;
    address public owner;
    uint public counter = 0;
    mapping(uint => Bet) public bets;
    event BetPlaced(address user, uint amount, BetType betType, uint block, int choice);
    event Spin(uint id, int landed);
    function CasinoRoulette () public {
        owner = msg.sender;
        for (uint i=0; i < 18; i++) {
            COLORS[RED_NUMBERS[i]] = 1;
        }
    }
    function wager (BetType betType, int choice) payable public {
        require(msg.value > 0);
        if (betType == BetType.Color)
            require(choice == 0 || choice == 1);
        else
            require(choice >= -1 && choice <= 36);
        counter++;
        bets[counter] = Bet(msg.sender, msg.value, betType, block.number + 3, choice);
        BetPlaced(msg.sender, msg.value, betType, block.number + 3, choice);
    }
    function spin (uint id) public {
        Bet storage bet = bets[id];
        require(msg.sender == bet.user);
        require(block.number >= bet.block);
        require(block.number <= bet.block + 255);
        bytes32 random = keccak256(block.blockhash(bet.block), id);
        int landed = int(uint(random) % NUM_POCKETS) - 1;        
        if (bet.betType == BetType.Color) {
            if (landed > 0 && COLORS[landed] == bet.choice)
                msg.sender.transfer(bet.amount * 2);
        }
        else if (bet.betType == BetType.Number) {
            if (landed == bet.choice)
                msg.sender.transfer(bet.amount * 35);
        }
        delete bets[id];
        Spin(id, landed);
    }
    function fund () public payable {}
    function kill () public {
        require(msg.sender == owner);
        selfdestruct(owner);
    }
}`
S1E6 Learn JMeter Series - HTTP Request Defaults
Tags: performance, testing, tutorial, webperf
Published: 2020-11-16 16:41:21

Welcome to Learn JMeter Series!

In this season one, episode five, you will learn the following:

* HTTP Request Defaults

{% youtube BvbspEX4IXA %}

✔ [Buy me a tea 🍵](https://www.buymeacoffee.com/qainsights)
✔ [My Blog](https://qainsights.com)
✔ [My Udemy Course](https://www.udemy.com/course/performance-testing-using-truweb)
Use symfony/messenger without supervisor
Tags: php, laravel, opensource, symfony
Published: 2020-11-16 16:40:34

Symfony messenger use Supervisor to keep workers running but **not all web hosting have a supervisor.**

By default, the command will run forever and handle 10 messages before exiting with memory limit(128M) :
```
bin/console messenger:consume async --limit=10 --memory-limit=128M
```

To work around this problem, we will use cronjobs but **we don't let workers run forever.**
For that we will listen on the event WorkerRunningEvent :

```php
<?php


namespace App\Event;

use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Symfony\Component\Messenger\Event\WorkerRunningEvent;

/**
 * Class ExtractFailedEvent
 * @package App\Event
 */
class CronRunningEvent implements EventSubscriberInterface
{
    public function onWorkerRunning(WorkerRunningEvent $event): void
    {
        if ($event->isWorkerIdle()) {
            $event->getWorker()->stop();
        }
    }

    /**
     * @return array<string>
     */
    public static function getSubscribedEvents()
    {
        return [
            WorkerRunningEvent::class => 'onWorkerRunning',
        ];
    }
}

```
Method isWorkerIdle() return true when no message has been received by the worker.
If no message has been received , we stop the worker

To finish, set up a cron job to run evry minute
```
* * * * * bin/console messenger:consume async --memory-limit=128M
```
Simple and easy!
Using Circle CI and AWS S3 to Store Images in Hugo
Tags: devops, aws
Published: 2020-11-16 16:40:00

Considering now that the blog has cover images to adhere with the design of the [theme](https://dev.to/fuzzy_windfall/new-theme-chunky-poster-2m82-temp-slug-3208011) (also with the old [theme](https://github.com/zhaohuabing/hugo-theme-cleanwhite)), the number of images are getting larger including the repository itself. I've since removed the images from the repository and stored them on AWS S3.

The idea behind is to sync the images from the local filesystem to a bucket in S3, copy the files from the bucket over to a Circle CI workspace which contains the build files of Hugo, and finally deploy the build files to Netlify.

## Sync'ing the Images

I've created first a bucket on S3 to store the images for the blog. In order to sync the images from the local filesystem, I have installed and configured [AWS CLI](https://aws.amazon.com/cli/):

```
$ brew install awscli
$ aws configure
```

Configuration is pretty much straightforward. I think all I needed to do was set the API keys and the region to where to store the images from. Permission was a bit confusing as I haven't used AWS much although I've set it to private since its purpose is only to store the images — Netlify will be the one actually hosting the images.

After configuring, I've used `aws sync` to sync the files from local filesystem to the bucket:

```
$ aws s3 sync . s3://path-to-bucket/
```

## Copy Files Using Circle CI on Deployment

I've used the orb [`aws-s3`](https://circleci.com/orbs/registry/orb/circleci/aws-s3) for Circle CI and added a job `images` to do the execution. The files are then persisted to a workspace. The `build` job is the one responsible for building Hugo and so I've attached the workspace over to this job and finally copied the files over to “content/images”. The `images` job is also a dependency for the `build` job.

```yaml
orbs:
# The rest of the orbs.
hugo: circleci/hugo@0
aws-s3: circleci/aws-s3@1
version: 2.1
jobs:
images:
docker:
- image: circleci/python:2.7
steps:
- aws-s3/copy:
from: 's3://path-to-bucket'
to: images
arguments: --recursive
- persist_to_workspace:
root: .
paths:
- images
build:
docker:
- image: cibuilds/hugo:latest
steps:
- attach_workspace:
at: ~/images
- checkout
- run: cp -r ~/images/images/* content/images
# The rest of the steps.
workflows:
main:
jobs:
- images
- build:
requires:
- images
# The rest of the jobs.

```

The required environment variables to configure the `aws-s3` orb are the following:

- `AWS_ACCESS_KEY_ID`
- `AWS_SECRET_ACCESS_KEY`
- `AWS_REGION`

These can be configured through Circle CI under Project Settings » Build Settings » Environment Variables.

[![](https://blog.strict-panda.com/images/project-settings.png)](https://blog.strict-panda.com/images/project-settings.png)<figcaption>
Project Settings
</figcaption>

So far, that is it. I just removed the images from the repository and added a `.gitignore` file to ignore the images under “content/images”.

I still need to include the static images though but will probably do it sometime in the future.
Permanently assign `this` to a function
Tags: javascript, codenewbie, beginners, webdev
Published: 2020-11-16 16:24:28

```js
const obj = { name: "Codedrops" };

function greetings() {
  console.log(`Hi, ${this.name}`);
}

const bindGreetingToObj = greetings.bind(obj);
bindGreetingToObj(); // Hi, Codedrops

const obj2 = { name: "ABC" };
bindGreetingToObj.call(obj2); // Hi, Codedrops
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Resize images based on page position
Tags: javascript, beginners, html, css
Published: 2020-11-16 16:14:30

**Demo:** https://jsfiddle.net/pfhwqdgs/

Resizing or positioning items based on page scroll is a pretty common trend at the moment, so this article will serve as a reference for what's required.

The primary goal here is coming up with a normalized number; something between 0 and 1.

> In applied mathematics, a number is normalized when it is written in scientific notation with one non-zero decimal digit before the decimal point.

In practice, there are four parameters we need to start with:

 - What's the minimum height of our image?
 - What's the maximum height of our image?
 - When should we be showing the minimum height?
 - When should we be showing the maximum height?

In our demo, we define those as:

```
// Minimum / Maximum height of our image
const MIN_HEIGHT = 100;
const MAX_HEIGHT = 300;

// Where we should start / end normalizing
const MIN_TARGET = 200;
const MAX_TARGET = 500;
```

This formula applies here, and to tweening, so it's good to remember:

```
min + (max - min) * ratio
```

In order to handle our image size transition, we'll apply that formula to our numbers:

```
image.height = MIN_HEIGHT + (MAX_HEIGHT - MIN_HEIGHT) * ratio
```

Where do we get `ratio` from? That will be our normalized number derived from our scrolling/page position. 

```
ratio = (window.scrollY - MIN_TARGET) / (MAX_TARGET - MIN_TARGET);
```

The ratio formula here is pretty similar to the above, but we reduce our dynamic value by our MIN_TARGET which will help reduce the lower end of our ratio to 0. (for normalization)

Now we have to cap the ratio so it doesn't dip below 0 or above 1. 

```
ratio = Math.min(1, Math.max(0, ratio))
```

The full code looks like this:


```
const MAX_HEIGHT = 300;
const MIN_HEIGHT = 100;

const MAX_TARGET = 500;
const MIN_TARGET = 200;

var image = document.querySelector('img');
var ratio = 0;


// -------------------------------------------------------

window.addEventListener('scroll', function() {
  // Determine ratio of scroll to target
  ratio = (window.scrollY - MIN_TARGET) / (MAX_TARGET - MIN_TARGET);
  
  // Normalize ratio
  ratio = Math.min(1, Math.max(0, ratio));
  
  // Set height based on ratio
  image.height = MIN_HEIGHT + (MAX_HEIGHT - MIN_HEIGHT) * ratio;
});

window.dispatchEvent(new Event('scroll'));
```
Build an E-commerce Website with Webiny Serverless Headless CMS, Next.js, and Stripe
Tags: javascript, graphql, beginners, serverless
Published: 2020-11-16 15:53:50

In this tutorial, we will create a simple e-commerce website, where you can buy Swag from the best Open Source projects such as Webiny, Next.js, React, etc.

Before we continue, let's go through what you'll learn about building this website.

You will learn how to create the back-end using Webiny Headless CMS and set up two content models, the products, and the categories. Afterward, we'll fetch the data from the Headless CMS to the Next.js project using Apollo GraphQL. Last but not least, we'll integrate Stripe to implement a checkout experience.

First, let's take a look at the diagram of what we'll build ⬇️

![diagram](https://dev-to-uploads.s3.amazonaws.com/i/g3rc9tphwep6scswwrzt.png)

In this tutorial, you'll go through the sections below:

### 1. The e-commerce-starter

### 2. Webiny Headless CMS

### 3. Next.js + Apollo GraphQL to fetch data from the backend

### 4. Next.js + Stripe to create the payment intents

### Follow the tutorial [here](https://www.webiny.com/blog/tutorial-e-commerce-nextjs-stripe?utm_source=Dev-to&utm_medium=webiny-blog&utm_campaign=webiny-cross-promotion-nov-16&utm_content=webiny-e-commerce-tutorial&utm_term=W00378) 🚀

---

Thanks for reading! My name is Albiona and I work as a developer relations engineer at Webiny. I enjoy learning new tech and building communities around them = ) If you have any questions, comments, or just wanna say hi, feel free to reach out to me via [Twitter](https://twitter.com/albionaitoh).
Material Color Picker
Tags: vue, color, colorpicker, frontend
Published: 2020-11-16 15:52:40

---
title: Material Color Picker
published: true
description: Click to copy HEX to clipboard, support all major browsers.
tags: vue,color,colorpicker,frontend
cover_image: https://colorspicker.netlify.app/img/logo.a58138fc.svg
---

I made a color picker a while ago based on old Google Material Colors guideline. 
Made with Vue2, click to copy the HEX code.

You can try it out here: https://colorspicker.netlify.app/
Git repo is here: https://gitlab.com/madsouris/materialcolors
Build A Flutter 💙 Tinder Clone with Firebase & BLoC #16/41 Profile Bloc
Tags: flutter, tutorial, dart, career
Published: 2020-11-16 15:48:54

---
title: Build A Flutter 💙 Tinder Clone with Firebase & BLoC #16/41 Profile Bloc
published: true
description: Tutorial on building a Tinder clone with Flutter, Firebase and Bloc
tags: #Flutter #Tutorial #dart #career
//cover_image: https://direct_url_to_image.jpg
---

In this series of videos we are going to build a Tinder clone using Flutter, Firebase as a backend and Bloc as our state management solution.

Here we set up the Profile Bloc.

Protip: Watch video at 1.25 speed.


{% youtube 8J9qYJN2IvU %}
Writing complex bash commands using redirecting, chaining & nesting
Tags: linux, bash, beginners, tutorial
Published: 2020-11-16 15:39:00

[In previous submission](https://dev.to/medsaad/8-bash-commands-with-options-for-beginner-developers-3g7i), we discussed 8 fundamental bash commands and their options as an overview of this scripting language.

Today, we will deep dive into a bit advanced concepts, including:
* Chaining: execute multiple commands sequentially.
* Pipelines: send the output of a command as an input of the next one.
* Redirecting: channeling data out of or into a command.
* Nesting: calling a command inside another command while sending the output of the inner command as an argument of the outer command.

Check in 7 minutes, the step by step video with examples below:

{% youtube UXM8KNTC3aY %}
 
In future videos, we will discuss bash scripting in a shell file fundamentals and best practices.
Sell My Project Binary
Tags: discuss, ask
Published: 2020-11-16 15:34:32

---
title: Sell My Project Binary
published: true
description: 
tags: #discuss #ask
//cover_image: https://direct_url_to_image.jpg
---

Hi guys, I wanna ask you something, if there's someone asking me to create a custom program, is it fair that I only give them the binary?
Quirrel Newsletter #2 - v0.10 🎉
Tags: vercel, nextjs, javascript, react
Published: 2020-11-16 15:31:38

---
title: Quirrel Newsletter #2 - v0.10 🎉
published: true
description: Human-friendly CLI output, exclusive jobs, override semantics, a chat with Wes Bos and much more ...
tags:
  - vercel
  - nextjs
  - javascript
  - react
cover_image: https://mcusercontent.com/b9d062c0bb4e2206a305b8df7/images/140bec43-2ef3-4d15-b003-35305c27f47f.jpeg
---

Hi there!

Two weeks ago, I published you the first issue of this Newsletter.
Today, let me tell you about the new features in [v0.9](https://github.com/quirrel-dev/quirrel/releases/tag/v0.9.0) and [v0.10](https://github.com/quirrel-dev/quirrel/releases/tag/v0.10.0), which was released a couple of minutes ago.

But before we do that: Let me invite you to our new Quirrel community over on Spectrum!
It's still a little quiet over there, so come by and chat with us:

<https://spectrum.chat/quirrel>

## Alright, on to the new features.

Quirrel now has human-friendly CLI output, which makes it even more fun to use:

![Emm49m7W4AAD19E](https://dev-to-uploads.s3.amazonaws.com/i/pdk2svtainmm3wjfltcz.jpeg)

Also, the Quirrel UI now shows all running CRON jobs.

On the API side, there are two new options for jobs:

Marking a job as `exclusive` guarantees it to be executed on its own, with no other jobs from the same queue running at the same time.
This can be useful any time you want to prevent race conditions from happening, e.g. when implementing an order queue.

When creating a job, you can now mark it with `override: true`. Now when a job with the same ID already exists, the it is overriden by your job. This is a way to easily specify behaviour for use cases where idempotency is key.


## Other stuff that happened

* an awesome call with Rishi from London, who requested the "exclusive jobs" feature (thanks, Rishi! great call :D)
* a very interesting [conversation with Wes Bos](https://twitter.com/wesbos/status/1326939452107796482) about pricing models ...
* ... which has led me to start working on the new pay-per-use pricing model

Chatting with Quirrel users has proven itself as an incredibly effective way to get good feedback.
If you can make time for it, I'd love to talk to you as well! Just drop me a DM [on Twitter](https://twitter.com/skn0tt) :D

That's been it for the second edition of the Quirrel Newsletter. Have a great week!

Best
Simon
Candy: Styling modern apps with Atomic CSS-in-JS focus on constraint-based design principles
Tags: showdev, opensource, javascript, framework
Published: 2020-11-16 15:21:36

I'm a big fan of TailwindCSS. But, during working with TailwindCSS, I got some problems with PurgeCSS and class precedence rules.

So, I created a CSS-in-JS framework that:

- 👀Supports all existing Tailwind shorthand syntax.
- 🛠️Fully configurable theme & variants.
- 🔥Generates only the styles required.
- ✋No conflict precedence rules.
- ✨Works with any framework.
- 📱Supports React Native.

If you aren't familiar with the Tailwind's syntax. Give a try to object syntax. It's also based on your configuration and provides helpful shorthand ways to style components.

Check it out here: https://github.com/codolab/candy
How to append an icon to show/hide password with vuetify
Tags: vue
Published: 2020-11-16 15:07:13

`template`

```vue
<v-text-field
  id="password"
  name="password"
  label="password" 
  :type="show ?'text': 
  'password'"
  :append-icon="show ?'mdi-eye':'mdi-eye-off'"   
  @click:append="show=!show">
</v-text-field>
```


`script`


```vue
<script>
export default {
  data() {
    return {
       show:false
          }
       }
     }
</script>
```

For further reading , [check out the vuetify documentation](https://vuetifyjs.com/en/components/text-fields/)
Subscribe Now Section In Skeleton CSS
Tags: css, html, webdev, uiweekly
Published: 2020-11-16 15:00:36

Previously we made a login form in Skeleton CSS and now we made a basic Subscribe Now Section In Skeleton CSS with the help of CSS and Skeleton CSS elements.

In this element, we used Skeleton CSS and also we modify this framework classes like buttons and much more. To make responsive we used media quires. This element is fully responsive and mobile-friendly.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/Subscribe-Now-Section-In-Skeleton-CSS/)
How to check if you are in an iFrame
Published: 2020-11-16 14:51:33

What if you want to check if your page is hosted in an i-frame and may be prevent certain features?

On the network side, you can pass a response header from your server that looks like this:

```
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
```

The `X-Frame-Options: DENY` header prevents your page to be accessed in an i-frame altogether.

Whereas, the `X-Frame-Options: SAMEORIGIN` header allows the page to load if the parent (wrapping window) of the i-frame is of the same origin, which is somewhat OK.

But if you do not have a header provided by your server and you still want to check if you are inside an i-frame, you may do the following conditional check.

```
if(window.location === window.parent.location) {
  // you are not inside an i-frame
} else {
  // you are definitely inside an i-frame
}

```

Alright, I hope this helps.

## References
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
https://tommcfarlin.com/check-if-a-page-is-in-an-iframe/
My one and only terminal tip
Tags: terminal, commandline, beginners
Published: 2020-11-16 14:48:31

---
title: My one and only terminal tip
published: true
description:
series: Customising things
tags: terminal, commandline, beginners
//cover_image: https://direct_url_to_image.jpg
---

## Is this is another one of those show-off-your-setup posts?

Well, kinda. I'll give you a breakdown of it, but really I wanted to give you One Simple Tip: _give your terminal a subtle background pattern_.

![Screenshot of a dark terminal with a subtle background pattern](https://dev-to-uploads.s3.amazonaws.com/i/gdm6wchrjja9e477om48.png)

Can't see it too well? It _is_ pretty subtle after all. You can click to see it a bit bigger, or look at this snip:

![Close-up of a dark terminal with a subtle background pattern](https://dev-to-uploads.s3.amazonaws.com/i/uabaamzqvuekvl6msbym.png)

## Why?

I set a background pattern a few years ago and never looked back. It's faint enough that it doesn't get in the way, and just strong enough that the words I type look like they're _on_ something rather than floating in space.

Honestly, I hate going back to a plain black "nothing" now.

## Where can I get such a thing?

Well, you could make it yourself. Or you could nab one from somewhere like [subtle patterns](https://www.toptal.com/designers/subtlepatterns/) which is probably what I did.

## What else can you see?

### Terminal

Windows Terminal, for no particular reason except that I took this screenshot on a Windows machine.

### Host name MOTD

This is using `figlet`/`toilet` with the "future" font to tell me what machine I've logged into.

### Shell prompt

[Starship](https://starship.rs/) without the right font for the git plugin because Windows keeps losing it.

### Theme
Entirely custom, at-whim colours