teleren/devto huggingface dataset:
JavaScript Code Daily Challenge #6
Tags: javascript, challenge, codenewbie, beginners
Published: 2020-11-26 09:55:04

# **About**

This is a series of JavaScript Code Daily Challenge. Each day I show a few solutions written in JavaScript. The questions are from coding practice/contest sites such as HackerRank, LeetCode, Codeforces, Atcoder and etc.

> Between Two Sets
> [https://www.hackerrank.com/challenges/between-two-sets](https://www.hackerrank.com/challenges/between-two-sets)
```javascript
'use strict';

const fs = require('fs');

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', function(inputStdin) {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.split('\n');

    main();
});

function readLine() {
    return inputString[currentLine++];
}
```
> Complete the 'getTotalX' function in comment.
> The function is expected to return an INTEGER.
```javascript
function getTotalX(a, b) {
    
}
```
```javascript
function main() {
    const ws = fs.createWriteStream(process.env.OUTPUT_PATH);

    const firstMultipleInput = readLine().replace(/\s+$/g, '').split(' ');

    const n = parseInt(firstMultipleInput[0], 10);

    const m = parseInt(firstMultipleInput[1], 10);

    const arr = readLine().replace(/\s+$/g, '').split(' ').map(arrTemp => parseInt(arrTemp, 10));

    const brr = readLine().replace(/\s+$/g, '').split(' ').map(brrTemp => parseInt(brrTemp, 10));

    const total = getTotalX(arr, brr);

    ws.write(total + '\n');

    ws.end();
}
```
How to make Good Website part 2/3
Tags: webdev, beginners
Published: 2020-11-26 09:37:58

In this second part I will tell you another 2 Tips how to make good looking website.

1. When you have a lot of text you want to show on your site do not just paste all text to one place. Divide it into several sections with pictures, which will give you more visitors.

2. Make good meta description. Is very important for visitors 
because they often decide accordingly whether to visit site or not.

Thanks for reading.
Add Typescript type check to next.js
Tags: typescript, nextjs
Published: 2020-11-26 09:36:30

Default the next.js doesn't run typescript type check. 
When I started to create my blog in next.js and in typescript soon I needed to check the project for type errors. 
Here is the way how I made it to do that for me.
This is my first post, so I hope it helps others.

This assumes you already set up the project with typescript.

First we need to add fork-ts-checker-webpack-plugin to the project as a dev dependency
```sh
$ yarn add -D fork-ts-checker-webpack-plugin
``` 

Second, we need to create a next.config.js (if was not created previously), in the project root and add config:


```javascript
/* eslint-disable @typescript-eslint/no-var-requires */
 
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 
module.exports = {
 /**
  * Custom Webpack Config
  * https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
  */
 webpack(config, options) {
   const { dev, isServer } = options;
 
   // Do not run type checking twice:
   if (dev && isServer) {
     config.plugins.push(new ForkTsCheckerWebpackPlugin());
   }
 
   return config;
 },
};

``` 

Now you can start development in the well known way, and on every save you should see issue checking messages:


```sh
$ next dev
ready - started server on http://localhost:3000
Issues checking in progress...
No issues found.
event - compiled successfully
event - build page: /
wait  - compiling...
No issues found.
``` 

Good luck!
Windows Tip #Color Filter
Tags: productivity, windows, tips
Published: 2020-11-26 09:33:16

FOCUS!

Does too many color distract you sometimes. You dont like the theme on some of the site you think too glossy colors. Here is a setting tht might help you filter the distracting colors.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7cei8cavyei6yk0dwxl8.png)
How to copy an image from one folder to another in php?
Tags: php, computerscience
Published: 2020-11-26 09:31:54

To copy an image from one folder to another folder you have to read the image file that you want to copy. Then create another file with the same name as the original file in the directory to where you want to copy.

#Copy() function:
The copy() function in PHP is used to copy a file from source to target or destination directory. It makes a copy of the source file to the destination file and if the destination file already exists, it gets overwritten. The copy() function returns true on success and false on failure.
Read more at [kodlogs](https://www.kodlogs.com/blog/409/how-to-copy-an-image-from-one-folder-to-another-in-php).

##Code:

```
<?php

$old_sub_dir = '/directory/containing/the/images';

$new_sub_dir = '/directory/waiting/for/the/images';



 //get the content from directory

 $contents = array();

 $dir = opendir($_SERVER['DOCUMENT_ROOT'] . $old_sub_dir);

while (false !== ($file = readdir($dir)))

{

 $contents[] = $file;

 }

 closedir($dir);



//get only jpeg images from folder

 $jpeg_contents = array();

 foreach($contents as $file) {

 if (eregi('.jpg{1}$', $file)) {

 $jpeg_contents[] = $file;

}

}

// copy each jpeg from directory 'source' to directory 'destination'

 foreach($jpeg_contents as $file) { 

copy($_SERVER['DOCUMENT_ROOT'] . $old_sub_dir . '/' . $file, $_SERVER['DOCUMENT_ROOT'] . $new_sub_dir . '/' . $file);

 }

?>
```
Getting into Dev.to
Tags: watercooler, welcome
Published: 2020-11-26 09:30:00

I finally had the time to get my hands on Dev.to. 

One, I had the chance to catch up and reconnect with one of my first Dev friends from the previous internet company that I worked with and introduced me here. (Hi @raphael_jambalos!) I'm very grateful for the people who shared this platform with me. Of course, I was still iffy about putting myself out here, but the platform has been surprisingly warm, and straight forward.

The bulk of my experience came from a CX  background, and I never imagined I'll be interested in the world of Dev, UX/UI or Tech in general — I coordinate with them a lot so we can make complex things simple and easy to use. Though challenging at times, I must say, it has been extremely rewarding and very fulfilling. I came here because it's been three years since I've been wanting to study again and do UX. I guess I have always been afraid and always had reservations for it, but here I am diving in. I'm very keen to learn from everyone here at Dev.to!

Thanks for stopping by! :)
Sublime text Là Gì- Tầm Quan Trọng Của Sublime Text Với Developer
Published: 2020-11-26 09:24:20

Bạn là một lập trình viên, bạn đang tìm hiểu và không biết định nghĩa sublime text là gì cũng như tầm quan trọng của nó. Hãy tham khảo bài viết dưới đây nhé Xem chi tiết tại: http://nghelaptrinh.net/sublime-text-la-gi/
Cultural richness at work
Tags: watercooler
Published: 2020-11-26 08:46:25

India is a secular country so people of different religions and faiths have the freedom to practice and follow their religion without any fear of discrimination. So we have so many festivals to celebrate :)

I strongly believe that celebrating festivals and performing cultural activities at an organization improves the culture of an organization. It helps the employees to get along with each other and it's also refreshing.

So let's take a look at which and how festivals are celebrated at my current organization

### Navratri
{% youtube DkeMW41-yFA %}

We celebrate Navratri wearing traditional clothes, gathering, and doing a traditional dance which is called Garba as you can see in the video. A huge amount of people gather and do it. We also celebrate this at our organization. This is so much fun doing the Garba with people you work

### Holi
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ovpn4od3y1uotti82dln.jpg)
Holi is a popular ancient Hindu festival, also known as the Indian "festival of spring", the "festival of colors", or the "festival of love". The festival signifies the victory of good over evil. We celebrate Holi by applying colors to each other. It's also called a day to forget and forgive.


### Diwali
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ie942sihmlq9g8kb030g.jpg)
Diwali is a festival of lights and one of the major festivals celebrated in India. We celebrate Diwali with Diya and lighting, home decoration, shopping, fireworks, puja (prayers), gifts, feast, and sweets. At the organization, we decorate the whole office. We make rangolis, we wear a traditional dress on that day and click photos.


### Christmas
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k1o0znhfv5nrrvsn210i.jpeg)
We celebrate Christmas by decorating our desks, office, and a secret Santa tradition. So far I got a camera bag (I don't have a camera), a gym bag(I don't go to a gym), and aviator goggles (I used it once) But it's fun doing these things.


### Eid
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fjkez54d4l45bis2j2gg.jpg)
Eid is a Muslim religious festival. On Eid, one of the presidents of our office brings Homemade Sevaiya Kheer(Desert) and we all get to enjoy this perfect dessert.


>The best thing about all of these activities is everyone gets together and celebrates leaving all the work stress and lives it up.


Which cultural activities do you perform at your organization or which festivals you celebrate and how?
Excel Formulas to Sum the Values Between two Numbers!!
Tags: excelformula, excelformulas
Published: 2020-11-27 09:10:28

---
title: Excel Formulas to Sum the Values Between two Numbers!!
published: true
date: 2020-11-26 08:37:02 UTC
tags: ExcelFormula,Excelformulas
canonical_url: https://geekexcel.com/excel-formulas-to-sum-the-values-between-two-numbers/
---

This page will show the **formulas to sum the values between two Numbers in Excel Office 365**. Let’s get into this article!! Get an official version of ** MS Excel**  from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

[![Formulas to sum the values between two numbers](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/11/EXCEL_uffruWuZdp.png)](https://geekexcel.com/?attachment_id=18200#main)<figcaption id="caption-attachment-18200">Formulas to sum the values between two numbers</figcaption>

## General Formula:

- The below formula will help to sum the values between two numbers in Excel.

**=SUMIFS(sum\_range,sum\_range,”>X”,sum\_range,”<Y”)**

## Syntax Explanations:

- **SUMIFS** – The Excel SUMIFS Function will help to sum the cells that meet multiple conditions or criteria.
- **Criteria (X & Y)** – It is the specific value or criteria which is used to sum the cells.
- **Sum\_Range** – It represents the input values given in the worksheet.
- **Comma symbol (,)** – It is a separator which helps to separate a list of values.
- **Parenthesis ()** – The main purpose of this symbol is to group the elements.

## Example:

- Now, we are going to sum the values between two numbers from a range.
- Refer to the below image.
- Here, we will give the input values in **Column C**.
- Then, apply the formula in the formula bar section.
- After applying the formula, it displays the result as per the below image.

![Example](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/11/Excel.png)<figcaption id="caption-attachment-18140">Example</figcaption>

## Wrap-UP:

In this tutorial, we explained the **formulas used to sum the values between two numbers in Excel Office 365**. Hope you like this article. If you feel this article is useful to you, leave **feedback** in the below **comment** box. Thank you so much for Reading!! Keep learning on **[Geek Excel](https://geekexcel.com/)!! **and [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!!**

### Read Ahead:

- **[Formulas to Sum the Values by Week in Excel Office 365!!](https://geekexcel.com/formulas-to-sum-the-values-by-week-in-excel-office-365/)**
- **[Formulas to Sum the values by month in Excel Office 365!!](https://geekexcel.com/formulas-to-sum-the-values-by-month-in-excel-office-365/)**
- **[Excel Formulas to Sum the Cells that contain Formulas!!](https://geekexcel.com/excel-formulas-to-sum-the-cells-that-contain-formulas/)**
- [**Formulas to Sum Bold Values or Numbers Only ~ Simple Method!!**](https://geekexcel.com/formulas-to-sum-bold-values-or-numbers-only-simple-method/)
Week 3 ReactJs
Tags: webdev, javascript, react, css
Published: 2020-11-26 08:31:36

Let us talk what i have learnt in the previous week the HTML i.e. the structure of the WebPage. CSS concepts like the flex box and grid and JavaScript use for the BOM and DOM operation and event listener and handlers. By the learning it have made the *StopWatch* project in JavaScript CSS html.
## What is React.js?
![ReactJs](https://dev-to-uploads.s3.amazonaws.com/i/1oxrkxf3obdzmy3m0wnm.png)
Reactjs is an front-end the library use for making the UI of the web page.Without the ReactJs it is possible to the make website. But Reactjs helps us in managing the folder structure of the code efficiently. ReactJs also helps us in making the code reusable. Like if I have made the Card Components in the React then we can reuses in the multiple times in another Components helping us in make the development easier. 
## ReactDOM
Previously, ReactDOM was a part of the ReactJS library. It is a library that provides DOM-specific methods, while ReactJS is only responsible for rendering data to the DOM.

ReactDOM helps declare the top-level of the application by using the ReactDOM.render method. It is a reference to the root component instance, and it helps control its contents.

ReactDOM.render(
  < App />,
  document.getElementById('app')
)

## Why React.js?
There are many factors why we use reactjs.
1. Large Community: ReactJs has large community because it is maintained by the Facebook. Large numbers of developers are preferring the react over other framework. We can easy resolve our issue. 
2. Learning Curve: ReactJs has simple learning curve has compared to another framework and library.It is developer friendly as new beginners adopt it easily.
3. Code Re-Usability : The React help us to break the component into multiple parts into small UI . It help us to make focusing into small feature of the code.

### Component 
ReactJS allows the composition of complex user interfaces to be rendered by small pieces of code called components. A component contains both the HTML template and the code that controls it. We can break code into small part modules 
Reactjs use the JSX combination of the javascript and HTML.

## Virtual DOM
Unlike in another framework there are two DOM in React
js that are Virtual DOM and Real DOM. Real Dom and virtual Dom are sync betweeen each other. Is there are any changes first it will reflected to the virtual DOM then updates to Real Dom. 
![](https://dev-to-uploads.s3.amazonaws.com/i/5nhh4vwu1b3ooxpzld6s.png)

You can follow me on [Twitter](https://twitter.com/amansharma0011) or connect with me on [LinkedIn](https://www.linkedin.com/in/amansharma01/).
Stateless Là Gì- Ứng Dụng Stateless Hoạt Động Như Thế Nào
Published: 2020-11-26 08:22:28

Stateless là những dữ liệu có thể được nhìn thấy trên thanh địa chỉ của một trình duyệt web.Vậy stateless là gì, chúng hoạt động như thế nào? Xem chi tiết tại: http://laptrinhvacongnghe.com/stateless-la-gi/
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-11-26 08:19:19

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Hacktoberfest 2020 and me 
 Hi, my name is Sarim, and currently, I am a frontend developer pursuing backend development I'm new to blogging so if you find mistakes do correct me in the comment section. 
### Background

 I can hear a lot about Hactoberfest from my friends last year they can show me their swag stuff so I got interested and finally this year I decided to participate in Hackctoberfest . I'm a complete beginner to Hacktoberfest challenge but I complete in a night    
### Progress

  
I'm new to open source as I came to know about open source I simply loved it because I love to contribute and it is also a source of great learning 

### Contributions

  I  contribute to updating  readme files of Projects 
https://github.com/sarim-dev/Harry-Potter
https://github.com/sarim-dev/Anime-Tracker-Web-App


### Reflections
Overall my Hacktoberfest experience was good and looking forward to participating next year
Design Patterns Là Gì- Lý Do Cần Sử Dụng Design Patterns
Published: 2020-11-26 08:07:17

Design Patterns là gì đã và đang là câu hỏi khiến không ít lập trình viên phải bối rối khi được nhắc đến.Hãy theo dõi bài viết sau đây nhé. Xem chi tiết tại: https://blog.itnavi.com.vn/design-patterns-la-gi/
664 Bytes reactivity
Tags: javascript, typescript, react, opensource
Published: 2020-11-26 08:06:33


Minimalistic, [fast](https://github.com/betula/reactive-box-performance), and highly efficient reactivity.

Hi friends! Today I will tell you how I came to this.

Redux has so many different functions, Mobx has mutable objects by default, Angular so heavy, Vue so strange, and other them so young :sweat_smile:

These funny thoughts served as fuel for writing the reaction core. So that everyone can make their own syntax for managing the state of the application in 100-150 lines :+1:

It only three functions:

+ `box` - is the container for an immutable value.
+ `sel` - is the cached selector (or computed value in another terminology) who will mark for recalculating If some of read inside boxes or selectors changed.
+ `expr` - is the expression who detects all boxes and selectors read inside and reacted If some of them changed.

```javascript
import { box, sel, expr } import "reactive-box";

const [get, set] = box(0);
const [next] = sel(() => get() + 1);
const [run, stop] = expr(() => {
	console.log(`Counter: ${get()} (next value: ${next()})`)
});
run();
set(get() + 1);
```

[Try on RunKit!](https://runkit.com/betula/5fbf60565572d7001a76cd29)

Basic examples:

- [Counter with Node.js on RunKit](https://runkit.com/betula/5fbde8473dd2b0001bb8f9be)
- [Counter with React on CodeSandbox](https://codesandbox.io/s/reactive-box-counter-35bp9?hidenavigation=1&module=%2Fsrc%2FApp.tsx)

It is minimal core for a big family of state managers' syntax. You can use the different syntax of your data flow on one big project, but the single core of your reactions provides the possibility for easy synchronization between them.

Examples of state managers' syntax:

- [Simple store and actions and only hooks with React on CodeSandbox](https://codesandbox.io/s/reactive-box-store-nku88?hidenavigation=1&module=%2Fsrc%2FApp.tsx)
- [Simple model with React on CodeSandbox](https://codesandbox.io/s/reactive-box-model-yopk5?hidenavigation=1&module=%2Fsrc%2FApp.tsx)
- [Mobx like todo-mvc with React on CodeSandbox](https://codesandbox.io/s/reactive-box-todos-u5q3e?hidenavigation=1&module=%2Fsrc%2Fshared%2Ftodos.ts)

Install

```bash
npm i reactive-box
```

Thank you for your time!

[See reactive-box repository on Github](https://github.com/betula/reactive-box)
How to add fONtS to any Desktop Application
Tags: tutorial, fonts, design, style
Published: 2020-11-26 07:10:43

Why should you be stuck at using only your system's default font? That's not fair to the other thousands of pretty fonts out there. Well, in the next minute, I will show you how to start using other fonts in any desktop application.

![Quote about fonts](https://dev-to-uploads.s3.amazonaws.com/i/suzmi8uj867bv0yk913n.jpg)

## Here are 3 easy steps:

- 🔍 First, check the web for any downloadable font ([Google fonts](https://fonts.google.com/)) and then download it to your computer.
- 📦 If it's a zip folder, extract it and look for the .ttf or .otf file and open it.
- 🖱️ When you open the file, click install to add the font to your system.

AND we are Done.

![GIF - A cartoon speedily leaving the scene](https://dev-to-uploads.s3.amazonaws.com/i/xk5pkqt92bx6xwije1yg.gif)

---


---

Not so fast. I'm still here.
I know I was supposed to tell you how to add it to your application (like photoshop, ms word, LibreOffice, and whatever...)
Yea, but there's no need for that because all these apps directly check out the fonts installed on your system. So your newly installed font should be ready for use, the next time you open up your app.

![A meme about finally words](https://dev-to-uploads.s3.amazonaws.com/i/5n5s98tkpqi5aehb2tn1.jpeg)

If for any reason, you want to manually add the font to your system _(maybe the files to click and install are many or your system is having a bad day)_,
You can simply drag and drop the extracted files into your system's Fonts Directory.

**for windows**: drag and drop it here,
_Control Panel > Appearance and Personalization > Fonts_

**for linux**: drag and drop it here,
_/usr/local/share/fonts/_
(Note: use *__sudo nautilus__* to open a root file browser)

---
_Finally, drag your mouse/finger to the like button and click on it._ 

---

THAT'S ALL FOR NOW. 👋
Go lighten up your words with some preTTy FoNtS.
JS factory pattern
Tags: todayilearned, javascript
Published: 2020-11-26 06:58:34

After reading more about the Factory Method design pattern I wanted to know how it would work with JS and what are the benefits. Turns out that this design pattern doesn't provide more benefits over class creation or constructor functions. The only thing that changes is how the `this` is handled.



```
/*
 Constructor function
 - implicitly returns this
 - must be called with new keyword
function Dog(name) {
  this.name = name;
}

const dog = new Dog('joe');

/* 
  Class
  - desugars to a constructor function
  - must be called with new keyword
*/
class Dog() {
  constructor(name) {
    this.name = name;
  }
}

const dog = new Dog('joe');

/*
  Factory
  - must return an object
  - called as a regular function without new keyword
*/

function Dog(name) {
  return { name }
}

const dog = Dog('joe');

```
Basic Hooks: useState
Tags: react, beginners, tutorial, webdev
Published: 2020-11-26 06:42:44

Hello everyone 👋, I hope you are doing great.

So, today you are going to learn all the basic concepts of ``React.useState`` Hook.

The `React.useState` is a function that accepts one argument, which is the initial state, and returns an array containing two values. The first value is the current state, and the second value is an updater function that allows you to update the current state.

We can name these two variables whatever we want, but a common convention is to choose a name for the current state and then prefix the ``set`` in the front of the updater function.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0121yo52lmjhmdpi2z0u.jpg)

Here is the sample code that uses the ``React.useState`` Hook.
```js
// function component
function Counter() {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return <button onClick={increment}>+ {count}</button>;
}
```   

**Example**
{% codepen https://codepen.io/bipinrajbhar/pen/qBaWLoa %}

I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.

My name is **Bipin Rajbhar** and I am a software engineer at [QuikieApps](https://www.quikieapps.com/), and you can follow or connect to me on [Twitter](https://twitter.com/Bipin_1598) and [Linked In](https://www.linkedin.com/in/bipinrajbhar1598/)

**Resources**
[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
[Epic React](https://epicreact.dev/)