teleren/devto huggingface dataset:
How to check if paths are lowercase characters with Spectral
Tags: spectral, openapi
Published: 2022-04-26 19:46:34

---
title: How to check if paths are lowercase characters with Spectral
published: true
description: 
tags: [Spectral, OpenAPI]
//cover_image: https://direct_url_to_image.jpg
---

In this post, I show how to use [Spectral] to check if only lowercase alphanumeric characters are used in the keys of OpenAPI paths.

[Spectral]: https://github.com/stoplightio/spectral

## What is Spectral?

[Spectral] is a rule-based JSON/YAML linter. It can checks any JSON/YAML, but is especially well designed for OpenAPI.

## Problem

To represent paths contains multiple words, there are several forms choices, such as camelCase, kebab-case and underscored:

```
GET /pullRequests/{id}
GET /pull-requests/{id}
GET /pull_requests/{id}
GET /pullrequests/{id}
```

When collaborating with a team, the API design conventions should define which format should be selected.

However, people often make mistakes. They may not know the conventions or read them carefully.

## Solution: Check the path convention with Spectral

To solve this problem, it is effective to automate the checks with Spectral.

The Spectral rule that checks if paths are all lowercase alphanumeric is like below. Write this in the .spectral.yml.

```yaml
extends: spectral:oas
rules:
  path-keys-lower-case-alphanumeric:
    message: "Path must be lower case. Only lower case alphanumeric characters are allowed."
    given: "$.paths"
    then:
      field: "@key"
      function: pattern
      functionOptions:
        match: "^(?:\\{[^}]+\\}|[/a-z\\d])*$" # https://regex101.com/r/eHmZ29/1
```

By adding this rule, Spectral will warn if the path contains uppercase letters or hyphens.

```sh
$ npx spectral lint openapi-spec.yaml
/path/to/my/openapi-spec.yaml
 17:15  warning  path-keys-lower-case-alphanumeric  Path must be lower case. Only lower case alphanumeric characters are allowed.  paths./pullRequests
 27:23  warning  path-keys-lower-case-alphanumeric  Path must be lower case. Only lower case alphanumeric characters are allowed.  paths./pull-requests

✖ 2 problems (0 errors, 2 warnings, 0 infos, 0 hints)
```

## Rule details

The rule introduced above uses the Spectral core function [pattern]. This function checks whether a given field matches a regular expression.

[pattern]: https://meta.stoplight.io/docs/spectral/ZG9jOjExNg-core-functions#pattern

The `^(?:\{[^}]+\}|[/a-z\d])*$` is the regular expression that checks if the paths contains only lower case alphanumeric. This expression matches the following strings:

```
/
/foo
/123
/foobar
/foo123
/{foo}
/{fooBar}
/{foo_bar}
/{foo-bar}
/users
/users/{userId}
/users/{user-id}
/users/{userid}
/users/{user_id}
```

On the other hand, the following strings are prohibited:

```
/Foo
/fooBar
/foo-bar
/foo_bar
/temas/{teamId}/MEMBERS/{userId}
```
How to security scan your web API for vulnerabilities
Tags: api, security, programming, java
Published: 2022-04-26 19:26:07

About me: I write, review, and build API security tools and best practices.

The purpose of this article is to show Appsec/developers how to get started with API security scanning with an open source API. In the process you will learn what vulnerabilities will look like. And at the end of the write-up I’ll share a couple of tool recommendations for you to play with.


API is the new internet protocol kind of. It’s the gateway to all kinds of applications you’re building or integrating with example mobile, web, AI, serverless, microservices, blockchain, web3.0, etc. 

APIs now dominate the internet traffic. This is evident from the recent Akamai report, that over 90% of the internet web traffic are API calls. Without your realization you and your’re organization are using APIs predominately.

APIs are also the most attacked surface. They have overtaken traditional attacked surfaces like networks, computers, etc. Which means your chances of getting a security incident/breach this quarter is more likely at the APIs layer.

Since APIs are a new paradigm. Most organizations are under prepared when it comes to API security. API security validation are hard to achieve, it’s still in it’s early stage, mostly human powered, under staff, and done not as frequent as new code is deployed. Traditional security/penetration testing staff focuses on mobile and web front ends making the matters even worst for the APIs.

Here are a few tools you can use to get started with API security.

Use this opensource API for scanning and review the vulnerability report: http://52.250.110.188:8080/v2/api-docs


Tool #1 
[EthicalCheck](https://apisec-inc.github.io/pentest/) 
Pros: free, point and scan solution
Cons: Only covers OWASP #2

Tool #2
[Burp](https://portswigger.net/burp)
Pros: free community edition, write your own tests
Cons: Learning curve

I avoided adding commercial tools since most of the tools are closed and offer a custom pricing. 

If you have any questions. Feel free to reach out to me at my email and twitter
intesar.mohammed@gmail.com
https://twitter.com/shannan_
An Interview with Chris Cummer, WTFUtil
Tags: opensource, go, devops
Published: 2022-04-26 19:21:16

---
title: An Interview with Chris Cummer, WTFUtil 
published: true
description: 
tags: #opensource #go #devops
//cover_image: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s4tuxzrzz52qj3ig6k5.png)
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s4tuxzrzz52qj3ig6k5.png)

WTFUtil (also known as WTF) is a personal information dashboard that allows you to monitor your systems, services, and other important information from your terminal. With over 13,000 stargazers and over 150 contributors on GitHub, it's a popular open-source project among Golang developers and DevOps.

Airbrake interviewed the creator of WTFUtil, Chris Cummer, about WTF’s success.

Read the full interview [here](//bit.ly/3KhZbg3).
Colored Brackets have been a game changer
Tags: discuss, tooling, vscode, productivity
Published: 2022-04-26 18:50:38

I've worked in a few different IDEs along my path of programming, usually to the whim of different professors. However, once I started working in VSCode, I've loved it and stuck with it for its lightweight nature and customizability. I'm not sure how I didn't discover it earlier, but my friend suggested I get a color bracket extension, and it has been a game changer. 

Unfortunately, I am sometimes mess with spacing when it comes to my code, Going back after a compilation error counting the amount of parentheses gets annoying with a mix of nested brackets, autocomplete brackets, and my fat finger on the shift, 8, and 9 key. Hence, colored brackets! 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oikcxev3rgpy587sf2ee.png)
All this does is match the color of brackets, parentheses, etc. which makes it much easier at a glance to see what goes where. Another nice feature of it, is if there is an unmatched or extra bracket, it will let you know by coloring it a bright red that screams ERROR. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euzfch5a9gbma0dmu29f.png)
Even with this somewhat dense line of code, I'm sure you could spot it out right away. And I sure do whenever I'm coding. 

This is the one I use, which I like for its bright colors, but there are other more customizable ones out there if you so please.
https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets

Are there any other extensions or conveniences you use for productivity?
How to take awesome screenshots of Azure Portal with Edge
Tags: edge, azure, documentation, webdev
Published: 2022-04-26 18:49:42

Documentation is part of our lives as software developers.
We cannot escape from that.
And so we try to write it as best as we can.

Screenshoots are a big part of the documentation, especially if you write a user manual or a small guide.
Let's see how we can create better screenshots, with the help of Edge.

## Enable the Developer Toolbar
First of all, you have to display the Edge Developer Toolbar in your browser.
Navigate to https://portal.azure.com, as usual, and when you are in the page that you need, press **F12** on the keyboard.
By default the developer toolbar appears the the bottom of the browser, but if it's not, click on the three dots of the developer toolbar and  click on the bottom dock icon.

![developer toolbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gd6fmozwinjlfo21bzoy.png)

Now you are ready to take the first screenshot.

## Take a screenshot
The second icon in the toolbar is the "**Device Emulator**" tool.
Click on it and you should see a new frame around your Azure Portal instance.

![Device Emulator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r77olcwpcby5mh13ca9.png)

It should be appears like the image below.

![device emulation portal azure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr24fab9q417kpl1xwpp.png)
 
As you can see, at the top of the new toolbar, you have two textboxes with the width and height values for the screen.
You can choose any values but very often you need a regular desktop screen.
You can choose values like 1366*768 or 1920*1080.

Now the screen should be appears like in the picture below.

![screen with a desktop resolution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6npvu1ht4oz5y29mlqy.png)
 
Now you are ready to take the screenshot.

Click on the three dots at the top right corner and select the menu entry "**Capture Screenshot**".

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

After a couple of seconds a dialog with the downloading file screen appears on your browser and you can save the file in your favorite download directory.

In the image below you can see an example of a screen from Azure Portal.
Clear. Same size for every screenshots. High Quality.

![The final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eodu5kut9iravmzrcehb.png)
"Hello" after many many months...
Tags: php, social, discuss
Published: 2022-04-26 18:34:43

**Hi!** After few months of reading articles, I decided to say "Hello" to community of dev.to

But from the beginning, my name is Maciej and I am Full-Stack Web Develper from Poland. Usually I stick on the back, due to lack of self confidence, but now I decided to fight with my weakness.

### Few reasons why

#### 1. Improving language skills
Well, I am not a native speaker in english and my skills in this language are far from perfect. I find this as good form of improving both my language and communicational skills. Feel free to share any suggestions and point out my mistakes 😁
#### 2. Documenting my journey
I am programming for almost 8 years and this was process which changed my life. Usually I was sharing my thoughts only with few friends. Some time ago I started to think, maybe is it worth to share my projects and challenges witch stands behind them, with wider public? Why not!
#### 3. It can lead to better answers
Sharing publicly problems I am facing can be educating. I counting to meet another perspective from more experienced developers, which can lead me to improving own skillset.
#### 4. Facing own fears
For many years I was facing problems with self confidence, which leads me to fear of writing something in public. In past few months I readed many articles and comments in this community and decided break out of my comfort zone and try to say hello!

### Story behind me

I love video games. Thet's what started my programming adventure, when I started to write my first lines of code in multiplayer platform for GTA-series game.

Creating simple scripts quickly exchanged to building own web applications. My first pages were just plain HTML mixed with some CSS. After some times I started to adding simple PHP scripts, which from project to project started to be more complex.

Now, multiplayer platform on which I started is history for me, but on my peak moment I was creating unique and complex systems, which were inspiration for many other developers.

From few years I am focused only on web development, where I use mainly PHP with Symfony to create even more ambitious projects than before. Apart from PHP I used also JavaScript with various frameworks (mostly Angular, Alpine.js and Vue.js) to create front-end side for my applications.

### At the end
And at the end... it's nice to finally say hello 🙂
I hope that my broken English was not a major nuisance in this text.

Feel free to ask me any question, if You want to 😁
qrcode.react usage
Tags: react, qrcode, programming, productivity
Published: 2022-04-26 18:29:48

> “Talk is cheap. Show me the code.”
> – Linus Torvalds


Recently I have been dabbling back in React after being in Angular world for the past 2 years. Long story short is I wanted a QR code that when scanned will go to my LinkedIn page. 

After looking around for a nice short and sweet approach to this ( because why invent the wheel.. obviously), I stumbled on qrcode.react. Super simple set up and usage. 

Assuming you have a standard react setup already, i'll skip to the good part.

Open up the terminal and navigate to your react project and run 

```
npm i qrcode.react
```

BAM all good and installed.

For this example, you'll add 

```
import QRCode from 'qrcode.react';
```
to your app.js

then you'll add:

```
  return (
    <div className="App">
      <h1>QR Code</h1>
      <br />
      <QRCode value="www.google.com" size={290} />
    </div>
  );

```

To actually use utilize the QR Code.

Your entire app.js file should look like this:

```
import React from "react";
import QRCode from "qrcode.react";

export default function App() {


  return (
    <div className="App">
      <h1>QR Code</h1>
      <br />
      <QRCode value="www.google.com" size={290}  />
    </div>
  );
}
```

On the screen you should see the following:


![QR Code that will take you to google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa4ujxorb3vkyrbljraz.PNG)

AND look at that :) You can go a big deeper here if you want to with a download button to download a png/svg of your qr code or an input field to let the user set the link or value that the qr code would have. Probably a ton of other things you can do to make it even better!


Initial link that are helpful:
https://www.npmjs.com/package/qrcode.react

My codesandbox repo link:
https://codesandbox.io/s/qr-code-personal-8bdltl
What are Observables in Angular11?
Tags: javascript, angular, observables, webdev
Published: 2022-04-26 18:18:09

**Observables **are construct to which you subscribe to be informed about changes in data. They are stream of data ,whenever a new data piece is emitted our subscription will know it.

**In Angular, we already have observables**,you only subscribe them.You don’t have to create them.

**Observables are added by a package name RxJS.**

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

Interval is a built in function that gives observables.

It will give us observers like: 

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

Now let’s say we have made this observable on home component and we have moved to another component now called profile component .

If you check dev tools ,you can still notice count incrementing even though we declared it in the home component it is still persisting in our profile component.

**So if we navigate away from component that doesn’t stop observables.

This may cause some serious problems like you may run out of resource ,it will slow your app and worst memory leakage may happens** 

## How you can Unsubscribe your observable?

1.declare your private subscription

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00wa0u4l321sqgrsr98e.png)
 
2.You have to import Subscription from ‘rxjs’.
3.Now we store subscription returned by subscribe in our variable.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz6ugysouyogz60xx33o.png)

4.Now you can implement ngOnDestroy() hook of angular to destroy observable.

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

**Now whenever we leave the component, we clear the subscription by unsubscribing and prevent memory leaks.**

**Important point to note here:**_All the Angular Package Observable like http,params that are built in angular Observable,You don’t have to worry about unsubscribing ,Angular handles that automatically.Therefore in most cases of Angular observables we don’t unsubscribe._

Thanks for reading, If you like it please share and comment
Back to Back #12 - Back-end news by SFEIR
Tags: newsletter, french, backend, cfp
Published: 2022-04-26 18:16:13

_C'est l'heure de retrouver le meilleur du back-end, la sélection aux petits oignons par les experts de SFEIR._

---

### ✨ [Types May Finally Be Coming to JavaScript](https://dzone.com/articles/types-may-finally-be-coming-to-javascript)

Jusqu’à présent, Javascript a toujours été un langage non typé, mais une proposition a récemment été faite pour ajouter la possibilité de typer nativement en Javascript. Cet article vous décrit ce que cela pourrait apporter au langage par la suite.

### 📈 [5 API Trends to Look Forward to in 2022](https://nordicapis.com/5-api-trends-to-look-forward-to-in-2022/)

Le domaine des API est en constante évolution. Les API sont utilisées de manière nouvelle et passionnante en permanence, ce qui signifie qu'il y a toujours des tendances émergentes à surveiller. Voici cinq des principales tendances en matière d'API à surveiller en 2022 !

### 👃 [API Design Smells](https://caseysoftware.com/blog/api-design-smells)

Dans cet article, Keith Casey nous partage ses 20 ans d'expérience dans la conception d'API et nous explique comment reconnaître certains anti-patterns qui à terme rendent compliquée la maintenance de nos API.

### 🌳 [How Software Affects Climate Change, and What Software Engineers Can Do about It](https://www.infoq.com/news/2022/04/climate-change-software-engineer/)

Le secteur numérique a un impact non négligeable sur l’environnement. Cet article met en avant l’impact des datacenters et ce que les ingénieur.e.s peuvent faire lorsqu’ils conçoivent leurs logiciels pour diminuer leur consommation en énergie.

_Si ce sujet vous intéresse, SFEIR organise un événement en ligne le 12 mai autour du Green IT. Inscrivez-vous à cette adresse_ 👉 **https://www.sfeir.com/fr/green-it-responsabilite-et-sobriete-numerique/**


### 🎟️ CFP et événements
Plusieurs évènements tech ont annoncé leur retour en 2022 et leurs _calls for papers_ sont ouverts ! C’est le moment de proposer vos talks pour :
- [Cloud Ouest](https://conference-hall.io/public/event/txK7ihjaAR4LtuJyYZCx), CFP ouvert jusqu'au 30/04 
- [Volcamp](https://conference-hall.io/public/event/8Wu147xoRDKQSjGcawoY), CFP ouvert jusqu'au 13/05 
- [Cloud Nord](https://conference-hall.io/public/event/wGVYkl21UFxeiuakhKfu), CFP ouvert jusqu'au 31/05 
- [DevFest Nantes](https://conference-hall.io/public/event/CfucIjaXxrZThJE0POR3), CFP ouvert jusqu'au 19/06 


### 🏫 SFEIR Schools
Profitez de formations gratuites dans nos agences SFEIR :
- [Cypress : TDD for the win !](https://www.sfeir.com/fr/sfeir-school-nantes-cypress-tdd-for-the-win/), le 05/05 à Nantes
- [GitHub Actions](https://www.sfeir.com/fr/sfeir-school-lille-github-actions/), le 13/05 à Lille
- [Spring security](https://www.sfeir.com/fr/sfeir-school-luxembourg-spring-security/), le 24/05 à Luxembourg
- [GitHub Actions](https://www.sfeir.com/fr/sfeir-school-bordeaux-github-actions/), le 31/05 à Bordeaux


---

_C’en est fini de la revue de presse ! On se revoit le mois prochain._
Scratch
Published: 2022-04-27 06:20:07

---
title: Scratch
published: true
date: 2022-04-26 18:00:45 UTC
tags: 
canonical_url: https://www.funkysi1701.com/posts/2022/scratch/
---

My 6 year old boy has been playing with Scratch, so here is a quick introduction to what we have learnt about it.

Scratch is a website that allows you to “code” by combining blocks together.

This is how the scratch website describes its self

> Scratch is the world’s largest coding community for children and a coding language with a simple visual interface that allows young people to create digital stories, games, and animations. Scratch is designed, developed, and moderated by the Scratch Foundation, a nonprofit organization. Scratch promotes computational thinking and problem solving skills; creative teaching and learning; self-expression and collaboration; and equity in computing. Scratch is always free and is available in more than 70 languages.

Scratch can be found by going to [https://scratch.mit.edu/projects/editor/](https://scratch.mit.edu/projects/editor/)

A lot of the blocks affect your character or “sprite”, the default is a cute looking dog which may also be the scratch logo.

![](https://www.funkysi1701.com/images/scratch.png)

The left hand side of the screen consists of a list of the blocks of code you can use and your coding area where you can arrange them.

The right hand side shows the results of your code, where you can run and test what your code does.

It didn’t take my boy long to code something like this tonight.

![](https://www.funkysi1701.com/images/scratch2.png)

This game moves the “sprite” towards the mouse pointer and a message “got you” appears on screen when it reaches your mouse pointer.

I won’t go through all the different blocks you can choose from, but I will highlight some of the programming concepts being learnt here.

**inputs** every computer program needs inputs and there are lots to choose from, things like moving the mouse or pressing a key on the keyboard.

**outputs** your code needs to do something, this code moves a sprite about the screen

**variables** my boy hasn’t heard of algebra yet, but he is already grasping concepts like variables, where a value can be assigned and maths can be applied to. In this example the score increases

**loops** this program keeps looping until it reaches the mouse pointer

**logic** other logic commands are also available, like if / else statements, also <, > and = statements can be used

There are lots of help and tutorials on the site to help you along, and you can customise the look and even record short sound clips to play in your code.
What’s New in the ArcGIS API for JavaScript, version 4.23
Published: 2022-04-26 17:29:07

Update: Did you miss the event? We have it recorded, and you can watch the Livestream [here](https://www.youtube.com/watch?v=TTdE9kJO888).

Next Wednesday, April 13th, a few members of the ArcGIS API for JavaScript team will be getting together to discuss some of the exciting new features in the [4.23 release](https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/whats-new-in-arcgis-api-for-javascript-4-23/). The best part is — you get to be a part of it! Join the Livestream at 9am PDT next Wednesday to hear all about the latest and greatest in the API — directly from some of the engineers. We can’t wait to see you there!
Planning on attending? [Share it with your network](https://twitter.com/intent/tweet?url=https://www.youtube.com/watch?v=TTdE9kJO888&text=I%27m%20tuning%20in%20to%20the%20What%27s%20New%20in%20the%20ArcGIS%20API%20for%20JavaScript%20v4.23%20Livestream%20on%20Wednesday,%20April%2013th%20@%209am%20(PDT).%20Hope%20to%20see%20you%20there!)!


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

Want to stay up to date on the latest ArcGIS Developer technology? [Subscribe to our YouTube channel](https://www.youtube.com/channel/UCgCXcfk5uEraWkpE9wlRwgw?sub_confirmation=1)!

https://twitter.com/hhkaos/status/1603669698222112768