teleren/devto huggingface dataset:
DevSecOps built-up series (Part I)
Tags: security, devsecops, devops
Published: 2021-09-09 01:39:26

> The enterprises’ sector has to priority security, data protection, and maturity rather than speed. Finding a way to practices DevOps culture in a high-security environment has become a new challenge for many Security practitioners.

Here is what I learned after many years in build and operating DevSecOps

**Part I — DRY: Building your Security standard.**

Differences Security certification standards focus on specific areas. Besides, enterprise companies often have to maintain many security certifications at the same time. For example, banking and fintech companies would maintain at least ISO 27001 and PCI-DSS standard. Some of its control rules are different but many of its would describe the same requirements. Practice and governance all of those would kill your motivation.

> Trying to find overlap requirements from your security standard and create an internal control for it.

**People**: Saving efforts for training and helping your folks to adopt internal controls. Participants only need to focus on following to company’s requirements and reduce time to read and trying understanding a lot of security-specific terms.

**Process**: Single process to deploy to the organization and reduce efforts of governance. The mapping process later will help transform from internal results to industry standards

**Platform**: Reduce the complexity of building toolsets for execution and metrics collection. Since there are many Commercials and Open-sources products to help accelerate, practitioners often still have to spend a lot of organizing efforts to map between reports and the product’s security posture.

(to be continued…)
Git Rebase
Published: 2021-09-09 01:07:41

What is Git Rebase? - Conceptual Overview
The first time I tried the git rebase command, I was confused -I find most git commands unwieldy & git has a bad user experience- Rebase has a simple job integrate the changes from one branch into another. Just like merge.

But git rebase has a very different flow to achieve this.

What does git merge exactly do?
To highlight the difference between the two approaches. Let's examine git merge first as it's the more common approach.

git merge starts by creating a commit in the feature branch that ties together the histories of both branches, maintaining both branches without any alteration. Although git merge is a simple safe command, it can clutter the history of your feature branches.

Git Rebase
As an alternative to merging, you can rebase the feature branch onto the main branch. rebase puts your feature branch in front of the main branch.



DANGER!

git rebase rewrites the project history by creating brand new commits for each commit in the feature branch. This can cause lots of problems we will discuss but, first the nice things. Eliminate the unnecessary merge commits required by git merge Linear project timeline. Instead of the miss of "metro lines" merge creates you get a single line simple easy to follow.

Avoiding a disaster
Tinkering with time is a dangerous act. Now that you know about rebasing, the most important thing to learn is when to avoid it.

Never rebase a branch used by other people.

Think about what would happen if you rebased the dev branch on the main branch?

The rebase moves all of the commits in dev in front of main. Only you have this update in your local repository. All of the other developers are still working with the original dev. Since rebasing results in brand new commits, git will think that your dev branch history has diverged from everybody else’s

For such branches only use merge
Clean your variable 🧼
Tags: javascript
Published: 2021-09-09 00:37:24

## Use meaningful names 
Yes I know that you already know but honestly put meaningful name to a variable is not easy, just to remember that naming variable should be descriptive and usually javascript variable name write in `camelCase` and for `Boolean` variable name usually answer question such as `isActive` or `hasParams`

```js
// ❌ Don't 

const x= "Jean Doe";
const bar= 23;
const active= true;

// ✅ Do

const fullName= "Jean Doe";
const Age= 23;
const isActive=true;
```

## No hardcode values 
Hardcode is hard to maintain, instead of put constant values directly, you can put it inside a meaningful and searchable constants, by the way usually constant 
write with SCREEEEEEEAM_SNAKE_CASE

```js

function setConfig(hasKey=''){
    ...
};

// ❌ Don't 

setConfig('KLKJFI123123KJHF');


// ✅ Do

const HASH_KEY ='KLKJFI123123KJHF';
setConfig(HASH_KEY);


```


## Avoid unnecessary

Don't add redundant context to variable that already describe itself, your code is already long enough

```js
// ❌ Don't 

const user:{
    userId:'12345',
    userPassword:'12345qwe',
    userFirstName:'John',
    userLastName:'Doe'
}

user.userPassword

// ✅ Do

const user:{
    Id:'12345',
    Password:'12345qwe',
    FirstName:'John',
    LastName:'Doe'
}

user.Password
```
Real options
Tags: lean, leansoftwaredevelopm, options, realoptions
Published: 2021-09-11 17:00:46

---
title: Real options
published: true
date: 2021-09-09 00:00:00 UTC
tags: lean,leansoftwaredevelopm,options,realoptions
canonical_url: https://jhall.io/archive/2021/09/09/real-options/
---

You’ve probably heard of stock options. Many companies offer them as a form of compensation for people who stay with the company long enough. It’s basically an option, but not an obligation, to buy some company stock, usually at a preferential price. If you exercise the option (and the stock price hasn’t dropped too low), you can buy the stocks at such a preferential price, then sell them at the higher market price for a profit.

Of course there are other ways to deal with stock options, usually reserved for wealthy investors and institutions.

But every day, we’re all faced with another kind of option: “Real Options”. [Wikipedia](https://en.wikipedia.org/wiki/Real_options_valuation) talks about real options again in the finanical sense, but we have “real options” in many other areas of life. We often talk about them simply as “options”. Should I eat chicken or beef?

Put simply, a real option is the option, but not obligation, to do something. You have the option to read this message or not. When you’re at a family gathering, and there’s one last piece of pie, you have the option to take that piece of pie, or leave it for someone else. If don’t want it yet, but you might want it later, you can put it on your plate to reserve the option (before someone else takes it).

Some options are free. Some have cost. Some have a potential delayed cost. In the pie example, there is a potential cost of _not_ exercising your option to eat the pie: You may rob someone else of the pleasure of the pie. Or if your cousin notices that you haven’t eaten it, you may even receive a scolding.

So what?

We’re faced with these options all the time, in every line of work. It’s one of the ideas behind the concept of [deferring commitment](https://en.wikipedia.org/wiki/Lean_software_development#Decide_as_late_as_possible), which I’ll get into in greater detail later.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
HOTEL MANAGEMENT APP WITH RADZEN BLAZOR WEB ASSEMBLY (LESSON 7) CUSTOM SECURITY PART 3
Tags: radzen, blazor, webassembly, customauthentication
Published: 2021-09-09 00:24:32

In this video, we make make changes to the main layout of our application by adding a label which displays a welcome message to currently logged on user. We also add a button that the currently logged on user will use to sign out. In addition we make changes to startup.cs file in the server part of our application and also make changes to program.cs file in the client part of our  app. We also add Microsoft.AspNetCore.Components.Authorization package to the client part of our app. We also enable cookie authentication in this lesson.

{% youtube QKk4a6J_un4 %}
Some virtual reality experiments  ⭐
Tags: virtual, reality, vr, unity3d
Published: 2021-09-09 00:21:46

I'm having lots of FUN doing game development. I've been using Unity and phaser.js which is exclusively for browser games. 

Unity has an XR interaction toolkit which makes it easier to do things like teleporting,  interacting with objects (grabbing, pushing etc):


{% youtube jlbvRr7QMpM %}


{% youtube d_928RXa5to %}
How do I remove extra unwanted space in kivy BoxLayout?
Tags: kivy, python
Published: 2021-09-09 00:19:04

![Extra Space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swjuekj7xexraufsiyzd.png)

```
<BoxExample@BoxLayout>:
    orientation: "vertical"
    BoxLayout:
        orientation: "horizontal"
        size_hint_y: None
        Button:
            text: "Logo"
            size_hint: None, None
            width: "80dp"
            height: "40dp"
            pos_hint: {'top': 1}
        Button:
            text: "Menu"
            size_hint: 1, None
            height: "40dp"
            pos_hint: {'top': 1}
    Button:
        text: "Body"
    Button:
        text: "Footer"
        size_hint: 1, None
        height: "40dp"
```
Get hi-res twemoji SVGs by URL
Tags: svg, emoji
Published: 2021-09-10 09:56:41

---
title: Get hi-res twemoji SVGs by URL
published: true
date: 2021-09-03 00:00:00 UTC
tags: svg, emoji
canonical_url: https://stegriff.co.uk/upblog/get-hi-res-twemoji-svgs-by-url/
---

Yo, just a quick one. If you want to get high quality renders of twitter emoji (twemoji), you can get the SVGs by codepoint with a URL like this: <https://twitter.github.io/twemoji/v/13.1.0/svg/1f439.svg>

![Hamster twemoji](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wjfmetoftzhvplispxp.png)

To help you find codepoints, Emojipedia has a page, [Every Emoji by Codepoint](https://emojipedia.org/emoji/). 

+ You need to lowercase any letters in the name.
+ If an emoji is a combination of multiple points, separate them with a dash.

> E.g. For Woman Technologist (no skin colour), convert `U+1F469, U+200D, U+1F4BB` to [1f469-200d-1f4bb.svg](https://twitter.github.io/twemoji/v/13.1.0/svg/1f469-200d-1f4bb.svg)

Also, check out the directory listing on GitHub: [https://github.com/twitter/twemoji/tree/gh-pages/v/13.1.0/svg](https://github.com/twitter/twemoji/tree/gh-pages/v/13.1.0/svg)

Don’t hotlink to these images, there are CDNs for that, as explained on the [project readme][readme]. This is just a handy way to download an SVG so you can render it into an icon or use it in Inkscape, etc.

Lastly, technically, these are CC-BY 4.0, so attribution is required 🙄🙄

Have fun 🐦

[readme]: https://github.com/twitter/twemoji#readme
How to add a number type annotation to a function parameter in TypeScript?
Tags: typescript
Published: 2021-09-09 00:00:00

---
  title: How to add a number type annotation to a function parameter in TypeScript?
  published: true
  tags: TypeScript
  date: Thu Sep 09 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-number-type-annotation-to-function-parameters-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-61685fc4ebc9b4d32bdb8cf236aeca47.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-number-type-annotation-to-function-parameters-typescript)
  
Number type annotations can be added to function parameters by declaring the function and then adding the name of the parameter followed by the `:` symbol (colon) and then the type `number` after the symbol.

### TL;DR

```ts
// add number type annotation
// to the parameter num
function add100(num: number) {
  return num + 100;
}

// call the function
add100(100); // ✅ allowed
```

For example, let's say we have a function called `add100` and on calling the function adds the number `100` with the value we supplied as the argument.

So to get the number we can use a parameter called `num`. It can be done like this,

```ts
// a simple function
function add100(num) {
  return num + 100;
}
```

Now we need to only allow `number` type values as the value for the parameter `num`. To do that we can add a `number` type annotation to the function parameter. In our case, the parameter is `num`.

It can be done like this,

```ts
// add number type annotation to
// the parameter num
function add100(num: number) {
  return num + 100;
}
```

Now let's try to call the function `add100` and then pass a number value as an argument to the function like this,

```ts
// add number type annotation
// to the parameter num
function add100(num: number) {
  return num + 100;
}

// call the function
add100(100); // ✅ allowed
```

As you can see from the above code TypeScript allowed us to pass the number value of `100` to the function parameter `num` since the allowed type for the `num` function parameter is a `number`.

Now let's try to pass another value of `string` type `Hello!` to the `num` function parameter to see what happens,

```ts
// add number type annotation
// to the parameter num
function add100(num: number) {
  return num + 100;
}

// call the function
add100(100); // ✅ allowed
add100("Hello"); // ❌ not allowed. Argument of type 'string' is not assignable to parameter of type 'number'.
```

As you can see that the TypeScript will throw an error saying that the `Argument of type 'string' is not assignable to parameter of type 'number'.` which is also what we want to happen.

See the above codes live in [codesandbox](https://codesandbox.io/s/add-number-type-annotation-to-function-parameters-in-typescript-en01l?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
CSS hover & active & some tips
Tags: css, react, javascript, beginners
Published: 2021-09-08 23:53:14

Lets start and say CSS is an endless world of styling.
There is a serious amount of options that you can play with to get the styling that you want for your component/element,
I am not going to tell you about everything but I will tell you about the struggle that I had in my last project and how I managed to find the solution for it.

###Name the class

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

I had a lot of struggle grabbing the specific element using the CSS file in my project so what do you see now is the final result of endless tryouts of naming the right element.
(I know using ID for the elements can be more specific but with React I find it easier with classNames).
Don’t think i did all this styling by myself, Google was a good friend and there was a lot of coping and pasting.

###Devtools

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

I think the most fun part with CSS is that you can play with the DOM without changing your code and have all experiments that you want until you have the final product and just copy and past it in your VScode.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn9ofmhy5no8ys8jm823.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnhldgcbebn3sop2k2xe.png)

###hover & active

The big struggle that I had in my project (with styling) was that the button component that I was using from "MaterialUI"
was refusing to work with my simple onChange event,
So I decided to create the button on my own and do all the styling by myself.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrm7gjigszsgfwyy4s8e.png)

I discovered how fun it can be with the "hover" & "active" selectors!
I managed to create a really nice Remove button that his color is fading and it has a click effect when you click it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a365wgrtlk47a9rnx6xp.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d76bzjldau7gox1g5tj7.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzqziiq6lcv34hpue5x1.png)
 
No doubt that i copied and paste a lot of it but there was a lot of playing around with it and i am very happy with the final result :)

####resources 
https://www.w3schools.com/css/css3_buttons.asp
https://www.w3schools.com/csSref/sel_hover.asp
Recommended Sites that can Help Improve your Coding
Tags: beginners, programming
Published: 2021-09-08 23:46:42

## Introduction
There are many kinds of jobs and career in Information Technology, and it is an ever-growing career that requires us to learn everyday. Before this post, I have introduced some of the youtubers that can help in web development. Now I am going to introduce some of the sites that I think useful to learn coding.

## 1. Kaggle
First of all is Kaggle, a website that specialized for data scientists and analyst to learn and share their data analysis and models of machine learning.

Except sharing notebooks there, you can also learn the concepts of machine learning and programming related to data mining, for example, Python and R and the libraries that can help it.

Apart from sharing notebooks and learning, you can also join competitions for practicing your concepts of machine learning and finish the tasks.

Link: https://www.kaggle.com/

## 2. Solo Learn
This is a website that can help learning programming. It has website and application for user to access the learning resources.

You can learn the basics of web development and programming here in forms of interactive quizzes and practicing your coding skills through the built-in IDE on the website.

You can sign up using your google account or facebook account.

Link: https://www.sololearn.com/home

## 3.CodinGame
It is an interesting website that allows users to solve questions using programming. You can use a variety of programming languages from the most classic one, such as C++ and Java, to the most trending one like Kotlin and Golang.

Also, to ensure your code quality, there are many test cases before you submit the code.

Apart from solving problems, CodinGame has competitions that allows users to compete with each other. And now it proposes a new type of campaign that allows users to collaborate with each other and strive for the best team.

Link: https://www.codingame.com/start

## 4. freeCodeCamp
Yeah, it is a must to promote it, as it provides a free options for everyone who wants to be a developer.

Apart from giving out certifications for anyone who finished their courses, it always posts videos in their Youtube channel with clear explanations and there are many blogs that you can consider as tips of programming.

Link: https://www.freecodecamp.org/

## 5. Frontend Mentor
This is another webiste that provides mini projects which can let you hone your skills on styling the web and some frontend programming.

For each projects, it provides instructions and templates for you to describe what you have learnt through the project. This can helps you keep track on your learning by reflection.

Although it has premium account type that provides users Figma or Sketch document for each project to describe the layout of the prject, a free account should be enough for the developers if you are confident in your styling languages.

Links: https://www.frontendmentor.io/

## Conclusion
That's all for topic. If you guys have any recommendations on sites that helps improve coding skills, please feel free to leave a comment below:)
Google/Apple token verification with Django
Tags: django, google, apple
Published: 2021-09-08 23:41:12

###  **Overview**
Over the past few weeks, I have been working on a project where one of the main requirements is to enable token verification and authenticate or register & authenticate a user with Django.

### **What we’re going to do**
We are going to use  [google-api-python-client](https://pypi.org/project/google-api-python-client/)  to handle Google token verification and  [requests](https://pypi.org/project/requests/)  to handle token verification with Apple-ID servers.

#### **Step 1: Setup**
Install all packages we are going to use:

{% gist https://gist.github.com/deam91/631348be1d165bf2825e237a8fe92c61 %}


> If you want to separate multiple python versions you can use a virtual environment by running **python3 -m venv <path-to-folder>**, this will create **venv** folder, activate it with **source <venv>/bin/activate**. Check the  [docs](https://docs.python.org/3/library/venv.html)  for more details

Next, we will set global variables in our settings.py with the keys and secrets, necessary to verify our tokens.

{% gist https://gist.github.com/deam91/a4199315b41313e54ff64c169b5123e0 %}


> Make sure to check how to enable  [Apple Sign-In](https://developer.apple.com/documentation/sign_in_with_apple/implementing_user_authentication_with_sign_in_with_apple)  and  [Google Sign-in with Firebase](https://firebase.google.com/docs/auth/web/google-signin)  if it’s not done yet.

#### **Step 2: Create views**
Here we will create two views, one for manage verification for Google tokens and another one for Apple tokens.

Let’s create first a simple serializer for our User model:

{% gist https://gist.github.com/deam91/64f1e83ca25a9cfadd9d6f912882131e %}

Then the Google view:

{% gist https://gist.github.com/deam91/19ea03ea17318a991ae732af2439583e %}

Here we are using the token that comes from a request to be verified using *google-api-python-client*, then we use the **email**, **given name**, and **family nam**e to register a user in our server if is not registered yet, save the profile **image**, and create a jwt token for user authentication in our server.

The Apple view:

{% gist https://gist.github.com/deam91/14d18aa95d252b7cfb8fb7cca58ff780 %}

In our Apple view, we are expecting either an **access_token** or a **refresh_token**. First, we need to generate a client secret using the algorithm **ES256**, then use the access token and the client secret to request an authentication token to Apple ID servers, and decode the response to get user information. You have to handle the user’s full name because this is only returned the first time a user signs in. Second, if we receive a refresh token, we use it to verify that the user is still signed in against the Apple ID servers. If we got no errors, proceed to authenticate or register/authenticate a user.

Configure some routes:

{% gist https://gist.github.com/deam91/f47b41e2efc636fdbbe109df0660c464 %}

And that’s it!! We rock! Now you have all set to verify tokens from both Google and Apple and manage your users…
Vuejs3 Project just to learn
Tags: vue
Published: 2021-09-08 23:38:12

Hi, this post is just a quick reminder about how to create a Vuejs project.

First run `npm install -g @vue/cli` to install Vue Command Line interface.

`vue create name-of-the-project-here` to create a project.

You can choose `manually select features`, and them router, vuex, version 3, yes to history mode .

Choose Eslint + prettier
Lint on save.
Place the config file inside a dedicated config file.

cd into the project, and run `npm run serve`.

Now we have a Vuejs project running at `http://localhost:8080`.

To build run `npm run build` inside the project directory.

You also can run vue ui to open a browser instead of a CLI if you like.
react-material-ui-carousel 
Tags: react, javascript, typescript, webdev
Published: 2021-09-08 22:35:54

## react-material-ui-carousel

-   [github](https://github.com/Learus/react-material-ui-carousel)
-   [demo](https://learus.github.io/react-material-ui-carousel/)

## Installation

```shell
npm install react-material-ui-carousel
```

```shell
yarn add react-material-ui-carousel
```

## Code

```jsx
import React from 'react';
import Carousel from 'react-material-ui-carousel';
import { Paper, Button } from '@material-ui/core';

function Carousell(props) {
	const items = [
		{
			name: 'Aya Bouchiha',
			description: 'Full Stack Web Developer',
		},
		{
			name: 'John Doe',
			description: 'Author',
		},
		{
			name: 'Pitsu Coma',
			description: 'Math Student',
		},
	];

	return (
		<Carousel>
			{items.map((item, i) => (
				<Item key={i} {...item} />
			))}
		</Carousel>
	);
}

const Item = ({name, description}) => {
    return (
		<Paper>
			<h2>{name}</h2>
			<p>{description}</p>
			<Button>more info...</Button>
		</Paper>
	);
};
```

Have a great day