teleren/devto huggingface dataset:
Discussion and Comment of the Week - v2
Tags: bestofdev
Published: 2022-04-28 22:06:12

**This weekly roundup highlights what we believe to be the most thoughtful and/or interesting discussion of the week. We're also be highlighting one particularly cool comment in each installment. 🙌**

The DEV Community is particularly special because of the kind and thoughtful discussions happening between community members. As such, we want to encourage folks to participate in discussions and reward those who are initiating or taking part in conversations across the community. After all, a community is made possible by the people interacting inside it.

## Discussion of the Week

For this week's discussion, I'd like to put the spotlight on @adrvnc's "[Open Discussion: What Tips Do You Have For Writing Clean Code?](https://dev.to/adrvnc/open-discussion-what-tips-do-you-have-for-writing-clean-code-1173)" as it spurred some really thoughtful and friendly debate between folks.

{% embed https://dev.to/adrvnc/open-discussion-what-tips-do-you-have-for-writing-clean-code-1173 %}

It's cool to hear differing opinions on what constitutes clean code and the different routes or rules folks follow when trying to craft clean code themselves.

Hopefully, there's a bit of helpful advice for everyone in this discussion. And hey, never too late to drop your thoughts if you have your own perspective on clean code to share!

## Comment of the Week

Comment of the week goes to @kspeakman for this brilliant and concise bit of advice to the prompt "[What misconceptions do early-career devs have about this work?](https://dev.to/ben/what-misconceptions-do-early-career-devs-have-about-this-work-147a)" that @ben kicked off:

{% embed https://dev.to/kspeakman/comment/1nm8n %}

I can imagine that early days it'd be easy to get hyper-focused on the technical bits and lose sight of the actual problem you're solving. I appreciated how Kasey crafted this explanation and spoke from personal experience, openly sharing that this is something that has tripped them up in the past. Always nice to hear advice that is empathetic and understanding, yet pointed and practical.

## What are your picks?

There's loads of great discussions and comments floating about in this community. I urge you all to share your favorite comment and/or discussion of the past week below in the comments. And if you're up for it, give the author an @mention — it'll probably make 'em feel good. 💚
Why Great Money Doesn’t Retain Great Devs w/ Stack Overflow, DataStax & Reprise
Tags: techtalks, devops, career, podcast
Published: 2022-04-28 21:11:51

*We want to make the Dev Interrupted podcast a vital, enjoyable part of your week.* ***Please take 2 minutes and answer our new [Listener Survey](https://www.surveymonkey.com/r/PRYRNC5).*** *It lets us know a bit about you, what you want from Dev Interrupted and what you want from podcasts in general!*

What do the teams at Stack Overflow, DataStax and Reprise have in common?

First, they’ve all built amazing organizations powered by amazing developers.

Second, they’ve managed to build and retain these amazing developers in an ultra-competitive hiring market.

Third, they all took time at our recent [INTERACT conference](https://www.youtube.com/watch?v=fybuOVYq-t4&list=PL0cH8n2pFJ3unB7WZeTpJ-uShGwmSGzcW) to discuss how they created engineering organizations that are productive, successful and - best of all - happy.

It’s a rare treat to have this many amazing minds on one live panel and we couldn’t be more excited to share their insights, wisdom and advice to the community at large - so get ready to hear from Ben Matthews, Director of Engineering at Stack Overflow, Shankar Ramaswamy, Head of Engineering at DataStax, and Jennie MacDougall, Director of Engineering at Reprise.

Quick note, if you notice a tiny fluctuation in the audio quality for each speaker, it’s because this was recorded live at INTERACT.

Enjoy!

{% spotify spotify:episode:48cx6WLstiNJoxF0YIC7QI %}

## Episode Highlights Include:
* (7:29) Three stages of communication
* (13:39) No dev works better when they are stressed or burned out
* (17:19) "Platformization" what it is and when to do it
* (24:05) Allowing engineers to test run a new job
* (37:09) Velocity is a data point, not the story
* (43:06) Building teams around people and product

***Starved for top-level software engineering content? Need some good tips on how to manage your team? This article is inspired by [Dev Interrupted](https://devinterrupted.com/podcasts/) - the go-to podcast for engineering leaders.***

*Dev Interrupted features expert guests from around the world to explore strategy and day-to-day topics ranging from dev team metrics to accelerating delivery. With new guests every week from Google to small startups, the Dev Interrupted Podcast is a fresh look at the world of software engineering and engineering management.*

[***Listen and subscribe on your streaming service of choice today.***](https://devinterrupted.com/podcasts/)

![https://devinterrupted.com/podcasts/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl8yy3hpnevlyboet97b.png)
Creating AD users' extension properties
Tags: custom, attribute, extension, property
Published: 2022-04-28 21:10:20

---
title: Creating AD users' extension properties
published: true
description: Creating AD users' extension properties
tags: 'custom, attribute, extension, property'
cover_image: 'https://raw.githubusercontent.com/campelo/documentation/master/posts/azure/assets/cover.png'
canonical_url: null
id: 1070243
---

###### :postbox: Contact :brazil: :us: :fr:

[Twitter](https://twitter.com/campelo87)
[LinkedIn](https://www.linkedin.com/in/flavio-campelo/?locale=en_US)

---

# Creating AD users' extension properties 

## Required permission

You need to allow this permission for on your app registration page.

- Application.ReadWrite.All

## Creating extension property

You have to get your application's ObjectId from the overview's page

![Image 1](https://raw.githubusercontent.com/campelo/documentation/master/posts/azure/creating-user-extension-attributes/assets/img1.png)

Then you can make a POST request to this url to create a new extension property.

```
https://graph.microsoft.com/v1.0/applications/{APPLICATION_OBJECT_ID}/extensionProperties
```

```json
{
    "name": "testString",
    "dataType": "String",
    "targetObjects": [
        "User"
    ]
}
```

Your response should look like this

```json
{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#applications({APPLICATION_OBJECT_ID})/extensionProperties/$entity",
    "id": "fa613ce9-164b-40ca-bf68-276195a1888c",
    "deletedDateTime": null,
    "appDisplayName": "My Application Name",
    "dataType": "String",
    "isSyncedFromOnPremises": false,
    "name": "extension_{APPLICATION_ID}_testString",
    "targetObjects": [
        "User"
    ]
}
```

## Updating an AD user

Now, you can make a PATCH request to user's endpoint.

```
https://graph.microsoft.com/v1.0/users/{USER_ID}
```

with this content 

```json
{
    "extension_{APPLICATION_ID}_testString": "my test string"
}
```

## Getting new extention from user

You can get the new information from users

```
https://graph.microsoft.com/v1.0/users?$select=displayName,extension_{APPLICATION_ID}_testString
```

Response

```json
{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#users(displayName,extension_{APPLICATION_ID}_testString)",
    "value": [
        {
            "displayName": "Bill Musk",
            "extension_{APPLICATION_ID}_testString": "my test string"
        }
    ]
}
```

## Source
- [Create extensionProperty](https://docs.microsoft.com/en-us/graph/api/application-post-extensionproperty)

## Typos or suggestions?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. If you feel comfortable with github, instead of posting a comment, please go directly to https://github.com/campelo/documentation and open a new pull request with your changes.
React Tricks Miniseries 3: How to setup Routes
Tags: react, routes, theeasydev, webdev
Published: 2022-04-28 21:07:15

# React Routes
React (relatively) recently shipped a new version of react-router-dom, V6. This means using routes has completely changed. If you have tried implementing routes in your react app with the V6, you must have run into this issue.

Here's how we can use routes in the new V6 version.

# The old routing
With V5 of react router dom, we instantiated routes by having a Router component and inside it we insert the Switch component and nesting inside our routes like so:

```javascript
<Router>
  <Switch>
    <Route path="/">
      <Homepage />
    </Route>
    <Route path="/about-us">
      <AboutUs />
    </Route>
  </Switch>
</Router>
```

That all changes in V6. In my opinion it's actually enhanced and more intuitive.

Now there is a complex and sophisticated system of rending subroutes and matching exact Vs no exact routes, But i won't get into that. You can read and get familiar with these features here:
[react-router-dom-v6-docs](https://reactrouter.com/docs/en/v6/getting-started/overview)

The changes are like the following:

```javascript
<Router>
  <Routes>
    <Route index element={<Homepage />} />
    <Route path="about" element={<AboutUs />} />
  </Routes>
</Router>
```

The first main change is the home page component accepts a prop called index instead of a path prop. 
The second change is that we pass our component inside the element prop.
The third main change is that there is no more "exact" prop. This is because by default all routes are exact, meaning they match only the exact path. To make a global match we can use asterisks like so

```javascript
<Route path="/services/*" element={<OtherServices />} />
```
Here OtherServices is a component that will render when the path matches "services/any-url"

# Conclusion

Implementing routes in V6 is more intuitive and allows more control using asterisks and makes for cleaner code.

What do you think of this version?
Renaming a folder on the GitHub website
Tags: github, git, rename, clone
Published: 2022-04-28 20:48:10

---
title: Renaming a folder on the GitHub website
published: true
description: Sometimes when you're working with the GitHub UI, you need to rename a folder before cloning it to your computer. Here's how!
tags: github, git, rename, clone
cover_image: https://images.unsplash.com/photo-1583521214690-73421a1829a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80
canonical_url: https://cassidoo.co/post/rename-github-folder
---

I ran into an issue recently where I had started a git repository while working on my Mac, and made a folder with a question mark (?) in it.

That is a valid folder name on Mac, but not on Windows, so when I tried to clone the repository onto my WIndows PC later, the clone kept failing because of the folder name!

```bash
error: invalid path '<funky file name here>'
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry with 'git restore --source=HEAD :/'
```

So, I had to figure out a solution to rename my folder from the GitHub website, from my PC. It's not as intuitive as renaming a file, but I found a couple very easy options!

## Edit it from the filename editor

Did you know you can add and delete folders from the filename editor itself on GitHub? I didn't, but there's [a nice blog post on the subject from 2013](https://github.blog/2013-03-15-moving-and-renaming-files-on-github/) here.

![Editing a file name and folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yvpwwo59ffedzni0xjj.gif)

So, in my case, I could go into a file inside the folder in question, hit the button to edit the file, and then update the folder name using this method.

## Change the name using the GitHub web-based editor

When you're in any GitHub repository, you can hit the period (`.`) key and it will open the GitHub web editor! You can also do this by changing `github.com` to `github.dev` in the URL.

When you do that, a VSCode-like editor will open, allowing you to edit folders and files to your heart's content! In my particular case, I was able to edit my folder in the web editor, then use the git extension in the editor to commit the change with one click.

## It's done!

Now I can clone my no-longer-weirdly-named folder onto my Windows PC with no issues! Yee haw!
Tips for Staying Productive as a Web Developer
Tags: webdev, programming, beginners, productivity
Published: 2022-04-28 20:43:55

So you want to be a productive web developer? **Here are 10 tips to get you started:**

**1. Get organized**

One of the best ways to boost your productivity is to get organized. This means having a clear understanding of what needs to be done and how you are going to do it. This will save you time and frustration in the long run.

**2. Use the right tools**

Another way to boost your productivity is to use the right tools. There are a variety of tools available to help you with your work. Make sure you find the ones that work best for you and your workflow.

**3. Set realistic goals**

It is important to set realistic goals for yourself. If you set goals that are too high, you will only end up feeling frustrated. However, if you set goals that are achievable, you will be more likely to stay motivated and on track.

**4. Take breaks**

Make sure you take breaks throughout the day. This will help you refresh and recharge so you can be more productive when you return to work.

**5. Eliminate distractions**

One of the biggest productivity killers is distractions. Make sure you eliminate anything that takes away from your work. This includes things like social media, email, and even conversations with co-workers.

**6. Stay focused**

It is important to stay focused on your work. This means avoiding things like multitasking. When you focus on one task, you are more likely to get it done quickly and efficiently.

**7. Set a schedule**

One way to boost your productivity is to set a schedule. This will help you make sure you are using your time wisely.

**8. Take advantage of technology**

There are a variety of tools and apps available that can help you boost your productivity. Make sure you are taking advantage of these tools.

**9. Delegate tasks**

If you find yourself with too much work, delegate some of the tasks to others. This will help you focus on the most important tasks and get them done more quickly.

**10. Reward yourself**

Finally, make sure you reward yourself for a job well done. This will help you stay motivated and focused on your work.
Day 28-- #100days
Tags: beginners, theodinproject, webdev, css
Published: 2022-04-28 20:09:01

Day 28, almost a month now since I started my web dev journey all over again. I must confess, its been challenging and amazing. My focus is on the "The Odin Project" curriculum. 
So far, so good.............
As part of the CSS modules, I had to build an Admin dashboard project like this: https://cdn.statically.io/gh/TheOdinProject/curriculum/main/html_css/grid-lessons/project-dashboard/dashboard-project.png

I tried my best, not not good enough though, but its an honest code and I admire myself so how far I've come.
This is what I have now, maybe I'll do the project all over again later.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv751nob5wt2erbxumc7.png)
Getting to know Docker and its Power
Published: 2022-04-28 19:19:04

**Why Docker is Powerful**
Docker is a platform for building, running, and shipping applications. We can easily package up our applications with all the files they need to run on any Operating System. Docker uses containers. In this isolated environment, Docker can use many versions of node at the same time. If an application uses Node 14 and another application uses Node 9, both of these applications will run on the same machine at the same time because of Docker's containers. Another powerful aspect of a Docker container is that they don't take up much memory on your hard drive.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la7gwx5kf0mrfz1nue47.png) src: https://jfrog.com/knowledge-base/the-basics-a-beginners-guide-to-docker/

**Getting Started with Docker**
Download Docker for your specific Operating System at [Docker Docs](https://docs.docker.com/get-docker/)
For Windows, you may get an installation incomplete message stating your Linux kernel needs to be updated. Follow the link in the error message and go down to step 4 to download the latest Linux kernel on your machine.

To get familiar with how Docker works go to [Labs - Play with Docker](https://labs.play-with-docker.com/) and follow the steps [here](https://github.com/heyMP/ist402-docker/tree/master/labs/5-nodejs-todo-app)

- In the session, click on Add New Instance to get started.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvmqlyot9wxsnccpffne.PNG)

- Clone the repository in and use the ls -la command to verify the contents of the folder.

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

- Establish the Container. In the CLI type 'docker build -t todoapp .' to build an image for the application. The (.) after the command tells the system the Dockerfile can be found in the current directory. The -t is to tag the image with a descriptive name.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq35kq199jrth32unj6x.PNG)

- List your images. Type 'docker images' in the CLI to see the new todoapp image.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dzqzpsw9rnz5vtkq6tl.PNG)

- Run the Container. Now that the image is established, use the command 'docker run -d -p 3000:3000 todoapp' to run the new container based on the new image.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk4hc8b2toixf4shb9pt.PNG)

- Now that you have containerized your application, you are able to create multiple todoapps.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brp0bvw8lhdensmtn958.PNG)

- That wraps it up for setting up with Docker

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd73b2ongbez1ukb17o0.PNG)
Find out 8 new chakraUI components that I built
Tags: react, webdev, showdev, chakraui
Published: 2022-04-28 18:59:42


Hi folks,
I added 8 new components to [TemplatesKart](https://templateskart.com) website. So I want to share them with you. Please check these components and let me know about your suggestions if you have any.

Here are the components list
1. [Cards](https://templateskart.com/components/cards)
  * Product card
  * Exclusive offer
2. [Blog](https://templateskart.com/components/blog)
  * With transparent background
  * Blog list with tag
3. [Forms](https://templateskart.com/components/forms)
  * Magic link
4. [Testimonials](https://templateskart.com/components/testimonials)
  * With Large image
  * Card with avatar
  * Card with avatar 2

## Some Screenshots

*Magic link*
![Magic link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxe7ofvmnt2r1s247oet.png)

*Blog card*
![Blog card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldsyeoa9ila2ayd38kvs.png)

*Testimonial card*
![Testimonial card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcm38hv614vmbpbcpulf.png)

*Product card*
![Product card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlqn8so08xoount1an0b.png)

## Links
**Website**: [TemplatesKart](https://templateskart.com)
**Github Repo**: [TemplatesKart Code](https://github.com/MA-Ahmad/templateskart)
Best Practices for Securing Your Vulnerable REST APIs
Tags: security, api, programming
Published: 2022-04-28 18:58:33

Why API security is a common problem. Most web and mobile apps are security tested at some point but APIs hardly get any attention. This means you may have vulnerabilities in your production APIs.

For example, let’s say you have a fintech application. It does things like accounts, transfers, etc. It has mobile/web UIs for performing these operations. You might have tested all the UI paths are only accessible to an authenticated user. Sometimes API endpoint like the one below is left unsecured because without realization and any hacker/bot can pick it up and continuously get a feed of recent transactions out of your system. The only way to fix these kinds of flaws is to detect them before they’re exploited.

Example endpoint with the flaw:
GET: /transactions - Any bot can access it without authentication because it has a broken authentication flaw.

One easy way to detect an OWASP API2 vulnerability or security flaw in your APIs is to use open-source tools like Burp and [EthicalCheck](https://apisec-inc.github.io/pentest/). Using these tools is very simple. All you need is your OpenAPI Specification/Swagger URL and get an instant report.
Short-circuiting of logical operators and their return values
Tags: javascript, webdev, beginners
Published: 2022-04-28 16:58:27

Im sharing my visual thinking and notes from the first chapter of Eloquent JavaScript going through the short-circuiting of logical operators `||` and `&&`. This can be useful when thinking about a value you want to return conditionally and logically

![short-circuiting of logical operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpt1zecjtdxtm9hvnn5h.png)

“Another important property of these two operators (`||` and `&&`) is that **the part to their right is evaluated only when necessary**. In the case of `true || X`, no matter what `X` is—even if it’s a piece of program that does something terrible—the result will be `true`, and `X` is never evaluated. The same goes for `false && X`, which is `false` and will ignore `X`. This is called **short-circuit evaluation.**”

### Two-bullet summary of this is:
- When using `||`, we are looking for a **true left** side to return it otherwise we return the right side
- When using `&&`, we are looking for a **false left** to return it otherwise we return the right side.