teleren/devto huggingface dataset:
Top courses to learn REACT
Tags: codenewbie, javascript, react, webdev
Published: 2021-06-14 14:57:55

Free Resource
- https://www.youtube.com/watch?v=4UZrsTqkcW4
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1g1e1a25dbsgh7iyxot.png)

- https://www.youtube.com/watch?v=w7ejDZ8SWv8
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yltc3a4uei4vpalo77uy.png)

- https://www.youtube.com/watch?v=Ke90Tje7VS0
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/so8pskhth4ipf10duzsg.png)
 
Learn By Building Projects

- https://www.youtube.com/watch?v=-cMqr9HpZ-Y
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuapm3dgptesei7kueeq.png)


Paid Resource

- https://www.udemy.com/course/react-the-complete-guide-incl-redux/
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmnkdwky0pm0o91m8bix.png)

- https://www.udemy.com/course/react-redux/
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l22jxxv81kpzm9frq86w.png)

- https://www.coursera.org/specializations/full-stack-react
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg4andkbo68v6yls4vvb.png)

Free Code Camp

- https://www.freecodecamp.org/learn/front-end-libraries/
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vapqr9uvk13flxuh80x.png)
 
Top Courses To Learn MERN
- https://dev.to/amritanshu/top-courses-to-learn-mern-2i2g
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pt77uukkdevoi4d9waj1.png)
 

Twitter
- https://twitter.com/NewGenDeveloper
Cloud provider reports and rankings 
Tags: aws, googlecloud, azure, cloud
Published: 2021-06-14 19:04:25

Please take the following survey on popular cloud providers and after completing you'll receive detailed information and free gifts.

http://post.spmailtechnol.com/f/a/-LlNnfAv-H1T8ikL95FViA~~/AABF-gA~/RgRijN8VP0RWaHR0cHM6Ly93d3cuZXhwZXJ0c21hcmtldHJlc2VhcmNoLmNvbS9yZWZlcj9yZWZJZD03ZmNhNzFkMi1kZjM1LTQwZTMtOTc5NS1kMWVkMDEyMjQ1YTdXA3NwY0IKYKYVWqpgpyDRU1IWZGFuaWVsa2FrYWkzQGdtYWlsLmNvbVgEAAAAAA~~
Codeguru-AWS
Tags: aws
Published: 2021-06-15 14:56:29

# About
This project integrates services such as CodeGuru service, CodeCommit, CodeBuild, CodePipeline, ALB and deploys a sample application.
Read more: https://codeguru-codereview-appperformance.workshop.aws/

# Cloud9
Cloud9 setup done.
Region - us-east-1
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj7odsdjk6d2d0d1f0u3.PNG)

# Demo Profiling Group 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9w5gdpbvoi7qitczocz.PNG)

# Cloudformtion stack created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7iqtaiv1qfcg7990j5y.PNG)

# SSH to application to check running application
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whj4ey0dodsyd2fbzexc.PNG)

# Checking DemoProfileGroup
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbki8gu08kq9gpr1nt3f.PNG)

# Demo Flame group
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34ibv228ul27r4hvf7f4.PNG)

# Recommendations report
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr7uibpmwp9d5kpijduo.PNG)

# Codeguru connnected to Github
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/askk5r2nk3p83qlf4r9h.PNG)

# Sample app repository fetched
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60j0igfe4vrybxnw1jue.PNG)

# Copied the java class file to new location
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h87doe1dkiod8ky7hanb.PNG)
Python's Collections Module: Why dictionaries maintain insertion order but printing Counter doesn't?
Tags: python, codenewbie, collections
Published: 2021-06-15 04:47:18

## Do dictionaries in python maintain insertion  order?

Well if your answer was NO, time to update your python knowledge because they do maintain their insertion order in python 3.6+  and completely from python 3.7+

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lg6g8i4apqkzl9s3rba.png)
 
But a `Counter` object doesn't,
```python
from collections import Counter 

nums = [1, 1, 2, 2, 2, 3, 5, 5, 5]

#You would expect the order of counts,
# to be 1->2->3->5
print(Counter(nums))

"""Output: But it didn't work that way!

Counter({2: 3, 5: 3, 1: 2, 3: 1})
"""
```

## Why printing Counter doesn't maintain insertion order despite the fact it is a dict sub-class?

The reason behind this is the `__repr__`  method implementation of Counter object.
The  `__repr__` method decides object's representation when displaying it using `print()` function. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgy562b29dofjbtx7w12.png)

Don't worry if above definition looks complex at first sight :)
 

Let's try to get insights from this method definition, 

Focus on the code inside the `try` block because that's what decides what happens while we print a `Counter`.
 
Aha! we can see the call to `most_common method` and that's what causing the **descending** order. MYSTERY SOLVED🔥 or is it?

 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63hnr6dbwawvgketp2ol.png)

### But...
You might have a doubt. Considering Counter is infact a  sub class of `builtins.dict`, why it doesn't obey dictionary class's   `__repr__`  and maintain insertion order 🤔


## The Method Resolution Order (MRO)

To put it simply, **MRO** defines the *order* in which python interpreter searches a method for a particular object,

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqogygv9ctryppic9t5b.png)

**Method Resolution Order** can be found using `ClassName.__mro__`  attribute or calling `help` on that Class.

It is evident that, `__repr__` of Counter's priority is higher than that of `builtins.dict`  and that's the reason while printing Counter object doesn't maintain insertion order.

Then how the heck `Counter` can maintain insertion order when printing it 😐, How about you find yourself? OR as always

STAY TUNED for the next post 😉
AWS Creating an EC2 Instance
Tags: aws, devops, cloud, tutorial
Published: 2021-06-23 15:20:30

EC2 stands for Amazon Elastic Compute cloud.Simple way you will get a VM in the cloud just like your PC.
Advantage of this EC2 is scalable computing capacity, can launch as many as virtual servers as you required.

Now will see how to configure EC2 in AWS
Before configuration make sure that you have sign up in AWS

**Step1**
click on services on top left and click on EC2 under compute section
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6bvetj0c4g7q5h9aute.png)

**step2** 
click on launch instance
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr18pjqarjl7t4dh1g6h.png)

**setp3**
Here in the search box please search and select for your required operating system that needed to be present in the instance
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2esj9gzmmqkzsxkhynu.png)
**step4**
Choose instance type based on your requirement
and click on next: configure instance details present below

**step5**
select your required region and number of instance and click on add storage
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzdayqmpjz0h3vu3lqlh.png)

**step6**
select the storage and click on add tag
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72ir0pugowaj18lmntb0.png)

**step7**
click on add new tag name 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3iynsdxwxzwkpgajhxd.png)

**step8**
Here configure your security group like click on add rule and add what ever the protocols you needed 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs4bi0nlotox1xdyt5bp.png)

**step9**
click on review and launch instance 
create new .pem file like it creates public key and private key 
where you download private key which is used for connecting to instance from your machine 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hytsnptreilychbdwyr3.png)
make sure that you .pem file only works for the selected region instance only 
click on launch instance

Again click on service , EC2 and click on running instances

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

select  and click on connect on top

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

You will find ssh client and ssh cmd
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nsm92g348t4vbtemcj4.png)

use that in your git bash or terminal to connect to server
Make sure you use 'sudo' if you get permission denied error

Note: Please select free instance if you are new to AWS
Set and Map, do you know them both?
Tags: javascript
Published: 2021-06-15 18:40:52


### Introduction

When you think of data types in Javascript, I sure you can think of Number, String, Boolean, Object, etc.., Yes the above
are two major data types in javascript. in addition, there are many other built-in objects in javascript. there objects are not commonly used, but they are useless, let's look at them together!

---

### Set

#### Basic introduction

Set is actually very smilar to array, and is also an ordered reference object. the main difference with an array is the
value within a set can't be duplicated, while an Array has no such limitation.

```javascript
const myArray = [1, 1, 2, 2];

const mySet = new Set(myArray);
console.log(mySet); // output Set(2) {1, 2}
```

#### Commonly used API

```javascript
// get length of set
mySet.size();
// add value to the set
mySet.add(3);
// delete value of set
mySet.delete(3);
// Iterate Set
for (let items of mySet) {
  console.log(items);
}
```

### How to use

Since set has the unique characteristic of internal values, it's perfect for de-duplication.

```javascript
let myArray = [1, 1, 2, 2];

myArray = Array.from(new Set(myArray));

console.log(myArray); // output [1, 2]

// String de-duplication

let myStr = "Google";

myStr = Array.from(new Set(myStr)).join("");

console.log(myStr); //output: Gogle
```

---

### Map

A map is very similar to object in that they are both key-value pairs.

the main differences are

- The values ​​inside the Map are ordered (consistent with the order when inserted);
- The value type of the map is not limited and can be of any types (includes: function, objects, etc.. )

#### Commonly used API

```javascript
let myMap = new Map();

let array = [1, 2];

myMap.set(array, 2);

// get the lenght of map
myMap.size;

// add values to map
myMap.set("google", "duckduckgo");

// delete value from map

myMap.delete("google"); // return true if successful, false

// Get the value of a key in Map

myMap.get("duckduckgo");

// Iterate through the Map

for (let item of myMap) {
  console.log(item);
}

console.log(myMap); // output Map(1) {Array(2) => 2}
```

---

It is extremely important that the values within a Map are ordered, so if there is a need to ensure that the order of traversal is consistent when traversing Objects, then a Map can be used.
The Child Selector
Published: 2021-06-15 21:44:36

Last week we talked about one of the 4 CSS combinators known as the descendant selector. Every element that matches the second selector will be affected by the CSS rule you create. 

This week we'll go over the child selector. This selector grants you a bit more specificity in your selection for what you want to apply the design changes to. The child selector, notated by the '>' symbol will only select the 'children' of the first selector that matches the second selector. 

```
div > p{

}
```
The above example will effect the p tags that are children of the div.

```
<div>
   <div></div>
   <p></p>
</div>

```

The p tag would be affected in this example. However:

```
<div>
   <div>
     <p></p>
   </div>
</div>

```
With this example, the tags are rearranged a bit. While the p tag is a descendant of the div tag, it is not a child. The child in this case is the second div and the p tag could be thought of as sort of a grandchild to the first div tag. Give it a try and as always....Happy Coding!
Top GitHub Users By Country [Map]
Tags: github, codenewbie, beginners, productivity
Published: 2021-06-16 03:24:10

The daily updated list of top GitHub users by public contributions, total contributions, and the number of followers by country. Don’t forget to share it on social media.

When it comes to open source collaboration across the world, GitHub comes first in our minds. It is a social media network for developers who like to share their source codes with other developers. GitHub consists of 56 million developers, with over 1.9 billion contributes to its 60 million repositories.

But how do you find your place in this vast Octoverse? For that reason, I created this GitHub Action that does not require any databases, hosting, and domain names from third parties. It executes the code every hour and saves changes to the repository.

Go to [Top GitHub Users by Country Map](https://gayanvoice.github.io/top-github-users/index.html)
[![Top GitHub Users By Country Map](https://github.com/gayanvoice/top-github-users-monitor/raw/master/public/images/banner/top-github-users-map.png)](https://gayanvoice.github.io/top-github-users/index.html)
 
Go to [Top GitHub Users by Country](https://github.com/gayanvoice/top-github-users) and don’t forget star ⭐ the repository

*Thanks for reading this article! Leave a comment below if you have any questions. Be sure to follow for the [@gayanvoice](https://twitter.com/gayanvoice) on Twitter and share this post with other programming enthusiasts.*

Gayan shares articles and repositories on JavaScript, Java, and Android.

> You can connect with him on [Medium](https://gayanvoice.medium.com), [Twitter](https://twitter.com/gayanvoice), or [GitHub](https://github.com/gayanvoice)
A merge a day keeps the conflicts away
Tags: continuousintegratio, pullrequest, productivity, practices
Published: 2021-06-17 07:19:29

---
title: A merge a day keeps the conflicts away
published: true
date: 2021-06-16 00:00:00 UTC
tags: continuousintegratio,pullrequest,productivity,practices
canonical_url: https://jhall.io/archive/2021/06/16/a-merge-a-day-keeps-the-conflicts-away/
---

At one of the clients I’m helping, I did something last week that made me feel slightly bad.

I merged a pull request that refactored a couple database methods.

Why did I feel bad?

Because it broke another developer’s work in progress.

He end up with some accidental reversions, due to bad merge conflict resolution, and ultimately ended up completely abandoning a week-old feature branch and starting from scratch.

But then again, I felt only _slightly_ bad. Why only _slightly_?

Because the real failure here wasn’t my refactor, it was the week-old feature branch.

Today I started coaching this other developer on the how-and-why of [_real_ continuous integration](https://jhall.io/whatisci/): the practice of merging into `master` multiple times per day.

I started with the simple guideline: He should be merging a _minimum_ of one of your PRs each day. So I asked him to make _small_ PRs, and not worry if the feature is complete, only that each PR works.

🤞

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to Create a Flutter Range Slider in 10 Minutes
Tags: flutter, rangeslider, widgets, mobile
Published: 2021-06-16 11:53:01

Get an overview of the Syncfusion Flutter [Range Slider](https://www.syncfusion.com/flutter-widgets/flutter-range-slider "Range Slider"). This video explains how to add the Syncfusion Flutter Sliders package and add a Range Slider widget to a Flutter project. It also explains how to set value limits; show data labels, intervals, ticks, enable tooltips, and format the Range Slider values. You will also see how to set date-time values to the Range Slider and show how to render a vertical Range Slider.

{% youtube ndF9XToq4rI %}
How to use "any" and "all" in Python
Tags: python, c, algorithms, list
Published: 2021-06-16 15:22:59

Credential: I do not know, but I, at least, am 4 years experienced; I am still learning C and Assembly.

What is `any` and `all` in Python?

By Python definition, `any` will return if there is an item whereby true in a list, whereas `all` will return if all items are true in a list.

It looks like the operator `or` and `and` for `any` and `all`. It is actually easy to implement in C, Assembly, or any other language.

Here are examples of the function `any`,
```
any([true, false, false])	# Result in True
any([false, false, false])	# Result in False
```

Here are examples of the function `all`,
```
all([true, true, true])		# Result in True
all([true, true, false])	# Result in False
```

Implementation in C for `any`,
```
// My algorithm for "any"
int any(int* arr, int size) {
	int i = 0, t = 0;
	for (; i < size - 1 ; i += 2) {
		t += arr[i] + arr[i + 1];
	}
	return (t + arr[size % i]) && 1;
}
```
With a `O(log n)` time complexity and `O(1)` space complexity.

Implementation in C for `all`,
```
// My algorithm for "all"
int all(int* arr, int size) {
	int i = 0, t = 0;
	for (; i < size - 1 ; i += 2) {
		t += arr[i] + arr[i + 1];
	}
	return (t + (i % size && arr[size % i]) > (i >> 1));
}
```
With a `O(log n)` time complexity and `O(1)` space complexity.

I will explain how the algorithm works in another post.

How to use `any`,
```
# Real world application
if any(person.alive for person in people):
	myself.shout("Who is dead?")
```

How to use `all`,
```
# Real world application
if all(person.alive for person in people):
	myself.shout("We are safe!")
```
UX-Toolbox: Aesthetic-Usability-Effect
Tags: uxengineering, ux, design, firstyearincode
Published: 2021-07-02 06:41:34

One of the best ways to improve your product or help it stand out against competition, is to ensure the user experience is top-notch.

By applying different UX-Effects, you can ensure that your users are getting the most out of your product.

In this article, we will examine the Aesthetic-Usability Effect and see how it can improve your user experience.

#Take-Away
Here are some actionable points you can take with you:
* Crafting a beautiful user interface is worth it, as it can improve the perception of your product and brand
* Make sure that your product performs the function it is meant to perform - create a balance between the beauty and function of your design
* Spotting the aesthetic usability effect during user research will prevent usability issues from creeping into your product

#What is this Aesthetic-Usability-Effect all about?
The Aesthetic-Usability Effect describes the case where people perceive design that they feel is visually pleasing to them, as design that works better.

Research shows that the more beautiful participants rated the user interface, the more usable they perceived the user interface to be.

This means that when a person finds the design of an app pleasing, they will be more likely to believe that the product works better.

This is because the pleasing design causes a positive reaction in the person's brain.

#Impact
One of the positives to take away from this effect is that it can lead people to be more forgiving of **minor** usability issues, when they find your product's visual design good.

I highlighted the word **minor** because a good visual design won't save you, if the user can't actually perform the function your product sets out to perform.

All you have to do is make sure your product works as intended and make it look good - that's it?

Not quite.

A more negative aspect of this effect is that it can get in the way of your usability testing.

Remember that good design makes people more forgiving?

Well, that can mask usability issues during testing, leaving them to be undiscovered.

It is very important that whoever is conducting the user research knows what this effect is and how to spot it.

If you see the user struggling to find information on the screen or perform a particular action, this is a good sign that the usability is a bit off.

When the user then starts to comment on the beautiful user interface and the colour scheme, you know that they have fallen prey to the aesthetic-usability effect.

The carefully crafted and beautifully designed user interface should enhance the already great function of your product. Finding a good balance between form and function is important when building great products.

Let me know in the comments what topics in UX-Design you would like to learn about.
Server To Server Google Api Credentials Without a Json File in .Net
Published: 2021-06-17 14:44:11

All Google documentation indicates that you need a special JSON file for configuration of google calls. This breaks the standard configuration pattern that .Net uses (IConfiguration abstraction/layers, IOptions injection, etc.)

After poking around at the classes available in the Nuget Package, I was able to hook this all up for server side calls in a very simple way.

To cut to the chase, here's the code, note that this is code for interacting with the Calendar API but it'll be similar for other API services.

```
public sealed class CalendarEventRepository : ICalendarEventRepository
{
  private readonly GoogleConfiguration _configuration;
  public CalendarEventRepository(IOptions<GoogleConfiguration> options)
  {
    _configuration = options.Value;
  }
  public async Task<IEnumerable<CalendarEvent>> GetUpcomingCalendarEvents(CancellationToken cancellationToken)
  {
    var credentialJson = new
    {
      type = "service_account",
      project_id = _configuration.ProjectId,
      private_key_id = _configuration.PrivateKeyId,
      private_key = _configuration.PrivateKey.Replace("\\n","\n"),
      client_email = _configuration.ClientEmail,
      client_id = _configuration.ClientId,
      auth_uri = "https://accounts.google.com/o/oauth2/auth",
      token_uri = "https://oauth2.googleapis.com/token",
      auth_provider_x509_cert_url = "https://www.googleapis.com/oauth2/v1/certs",
      client_x509_cert_url = "https://www.googleapis.com/robot/v1/metadata/x509/" + Uri.EscapeUriString(_configuration.ClientEmail)
    };
    var credentials = GoogleCredential.FromJson(JsonConvert.SerializeObject(credentialJson)).CreateScoped(new[] { CalendarService.Scope.Calendar });

    var service = new CalendarService(new BaseClientService.Initializer()
    {
      ApplicationName = "<Your Application Name>",
      HttpClientInitializer = credentials
    });
    var eventRequest = service.Events.List(_configuration.CalendarId);
    eventRequest.MaxResults = 10;
    var result = await eventRequest.ExecuteAsync();
    return result.Items.Select(i => new CalendarEvent(HashToGuid(i.Id), i.Summary, DateTimeOffset.Parse(i.Start.Date), DateTimeOffset.Parse(i.End.Date))).ToArray();
  }
  
  private Guid HashToGuid(string input)
  {
    using (MD5 md5 = MD5.Create())
    {
      byte[] hash = md5.ComputeHash(Encoding.Default.GetBytes(input));
      return new Guid(hash);
    }
  }
}
```

The important points to note are:
- You can use `GoogleCredentials.FromJson` and assign that to `HttpClientInitializer`
- I did a `.Replace("\\n","\n")` on the private key because many configuration providers don't support new lines
- The variables you'll need to add into configuration are: `ProjectId`, `PrivateKeyId`, `PrivateKey`, `ClientId`, `ClientEmail` (and `CalendarId` if you're using calendars)
- The Google Nuget Package I'm using here is `Google.Apis.Calendar.v3`, version `1.52.0.2312`