teleren/devto huggingface dataset:
Install Puppeteer on MacBook Pro with Apple Silicon / M1
Tags: puppeteer, m1, applesilicon
Published: 2021-06-13 12:47:06

For those who wouldn't like to work outside the CLI.

Install Chromium via brew:

```zsh
$ brew install chromium
$ `which chromium`
```

Set an environemntal variable to prevent `[npm/yarn/pnpm] install` downloading Chromium automatically (I'd put `.env` into the repo so coworkers with Apple Silicon can `$ source .env` .)

```zsh:.env
export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
export PUPPETEER_EXECUTABLE_PATH=`which chromium`
```

Although [in some situations you need to patch Puppeteer](https://github.com/puppeteer/puppeteer/issues/6622#issuecomment-788199984) since it has a hard-coded executable path to `/usr/bin/chromium-browser`, you can try an option of `puppeteer.launch` to overwrite it.

```js
const browser = await puppeteer.launch({
    executablePath: process.env[‘PUPPETEER_EXECUTABLE_PATH’],
})
```

# References

- [Installation fails on Apple Silicon / M1](https://github.com/puppeteer/puppeteer/issues/6622)
- [M1 MacBookでpuppeteerが動かない時の解決策](https://qiita.com/3tomcha/items/f141faa1cb24124e9d66)
- [M1 Macでpuppeteerを動かす方法（2020年12月21日時点）](https://qiita.com/Buzzword111/items/aa5dd4c89358a63f970a)
Write better JavaScript codes
Tags: javascript, productivity
Published: 2021-06-13 12:41:52

## 💩 codes
### The Callback hell

```javascript
function hell() {
    step1((result1) => {
        step2((result2) => {
           ....
        })
    })
}
```
### The Promise hell
```javascript
hell()
.then(result => {
    handle(result)
    .then(anotherResult => {
        ...
    })
    .catch(error => {
        ...
    })
})
.catch(error => {

})
```

## ❤️ Better codes
```javascript
await step1().catch(handleError);
await step2().catch(handleError);
await step3().catch(handleError);
```
## 😊 My style
```javascript
const getData = async (url) => {
    try {
        const data = await Prosime;
        return [data, null];
    } catch(error) {
        console.log(error);
        return [null, error];
    }
}

const [data, error] = await (url);
```
Day 25/30 : Image Hover Effects using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-13 12:27:14

Welcome to Day 25 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Image Hover Effects using HTML and CSS](https://1.bp.blogspot.com/-cb-FoMcW0uw/YKoZ2XWnclI/AAAAAAAAAIA/iJbXwiJgfMslGvHnMKfqyyebfWdA8-JoQCLcBGAsYHQ/s600/p25.gif)

**➜ Video Tutorial :**

{% youtube 0hY0mwrQp1M %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/css-image-hover-effects-using-html-and.html


**➜ Instagram Post and Reel for Day 25 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
AWS Data Lake with Terraform - Part 3 of 6
Tags: awsdatalake, terraform, awsredshift, awsbigdata
Published: 2021-06-13 12:09:20

**Amazon Redshift**

Amazon Redshift is a massive AWS parallel processing data warehouse designed for large scale data sets. A very useful feature that Redshift offers is Amazon Redshift Spectrum. In this section I will give a high level summary of why it is so powerful.

**Redshift Parallel Processing**
![Redshift](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg92dd5dm9sy1m0jnstz.png)

Let’s start by reiterating that Amazon Redshift Spectrum is a serverless and there's nothing to provision or manage. You just pay for the resources you consume for the duration of your Redshift Spectrum. 

Redshift Spectrum is a query processing engine that would allow you to analyze data that is stored in Amazon S3 using standard Structure Query Language(SQL) without ETL processing.

![spectrum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/len71us7nqyuu417hsdv.png)

**What do I mean by analyzing data that is sitting in Amazon S3?**

I mean that you do not need to think about using Amazon Redshift storage for any data storage as the data will always live on Amazon S3. You can pull, aggregate and filter all sorts of data using Amazon Redshift Spectrum. Remember Amazon Redshift Spectrum is serverless and so you do not need to worry about anything else other than your code.

**Redshift clusters**

![DB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0ov348lzoeixkjxj7uv.png)

**Redshift Terraform**
```
resource "aws_redshift_cluster" "data_logs_db" {
  cluster_identifier = "data-logs-cluster"
  database_name      = "data_logs_db"
  master_username    = "admin"
  master_password    = "Mustbe8+ch@r@cters"
  node_type          = "dc1.large"
  cluster_type       = "single-node"
}
```
**Diagram version 3: Data lake**
![Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5vdelt4kem7rdmyc55u.png)

**Diagram final version: Data lake**
![Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu474pv3q1mkg7no996t.png)

*Please stay tune for part 4*
Is Node multithreaded?
Tags: node, javascript, multithread
Published: 2021-06-13 12:01:17

As we all know that javascript is a scripting language used for building web application. Node introduced to leverage the capacity of javascript to make it as a scalable network language.

As per official definition Node is an asynchronous event-driven JavaScript runtime. this is in contrast to thread based networking.

First let us make a basic understanding of thread and process's. The basic instance of a computer program is called a process. within a single process we can have multiple things called threads , threads are kind of set of instructions that computer CPU needs to do and Scheduling is the ability of OS to decide which thread to process at anyinstance in time. Urgent threads should not be waited for too long. 

strategies use to increase the rate in which these threads are getting processed are
* Add more CPU cores to the machine.
* More closely examine the work that being done by each thread.

Now let us understand the design of node ecosystem
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfz5s9if2rmk47a48cpl.JPG)

Node js ecosystem consists of three entities node js interface, v8 library and libUV library. Here 70 % of v8 and 100% of libUV is written in c++. Node leveraging functions from both these libraries. libUV is an open source c++ project gives node access to underlying O.S , file system and networking. 
`Process.binding()` connect js and c++ functions . V8 connects values between js and c++ worlds. 

Now we can come back to our thread discusisons. So  node uses a hybrid implimentation of threading system . Node event model is based on an event loop. Whenever we start a node function it will run inside a event loop , which is truly single threaded. Node js simply enters the event loop, after executing the input script. nodejs exits the event loop when there is no more callbacks to perform.

For some expesive functions Node LibUV(c++) part decide to execute outside the single thread which is used for eventloop execution. For this execution we have a threadpool which is a series of four(by default and can be increase) threads that are used to execute computational intensified tasks

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plzhlcmcygixdxmgz7z0.JPG)

How thread pool fitting in node ecosystem ? , tasks running in the threadpool are consdered as the *pending operation* , which is considered as one of the three kinds of events which happens in the event loop other 2 are
* *pending timeout operations.*
* *pending OS tasks.*

So in this way we can conclude that Node is truly single threaded but few heavy function executions are taking place in the multi threaded thread pool.


References:
Node official document.
Udemy Nodejs: advanced concepts.
Cross account role access to S3 in another AWS account
Tags: aws, s3, crossaccount, iam
Published: 2021-06-13 11:56:55

**Scenario**

Need to access S3 in a different AWS account from EC2 in your account.

**Steps**

* For the EC2 role on the first AWS account, add the following in-line policy. (For the KMS key, make sure it is the one created for the same one as the target s3 bucket)
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "s3:List*",
                "s3:Put*",
                "s3:Get*"
            ],
            "Resource": [
                "arn:aws:s3:::bucket-name",
                "arn:aws:s3:::bucket-name/*"
            ],
            "Effect": "Allow"
        },
        {
            "Action": [
                "kms:Encrypt",
                "kms:Decrypt",
                "kms:ReEncrypt*",
                "kms:GenerateDataKey*",
                "kms:DescribeKey"
            ],
            "Resource": [
                "arn:aws:kms:ap-southeast-1:123456789:key/123ddwq-123d-123fd34-553f"
            ],
            "Effect": "Allow"
        },
        {
            "Action": [
                "kms:CreateGrant",
                "kms:ListGrants",
                "kms:RevokeGrant",
                "kms:RetireGrant",
                "kms:ListRetirableGrants"
            ],
            "Resource": [
                "arn:aws:kms:ap-southeast-1:987654321:key/3136e26c-3144-12fd-432r4-34rf4244f"
            ],
            "Condition": {
                "Bool": {
                    "kms:GrantIsForAWSResource": "true"
                }
            },
            "Effect": "Allow"
        }
    ]
}
```

* On the Second AWS Account, IAM → Encryption Keys → Customer managed key, add the EC2 Account to allow access to S3.

* Update the S3 bucket policy. Example below.
```
{
            "Sid": "Stmt1357935647218",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::1234556789:root"
            },
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::bucket-name"
},
{
            "Sid": "Stmt1357935648634",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::123456789:root"
            },
            "Action": [
                "s3:Get*",
                "s3:List*"
            ],
            "Resource": "arn:aws:s3:::bucket-name/*"
}
```
* Test and verify the access !
Why do we need to think of Explainable AI ?
Tags: ai, machinelearning
Published: 2021-06-13 11:23:30

---
title: Why do we need to think of Explainable AI ?
published: true
description: how can we explain AI results
tags: artificialIntelligence, machineLearning
//cover_image: https://direct_url_to_image.jpg
---


(This is a placeholder for my learnings in the space of Explainable AI, updated almost daily, until I complete the course)

#### Introduction


Most of the times, AI algorithms might give us good results, probably accurate results, as to what products to be shown to customers while they browse the catalogue.
Or whether a particular customer is not genuine, in the incident of fraud detection scenarios.
Or it could also predict house price accurately, given certain factors.

But, can AI explain, why did it reach to a particular conclusion ?
AI remains as a blackbox for the humans. And humans cannot reason enough, as to how AI algorithm was able to arrive at a particular output, given a particular input.

Explainable AI is the key to solve such problems.

#### What is XAI ?
XAI is a type of AI that gives insights, as to the reasons behind the outcomes of AI.

#### My ponderings


Some of the questions which I have got are as follows:
1) Do we really need models to be explainable ?
2) If models cannot explain why it has reached a particular conclusion, what are the consequences?
3) Given a set of domains, where machine learning plays key role, what would be the case, if models cannot be explained ?

For example, in the domain of finance, if a customer incident is classified as a fraud transaction, how did it arrive at that conclusion ? Or, in the case of a medical diagnosis, why did a model arrive at a conclusion that, a patient is diagnosed with a brain tumour. Because, day by day, machines/systems are going to be trusted with their decisions. Sometimes, blindly trusting machines might work, but, given certain domains, blindly trusting will not work.
4) What should a machine learning engineer be aware of, if they need to make their models explainable ?

#### With / Without xplainable AI (famous picture related to this topic):

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qann5978rjotwaozi8hl.png)
courtesy: Aki Ohashi
 

#### What are some companies who provide their solutions related to XAI ?

1. Know the how & why behind your AI solutions by fiddler.ai [fiddler.ai](https://www.fiddler.ai/explainable-ai)


#### Related resources:
( Throughout the course of learning about explainable AI, I do collect some interesting online resources, books, youtube videos so that, we get a full and deeper picture in this field )
1. [Awesome Explainable AI collection on github](https://github.com/wangyongjie-ntu/Awesome-explainable-AI)
2. [Linkedin course on 'Explainable AI'](https://www.linkedin.com/learning/learning-xai-explainable-artificial-intelligence)

Learning continues....
Magento 2 product saleable quantity
Tags: magento2, stock, product, php
Published: 2021-06-13 11:04:48

Hiya fellow devs, this is my first post here. Please bear with me.

Stock Management in Magento 2 is usually not that difficult before they deprecated the StockRegistryInterface.

This post explains how to get the saleable quantity of a product in Magento 2.

To get this you need product SKU (Stock Keeping unit) and website code of the website you need the saleable quantity for. So now lets get down to code.

First inject the `Magento\InventorySalesApi\Api\StockResolverInterface` and `Magento\InventorySalesApi\Api\GetProductSalableQtyInterface` into the constructor of the class.
```php

public function __construct(
...
\Magento\InventorySalesApi\Api\StockResolverInterface $stockResolver,
\Magento\InventorySalesApi\Api\GetProductSalableQtyInterface
$getProductSaleableQty
...){
...
   $this->stockResolver = $stockResolver;
   $this->getProductSaleableQty = $getProductSaleableQty;
}
```
You have guessed it correctly, we are going to use `GetProductSalableQtyInterface` to get the saleable quantity of the product.

Then all that is left is to write the logic. You have to retrieve the stock ID of the stock that is appointed to the website. Then you have to pass the SKU and stock ID to get the saleable quantity. Here stock ID is important and to get that we need to use the `StockResolverInterface`. These terminologies come from MSI feature of Magento.

```php
public function getProductSaleableQty($productSku, $websiteCode){
   $stockId = $this->stockResolver->execute(SalesChannelInterface::TYPE_WEBSITE, $websiteCode)->getStockId();
   try{
      $qty = $this->getProductSalableQty->execute($productSku, $stockId);
   } catch(Exception $exception){
      $qty = 0;
   }
   return $qty;
}
```

Here `SalesChannelInterface` is from `Magento\InventorySalesApi\Api\Data\SalesChannelInterface`.

Just by this stock ID you can get the following details related to stock in Magento 2:

1. Retrieve sources related to current stock ordered by priority. - `GetSourcesAssignedToStockOrderedByPriorityInterface`
2. Use it in `StockRepositoryInterface` to get the details of the stock.
3. Check if product is assigned to stock - `IsProductAssignedToStockInterface`
4. Check whether products are saleable for given stock - `AreProductsSalableInterface`.
5. Check whether a given products quantities are saleable for a given stock. Meaning, whether you can sell specific quantity of a product in your website - `AreProductsSalableForRequestedQtyInterface`

Hope this helps for someone.
How to publish packages to npm
Tags: node, github, npm, productivity
Published: 2021-06-13 11:04:13

Hello everyone, have you ever created a project that should be accessible to all and quickly ? Fortunately, thanks to the npm package system, you can download any package in one command line. Today in this tutorial I'm going to show you how to publish your package to npm, so that it's available to everyone. 

## Prerequisites 

The first thing you will need is to have Node.js installed on your machine. To do this, go to the official Node.js website, and download the [latest version](https://nodejs.org/en/).

The second thing you will need is an npm account. If you don't have one, you can create one for free on this page: https://www.npmjs.com/signup. This step is essential as you can only publish packages if you are logged in. Once you have created your account, and validated your email address (required), memorize your username and password.

Once this is done, you are ready to go !

## Publish to npm

Often, when we publish a package on npm, it is on a GitHub repository. In our example, we will imagine that the GitHub package is called: example-package, and is available at this address : https://github.com/user/exemple-package.

Go to your project folder, and open a command prompt. In this one, enter `npm login`.
``` terminal
npm login
```
You then enter your npm username (that's why you had to remember it) and your password. Don't worry, if you don't see the number of characters in the password, it's perfectly normal (linuxians know).

Now you will have to create a file named package.json, to do this you can use the following command : `npm init`. It allows you to fill in all the necessary fields from the command prompt.  Be careful though, the package name must be unique, so you may not be able to choose a package name that is already taken. Then enter the version or click on enter, then the description, etc.  For the git repository, you enter the url of your repository, in my case, it is https://github.com/user/exemple-package.
``` terminal
npm init
```

Once this step is complete, you can check your package.json file to see if everything is in order.

Now it's the big moment, you are ready to publish your package on the npm network with the magic command : `npm publish`.
``` terminal
npm publish
```

Now you can test if your package is on the npm network, by going into an empty folder and running the command `npm install [name]` in my case, this gives: `npm install example-package`. If any files appear in your folder, it has worked. Packages are often found in a folder called `node_modules`.

I hope this tutorial has helped you publish your own package on the NPM network. If you have any questions, don't hesitate to ask them in the comments. See you next time for another tutorial. 👍
Solidity Quick Tip: Efficiently Swap Two Variables
Tags: solidity, blockchain, smartcontract
Published: 2021-06-13 10:45:07

Everything you do in Solidity has a cost associated with it: gas. Gas is the unit measuring the computing power the network provides to you when you execute smart contract logic. The more code you write, the more gas the execution costs. There are a few exceptions to it, but they are rare. The network wants to get paid for the computing power it provides to you. So executing smart contract logic costs money. And you, as the creator, are not necessarily the one paying, but your users.

Generally spoken, Solidity is one of the few languages where optimization is a necessity right from the beginning on. This also leads to trivial problems sometimes needing an efficient solution, and this also holds for such a simple thing as swapping two variables.

This is how you could usually swap two variables like in any other language that doesn't offer any syntactic sugar:

```Solidity
uint256 a = 1;
uint256 b = 2;

// swap a and b
uint256 tmp = a;
a = b;
b = tmp;
```

This code works perfectly fine, but it takes both a lot of code and gas, and there is actually a better way to accomplish the swap with less code and thus less gas consumption.

## The Code

Solidity knows Tuples and destructuring assignments. The syntax resembles JavaScript pretty closely, where you can do the same only with square brackets.

If you combine both, like shown below, you actually get one of the most efficient solutions to swap two variables in Solidity.

```Solidity
uint256 a = 1;
uint256 b = 2;

(a, b) = (b, a);
```

The code you see above is actually a pretty common pattern used by many Solidity developers. It is one of the base patterns you should always keep in the back of your head.

## The Whole Tip As An Image

If you like visual content more, or if you want to store it later, I put all this into one image for you. I hope you like it!

![A picture showcasing the above code](https://cdn.hashnode.com/res/hashnode/image/upload/v1623579989581/JYAcFnS_Q.png)

## Before You Leave

If you would love to read even more content like this, feel free to visit me on [Twitter](https://twitter.com/intent/follow?screen_name=oliverjumpertz) or [LinkedIn](https://www.linkedin.com/in/oliverjumpertz/).

I'd love to count you as my ever-growing group of awesome friends!

*This post was originally published on [my personal blog](https://blog.oliverjumpertz.dev/solidity-quick-tip-efficiently-swap-two-variables).*
Django-Honeypot
Tags: django, github, security, tutorial
Published: 2021-06-13 10:40:07

We made it so we can catch bad guys that try to access our Admin site, but not how about we make so that all of our site form able to catch the bad guy? Sound like a cool proposal right.

Usually, attacker will use a bot to try and crack our web app. One solution is to also include a honeypot everywhere there is a form. This will not deter all of the bot but adding that extra layer of security will not hurt right. Honestly, so far we made it so that we have incremental security measure in place. 

I think this is where I should say that, in security terms, there is nothing that is truly secure but we need to just slowdown the attack as much as we can to the point it doesn't make any sense for the attacker to continue. 

## Installing django-honeypot

```
pipenv install django-honeypot
pipenv lock -r > requirements.txt
```

## Configuring django-honeypot

```python
INSTALLED_APPS = [
    #...

    # django-honeypot
    'honeypot',
    #...
]
```

if you want to activate the honeypot web app wide, the easiest way was to use a middleware provided by django-honeypot

```python
MIDDLEWARE = [
    #...

    # Django-honeypot
    # https://pypi.org/project/django-honeypot/
    'honeypot.middleware.HoneypotMiddleware',

    #...
]
```

lastly add this variable to your settings.py file

```python
# Django-honeypot
# https://pypi.org/project/django-honeypot/
HONEYPOT_FIELD_NAME = "secret_key"
```

##End

As of right now I feel that we made our web app a bit safer. I'm not gonna say that our code is safe from any bot attack but at least the normal to medium type bot.