teleren/devto huggingface dataset:
Read Certificate from Key Vault from Azure App Service by using Managed Identity
Tags: azure, tips, security, appservice
Published: 2021-10-29 01:45:58

We often use Azure Web App and Key Vault together to protect keys/secrets/certificates.

To read certificates from Key Vault by using system assigned managed identity of App Service, there are several things to do.

# Enable Managed Identity

From WebApp, enable managed identity.

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

# Grant Access in KV
 
From Key Vault access policy, assign certificate get permission (or any other additional required permissions) for the managed id.

# WEBSITE_LOAD_USER_PROFILE for Configuration

From WebApp configurations menu, add WEBSITE_LOAD_USER_PROFILE application setting and set value to 1.
Manage Users and Organizations in B2B service
Tags: github, aws, slack, idm
Published: 2021-10-29 01:17:51

## Manage Users and Organizations

when we develop B2B service, we should manage users and organizations (like company, corporation, project, ,).
There are 2 types to create relation between user and organizations. one is User oriented style, other is organization oriented style. I would like to compare these 2 styles, and make opinion what kind of requirement fits which styles.

## User oriented style

In User oriented style service, B2B user should create user account at first. and then create organization groups. Administrator user ask other member to create his own user account, and invite the user to the organization.
Major user oriented service are Github,(AzureAD),,

### User oriented style logical ER diagram
![User oriented style Logical ER](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlcyoe4ebt0jmq42lpr1.png)

## Organization oriented style

In Organization oriented style, B2B user should create organization account at first, and then create user account in the organization account. and each member should have multi account for each organizations.
Major organization oriented service are AWS, Slack,,,

### Organization oriented style logical ER diagram
![Organization oriented style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do0bjeqrgucncyk5yo3w.png)

## compare user oriented and organization oriented

| viewpoint                 | UserOriented   | OrganizationOriented |
| ------------------------- | ------------------------ | ---- |
user manages | single user account for multi organization | multi user account per multi organization|
Org Admin manages | Resources, users,Roles | same as left |
Member Invitaion| member need to create user account at first | Org Admin can create member user account|
Resource owner/Share | User/Organization can own resource and share it to other organization member. | Only Organization can own resource, and normal case cannot share it to other organization.
Cost | no difference | no difference |
Relate with 3rdParty SaaS | To Be analyzed | To be analyzed

## Recommendations

### User oriented style

User oriented style fits to your B2B service, if it have following requirement,,
* would like to manage individual user and organization user in one user management system.(B2B & B2C mixed service)
* Resource of the B2B service (ex:contents, apps, src code,,) would like to be assigned to user , not only to organization.
* User would like to manage one account.

### Organization oriented style
Organization oriented style fits to your B2B service, if it have following requirement,,
* would like to manage user account registration by administrator
* need to separate resource strictly for each organization. (In User oriented case, if user joined to 2 organization, use can see 2 organization resources in same time, it has more possibility of miss assignment. )
DPS909 - Release 0.2 W3
Published: 2021-10-29 00:04:46

## Introduction
For the third week of hacktoberfest, I chose to work with another html project. This time I found a project that needed help with Accessibility improvements.

## The Work
The [issue](https://github.com/tallboy/snowgo.at/issues/18) identified that the website had a few flaws for user accessibility. [Here](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=http%3A%2F%2Fsnowgo.at#accessibility) you can see the problems that Lighthouse (a google chrome inhouse website tester for accessibility, performance etc.) brought up.

## My Code Change
Here is my [PR](https://github.com/tallboy/snowgo.at/pull/22). As you can see in my PR, I changed a few things to land the 100 Accessibility rating on Lighthouse. I changed the main green color to be slightly darker, as the white text did not have enough contrast, so that vision impaired users wouldn't be able to properly read the webpage.
The second change I was regarding the images and icons. They did not contain an "alt" parameter, which would show text, in the case that images failed to load. Next, I modified the menu button, as that was also very difficult to differentiate. Finally, I reordered the headers in the website, as they were not chronological (h1->h2->h3, etc.).

## Conclusion
Overall, in this week for hacktoberfest, I learned about Google Chromes Lighthouse, as well as how to optimize a website so that it is accessible for all types of users.
Another look behind the scenes of this post
Tags: gitlab, git, video, website
Published: 2021-11-08 13:57:25

---
title: Another look behind the scenes of this post
published: true
date: 2021-10-29 00:00:00 UTC
tags: gitlab,git,video,website
canonical_url: https://jhall.io/archive/2021/10/29/another-look-behind-the-scenes-of-this-post/
---

Back in April I [wrote a bit](https://jhall.io/archive/2021/04/26/a-peak-behind-the-scenes-of-this-post/) about the technology and workflow I use to produce these daily emails. This post has proven popular, especially amoung others who are writing, or aspiring to write regularly, and I’ve had a few requests to dive more deeply into this topic.

So this end, I recently created a short 8-minute video where I walk through my daly routine of writing one of these emails. If you’re interested, check it out over on my [YouTube channel](https://www.youtube.com/channel/UC5UfX0EgUWlcdQ2RDsq_fcA).

[![](https://jhall.io/images/behind-the-scenes-play.jpg)](https://youtu.be/8EgWzQ-bwlc)

[https://youtu.be/8EgWzQ-bwlc](https://youtu.be/8EgWzQ-bwlc)

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How Next.js 12 improved Material-UI app compile by 8X
Tags: nextjs, react, javascript, performance
Published: 2021-10-28 23:53:38

Some are calling [Next.js 12](https://nextjs.org/blog/next-12) the "biggest step forward yet."   ***Especially*** Rust fans.  

Next.js 12's new Rust compiler features ~3x faster refresh locally and ~5x faster builds, **but that's not the feature that helped me**.

The unsung hero of the release for me was...


## Compiled module count!
> Next.js now outputs Fast Refresh timing in the console for both client and server compilation, including the number of modules and files compiled.

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

## 10,000 Modules * faint *
10,000 is great if we're talking about *Outliers* 📚, but downright scary 😱 when we're talking about modules.

My application uses [Material-UI](https://mui.com/), but is pretty small, so what happened?!

Take a look:

```
import Menu from '@mui/icons-material/Menu';
import ChevronRight from '@mui/icons-material/ChevronRight';
import Save from '@mui/icons-material/Save';
```
versus:
```
import { Menu, ChevronRight, Save} from '@mui/icons-material';
```
The shorter one sure looks prettier, and VSCode even suggests importing from @mui/icons-material first, but don't fall for it!

How does it impact the compile time?
```
// importing from @mui/icons-material
event - compiled successfully in 5.1s (10013 modules)

// importing from @mui/icons-material/ChevronRight
event - compiled successfully in 615ms (1024 modules)
```
As a first time Next.js user, I did not have a project to compare against to recognize that my compile times were slow until the new module count logging feature.

If you use Material-UI, be sure to replace any instances of direct imports from `@mui/material` or `@mui/icons-material` as you will be compiling ALL the modules from the entire packages. Watch out for [barrel files](https://basarat.gitbook.io/typescript/main-1/barrel) too!

With 1,000 modules remaining, I still have some improvements to make, but I figured I'd share for any others who may experience the same shock!  **How many modules does your Next.js application have?**

P.S. Thanks for reading my first DEV article!
tsParticles 1.37.0 Released
Tags: showdev, javascript, webdev, html
Published: 2021-10-28 23:45:00

# tsParticles 1.37.0 Changelog

last post was 1.34.0 so every missing version will be detailed

---

## 1.34.1

### Bug Fixes

- Fixed themes and emitters interoperability, themes were not loaded correctly when the window is resized.

---

## 1.35.0

### Internal updates
- Split some polygon-mask files, nothing affecting output
- Updated code to work with TypeScript 4.4 (except angular and svelte for now)
- Moved some code out from particle constructor to updaters

### New Features

- Added roll mode to use only horizontal, vertical or both rolling
- Added auto options to theme default to change theme automatically
- Created a custom pathseg for now with some removed types in TypeScript 4.4, sent PR to the [original project](https://github.com/progers/pathseg/pull/32) to add them in the polyfill. It's nomore required when using PolygonMask since is dynamically imported if needed

---

## 1.35.1

### Bug Fixes

- Fixed issue #2241 

---

## 1.35.2

### Bug Fixes

- Added try catch in the pathseg polyfill to avoid crashes when server side (fixes #2264)
- Improved `isSsr` utility

---

## 1.35.3

### New Features

- Removed `id` constraint on `tsParticles.load/set` methods, a random one will be generated if not specified.

#### Example

The following syntax is now valid:

``` javascript
tsParticles.load({ /* options */ });
```

---

## 1.36.0

### Bug Fixes

- Fixed missing file in cdnjs
- Fixed lazy loading of custom pathseg polyfill
- Fixed issue with responsive not refreshing when changing options 

---

## 1.37.0

### Bug Fixes

- Refreshing all tsParticles instances when adding a plugin, fixes an issue with polygon mask and chrome

### New Features

- Added responsive mode (canvas or screen) from dev branch, closes #2358

### Features Changed

- FullScreen mode is now active by default with a z index of `0`, and the interactivity mode is `"window"` so everything still works as expected.

---

{% github matteobruni/tsparticles %}
Podrá Spring Native revivir a Java?
Tags: webdev, programming, java, motivation
Published: 2021-10-28 23:44:51

El esfuerzo del equipo de desarrollo de Spring por mantenerse actualizado parece dar resultados al anunciar la aparicion de Spring Native, una tecnologìa que permitira que las aplicaciones desarrolladas con esta corran en memoria , ya que nativo se refiere al ecosistema JVM más amplio, por lo que el equipo de GraalVM  colaboró para mejorar la compatibilidad y la huella de la imagen nativa. Aquí hay una cita de Vojin Jovanovic del equipo GraalVM:

“Es un gran placer colaborar con el equipo de Spring en la elaboración del ecosistema JVM nativo: su profundo conocimiento técnico, envuelto con un toque sensible para la comunidad, siempre conduce a las mejores soluciones. La última versión de Spring Native, y sus numerosos usos en el ecosistema JVM, allanan el camino para la amplia adopción de la compilación nativa. "

Existe una amplia gama de casos de uso en los que Spring Native podría tener sentido para su aplicación Spring:

No usar servidor local con la función Spring Cloud

Alojamiento más económico y sostenible de sus microservicios Spring

Buen ajuste con plataformas de Kubernetes como VMware Tanzu

Desea crear imágenes de contenedores óptimas que empaqueten sus aplicaciones y servicios de Spring

Estoy seguro de que la increíble comunidad de Spring encontrará más, como este gran tutorial de Piotr Mińkowski sobre cómo crear microservicios nativos en Knative con Spring Boot y GraalVM.

fuente:
https://spring.io/blog/2021/03/11/announcing-spring-native-beta
DPS909 - Release 0.2 W2
Published: 2021-10-28 23:42:36

### Introduction
For this week in our hackathon event, I found a really cool "Candy Crush" game that needed some help. While the requested help was easy, it was fun to work on something such as a game. To read through the backend, and see how it worked was awesome! Even though my contribution was rather small, I believe in overall sense I helped the game succeed!

### The Work
The issue could be found here [issue](https://github.com/Alexandria/match-three-game/issues/59).
What was requested was to change the title of the html from Candy Crush to something that the code owner liked.

### My Code Change
To begin my work, I suggested three name that the game could be potentially renamed to. These could be found here [name change](https://github.com/Alexandria/match-three-game/issues/59#issuecomment-951208942).

Once I got the approval for "Candy Craze", I made the title change, and created my [PR](https://github.com/Alexandria/match-three-game/pull/60)

### Conclusion
Overall, I had some fun with getting creative with name making, as well as exploring the backend of the code, to see how the game ran. I think this was a good learning opportunity for me :)
DPS909 - Lab 6
Published: 2021-10-28 23:25:31

### Intro
For this lab, we got to explore an open source static site generator, created by Facebook... or Meta now? Anyways...

### Background
Docusaurus is an amazing open source static site generator that is packed with many cool features. It allows for the creation of truly epic websites. Our goal for this lab was to learn about the features of Docusaurus, and try to implement some of its features into our own static site generators!

### My Example of Docusaurus
Here is my Docusaurus example: https://roman-rezinkin.github.io/DPS909_Docusaurus/
This is hosted via Github Pages, so feel free to look around :)

### The Features I Implemented into my own Static Site Generator
#### Feature 1
[Feature 1 Issue](https://github.com/roman-rezinkin/RomanStaticSG/issues/25)
The first feature that I wanted to implement was an entire conversion for my markdown reading engine. Instead of using my homemade "masterpiece", we had the option of using an open source markdown engine to handle all of our markdown syntax... So you might be asking why? Well, by implementing [this markdown engine](https://github.com/Python-Markdown/markdown), I have full access to all the syntaxes that markdown has to offer. So instead of only being able to handle the h1, I can now handle everything!
My implementation could be found [here](https://github.com/roman-rezinkin/RomanStaticSG/commit/109fe39e5e604c22fddb12044cfe4fc04bc9efa4).
#### Feature 2
[Feature 2 Issue](https://github.com/roman-rezinkin/RomanStaticSG/issues/26)
The second feature that I wanted to implement is the themes feature. By allowing the user to specify what background theme they want for their experience, I can modify the custom css to match their needs.
The implementation could be found here: [Link](https://github.com/roman-rezinkin/RomanStaticSG/commit/109fe39e5e604c22fddb12044cfe4fc04bc9efa4).

### Conclusion
Overall, I had a great time developing these two new features, and I am most excited about the markdown engine that is capable of handling every type of markdown syntax! For the next steps, I would like to better implement my Themes portion to make it more intuitive, and allow for a great selection, rather than dark mode or regular.
Don't be always late...
Tags: dart, flutter, codequality
Published: 2021-10-28 22:03:43

In code reviews, I often see a construction like this:

```dart
enum Some { option1, option2 }

final someCondition = Some.option2;

void main() {
  late final String x;

  switch (someCondition) {
    case Some.option1:
      x = 'a';
      break;
    case Some.option2:
      x = 'b';
      break;
  }

  print(x);
}
```
 
Take a look at the line `late final String x`. At first glance, there's nothing wrong with it: we don't initialize `x` immediately, but at some point **later**, so `late` modifier seems to be a good fit here, right?

Wrong. Dart compiler is smart enough to understand that there's no way for `x` to be unitialized when it's called at `print(x)`. So you can just omit `late` modifier:

```dart
enum Some { option1, option2 }

final someCondition = Some.option2;

void main() {
  final String x;

  switch (someCondition) {
    case Some.option1:
      x = 'a';
      break;
    case Some.option2:
      x = 'b';
      break;
  }

  print(x);
}
```

And it's not just about being concise. It actually guards you against making an error. Take a look at the following snippet:

```dart
enum Some { option1, option2 }

final someCondition = Some.option2;

void main() {
  late final String x;

  switch (someCondition) {
    case Some.option1:
      x = 'a';
      break;
  }

  print(x);
}
```

Do you see an error here? We don't process all the possible cases and, since in our case, `someCondition == Some.option2` we will get a runtime error:

```
Uncaught Error: LateInitializationError: Local 'x' has not been initialized.
```

What if we remove `late` modifier?

```dart
enum Some { option1, option2 }

final someCondition = Some.option2;

void main() {
  final String x;

  switch (someCondition) {
    case Some.option1:
      x = 'a';
      break;
  }

  print(x);
}
```

Now, we can't even run the code, since we get a compile-time error:

```
Error: Final variable 'x' must be assigned before it can be used.
  print(x);
        ^
Error: Compilation failed.
```

It can help you in other cases as well, such as `if..else` or `try..catch` blocks.

So pay attention to this small detail and stay safe!
How to Make a major change to all your foreign keys (Mysql, Laravel)
Tags: laravel, mysql, backend
Published: 2021-10-28 21:03:37

I've recently stumbled upon this issue where I wanted to add ` ON DELETE CASCADE` to every foreign key i had on my tables. 

I couldn't afford to do this manually because the project I am working on had over *106 tables* and it's still expanding, so the main idea here is to write a general script that can be applied to any project. 


***1- You need to fetch every foreign key for you DATABASE*** 

``` SELECT TABLE_NAME,
       COLUMN_NAME,
       CONSTRAINT_NAME,
       REFERENCED_TABLE_NAME,
       REFERENCED_COLUMN_NAME
FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE
WHERE TABLE_SCHEMA = "<DATABASE_NAME>" 
      AND REFERENCED_COLUMN_NAME IS NOT NULL 
      AND CONSTRAINT_NAME LIKE "%_foreign" ```

*Note* I added `CONSTRAINT_NAME LIKE "%_foreign"` because when Laravel creates a foreign key it follows this convention below 


***CONVENTION:***

``` 

Schema::table('student_grades', function(Blueprint $table){
  // adding a foreign key 
   $table->foreign("student_id")->references("id")->on("students");
});

``` 

The created foreign key will be named `student_grades_student_id_foreign`. 

hence the condition  `CONSTRAINT_NAME LIKE "%_foreign"`. 

If you apply the previous SQL Query you will get data like this

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


***2- Re-create your foreign key*** 

- make a migration file `php artisan make:migration alter_foreign_keys_on_tables` 




 *Now let's get to the code*

```
  public function up() {

       // The SQL Query
        $data = DB::table("INFORMATION_SCHEMA.KEY_COLUMN_USAGE")
            ->select([
                "TABLE_NAME",
                "COLUMN_NAME",
                "CONSTRAINT_NAME",
                "REFERENCED_TABLE_NAME",
                "REFERENCED_COLUMN_NAME"
            ])
            ->whereRaw("TABLE_SCHEMA =  '<DATABASE_NAME>' 
                AND REFERENCED_COLUMN_NAME IS NOT NULL 
                AND CONSTRAINT_NAME LIKE '%_foreign'")
            ->get();
        // you need to write the next line to get back to your ..
        // Original Database 
 
        DB::statement("USE <DATABASE_NAME>");
        foreach ($data as $single) {
           // Don't forget to add protected $single = null; in migration class
            $this->single = $single;
            Schema::table($single->TABLE_NAME, function (Blueprint $table) {
               // drop the previous foreign key 
                $table->dropForeign($this->single->CONSTRAINT_NAME);
                // New Foreign key 
$table->foreign($this->single->COLUMN_NAME)->references($this->single->REFERENCED_COLUMN_NAME)
                    ->onDelete("cascade")->on($this->single->REFERENCED_TABLE_NAME);
            });
        }
    }

``` 


***Final Note:***

The purpose of this article was to show you how to make a major change to all your foreign keys. 


feel free to contact me on my email [ahmed.magdy.9611@gmail.com](ahmed.magdy.9611@gmail.com). 


Thanks for coming to my Ted Talk.
Install Docker & Portainer on Raspberry Pi
Tags: docker
Published: 2021-10-28 21:03:08

This is one of the easiest way to install docker and Portainer on a Raspberry Pi.

### Update and upgrade your system.
```bash
    Sudo apt-get update && sudo apt-get upgrade
```

### Install **git**
    
```bash
   Sudo apt install git
```
    
### Install **Docker**
    
```bash
    1. Mkdir Downloads
    2. cd Downloads
    3. git clone https://github.com/novaspirit/pi-hosted
    4. cd pi-hosted
    5. ls
    6.   ./install_docker.sh    #install docker
    7. exit   #logout
    8. login
    9. groups  # to check if docker is in the group
```

## Install **Portainer**
    
```bash
    1. cd Downloads/pi-hosted
    2. ./install_portainer.sh
```

##Reference:

Thanks to [Novaspirit tech] (novaspirit.com), I can not only install docker with one script, but also setup my own home server and host plenty of apps. Follow his channel to see more tutorial.