teleren/devto huggingface dataset:
TechMahindra "Student Report"Coding Question
Tags: implementation, java, array, codecity
Published: 2021-10-14 06:24:09

## Statement :- 
>Given a list of N students, every student is marked for M subjects. Each student is denoted by an index value. Their teacher Ms. Margaret must ignore the marks of any 1 subject for every student. For this she decides to ignore the subject which has the lowest class average.<br>Your task is to help her find that subject, calculate the total marks of each student in all the other subjects and then finally return the array of the total marks scored by each student.

**Input Specification:**
**input1:**
 An integer value N denoting number of students

**input2:**
An integer value M denoting number of subjects 

**input3:**
A 2-D integer array of size N'M containing the marks of all students in each subject.

**Output Specification:**

Return an integer array of size N containing the total marks of each student afte deducting the score for that one subject.


### Example 1:
**INPUT**
```
3 5
75 76 65 87 87
78 76 68 56 89
67 87 78 77 65
```
**OUTPUT**
```
325 299 296
```
### Example 2:
**INPUT**
```
3 3
50 30 70 
30 70 99 
99 20 30
```
**OUTPUT**
```
120 129 129
```

**Explanation:**<br>
Out of these subjects, the students average was lowest in subject 2 <br> i.e 30+70+20= 120/3=40

So the teacher will ignore marks of this subject and will consider the title other two subjects for each of the three students i.e. 120 129 129 respectively

Hence (120 129 129) is returned as the final output.

Solution:-
```
import java.util.*;
public class MyClass {
    public static void main(String args[]) {
    	Scanner sc = new Scanner(System.in);  
	
		int row = sc.nextInt();   
		int col = sc.nextInt();
		int avg[]= new int[row];
		int ans[] = new int[row];
		int arr[][]= new int[row][col];
		int res[]= new int[row];
		for(int i = 0; i <row; i++) {
			for(int j=0;j<col;j++) {
				arr[i][j]= sc.nextInt();
			}
		}
		
		/*//verifying i/p
		for(int i = 0; i <row; i++) {
			for(int j=0;j<col;j++) {
				System.out.print(arr[i][j]+" ");
			}
			System.out.println("");
		}*/
		
		for(int i = 0; i <row; i++) { //calculating and storing average of each column
			for(int j=0;j<row;j++) {
			ans[i] += arr[j][i];
		
			}
		avg[i] = ans[i]/row; 
		
		}
		
	int min = avg[0];
		int eleminate_Index =0;
		for(int i = 1; i < row; i++) { // minimum average calculated and ..
			if(avg[i]<min) {
				min = avg[i];
				eleminate_Index = i; //..index of it stored.
			}
		}
		
		/*
		System.out.println(min);
		System.out.println(p);
		*/
		for(int i = 0 ; i<row; i++) {
			for(int j=0; j<col; j++){
				if(eleminate_Index!=j) {//calculating sum of remaining subjects
					res[i]+=arr[i][j];
				}
		}
			
		}
		for(int j=0; j<row; j++){
			System.out.print(res[j]+" ");
			}


	
		sc.close();
    }
}
```
API Testing - How to run API Tests in vREST NG Application?
Tags: testing, tutorial, apitesting, vrest
Published: 2021-10-14 06:11:25

This video #tutorial explains how you may run your API tests quickly and see the results side by side in vREST NG Application.

vREST NG is a script less API test automation tool. It helps you to write maintainable test cases quickly for functional and regression testing of APIs. You can download and install the vREST NG application directly on Windows, OSX, and Linux via our website.

**Video Link:** https://youtu.be/rIOFNiUhBvo

**API Testing Tutorials Playlist:** https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

*Important Links:*
1. [vREST NG Website](https://vrest.io/?utm_source=devto&utm_medium=devto-desc&utm_campaign=video)
2. [Community Chat](https://discord.gg/NtRa7kw)
3. [Book a Live Demo](https://meetings.hubspot.com/dheeraj-aggarwal)

Please do like and share if you found this video helpful and let the voice heard by the testing community. Also, let us know your feedback by commenting on this post.
Easy and Quick Single DIV Spinning Dots Loading Status Animation using Vanilla CSS Only
Tags: css, tutorial, beginners, webdev
Published: 2021-10-14 05:45:38


*If you prefer video over text then there is a YouTube video at the end of the article. Let's go step-by-step and build our loading animation.*
<br />

## Step-1: Setting up theme

Let's first set up the theme and position our animation.

```html
	<div class="loading"></div>
```

```css
	body {
	  width: 100vw;
	  height: 100vh;
	  overflow: hidden;
	  display: flex;
	  background: midnightblue;
	  justify-content: center;
	  align-items: center;
	}
	.loading {
	  width: 1.5em;
	  height: 1.5em;
	  border-radius: 50%;
		background: white;
	}
```

The circle you see is for the reference, we will remove it later.

## Step-2: Adding the dots

We will use box-shadow which will help us add more circles or dots without adding any extra `div`. We will position them around our previous circle.

```css
	 .loader {
		 ...
	  box-shadow:
			0 -3em 0rgba(255, 255, 255, 1),
			2.25em -2.25em rgba(255, 255, 255, 0.875),
			3em 0 rgba(255, 255, 255, 0.75),
			2.25em 2.25em rgba(255, 255, 255, 0.625),
			0 3em rgba(255, 255, 255, 0.5),
			-2.25em 2.25em rgba(255, 255, 255, 0.375),
			-3em 0 rgba(255, 255, 255, 0.25),
			-2.25em -2.25em rgba(255, 255, 255, 0.125)
			;
	}
```

We no longer need the first circle(`background: white;`), we can remove it.

## Step-3: Animation

We just need to the div to keep rotating as per our need, which is a one-liner coder.

```css
	.loading {
		...
	  animation: spin 1.2s linear infinite;
	}

	@keyframes spin {
	  100% { transform: rotate(-360deg) }
	}

```

We have our single div loading status animation ready. Thank you for reading.<br />
Please feel free to drop you opinion or any helpful tips.

Feel free to connect on Social Media: https://designingcoder.github.io

{% youtube Ds7296HzaKU %}
How to use Linux to Recover Deleted Files
Tags: linux, tutorial, beginners, programming
Published: 2021-10-14 05:07:10

Have you ever accidentally deleted important files from your computer and went through these emotions - 🤦😨😱😤🤒?

Well, you’re not the only one. But the good news is there are plenty of ways in Linux to recover deleted files.

I wrote this post to explain exactly the same.

Read the full blog on [Adam The Automator](https://adamtheautomator.com/linux-recover-deleted-files/).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Create Flask app in 3 lines of code
Tags: python, flask, programming, automation
Published: 2021-10-14 05:04:43

## createflask

![PyPI - Python Version](https://img.shields.io/pypi/pyversions/createflask)


 
### `pip install createflask`
 

<br>

> #### Create your flask development environment with 2 simple commands.

<br>

### setup

```python
from createflask import createapp

app = createapp.Create('app')

app.sow(server=True)

```

<br>

<img src="https://gcdn.pbrd.co/images/5lFK1NdhoCtH.png?o=1" alt="banner">

https://pypi.org/project/createflask/
Making the most boring website ever with TypeScript, NestJs, React and others. Part 4. 
Tags: react, typescript, node, webdev
Published: 2021-10-14 05:03:50

_This series is about making a generic website for a local business with TypeScript, NodeJs, NestJs, Prisma, React and NextJs. I'm trying to make my videos quite short, about 10 minutes each (except for the first one), while putting as much content there as I can. [Here](https://www.youtube.com/playlist?list=PL7b0cPjh8z6K_4qLNu_QdE3RpiU6omViC) is the full playlist._

This time we'll do Appointments and a way to manage them in the admin panel. We'll also talk about separation between models and DTOs and how hard it can be to work with datetimes.

Enjoy :)

{% youtube hUyOLBUJwY0 %}
Copy Url Buttom with Bootstrap and Clipboard.js
Tags: tutorial, javascript, bootstrap, webdev
Published: 2021-10-14 04:48:12

In making the page it is very important to include the share feature, at least copy the url with hashtags or other share urls if outside the main url. This time I want to make a button copy like the one created by the bootstrap page, and it will look like this

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

### Prerequire 
- Bootstrap; [tooltip](https://getbootstrap.com/docs/5.1/components/tooltips/)
- Javascripts; loops, logic etc
- [Clipboard.js](https://github.com/zenorocha/clipboard.js/#clipboardjs) plugin

### Prepare Button
```html
<div class="float-end bd-highlight">
    <button type="button" url-site="http://example.org#event" class="btn btn-outline-secondary fw-light link-copy" data-bs-original-title="Copy Url"><i class="bi-share-fill"></i> Share</button>
</div>
```
In the button there are several attributes and classes that need to be considered, such as the `data-bs-original-title="Copy Url"` attribute which will display a tooltip description, the `site-url` attribute which will store the url to be saved. and the `link-copy` class which will be used as a token class for tooltip activation.

### Install tooltip
```js 
document.querySelectorAll('.link-copy').forEach(function(a){
  var b=new bootstrap.Tooltip(a);
  a.addEventListener('mouseleave', function(){
    b.hide()}
  )
   // console.log(a.getAttribute('url-site'));
});
```
The script will select all items with class `link-copy` then will execute the tooltip installation function which is set to activate the tooltip only on hover.

### Run Clipboard.js
```js
var d = new ClipboardJS('.link-copy',{
    text:function(a){
      return a.getAttribute('url-site') 
     }
   });
  
d.on('success', function(a){
  var b = bootstrap.Tooltip.getInstance(a.trigger);
  a.trigger.setAttribute('data-bs-original-title','Copied!');
  b.show();
  a.trigger.setAttribute('data-bs-original-title','Copy Url');
  a.clearSelection()
});

```

The installed clipboard will copy the description from the `url-site`, pay attention to the `text` description in the script. After a successful copy, the script loads the next few actions, which include a tooltip description that changes after the trigger click is result `Copied!` and returns to the default description when another trigger occurs.

***Done***
Dynamically add meta tag in angular
Tags: javascript, angular, html, css
Published: 2021-10-14 04:41:56

I am working on an angular project. Where the requirement to hide particular page from google search. Google recommend to add     <meta name="robots" content="noindex,nofollow">
in html page. 

But here in my requirement all the angular components are loaded dynamically, so I cannot add meta tag in index.html at design time. So I find a solution to add it at runtime, depending upon some conditions. I followed below link to implement same

https://stackoverflow.com/questions/48330535/dynamically-add-meta-description-based-on-route-in-angular

Even there are many other links which provide same solution.

Now after this implementation, if I made check in code, if the meta tag is added then worked. Even, if I inspect in browser I can see the meta tag in script. 

But if I go to browser view source then it does not show, seems it is already rendered. So here I have 2 queries.
1) will this dynamically added meta tag be considered by google indexing(search engine)?
2) If not then what is the other way round which can help me fixing this or even if I can see in view source as well?

Any help/response highly appreciated!
Explaining Like I'm Five: Connecting Front and Backend Systems
Tags: webdev, api, programming, mentalmodels
Published: 2021-10-14 04:21:09

A large missing for myself and probably others is an accurate mental model of how frontend and backend systems interplay with each other. As a result, a lot of mental "soup" comes into play when it comes time to get your React/Vue/Angular talking to a backend system. This becomes especially problematic when you layer something as complex as an OAuth Auth Code Grant or other Auth systems on top of that. 

So how can one think of frontend and backend systems communicating accurately while cutting out jargon and confusion? 

Let's borrow from Richard Feynman, a theoretical physicist whose genius lied not only in his discoveries in the various fields of physics, but in his ability to explain deeply technical concepts to everyday people.  He developed a technique where someone explains something to themselves in simple terms to discover gaps in their knowledge; an "Explain Like I'm Five", if you will. 

Before reading ahead, pause and try your best to explain how a frontend and backend system communicate to yourself as if you are five years old.  Don't use jargon (a five year old doesn't know what an API is), and keep this grounded in daily examples a five year old uses (mom's smartphone, a toy train, playing outside). 

// 

What did you come up with? Here's what I said: 

When your mom comes to pick you up from school, first she has to get in her car.  When she gets in her car, she does a couple of things: she opens the door, puts the key in the starter, turns on the engine, and then cranks up the radio to her favorite tunes!  All of that is like how a frontend and backend work together. If your mom is a website's 'frontend', she is making her car, the websites 'backend' do things for her so that she can move on to the next stage of her journey for picking you up. For example, she tells the car to turn 'on' by putting her key in the ignition and turning it.  She tells the radio to turn 'on' by pushing the on button and turning it up.  In the same way, a website's frontend tells the backend what it wants, and the backend responds by giving the frontend what it wants.  If the car didn't turn on, then it would be broken, right? The same can be said about the website frontend and backend - if the request from the frontend isn't fulfilled, something is probably wrong with the backend.  Or if your mom tried to turn on her car with a banana instead of a key, that would be like the frontend of a website being broken so that the backend doesn't understand what she wants from it. 

How was that? A little wordy and bizarre, but it showed me a huge gap in my own understanding: the fact that the implementation of that front and back end system communicating to me, is still a little fuzzy. The magic that happens to make the car actually turn *on* when the key is turned to me, still seems like a black box. But at least now I know what to drill - that very same implementation. And from drilling that implementation, I can refine my mental model.
How to Customize a Category Axis in Blazor Charts
Tags: webdev, blazor, csharp, dotnet
Published: 2021-10-14 04:15:19

Learn how easily you can add a category axis to Syncfusion [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) and customize it with various built-in options. 

In this video, you will learn how to plot nonchronological data in a Blazor Chart with a category axis. You’ll see how to use available axis customization options like setting custom ranges and intervals, how to position labels on or between the ticks, and how to add the indexed category axis.

Product Overview: https://www.syncfusion.com/blazor-components/blazor-charts

Explore our tutorial videos: https://bit.ly/2YuFArq

Download this example from GitHub: https://bit.ly/3aiRsPd

{% youtube Mv6MS6fbcNE %}
Maintain Internal API During a Refactor
Tags: refactor, api
Published: 2021-10-14 03:18:46

I went down the wrong path recently. This topic relates to internal APIs and to discuss this I must ensure I define this.

When performing a refactor, the idea is that you can make any changes you want as long as the external contract remains the same. The internal components which talk to each other are all fair game when performing a refactor.

I have been in a position where these internal APIs were also like external APIs in that multiple people use these APIs to deliver their functionality, but we all own the maintenance and updates.

This meant they were treated more like external APIs. This is a pain to do and it feels like so much more work.

Well I found myself positioned were I thought the API was self contained enough I could just throw it out and reimplement. I think that is still the case but what a mistake.

See the biggest benefit to supporting the old API while doing a refactor is that your code still compiles and your tests still pass.

Dynamic languages can avoid this as code you're not running does not need to work to test the code you're working on. I could not handle needing to run all the tests to find issues the compiler tells me about right away.

When I continue to maintain the old API I could technically merge in progress into mainline. Sure that would create some confusion, but it still makes it a possibility.
Examples using FileReader and FileWriter to read and write plain text
Tags: java, beginners, programming, tutorial
Published: 2021-10-14 02:43:30


This blog is to demonstrate a simple way to use IO stream FileReader and FileWriter.

we can use FileReader to read text from an existing file（read in character）, and print text in the terminal; use FileWriter to write content to certain file. the file will be created if it doesn't exist in the current directory. 

One thing to remember, if we use IDEA, we should create a  file named "temp.txt" with some words in the root directory of the current project when we use FileReader to read from the file.

####Demo of FileReader
```java
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.io.IOException;

public class FileReaderTest01 {
    public static void main(String[] args) {
        // Create FileReader object
        FileReader fr = null;
        try {
            fr = new FileReader("temp.txt");
            char[] chars = new char[4];

            int readCount = 0;
            // Keep reading until reaching the last word
            while ((readCount = fr.read(chars)) != -1) {
                System.out.print(new String(chars, 0, readCount));
            }
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (fr != null) {
                try {
                    // close the stream
                    fr.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}
```


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


####Demo of FileWriter
```java
import java.io.FileWriter;
import java.io.IOException;

public class FileWriterTest01 {
    public static void main(String[] args) {
        // create FileWriter object fw
        FileWriter fw = null;
        try {
            // the file will be created if it does not exist
            fw = new FileWriter("file",true);
            // can run multiple times, and observe the results
            fw.write("Hello Java ");
            // do not forget to flush
            fw.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if (fw != null) {
                try {
                    // remember to close the stream
                    fw.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}
```
move /var/lib/docker to different volume for docker images
Tags: docker, devops
Published: 2021-10-14 02:29:56

## Problem 1 - need move `/var/lib/docker` to large volume
Our local linux disk volume is under **30GB**, so it will be quite challenge for our docker images, which take a lot of space under `/var/lib/docker` folder and quickly run out of space. 
![small disk size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h22d28hjzc75fywzgcd5.png)

## Solution for Problem 1 
It is possible to follow this artile - [Use a Different Volume For Your Docker Images in Ubuntu](https://medium.com/clusterfk/use-a-different-volume-for-your-docker-images-in-ubuntu-4c0315be6d66) that mount a new volume folder e.g. `/dev/sda2` for `/var/lib/docker` and add the following line
```
/dev/sda2    /var/lib/docker    ext4    defaults    0    1
```
in `/etc/fstab` so the mount also happen during startup linux.

A quick tip to get volume type is using command `df -T`

![use command df -T](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxgdv498m6iat88jki9o.png)
 
What I did in fact follow this artile - [How to move docker data directory to another loccation on Ubuntu](https://www.guguweb.com/2019/02/07/how-to-move-docker-data-directory-to-another-location-on-ubuntu/)

- stop the docker daemon
```
$ sudo service docker stop
```
and make sure that docker is not running
```
$ ps faux | grep -i docker
```

- make the folder and `rsync` the files
```
$ mkdir /mnt/docker
$ rsync -avxP /var/lib/docker/ /mnt/docker
```

- Update docker configuration
  * Add a configuration file and tell the docker daemon what is the location of the data directory by creating a file called `daemon.json` under directory `/etc/docker`. the file should have the content:
```
{
    "data-root":"/mnt/docker"
}
```

  * Update the docker service by editing `/lib/systemd/system/docker.service`
Find the following line 
```
ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
```
and update to 
```
ExecStart=/usr/bin/dockerd -g /mnt/docker -H fd:// --containerd=/run/containerd/containerd.sock
```

- Re-start the docker daemon
```
sudo service docker start
# reload docker serivce configuration 
sudo systemctl daemon-reload
```

- test by the following command after you pull an image
```
docker inspect image_id | grep WorkDir
```

## Problem 2 - After linux reboot, docker images are gone
The docker images under `/mnt/docker` are gone, e.g. `/mnt/docker/overlay2` has no docker images that we pulled fromm DockerHub. 

See github discussion https://github.com/moby/moby/issues/36149
and PR https://github.com/moby/sys/pull/62

## Solution for Problem 2
No solution yet, keep looking! So far, have to re-pull the docker images.
Props in react
Tags: react
Published: 2021-10-14 02:01:18

This short blog post will attempt to clearly summarize the concept of props in a way that the newest of programming students can understand.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”).
props(stands for properties)and return React elements describing what should appear on the screen.


Props can be strings, objects, arrays or functions

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

following the [React Docs] (https://reactjs.org/docs/components-and-props.html) Props are Read-Only, immutable and the Component cannot change its own props. 
They are also able to be passed between your components, generally from parent to child.

on the other hand you can pass props from CHILD component back up to the PARENT component. how you might ask ?

We have 2 components:
Parent: App.js
Child: Child.js

Use the following steps:
-Create a function inside your parent component, pass it a parameter and log that parameter using console.log .

-Pass the function name as props into your child component render.

-Invoke the function from props inside your child component.

-Pass in your data as an argument inside the invocation.

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

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


Thanks for reading — I hope this provided some good value