teleren/devto huggingface dataset:
Types of Software Testing
Published: 2022-07-11 06:51:58

In this article, we are going to learn about various types of software testing used on a product or software under development. But, before we proceed its good to have a knowledge about software testing.


**What is software testing?**

Software testing is the process of evaluating a system with the intent of finding bugs. It is performed to check if the system satisfies its specified requirements.

Source- [*Software testing*]
(https://artoftesting.com/what-is-software-testing#more-204)

Testing helps in measuring the quality, effectiveness, completeness, functional and non functional activities of a software or a product.

Based on various parameters software testing can be elaborated as:-


- Types of testing based on Testing Objectives

      - Functional Testing

      - Non-Functional Testing


- Types of testing based on Test Execution Method

      - Manual Testing
 
      - Automated Testing


- Types of testing based on Test Design Technique


      - Black Box Testing

      - White Box Testing

      - Grey Box Testing

      - Glass Box Testing

      - Structure Based Testing

      - Specification Based Testing


**Levels Of Testing:-**

There are four different levels of software testing. The aim of software testing is to make software testing efficient and hep to easily find various test cases or scenarios at different levels. 

- Unit Testing

- Integration Testing

- System Testing

- Acceptance Testing

All the levels of testing are compulsory to be completed for the the product or software under development to work efficiently.
We have covered almost 100 types of software testing in our article types of testing. Do check this out.
Thanks for reading.:)

**References:-**

[Types of testing almost 100](https://artoftesting.com/types-of-testing)

[Software testing types](https://qacraft.com/levels-of-testing-in-software-testing/)
Web Components at Big Tech Companies: Salesforce
Tags: webcomponents, webdev, javascript, programming
Published: 2022-07-11 06:19:27

![Salesforce Logo and Web components logo](https://miro.medium.com/max/1400/1*qW7rDByd7Do4UoVzpvCa0Q.png)

If the enterprise can deploy web components so can you!

{% medium https://medium.com/@mariusbongarts/web-components-at-big-tech-companies-salesforce-89a8a4c97d04 %}
Svelte and TailwindCSS on Github Codespaces
Tags: webdev, javascript, svelte, tailwindcss
Published: 2022-07-11 06:00:31


![TailwindCSS Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68ss32g7uq9s3s23o3p9.png)

Here is my notes when submitting some interesting challenges on [FrontendMentor](https://www.frontendmentor.io/) and basically just my experience when set up a svelte + tailwindcss project then deploy it on Github Pages and I can't tell this as the best way to do.

I use [Github Codespace](https://github.com/codespaces) which I got for free maybe because my campus email .ac.id XD and I love it since I don't need to handle multiple folder or updating packages and dependencies also it was faster than my internet speed now.

> There is also many alternative to run VS Code online like gitpod.io or you can choose a simpler one like codesandbox.io, replit.com, etc

Firstly, I always enable VS Code synchronization so I can get all extension and theme that I usually use in my local machine to be available in Codespaces. It may take a little time, and you may need to reload the browser just to make sure everything is now synced correctly.

When everything is done, I usually enable [Wakatime](https://wakatime.com/) extension for self time tracking just want to know how much time I used for specific project even it just my personal project XD

## Installing svelte + TailwindCSS

I've already have experiment with sveltekit and it was awesome also easy to understand, but I feel like for a simple and single component I can just use svelte without routing or any fancy things.

```bash
npm init vite . --template svelte # intall in current dir

npm install 

```
Since svelte was running with vite we can just follow the official guide on TailwindCSS [Vite installation](https://tailwindcss.com/docs/guides/vite)

But I can do that easier with this `svelte-add` command

```bash
npx svelte-add@latest tailwindcss
```
Thanks to ChasingCode.dev [blog post](https://chasingcode.dev/blog/svelte-vite-tailwindcss3-template/)

Now, I think all requirement was installed we can just try to build a hello world and build for production.

```bash
npm run dev 
npm run build # for production
```
But since I want this to be available on github pages, I should change the default folder name from **dist** to **docs** or I can push to a new branch but currently I didn't really understand that XD.

What to do is modify `vite.config.js` to something like this

```javascript
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  // if env is development use / by default or use my github repo name
  base: process.env.NODE_ENV === 'development' ? '/' : '/NFT-preview-card-component/',
  build: {
    outDir: 'docs'
  }
})
```

Finally docs folder will appeared and I can just go to repo settings, then choose page option on sidebar, then fill with branch main with /docs path, Voila!!
Partner center will stop accepting new MV2 extensions from 11th July
Tags: browserextension, webdev, microsoft, edgeextension
Published: 2022-07-11 05:56:38

Hello, Edge Add-ons developers!

In May 2022, Microsoft announced the timelines for embracing Manifest Version 3 (MV3) for Microsoft Edge extensions and phasing out support for Manifest Version 2 (MV2).


As we move forward in this direction, the following change will come into effect starting 11th July 2022 –


> **All new extensions must use MV3 to be published to the Microsoft Edge Add-ons store.**


You can continue updating your existing MV2 extensions that are already published on the Microsoft Edge Add-ons website.


This timeline is subject to change; for the latest updates, visit:


- [Overview and timelines for migrating to MV3](https://aka.ms/MSFTEdge-Overview-of-MV3)
- [Microsoft Edge Add-ons roadmap](https://aka.ms/MSEARoadmap)


If you have any technical questions on your MV3 migration or the Microsoft Edge Add-ons ecosystem in general, you can reach out to us via our [discussion forum on GitHub](https://aka.ms/MSFT-Edge-Addons-GitHub-Discussions).


If you are facing any issues on Partner Center, or the Microsoft Edge Add-ons site; or you have any suggestions for us to improve the Microsoft Edge Add-ons ecosystem; you can submit those via our [GitHub developer community](https://aka.ms/SuggestANewFeature_EdgeAddons).
Show your latest dev.to articles on Github Profile
Published: 2022-07-11 05:52:03



<p align="center">
<img width="500px" src="https://raw.githubusercontent.com/lnquy065/github-readme-devto/main/readme/pic-1.png" />
</p>

I just wrote a tool that allows you to display your posts on the Github page. Give me a [star](https://github.com/lnquy065/github-readme-devto) if it's helpful 😁, I'd love to hear your feedback 🤗

Demo: https://github.com/lnquy065

## Usage

`https://dev.to/<USER_NAME>`

```
## Dev.to articles

[![<USER_NAME>'s articles](https://github-readme-devto.herokuapp.com?username=<USER_NAME>)](https://dev.to/<USER_NAME>)
```

## Parameters

| Name          | Description                                                                                           | Default value |
|---------------|-------------------------------------------------------------------------------------------------------|---------------|
| username      | Dev.to username                                                                                       | _required_    |
| fontSize      | Article title font size                                                                               | 16            |
| textColor     | Text color, use hex value (without #)                                                                 | 58a6ff        |
| width         | SVG's width                                                                                           | 500           |
| page          | Pagination page                                                                                       | 1             |
| per_page      | Page size (the number of items to return per page)                                                    | 30            |
| tag           | Retrieve articles that contain the requested tag. Example: `tag=discuss`                              | _none_        |
| tags          | Retrieve articles with any of the comma-separated tags. Example: `tags=javascript, css`               | _none_        |
| tags_exclude  | Retrieve articles that do not contain any of comma-separated tags. Example: `tags_exclude=node, java` | _none_        |
| state         | Allow the client to check which articles are fresh or rising. Enum: "fresh" "rising" "all"            | _none_        |
| top           | Allow the client to return the most popular articles in the last N days. Example: `top=2`             | _none_            |
| collection_id | Return the list of articles belonging to the requested collection. Example: `collection_id=99`                          | _none_            |

Github: https://github.com/lnquy065/github-readme-devto
My Coding Journey Begins
Tags: beginners, productivity, webdev, javascript
Published: 2022-07-11 05:42:19

We are just finishing the first phase in our coding bootcamp and I am already feeling the pressure. In high school, I started learning basic JavaScript for the first time and loved solving the problems. When I went to college, I decided on a Computer Science major just because that was something I already had experience in. 

As the courses got harder, I started doubting whether I was meant to code or not. I failed my classes and headed back home to wait tables for my parents again. I was just waiting for a sign that something or someone was just meant to be.

Not until recently, I realized I wanted more. My best future wasn’t just going to come to me. I decided I want more responsibility. I want to finish what I start. I want to find purpose. That’s why I’ve taken time from helping the family restaurant to start FlatIron School.

I am really excited to grow as a person and become disciplined though my work. I plan to be a role model for my community and give back to them. I want to develop skills that can help me give and show that it’s possible to achieve your goals. I want to be confident in myself and become the person my family and friends have always seen in me as. I am determined to become a different person in the end.
CSS: Absolute Positioning Inside Relative Positioning
Tags: css
Published: 2022-07-11 05:38:00

####* when parent element position: relative 
![position: relative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lccnbs3r3fk87uzoeqvi.jpeg)

<hr/>
####* when parent element position: static, child element flow out of the parent element
![position: static](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhfm8fifm3j8mfb8inlh.png)

[Reference link: Absolute Positioning Inside Relative Positioning](https://css-tricks.com/absolute-positioning-inside-relative-positioning/)
148. Leetcode solution in CPP
Tags: cpp
Published: 2022-07-11 05:21:12

```
class Solution {
public:
//     void merge(ListNode* a, ListNode* b){
//         ListNode *newHead = new ListNode(0);
//         ListNode *cur = newHead;
        
//         while(a && b){
//             if(a->val <= b.val){
//                 cur->val = a->val;
//                 a = a->next;
//             }else
//                 cur->val = b->val;
//                 b = b->next;
//             }
//         }
        
//         if(a){
//             cur->next = a;
//         }else if(b){
//             cur->next = b;
//         }

//         return newHead;
//     };
    
    ListNode* sortList(ListNode* head) {
        if(!head) return head;
        vector<int> arr;
        ListNode* cur = head;
        
        while(cur){
            arr.push_back(cur->val);
            cur = cur->next;
        }
        
        sort(arr.begin(), arr.end());
        
        cur = head;
        int i = 0;
        while(cur){
            cur->val = arr[i++];
            cur = cur->next;
        }
        
        return head;
    }
};
```
#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/sort-list/
328. Leetcode solution in CPP
Tags: cpp
Published: 2022-07-11 05:18:27

```
class Solution {
public:
    ListNode* oddEvenList(ListNode* head) {
        ListNode *oddHead = new ListNode(0); //virtual head
        ListNode *odd = oddHead;
        ListNode *evenHead = new ListNode(0); //virtual head
        ListNode *even = evenHead;
        ListNode *cur = head;
        int i = 1;
        
        while(cur){
            if(i % 2 == 1){
                odd->next = cur;
                odd = odd->next;
            }else{
                even->next = new ListNode(cur->val);
                even = even->next;
            }
            i++;
            cur = cur->next;
        }
        
        odd->next = evenHead->next;
        return oddHead->next;
    }
};
```


#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/odd-even-linked-list/
Adding Custom Anchors to Headings in Markdown - Eleventy
Tags: webdev, javascript, tutorial, beginners
Published: 2022-07-11 05:12:33

Anchors are nothing but `id` attributes applied to an element to link to it using `href` attribute internally on the same page.

By default, [11ty](https://11ty.dev) uses [markdown-it](https://www.npmjs.com/package/markdown-it) library to parse markdown. But, it seems that by default, `markdown-it` doesn't support syntax for applying an `id` to a header element.

The syntax for applying a custom `id` to a header element in `markdown` is as follows:

```md
## text {#id}
```

To make that syntax work, you need to create your own instance of `markdown-it` library and add two plugins, `markdown-it-anchors` and `markdown-it-attrs`.

The `markdown-it-anchors` plugin will apply a default `id` depending on the heading text automatically to every header element in our markup.

The `markdown-it-attrs` plugin will replace the default `id` with the custom `id` you specify.

## Applying Custom Anchors

Install the required dependencies:

```bash
npm i markdown-it markdown-it-anchor markdown-it-attrs
```

Require them inside `.eleventy.js` file,

```js
const markdownIt = require('markdown-it');
const markdownItAnchor = require('markdown-it-anchor');
const markdownItAttrs = require('markdown-it-attrs');
```

Create an instance of the `markdown-it` library inside the `module.exports` function.

```js
eleventyConfig.setLibrary("md", markdownIt().use(markdownItAnchor)).use(markdownItAttrs)
```

You can also add some options such as:

```js
let markdownItOptions = {
    html: true // you can include HTML tags
}

let markdownItAnchorOptions = {
    level: 2 // minimum level header -- anchors will only be applied to h2 level headers and below but not h1
}

eleventyConfig.setLibrary("md", markdownIt(markdownItOptions).use(markdownItAnchor, markdownItAnchorOptions).use(markdownItAttrs))
```

Now, if you do something like:

```md
## Heading 1 {#head1}
```

In this case, `head1` will be the `id` of this header element. You can link to this element by using `#head1` as the `href` value. That's how you can add custom anchors to heading elements.

## Applying Default Anchors

If you don't want a custom `id` and just want to keep the default `id` that's being applied to the element by the `markdown-it-anchors` plugin, then remove the `markdown-it-attrs` plugin and you will get a default anchor applied to the element.

```js
eleventyConfig.setLibrary("md", markdownIt(markdownItOptions).use(markdownItAnchor, markdownItAnchorOptions))
```

That's all for now. Signing Off.

> *This post was originally published in [Syntackle](https://syntackle.live/blog/adding-custom-anchors-to-headings-in-markdown-eleventy-3NxBhIJO2OIr4XOj5LKc/)*
CSS: Add background
Tags: css
Published: 2022-07-11 05:05:00

```
div{
  background-color: #???;
  z-index: -1;
  height: 600px;
  display: block;
  position: absolute;
  top: 0; 
  bottom: 0;
  left: 0;
  right: 0;}
```
 
<!-- this div can be added in anywhere in Main session because position: absolute-->
😍 🔥 Habits you should change if you wants to develop your skill as a developer 😍 🔥
Tags: webdev, productivity, beginners, programming
Published: 2022-07-11 04:59:47

## Never Give-up
The problem you’re trying to solve doesn’t seem to have a solution? You can’t think of one therefore you’re a bad developer. Wrong.

I’ll let you in on a little secret: all problems can be solved by code; it’s just a matter of having the right amount of time and resources.

I’m sure this is not breaking news to most of you, but if you’re just getting started and finding it hard to solve your problems — hang in there! They can be solved, you probably just need more time and research.

## Don't work beyond the hours.
 Look, coding can be fun, and working is important, so I get it, but there is more to life than just coding. It might not seem like it right now, but if you spend too much time working, or even coding for the fun of it, you’ll miss out on life.

Friends, family, relationships, even hobbies (other than coding, duh!) are all very important facets of life and coding should not be above any of them.

And if you’re thinking “well, if I don’t spend 12 hours coding every day, someone else who does it will get the job I want”, think again. That person will end up burning out. They will not be as productive or as happy about coding in the long run, and you’ll still be there with the same motivation and eagerness to work.

## Asking for help is not a sign of weakness 

Asking for help is not weak, it’s the smart thing to do. You’re building something for a reason, whether it is because you want to build a product or because you’re trying to learn something. By asking for help you’re arriving at your destination sooner.

Where can you ask for help? Twitter is a great place. The community around “tech twitter” is very helpful. Make sure you hashtag the technology you’re asking about to make sure those following it can see your question.
199. Leetcode solution in CPP
Tags: cpp
Published: 2022-07-11 04:56:43

```
class Solution {
 public:
  vector<int> rightSideView(TreeNode* root) {
    if (!root)
      return {};

    vector<int> ans;
    queue<TreeNode*> q{{root}};

    while (!q.empty()) {
      const int size = q.size();
      for (int i = 0; i < size; ++i) {
        TreeNode* node = q.front();
        q.pop();
        if (i == size - 1)
          ans.push_back(node->val);
        if (node->left)
          q.push(node->left);
        if (node->right)
          q.push(node->right);
      }
    }

    return ans;
  }
};

```

#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/binary-tree-right-side-view/
CSS: Pseudo-classes and pseudo-elements
Tags: css, html, beginners
Published: 2022-07-11 04:56:00

 
## 1. A pseudo-class is a selector that selects elements in a specific state, like a class added to the HTML.


* **:first-child** targets the first element in the article.
(p:first-child targets the first paragraph in the article.)

* **:last-child** represents the last element among its siblings.

* **:only-child** represents an element has no siblings.

### user-action pseudo-classes

* **:hover** 

* **:focus** usually represents an element(such as a form input) that has received clicks or Tabs.
<hr/>


## 2. A CSS pseudo-element is used to style specified parts of an element. 

* It can be used to: Style the first letter, or line, of an element; Insert content before, or after, the content of an element.

* **::before** and **::after** can insert content to the document in CSS. Used with content property.

* **::first-line** 
<hr>
###example 1: 
[Display div element on hovering over <a> tag using CSS](https://www.geeksforgeeks.org/display-div-element-on-hovering-over-a-tag-using-css/)

```
    div {
        display: none;
    }
      
    a:hover + div {
        display: block;
        color: green;
        font-size: 25px;
    }
```
IIS Server Setup for Beginners/Newbie for .NET
Tags: webdev, microservices, network, setup
Published: 2022-07-11 04:52:52

IIS(**Internet Information Services**) is Web Based Server used for Hosting the Web Sites.
IIS simply uses the .NET Framework 4.8(which is latest) and hosting bundle for Hosting the Web Sites and .NET Core for Hosting application build in .NET Core.
Link to Framework is in below:-

```
https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/iis/hosting-bundle?view=aspnetcore-7.0
```
However in General Web Server is just similar to your local computer. 

**
## IIS and Application Pool:-
**
Generally a local machine in case need a user to run the System , In your case you are using your own local machine so you yourself becomes the User.
But in case of the IIS Server we have **_Application Pool_** who which run/operate in our absence the whole server depends on Application Pool 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23y7yik2tgzjq147eoc3.png)

## Sites:-
If you want to configure for your website all we need to do is to configure Physical Path of the website(**As you know IIS server itself is the Computer**).
Keep all your Code(Build) and Script in a specific Path in any Drive , Ensure that we Application and IIS Application has the permission to **Read, Write and Modify** (Incase if you want to store any file on IIS Server will allow the same through Application Pool)
Then you have to bind you website incase of Http and Https we have specified ports in the IIS.

Some more configuration are required but this is the Basic requirement from where you can start your configuration for Hosting your own website on local.
Interview Tips
Published: 2022-07-11 03:38:44

I recently attended another Webinar for insight on the interview process. 

As normal there were some of the typical questions. 
1) What are companies looking for? 
2) What should I be studying? 
3) How do I standout? 

For the most part the answer have all been relatively similar from company to company. 

But one thing that was interesting was the recruiter telling us that they were no longer allowed to ask trick questions. 

The process of problem solving was more important than actually solving the problem.

They want to know what your thinking how you approaching the problem and if your headed in the right direction.
Some of the biggest mistakes most people make in live coding is 
1)Jumping right into the code
Tip: Take your time. Repeat the question back to the interview er to make sure you have a good understanding of whats being asked. 
2) Not writing real code
Tip: Pseudo code is ok. But make sure it helps lead you to writing real code to solve the problem. 
3) Not testing your solution
Tips: Makes sure you think about edge cases and ask the interviewer about testing your solution.
4) Only practicing coding in one type of environment. 
Tip: Trying writing code in a google doc, white boarding, or even in a text file. 

It never ceases to amaze me that no matter how many of these I have been to there is always something new to learn and share. So many of these company are looking for similar things but have different requirements for how you get there. 

I hope these tips help you as much as they have helped me. 

Keep Practicing and as always 
Happy Coding 👨🏿‍💻👨🏻‍💻🧑🏾‍💻👩‍💻
Canvas Liquid Effect using Matter.js and SVG Filters
Tags: webdev, javascript, css, showdev
Published: 2022-07-11 03:53:09

I have created a demonstration for liquid (or gooey) effect on HTML Canvas using [Matter.js](https://github.com/liabru/matter-js) and SVG Filters.

**CODE & DEMO**
**[https://github.com/n3r4zzurr0/canvas-liquid-effect](https://github.com/n3r4zzurr0/canvas-liquid-effect)**