teleren/devto huggingface dataset:
Understanding of Probability Distribution and Normal Distribution
Tags: aipool, ai, machinelearning, datascience
Published: 2021-05-31 17:44:56

### Introduction
Statistics is a key component in data science, which deals with gathering, analyzing, and drawing conclusions from data. An aspect of statistics is the probability distribution, which gives an idea of the likelihood of an event occurring, for example, there is an 80% chance of rain tonight. 

Regarding probability, the common notation used is p(X), which means the probability that a random variable X is equal to a particular value, therefore **p(X=0.8)**, in the example given, indicates that there's an **80%** chance of X occurring. The sum of all probabilities should be equal to 1, therefore if there's a **0.8** chance of rain, then there's a **0.2** chance of no rain. Probabilities are also between 0 and 1.  There are two types of probability distributions, 

* Discrete probability distribution
* Continuous probability distribution

The following sections talk a bit more about both distributions

#### Visualization of different types of distribution
![image](https://files.ai-pool.com/a/e26089688028a208fcf058af4425aa6c.png)

There are various types of a discrete probability distribution, some of which are

* Poisson, for counting situations, such as the counts of televisions sold at a video store per week
* Binomial for the binary situations, such as if it would rain or not
* Uniform distribution for multiple situations that have the same probability such as a die roll

#### The following plot is a visualization of Normal Distribution
![](https://files.ai-pool.com/a/0e870fac6dada603d5ef8d831446131a.jpg)

The normal distribution has certain characteristics which make it a bit easier to spot, some of which are:

* The mean, median, and mode are equal
* There is no skew(whether left or right), meaning 50% of the values are on the left of the mean, and the other 50% on the right
* The mean and standard deviation are the key terms that characterize this

You can find more about Gaussian Distribution in the [Following Article](https://ai-pool.com/a/s/understanding-of-probability-distribution-and-normal-distribution)

### Other Resources
* [Confidence Interval Understanding](https://ai-pool.com/a/s/confidence-interval-understanding)
* [Decision Trees](https://ai-pool.com/a/s/decision-trees)
* [Understanding of Regularization in Neural Networks](https://ai-pool.com/a/s/understanding-of-regularization-in-neural-networks)
Add Tailwind 2 to Rails 6.1
Tags: tailwindcss, rails
Published: 2021-05-30 14:40:13

---
title: Add Tailwind 2 to Rails 6.1
published: true
description: How to add Tailwind 2 to a Rails 6.1 Project including Purging unused rules to improve performance.
tags: Tailwind, Rails
canonical_url: https://webdevchallenges.com/add-tailwind-to-rails
---

Originally posted on my blog: https://webdevchallenges.com/add-tailwind-to-rails

{% youtube SWjb8sqcdws %}

# How to add Tailwind to Rails 6.1

## New Rails Project

    rails new myproject
    cd myproject

## Install dependencies

    yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@7 autoprefixer@9
    
## Generate tailwind config

    npx tailwindcss init --full
    
Add purge paths to the newly generated file (`tailwind.config.js`) to reduce the css file dramatically.

    purge: [
      "./app/**/*.html.erb",
      "./app/helpers/**/*.rb",
      "./app/javascript/**/*.js",
      "./app/javascript/**/*.vue",
    ],

## Create a scss file for the application

    mkdir app/javascript/stylesheets
    touch app/javascript/stylesheets/application.scss

Import some basic tailwind stuff in there

    @import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";

Import that file in `app/javascript/packs/application.js`

    import "stylesheets/application";
    
## Require tailwindcss in postcss

Add the following require to the `postcss.config.js` file

    require('tailwindcss'),

## Import the tailwind stylesheet pack

Import the stylesheet_pack_tag in your layouts (`app/views/layouts/application.html.erb`)

    <%= stylesheet_pack_tag 'application', media: 'all' %>

## Try it out

Uun the rails server in one terminal

    rails s

And the webpack dev server in another one

    ./bin/webpack-dev-server
How to send Email with node js for free 
Tags: react, beginners, css, javascript
Published: 2021-05-31 17:01:04

If you are building a project that involves customer interactions, then probably at some point you would have to send them an email as well.

For example, on successful form submits, you need to send a confirmation email. Or on every purchase, a receipt or order details.

You could hook up some of the existing apis like send in blue, mail chimp etc, but you can do it for free in nodejs itself.

Node Mailer is a nodejs module, that makes it easy to send emails.

Here's how you do it;


__-> First, install Node Mailer__


```npm install nodemailer```


__-> Then `require('nodemailer')`__


__-> Create a transporter__


Transporter is the object that is able to send the email. It contains data about the connection. 
I'm using gmail to send emails and this is how the transporter looks for me:


```const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: myemail@gmail.com,
      pass: password
    }
  });```
  
  
 __-> We also need an object containing the message to be sent__
 
  
  ``` const mailOptions = {
    from: 'The Idea project',
    to: toAddress,
    subject: 'My first Email!!!',
    text: "This is my first email. I am so excited!"
  };```
  
  
  You can send html emails with html key instead of text.
  
  
 __-> Next, to actually send the email, use 
  `transporter.sendMail(mailOptions, callback)`__
  
  
  The call back takes error and info arguments and is executed once the sending process is complete. You can use this to log errors if any.
  
You can customise the emails you send, where you send from and how you send it anyway you want. Read the docs [here](https://nodemailer.com/about/).


The complete code should look like this,


    ![Full code nodemailer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i116of2cgdf0d7eljgtb.png)
Some software is too reliable
Tags: ssl, x509, postfix, dovecot
Published: 2021-05-31 16:56:36

**Originally posted on [my blog](https://toby.ink/blog/2021/05/31/some-software-is-too-reliable/).**

So my email client has been giving me warnings for a few weeks about my mail server’s certificate having expired. I trust the server, so I assumed something had gone wrong with certbot and the renewal process hadn’t worked. I put fixing it on my todo list.

Today I finally got a chance to look into it and inspected the certificate.

It wasn’t due to expire for a couple of months.

So why is my mail client saying it expired in April?

I checked the config files to make sure the mail server software was looking at the right certificate, and then I had an idea.

```
$ uptime
17:38:17 up 132 days,  6:48,  1 user,  load average: 0.01, 0.04, 0.01
```

The server hadn’t been rebooted for a while. The mail server software had loaded the certificate when it started, but had kept it in RAM ever since. So when the certificate was updated on the disk, it was still using the old certificate in memory.

```
$ service postfix restart
Restarting postfix (via systemctl): postfix.service.
$ service dovecot restart
Restarting dovecot (via systemctl): dovecot.service.
$ service amavis restart
Restarting amavis (via systemctl): amavis.service.
```

All fixed.
The React Native Show Podcast - Episode 5: "React Native 0.64 with Hermes for iOS"
Tags: reactnative, ios, javascript
Published: 2021-05-31 16:40:16

For quite some time, [Hermes Engine was available only on Android](https://callstack.com/blog/optimize-android-app-startup-time-with-hermes/?utm_campaign=Hermes_MB&utm_source=dev.to&utm_medium=article&utm_content=Hermes_android_optimization). Now, with the help of teams at Facebook, Microsoft and Callstack, it's also available on iOS as a part of the [React Native 0.64](https://github.com/facebook/react-native/releases) release!
That's why we decided to dive into the details of this major update. 

In this podcast our host, Mike Grabowski and his guests:
- [Eloy Durán](https://twitter.com/alloy), a Software Engineer at Microsoft,
- [Xuan Huang](https://twitter.com/Huxpro), a Software Engineer at Facebook,
speak about [bringing Hermes to iOS](https://callstack.com/blog/bringing-hermes-to-ios-in-react-native/?utm_campaign=Hermes_MB&utm_source=dev.to&utm_medium=article&utm_content=hermes_RN0_64_article).

The podcast is divided into two parts. In the first part, our experts discuss technical features of Hermes Engine, its biggest selling points and possible future developments.

**The first part of the podcast is focused on the following topics:**
- Hermes improvements to React Native apps in terms of three metrics: Time To Interactive (TTI), Application Size (APK), Memory consumption
- The “magic” behind Hermes - “Bytecode Precompilation” a.k.a. AOT
- The difference between AOT and JIT
- JIT JS engine pipeline vs Hermes pipeline
- The Hermes roadmap and plans for further improvements

**Note:** If you've never heard of Hermes Engine before, don't worry. They start with the basics, so at the beginning you will find out what Hermes is and what it actually does.

**The second part** of the talk is mostly focused on bringing Hermes to react Native macOS.

**In this part, the experts address the following questions:**
- What was the motivation behind adding support for Hermes on macOS? Any plans for RN Windows?
- Were there any attempts to bring Chakra to run on macOS, to say, provide more unified experience across desktop platforms?
- On Apple devices, unlike Android ones, there was always less of performance and memory related issues when it comes to running React Native applications. What would be the selling point of Hermes in such a case?

This and much more you can find in the [5th episode of The React Native Show Podcast](https://callstack.com/podcasts/react-native-0-64-with-hermes-for-ios-ep-5?utm_campaign=Hermes_MB&utm_source=hackernoon&utm_medium=article&utm_content=hermes_podcast). Pick your favorite platform and check it out!
HTML & CSS Tutorial | Frontend Mentor - Profile Card Component
Tags: html, css, webdev, codenewbie
Published: 2021-05-31 16:14:41

In this tutorial we will create a profile card component using just HTML and CSS. 

We will use an existing design from front-end mentor challenge. This will give you a real world experience where a client gives you an `existing design` in form of an image or sketch files and your work is to convert it into a `pixel perfect` HTML and CSS web componnt.

###Support my Content
Subscribe to my YouTube channel: https://youtube.com/c/chaoocharles
Stalk my Twitter: https://twitter.com/ChaooCharles
PayPal Support: [Donate to my PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url)

###Video Tutorial
{% youtube ZezbT_12e3k %}
The 4 Pillars Of Object Oriented Programming (OOP)
Published: 2021-05-30 14:21:08

In this article, I will try to explain the 4 pillars of object oriented programming (OOP).Object Oriented Programming allows programmers to think of software development as if they are working with real-life entities.
##The four Pillars of OOP are;
* [Encapsulation](#chapter-1)
* [Inheritance](#chapter-2)
* [Polymorphism](#chapter-3)
* [Abstraction](#chapter-4)

### Encapsulation <a name="chapter-1"></a>
Encapsulation is when each object inside a class maintain a private state. In a way that other object can not access this state directly instead they can only invoke a list of public methods. Also, Encapsulation achieve the concept of data hiding providing security to data by making the variable as private and expose the property to access the private data with which would be public.

### Inheritance <a name="chapter-2"></a>
The ability of creating a new class from an existing class or ability of one object to acquire some/all properties of another object. For example, a child inherits the traits of his/her parents. It helps to reuse, customize and enhance the existing code. Inheritance allows a class (subclass) to acquire the properties and behavior of another class (super-class).

### Polymorphism <a name="chapter-3"></a>
Polymorphism is derived from 2 Greek words: poly and morphs. The word "poly" means many and "morphs" means forms. So polymorphism means "many forms". A subclass can define its own unique behavior and still share the same functionalities or behavior of its parent/super class but a super class can not have the behavior of its subclass. If we had a superclass called Animal that has a method called animalWalk(). The sub-classes of Animal could be Dogs, whales, elephants, and horses. Each of these would have their own iteration of an animal walk (elephant- walk, whale-swim).

### Abstraction <a name="chapter-$"></a>
Abstraction is an extension of encapsulation. It is the process of showing only essential/necessary features of an entity/object to the outside world and hide the other irrelevant information. Suppose you want to create a work application and you are asked to collect all the information about your users. You might receive the following data from your user: Full name, address, phone number, favorite food, favorite movie, hobbies, tax information, social security number, credit score. This amount of data is great however not all of it is required to create a CV profile. You only need to select the information that is pertinent to your work application from that pool. Data like Full name, Phone number, credit score, and address make sense for a work application. The process of fetching/removing/selecting the user information from a larger pool is referred to as Abstraction.
Azure DataFactory - Backup/ Export
Tags: azure, datafactory, andreacarratta, cloud
Published: 2021-05-31 15:56:04

☁️ #Azure #DataFactory

🎒 Mettiamo al sicuro il nostro lavoro!

Una volta terminato lo sviluppo di un #AzureDataFactory perché non effettuarne un #backup?

⚠️ La procedura di Export è davvero semplice e richiede -veramente- pochissimi click!

LINK: [Azure Data Factory - Export](https://links.devandreacarratta.it/4RiX)


👍 Se il post ti e' piaciuto e/o stato utile, perché non lo condividi con la tua rete?

Fossi in voi resterei sintonizzati sul mio account se nutrite interesse al mondo ADF!

Have a good week!

#cloud #andreacarratta
Toggle your VPN connection with a shortcut, in Manjaro
Tags: linux, arch, bash, manjaro
Published: 2021-05-31 15:55:55

This is a little script that allows you to toggle your VPN connection by running a bash script. 
I mostly use it by assigning it to a shortcut (meta + v).


{% gist https://gist.github.com/vanenshi/a8d454e2612b2599707c962067abd3a9 %}
JavaScript Interview Question #44: Number vs BigInt in JS
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-05-31 15:51:14

![javascript interview question #44](https://learn.coderslang.com/js-test-44.png)

What happens if we add an `n` suffix to a regular number in JavaScript? What’s the output?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In the first line we try to add two numbers. These aren’t regular numbers, but rather two instances of `BigInt` — special objects that are used to safely represent numbers bigger than `Number.MAX_SAFE_INTEGER`.

There are two ways to create `BigInt`:

- add a suffix `n` to any number in JavaScript

  ```js
  const big = 1000000n; // 1000000n
  ```

- call the constructor `BigInt(val)` and pass in a numerical value

  ```js
  const bigN = BigInt(123) // 123n
  ```

  This value doesn’t have to a number. I can be a string.

  ```js
  const bigS = BigInt("234") // 234n
  ```

  You can also use hex and binary notation.

  ```js
  const bigHex = BigInt("0xffffffffffffffff") // 18446744073709551615n
  const bigBin = BigInt("0b111") // 7n
  ```

The `BigInt` numbers behave just like the regular ones. By adding `1n` and `2n` we get `3n`. This is `BigInt` as well, and `typeof 3n` returns a string `bigint`, which will be logged to the screen when we call `console.log`.

---

**ANSWER**: The `n` suffix turns a regular JavaScript number into a `BigInt`. The string `bigint` will be logged to the console.

[Learn Full-Stack JavaScript](https://js.coderslang.com)
This simple screenshot HACK can make you a PRO dev - Screely
Published: 2021-05-31 15:42:15

In this video, I've talked about how you can turn your boring screenshot into a very cool looking picture in just one single click. For this video, I've used an online tool called 'Screely' developed by jurn_w.

### Watch more: https://bit.ly/3uDiFUs

Screely: https://www.screely.com/

Jurn: https://twitter.com/jurn_w

Support the channel by buying me a coffee!
Coffee: https://bit.ly/3vAy0GV

## Let's talk about tech,
Instagram: https://www.instagram.com/amisouvikpaul/
Twitter: https://twitter.com/TheSouvikPaul
Facebook: https://www.facebook.com/thesouvikpaul
Fb Page: https://www.facebook.com/amisouvikpaul

Thank you for watching :)
Recursion with JavaScript
Tags: javascript, recursion, programming, dsa
Published: 2021-05-31 15:30:34

##**Definition:** A process or a function that calls itself.##

###Where is it used ???###
(Other than our own code)

- JSON.parse / JSON.stringify inside JavaScript engine is often written recursively. 
- document.getElementById and DOM traversal algorith are often written recursively.
- Recursion is also seen with more complex data structures.(Trees and Graphs)
- At times it is seen as a cleaner alternative to iteration.

Any time a function is invoked, it is placed on the top of call stack. When JavaScript sees the return keyword or whenever the function ends, compiler will remove it from stack. We are used to functions being pushed on the call stack and popped off when they are done. When we write recursive functions we keep pushing new functions onto call stack.

###How recursive functions work?###
We invoke the same function with a different input until we reach the base case.
**Base Case:**It is the condition for which solution is provided. The solution for the bigger problem is expressed in terms of smaller problems.

```js
function factorial(num){
    if(num===0||num===1) //Base Case
    {
        return 1;
    }
    else return num*factorial(num-1);
   
}
```  
###Common recursion pitfalls###

- Errors in the base case

```js
function factorial(num){
    if(num===1||num===1) //Base Case
    {
        return 1;
    }
    else return num*factorial(num-1);
   
}
```  
- Forgetting to return or returning wrong thing

 ```js
function factorial(num){
    if(num===0||num===1) //Base Case
    {
        return num ;
    }
    else return num*factorial(num-1);
   
}
```  
- Instead of return using console.log for base case.

```js
function factorial(num){
    if(num===0||num===1) //Base Case
    {
        console.log(1);
    }
    else return num*factorial(num-1);
   
}
``` 

- Maximum  call size stack exceeded / stack overflow.

```js
function callMyself(){
  callMyself();
}

callMyself();
```

####Happy Learning!!####
How to improve the Critical Path CSS on web using the “Above-The-Fold" strategy?
Tags: css, webdev, webperf
Published: 2021-05-31 15:28:04

In this brief content, I am sharing about the **Above-The-Fold** strategy to load CSS and why it matters to improve the page loading of our web pages. 

---

📁 **Above-The-Fold** strategy on the web is a practice that extracts critical CSS declaration to render the layout displayed during the initial page load.

⏬ Non-critical CSS is added to another context (usually a dedicated `.css` file) to use async loading.

---

⌛️ **Above-The-Fold** enhances the loading experience while browsing since the browser will have the necessary CSS to scaffold the layout.

⏱ Also, this technique is an essential strategy to improve [First Content Paint](https://web.dev/first-contentful-paint) metrics in our web pages.

---

👉 Have you already heard about this web optimization opportunity strategy?
Revealing Module Pattern in Javascript
Tags: javascript, codenewbie, webdev
Published: 2021-05-31 15:27:46

## [JS #2 WIL Post]
Encapsulation is not inherent in Javascript. There are no modifiers like `private` and `public` to help protect objects from unwanted access. This is one reason why function scope is important in JS. Each function creates a new scope. The scope dictates the visibility of the variables inside a function.

For example in the snippet below, the `gridItems` attribute of the gameboard cannot be accessed directly unless the getter/setter method is used. Thus, the possibility of setting incorrect grid item values will be removed.

Note that the checking of row, column, diagonal winners of the game board is not accessible from the objects that will be importing it. Only the returned functions of `GameBoard` will be accessible outside it.
```javascript
const GameBoard = (function() {
//no one can access this variable directly
    let gridItems = Array(9).fill('I');

    function resetBoard() {
        gridItems = Array(9).fill('I');
    }

    function setGridItemValue(index) {
        gridItems[index] = turn;
    }

    function getGridItems() {
        return gridItems.slice(0);
    }

    function checkWinner(board) {
        if(checkDraw(board)) {
            return "tie";
        }

        if(checkRowWin(board) || 
           checkColumnWin(board) || 
           checkDiagonalWin(board)) {
            return winner;
        }

        return null;
    }
    
    ...
    
    return {
        setGridItemValue,
        checkWinner,
        resetBoard,
        getGridItems,
    }
}());
```
One more important thing to note about this pattern aside from encapsulation is its use of IIFE (immediately invoked function expressions). It is run as soon as it is defined. It is sometimes called a self-executing anonymous function and has two parts:
A. The function itself with the Grouping operator 
```javascript
(function () {
  statements
})
``` 

B. The second one creates the IIFE `()` through which the JS engine will directly interpret the function. 

The second part makes sure that there is no accidental invocation of the function, thus creating a lot of GameBoard objects. To use the GameBoard, the user can just call the publicly available functions, i.e, 

```javascript
GameBoard.resetBoard();
GameBoard.checkWinner();
```

Now, the  GameBoard module can be used in other parts of the JS projects. Check the usage of the `GameBoard` function in this [repository](https://github.com/fatrixienicolieopetina/tictactoe).

References
[1] [Revealing Module Pattern] (https://gist.github.com/zcaceres/bb0eec99c02dda6aac0e041d0d4d7bf2) 
[2] [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
Mengubah Log pada Nginx Menjadi Mudah di Kelola
Tags: nginx, webdev
Published: 2021-05-31 15:25:59

Nginx merupakan web server yang umum digunakan untuk melayani kebutuhan web, seperti web server untuk web statis, menjadi loadbalancer, dll. Pada penggunaannya, Nginx mencatat segala akses dan error yang terjadi. Setiap akses akan disimpan sebagai access.log dan error sebagai error.log. Karena banyaknya akses dan error yang kemungkinan terjadi, maka akan semakin banyak pula yang dicatat dalam log sehingga kita perlu membuat log agar mudah diolah.

Membuat dan menggunakan Log Format pada Nginx, dapat dibaca lebih lanjut [di artikel ini](https://hadihammurabi.hashnode.dev/mengubah-log-pada-nginx-menjadi-mudah-di-kelola).