teleren/devto huggingface dataset:
I did it!
Tags: hacktoberfest, opensource, rails, ruby
Published: 2020-10-28 01:33:15

Hello fellow devs,

There is no feeling to describe my emotions when my 4th PR was merged today. This is my first time participating in Hacktoberfest, and my first time not being scared and seeing something through to the end. 

My contributions were as follows 
1. Fixing up the alignment on the Sign In page:
https://github.com/ck3g/homebugh/pull/93

2. Removing extra pagination:
https://github.com/publiclab/mapknitter/pull/1452

3. Added a field to admin interface:
https://github.com/mrysav/geneac/pull/43

4. Wrote tester functions within a rake task:
https://github.com/mrysav/geneac/pull/44

###**Lessons learnt** 
**Always read through the `README.md` and `CONTRIBUTING.md`**.The first PR was my toughest one. Even though it was a really simple UI fix, since I missed to follow a couple of steps on the `README.md`, I got into a lot of trouble in terms of setting up the environment.

**If you are stuck, you need only ask**. Putting this into my head took me ages - I usually suffer in silence and try to work my way out of things by myself, but sometimes, you just gotta get some help. A couple of months ago, I ended up giving up on an issue because of this same reason.

**The opensource community is very inviting and nurturing**. This is exactly the reason why I was able to finish all my PRs.

###**A couple of lessons for my Ruby on Rails friends here**
- `rake routes` is your forever friend.
-  Always be careful when setting up the `DB` part of your app(whether it is `MySQL` or `PostGRES` or anything else. It is also helpful to look up [Docker](https://www.docker.com/).
- Always take a look at your `Gemfile` and also when you start working with an issue, if there's a gem involved, take a look at the documentation of the gem. This will save you a lot of time! 

To the rest of you who are working on the challenge, you got it. There's still time and even if you don't finish, you can always work on it next month. **After all, there shouldn't be one single month that we should set aside for contributing to open source!**
Intro to JSON Web Tokens
Tags: json
Published: 2020-10-28 01:25:30

There are different ways to implement authentication for web apps and one of them is through something called JSON Web tokens or JWT. JWT is a standard that defines a compact and self-contained way to securely transmit information between a client and a server as a JSON object. The compact size makes the tokens easy to transfer through an URL, POST parameter, or inside an HTTP header. Information in a JWT is digitally signed using key pairs as well.

JWT are primarily used for authentication. After a user logs in to an application, the application will create a JWT and send it back to the user. Subsequent requests by the user will include the JWT. The token informs the server what routes and resources the user has access to. 

JWTs consist of three parts with dots in between:

- Header
- Payload
- Signature

An example would look like: 

euwuad17wbu90bwbdau.rggiri325rngnsg.53diwiwniwoqoq40489

#Header

The header typically consists of two parts: the type of the token, which is JWT, and the hashing algorithm such as HMAC SHA256 or RSA.

For example:
```
{
  "alg": "HS256",
  "typ": "JWT"
}
```

Then, this JSON is Base64Url encoded to form the first part of the JWT.

#Payload
The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional metadata. There are three types of claims: reserved, public, and private claims.

**Reserved claims:** These are a set of predefined claims, which are not mandatory but recommended, thought to provide a set of useful, interoperable claims. Some of them are: iss (issuer), exp (expiration time), sub (subject), aud (audience), among others.

**Public claims:** These can be defined at will by those using JWTs. But to avoid collisions they should be defined in the IANA JSON Web Token Registry or be defined as a URI that contains a collision resistant namespace.

**Private claims:** These are the custom claims created to share information between parties that agree on using them.
An example of payload could be:
```
{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}
```

#Signature
The signature consists of the encoded header, the encoded payload, a secret, the algorithm specified in the header, and the signing of that. It is used to verify the sender of the JWT and to ensure the message wasn't changed 

Example with the HMAC SHA256 algorithm.
```
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)
```

A good diagram of how JWT works:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3vbc0zvnzecmy6eerwz3.jpg)

Check out [Link](https://jwt.io/) to read more about it and where you can test out as well as decode, verify and generate JWT. 

**References**
- https://jwt.io/introduction/
- https://www.freecodecamp.org/news/what-are-json-web-tokens-jwt-auth-tutorial/
- https://auth0.com/learn/json-web-tokens/
Using if condition in yml for rails
Published: 2020-10-28 01:09:27

---
title: Using if condition in yml for rails
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

We can write a condition in a yml for rails like this.

`config/setting.yml`

```yml
  address: '<%= Date.today < Date.new(2020, 12, 1) ? "Tokyo" : "Osaka" %>'
```
Array Destructuring/Spread
Tags: react, javascript, beginners
Published: 2020-10-28 01:05:34

# Overview

{% replit @CodeFinity/Array-Destructuring %}

Welp...that says it all 👆🏽.

If we wanted to destructure the first 3 _elements_ in an _array:_ `const [veg1, veg2, veg3] = ["Cabbage", "Turnip", "Radish", "Carrot"]`

Those 3 dots: `...` are a _spread_ operator. That's why in the above repl.it 👆🏽, we can pull out the first element(s) and then still keep the rest of them in another _array._
Building Forms The Angular Way
Tags: webdev, angular, html, typescript
Published: 2020-10-28 00:16:09

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

Angular has two-main approaches to building forms. The Template Driven approach and the Reactive Form approach.

In this tutorial, we will be learning the template driven approach.

# Recipe👨🍳
👉Import FormsModule into your main app.module component, and add it to the imports array.

![appmodule](https://dev-to-uploads.s3.amazonaws.com/i/nz9k9i5xuwp5ewtmprzo.png)
 
This will give us access to the following directives ngForm,ngModel and ngSubmit.

👉 Head over to your view
 - We will bind the ngSubmit event to a method in our logic.
 - Equally, we will create a template variable (#loginForm) and bind it to the ngForm directive, so as to hold a reference our form 

 ![Screenshot 2020-10-25 203154](https://dev-to-uploads.s3.amazonaws.com/i/fer2uztin8aofy5avnmk.png)

-Behind the scenes, whenever a form element is created angular attributes the ngGroup directive to it automatically
-ngGroup is just an object that represents a collection of form-controls.
 -Form controls are the smallest unit of a form, they hold the form values and the validation information.

-In your input make sure you gave a name property, and attach the ngModel directive to it
Attaching the ngModel directive gives us one-way binding, and attributes a form-control to our input

![ngModel](https://dev-to-uploads.s3.amazonaws.com/i/s3vva87ooy74iug949uh.png)

-Finally, add a button with the type submit

👉 Head over to your logic and add the method, that will log the values entered into the form

![TDD logic](https://dev-to-uploads.s3.amazonaws.com/i/qr1ksf4cai2zrjzsnxof.png)

Now, Open your form in the browser, and fill in the form.

![Browser](https://dev-to-uploads.s3.amazonaws.com/i/9n5ipp68lkvpq5274jht.png)

After submitting the form, check your console. You will see the values you just submitted
 
![output](https://dev-to-uploads.s3.amazonaws.com/i/sftz211xjf3imv7chl0p.png)

Congratulations!!!🎉🍾㊗🎊 You just created your first angular form. In the upcoming tutorials, we will discover how to create forms, using the reactive approach.
Azure Functions University - HTTP Lesson (.NET Core)
Tags: serverless, azure, programming, dotnet
Published: 2022-03-16 20:00:19

---
title: Azure Functions University - HTTP Lesson (.NET Core)
published: true
date: 2020-10-28 00:00:00 UTC
tags: serverless, azure, programming, dotnet
canonical_url: https://blog.marcduiker.nl/2020/10/28/azfuncuni-http-lesson-dotnet.html
series: Azure Functions University
---

![Http Lesson .NET Core](https://blog.marcduiker.nl/assets/2020/10/28/AzureFunctionsUniversity_HTTP_Lesson_dotnetcore.png)

Hi serverless friends, we have a new Azure Functions University lesson for you! In this lesson we will learn how to use the HTTP trigger in Azure Functions written in .NET Core 3.1.

<!--more-->
## Lesson

You can find the lesson on GitHub: [HTTP Trigger (.NET Core)](https://github.com/marcduiker/azure-functions-university/blob/main/lessons/dotnetcore31/http/README.md).

And you can watch the video on YouTube:
{% youtube 5k35dlBAXxA%}

<iframe width="560" height="315" src="https://www.youtube.com/embed/5k35dlBAXxA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

The lesson consists of the following exercises:

| Nr | Exercise |
| --- | --- |
| 0 | Prerequisites |
| 1 | Creating a Function App |
| 2 | Changing the template for GET requests |
| 3 | Changing the template for POST requests |
| 4 | Adding a new function for POST requests |
| 5 | Change the route for a custom greeting |
| 6 | Homework |
How to sort an array of strings in JavaScript?
Tags: javascript
Published: 2020-10-28 00:00:00

---
  title: How to sort an array of strings in JavaScript?
  published: true
  tags: JavaScript
  date: Wed Oct 28 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/sort-array-of-strings-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-4f8f2daa3537d4355f637488f8ae46a4.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/sort-array-of-strings-javascript)
  
To sort an array of `strings` in JavaScript, you can use the `sort()` method on the array object.

```js
// sort array
arr.sort();
```

## Sort the array in ascending order

By default, the `sort()` method sorts the array in ascending order.

```js
// array of strings
const strArr = ["Helen", "Jack", "Andrew", "Bob"];

// sort array
// in ascending order
strArr.sort();

console.log(strArr); // ["Andrew", "Bob", "Helen", "Jack"]
```

See this example live in [JSBin](https://jsbin.com/yijovajobu/edit?js,console).

## Sort the array in descending order

To sort the array in descending order, you can pass a function to the `sort()` method to customize its behavior.

This function will get executed on each iteration while sorting the array and will be passed 2 elements,

- The first element is the second element of the current iteration
- The second element is the first element of the current iteration.

Weird. Right! 💀

All we have to is check if the second element is greater than the first element and return:

- `-1` if the second element is greater than the first element
- `1` if the second element is not greater than the first element
- `0` to leave both the elements unchanged

Put simply, Returning `-1` from the function means to swap the element, and `1` means to not swap the elements.

It can be done like this,

```js
// array of strings
const strArr = ["Helen", "Jack", "Andrew", "Bob"];

// sort array
// in descending order
strArr.sort((a, b) => {
  // convert the elements
  // to lowercase so that we do not
  // have any problem while sorting
  // since capital and small letters
  // have different ascii values
  const aLower = a.toLowerCase();
  const bLower = b.toLowerCase();

  if (aLower > bLower) {
    return -1;
  }

  if (aLower < bLower) {
    return 1;
  }

  return 0;
});

console.log(strArr); // ["Jack", "Helen", "Bob", "Andrew"]
```

See this example in [JSBin](https://jsbin.com/noyukesaqi/2/edit?js,console).

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

---
Codinators.XunitHelpers Nuget Package: Update 2
Tags: showdev, testing, xunit
Published: 2020-10-27 23:22:14

---
title: Codinators.XunitHelpers Nuget Package: Update 2
published: true
tags: showdev, testing, xunit
canonical_url: https://www.ankursheel.com/blog/codinators-xunit-helpers-nuget-package-update-2
---

I created [Codinators.XunitHelpers](https://www.nuget.org/packages/Codinators.XunitHelpers/)(a NuGet package) to add some useful unit testing functionality that is missing in xUnit.

This release adds an auto approver to automatically update the approval files generated by [ApprovalTests.Net](https://github.com/approvals/approvaltests.net).

## Motivation

We use approval tests for a few scenarios over at FirstAml. Unfortunately, a small typo or a missing dependency registration can result in a lot of failed tests. Not only in this scenario but if we are [using theory tests with Approval files](./approval-tests-with-xunit-theory-tests) and have it set up to use a _DiffReporter_, a bunch of windows will open up if the tests fail. We then have to update the approval file and then close the diff window or reject the approval file and close all the windows.

This can be quite annoying and a big time-sink.

The AutoApprover automatically updates the approval files for any failed tests without opening any other windows.

## Installation

Install it by using the following command

```
dotnet add package Codinators.XunitHelpers
```

## Usage

In `ApprovalTestConfig.cs` add the following snippet

```
using xUnitHelpers;

[assembly: UseReporter(typeof(AutoApprover))]
```

## Result

It will automatically update the approval file. But in the test runner, it will show up as a failing test so that we have a clear indication of which tests failed.

It will not do anything if the received and approved files match so if we run the test again (without changing anything), it will pass.
Normal Forms
Published: 2020-10-27 23:15:53

Today I want to talk about ways to improve a database in terms of normalization. Normalization is a way of restructuring your database to help prevent data redundancy and streamlines your data.

For this post, we are going to look at the first two forms of normalization. The First Normal Form (1NF) is whenever data is stored in tables with rows that are all uniquely identified by the primary key, when the data in each table is in its most reduced form, and there are no repeating groups. The Second Form (2NF) requires everything from 1NF along with having no in-table dependencies between the columns in each table.

##How this relates to my data
With normalization, we can make the data from the COVID risk chart streamlined and less redundant. In the picture provided, we can see I am in violation of 1NF. This is due to my inclusion of the "Underlying Condition" column in the "Risk" table. The problem is that the underlying condition is already mentioned in the "Person" table, making it so we have duplicated data.
![Screenie 11](https://dev-to-uploads.s3.amazonaws.com/i/4mwhl1w9kml3h8vxq4fr.PNG)
![screenie 12](https://dev-to-uploads.s3.amazonaws.com/i/0qio41kippiv1i7hji9b.PNG)
 
To make sure this works with 1NF, have to remove the "Underlying Conditions" column in the "Risk" table.

With 2NF, there is a possible problem in the "Behavior" table. The problem is how there are two columns that mention whether or not someone has traveled. To fix this, we can remove the "Travel Destination" column because it does not play a major factor in assessing someone's risk.
![screenie 13](https://dev-to-uploads.s3.amazonaws.com/i/bddtsr5ka0gywrqu35hj.PNG)

For further explanation of the topic, here is a video to help:
{% youtube KDiCNvHgo78 %}
Too Many Headers
Tags: web, programming
Published: 2021-02-01 01:05:24

---
title: Too Many Headers
published: true
date: 2020-10-27 23:09:04 UTC
tags: web,programming
canonical_url: https://www.solarwinter.net/too-many-headers/
---

Also known as "things I've learned today"...

I've been using [Insomnia](https://insomnia.rest/) the last couple of days to test a web API. Insomnia's a great client - it's got lots of features to make life easier. You can set arbitrary headers to whatever value you want, you can import cURL commands, or export requests out to cURL (and lots of other languages). Lots of stuff.

Another of those features is that it understands a number of authentication methods on the web, such as [bearer tokens](https://swagger.io/docs/specification/authentication/bearer-authentication/). That's really handy when you're using [tokens](https://jwt.io/introduction/) to authenticate - you don't have to go and specify the header yourself.

Where it got sticky - and caught me out - is that if you've manually specified an Authorisation header with a Bearer token, that takes precedence over the one you set using the built-in authentication menu. I'm sure you can see where this is going...

If you don't happen to notice the little '1' where you don't expect it, you can be trying to use a (perfectly valid) token and yet sending a completely different one, thus getting a rather confusing result. Delete the extra header and everything springs into life.

Still. At least I didn't actually have any JWT bugs in my code, only in my tool setup. That's something to be pleased with I guess. :-)
Export React child components from single file
Tags: react, beginners, tutorial
Published: 2020-10-27 22:58:38

When coding a React app, I always find it anoying having to import each child component one line at a time, often in several files. This takes lines of code and is not DRY.

```
import Login from './Components/Login';
import Signup from './Components/Signup';
import BlaBla from './Components/BlaBla';
```

Moreover, you cannot do `CTRL + space bar` to see what names are available for import. It would be so much handy if I could do something like:

```
import { Login, Signup, BlaBla } from './Components/Singlefile'; 
```

You can by creating what I call a `exporter file` (I just made it up). The file would be something like:

```
import Login from './Login';
import Signup from './Signup';
import BlaBla from './BlaBla';

export { Login, Signup, BlaBla };
```

So in the rest of the files where Components need to be imported, it is just a line of code:

```
import { Login, Signup, BlaBla } from './Components/Exporter';
```

And you can use the `CTRL + Space bar` within the `{ }` to find what you are looking for without typing. You still need to type all imports in the `Exporter` file but you will only have to do it once.

##Edit##

User [@futureistaken](https://dev.to/futureistaken) pointed me to re-exports. I had no clue about it, so I googled it and found a nice explanation [here](https://javascript.info/import-export#re-export). Basically it is a way to import and export in a single line. In my case, because I am exporting my components with `export default` it would be:

```
export { default as Login } from './Login';
export { default as Signup } from './Signup';
```

Otherwise, it would be:

```
export { Login } from './Login';
export { Signup } from './Signup';
```

Nicer and sweeter!
Robot vs Zombies Live Stream E07
Tags: react, css, javascript, womenintech
Published: 2020-10-27 22:53:54

---
description: We start adding items to the game in the form of a key and randomly placing it on the game board.
---

We start adding items to the game in the form of a key and randomly placing it on the game board.

{% youtube yRdKDTGjHck %}
How to Emit Love!
Tags: emitter, canvas, zimjs, zim
Published: 2020-10-27 22:49:37

Here we use a ZIM particle emitter on the Canvas - check it out on CodePen at https://codepen.io/zimjs/pen/XWKgLzQ.

```javascript
new Emitter({
	 obj:new Label({
		 text:"LOVE", 
		 font:"Reuben", 
		 outlineColor:dark, 
		 outlineWidth:2, 
		 color:[red,red.darken(.2),red.darken(.4)]
	 }),
	 animation:{props:{scale:10}, time:6},       
	 interval:.1,
	 gravity:0,
	 fade:false,
	 shrink:false,
	 force:2,
	 life:6,
	 layers:BOTTOM
}).center();
```

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).
My Online Portfolio 
Tags: react, html, css, javascript
Published: 2020-10-27 22:45:29

My portfolio whit #React.

I have been working on my online portfolio for the last couple of weeks and I am so excited to say that it’s ready for you to see!

I am a beginner in #reactjs  and I need your feedback 
Grinning face

Take a look => https://errafaiy.com/
Repo Github => https://github.com/dever404/portfolio
Enumerable#tally in Ruby 2.7
Published: 2020-10-27 22:43:41

The `tally` method has been added to Enumerable in Ruby 2.7

It's a simple little method and as the name suggests, it tallys things for us! It affords us a much simpler way to group items and count their occurrence.

We could always count the size of an array.

```ruby
fruit_bowl = ["apple", "pear", "pear", "banana", "apple"]

fruit_bowl.count 
=> 4
```

We could count how many of each item an array contained.

```ruby
fruit_bowl.each.count("apple") 
=> 2
```

Now we can easily take stock of our array items with `tally` which will return us a list of items with their respective counts.

```ruby
fruit_bowl = ["apple", "pear", "pear", "banana", "apple"]

sorted_fruit = fruit_bowl.tally
=> {"apple"=>2, "pear"=>2, "banana"=>1}

sorted_fruit["apple"]
=> 2
```

Sweet as 🍓😋
🎉 A Giveaway to Celebrate 50 StyleStage.dev Stylesheets
Tags: css, webdev
Published: 2020-10-27 22:05:11

Thanks to those that participated!

The winners have been announced:

{% twitter 1322530512217481218 %}

---

Wow - [Style Stage](https://stylestage.dev) launched July 10, and less than 6 months later we’ve reached 50 styles!

**Thank you** to everyone who has contributed and shared the project.

> **Style Stage** is a modern CSS showcase styled by community contributions and is open to CSS practitioners of all skill levels to submit a stylesheet. [Check out StyleStage.dev](https://stylestage.dev) for more details on how to contribute!

## Participate in the Giveaway

The giveaway has _two_ possible prizes with nearly equivalent value:

- [An e-book pack from A List Apart](https://abookapart.com/collections) for the Front-End Fundamentals, Front-End Next Steps, and Responsive Design bundles
- [A one-year membership to egghead](https://egghead.io/) (where I am an instructor)

**To participate**, tweet a link to a style along with at least one thing you learned from it. If you don't use Twitter, write a short article and drop the link in the comments! 

Include the hashtag #StyleStage50 and either a 📚 book emoji for the ebook prize, _or_ a 📺 TV emoji for the egghead prize. To celebrate without entering for a prize, simply don't include the emoji.

**Tweets or links must be published by Friday, October 30, at 12 midnight PST** with winners randomly selected on Halloween.

> Now [go check out the 50 styles!](https://stylestage.dev/styles/)