teleren/devto huggingface dataset:
The React Testing Masterclass
Tags: react, testing, javascript, typescript
Published: 2020-07-15 09:22:06

---
title: The React Testing Masterclass
published: true
description: Learn the best practices and strategies to effectively test your react components and applications.
tags: react,testing,javascript,typescript
cover_image: https://res.cloudinary.com/bahdcoder/image/upload/v1594419249/REACT_TESTING_MASTERCLASS_IMAGE_adzoxt.png
canonical_url: https://katifrantz.com/course/react-testing-masterclass
---

### Learn the best practices and strategies to effectively test your react components and applications.

[Get the free course here](https://testingreact.katifrantz.com)

Hi 👋 I' m Kati Frantz , and I've built tons and tons of React applications. Everyone can ship software, but shipping quality software requires a lot of quality assurance and best practices.

A professional ships confident, well tested, and stable code.

This is the standard, but testing react applications can be painful and complex. What are the best practices ? What should I test ? How can I test a react router based, redux store connected stripe checkout form 😱😭?

Be glad you found this course, because this course will show you the best practices for testing components and full scale applications.

We'll be testing an e-commerce application 🛒💰 with Stripe Checkout. Here are some of the features we'll be testing:

- 🍄 Reusable checkboxes

- 🌴 External API powered products listing

- 🌐 Product tiles accessibility

- 🌾 Off canvas filter menu (with portals)

- 🌲 Prevent scroll on canvas open

- 🎏 Event listener cleanups

- 🔕 Debounced products search

- 🍉 Context dependent components

- 🔐 React router page navigation

- 📪 Redux connected components and pages

- 🏄 Custom hooks

- 👜 Checkout modal

- 🍇 Stripe checkout

And so much more ! I've curated a real-world project so you learn techniques and strategies you can use in your companies starting today !

[Get the free course here](https://testingreact.katifrantz.com)
How to deploy a react native project on cPanel?
Tags: react, reactnative, cpanel, deploy
Published: 2020-07-15 09:20:51

Hello everybody. I created a react native project i can run it on web, android, and ios. also i can build it for android and ios platform. but i can't deploy my react native project for cpanel to publish that on web. is there any way to build my react native project for web platform?
Free Terraform one-to-one consultancy session (30 mins)
Tags: devops, architecture, codenewbie
Published: 2020-07-15 09:16:15

Are you getting started with terraform or need to migrate your existing architecture to it and need to get advice on best practices and how to integrate it with your CI/CD pipeline?

Schedule a free one-to-one call with one of the volunteers of GetAdvice

https://getadvice.github.io/christian.melendez.html

Disclaimer: I'm the guy behind GetAdvice (volunteers are needed!!). This is a way to promote getadvice.github.io and get more volunteers and users into the site too.
How to convert image/ Canvas to Table？
Published: 2020-07-15 09:05:38

Recently, I was making a requirement that the back end return a bunch of data, and I needed dynamic auto-merge, which was very complicated, so I chose to use div to dynamically present the table instead of using the native table element.
However, I needed to send the table as the content of the email, and sending screenshots was not friendly, so I came up with the idea of converting the picture to the table.

**Is there a good solution?**

* Able to merge automatically
* Able to recognize text (Chinese and English)
MySQL Database Documenter

Published: 2020-07-15 09:04:57

The Documenter feature of dbForge Studio for MySQL is a MySQL database documentation tool that automatically generates documentation in the HTML, PDF, and Markdown file formats. It will take you just a couple of minutes and a few clicks to document multiple MySQL and MariaDB databases with all their objects and properties. [Documenter](https://www.devart.com/dbforge/mysql/studio/documenter.html) also includes a wide range of options to customize the generated documentation file to meet your specific requirements.

Documenter extracts an extensive database information, including MySQL object types, their details, and properties, as well as inter-object dependencies and DDL codes.

The tool allows selecting individual MySQL objects and their properties for documenting. Documenter also includes a wide collection of style templates and allows changing the documentation layout with various Bootstrap themes.

You can generate documentation in three file formats: HTML, PDF and Markdown. HTML and Markdown suit for databases to be published on the web, PDF is good for distributing to various systems and devices. All formats are searchable, which is very convenient especially for large databases.

Search across the generated documentation files for MYSQL database objects. As you type the name of a required object in the search field, Documenter highlights the matching text in the object tree. You can also navigate throughout the documentation via build-in hyperlinks.
Simple tag trait for Laravel models
Tags: laravel, snippet
Published: 2020-07-15 08:57:28

---
title: Simple tag trait for Laravel models
published: true
description: 
tags: ["laravel","snippet"]
//cover_image: https://direct_url_to_image.jpg
---

Tags are very common in any application. This snippet leverages Eloquent's polymorphism to give any model taggable capabilities.

## Usage

```PHP
$model->addTag('trending')->addTag('wonderful');
$model->hasTag('trending'); // true
$model->hasAnyTag('important', 'valuable', 'woderful'); // true
$model->removeTag('trending');
```

## Implementation

app/HasTags.php

```PHP
<?php

namespace App;

use App\Tag;
use Illuminate\Support\Arr;

trait HasTags
{
    public function tags()
    {
        return $this->morphToMany(Tag::class, 'taggable');
    }

    public function hasTag($tag): bool
    {
        return $this->tags()->get()->contains(Tag::wrap($tag));
    }

    public function hasAnyTag(...$tags): bool
    {
        foreach (Arr::flatten($tags) as $tag) {
            if ($this->hasTag($tag)) {
                return true;
            }
        }

        return false;
    }

    public function addTag(...$tag): void
    {
        foreach (Arr::flatten($tag) as $tag) {
            $this->tags()->attach(Tag::wrap($tag));
        }
    }

    public function removeTag(...$tag): void
    {
        foreach (Arr::flatten($tag) as $tag) {
            $this->tags()->detach(Tag::wrap($tag));
        }
    }
}
```

---

app/Tag.php

```PHP
<?php

namespace App;

use App\HasName;
use Illuminate\Database\Eloquent\Model;

class Tag extends Model
{
    use HasName;

    protected $fillable = [
        'name',
    ];

    public function __toString()
    {
        return (string) $this->name;
    }

    public function posts()
    {
        return $this->morphedByMany(Post::class, 'taggable');
    }

    public function setNameAttribute($value)
    {
        if (! preg_match($regex = '/^[a-z0-9_]+$/', $value)) {
            throw new \InvalidArgumentException("invalid tag format: {$value} (it should match $regex)");
        }

        $this->attributes['name'] = $value;
    }
}
```

*Note:* for the HasName trait, see [this post](https://dev.to/bdelespierre/identify-models-using-their-name-with-laravel-15lo)

---

app/Post.php

```PHP
<?php

namespace App;

class Post
{
    use Taggable;

    // ...
}
```

## Bonus

Here's a JavaScript function to cleanup a tag input in the front-end:

```JavaScript
function cleanupTag(tag) {
    // see https://stackoverflow.com/a/37511463/381220
    return tag.toLowerCase()
        .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
        .replace(/[^a-z0-9_]*/g, '');
}
```
How To Create A Flutter Chrome Extension
Tags: flutter, tutorial, webdev, computerscience
Published: 2020-07-15 08:43:31

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

## Intro

Chrome extension are used in chrome (obviously), and they allow the user to have an app in a small overlay on the top right of their chrome window. Some popular chrome extension include the likes of: grammerly, honey, JSON Viewer etc. 

Today I will be showing how to create a simple chrome extension that runs a flutter app. The end result of what we are looking at looks like this:

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

Without any more hesitation let's get to it.

## Tutorial Portion

The first thing that needs to be done after you create the project is restructuring the manifest file located in the web folder. We need to format our app to be a chrome extension, so the manifest will be:

{% gist https://gist.github.com/Mattds825/b78aa329aa4dcfd9d2fbf4d0d3b38645 %}

The next step is to remove the script that calls creates the flutter app from index.html, and but it in another file I will name flutter_app.htm

{% gist https://gist.github.com/Mattds825/6b486c0e58a5de50ca7a41128784c6d5 %}

This is because chrome extensions don't like it when you run scripts in index.html. We will call the created flutter_app.htm file as an iframe in index.htm:

{% gist https://gist.github.com/Mattds825/80bce4625569fec4ac8869725bda6e5e %}


We are done now for coding, let's see how we can add this as a chrome extension.

### Adding a Chrome Extension

First run flutter build web inside your flutter project.

In your browser navigate to chrome://extensions/. Once there click on load unpacked in the top left corner

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0filajfkjmdablorlce1.png)

Open the build/web folder, then the flutter extension shoula appear on dashboard.

You can now open the flutter extension from the extensions menu in the top right of your chrome browser.

If you want to pin it, just click the pin button and it will be added to your list of pinned extensions

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

## Conclusion

I hope this information was of value to you. This is a good idea if you want to build an app that has a chrome extension companion, like forest for example.

Source code: [https://github.com/Mattds825/chrome_ext](https://github.com/Mattds825/chrome_ext) 

If you want to run the source code first run 'flutter build web' then add build/web as an extension in chrome
Road to Genius: superior #50
Tags: javascript, beginners, computerscience, codenewbie
Published: 2020-07-15 08:38:50

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function swap(arr, [i, j], [m, n]) {
  const temp = arr[i][j];
  arr[i][j] = arr[m][n];
  arr[m][n] = temp;
}

function rotate(M) {
  const n = M.length;
  for (let i = 0; i < n-1; i++) {
    for (let j = 0; j < n-i; j++) {
      swap(M, [i, j], [n-j-1, n-i-1]);
    }
  }
  for (let i = 0; i < n/2; i++) {
    for (let j = 0; j < n; j++) {
      swap(M, [i, j], [n-i-1, j]);
    }
  }
}

let M = [
  [7,4,7],
  [9,6,4],
  [1,3,9]
]
rotate(M);
let A = M[2][0]

// A = ? (number)
```

In today's challenge we'll be messing around with 2D matrices. There are no bugs to fix only a single answer is required.

After a quick look at the code, the function `rotate` reveals its nature, it's rotating an input matrix by 90°, as such:
![coding challenge extra](https://dev-to-uploads.s3.amazonaws.com/i/6ym5reszfkfb10zph8lt.png)

If you don't trust me then you can take a piece of paper and work it out, in pseudo-code the rotation is as follows:
```
| 7 4 7 |              | 1 9 7 |
| 9 6 4 |  -- 90° -->  | 3 6 4 |
| 1 3 9 |              | 9 4 7 |
```
Notice that `i` is the row, and `j` the column.
To find the value of `A` we need to get the number from the 2nd row and 0th column, which is 9 (bottom left corner).

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/hq6m4sjrpu3uzatlvnmp.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
GitHub trick: html page without GitHub pages.
Published: 2020-07-15 08:35:56

If you add a link like this `https://htmlpreview.github.io/?https://github.com/adam-cyclones/didi/blob/master/docs/generated/index.html`<< **(dead link now)**

The link passes through a proxy which renders html pages. https://github.com/htmlpreview/htmlpreview.github.com

Basically it's a great way to view html index's in your repo without needing to setup pages.
Where and how to start learning web development
Published: 2020-07-15 08:35:22

So I am learning to code for over 3 months now. Went through python and pygame and stsrted learning web dev. What to do, where to start learning, what are best resources, books, web resources? I would apprreciate any good input on this. I stsrted by watching some django tutorials but it seems the wrong way to learn web dev. So thank you in advance.
How to Manage Azure Resources
Tags: azure, beginners, cloud, webdev
Published: 2020-07-15 12:02:48

---
title: How to Manage Azure Resources
published: true
date: 2020-07-15 08:00:00 UTC
tags: azure,beginners,cloud,webdev
canonical_url: http://www.frankysnotes.com/2020/07/how-to-manage-azure-resources.html
---

What ever you are on running on Linux, Mac or Windows that you are on the road or in the comfort of your office there is many different ways to manage your Azure resources. In this video I will show you five ways to do it and explain the pros and cons of each of them.

{% youtube hBJAQnDNeB0 %}

There is also an excellent [Microsoft Learn module](https://c5m.ca/azFun-portal) that will teach you how to use the Azure portal efficiently.


#### References

- Azure Portal: [https://portal.azure.com](https://portal.azure.com)
- Learn Module: [https://c5m.ca/azFun-portal](https://c5m.ca/azFun-portal)
- Azure PowerShell: [https://c5m.ca/azPS](https://c5m.ca/azPS)
- Azure CLI: [https://c5m.ca/azCLI](https://c5m.ca/azCLI)
- Azure Mobile App: [https://c5m.ca/azMobileApp](https://c5m.ca/azMobileApp)
- Azure Cloud Shell: [https://shell..azure.com](https://shell..azure.com)
What was your last commit message?
Tags: discuss, git, webdev
Published: 2020-07-15 07:42:02

What was your last commit message?

Mine was:

```bash
fix (newsletter): remove unnecessary re-render
```

---

<span>Photo by <a href="https://unsplash.com/@yancymin?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Yancy Min</a> on <a href="https://unsplash.com/s/photos/github?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
The Power of Being a Self-Starter
Tags: codenewbie, womenintech, devjournal
Published: 2020-07-15 07:34:53

_This post was originally published on July 15, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

I love the idea of being a self-starter because you don't necessarily need any prerequisites or advanced degrees to be one.

Really, all you need is the decision that you're going to start something or embark on an interesting project and then begin to put one foot in front of the other as you make your way toward whatever it is you're working toward.

I'm on *such* a Hamilton kick ever since I watched it the other weekend and, yes, I admit I've been listening to some of the songs on repeat since then.

To connect that back to this post's point, I absolutely *love* this line from the very first song of the musical ('Alexander Hamilton') -



>_[Alexander Hamilton] got a lot farther
>by working a lot harder
>by being a lot smarter
>by being a self-starter_



How to be a self-starter? Hard work and consistent effort toward your goal. Rinse and repeat with getting yourself started on really whatever you want to do in your one precious life.

----------------------------

Thanks so much for reading along! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)

P.S. I've launched a brand-new podcast with new episodes each Wednesday! Stay up to date by [signing up for the newsletter here >>] (https://www.ladiescodecollective.com/)

![The Ladies Code Collective Podcast art](https://dev-to-uploads.s3.amazonaws.com/i/nl20jdyk6b9ec2w1lms7.png)
You don't know CSS
Tags: css, discuss
Published: 2020-07-15 07:01:37

---
title: You don't know CSS
published: true
description: You don't know CSS
tags: css, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/o6rv463i6z1frakl8vuo.png
---

You don't know CSS..

And neither do I..

But...

Let's drop comments below with our favourite CSS gotchas!

My socials if you ever want to chat code!
| :guardsman: [Insta](https://www.instagram.com/paulryancodes/) | :eyes: [Twitter](https://twitter.com/PaulRyan7) | :speech_balloon: [Github](https://github.com/PaulRyan17) | :thought_balloon: [LinkedIn](https://www.linkedin.com/in/paulryan9/) | :collision: [Youtube](https://www.youtube.com/channel/UCf4AtM9ldMfBsO0_bbYWvfw?view_as=subscriber) |:mailbox_with_no_mail: [Website](https://www.paulryancodes.com/)
3 tips for your website design 
Published: 2020-07-15 06:56:34

A well designed website will help your users find the information they are looking for more easily, and will make your business look professional. Doing a web design taking into account from the beginning not only your users but also the way in which the search engines will index it will help make it a success. In this post we offer you 10 practical tips for the development of your website:

- Simplify the website: What is the main message you want to give to the visitor in each page? If your website has too much information in one page, it will end up confusing the user.

- Use visual highlights for those sections that call the user to perform some action: For example, your phone and email address should be highlighted. The use of icons helps to highlight important sections in a website.

- First impressions are very important: When a customer arrives at your site, you have 5 seconds to convince them to stay
Big Sur, you ain't so bad
Published: 2020-07-15 06:46:29

Finished my first day using just Big Sur for non-day job things.

Have to say it went well for a beta 2, nothing really dreadful happened and most problems were third party apps as I would expect, and even those were pretty easy to recover from.

Xcode 12 beta was behaving pretty good, always expect something to go wrong there, this time mostly simulator stuff.

Thursday night is all about trying the audio stack and recording some videos and podcasts.
LeetCode: Populating Next Right Pointers in Each Node
Tags: leetcode, algorithms
Published: 2020-10-19 15:34:41

---
title: LeetCode: Populating Next Right Pointers in Each Node
published: true
date: 2020-07-15 06:45:00 UTC
tags: LeetCode,Algorithms
canonical_url: https://coderscat.com/leetcode-populating-next-right-pointers-in-each-node
---

![2020_07_15_populating-next-right-pointers-in-each-node.org_20200715_144225.png](https://coderscat.com/wp-content/uploads/2020_07_15_populating-next-right-pointers-in-each-node.org_20200715_144225.png)

## Iteractive algorithm with queue

This is a simple version of level-order traverse.

```cpp
class Solution {
public:
    Node* connect(Node* root) {
        queue<Node*> Q;
        Node* cur;
        if(root) Q.push(root);
        while(!Q.empty()) {
            int sz = Q.size();
            Node* pre = NULL;
            for(int i=0; i<sz; i++) {
                cur = Q.front(); Q.pop();
                if(cur->left) Q.push(cur->left);
                if(cur->right) Q.push(cur->right);
                if(pre) pre->next = cur;
                pre = cur;
            }
        }
        return root;
    }
};

```

The post [LeetCode: Populating Next Right Pointers in Each Node](https://coderscat.com/leetcode-populating-next-right-pointers-in-each-node) appeared first on [Coder's Cat](https://coderscat.com).
Difference between 401 (Unauthorized) and 403(Forbidden) status codes
Tags: 401vs403, restapi, unauthorizedvsforbid
Published: 2020-07-15 17:14:07

---
title: Difference between 401 (Unauthorized) and 403(Forbidden) status codes
published: true
date: 2020-07-15 06:34:20 UTC
tags: 401vs403,restapi,unauthorizedvsforbid
canonical_url: 
---

### Difference between 401 (Unauthorized) and 403(Forbidden) status codes

When building a REST API there is always confusion when do we need to respond with _unauthorized_ (401) and when do we need to respond with _Forbidden_ (403). If the integration team doesn’t aware of the status codes, it would cause ambiguity when dealing with the REST APIs.

#### UnAuthorized (401) status code

This is recommended to use when the token is invalid or the API couldn’t able to identify/authenticate the user request. When REST API responded with a 401 status code, we need to verify whether the token is valid or expired.

#### Forbidden (403) status code

This is recommended to use when the token is valid but the user request doesn’t have the privilege to access the requested resource/endpoint.

Please follow and like us:

![](https://cdn-images-1.medium.com/max/72/0*-kVxTPPCSyfldmzZ.png)

_Originally published at_ [_http://www.techmonks.org_](http://www.techmonks.org/difference-between-401-unauthorized-and-403forbidden-status-codes/) _on July 15, 2020._
A detailed article on how to create GitHub profile README
Tags: github, showdev, codewithghazi
Published: 2020-07-15 06:17:39

I’m excited to share some details on how to create a Github profile README with Dynamic Github Stats.

Personalizing your Github profile will give your profile visitors a very good understanding of what you are, what you are working with. Previously it was very difficult to understand by the profile page as there were very few details to know what the person is doing or what he is up to.

[Read Full Article](https://codewithghazi.com/how-to-create-a-github-profile-readme-with-dynamic-github-stats/)

![Ghazi Khan Github Profile](https://dev-to-uploads.s3.amazonaws.com/i/nvxjrohot7xi14ojsstq.png)