teleren/devto huggingface dataset:
aks integration with azure ad explained in plain english - azure rbac, kubernetes rbac, kubeconfig
Tags: kubernetes, rbac, aks
Published: 2021-11-16 21:55:24

---
title: "aks integration with azure ad explained in plain english - azure rbac, kubernetes rbac, kubeconfig"
published: true
description: "aks integration with azure ad explained in plain english - azure rbac, kubernetes rbac, kubeconfig in less than 5 minutes"
tags: kubernetes, rbac, aks
cover_image: https://www.azuremonk.com/assets/blogposts/video/rbac.gif
---

{% youtube ABbJWP6TToc %}


This is the super simplified video animated explanation on everything you ever wanted to know about Azure Active Directory and AKS (Azure Kubernetes Services) - from the basics

1. What is a kubeconfig file ? Why is it important ?
2. Azure AD integrated AKS cluster v/s non-Azure AD integrated AKS cluster
3. Azure Role based access control (RBAC) v/s Kubernetes Role Based Access Control (K8s RBAC)



https://www.azuremonk.com/video
The newest Docker VS Code extension feature you’re not using
Tags: docker, vscode, microservices, cloudnative
Published: 2021-11-16 21:54:19

As Docker usage has grown, Docker Compose has become the leader in running multi-service applications locally. Unfortunately, as your application expands and more services must communicate, we’ve found authoring these Compose files can become arduous, time consuming, and mistake prone. We want to make writing Compose files with volumes, ports, and multiple services much easier. 

Today, we’d like to announce the Docker Compose Language Service in the [Docker Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker). That’s right, the Docker Extension will now provide Docker Compose files with IntelliSense, Tooltips, and syntax validation. Here are a few of the incoming features in our 1.18 release: 

- IntelliSense tab completions (i.e. volumes, ports)

  ![Gif showing tab completions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx20ekb3zpw0gsn5d9fn.gif)
- Tooltips for Compose keywords (i.e. services, image)

  ![Gif showing a tooltip from hovering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26ed2z6qx3it34vc54l6.png)
- Right-click to format a Compose file (Shift + Alt + F) 
- YAML Syntax Validation 
- Hyperlinks for Docker Images 

In our 1.18 release, this feature will be on by default, so we hope you enjoy it!

There are more improvements to come! Stay tuned for these features:

- More tab completions
- Docker Compose schema validation 
- … and much more! 

We love your feedback! If you have any comments or ideas on our Compose language support, feel free to submit an issue to the [Compose Language Service Repo](https://github.com/microsoft/compose-language-service) or the [VS Code Docker Repo](https://github.com/microsoft/vscode-docker/issues) for general feedback.
scaling an aks (azure kubernetes services) cluster explained in plain english
Tags: kubernetes, scaling, aks
Published: 2021-11-16 21:53:44

---
title: "scaling an aks (azure kubernetes services) cluster explained in plain english"
published: true
description: "scaling an aks (azure kubernetes services) cluster explained in plain english"
tags: kubernetes, scaling, aks
cover_image: https://www.azuremonk.com/assets/blogposts/video/scaling.gif
---

{% youtube HGUQW8fCBz8 %}



This is the super simplified video animated explanation on everything you ever wanted to know about scaling in the context of an AKS cluster (Azure Kubernetes Services). We will cover the following topics: 

1. Manually scale a pod in or our an AKS cluster - how to and demo 
2. Automatically scale pod in or out in an AKS cluster using horizontal pod autoscaler (hpa) - how to and demo.
3. Manually scale a node in or out an AKS cluster - how to and demo 
4. Automatically scale a node in or out an AKS clusters - the gotchas, how to and demo




https://www.azuremonk.com/video
Knowing the Difference is Half the Battle.
Tags: javascript, programming, efficiency, tooling
Published: 2021-11-16 21:40:43

#A Little Bit of Background:
When attempting multiple algorithms at Flatiron school I found myself not being able to finish. From this, I wanted to find out why. So I peeked at the solution and found that they were using Set instead of an Array. This led me to questioning what is a Set? How is it different from an Array? And does Set have any bigger advantages over an Array? With a some research I was able to find my answers and teach it to others. 

#What is a Set?
A Set is a collection of values that a programmer can iterate through similar to an object.

#How is a Set different from an Array?
A Set is similar to an array or an object in that you can iterate through one and that it holds a collection of values. However, the main takeaway is that a Set is only able to hold unique values. This means that a value that appears in Set can only appear one time.

#Does Set have any bigger advantages 
As mentioned previously, Set is not able to have any duplicating values so if a programmer would like to push a new value in an Array they are able to do so as many times as they would like. Through my research into this topic, it was found that adding values to an array is 4 times than adding them to a Set. Iterating through an Array is also much faster than a Set. However, where Set shines is when a programmer would like to remove a value from their collection. If a programmer needed a way to make a unique collection of values Set is much more useful. Set removes the overhead from an Array. When checking an Array with a unique object it goes through checking if that value exists and if it does skip or push, going through every index. The tests that were run were with 10k and 100k elements. With 10k elements an array took 16.7ms and a Set took 20.7ms. However, at 100k elements the array took 1974.8ms and the Set took 83.6ms. Showing the massive disparity between the two. Another test was run that uses 10k elements in an collection and the programmer adds 15 new values and 5 of the are duplicates. The results are an array took 74ms and the Set took 9ms which is a big margin. 

#In Conclusion
Sets are faster than arrays when dealing with duplicates and checking if any duplicate exists with large amounts of Data. However, Arrays are much faster in all other circumstances. I believe understanding these differences can enhance junior developers.

[Here is the link to a Stack Overflow that tested Set vs Array.](https://stackoverflow.com/questions/44243103/javascript-set-vs-array-vs-object-definition)
Bookmarks
Published: 2021-11-16 21:08:43

### Week 46, 2021
[New Search Engine: you.com](https://venturebeat.com/2021/11/09/ai-driven-search-engine-you-com-takes-on-google-with-20m)
[Pin and Suffering (async rust)](https://fasterthanli.me/articles/pin-and-suffering)
[Cypress Best Practices](https://docs.cypress.io/guides/references/best-practices)
Optimizely DXP Image Optimization
Published: 2021-11-16 21:04:51

Optimizely DXP is a cloud-first approach to customer engagement including high availability and performance, easy connectivity with other cloud services and existing systems, ability to manage spikes in customer demand, and a platform that is ready to seamlessly adopt the latest technology updates. 

Optimizely DXP also includes a Content Delivery Network provided by Cloudflare for performance and security optimization.

I want to focus upon the optimization side of Cloudflare, more specifically image optimization.

Cloudflare has 3 products to help with image optimization, Cloudflare Image, Cloudflare Image Resizing, Cloudflare Polish. For the purpose of this post I will focus on Cloudflare Polish as this is enabled by default in Optimizely DXP, you can read more about the other products [here](https://developers.cloudflare.com/images/).

Cloudflare polish automatically optimizes images upon your site whenever is is fetched from you site.

Whenever you make the first request to retrieve and image you will notice within the headers the 'cf-cache-status' will be set to 'MISS'. Cloudflare is telling us it tried to retrieve the image from cache, however it did not find it and so requested it from the origin.

![Cloudflare CF-Cache-Status MISS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6maq87yai5g399j4tqar.PNG)

If you were to wait a few seconds and refresh the image you will notice that the 'cf-cache-status' is now 'HIT'.

![Cloudflare CF-Cache-Status HIT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mfhvfo6uqhmh2ni2siq.PNG)

To confirm that Polish has been applied we can check the 'cf-bgj' header returns the image quality setting 'imgq'. We can also check the 'cf-polished' header to confirm Polish status and returns the image quality setting (qual) and original size (origSize). 

The above headers can confirm that polish is working working, however we can do better and ensure that images are being served in next generation format. To do this we can review the 'content-type' header and ensure this is returning 'image/webp', comparing this to the 'cf-polished' original format (origFmt) we can see the original format of the image was png and has been converted to webp.

While Cloudflare Polish automatically optimizes images, it will only optimize the image if the webp image is smaller than the original image.

If we review the below 'cf-polished' header below. We can see the status is set to 'webp_bigger' this is informing us that the image optimization on this image would provide no benefit.

![No Compression](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lq4jzcyb0cou8shqorc.PNG)

Hopefully someone else finds this information useful. If you have any questions please drop a comment below.
Horizontal scroll on mouse wheel: nothing easier!
Tags: javascript, html, css, jquery
Published: 2021-11-16 20:45:57

Hi Dev! 🙋‍♂️

I've used this easy way for a horizontal scroll a lot and I want to share the code with you: ✌️

HTML
```html
<div class="horizonal-wrapper">
  <div class="horizonal-content">
    <div class="content-1"></div>
    <div class="content-2"></div>
    <div class="content-3"></div>
  </div>
</div>
```

```css
.horizonal-wrapper {
   height: 100vh;
   width: 100%;
   overflow-y: scroll;
}

.horizonal-content {
   width: max-content;
}

.content-1,
.content-2,
.content-3 {
  width: 50vw;
  height: 100vh;
  float: left;
  border: 1px solid;
}
```

JS
```javascript
$('.horizonal-wrapper').on('wheel', function(e){

   e.preventDefault();
   $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY);

});
```

This is my fiddle example:
https://jsfiddle.net/k0bojwhu/

Thank you and good coding! 🧑‍💻
Improve Usability to new IPC144 Website
Tags: opensource
Published: 2021-11-16 20:25:35

# Introduction
This week, I contributed to one of projects operated by my school Seneca College. It is an open source project - built in contents of IPC144 (Introduction To C Programming) course. You can take a look at the [GitHub Repo](https://github.com/Seneca-ICTOER/IPC144) and the [website](https://cghub.ca/).

At first impression, the new website is more good-looking and user-friendly than the [old website](https://ict.senecacollege.ca/~ipc144/). Taking a closer look at the new website. I found out that I can add an additional feature to maintain the usability of the users (students).

# Issue
* The page footer is kind of blank right now with a link to *Table of Contents* only.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o70700608wt7z2rzql1.JPG) 
* I want to add the hyperlink of *Weekly Schedule* to the page footer, so that when students scroll down to the end of the page. They can click on either *Table of Contents* or *Weekly Schedule*, which both pages contain important information.
* I want to remove the hyperlink of *Weekly Schedule* in Contents page because we would have the hyperlinks of Weekly Schedule in both left navigation bar and footer.
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn9io1c1qxt4ivovskn7.JPG)
* Take a look at my filing [issue](https://github.com/Seneca-ICTOER/IPC144/issues/54).

# Process
* In order to add additional hyperlink to the footer, I add *Weekly Schedule* label and its location to in *docusaurus.config.js* file. 

```
{
   label: 'Weekly Schedule',
   to: '/weeklyContents',
},
```
* Here is the result:
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nqjn7ovfsz7d6fa18v7.JPG)
* In order to remove the hyperlink from *Table of Contents* page. I removed the line in *docs/intro.md*:
```
[Weekly Schedule](weeklyContents.md)
```
* Here is the result:
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33vaflbk8qp22ym43lkg.JPG)

* Take a look at my [Pull Request](https://github.com/Seneca-ICTOER/IPC144/pull/55)

# Conclusion
Overall, my pull request is easy to solve. But it is so amazing to me to be a part of my college's project, that I can actually find an improvement to work on something for future students and people see it as a convenient way for students to use the website. After all, I'm so happy that my Pull Request is merged successfully to the college project.
Failing to plan is planning to fail
Tags: 100daysofcode, productivity, planning, codenewbie
Published: 2021-11-16 20:18:38

I've missed my hour of coding a few days last week.  I did start a new job, and that affected my schedule.  The main reason is that I have no idea what to code, and I've been getting stressed trying to come up with a project and design it too quickly.  

First of all, I have to remind myself that I'm pretty new to all of this.  I've learned some css and html a year ago(I don't think the course I was following was very good), did some javascript and ruby, and had some fun on codewars.com.  I was mostly focused on learning the logic behind these languages.

I didn't do much with web design and planning out my own projects, and that's why I'm stuck now.  So now I have a rough plan, but before I start a coding challenge, I want to have a solid plan. 


I want to focus on three projects:

1.  A to-do list(which I've started)

2.  A calculator 

3.  A landing page


Ok, so I have an idea of how I want these projects to look...sleek and modern.  I've seen all these cool site and app designs on dribble.com.  But when I try to come up with my own design, it never has the same feel.  I need to cut myself some slack here too, I'm not a designer.  

I need to focus on what I've learned and put it to practice.  If I haven't learned something, I can learn it in the future.  


What I can do is this:

1.  Get a pen and paper and start sketching some basic layouts

2.  Style with CSS to the best of my ability(it's not going to look like something a designer with 10 years of experience did and that's ok). 

3.  Write the javascript on hard-coded elements(what I know how to do right now) and worry about dynamically added elements later.  

4.  Keep learning and remember to have fun!


What do you do when you get stuck?
P-PL.com - JavaScript Interview Questions Quiz: Just how Well Do YOU Know JavaScript? 
Tags: javascript, node, nextjs, react
Published: 2021-11-16 20:18:03



P-PL is a place where teachers and students, experts and beginners, freelancers and customers can come together to collaborate on software development.

Currently, were are seeking experts in the languages of Python and JavaScript.

Just how well do YOU know JavaScript? Take our 10 Question Interview Quiz to find out… https://bit.ly/321NHgd

Before you can become a Jedi Master in JavaScript, you first must master the Interview. Give it a go today and see how you do!
__________________________________________________________________

At its core, p-pl.com is a network of experts willing to connect over video chat.

As a user, you have access to video chat anyone at anytime given their schedule and expertise you are looking for.

Whether you are a software engineer looking for help on a bug or a life coach advising clients on their next big move, p-pl.com is the solution for convenient quality information.

As an expert and consultant, you have the option to bill for your time and expertise for every call you accept. It is YOUR time, why not get paid?
The Full Stack Project - Prologue
Tags: hardware, firmware, software, devops
Published: 2021-11-16 20:16:23

### Intro
When most engineers hear the term 'full-stack' they think of an engineer who is able to not only design back-end APIs, manage databases, and architect complex server topologies; but also an engineer who can design elegant user interfaces, meaningful client interactions and build powerful tools driven by data. My definition is a little different in that I add an often overlooked layer - The Hardware ⚡ (along side the paired Firmware). It is a critical piece in making ANY 'stack' function. Being an Embedded Software engineer who often toes the line between the Software and Hardware/Firmware world, I want to start a project where I architect, design, and build every piece of the "stack" and document it all along the way. A couple pieces will have some very clear goals and challenges, others are just to have fun and see what I come up with. It may seem like I am re-inventing the wheel on a couple things, but that's the point. It's a learning exercise!

### The Plan
The high-level plan is this: 
- Create a custom PCB in KiCAD: Its purpose will be to remind you at a customized interval that you need to drink water 🌊(I desperately need to be reminded to hydrate).
- Write firmware for the custom PCB with the ability to be updated via a custom USB bootloader and interact with the User via touch and gestures.
- Write a cross-platform Desktop application using ElectronJS to update the the device via USB as well as pull and display your "stats" about your Drinking habits. Another function might be to upload the data to a backend database.
- Write a web app to show your individual stats and a leaderboard to watch and compete against friends on.
- Utilize Github CI/CD features for testing and releasing of all Firmware/Software pieces.

### Conclusion
These pieces will each take a decent bit of time to architect, build, test and document so please bear with me as the cadence of these posts will be erratic at best. Happy Hacking!
Github Actions: Build+Test in GitubVM, Deploy on Cloud
Tags: github, cloud, devops, npm
Published: 2021-11-16 20:07:28

An interesting new way to Build and Test in the Github environment before deploying is possible using Artifacts.  
It involves breaking up 2 jobs in your workflow yml.  
You will use the 

```
actions/upload-artifact@v2
actions/download-artifact@v2
```
as a means to pass the artifact between the jobs.
Here, I am using NodeJS as the build, so I all I need to move is the Dist folder without Markdown.

```
- name: Archive production artifacts
        uses: actions/upload-artifact@v2
        with:
          name: dist-without-markdown
          path: |
            dist
            !dist/**/*.md
```
You also need to remember to name the artifact in case there are multiple artifacts produced in the workflow.

Finished workflow is below.
```
name: CI

# Controls when the workflow will run
on: 
  push:
    branches: [prod]

jobs:
  build:
    runs-on: ubuntu-20.04      
    steps:
      ### new workflow artifact
      - name: Make envfile
        uses: SpicyPizza/create-envfile@v1
        with:
          envkey_DEBUG: false
          envkey_SECRET_KEY: ${{ secrets.ENV_FILE }}
          file_name: .env
      - name: Checkout respository
        uses: actions/checkout@v2
      - name: npm install, build and test
        run: |
          npm install
          npm run build
          npm test 

      - name: Archive production artifacts
        uses: actions/upload-artifact@v2
        with:
          name: dist-without-markdown
          path: |
            dist
            !dist/**/*.md
  deploy:
    #needs will wait for Build to finish
    needs: build
    runs-on: self-hosted 
    steps:
      - name: Runs code deploy
        uses: actions/checkout@v2
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
      - run: cd /path/to/deploy/
      - name: Make envfile
        uses: SpicyPizza/create-envfile@v1
        with:
          envkey_DEBUG: false
          envkey_SECRET_KEY: ${{ secrets.ENV_FILE }}
          file_name: .env

      - name: Archive production artifacts
        uses: actions/download-artifact@v2
        with:
          name: dist-without-markdown
          path: |
            /path/to/deploy/dist
      - run: npm ci
      - run: pm2 restart PROCESSNAME

```
00 Intro | Building 🚧 Dock-UI: Custom Tailwind CSS components for H010SPACE  
Tags: tailwindcss, css
Published: 2021-11-16 19:38:26

Every since I was introduced to [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework - I have wanted to build my own flavor of custom UI components with it. Even with so many wonderful UI component frameworks and libraries out there, some may have a few component styles I like, but none have all and only the components I like / find useful. 

So, I have decided to document building a complete set of my own custom components called Dock-UI.
Day 62/100 Asynchronous Programming
Tags: 100daysofcode, challenge, programming, motivation
Published: 2021-11-16 18:28:29

"Who can wait quietly while the mud settles?
Who can remain still until the moment of action?"

– Laozi, Tao Te Ching

![crows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j56q871uwogkzbac3zef.png)
Column selection: simultaneous multi-line editing with IntelliJ!
Tags: java, programming, beginners
Published: 2021-11-16 17:44:36

---
title: Column selection: simultaneous multi-line editing with IntelliJ!
published: true
description: IntelliJ can be insanely useful sometimes... 
series: IntelliJ Life Hacks
tags: java,programming,beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onwfyw57970drsygytnv.jpg
---

Did you know that [IntelliJ IDEA](https://www.jetbrains.com/idea/) can be used to edit _multiple_ lines at once with its [column selection](https://www.jetbrains.com/help/idea/2021.2/multicursor.html#column_selection) feature!?

And..it's really easy. Simply hold down Alt or Option, depending on which OS you use, and drag up- or downward.

You can see this in action in the following video:

{% youtube X8wwrXXgYQA %}

This can be handy in all kinds of situations from changing the access modifiers of multiple variables at once to adding bullet points in front of multiple lines of Markdown.

Happy IntelliJ-ing!