teleren/devto huggingface dataset:
Animated text sphere in JavaScript using TagCloud.js
Tags: html, javascript, css, webdev
Published: 2021-08-02 15:50:56

I needed a sphere of rotating words for one of my projects. So, I scoured the internet for that. Hard luck didn't find anything suitable. I did find one pen on [codepen](https://codepen.io/jcozada/pen/JBNyRw) which had a very complicated JavaScript code, difficult to understand. That is when I came across **TagCloud.js** by **Cong Min**. 
Check out his [GitHub](https://github.com/mcc108) profile.

**TagCloud.js** is a standalone JavaScript library for rendering an animated, interactive, 3D sphere tag cloud from an array text strings you provide.

Read the documentation [here](https://github.com/mcc108/TagCloud).

![chrome-capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9jx4vw356x1gdkss3gx.gif)

Now, how to create one on your own:

### HTML

1. Create a container to hold the tag cloud.

```html
<span class="content"></span>
```

2. Import the TagCloud.js script CDN in the document

```javascript
<script src="https://cdn.jsdelivr.net/npm/TagCloud@2.2.0/dist/TagCloud.min.js"></script>
```

### CSS

3. Add your own CSS styles to the tag cloud.

```css
.tagcloud {
    font-family: 'Poppins', sans-serif;  
    font-size: 20px;
    font-weight: 650;
    margin-left: 30%;
  }
  .tagcloud--item:hover {
    color: #36454F;
  }
```
### JavaScript

4. Define your tags in a JS array.

```javascript
const myTags = [
    'JavaScript', 'CSS', 'HTML',
    'C', 'C++', 'React',
    'Python', 'Java', 'git',
    'django', 'Node.js', 'OpenCV',
    'GCP', 'MySQL', 'jQuery',
];
```
5. Render a default tag cloud.

```javascript
var tagCloud = TagCloud('.content', myTags);
```
6.  Config the tag cloud by overriding the default parameters

```javascript
var tagCloud = TagCloud('.content', myTags,{

  // radius in px
  radius: 300,

  // animation speed
  // slow, normal, fast
  maxSpeed: 'fast',
  initSpeed: 'fast',

  // 0 = top
  // 90 = left
  // 135 = right-bottom
  direction: 135,
  
  // interact with cursor move on mouse out
  keep: true
  
}); 
```
This creates a basic cloud of words. If you want to change the color of words randomly after each reload, add this small JavaScript code at the end.

```javascript
var colors = ['#34A853', '#FBBC05', '#4285F4', '#7FBC00', 'FFBA01', '01A6F0'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.querySelector('.content').style.color = random_color;
```
If done correctly, you should get this result 👇

{% codepen https://codepen.io/Malakannawar/pen/dyWKxgJ %}


And that's it, very simple and straightforward😉✌
Thanks for reading!!
🧩 Adding Auth0 Authentication to a Ktor HTTP API
Tags: kotlin, ktor, programming
Published: 2021-08-02 15:25:26

#### 🖥 Learn how to integrate Auth0 with a #Ktor application using #JWT #Authentication.

### <br>

In the previous post, we created a Ktor HTTP API that exposed three endpoints. All of these endpoints were publicly accessible, and in this post, we'll add a security layer requiring a valid access token to query the `protected` and `admin` endpoints.

In addition, we'll create an Auth0 API and application for our frontend application, allowing users to be authenticated and providing the access token passed to the backend API.

Before we begin, we need to understand two fundamental technologies that form the core of our API's authentication and authorization layer: JSON Web Tokens (JWTs) and JSON Web Keys (JWKs).

## What is a JWT?

The [JWT.io website describes JWT as](https://jwt.io/introduction):

> an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed.

In the context of authentication and authorization, JWTs provide a standard set of JSON properties that:

* Identify the token issuer via the `iss` property, which in our example will be an Auth0 application.
* Identify the audience via `aud` property, which will be our Ktor API.
* Define an expiry time via the `exp` property, ensuring tokens can not be used forever.

[Read more...](https://auth0.com/blog/adding-auth0-authentication-to-a-ktor-http-api/?utm_source=content_synd&utm_medium=sc&utm_campaign=kotlin)
How to resolve Jest issues: tests passing, but code coverage fails!
Tags: javascript, react, jest
Published: 2021-08-02 15:24:25

---
title: How to resolve Jest issues: tests passing, but code coverage fails!
published: true
description: "Today I'm continuing with my trend of making silly mistakes so you don't have to. The subject today is asynchronous tests in Jest. I've spent too much time on this one, and I don't want you to have the same trouble!"
tags: javascript, react, jest
---
Today I'm continuing with my trend of making silly mistakes so you don't have to.

The subject today is asynchronous tests in Jest. I've spent waay too much time on this one, and I don't want you to have the same trouble.

I'm testing whether a page renders or not. The page takes some time to contact an API and therefore to render, so I've used the `waitFor` helper in Jest to assert what should happen.

As I've mentioned the test setup is slightly immaterial, however I'm writing this rather quickly before the kids get hungry.

Here's the test using `waitFor`:

```javascript
it('renders the page', () => {
    render(
        <ThemeProvider theme={defaultTheme}>
            <MockedProvider mocks={mocks} addTypename={false}>
                <IndexPage />
            </MockedProvider>
        </ThemeProvider>
    );

    waitFor(() => {
        expect(screen.getByText(/messages/i)).toBeInTheDocument();
    });
});
```

Anything wrong with this test? No?

Look again. The documentation in fact plainly says this at the top of the page: 

> The async methods return Promises, so be sure to use await or .then when calling them.

Source: https://testing-library.com/docs/dom-testing-library/api-async/

What this doesn't do is show up in your tests. It'll look like they've passed!

The only reason I came across it was because when I use `--codeCoverage` to make sure I've covered all of my code with tests, it shows up as uncovered lines. But also, you'll notice there is an obscure message in the terminal about this too:

> `ReferenceError: You are trying to access a property or method of the Jest environment after it has been torn down.`

Basically the assertion cannot be verified because it's no longer there, the `render` phase has passed. Although why this results in passing tests is anybody's guess. (Please let me know in the comments if you know!).

Here's an example of a working test:

```javascript
it('renders the page', async () => {
    render(
        <ThemeProvider theme={defaultTheme}>
            <MockedProvider mocks={mocks} addTypename={false}>
                <IndexPage />
            </MockedProvider>
        </ThemeProvider>
    );

    await waitFor(() => {
        expect(screen.getByText(/messages/i)).toBeInTheDocument();
    });
});
```

There you go, I've wasted hours of my precious life so you (hopefully!) don't have to!
Building Backend Website With Supabase
Tags: webdev, react, javascript, supabase
Published: 2021-08-02 15:10:25

If you’re a front end web developer, you definitely doesn’t have any difficulties while deploying web app to hosting services like github pages, vercel, etc.. Especially if it is only static website, portfolio, or landing page.

But when it comes to uploading the back end part, I sometimes get confused how to do it. I know I could upload the database to heroku using postgres, but another problem comes in when mostly we developing the database using mysql in local environment, and many other things related to backend that I don’t really familiar with.

Lately I have a personal project that need a user authentication, a database to store some data. I know I could use firebase to make it happen, but I think it’s too much for a personal project. Not long after that, I see someone from twitter that recommended someone else to use _supabase_ just to store some simple data. I got curious, and finally I found solution for my personal project.

[_Supabase_](https://supabase.io/) is a backend as a platform (BaaS) service, where you can directly create your database there, having user authentication for your website, etc.. They offer three main product such as database, storage, authentication. I personally only use database and authentication.

So basically we just call API that supabase generated automatically for us to do any operation we want, and we can keep easily deploying website in github pages, vercel, or other web hosting.

In my opinion, their interface is good, especially in table editor section, I could get started quickly with it to arrange database design like I want. They also provide feature like foreign key relation in our tables, which is good for me.

They also provide auto generated docs for us on how to fetch data from our tables and other operation like edit, update, delete data. It’s really simple to read all rows from your table, you can just like

```
let { data: blog, error } = await supabase
.from('blogs')
.select('*')
```
**_DISCLAIMER: I made the project in react_**

I need the foreign key relation to link between post and comments, and also maintaining the ‘comment tables’. So when particular post is deleted, the comment attached with that post is deleted too.

Another thing I’ve done with supabase is authentication. They provide many method like `signIn`, `signUp`, `session` , etc.. It’s really convenient for us from front end to do it. For example, when someone wants to login, we can just write code this simple
```
const { user, session, error } = await supabase.auth.signIn({
email: 'emailFromUser',
password: 'passwordFromUser',
})
```

**Conclusion**
I finally able to create backend without having to upload my own backend code and all the configuration that I need to do. I hope this article help you, thank you for reading this post.
Wrapper classes and caching pitfalls
Tags: java, codenewbie
Published: 2021-08-02 15:09:21


## Wrapper Classes


As you all know, the Java language comes up with Primitive Wrapper classes (Integer for int, Double for double, Long for long, Character for char and so on).


Wrapper classes provide a way to use primitive data types (int, boolean, etc..) as objects.


Wrapper classes are immutable just like Strings and most Java Developers ignore that just like String objects these wrapper classes have also their own constant pool and that's tricky...
   

## The problem

Consider the following method: 

 ![Equals method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs3sqtm1zfhz6bjmv8oi.PNG)

And now the main method: 

![Main method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dblsfjuv8qm3x8av7wie.PNG)

Can you guess the program's output after launching the main method? 

If your answer was: 

1==1 ? true
1==2 ? false
127==127 ? true
128==128 ? true

Then unfortunately you got it wrong in the last one. Here's the right answer: 

1==1 ? true
1==2 ? false
127==127 ? true
128==128 ? false 

Surprise!!! 


## What happened? 

The problem is that an Integer is an object and because we are using the == operator, we are comparing references in the heap here and not actual values. 


You may reply: "Okay but then why does the program print out true in the case of 1==1?". Alright let me explain that for you in a simple way, when you write the following code: 

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl0pd5s6qw7zs8pl203d.PNG)

The compiler transforms it to this code behind the scenes:

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snnxwth1carf7bbkog07.PNG)

This is called Autoboxing. 

## Autoboxing/Unboxing
 
It's a mechanism used by the compiler to transform automatically  wrapper classes to their primitive types (autoboxing) and the other way around (unboxing). 


When we call the *equals* method like the following *equals(1,1)*, the compiler is smart enough to notice that the equals method takes 2 Integer objects as parameters and not primitives, that's when **Autoboxing** happens, the compiler transforms your primitive data type (int) into a wrapper object (Integer) by calling the valueOf() method.    


Okay, so there must be something going on under the valueOf() method. Let's have a look: 

![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03j2pamosyrlngblq1d0.PNG)


As you can see this method caches objects that have values between -128 and 127. This basically means that whenever we ask for an Integer between these values Java will always provide the same instance and that's the reason why 1==1 renders true and 128 == 128 renders false. 

## Best practice 

The best practice here in order to test the equality of wrapper classes is to use the equals() method which compares object values rather than object references in the heap.
Day 160
Tags: 100daysofcode, programming
Published: 2021-08-02 14:50:07

Day 160/200 of  #100DaysOfCode #javascript 

- Solved three problems on Codewars. 

Today unlocked a new privilege on codewars.
Honor Percentile: Top 0.793%
3000+ Honor:  Now I have 4x kata voting power!

Be a code warrior -> www.codewars.com/r/YECsUA

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/405p1l0ewnirwx7mz4k3.png)
Easiest Multi-Modular Python Logging
Tags: python, programming, tutorial, logging
Published: 2021-08-02 14:42:22

![Easy logging with a logging wrapper for Newbies or fast pacers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mskr7afv6rluc5ht5to7.png)
Do you have a multi-modular python application and want to swiftly enable logging in it?
Are you tired of Initializing logger in your every module and keeping track of it ?
Is your Python logger not working as it is supposed to ?
Do you want different kind of logging happening together with minimal code ?
Do you want to quickly enable logging into your code before wrapping up your progress today ?
If the answer is ‘YES’ to any of the question above then you have come to the right place.
I have written an easy to implement wrapper for you that prevents you from scratching your head for the **PETTY** yet **ANNOYING** logging issues that you might encounter.
#Let’s Get Started !
> Installation

You need to download 2 files from the GitHub repository attached below and place it in your current working folder.
Files : **Logger.py** with the config **logging.conf**
Link : [Github Repository](https://github.com/m-imranali/Python-Easy-Logger)
> Usage

Import the Easy-Logger Wrapper into your Script/Module
```
import Logger
```
Then initialize it in the main indent
```
logger = Logger.Logger("Main Program")
```
And that’s all. Now you can log your heart out throughout your module using :
```
logger.debug("Nice My Debug Log Message")
logger.info("Ok My Info Log Message")
logger.warning("Hmm My Warning Log Message")
logger.error("Oops My Error Log Message")
logger.critical("Eeehhh My Critical Log Message")
```
> Advanced Usage

There are two level of details in the Easy-Logger at the moment
* root
* brief
The level can be changed easily when initializing the module by using the following command
```
logger = Logger.Logger("Main Program",'brief')

logger = Logger.Logger("Main Program",'root')
```
# Yet To Come..
* Example Code
* More level of details handlers in the Easy-Logger
* Details about modifying the configuration file
* Logs rotation details
* Network Logging
* More Log Formats
First of many stories & tutorials to come.. Still getting familiar with the medium and its interface though 😆.
Hopefully these will prove worthwhile to the community.
HandsOn Setup - Elastic Cloud
Tags: beginners, tutorial, elasticsearch, cloud
Published: 2021-08-02 14:39:00

| [Menu](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl) |

For HandsOn posts we will use Elastic Cloud. If you don't use Elastic Cloud yet, on [this link](https://ela.st/latam-community) you can access a 30-day trial. Just add your email to start using your free trial as you can see in the image below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t21s89n4rac5dyl5u5u.png)

After creating your account you will not have any deployment available, to create a new one click on Create Deployment as in the image below.

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

Feel free to choose the settings you prefer but before creating your deployment you need to customize to add the ML node.

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

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

Then you can finally create your deployment and open Kibana. At this point don't worry about the settings beyond that.

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

When Kibana opens you will see a message like the message in image 1 below, suggesting that you start adding data. To proceed implementing the data analysis demonstrated here you will need to add all available samples.

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3afo2dr4fxb2qexkvf1e.png)

That's it. Now you can proceed with the data analysis examples.

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

* [Elastic Anomaly Detection and Data Visualizer HandsOn](https://dev.to/priscilla_parodi/elastic-anomaly-detection-and-data-visualizer-handson-3c2j)
* [Elastic Data Frame - Classification Analysis HandsOn](https://dev.to/priscilla_parodi/elastic-data-frame-classification-analysis-handson-4ilb)
* [Elastic Data Frame - Inference Processor HandsOn](https://dev.to/priscilla_parodi/elastic-data-frame-inference-processor-handson-3392)

>*This post is part of a series that covers [Artificial Intelligence with a focus on Elastic's (Creators of Elasticsearch, Kibana, Logstash and Beats) Machine Learning solution](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl), aiming to introduce and exemplify the possibilities and options available, in addition to addressing the context and usability.*
Elastic Data Frame - Outlier Detection
Tags: machinelearning, elasticsearch, beginners
Published: 2021-08-02 14:38:34

| [Menu](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl) | [Next Post: Elastic Data Frame - Regression Analysis](https://dev.to/priscilla_parodi/elastic-data-frame-regression-analysis-2ge2) |

> Unlike the [Anomaly Detection](https://dev.to/priscilla_parodi/elastic-anomaly-detection-learning-process-and-anomaly-score-3nl7) models, this is a multi-variate analysis, it enables a better understanding of complex behaviors that are described by many features. For this analysis we have 3 models with different algorithms and learning types (Outlier, [Regression](https://dev.to/priscilla_parodi/elastic-data-frame-regression-analysis-2ge2) and [Classification](https://dev.to/priscilla_parodi/elastic-data-frame-classification-analysis-1b3f)) and in this post we'll talk about Outlier Detection.

**Outlier detection** identifies unusual data points in the dataset (Unsupervised ML).

When we talk about time series modeling and population anomaly detection, we look for outliers but basing it on how far the metric is from the normal model.  

With Outlier Detection we are looking at clusters of data and evaluating density and distance using multi-variate analysis. We are not interested in tracking evolution of this dataset over time like we do in population anomaly detection and there are no buckets.

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

###Evaluation of the Outlier detection###

Outliers may denote errors or unusual behavior. In the Elastic Stack, we use an ensemble of four different distance and density based outlier detection methods, based on this approach, a metric is computed called local outlier factor for each data point. The higher the local outlier factor, the more outlying is the data point.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bzxtmxc2eokycb2y4rb.png)

| [Menu](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl) | [Next Post: Elastic Data Frame - Regression Analysis](https://dev.to/priscilla_parodi/elastic-data-frame-regression-analysis-2ge2) |

>*This post is part of a series that covers [Artificial Intelligence with a focus on Elastic's (Creators of Elasticsearch) Machine Learning solution](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl), aiming to introduce and exemplify the possibilities and options available, in addition to addressing the context and usability.*
Elastic Data Frame - Classification vs Regression
Tags: machinelearning, elasticsearch, beginners
Published: 2021-08-02 14:37:51

| [Menu](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl) | [Next Post: Data preparation for Data Frame Analysis with Transforms](https://dev.to/priscilla_parodi/data-preparation-for-data-frame-analysis-with-transforms-2bp6)|

Regression and classification algorithms are supervised ML algorithms but the difference between the two is how they are used for different machine learning challenges. In the classification analysis we are predicting class probabilities such as yes / no, true / false, spam / not spam, while in the regression analysis we are predicting continuous values such as price and salary.

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

| [Menu](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl) | [Next Post: Data preparation for Data Frame Analysis with Transforms](https://dev.to/priscilla_parodi/data-preparation-for-data-frame-analysis-with-transforms-2bp6)|

>*This post is part of a series that covers [Artificial Intelligence with a focus on Elastic's (Creators of Elasticsearch) Machine Learning solution](https://dev.to/priscilla_parodi/a-guide-to-machine-learning-ai-with-the-elastic-stack-1dkl), aiming to introduce and exemplify the possibilities and options available, in addition to addressing the context and usability.*