teleren/devto huggingface dataset:
Introduction to MSAL
Tags: webdev, tutorial, beginners, cloud
Published: 2022-02-01 23:09:46

---
title: Introduction to MSAL
published: true
date: 2021-12-05 00:00:00 UTC
tags: webdev,tutorial,beginners,cloud
canonical_url: https://www.rupeshtiwari.com/what-is-msal/
---

> If you have any project that you want to integrate with Azure Active Directory and secure your app. Then you must try using Microsoft Authentication Library (MSAL). Yes, in this article I will introduce you to MSAL 🔥.

## What is MSAL?

Microsoft Authentication Library (MSAL) gives secure access to acquire security token on-behalf of user or application and helps you to achieve single sign on.  ![](https://i.imgur.com/zb53M5t.png)

MSAL specifies which audience can sign in to your application.

## What is the audience?

Audience is the actor or client who interact with the system to whom your application authenticate. Sometimes audience can be used for the target application for which security principal is generated. Audience could be:

1. Your organization
2. Several Organization
3. Work  Organization
4. School  Organization
5. Microsoft Personal account
6. Social Identities with Azure AD B2B
7. Users in Sovereign
8. National Cloud (Sovereign cloud ) 
  1. Azure Government
  2. Azure Germany
  3. Azure China 21Vianet

## Which Applications MSAL supports?

In your application you do not need to write code, you just install the MSAL library and configure it. MSAL will get the security tokens from Azure Identity provider for

1. Web applications
2. Web APIs
3. SPA (Javascript)
4. Mobile & Native Applications
5. Daemons & Server Side applications

## Difference between ADAL & MSAL 

Active Directory Authentication Library (ADAL) integrates with the Azure AD for developers (v1.0) endpoint, where MSAL integrates with the Microsoft identity platform.

![](https://i.imgur.com/mF36jCV.png)

## What Programming Language MSAL supports?

MSAL can be used with below languages:

1. .net applications
2. Angular projects
3. JAVA applications
4. Javascript apps
5. Node.js projects
6. Python
7. React
8. Android

This list is continuously growing please check with Microsoft document for more updates.

MSAL used for asp.net web applications is called as Microsoft Identity Web Library

## References

1. [https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-overview#differences-between-adal-and-msal](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-overview#differences-between-adal-and-msal)

* * *

_Thanks for reading my article till end. I hope you learned something special today. If you enjoyed this article then please share to your friends and if you have suggestions or thoughts to share with me then please write in the comment box._

**💖 Say 👋 to me!**  
Rupesh Tiwari  
Founder of [Fullstack Master](https://www.fullstackmaster.net)  
Email: [rupesh.tiwari.info@gmail.com](mailto:rupesh.tiwari.info@gmail.com?subject=Hi)  
Website: [RupeshTiwari.com](https://www.rupeshtiwari.com)

![](https://imgur.com/5fBatz9.png)
Use TailwindCSS with Sveltekit (2021)
Published: 2021-12-10 14:37:07

---
title: Use TailwindCSS with Sveltekit (2021)
published: true
date: 05/12/2021
tags: 
canonical_url: https://www.elian.codes/blog/12-05-21-use-tailwindcss-with-sveltekit-2021/
---

Since my previous blogpost on using [TailwindCSS](<https://tailwindcss.com/>) (JIT) with [Sveltekit](<https://kit.svelte.dev/>), a lot has changed. That's why I've updated the article to a newer (and better) method.

## Setting up Sveltekit

Setting up a new Sveltekit project is not that hard anymore. Just run the following set of commands:

```bash
npm init svelte@next tailwind-sveltekit-app
```

You can always search [the official documentation](<https://kit.svelte.dev/docs>) for more info

### Adding an adapter

In most cases, I tend to use Sveltekit as a static site generator. To tell Sveltekit to create static pages, add the static-adapter with following command:

```bash
npm i @sveltejs/adapter-static@next
```

Also add the following to the `svelte.config.cjs`

```js
const adapter = require('@sveltejs/adapter-static');

module.exports = {
	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: null
		})
	}
};
```

This tells Sveltekit to put the output in the `build` folder and dont use a fallback (so generate a `index.html`, `404.html`, `contact.html`, ...)

more info on the adapter [here](<https://kit.svelte.dev/docs#adapters-supported-environments-static-sites>)

## Adding TailwindCSS

Previously I described some additional steps to install Tailwind, like installing autoprefixer and PostCSS. I also setup some extra NPM scripts.

Since TailwindCSS is used a lot across the web these days, it got way easier. Just use the following command:

```bash
npx svelte-add@latest tailwindcss
```

This will install TailwindCSS, PostCSS and other dependencies. It will also add the configuration and a basic `app.css` file with Tailwind imported.
Reuse a MongoDB connection with NodeJS
Tags: mongodb, node, javascript, database
Published: 2021-12-04 23:41:23


In this article, I want to show you how to reuse a MongoDB connection across routes on a NodeJS project. I'm doing this post because I was developing a project using the MongoDB official driver for node and I struggled to reuse my connection since the official docs of MongoDB show a way to use just in one file.
So, first, we need to install the mongodb driver for nodejs, you can do that using the commando below:

```
npm install mongodb --save
```
## Connecting to MongoDB
Now that we installed the driver, we can start implementing the db connection, in order to do that, we'll create a file called _db.js_:

![db.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yjrzvaorbinn2awzqnn.png)
## Using the connection anywhere we want
Now, we can use this connection anywhere in our code by just importing this method, let's see how it works!
We will now create a file _app.js_ as an example to use the database connection.
In order to implement the routes, we'll [_express.js_](https://expressjs.com/), a minimalist web framework for node, you can install using the command below:

```
npm install express
```
Our _app.js_ file will look like this:

![app.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arjjjcrf4m97ck3s2h6z.png)
We'll get a JSON response that will be something like this:

![JSON Response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7ole0ucqu8vvsfw15f8.png)
## Conclusion
That's it, we now can use this connection anywhere in our code!
Thanks for reading this article!
[Android Studio] Duplicate value
Tags: android
Published: 2021-12-04 23:22:47

Three arrayList:
Two for ArrayList<Playlist> - will take information of movie
One for ArrayList<String> - will take movie id of the movie

1. Add all movie information object from database to reviewedArrayList(ArrayList<Playlist>)

2. While looping the reviewedArrayList, check if the movieIDArrayList(ArrayList<String>) contains the movie id. When it does not have it, add it to movieIDArrayList and add the information object containing the movie id to newList(ArrayList<Playlist>) and if not, skip it.

3. Give newList which does not have duplicated value(movie id) to somewhere that I want to use.

```
  public void onDataChange(@NonNull DataSnapshot snapshot) {
                reviewedArrayList = new ArrayList<>();
                movieIDArrayList = new ArrayList<>();
                newList = new ArrayList<>();
                for(DataSnapshot childSnapshot: snapshot.getChildren()){
                    Playlist playlist = childSnapshot.getValue(Playlist.class);
                    reviewedArrayList.add(playlist);

                    for(int i=0; i < reviewedArrayList.size(); i++){
                        String mID = reviewedArrayList.get(i).mID;
                        if(!movieIDArrayList.contains(mID)){
                            movieIDArrayList.add(mID);
                            newList.add(reviewedArrayList.get(i));
                        }
                    }

                }
```
How do I use variable-arguments (varargs) in C++ (effectively)?
Tags: cpp, help, watercooler, c
Published: 2021-12-04 23:13:29

So, C\+\+ extends C, and as that being the case, the implementation of varargs persisted (and hasn't changed, since it could break already existing code).

In C, you could do `#include <stdarg.h>`, which included some functions for navigating the arguments.
But now most of C's original `.h` files are deprecated (in C\+\+).
So I'm wondering, what's the effective way of using varargs in C++?
Metodologías ágiles SCRUM
Tags: intervew, scrum, agil
Published: 2021-12-04 23:06:18

Las metodologías ágiles son aquellas que permiten adaptar la forma de trabajo a las condiciones del proyecto. Gracias a estas, las empresas consiguen gestionar sus proyectos de forma flexible, autónoma y eficaz, además de reducir costos y aumentar la productividad. Una de las más usadas es SCRUM.

## **¿QUÉ ES SCRUM?**

Es un framework o marco de trabajo utilizado para ayudar a las personas, equipos  y organizaciones a realizar proyectos complejos de una forma eficaz.

Se basa en aspectos como:

- Flexibilidad, adaptación a cambios.

- El factor humano.

- Colaboración e interacción con el cliente.

- El desarrollo iterativo.

**ROLES en el Scrum:**

 El **Product Owner**, es el responsable de reprentar las ideas del cliente en el proyecto, se encarga de la correcta realización del Product Backlog. 

El **Scrum Master**, es un lider servicial que se engarga de la buena realización del Scrum, brinda ayuda al equipo de desarrollo eliminando cualquier obstaculo que vaya apareciendo en el camino. Crea el backlog para el sprint. Enfoca al equipo en la iteración actual y trabaja estrechamente con el Product Owner. 

El **equipo de desarrollo** son los encargados de realizar las tareas priorizadas por el Product Owner, suelen ser pocas personas. Estiman las tareas del Product Backlog.

**¿QUÉ ES EL SPRINT?**

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

Es una iteración que suele agregar valor al producto, suele tener un intervalo de duración de 2 semanas a 1 mes. Allí se trabajan algunas de las tareas elegidas en el Product Backlog. El sprint cuenta con:

1. Sprint planning:
 Reunión donde se decide que tareas abordar y el objetivo del sprint. Puede llegar a durar varias horas de duración. El equipo se compromete a hacer un sprint goal. Poker Planning.

2. Daily meeting: 
 Reunión diaria de corta duración, de 15 a 30 minutos aproximadamente. Se debe realizar con el Scrum Master y el equipo de desarrollo. Cada integrante éxplica allí en que esta trabajando y como lo realizará, tambien aquí se deben prensentar los impedimentos diarios.

3. Sprint review: La famosa _DEMO_

 Se hace al final del sprint y es la única reunion a la que puede asistir el cliente. En ella se presenta al cliente lo desarrollado. Aquí el cliente verifica el avance y puede realizar feedback de lo expuesto. 

4. Sprint retrospective:
 Es último evento de Scrum, el equipo se reune para evaluar como fue la implementación de la metodología en el sprint. Se busca que los integrantes reflexionen y propongan mejoras para la siguiente iteración.

**Herramientras principales del SCRUM:**

**Product Backlog**- Lista de requerimientos que engloban todo el proyecto, el producto Owner es el encargado de ordenarlo cumpliendo con los requerimientos del cliente.

**Sprint Backlog**- Son un grupo de tareas del product backlog definidas en el sprint planning que el equipo de desarrollo se compromete a realizar durante el sprint.
How To fix screen tearing in Ubuntu 2021.10
Published: 2021-12-04 22:39:00

I used to have this problem, and I fixed it just simply by changing the refresh rate in the display settings **so instead of** using **`60Hz`** I used **`59.96Hz`**

[Display Settings screenshot][1]

![1]

This problem is related to your screen refresh rate because it's not truly 60hz or 120hz. It's more like as close as possible. Still, that will cause the screen tearing problem if not set to be the same (or half if you have 120hz and want to you 60Hz though that would be just crazy) 

  [1]: https://i.stack.imgur.com/JvUrg.png
Solving day 4 of Advent of Code 2021 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2021-12-04 22:00:49

---
title: Solving day 4 of Advent of Code 2021 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2021 (day 4)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2021 in Javascript
---

{% youtube TFuAwv9-b88 %}
Self Taught Blockchain Dev
Tags: blockchain, ethereum, programming, crypto
Published: 2021-12-04 21:32:03

Greetings,

My name is Orion and I am a self taught developer and designer based out of the United States. I am a true techie at heart with a love of innovative products. One thing that has been in my focus is everything in the blockchain space. Being web3 is confirmed as the future of the internet, it was only right I go forth and place my hands within the tech space asap. 

So I heard about Bitcoin years ago when it was first caught major media focus. Many were skeptical of the cryptocurrency while I was a bit concerned. Not in a bad way, but more so just interested in what was truly occurring. A digital currency in which will take things out of the banks hands? Yeh, coming from someone who was truly against the "terms and conditions" many banks have it felt only right to look into more. I learned about the coin and it struck a passion of mine to learn more. Over some weeks I went into the whitepaper, learned about the process of all behind the scenes, and also didn't take a single dollar to invest. Well well well… now years later the couple of dollars I would've invested could have made me millions now. Guess the timing wasn't right, but the information stays if studied like I did of the topic.

After years of not taking advantage,  I found myself behind the curve because many are now in the position I could've been. Not only that, many other chains have became of existence such as Ethereum, Tezos and many more. I signed up with the SkillUP program which allows free Blockchain Developer Certificates to users. Free sound amazing to me and I began achieving something I thought would take eons to complete. Learning the different blockchains and how things connect didn't worry me as much as knowing terminology. Once having the knowledge of such, I was able to understand completely Ledgers and Trezors work. So what's next now having the certificate and knowledge of how the blockchains work?

Going forward, the goal is to make sure I provide incredible information around the blockchain space. Being that this is a developers site, it only right that I give accurate information upon the topics to help others. Throughout the studies I will provide small projects and other things I've been able to find within the web3 space for I truly see a great future ahead.

Until next time,

Peace and Light!
Creating a weather app using React
Tags: react, javascript, webdev, programming
Published: 2021-12-04 21:15:00

Hello everyone, this is my first blog so I apologize if it won't be written well.

Now let's get started!

First of all, you need to get an API key. For this project I used the **free** one from [OpenWeatherMap](https://openweathermap.org/price).

Once this is done we can move on to the code:

**The folder structure**
![folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqslh7c795tc1dkyy5t2.png)

In the _app_ folder there is the App.js file and the files that depend on it, I created this folder just to have more order but it could perfectly well not be there. In the _pages_ folder there are the pages that will be rendered by the App.js via [reac-router](https://reactrouter.com/).The _components_ folder as the name implies contains components such as the _icons_. 
For handling the API response data I used [redux](https://redux.js.org/).

**How the API works**
This project, after entering the name of the city and possibly also the country, will give you the **current** and **daily** forecasts. To get both forecasts it is necessary to make 2 API calls: the first will give you the current forecast via the _name_ of the city entered; the second one obtains the data through the _geographical coordinates_ of the place (which are obtained from the first call).
They are inserted by the user into the _SearchField_ component that through the onFormSubmit function pass the city name to _fetchData_ that makes the API request through redux.

The SearchField component:
![SearchField component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cthjgpkb1ymo190mh5bb.png)

The redux reducer: 
![reducer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbaj37xd7zw6fxjrgg1b.png)

The fetchData action:
![fetchData action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59rhqyjelet8s8y5jliw.png)

**The components**
The two main components are the _CurrentForecast_ and the _DailyForecast_. Both containers render other components to display the data

The CurrentData component: 
![CurrentData](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5pi3w1ujwprpee1mdh4p.png)

The DailyData component:
![DailyData](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8oq2ga934r4wirym5ew.png)

**Routing**
In this project, if you click on a day of the daily forecast, you go to the page where the details on the forecast of that day are shown. The redirect of the pages is done via react-router in the _App.js_:
![App.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7bipfu3albhije6221o.png)

The details page simply shows the CurrentForecast component with the details of that specific day:
![details page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go03q7v4ue2yznakalmv.png)

That's pretty all. You can see all the files on github:
https://github.com/Saverio683/weather-app-project
here the finished site: 
https://master.d1aih8wyl9juxv.amplifyapp.com/

Thank you for paying your attention to this post. I hope it was helpful to you.
Day 80/100 Semantics
Tags: 100daysofcode, javascript, programming, motivation
Published: 2021-12-04 20:48:01

Most people used the static HTML before but as years passed by semantic versions become a big scope of today's HTML structures which defines and make it more readable.

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

## Why use Semantic HTML?

- **Accessibility:** Semantic HTML makes webpages accessible for mobile devices and for
people with disabilities as well. This is because screen readers and
browsers are able to interpret the code better.
- **SEO:** It improves the website SEO, or *Search Engine Optimization*, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify
the content of your website and weight the most important content
appropriately.
- **Easy to Understand:** Semantic HTML also makes the website’s source code easier to read for other web developers.

## Code Snippets

```
<main>
  <header>
    <h1>Types of Sports</h1>
  </header>
  <article>
    <h3>Baseball</h3>
    <p>
      The first game of baseball was played in Cooperstown, New York in the summer of 1839.
    </p>
  </article>
</main>
```

```
<figure>
  <img src="overwatch.jpg" alt="image">
</figure>
```

```
<audio>
  <source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>
```

[
![semantics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytebqv0fz2uam2o9go3t.png)](https://www.internetingishard.com/html-and-css/semantic-html/)
The 3 most interesting C++ posts of November 2021
Tags: bestofdev, cpp
Published: 2021-12-04 20:43:45

Let me share with you 3 interesting [#cpp](https://dev.to/t/cpp) posts from December.

As I wrote during the earlier months, I don't take the most popular articles anymore, because I find that while some articles do meet the criteria to add #cpp as a tag, but they are not mostly about C++. So there is a bit of subjectivity to this list. I also try not to include multiple articles from the same author and I don't include the wrap-up of the previous month either ;)

Feel free to share your favourite one in the comments.

***
[Chris](https://dev.to/softchris) wrote the most popular articles on C++ this month, not just one, but a already six in his [C++ beginners](https://dev.to/azure/c-from-the-beginning-2o2l) series. Thank you, Chris, keep them coming!

{% link https://dev.to/azure/c-from-the-beginning-2o2l %}

***

[Calin](https://dev.to/baenencalin) also wrote for beginners and his explanation on rvalues, lvalues and copy constructors were popular.

{% link https://dev.to/baenencalin/c-vocabulary-for-beginners-4nlj %}

***

Last but not least, [JLi](https://dev.to/jli) touched a very important topic; static code analysis. That's something we should be all aware of and more than that, we should all practice. Thanks for bringing up this important topic!

{% link https://dev.to/jli/learning-how-to-use-static-analysis-tools-jie %}

Happy coding!

## Connect deeper

If you liked this article, please 
- hit on the like button,  
- [subscribe to my newsletter](http://eepurl.com/gvcv1j) 
- and let's connect on [Twitter](https://twitter.com/SandorDargo)!
What tech/startup-related newsletters are you subscribed to?
Tags: startup, technology, newsletters, email
Published: 2021-12-04 20:28:06

I'm really curious about newsletters as a business model that people seem to be having a lot of success with, I'm considering starting my own (in the tech/startups niche) and I'm looking for some good examples. Also, I'd like to discover some quality stuff worth subscribing to, just for fun.
[Work in Progress] Outlier Analysis
Published: 2021-12-04 20:02:02

## 1. Z-Value:
{% katex %}  Z_i = \frac{| X_i - \mu |}{\sigma} {% endkatex %}

### Assumptions:
1. Underlying distribution is Normally Distributed. Violating this will result in poor anomalies.
2. Good proxy: {% katex inline %} Z_i \geq 3 {% endkatex %}
3. For few samples, use the *Student's t-distribution*.
How To Test A GitHub Action
Tags: actionshackathon21, devops, cicd, github
Published: 2021-12-04 20:01:48


### My Workflow

The project [unfor19/hero-action](https://github.com/unfor19/hero-action) is an All-In-One action to a test GitHub Action.

### Submission Categories

1. Maintainer Must-Haves
2. Wacky Wildcards - I'm adding this one because it's a "hacky" way of using GitHub Actions to test an action (feels like a recursion)

### Yaml File or Link to Code

{% github unfor19/hero-action %}

1. The action repository, `my-repo`, triggers a workflow in the test repository, `my-repo-test`. Meanwhile, the `my-repo` is "stuck" with the commit status **pending**.
   ![hero-action-commit-status-pending](https://assets.meirg.co.il/hero-action/hero-action-commit-status-pending.png)
2. The repository `my-repo-test` tests the action by using it, see [unfor19/hero-action-test](https://github.com/unfor19/hero-action-test/blob/master/.github/workflows/test-action.yml#L37-L48)
3. Upon success/failure, the test action `my-repo-test` [creates a commit status](https://docs.github.com/en/rest/reference/repos#create-a-commit-status) in the action's repository, this updates the status of the **pending** workflow with **success** or **failure**
   ![hero-action-commit-status-success](https://assets.meirg.co.il/hero-action/hero-action-commit-status-success.png)

### Additional Resources / Info

- Using this action in:
  1. [unfor19/replacer-action](https://github.com/unfor19/replacer-action)
  2. [unfor19/install-aws-cli-action](https://github.com/unfor19/install-aws-cli-action)