teleren/devto huggingface dataset:
Manage your Visio shapes with Git
Tags: visio
Published: 2021-01-24 14:10:39

In this post I will share a simple trick I have used for many years to keep my favorite Visio shapes always fresh.  
Visio is my go-to tool for architecture diagrams, whether I'm designing something new or documenting something that already exists. I work a lot with Azure, so I like my diagrams with nice, colorful icons of the Azure services I use.  
To my knowledge Microsoft does not provide an up-to-date source for Azure icons, ready to use in Visio.

Fortunately, there are great people on the Internet who provide unofficial but great, up-to-date Visio packages.  
Here are the one I use:
- [Sandro Pereira's Microsoft Integration and Azure Stencil Pack](https://github.com/sandroasp/Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio): the most complete pack, with shapes for all Azure services and much more: devices, frameworks, people, all you need to represent your architecture, the people and the systems around it
- [Azure Kid Azure Stencils](https://github.com/azurekid/Azure-Stencils): less complete than Sandro's pack, but more focus on Azure stuff, so you'll find the icon you're looking for easier with this one. Carefull, the repo is also less active.
- [David Summers' Azure Design](https://github.com/David-Summers/Azure-Design): another great pack, very complete, and the one use the most lately. What I like with this pack is that the connection point are already present on the shapes, so I don't have to add them manually. I'm not a fan of the shadows and the font, so I always change it with my personal settings though

To use this icon sources, I have cloned all the github repos in the `My Shapes` folder on my laptop:
![My Shapes folder](https://dev-to-uploads.s3.amazonaws.com/i/ay22twrl0yq48masw4ef.png)

So that all the icons are easily accessible in the *Shapes* panel, under the *More Shapes > My Shapes* menu:
![My Shapes menu](https://dev-to-uploads.s3.amazonaws.com/i/2c5dhpgl6ln1vks1fblm.png)

To keep them up-to-date, I simple go into each folder with my terminal and do a git pull.  
:warning: Keep in mind that Visio must be closed before doing this.
```console
~\Documents\My Shapes\Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio
❯ git pull
remote: Enumerating objects: 9, done.
remote: Counting objects: 100% (9/9), done.
remote: Compressing objects: 100% (7/7), done.
remote: Total 9 (delta 2), reused 6 (delta 2), pack-reused 0
Unpacking objects: 100% (9/9), 3.34 KiB | 27.00 KiB/s, done.
From https://github.com/sandroasp/Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio
   468ca4c..42e806b  master     -> origin/master
Updating 468ca4c..42e806b
Fast-forward
 ...isational Stencils.vssx => Organizational Stencils.vssx} | Bin
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename Others/{Organisational Stencils.vssx => Organizational Stencils.vssx} (100%)
~\Documents\My Shapes\Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio
❯ 
```

And that's it, great resources, a simple git pull, for always fresh Azure icons in my Visio diagrams !
Running sonarqube to check javascript code(part 2)
Tags: javascript, sonarqube, codequality
Published: 2021-01-24 13:51:03

Once SonarQube is running at port 9000, we are done with the sonarqube server setup.

Next we'll be creating a project and generating a token.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uzqqnp76vu261rg3tfd3.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ebof4uv9tx9cdznk4qgc.png)

Once you click on setup while you give a project name as new-project. Next you need to generate a token.
You can either generate a new token or use existing.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lzajpkqf78941squg3o5.png)
The token is used to identify you when an analysis is performed.

Select the build technology and OS.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/410rnls0lvbg2v06nc07.png)


In order to run analysis on your project, you will need to download sonar-scanner
http://localhost:9000/documentation/analysis/scan/sonarscanner/

Now move to the project folder(terminal) where you want to run analysis like:

__cd myprojects/first__
 Get the path of sonar-scanner from where you have downloaded and unzipped sonar-scanner, mine was __/Users/shivani/Downloads/sonar-scanner-4.5.0.2216-macosx/bin/sonar-scanner__

while you are on your project where you want to run the analysis(in my case it is first) just run command
__/Users/shivani/Downloads/sonar-scanner-4.5.0.2216-macosx/bin/sonar-scanner  -Dsonar.projectKey=new-project \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=785b95e8e1b80ea398f7a7b00983985feda59255__

the arguments we have passed you can get when you have created generated a token....
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/410rnls0lvbg2v06nc07.png)

Once execution is successful, you will see 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f1y31suvr81bxj2elfvg.png)

And we are done with the sonarqube setup.
Firebase authentication with a third-party 0Auth provider
Tags: firebase, 0auth
Published: 2021-01-24 13:45:56

If you are using Firebase but want to log in users with providers other than the list of providers that Firebase supports, you can use the custom token mechanism to do so.

For example, lets say that you want to login users with Discord but Firebase does not support Discord as a provider directly, then you can use this mechanism to log users in with Firebase

> You will need to use a server environment like Node.js or Firebase functions since the Firebase admin SDK only works on server environments

**Step 0 - Integrate the Firebase admin SDK with whatever env you are using**

I am leaving this upto you as there are a lot of ways to do this

**Step 1 - Find or Create the user**

On the callback of the 0Auth, you will probably get the email that the user used to sign in with. Use that to find if its a new or existing user.

Then if the user does not already exists, create a new user

```javascript
let userRecord = await firebaseAdmin.auth().getUserByEmail(email)

if(!userRecord){
    const userRecord = await firebaseAdmin.auth().createUser({
        email: email,
        emailVerified: true,
        disabled: false,
    });
}
```

**Step 2 - Generate the token**

Now that you have the required user object, use that to generate a custom token

```javascript
const customToken = await firebaseAdmin.auth()
    .createCustomToken(userRecord.uid);
```

Return this custom token to the client

**Step 3 - Login on the client**

Use the custom token received from the server to log the user in on the client

```javascript
await firebase.auth().signInWithCustomToken(customToken);
```
What is the best routine for a Dev?
Tags: productivity, discuss, watercooler, programming
Published: 2021-01-24 13:41:26

As a Dev, we often have to follow strict deadlines, meet the expectations of our clients or bosses & make time for our personal projects or leisure.

None of these would be possible if we cant follow along with our daily routine which makes us comfortable and provide us with the flexibility to help stretch our horizons to do more.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p86ifdqyx3leenc84gif.gif)

### My Routine

---

**Here's my routine:**

- **6:30 AM:** Wake up
- **7 AM:** Hit Gym
- **9 AM:** Start Coding :D
- **12 PM:** Lunch (I usually like to skip breakfasts as it helps me with Ketosis)
- **3 PM:** Nap
- **4 PM:** Anime
- **6 PM:** Go out with friends
- **8 PM:** Back to work
- **10 PM:** Dinner
- **11 PM:** Time for bed

### Discuss

---

Now it's your turn to share your routine.

Feel free to discuss the routine which makes you feel most productive in the discussions/comments.
Introduce Chaos Platform 2.0 for Azure
Tags: azure, devops, resilience, sre
Published: 2021-01-24 13:26:37

You develop systems? You operate them on Microsoft Azure? Then this post is for you.

Offering highly available systems means building resilient systems. Architecting your system to expect failure is a core approach nowadays. Chaos engineering embraces the uncertainty and aims at anticipate rare, unpredictable, and disruptive outcomes, so that you can minimize any potential impact on your customers.

The **good**: you can improve resiliency. Be proactive and embrace failure. Harden your system by breaking it. Do small steps and minimize your blast radius. A bunch of chaos engineering tools will assist you.

The **bad**: most of the tools require a new learning curve, another portal to log in or installing some black box agents on your virtual machine.

As the existing tooling was too complex for us, we decided to build our own easy-to-use Chaos Platform that focuses on and fully integrates itself into Azure and Azure DevOps.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uzgv873u8fmrvrxjgqey.png)

* No need for a new learning curve - the **Chaos Platform GUI** is easy to use.
* **Automatize your resilience** with the well-known Azure pipeline tasks - we built it for you
* **Agentless approach** - we fully exploit the potential of the Azure API
* **Safely minimize your blast radius** with application level attacks, rather than blowing your virtual machine.
* Build **trust incrementally**. Run Azure resource attacks, when you established a fundamental confidence on your system.

Enjoy to turn failures into resilience with Proofdock Chaos Platform. Check out [the full article](https://medium.com/proofdock/introducing-chaos-platform-2-0-for-azure-f8df0eceb340) or jump directly into [Chaos Platform in the Azure DevOps Marketplace](https://marketplace.visualstudio.com/items?itemName=proofdock.chaos-platform).

We are happy to get feedback from you. We are Proofdock and enthusiastic about fresh ideas and feedback to improve ourselves.

****
Cover image is provided by [Brett Jordan](https://unsplash.com/@brett_jordan) on [Unsplash](https://unsplash.com/)
Netflix Clone
Tags: react, opensource, css, javascript
Published: 2021-01-24 13:24:50

A netflix clone using <strong>react firebase and js</strong>. I learnt a lot fom this project
It is hosed on firebase you can see it on [https://netflix-clone-81604.web.app/](https://netflix-clone-81604.web.app/)

##### The Source Code is on github 
https://github.com/Sadman-Sakib2234/netflix-clone
Actual route and UX with Twig
Tags: symfony, twig
Published: 2021-01-24 13:23:49

How to design current route in our link's navbar with TWIG ? This is exactly what we are going to see 😀

## Our navbar and routes

Let's say we have a blog which display pictures and videos. Our navbar would have 4 links :
* Home 
* Pictures
* Vidéos
* Contact

About the routes, we just want the giving name, so :
* Home => "app_home"
* Pictures => "app_picture"
* Vidéos => "app_video"
* Contact => "app_contact"

Right, we have all the information, now have a look on our twig template :

```twig
<nav>
 <ul>
   <li>
     <a href="{{ path('app_home') }}">Home</a>
   </li>
   <li>
     <a href="{{ path('app_picture') }}">Pictures</a>
   </li>
   <li>
     <a href="{{ path('app_video') }}">Videos</a>
   </li>
   <li>
     <a href="{{ path('app_contact') }}">Contact</a>
   </li>
 </ul>
<nav>
```
Here if we click on a link, we would be redirect to the route but nothing (except the URL) will indicate us that we are on the right route. So let's do some UX.

## Twig function

We are going to right a function in twig. We need to install a package :
`composer require twig/extensions`

Name it as you want and go in the file. Erase all about the filter (except if you want to go further and try some) and go in the public function getFunctions.
Here we are going to create a function for twig named "actual_route" from the current fuction 'getActualRoute'
```php
    public function getFunctions(): array
    {
        return [
            new TwigFunction('actual_route', [$this, 'getActualRoute']),
        ];
    }
```
The getActualRoute will take 2 strings parameters and return active if the current route is equal to the actual : 
```php
    public function getActualRoute(string $value, string $route): string
    {
        return $value === $route ? 'active' : '';
    }
```
## Back in the navBar

Last step, we are going to modify our template. We want to put an 'active' class to the current route. First let set a route's variable which are going to contain the name of the actual route. In your twig try to dump this : `app.request.attributes.get('_route')`. As you can see, you've got the actual route in string. Now let's do it :

```twig
{% set route = app.request.attributes.get('_route') %}

<nav>
 <ul>
   <li>
     <a href="{{ path('app_home') }}">Home</a>
   </li>
   <li>
     <a href="{{ path('app_picture') }}">Pictures</a>
   </li>
   <li>
     <a href="{{ path('app_video') }}">Videos</a>
   </li>
   <li>
     <a href="{{ path('app_contact') }}">Contact</a>
   </li>
 </ul>
<nav>
```
Then for each link write a class, with our function :
`<a href="{{ path('app_home') }}" class="{{ actual_route('app_home',route) }}">Home</a>`

So it means, if the 'app_home' === route ( what we just set) then, it will be an active class.
Just try it and inspect your element. Now you just need to write some CSS to customize this. For example with SCSS :
```SCSS
a{
 color: black;
 transition:0.3s ease-in-out;
 &.active{
  color:red;
 }
}
```

## Conclusion

I hope it helped you and if you have any questions or improvements, just write it 😊

Cheers !
How to customize Terminal
Tags: terminal, zsh, git, command
Published: 2021-01-24 13:23:47

# Introduction
Hi, I'm JavaScript/TypeScript Developer from Japan.
I like Vue.js, React.js etc...

I'd like to share my Terminal setup.
![Ese1MIlUUAMXMs-](https://dev-to-uploads.s3.amazonaws.com/i/x99quuuhdj43vny2jhsk.jpeg)

# Install iTerm2
Download here.
https://iterm2.com

# Change appearance
### Install oh-my-zsh
oh-my-zsh is a setting framework for zsh.

```
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
```

### Use Powerlevel 10k
Powerlevel 10k is a pulgin about appearance.

```
git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k
```

Open .zshrc.

```
open ~/.zshrc
```

And edit it like this.

```
ZSH_THEME="powerlevel10k/powerlevel10k"
```

### Install font

Download here.
[https://github.com/powerline/fonts/blob/master/SourceCodePro/Source%20Code%20Pro%20for%20Powerline.otf](https://github.com/powerline/fonts/blob/master/SourceCodePro/Source%20Code%20Pro%20for%20Powerline.otf)

And clone.

```
git clone https://github.com/powerline/fonts.git --depth=1
```

Next, install it.

```
cd fonts
```

```
./install.sh
```

```
cd ..
```

```
rm -rf fonts
```

# Set up Terminal
Move to iTerm2, and open Preferences→Profiles→text.
Change Font to Source Code Pro for Powerline.
![_2021-01-24_19.30.58](https://dev-to-uploads.s3.amazonaws.com/i/7yifyvqeb5coi95b7hlb.png)

Open Preferences→Profiles→color.
I chose Solarized Dark.
![_2021-01-24_19.30.58](https://dev-to-uploads.s3.amazonaws.com/i/uam29mjxsw9j3emamv0h.png)
Done!

# Show predictive completion of commands
Install zsh-autosuggestions.
[https://github.com/zsh-users/zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions)

At first, clone it.

```
git clone [https://github.com/zsh-users/zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions) $ZSH_CUSTOM/plugins/zsh-autosuggestions
```

Next, edit .zshrc and append zsh-autosuggestions.

```
plugins=(
	git
	zsh-autosuggestions
)
```

Update your setting.

```
source ~/.zshrc
```

# Set up alias
Open .zprofile and append an alias.

```
alias g='git'
```

You can enter "g" instead of "git".

```
g push
```

Next, set the frequently used git command as an alias.
Open .gitconfig and append an alias.

```
[alias]
	co = checkout
	ps = push
	st = status
 	br = branch
```

For example, you can enter "g ps" instead of "g push".

```
g ps
```

# Conclusion
For reference, I have published my .gitconfig file.
So please copy and use it.
[https://github.com/n199603/dotfiles-public](https://github.com/n199603/dotfiles-public)


And please follow me on Twitter.
If you have a project, please contact me on Twitter.
https://twitter.com/n199603


That's how to customize terminal. 
Thank you for watching.
Daily Developer Jokes - Sunday, Jan 24, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-01-24 13:00:26

---
title: "Daily Developer Jokes - Sunday, Jan 24, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jan%2024%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259582acfe.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the developer have to quit smoking?

___A:___ Because they couldn't afford to pay the new syntax.
 -->
About bilingual writers in DEV
Tags: meta, discuss
Published: 2021-01-24 12:49:06

Hello, DEV community. I'd like to know your opinion on users that publish in two different languages, because, for several reasons irrelevant to this post, I want to start translating my own posts to my native language (Spanish), while keeping the versions in English.

At first I wanted to do it in a Spanish-speaking community, but unfortunately, I didn't found any in which I felt as comfortable as here. Also, from the comments on the following post, I discovered that there is already Spanish speakers publishing in DEV, using the #spanish tag.

{% post fblind/hay-alguna-forma-de-identificar-contenido-en-espanol-4g94 %}

However, doing this will mean that:
- Non spanish speakers that follow me will have posts in their feed in a language they don't understand.
- The posts on my profile will be mixed.

I know that none of this is really a big deal, but it is something I'd like to avoid as much as possible.

Therefore, I would like to kindly suggest a function to specify the language of a post, the possibility to filter posts by language and the possibility to do it in a user profile.

Until then, I would like to know what are your thoughts about this. I just skip posts in another language, but because they don't appear in my own notifications, from people I follow. Do you mind posts on your feed in other languages? Would you like to see a language filter in DEV? Or is it not worth it?
I made a Hacker News reader using Next.js
Tags: showdev, react, nextjs
Published: 2021-01-24 12:48:05

![Demo GIF](https://dev-to-uploads.s3.amazonaws.com/i/b85ozymhlgkcen8zft5m.gif)

I want to start the year by making a simple project to add to my portfolio. Last year I found myself browsing Hacker News more than Reddit and I thought why not make my own reader using [Hacker News API](https://github.com/HackerNews/API)?

## View it here
- [Website (hn.jeffjadulco.com)](hn.jeffjadulco.com)
- [Source code (https://github.com/jeffjadulco/hn)](https://github.com/jeffjadulco/hn)

## Things to note
Next.js has this feature [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) since version 9.5. It basically lets you update and re-generate your page without causing user-facing loading or hiccups. 

It is perfect for this project since HN's top posts aren't updated frequently. So, I can cache a static page and only update it on a configurable frequency (in seconds) that I can configure.
Which Django Version Should I Use?
Tags: python, django, version
Published: 2021-01-23 20:07:19

Django is a big and popular web framework for Python to help you build a web app. Which Django version should you use?

> If you're starting a Django web app, **use the latest version of Django available**.

Why listen to me? I'm a software developer with over 7 years of professional Django experience. I work at companies that use Django successfully at the core of their business.

I'll explain why you should use the latest.

## Why?

If you're asking yourself which version to use, there are a probably a couple of reasons.

1. You've found learning resources online     that mention different versions     of Django.
2. The [Django project download page](https://www.djangoproject.com/download/)     has a overwhelming amount     of information     about different versions.

So, here's the core reason why you should use the latest version:

> Django is a very mature web framework (first released in 2005) that is extremely stable.

What does that stability provide for you?

* **Modern versions of Django are released at very regular intervals**. This interval is not too fast. Unlike like some other libraries out there, upgrading is not an exhausting treadmill of change.
* **New versions of Django have very few barriers when updating**. This is the benefit you get from a mature and stable project. Any required changes between versions are extremely well documented in each version's release page.

All this means that you get to spend less time focusing on your web framework tool choice and more time focusing on your web app.

Django also has Long Term Support (LTS) versions. I don't think that the average developer or company should use them. If you upgrade from an older LTS to a newer LTS, there are going to be more changes. Each Long Term Support version is farther from the next than compared to regular version upgrades.

Long Term Support versions are specifically targeted at companies that have slow and cumbersome upgrade cycles where it's difficult to integrate new versions.

> Django's stong stability guarantees make picking the latest version of the framework a no brainer for new web applications.

`pip install Django` and good luck!

## Learn More

I hope that explains why you should pick the latest version.

Do you want to learn how Django works or what Django is used for? Then I suggest you check out my [Understand Django](https://www.mattlayman.com/understand-django/) series of articles next. In that series, I explain Django to new (and old!) web developers. I think it will help you on your journey to becoming a Django dev.

Subscribe to my [newsletter](https://www.mattlayman.com/newsletter/) and follow me [on Twitter](https://twitter.com/mblayman) to learn more about Django as I release new content.