teleren/devto huggingface dataset:
Best Game to play in Quarantine [Covid-19]
Tags: unity3d, gamedev, spidersolitaire
Published: 2021-01-31 16:55:48

Since the coronavirus has hit the globe, people are quarantined. All the governments have requested their citizens to stay at home and avoid getting out of their homes as it is too dangerous. More often, heavy fines have been imposed on people in case of going out.
Coronavirus has made our life so limited, and one can’t move to another area. The pandemic is still not in control, and the number of COVID-19 cases is also increasing. In the going circumstances staying at home has made a normal life so much boring.
With the start of winter, the 2nd layer of Coronavirus has hit the world, and people are strictly advised to stay at their places and avoid any outdoor activities. This can be quite difficult for many individuals, so the best practice is to keep ourselves busy.
The best way to do it is to play some games. You may think that there are only a few indoor games and <a href="https://en.wikipedia.org/wiki/PC_game">computer games</a> are just bad for our health. But it is not the case. In reality, many computer games can not only entertain us but also beneficial for our minds.
We can learn a lot from such games. Spider solitaire is one of them. We can have quality time and also learn a lot from it.
It can help us develop many strategies and, on the same time, give us quality time to enjoy on our own.

You can play this game on <a href="https://jeu-spidersolitaire.fr/">https://jeu-spidersolitaire.fr/</a>

So, stay home, stay safe, and enjoy the game. :)

<b>How can a game help us in quarantine?</b>
The going pandemic has forced the people to isolate themselves. In this time, a game can be handy to make us busy and avoid overthinking, as this can sometimes be dangerous. A game makes us busy and help us enjoy the alone moments.
We know that games can be dangerous for some people, but there are also those games available, which can be a healthy activity. A learning game that makes you better in many aspects of your daily life. It also offers you a good time, even while in isolation.

<b>Best game for a person affected by CORONA virus</b>
People who are affected by the virus can’t even think of going outside. They can explore computer games at this time and choose a game for them.
Spider solitaire is a kind of game which you can enjoy on your own. You don’t need anyone to play with you. Just open your computer, download the game, and start enjoying it. You can also enjoy the game online without even downloading it.

<b>Is Spider Solitaire only for kids?</b>
Spider one is a game for everyone; no matter what age group they belong to, they will enjoy this classic game. The simple rules of this game have made this an all-time favorite game.
Day 30 - Minimize Deviation in Array
Tags: leetcode, python, challenge
Published: 2021-01-31 16:52:10

## The Problem

>You are given an array `nums` of `n` positive integers.

>You can perform two types of operations on any element of the array any number of times:

* If the element is __even, divide__ it by `2`.
For example, if the array is `[1,2,3,4]`, then you can do this operation on the last element, and the array will be `[1,2,3,2]`.

* If the element is __odd, multiply__ it by `2`.
For example, if the array is `[1,2,3,4]`, then you can do this operation on the first element, and the array will be `[2,2,3,4]`.

>The __deviation__ of the array is the __maximum difference__ between any two elements in the array.

>Return the __minimum deviation__ the array can have after performing some number of operations.

 

__Example 1:__

```
Input: nums = [1,2,3,4]
Output: 1
Explanation: You can transform the array to [1,2,3,2], then to [2,2,3,2], then the deviation will be 3 - 2 = 1.
```

__Example 2:__

```
Input: nums = [4,1,5,20,3]
Output: 3
Explanation: You can transform the array after two operations to [4,2,5,5,3], then the deviation will be 5 - 2 = 3.
```

__Example 3:__

```
Input: nums = [2,10,8]
Output: 3
```

__Constraints:__

* `n == nums.length`
* `2 <= n <= 105`
* `1 <= nums[i] <= 109`


## Tests

```python
import pytest
from .Day30_MinimizeDeviationInArray import Solution

s = Solution()


@pytest.mark.parametrize(
    "nums,expected",
    [
        ([1, 2, 3, 4], 1),
        ([4, 1, 5, 20, 3], 3),
        ([2, 10, 8], 3),
    ],
)
def test_minimum_deviation(nums, expected):
    assert s.minimumDeviation(nums) == expected

```

## Solution

```python
from typing import List
import heapq
import math


class Solution:
    def minimumDeviation(self, nums: List[int]) -> int:
        vals = []
        minimum = math.inf
        minimum_deviation = math.inf

        for n in nums:
            if n % 2 == 0:
                vals.append(-n)
                minimum = min(minimum, n)   
            else:
                evened = n * 2
                vals.append(-evened)
                minimum = min(minimum, evened)

        heapq.heapify(vals)

        while vals:
            e = -heapq.heappop(vals)
            minimum_deviation = min(minimum_deviation, e - minimum)

            if e % 2 != 0:
                return minimum_deviation
            e = e // 2
            minimum = min(minimum, e)
            heapq.heappush(vals, -e)

        return minimum_deviation
```

## Analysis

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u43luc6s9repoj0c3oqn.png)
Lazy Add IAM Access Key
Tags: aws, iam, devops, cloudopz
Published: 2021-01-31 16:47:03

Use `expect` programming language to add you IAM access key by one enter

## What’s In This Document 
- [Write the code](#-Write-the-code)
- [Run example](#-Run-example)

### 🚀 **[Write the code](#-Write-the-code)**
[add_key.sh](https://github.com/vumdao/add-iam-key/add_key.sh)

```
#!/usr/bin/expect

set access_key [lindex $argv 0]
set screte_key [lindex $argv 1]

spawn aws configure

# Add access key
expect "]:"
send "$access_key\r"

# Add secrete key
expect "]:"
send "$screte_key\r"

# Default region
expect "]:"
send "\r"

# Default output format
expect "]:"
send "\r"

interact
```

### 🚀 **[Run example](#-Run-example)**
- First arg is access key
- Second one is secrete key

```
⚡ $ ./add_key.sh a1234a b4567b
spawn aws configure
AWS Access Key ID [****************XXXX]: a1234a
AWS Secret Access Key [****************YYYY]: b4567b
Default region name [ap-northeast-2]: 
Default output format [None]: 

⚡ $ aws configure list
      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile                <not set>             None    None
access_key     ****************234a shared-credentials-file    
secret_key     ****************567b shared-credentials-file    
    region           ap-northeast-2      config-file    ~/.aws/config
```

### **Visit www.cloudopz.co to get more**


<h3 align="center">
  <a href="https://dev.to/vumdao">:stars: Blog</a>
  <span> · </span>
  <a href="https://vumdao.hashnode.dev/">Web</a>
  <span> · </span>
  <a href="https://www.linkedin.com/in/vu-dao-9280ab43/">Linkedin</a>
  <span> · </span>
  <a href="https://www.linkedin.com/groups/12488649/">Group</a>
  <span> · </span>
  <a href="https://www.facebook.com/CloudOpz-104917804863956">Page</a>
  <span> · </span>
  <a href="https://twitter.com/VuDao81124667">Twitter :stars:</a>
</h3>
Make a website with a single HTML file
Tags: html, css, webdev, javascript
Published: 2021-01-31 16:46:20

There is a clever way to create a whole website with just *a single* HTML, some CSS, and *no* JS. Did you know?

# Step 1
Create an empty HTML5 website:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```

# Step 2
Add some `anchors` and `sections` with `ids` for the pages:
```html
...
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#blog">Blog</a>
        <a href="#about">About</a>
    </nav>

    <main>
        <section id="home">
            <h1>Home</h1>
            <p>This is the homepage!</p>
        </section>
        <section id="blog">
            <h1>My Blog</h1>
        </section>
        <section id="about">
            <h1>About Me</h1>
        </section>
    </main>
</body>
```

# Step 3
Add some CSS to toggle the pages:
```html
<head>
...
    <style>
        section {
            display: none;
        }

        section:target {
            display: block;
        }
    </style>
</head>
```

# Step 4
There is no step 4. All that left is to customize it.

----

And that's it. You have a website ready in just a few steps, no JS used, no complex framework, just an HTML file, and a text editor. The magic behind this is by utilizing the anchor links and the `:target` pseudo selector to switch between the pages without the help of any JS.

> The `:target` pseudo selector matches when the hash in the URL and the id of an element are the same.

*Reference: [CSS-Tricks](https://css-tricks.com/a-whole-website-in-a-single-html-file/)*
Daily Coding Problem #634
Published: 2021-01-31 16:37:04

You are given a histogram consisting of rectangles of different heights. These heights are represented in an input list, such that `[1, 3, 2, 5]` corresponds to the following diagram

![Screenshot from 2021-01-31 22-02-54](https://dev-to-uploads.s3.amazonaws.com/i/xyp7xvexxlb0o9c9y69v.png)
 
```c++

#include<iostream>
using namespace std;

int main(){
    int n;
    cout << "Enter size of the array -> ";
    cin >> n;
    int a[n],max = 0;

// input
    for(int i=0;i<n;i++){
        cin >> a[i];
        if(a[i] > max){
            max = a[i];
        }
    }
// output
    for(int i=max;i>0;i--){
        for(int j=0;j<n;j++){
            if(a[j] >= i)
                cout << "x";
            else
                cout << " ";
        }
        cout << endl;
    }
}

```

`Output:`
![Screenshot from 2021-01-31 22-05-50](https://dev-to-uploads.s3.amazonaws.com/i/8j5mojq6ebx22maelysx.png)
Awesome Tagged Template Literals
Tags: javascript, macros, typescript, syntax
Published: 2021-01-31 16:45:06

---
title: Awesome Tagged Template Literals
published: true
date: 2021-01-31 16:36:56 UTC
tags: js,macros,typescript,syntax
canonical_url: https://stereobooster.com/posts/awesome-tagged-template-literals/
---

Template literals is a pretty simple thing - it is a multi-line string with interpolations:

```js
// instead of this
"old-school string " + variable + "\nmore text";

// you can write this
`template string ${variable}
more text`;
```

Tagged template literal is a function (tag) attached to a template literal. For example:

```js
css`
 color: red;
`;
```

- this function can parse CSS and return it as a JS object
- or it can insert it in the DOM and return the corresponding HTML class
- or it can run PostCSS over the input
- etc.

**Pretty simple idea, but it opens a fountain of creativity.**

## TTL + Syntax highlighting and IntelliSense

- [SQL tagged template literals](https://github.com/frigus02/vscode-sql-tagged-template-literals) - A VS Code extension, which enables syntax highlighting for template literals tagged with an sql function in JavaScript and TypeScript files
- [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) - Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
- [vscode-styled-components](https://github.com/styled-components/vscode-styled-components) - Syntax highlighting for styled components in JavaScript and TypeScript. Detailed CSS IntelliSense while working in styled strings.
- [vscode-graphql](https://github.com/graphql/vscode-graphql#gqlgraphql-tagged-template-literal-support-for-tsx-jsx-ts-js) - Syntax highlighting (type, query, mutation, interface, union, enum, scalar, fragments, directives). Autocomplete suggestions
- [vscode-comment-tagged-templates](https://github.com/mjbvz/vscode-comment-tagged-templates) Adds basic syntax highlighting for JavaScript and TypeScript tagged template strings using language identifier comments

## TTL + TypeScript

See [Awesome Template Literal Types](https://github.com/ghoullier/awesome-template-literal-types)

## TTL + babel macros

See [Awesome babel macros](https://github.com/jgierer12/awesome-babel-macros)

## More

See [Awesome Tagged Templates](https://github.com/kay-is/awesome-tagged-templates)
Best .NET Posts This Week: 31st January 2021
Tags: dotnet, csharp, dotnetcore, aspnet
Published: 2021-01-31 16:32:39

---
title: Best .NET Posts This Week: 31st January 2021
published: true
description: Here are some of the best .NET, C# and ASP NET posts from this week.
tags: dotnet,csharp,dotnetcore,aspnet
cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1612110475104/F-bIu-F-R.png
canonical_url: https://samwalpole.com/best-net-posts-this-week-31st-january-2021
---

Here are some of the best .NET, C# and ASP NET posts from this week.

# This Weeks Articles
## [.NET 5 Source Generators Jump Start](https://khalidabuhakmeh.com/dotnet-5-source-generators-jump-start)
By Khalid Abuhakmeh
> You may have heard about a new feature in .NET 5 called Source Generators. Developers can now generate dynamic code at compile time that .NET will weave into a consuming assembly. The possibilities are endless and will most likely have a profound impact on how we write applications and, ultimately, the performance we can expect from our apps. That said, getting started with source generators can seem a bit opaque. In this post, we’ll start with nothing and go through creating a source generator ready solution.

## [How to Create Your .NET Project Template](https://auth0.com/blog/create-dotnet-project-template/)
By Andrea Chiarelli
> .NET comes with several project templates that help to quickly scaffold applications in different contexts. You may need to create your own project template in specific contexts. The article explains how you can create your own project template to use with .NET CLI and Visual Studio.

## [Self-hosted integration tests in ASP.NET](https://blog.ploeh.dk/2021/01/25/self-hosted-integration-tests-in-aspnet/)
By Mark Seemann
> In 2020 I developed a sizeable code base for an online restaurant REST API. In the spirit of outside-in TDD, I found it best to test the HTTP behaviour of the API by actually interacting with it via HTTP. Sometimes ASP.NET offers more than one way to achieve the same end result. For example, to return 200 OK, you can use both OkObjectResult and ObjectResult. I don't want my tests to be coupled to such implementation details, so by testing an API via HTTP instead of using the ASP.NET object model, I decouple the two. You can easily self-host an ASP.NET web API and test it using an HttpClient. In this article, I'll show you how I went about it.

# You Might Also Like
- [Introduction to Test Driven Development (TDD) and AAA Testing using xUnit](https://samwalpole.com/introduction-to-test-driven-development-tdd-and-aaa-testing-using-xunit)
- [Writing decoupled code with MediatR: The Mediator Pattern](https://samwalpole.com/writing-decoupled-code-with-mediatr-the-mediator-pattern)

["Ten++ Ways to Make Money as a Developer" eBook](https://gumroad.com/a/633205875)

I post mostly about full stack .NET and Vue web development. To make sure that you don't miss out on any posts, please follow this blog and [subscribe to my newsletter](https://samwalpole.com). If you found this post helpful, please like it and share it. You can also find me on [Twitter](https://twitter.com/dr_sam_walpole).
#100DaysOfCode 😍 (FULLSTACK CRUD APP MERN STACK)
Published: 2021-01-31 16:07:24

Today is the day 42 of my challenge #100DaysOfCode 😎

FullStack Crud App Using Mern Stack 🤩

Repo : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day42
Content to learn C#9
Tags: dotnet, csharp
Published: 2021-01-31 16:05:01

<sub><span>Photo by <a href="https://unsplash.com/@tonyphamvn">Tony Pham</a> on <a href="https://unsplash.com/s/photos/chicks">Unsplash</a></span></sub>

I try to gather content to learn about C# 9:
- [C# 9 in a Nutshell](https://www.amazon.fr/C-9-0-Nutshell-Definitive-Reference/dp/1098100964/ref=sr_1_4) written by Joseph Albahari
- [What do we like in C# 9?](https://www.youtube.com/watch?v=-ao0Tm5LseU) from Dotnetos Webinar
- [C# 9 Language Features](https://www.youtube.com/watch?v=qiuzCWwYe0Y) by Dotnet youtube channel
- [5 new features in C# 9](https://www.youtube.com/watch?v=f0YeVirKPfw) by Tim Corey
- [Microsoft docs](https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-9)


Hope this helps !
How to video from Instagram in 2021
Published: 2021-01-31 16:03:30

There are many ways to download Instagram video & photo in 2021. but most of are complicated and not easy to use, so rid out of this problem here I am going to introduce the best app for android use with help of this you can download anything from Instagram

App link - https://play.google.com/store/apps/details?id=storiesig.videodownloaderforinstagram.instatomp4
My first Full Stack eCommerce MERN app...
Tags: javascript, react, node, showdev
Published: 2021-01-31 15:58:55

Hello developers!
I have taught myself **MERN Stack developement**. And to put my skills to test, I started working on my basic full stack project. The idea was to build a **_buy and sell_** website which included **_CRUD operations_** and **_user authentication_**.
You can visit the website [by clicking on this link](https://ozcom.herokuapp.com).
Publishing front-end app with React Router on Surge
Tags: reactrouter, surge, react
Published: 2021-01-31 15:50:32

---
title: Publishing front-end app with React Router on Surge
published: true
description: How to make react router work on Surge
tags: reactrouter, surge, reactjs
//cover_image: https://direct_url_to_image.jpg
---
Surge is a great platform offering easy publishing for the web clients, it's free, allows custom subdomains and has great CLI tools. 

One issue you might find though is that when trying ti publish a project with react router the routes are not working if hit directly form the url. 

After building an optimised build version with `npm run build` and publishing the build folder with `surge` command the homepage is displayed with no problems and if you have a navigation with routes it works as well. 

But as soon as you want to go directly to a specific url, let's say you have "About us" page with `/about` route the server gives back 404 error since naturally a file about.html doesn't exist. 

[Here is an example](https://react-router-with-dynamic-route.surge.sh/) of published simple client with navigation and the router. A you can see, clicking the nav items is working, bu if you try to go directly to let's say [https://react-router-with-dynamic-route.surge.sh/about](https://react-router-with-dynamic-route.surge.sh/about) we can see a lovely 404. 

In the same way any attempts to share any url different from home will send user to 404. 

There is an easy fix though -- simply make a copy of `index.html` in the `build` folder and name it `200.html`. After that publish on Surge normally and the problem would be fixed, your router is working properly. 

[Here is a working version](http://react-router-with-dynamic-route-with-fix.surge.sh/about). Now here we can go directly to any route like [http://react-router-with-dynamic-route-with-fix.surge.sh/about](http://react-router-with-dynamic-route-with-fix.surge.sh/about) and it will work just fine.

Being said that here is the list of step-by-step terminal command to publish your client project with router successfully. From the root folder of you project do:

```
npm run build
cd build
cp index.html 200.html
surge
```

Success!
React Deep Dive: It's Declarative
Tags: react, javascript, webdev
Published: 2021-01-31 15:37:17

This year, I'm starting to read through the React docs and [take notes as I go](https://dev.to/laurenmbeatty/react-deep-dive-153e) so that I can be a better technical communicator. 

## Declarative

In looking at the [React website](https://reactjs.org/), one of the first things you'll see is that React is "declarative". I felt like I had only a basic understanding of what that meant. I mean, you just declare it, right? 😂

I thought I might need a better understanding than that. I found a [great explanation](https://ui.dev/imperative-vs-declarative-programming/) from Tyler McGinnis, that really informed my understanding, and *also* helped me understand why learning React felt like such a huge departure from jQuery-land. 

So, what does it mean when we say that React is a *declarative* programming language? 

> *Declarative* means that we *describe* the end state of our program without dictating the steps to get there. 

What does that look like?

``` javascript
// Describe a BasicButton component
const BasicButton = ({onClick, buttonText}) => {
  return (
    <button onClick={onClick}>{buttonText}</button>
  )
}

// later, when using BasicButton
<BasicButton
  onClick={() => setDrawerOpen(!open)}
  buttonText="Toggle"
/>
```
Here I'm describing to React what I want a `BasicButton` component to look like. It should render a button, it should have an `onClick` handler, and `buttonText`. When I use it, I can pass a function to `onClick` and some text to the button. I'm not telling React *how* to do it, I'm just describing what I'd like. I'm leaving the implementation details to React. Notice, too, that I can use this button anywhere, it doesn't rely on any specific context.

## Imperative
How is that different from imperative? When I think of imperative, I think of a jQuery implementation like this:

``` javascript
$('button').on('click', () => {
  $('#drawer').toggleClass('open')
})

// Um, I have not used jQuery in quite some time. That was hard.
```
Here I'm engaging in direct DOM manipulation. When I click on the `button`, find the element that has an id of `drawer`, and then add or remove the class `open` from that element. I'm giving specific instructions for *how* I want this to happen. Do this thing, and then do that other thing. This code really depends on the existence of an element that has an id of `drawer`. It's not context-independent.

When learning React, I think that was the biggest challenge for me, is that switch from a more imperative style to a declarative style. I was used to directly manipulating the DOM and telling it the steps to follow, as opposed to just describing the UI state(s) I wanted.

(Here's [another read](https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2#:~:text=Declarative%20programming%20is%20a%20programming,that%20change%20a%20program's%20state.) that was super helpful)
บันทึก React Hook Cheat Sheet
Tags: react
Published: 2021-01-31 15:31:55

ขอบคุณเพจ [codenothing13](https://www.facebook.com/codenothing13/ ) ผมเขียนบันทึกไว้เวลาลืมจะได้กลับมาดู

![57297791_2204539736464229_2467886992805855232_o](https://dev-to-uploads.s3.amazonaws.com/i/623abqsyv8848fnhgtjz.png)
![57644706_2204539883130881_2109626809820643328_o](https://dev-to-uploads.s3.amazonaws.com/i/dska66do727pwqot178t.png)
![57129631_2204539816464221_3615284636894101504_o](https://dev-to-uploads.s3.amazonaws.com/i/xbrums5lwkspxls4k7wq.png)
![57159895_2204539793130890_4548136299336302592_o](https://dev-to-uploads.s3.amazonaws.com/i/74odzwr0t30g0091g8xm.png)
![57343524_2204539846464218_8524288190134091776_o](https://dev-to-uploads.s3.amazonaws.com/i/p03a0za8kbfoqy0pdop9.png)
![57504453_2204539833130886_7786347112861532160_o](https://dev-to-uploads.s3.amazonaws.com/i/d9yz8dizi70h5vswwaiy.png)
![57340990_2204539776464225_6789119663088336896_o](https://dev-to-uploads.s3.amazonaws.com/i/z220jzsx1msn1pcvwbzu.png)
![57172515_2204539759797560_6697107148482019328_o](https://dev-to-uploads.s3.amazonaws.com/i/06zhkdhubx2aftqqv56x.png)
![56890445_2204539859797550_5366718089125691392_o](https://dev-to-uploads.s3.amazonaws.com/i/5eszbz7xew0187ox05gw.png)
![57044204_2204539873130882_711753755430748160_o](https://dev-to-uploads.s3.amazonaws.com/i/qcigukl2yrbqj626puzk.png)
          

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

  
useDeepCompareEffect ใช้แก้ปัญหา การ compare object

-------