teleren/devto huggingface dataset:
What is Power BI?
Tags: powerbi
Published: 2022-03-28 17:49:31

Power BI is a Business Intelligence tool each we know that developed by Microsoft, released in the time 2014. The main purpose of this logical tool is to give the stylish visualizations to our data and help produce customized Power BI dashboards and reports and share perceptivity. Power BI is point- packed and offers a lot to inventors. Below are some of the important features of Power BI: 

**Content packs**: Content packs includes of a data model, embedded queries, and dashboard reports that are used by a huge number of applications.

**Natural language QA**: This one  is the most important feature of Power BI, which allows us to ask questions and give answers to those by providing the content that matches our requirements.

**Various data sources:** Power BI supports various data sources, such as structured data, unstructured data, SQL Server, web files, CSV, and Excel. It also creates bilateral visualizations.

**Custom visualization**: Power BI allows us to access the custom visualization library that helps to meet our varied needs.

**Print dashboard:** This is a unique feature that is used to print dashboards so that they come in handy in discussions and board meetings.

**How is Power BI beneficial?**

Power BI is an easy-to-use and very easy-to-understand BI tool used for creating business reports. Here are some of the much-valued benefits of the Power BI tool:

**Helps in publishing reports securely:** Power BI helps developers publish their reports that allow users to get the latest information and also helps to refresh data automatically.
**Supports drag-and-drop options:** This functionality helps end-users create graphical reports on the dashboard by themselves within no time.
**Good storage capacity:** Power BI can compress large files and load them in a short period of time.
**Advanced data services:** The Power BI tool can easily be integrated with other cloud services such as Cortana/Bot framework.

Learn more about Power BI: https://www.igmguru.com/data-science-bi/power-bi-certification-training/
GitLanding: A beautiful landing page for your Github project in a matter of minutes.
Tags: react, typescript, github, mui
Published: 2022-03-28 17:45:01

Gitlanding helps you create a beautiful landing page for your GitHub projects in three simple steps:

-   Start from a blank [React App](https://create-react-app.dev/) on a branch of your repository.
-   Import some [`gitlanding` components](https://www.gitlanding.dev/storybook/).
-   Auto deploy with [GitHub Actions](https://github.com/features/actions), host it using [GitHub page](https://pages.github.com/)!

Don't worry, you will be guided every step of the way with [specific instruction for **MacOS**, **Widows** and **Linux**](https://docs.gitlanding.dev/#step-by-step-guide).  
Setting up a GitLanding page is also a great practical introduction to [GitHub Actions](https://github.com/features/actions) and [GitHub page](https://pages.github.com/).

# Motivation

There is no shortage of website generators that enable the creation of decent-looking landing pages.
The problem, however, is that if your project grows you will eventually need to incorporate
features like internationalisation, routing, and other functionalities that your website generator
mat not be able to accommodate.

The approach of `gitlanding` is to provide a library of customisable React component
designed to be fitting budding blocks for a landing page.  
This way your little landing page is a react project capable of growing into a more mature project if need be.

> You can have both a landing page (e.g.: `www.your-project.dev`) and a documentation website (e.g.: `docs.your-project.dev`).  
> For creating documentation website [GitBook](https://gitbook.com) is better fit than Gitlanding. GitBook is free for open source
> projects (you just need to [issue a request](https://user-images.githubusercontent.com/6702424/148654719-bf393721-4bf4-4814-a8ef-cf57a3318a7f.png)).

# Showcase

Websites using gitlanding.

-   [Gitlanding.dev itself](https://www.gitlanding.dev/)
-   [tss-react](https://www.tss-react.dev/)
-   [SSPCloud.fr](https://www.sspcloud.fr)
-   [tsafe.dev](https://www.tsafe.dev/)

# 🚀 Quick start

Heads over to [the documentation website 📙](https://docs.gitlanding.dev/)!

[![kickstart_video](https://user-images.githubusercontent.com/6702424/148655634-bcc2ef69-9720-4224-9da5-0af88eb9d906.png)](https://youtu.be/taDGhL0z7wc)
Add loading of components definitions inside Strapi plugin - pull request
Tags: strapi, pullrequest, opensource, plugin
Published: 2022-03-28 17:33:45

Hi :wave:,
for people interested in creating their own plugins for @strapijs  - I created the Pull Request on GitHub. :sparkler:
The PR is about allowing plugin creator to declare his own custom content type components inside plugin. This will open new doors for plugin creators. 

**In short:**

**_What does it do?_**
I have added loading of components definitions from Strapi plugins. It allows loading components from `plugin/server/components` folder.
It allows components to be overwritten by local components, when editing in content-type manager.
It will prefix components categories defined inside the plugin with either plugin name or componentsPrefix (if defined in plugin package.json).

**_How to test it?_**
I have modified the examples/getstarted to make use of the components defined in plugin as well as added a content-type that makes full use of newly defined components.

I and @jaszczw will be actively supporting the PR. 🤞
We need the PR merged to complete one of our projects. :bulb:

**Find out more here:** https://github.com/strapi/strapi/pull/12965
Palindrome with % and / [Java]
Tags: java, tutorial, programming
Published: 2022-03-28 17:33:22

You can use different ways to find out if a number is palindrome using string conversion. I want to explore here an algorithm with a while loop in Java using modulo operator and integer division.

A number is palindrome if it is the same when reading it from left to right and right to left. As an example:

- 1331 is a palindrome;
- 1234 is not.

Therefore we need to find the reversed number and check if it’s equal to the original one.

A while loop is perfect for this scenario. We are going to take the original number and deconstruct it in its original digits. We will use these to rebuild the reversed numbner.

Before going to the solution there are a couple of properties we need to mention first:

**Modulo operator** returns the remainder of a division hence, if we have a number %10 we will have the last digit of that number. No rounding will happen.

```
1123 MOD 10 = 3
1124 MOD 10 = 4
```

This is the main tool we will use to grab the last digits of any integer number.

**Integer division** will discard the remainder. So any integer divided by 10 will simply provide the remaining number and remove the last digit.

This step is important to provide a different number so that in the next iteration the remainder will be correct.

Below the solution including all of the logics we mentioned above:

```java

public class Palindrome {
	public static void main(String[] args) {

		// hard-coding my numbers for ease of use
		int num = 1771;
		int temp = num;
		
		int reversedNumber = 0;
		
		while (temp > 0) {
		
			// MOD division to get the last digit
			int lastDigit = temp % 10;
			
			// reversed number built by adding the last digit 
			// to the previous last digit multiplied by 10. 
			// We are shifting the numbers.
			reversedNumber = reversedNumber * 10 + lastDigit;
			
			// integer division that will equal to 0 
			// if the number is < 10 and 
			// consequently stopping the while loop.
			temp = temp/10; 
		}
		
		if (num == reversedNumber) {
			System.out.println("It is a palindrome");
		} else {
			System.out.println("It is not a palindrome");
		}
	}
}

```

I am fascinated by the logics within the loop but let me know what you think of this approach.
How to access Formik props with useFormikContext() hook
Published: 2022-03-28 17:25:01

---
title: How to access Formik props with useFormikContext() hook
published: true
description: Accessing Formik props with `useFormikContext()` hook
tags: 
//cover_image: https://direct_url_to_image.jpg
---

There's a super easy way of accessing props and helpers like `handleSubmit, handleChange, handleBlur, values, errors, etc` in Formik. Just wrap your components inside the `<Formik>...</Formik>` context and you can use the hook to get access to all the props. 

Example: 

```javascript
 import React from 'react';
 import { useFormikContext, Formik, Form, Field } from 'formik';
 
 const AutoSubmitToken = () => {
   // Grab values and submitForm from context
   const { values, submitForm } = useFormikContext();
   React.useEffect(() => {
     // Submit the form imperatively as an effect as soon as form values.token are 6 digits long
     if (values.token.length === 6) {
       submitForm();
     }
   }, [values, submitForm]);
   return null;
 };
 
 const TwoFactorVerificationForm = () => (
   <div>
     {/* .... */}
     <Formik
       initialValues={{ token: '' }}
       validate={values => {
         {/* ... */}
       }}
       onSubmit={(values, actions) => {
         {/* ... */}
       }}
     >
       <Form>
         <Field name="token" type="tel" />
         <AutoSubmitToken />
       </Form>
     </Formik>
   </div>
 );
```

Full example: https://formik.org/docs/api/useFormikContext
Implement testing in node-express apis using jest and supertest
Tags: testing, jest, supertest, api
Published: 2022-03-28 17:23:38

Testing is important to verify the behavior of the smallest parts of code in your application. It helps improve the quality of your code and reduces the amount of time and money you spend on bug fixing. Moreover, unit testing helps you find bugs early on in the development life cycle.  In Node.js there are many frameworks available for running unit tests. Some of them are:
Mocha, Jest, Jasmine etc. 

we'll be looking at unit testing via jest and supertest below:

Jest is a popular testing framework. It is developed and maintained by Facebook. One of the key features of jest is it is well documented, and it supports parallel test running i.e. each test will run in their own processes to maximize performance. It also includes several features like test watching, coverage, and snapshots.

You can install it using the following command:

`npm install --save-dev jest`

By default, Jest expects to find all the test files in a folder called “tests” in your root folder.

Example of a test using jest:

```
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
```

Following are some assert types supported by jest:

toBe
eg: expect(2+2).toBe(4), 
toEqual
eg:- expect(data).toEqual({one: 1, two: 2}) 
not.toBe
eg:- expect(2+2).not.toBe(5)
 toBeNull, toBeUndefined, toBegreaterThan, toBeLessThan, toContain, toMatch etc.

following command can be used to run individual file

`jest <test file name>`

script to run all test files in test folder to be added in package.json

`"test": "jest"`

npm test can be used to run the tests

Api endpoint testing can be done with the help of jest and another library called supertest.

install supertest using 
`npm install --save-dev supertest`

A sample api test can be implemented as shown below in test folder.

```
const request = require('supertest')
const app = require('./app')
const baseUrl = 'http://localhost:8000'

describe('sends users', (app) => {
  it('should return users', async () => {
    const res = await request(baseUrl)
      .get('/getUsers');
    expect(res.statusCode).toEqual(200);
    expect(res.body).toHaveProperty('users');
  });
});

describe('Post Endpoints', () => {
  it('should create a new post', async () => {
    const res = await request(baseUrl)
      .post('/posts')
      .send({
        userId: 1,
        title: 'test',
      })
    expect(res.statusCode).toEqual(200)
    expect(res.body).toHaveProperty('post')
  })
})

```

Run the tests using npm test and Test results can be seen in terminal console as seen below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf6ji7ws58iyp6e64bfs.png)


For More Info, Visit:
https://jestjs.io/
https://www.npmjs.com/package/supertest
Can you understand what this website is in less than 5 seconds?
Tags: discuss
Published: 2022-03-28 17:14:25

Howdy, I would appreciate some help, more specifically if I am able to _"get the USP across"_ and if [our website](https://aista.com) is _understandable_ in less than 5 seconds - And if it is, does it look appealing? What is good and what is (not so) good? Etc ...

In a way I guess I'm trying to get an audience to give me feedback on the way we communicate our product, without having to pay millions of dollars to assemble a _"focus group"_ ...

If it turns you on, what is it about it that turns you on? If it turns you off, what's turning you off?

Etc, etc, etc ...

But most importantly; How many seconds do you need before you understood what it was about?

I am trying to get the number of seconds down to less than 5 - Not sure if I am succeeding, and I am way to _"soaked into"_ the product myself to even try to evaluate these things myself ...
React Cookie 🍪 Hook
Tags: react, cookie, hook
Published: 2022-03-28 17:10:53

How to handle cookies 🍪 in react?

This is a simple video start guide to see how to get, set and remove cookies using npm package [js-cookie](https://www.npmjs.com/package/js-cookie) in react.

I'm not so sure that this is the best way to do this, but I think it's a good start point! 

[Video Guide](https://youtu.be/vbS2OI0Gb7g)
Typescript Tips from Matt Pocock
Tags: typescript, javascript, tutorial, programming
Published: 2022-03-28 17:07:12

All of these tips have been collected from [Matt Pocock/@mpocock1](https://twitter.com/mpocock1?s=20&t=MaAAaFbofRlZbV-oNZyyhQ) on Twitter. Super useful and I just felt like collecting them into one post that I will try to continue to update as long as he keeps posting them.

### Tip #1

[Tip #1](https://twitter.com/mpocock1/status/1497262298368409605?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #2

[Tip #2](https://twitter.com/mpocock1/status/1498284926621396992?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #3

[Tip #3](https://twitter.com/mpocock1/status/1499002040168636420?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #4

[Tip #4](https://twitter.com/mpocock1/status/1499730377337827336?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #5

[Tip #5](https://twitter.com/mpocock1/status/1500813765973053440?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #6

[Tip #6](https://twitter.com/mpocock1/status/1501533441791193090?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #7

[Tip #7](https://twitter.com/mpocock1/status/1502264005251018754?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Random Tip

[Random Tip](https://twitter.com/mpocock1/status/1501885104926478339?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #8

[Tip #8](https://twitter.com/mpocock1/status/1503352924537339904?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #9

[Tip #9](https://twitter.com/mpocock1/status/1504088070869884929?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #10

[Tip #10](https://twitter.com/mpocock1/status/1504802045794078723?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #11

[Tip #11](https://twitter.com/mpocock1/status/1505892984658743300?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #12 and Correction

[Tip #12](https://twitter.com/mpocock1/status/1506660636683653130?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Tip #13

[Tip #13](https://twitter.com/mpocock1/status/1508408811635322883?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Q&A #1

[Q&A #1](https://twitter.com/mpocock1/status/1502685385331253248?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)

### Q&A #2

[Q&A #2](https://twitter.com/mpocock1/status/1503750455825997833?s=20&t=MaAAaFbofRlZbV-oNZyyhQ)
Recreating WORDLE in my Mother Tongue 🖥👅
Tags: javascript, startup, webdev, beginners
Published: 2022-03-28 17:06:55

Before Going through the article. Don't forget to watch the video and a sub to the channel would be worthy

[Link](https://youtu.be/zPCgEh0ZbPs)

![worth](https://media.giphy.com/media/Rfe8mZwm0Gz1lCp5nu/giphy.gif)
  
After the purchase of Wordle by New York Times, the game hit the sky with popularity more people started to play the game, each day and that developer showed us how a simple and common product can make game changing thing.
After seeing this hit, I just want to recreate Wordle but not in English instead I am going with my mother tongue, Tamil.

![Vanakam](https://media0.giphy.com/media/llyycIVpzjHOEc60wj/giphy.gif?cid=ecf05e47hx34f4qvoazl3y1x7nrf8k1y0wbpx98svn7hrfsk&rid=giphy.gif&ct=g)

## What is Wordle ?

It is Web based word game build by a software engineer, Josh Wardle. The Game is so simple. Each day a new five letter word will be available , you got six tries to find out the right word. If you haven't played give a try.  
![wtf](https://media.giphy.com/media/4cQSQYz0a9x9S/giphy.gif)

## Challenge
Getting back to our problem it would be easy as cloning the wordle in another language, if Tamil contains just 26 letters. But that's not the case. Tamil is one of the longest-surviving classical languages in the world. A recorded Tamil literature has been documented for over 2000 years. One of the greatest language of the world.

It consist of 247 letters with that, n number of words and meanings are possible. So the challenge is 

1. If you gave all 247 letters then the possibilities is limitless it wouldn't be easy to guess the correct answer.
2. If you randomly pick the letters, then the chances of not framing a word is possible which we don't want.
3. Validating the word whether it is actually word or not.
![challenge accepted](https://media.giphy.com/media/f8TXO6yBb8CgU/giphy.gif)

## Solution

First , I started with back-end rest API which tells the given word is valid or not. For that I used Express JS.
Next the task is not to give all 247 Tamil letters instead give only particular 26 letter from which people can form many word. 

I made a Tamil word-list from that random word will be selected which at least contain one letter from the main guess word this way people can be confused and letter from these words keep adding to list until the list length is 26.

Then the list is shuffled and it is represented as the keyboard. So now from 247 letters it has been reduced too 26 from which words can be made.

So when a person enters a word first it checks the inbuilt word-list whether it is valid or not if valid then it checks with answer else then it sends API call from that it acts accordingly.
Now the site is live on [tamilwordle.in](https://tamilwordle.in) check it out.

![solved](https://media.giphy.com/media/5z0cCCGooBQUtejM4v/giphy.gif)


As usual don't forget to subscribe and follow 😉
How to debug react app with vscode
Published: 2022-03-28 17:01:56

---
title: How to debug react app with vscode
published: true
description: Debugging react app with vscode
tags: 
//cover_image: https://direct_url_to_image.jpg
---

In order to debug a react application in vscode, we don't need to install any extension anymore as vscode now includes all the features required for debugging.

Here are the steps I used to debug my react application:

1. The react project was created with `create-react-app` and was running on port 3000 by default. 
2. First go to Run & Debug view and create a `launch.json` configuration file (if you haven't already) and choose `Chrome` as the type.
3. Now, since your app is running on port 3000, change the port in the url parameter to 3000 instead of 8080. 
4. Set some breakpoints and then click on run and a debug instance of your app should start.

The final launch.json config file looks like this. I am using Edge so the type in my case is different.

```javascript
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

```
Day-52 Training At Ryaz
Tags: webdev, beginners, github, mongodb
Published: 2022-03-28 16:58:00

Date:28/03/2022
Day:Monday

Today's started at about 10:30 am as I was done with basic part of my app so, basically as yesterday I studied as for what we need the jwt token i.e Jason Web Token so, as I was done with the basic understanding of jwt tokens so, today I started with implementing the jwt tokens firstly I watched a video on you tube that how to implement it so, then I installed the jwt by using the command npm I jsonwebtoken and then I used and declared it as const and used as jwt.sign and implemented it and also tried by using various another methods but didn't get the token in the output as when we implement Jwt token we get unique token when we post a new user so, I have tried but was unsuccessful so, I would try it tomorrow with a new approach so, this way my day ended up and got various knoledge about jwt tokens.
Add a CI/CD pipeline to an Amazon S3 bucket
Tags: aws, awss3
Published: 2022-03-28 16:49:49

**Pre-requisites**:
1. GitHub account & own repository to commit files.
2. AWS account , access to management console.

This is a beginner friendly hands on exercise to learn the power of CI/CD in the AWS cloud. It will deploy the changes from your repository in GitHub to the S3 bucket which acts as a static website host. 

## **S3 bucket**
Create a S3 bucket which has website hosting enabled.

##**Commit Pipeline**
In this pipeline one defines as to what stages the code commit has to go through before it can be deployed.
It has 3 components:
1.Source stage: Define where the code will be picked up from to deploy it in the cloud. One can see a variety of options while specifying the stage. For Github, install the AWS Github connector to connect to your repository.Select the repository which will be the source for the artifacts & the corresponding branch in the repository.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae9e86w2087p013us29x.png)

2.Build stage(optional): You can specify how you want your code to be built using a yaml script. I have skipped this step as my changes are to the index.html file

3.Deployment stage: Either the build stage or deployment stage should be present. This stage also has different options regarding where to deploy the code.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7ygolbhuooinwzk1gbp.png)

##**Commit code to Github** :

After the above two steps are completed, make changes to your code in html file which serves as the landing page for your website & commit the file. Voila!!!! Within seconds you can see that the commit pipeline is triggered & your changes are deployed to the S3 bucket mentioned in the deployment stage.

Below is the result of my code change & this hands on lab:

Before commit:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypjlly4k8sxklz6u6szz.png)

After commit:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qjl8z0h6g9h2d4l3cpy.png)