teleren/devto huggingface dataset:
Code Security - Pain or pleasure?
Tags: codequality, security, devops
Published: 2021-03-09 17:40:38

TLDR: Do you view code/software security as a pain point, or non-priority? What would make it interesting? 


Hi folks, 

I'm an ex-games artist, gone business manager and was recommended to come to Dev.to by a friend of mine to hopefully hear thoughts from developers around their challenges with code security.

I'm in application security currently, and I'm very keen to learn about how developers view this. Is it seen as a blocker in your company? Does it slow down your pace of development? 

I've seen and worked with a lot of companies who invest in automated solutions for flaw/vulnerability scanning, which is great and provides real value for the business, but I often hear feedback from dev teams that they just aren't empowered enough, or feel a great need to learn secure coding practices i.e. it's a security team / Ops problem. 

I'm interested to know if anyone has any feedback they wouldn't mind sharing about their experiences with scanning and fixing flaws/vulnerabilities in code, what are the roadblocks they face, and what would you like to see more of? 

Thanks! 
Ahmed
New to Azure AD?
Tags: azuread, microsoftlearn, azureactivedirectory
Published: 2021-04-07 11:26:12

---
title: New to Azure AD?
published: true
date: 2021-03-09 17:38:36 UTC
tags: azuread,microsoftlearn,azureactivedirectory
canonical_url: https://berviantoleo.medium.com/new-to-azure-ad-6b30aed966c4
---

#### You should look this!

We can learn more from Microsoft Learn! Microsoft Learn is free resources to learn most of technology aspects. We can learn about Azure AD, Git, Github, Data Science, Data Analyst, etc.

You can check from this resources about Azure AD:

[What are user accounts in Azure Active Directory? - Learn](https://docs.microsoft.com/en-us/learn/modules/create-users-and-groups-in-azure-active-directory/2-user-accounts-azure-ad)

Microsoft Learn Page

[Microsoft Learn](https://docs.microsoft.com/en-us/learn/)

![](https://cdn-images-1.medium.com/max/1024/1*I6WhDEYPOypaL4lXhT7D3A.png)<figcaption>My Microsoft Learn Page Dashboard</figcaption>

### Infographics

[https://www.instagram.com/p/CMNL0tLhT97/](https://www.instagram.com/p/CMNL0tLhT97/?utm_source=ig_web_copy_link)

![](https://cdn-images-1.medium.com/max/1024/1*35ft0HL78AFAb5i9lGGnhA.png)<figcaption>3 Users types at Azure AD</figcaption>

[https://www.instagram.com/p/CMNM6cmBErT](https://www.instagram.com/p/CMNM6cmBErT/?utm_source=ig_web_copy_link)/

![](https://cdn-images-1.medium.com/max/1024/1*iNxZzs20XJuu7bo2ZSDZag.png)<figcaption>Azure CLI Command to Create/Delete User</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*t5O7rQ4qBaUvszdyi2NmHg.png)<figcaption>Azure Powershell to Create/Delete User</figcaption>

### Congrats!

Happy Learning, everyone!

![](https://cdn-images-1.medium.com/max/1024/0*XOWdXT66k8euyMF2)<figcaption>Photo by <a href="https://unsplash.com/@artbyhybrid?utm_source=medium&amp;utm_medium=referral">Hybrid</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>
Let's create simple echo server with Vercel and TypeScript
Tags: tutorial, vercel, typescript, webdev
Published: 2021-03-09 17:23:01

[Vercel](https://vercel.com/) is a hosting service for web development. This also provides us some functions which are able to be used as a server.

This post is about how to deploy a simple echo server with TypeScript. The code is [here](https://github.com/ojisan-toybox/ts-vercel-server).

## Install required modules.

The libraries are typescript and @vercel/node.

```sh
npm i -D typescript @vercel/node
```

`@vercel/node` provides me typing to use typescript on vercel. Vercel functions endopoint require us some kind of rules. We must obey the rule and typings.

## Write functions

```ts
import { NowRequest, NowResponse } from "@vercel/node";

// request -> ?id={your_id}
export default async (req: NowRequest, res: NowResponse) => {
  const { query } = req;
  const { id } = query;
  res.json({ id });
};
```

req and res is typed by @vercel/node.

## Put the code to api/

If you put the code into `/api/`, vercel serve this as a serverless function endpoint.

The point is the directory is not `/pages/api/`. If you know NextJS, you know Next.js treats `/pages/api` as serverless functions endpoint. This endpoint is called "API Routes" as Next.js's term.

Sometimes "Vercel Serverless Functions" and "API Routes" are confused. Because those have the same feature but the usage is different.

Now we only use Vercel Serverless Function, so we just put this file to `/api/`

## Deploy

Push to GitHub and connect the repository to Vercel. After that, access "*.vercel.app/api/${function_name}?id=hoge", you will get response 'hoge'.
Import 3D models to three.js
Tags: javascript, webdev, tutorial, programming
Published: 2021-03-09 17:02:52

Original article with code snippets (recommended): https://gabriellazcano.com/blog/import-models-to-three-js/

I’ve found threejs pretty tricky at the current state of the library. They are always making improvements and breaking some applications with the new updates. So here, I"m going to talk about how I’ve found it’s good to structure your threejs application for importing 3D objects. Here is a working example.

https://gabriellazcano.com/blog/import-models-to-three-js/

The current version of threejs doesn't require any special tags in the HTML, only the `<script type="module">` tag where we are going to develop the logic of the program.

When using `type="module"` we can use the features of es5 such as `import` so we are going to use them. We have to import `threejs` and `GLTFLoader`. And any other component you use, such as `OrbitControls`. I'm going to define some variables gloablly as I'm assigning them afterwards in the `init()` function. You can extend on the configuration in this function [in the documentation](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)

For adjusting the size when changing resizing the window we have to add an event listener and to change both the aspect ratio and the size of the renderer.

Now we have to load the object and define the lighting for the scene.

To add a simple animation rotation to the model we have to add or substract to the rotation of the object in every animation frame, for example. However, there are much more ways of animating and with different purposes.
Ecommerce Magento SEO - Meta Keywords
Tags: ecommerce, magento, seo, online
Published: 2021-03-09 17:02:27

When it comes to carrying out SEO on Magento you need to ensure that you are not making use of meta keywords. 

Unfortunately, it still seems to be an option. 

This was a scenario with a recent site that I was working that sells Saunas Online:

https://www.aqualine.com

There is a field option that allows you to be able to transfer existing meta keywords for the site. 

This is an older aspect of SEO but there's a lot of studies out there now that prove that they are actually a negative experience. 

If you have any potential questions with regards to the use of meta keywords and the specific Magento program please get in touch and we will be more than happy to help you further.
Kubernetes CKAD Tips 6 – Configuring Kubectl context
Tags: kubernetes, ckad, devops
Published: 2021-03-09 16:51:48

Often time we work with multiple Kubernetes clusters and namespaces from a single console. Hence switching between the clusters and console is important. Let’s learn few **kubectl** command to do it switching.

{% youtube PkyKI_-nIMM %}

[https://youtu.be/PkyKI_-nIMM](https://youtu.be/PkyKI_-nIMM)

## Resources 

Subscribe to the Channel [TechTalks-Wriju](https://www.youtube.com/channel/UCUzFKvlZOm3ukAiF59B_HgQ)

The [Kubernetes and CKAD Playlist](https://www.youtube.com/playlist?list=PLPIVZsyfpXt-wyNY65-aC9Vm_PEsM3pR8)
Nevertheless, @stratospher Coded in 2021!
Tags: wecoded
Published: 2021-03-09 16:34:05

## My most recent achievement was…
It's really hard to pick 1 achievement - I've made so much progress these past few months and I'm really proud of every single one of them.
![164ad2ae90c98ac6619e6e46a79caa25](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqb5dxs4r747xc2akmnz.gif)
 
1. Deep Focus on getting better at coding - I've said no to a lot of stuff which occupied my time - managing clubs, conducting events etc.. It was a tough but obvious decision for me since I really want to get better at coding and creating software that people will love.
2. Tracking my #100DaysOfCode in #devjournal
3. Started my first Tech Internship! It's something I've been looking forward to for a long time. It's hard juggling the internship along with semester work especially during exam time. But I'm proud of pulling through and making programs I didn't know existed by myself.
4. Gave my first tech talk! It was a post coding-contest analysis. It was nerve racking for me and I was really scared if I'd mess it up. But it went perfectly and I was able to learn so much. Teaching someone is so much different than simply coding. I had to put in a lot of effort to figure out the most time efficient and space efficient solution.

## Advocating for myself looks like…
1. Not feeling bad for saying No to opportunities that don't align with your goals
2. Self-care. I feel relaxed and in control when I make time for working out or doing something else I enjoy no matter how pressurising a situation appears.
3. Being my own biggest cheerleader.

![tumblr_pjvvboqeUI1th206io1_640](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82p2lcrsnzau5ykqondz.gif)

## My biggest goal is…
I want to spend my life always building, learning and experimenting with new tech and spreading my love for tech to help people. I also want to be self sufficient and get a tech job that aligns with my goals.

![a1d40918c5a294224e9c01f4a3b6252f074771d9r1-370-300_hq](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgpsb0309nkcx59lk4uq.gif)
 
 
## My advice for allies to support underrepresented folks who code is...
Keep going! All of you are doing a wonderful job and are exactly where you have to be - creating and weaving a unique story that the world has never seen before. Keep doing your best and you'll eventually fall in love with your own beautiful story and you will be proud of it.

![9b7f60466bd32b009203a3cacec2de89](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jc7gq5s792pft66kwml.gif)

Until next time,
Bye!
@stratospher
CSS variable first chapter!
Tags: css, todayilearned, codenewbie, tutorial
Published: 2021-03-09 16:25:37

Hey, there coding people,

As you might know, I have started learning CSS variables from scrimba and this is my first post about CSS variables.

I this post you can see I have used CSS variable for this basic web page.

First of all, you have to initialize your CSS variable in the global scope which we can use anywhere in our entire project.

***Global scope***
```
:root
{
	--black-color: #000;
}
```

***use it like this***
```
.selector-name
{
	color: var(--black-color);
}
```

Check out this codepen for more understanding.

{% codepen https://codepen.io/atulcodex/pen/abBRBqm %}
JavaScript Snippet to dynamically adjust text color of HTML Selects
Tags: javascript, frontend, css, webdev
Published: 2021-03-09 16:12:41

If you use a HTML form with placeholder texts, you will notice that select dropdowns always have a darker font color than the placeholder texts of the input fields. With this simple JavaScript snippet you can dynamically color the select dropdowns on change so that they behave more like normal text fields.

## What does this pure JavaScript Code do?

```JavaScript
// Make sure your DOM is loaded
document.addEventListener("DOMContentLoaded",function(){
  
  // Find all select elements in the current DOM
  const selects = document.querySelectorAll('select');

  // Loop through all select elements
  selects.forEach((elem, i) => {
    // Add the class to make it look like a placeholder text
    elem.classList.add('text-muted');
    // Event listener to remove the class after selecting
    elem.addEventListener('change',function(e){
      // Remove the class to make it look normal (darker)
      elem.classList.remove('text-muted');
    });
  });
  
});
```

## Here's the working Example
{% codepen https://codepen.io/typo3freelancer/pen/rNWQxxd default-tab=result%}

## Using the same Code without extra CSS
Of course you can use the same JavaScript Code without an extra CSS Class. Simply look at the next example:

```JavaScript
// Make sure your DOM is loaded
document.addEventListener("DOMContentLoaded",function(){
  
  // Find all select elements in the current DOM
  const selects = document.querySelectorAll('select');

  // Loop through all select elements
  selects.forEach((elem, i) => {
    // Change the style attribute to lighten the text color
    elem.style.color = '#666';
    // Event listener to change the style of the element
    elem.addEventListener('change',function(e){
      // Change the style attribute to darken the text color
      elem.style.color = '#333';
    });
  });
  
});
```
## That was easy!
Do you like this little trick? Feel free to use it for your projects. Write me a comment if you have any suggestions for improvement or further ideas.
HTML Autocomplete sms code
Tags: html
Published: 2021-03-09 16:02:40

I'm sure you've seen these around, you have to enter an SMS code, and it pops up in the input field.

But did you know this is super easy to achieve in HTML?
Yes, HTML, no fancy JavaScript, nothing!

What I'm talking about looks like this:

![SMS autocomplete in HTML](https://cdn.hashnode.com/res/hashnode/image/upload/v1614841469854/LV7QqkChh.png)

## HTML Structure

For this to work we need a specific input element with some attributes:

```html
<input
  type="text"
  name="token"
  inputmode="numeric"
  pattern="[0-9]"
  autocomplete="one-time-code"
/>
```

As you can see, we render a numeric input to show the number keyboard on mobile devices.
But the proper magic is in the `autocomplete` field. The `one-time-code` is used to help the user.

> Note: The are multiple autocomplete values we can use: [Read more on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)

You can find the full HTML structure on the following Codepen.

{% codepen https://codepen.io/rebelchris/pen/YzpvboM %}

## Browser support

Unfortunately, this will only work in Safari and iOS at the moment.
The autocomplete, in general, has pretty good support.

![HTML autocomplete browser support](https://caniuse.bitsofco.de/image/input-autocomplete-onoff.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Aridade de uma função
Tags: braziliandevs, functional, elixir, aridade
Published: 2021-03-09 15:55:58

### O que significa Aridade de uma função (function arity)?

Na matemática a aridade de uma função representa o número de argumentos de uma função. 

Na programação não é diferente, a aridade também é representada pelo número de seus parâmetros posicionais.

Quando temos uma função com:

- Nenhum argumento, dizemos que ela possui aridade 0 e pode ser chamada de função **Nullary**.
- Quando temos apenas 1 argumento na função, dizemos que ela possui aridade 1 e pode ser chamada de função **Unary**.
- Quando temos apenas 2 argumentos na função, dizemos que ela possui aridade 2 e pode ser chamada de função **binary**.
- Quando temos apenas 3 argumentos na função, dizemos que ela possui aridade 3 e pode ser chamada de função **ternary**.
- Acima de 3 argumentos, passamos a chamar as funções de acordo com a quantidade-ary, por exemplo: 4-ary, 5-ary, 6-ary e assim por diante.

Em Elixir por exemplo:

```Elixir
defmodule Example do
  def say(), do: "Hey I am here!"
  def say(name), do: "Hey #{name}, I am here!"
  def say(first_name, last_name), do: "Hey #{first_name} #{last_name}, I am here!"
end

Example.say()
--> "Hey I am here!"
# Arity: say/0
# -------------------

Example.say("Diego")
--> "Hey Diego, I am here!"
# Arity: say/1
# -------------------

Example.say("Diego", "Novais")
--> "Hey Diego Novais, I am here!"
# Arity: say/2
```

A aridade pode ser representada da seguinte forma: **função/aridade**.

Como no exemplo do código acima:
- Temos a função inicialmente implementada com aridade 0, ou seja: ``say/0``;
- Depois com aridade 1, ou seja: ``say/1``;
- E em seguida com aridade 2, ou seja: ``say/2``.

### Conclusão
A aridade de uma função é o número de argumentos que uma função deve receber de acordo com sua implementação. Geralmente, é representada pelo nome da função / a sua aridade, como foi descrito no exemplo em Elixir.
7 Helpful GitHub Repositories for Developers
Tags: developer, github, repository, collection
Published: 2021-03-09 15:48:07

Hello, developer community! I would like to share these 7 GitHub repositories that will help you as a developer this 2021. Initially compiled by [@Prathkum](https://twitter.com/Prathkum/status/1369173960219373570) at his twitter thread. I added two more helpful repositories to make it 7. Let's get started!

## [Awesome Cheatsheets](https://github.com/LeCoupa/awesome-cheatsheets)

Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

## [33 JavaScript Concepts](https://github.com/leonardomso/33-js-concepts)

33 concepts every JavaScript developer should know.

## [Clean Code JavaScript](https://github.com/ryanmcdermott/clean-code-javascript)

Clean Code concepts adapted for JavaScript.

## [Design Resources For Developers](https://github.com/bradtraversy/design-resources-for-developers)

Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more.

## [Front-End Resources](https://github.com/RitikPatni/Front-End-Web-Development-Resources)

This repository contains content which will be helpful in your journey as a front-end Web Developer.

## [Free for Dev](https://github.com/ripienaar/free-for-dev)

A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev.

## [Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap)

Roadmap to becoming a web developer in 2021.

---

Don't forget to give these repositories a  stars each as they are doing a great job. They deserve it! If you find this post helpful please consider to [buy me some cups of coffees](https://buymeacoff.ee/warengonzaga) so I can continue posting more helpful contents related to software engineering and general technologies.

If you have suggestions or questions please don't hesitate to comment down below and I'll respond to you as soon as I can. Thanks!

---

Photo by cottonbro from Pexels
AI-powered visual regression testing with Applitools and GitHub Actions
Tags: github, devops, githubactions
Published: 2021-03-09 15:18:36

Applitools provides several SDKs that allow you to integrate them into your existing workflow easily. Using tools like Cypress, Espresso, Selenium, Appium, and a wide variety of others, web and native platforms can get automated visual testing coverage with the power of [Applitools Eyes](https://applitools.com/products-eyes/).

{% github https://github.com/colbyfayock/applitools-eyes-action %}

GitHub Actions allows you to automate, customize and execute your software development workflows inside your repository.

You can configure your workflows to run when specific activity on GitHub happens, at a scheduled time, or when an event outside of GitHub occurs.

With the [applitools-eyes-action](https://github.com/colbyfayock/applitools-eyes-action) you can identify visual changes at the time of PR using this in your workflows. This is beneficial for folks making visual changes to the UI and ensuring specific elements are not removed or broken. 

## Demo

Watch @colbyfayock explain how to instantly add AI-powered visual regression testing to your site with Applitools Eyes and GitHub Actions.

{% youtube -0Od82nOl1o %}

## Open Source Fridays

Come along to our Open Source Friday live streams. We go live on the [GitHub Twitch Channel](https://github.community/t/attended-making-twitch-bots-that-talk-to-the-github-api-let-s-chat/159453/2) most Fridays. Join the [Meetup Group](https://www.meetup.com/GitHub-Virtual-Meetup/) to stay up to date and see the topics each week.
How do electronic circuits (microprocessors / transistors) process binary?
Tags: explainlikeimfive, computerscience, todayilearned, beginners
Published: 2021-03-09 15:14:43

[This is a very good link](http://nandgame.com/) from this [StackExchange post](https://electronics.stackexchange.com/questions/458215/how-transistor-processes-binary?newreg=b1596f5771a045598362c387274e43e1)

<small>I find the question difficult to ask properly in first place; and it is unfair to give OP a -1; so I made it 0. Also, you can see that the accepted answer isn't the upvoted answer...</small>

But before I searched, [I asked this first on Quora](https://www.quora.com/How-does-binary-or-hexadecimal-translate-to-electric-circuitry).

After that, I am wondering how does it step up to

- Assembler languages / Assembly?
- C language?
- [Compiled to machine language specifics](https://qr.ae/pNLU85), like [Lisp](https://qr.ae/pNLU8I)?
How To Stay Motivated While Learning To Code
Tags: python, codenewbie, motivation
Published: 2021-03-09 15:04:55

Creativity flows with motivation and without it, everything is an uphill battle, in this video, we are going to explore the day to day hacks to remain motivated while you are learning to code.

Hope someone finds it useful, and if you do please subscribe for more like it.

{% youtube jhFZDQ-L-qM %}

Please subscribe on **YouTube** if you like this sort of content:
[How To Stay Motivated While Learning To Code](https://youtu.be/jhFZDQ-L-qM?sub_confirmation=1)
Cypress Studio Step by Step With Live example
Tags: cypress, cypressio, cypressstudio
Published: 2021-03-09 14:59:05


This Video covers the below steps. Also created a medium page with all steps see link below
1.About Cypress studio
2.Step by step explanation with examples
3.Demo with taking the example of below steps
     - How we can update the existing test case
     - How we can add a new test case
*** For Reference please follow **
VIDEO
https://www.youtube.com/watch?v=sGIU-x00tZQ

Blog https://kailash-pathak.medium.com/what-is-cypress-studio-aa27598d445a