teleren/devto huggingface dataset:
[Binary Search]Reverse Sublists to Convert to Target
Tags: algorithms, java, 100daysofcode, programming
Published: 2021-12-04 10:33:49

https://binarysearch.com/problems/Reverse-Sublists-to-Convert-to-Target/solutions/6985776

Given two lists of integers `nums`, and `target`, consider an operation where you take some sublist in `nums` and reverse it. Return whether it's possible to turn `nums` into `target`, given you can make any number of operations.

**Constraints**

- `0 ≤ n ≤ 100,000` where `n` is the length of `nums`
- `0 ≤ m ≤ 100,000` where `m` is the length of `target`

### **Example 1**

****Input****

`nums = [1, 2, 3, 8, 9]`

`target = [3, 2, 1, 9, 8]`

****Output****

`true`

****Explanation****

We can reverse `[1, 2, 3]` and `[8, 9]`

### **Example 2**

****Input****

`nums = [10, 2, 3, 8, 9]`

`target = [3, 2, 1, 9, 8]`

****Output****

`false`

---

**Intuition**

1. you can reverse as many times as you want
2. so you just need compare weather the numbers are same in these arrays

**Implementation**

****1. sorted array****

```java
public boolean solve(int[] nums, int[] target) {
    if (nums.length != target.length) {
        return false;
    }

    Arrays.sort(nums);
    Arrays.sort(target);

    for (int i = 0; i < nums.length; i++) {
        if (nums[i] != target[i]) {
            return false;
        }
    }
    return true;
}
```

**2. HashMap**

```java
public boolean solve(int[] nums, int[] target) {
    if (nums.length != target.length) {
        return false;
    }

    HashMap<Integer, Integer> map = new HashMap<>();

    for (int num : nums) {
        map.put(num, map.getOrDefault(num, 0) + 1);
    }

    for (int num : target) {
        int count = map.getOrDefault(num, 0);
        if (count <= 0) {
            return false;
        } else {
            map.put(num, count - 1);
        }
    }
    for (int value : map.values()) {
        if (value > 0) {
            return false;
        }
    }
    return true;
}
```

**Time Complexity**

O(*n*) for hashmap, O(nlogn) for sorted array

**Space Complexity**

O(*n*) for hashmap, O(1) for sorted array
Attribute vs Property in HTML
Tags: html, javascript
Published: 2021-12-04 10:14:42

The terms attribute and property can be confusing in HTML.

For example the javascript framework Angular has the concepts Property Binding and Attribute Binding . Without knowing the difference between the two it is difficult to grasp the difference between those concepts.

The major difference between the two is this:

Attribute is related to HTML

Property is related to DOM


Other differences:
1. Attribute and Property names are not always similar
2. Changing Attribute/Property values doesn't always get reflected to the other
3. Attribute is case sensitive , Property is not
4. Attribute values are always strings , Property can be of different data types

Here is an explanation with examples:
[Attribute vs Property](https://fullstackdeveloper.guru/2021/12/04/attribute-vs-property-in-html/)
DevnDesigns - Website Designing & Development Company in Pakistan, USA & UAE
Tags: watercooler, wordpress, agency
Published: 2021-12-04 10:05:47

Our website development company based in USA, UAE, and Pakistan consists of talented web developers and designers with professional expertise, vision, creativity, and innovative web designs. This allows us to create state-of-the-art website designs with premium features that improve your customer’s experience. Our expert team makes us the most prominent name in the world of development, designing, and digital marketing. We provide top-notch website designing services with exclusive performance that improve your digital presence and influence the audience. Also, we excel in all digital marketing practices. Our company works to attain 100% customer satisfaction on all levels thus always hire experienced and professional people to handle all the tasks. 
web url:https://devndesigns.com/
Introduction to Git and GitHub
Tags: github, git, devops, opensource
Published: 2021-12-04 09:47:38

**Just started a career in development, or working on a project where you need people to collaborate, or want to contribute to open source, then git is the real solution for all problems.
In this article, we will deep dive into the git and GitHub as a beginner.**

You don't need to be a black screen coder or anything on a pro level to start learning git. Getting familiar with git and GitHub isn't that complicated.
lets get started !!

### What is git?

![Git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wsyapomhed4jyg4hk02.png)
Git is the most commonly used Version Control System (VCS). It is free and open source. It also makes collaboration easier allowing changes by multiple people to all to be merged into one source. **Git is responsible for everything GitHub-related that happens locally on your computer.**So git is basically a content tracker.
Simply visit this page to download and install Git to your machine.

### Then Whats GitHub ?? 🧐


![GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpk4egypg47wbr3zoaxc.png)
GitHub is a Git repository hosting service. It stores a copy of your local files and their revision history. It lets you and others work together on projects from anywhere. While Git is a command-line tool, GitHub provides a Web-based graphical interface. **It is a cloud-based hosting service that lets you manage Git repositories**. It also provides access control and several collaboration features, such as wikis and basic task management tools for every project.

## **To conclude the definitions**, 
 1. We can track progress of our projects using git.
 2. We can create different git repositories of different versions of our project.
 3. We can host it on cloud using git-hosting-service named GitHub.
 4. GitHub provides accessibility and features for enhancing developer experience.
 5. Congratulations !!! Git and GitHub are not same anymore.

**Thanks for sticking by. There's a lot more to come. Thank you !!😀**
Does Unity keep your Mac staying awake? Maybe you can fix this.
Tags: unity3d, macos
Published: 2021-12-04 09:36:06

---
title: Does Unity keep your Mac staying awake? Maybe you can fix this.
published: true
description: 
tags: Unity, macOS
//cover_image: https://direct_url_to_image.jpg
---

This story is also available on [Medium](https://medium.com/@TETRA2000/unity-keeps-your-mac-staying-awake-maybe-you-can-fix-this-62528616a5b6).

I use Unity sometimes on my MacBook. It's fine except one thing. It'll keep your Mac awake once you've hit "Play" button. Mac will turn off Display when idle. But won't fully sleep until you quit Unity.

Unity allocates audio session to play sounds. It's a usual thing. But the problem is, it won't release the audio session after you've stoped the game playing.

```
$ pmset -g assertion
...
pid 211(coreaudiod): [0x0000aef100019a93] 00:00:03 PreventUserIdleSystemSleep named: "com.apple.audio.AppleUSBAudioEngine:Generic:USB Audio:140000:2.context.preventuseridlesleep"
```

You'll find a config named "Enable Output Suspension" in Audio section of Project Settings. It should help to sleep from what it says in the description. But it's not working.



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

This confused me. 🤔 But I figured out.

Surprisingly, there were no config key for this toggle on your project files before you've changed.

You'll see "m_EnableOutputSuspension" is created like below.

```
--- a/ProjectSettings/AudioManager.asset
+++ b/ProjectSettings/AudioManager.asset
@@ -12,6 +12,7 @@ AudioManager:
   m_DSPBufferSize: 1024
   m_VirtualVoiceCount: 512
   m_RealVoiceCount: 32
+  m_EnableOutputSuspension: 1
   m_SpatializerPlugin:
   m_AmbisonicDecoderPlugin:
   m_DisableAudio: 0
```

And your Mac will sleep after doing this. I also found that Unity releases the audio session after a while since you've stopped the playing.

I think this may be some sort of bugs on Unity.
Advent of PBT 2021 - Day 4 - Solution
Tags: challenge, testing, webdev, javascript
Published: 2021-12-04 09:27:04

---
title: Advent of PBT 2021 - Day 4 - Solution
published: true
description: Advent of Property Based Testing 2021 - Day 4 - Solution
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

Our algorithm was: **detectCycleInLinkedList**.
[Go to the subject itself for more details](https://dev.to/dubzzz/advent-of-pbt-2021-day-4-3m6g)

CodeSandbox with a possible set of properties you may have come with: https://codesandbox.io/s/advent-of-pbt-day-4-solution-jxqle?file=/src/index.spec.ts&previewwindow=tests

---

## Property 1: should not detect any cycle in a non-looping linked list

For this first property, we will come up with tailored inputs having some already known characteristics. Instead of taking two fully random strings, we build two strings having some links together.

> for any linked list not defining any cycle
> it should not detect any cycle

Written with fast-check:

```ts
it("should not detect any cycle in a non-looping linked list", () => {
  // fc.letrec allows us to generate a recursive structure
  // as our typing said a LinkedList is just a value
  // and potentially another LinkedList defined via next
  const noCycleLinkedListArbitrary = fc.letrec((tie) => ({
    node: fc.record({
      value: fc.integer(),
      next: fc.option(tie("node") as fc.Arbitrary<LinkedList>, {
        nil: undefined,
        depthFactor: 1
      })
    })
  })).node;
  fc.assert(
    fc.property(noCycleLinkedListArbitrary, (linkedList) => {
      // Arrange / Act
      const cycleDetected = detectCycleInLinkedList(linkedList);

      // Assert
      expect(cycleDetected).toBe(false);
    })
  );
});
```

## Property 2: should detect a cycle in a looping linked list

As we did for our example based test building a linked list with a cycle, we will create a linked list and attach the `next` of the last item to the first one.

> for any linked list defining a cycle
> it should detect any cycle

Written with fast-check:

```ts
it("should detect a cycle in a looping linked list", () => {
  fc.assert(
    fc.property(fc.array(fc.integer(), { minLength: 1 }), (nodes) => {
      // Arrange
      const lastNode: LinkedList = { value: nodes[0], next: undefined };
      const linkedList = nodes
        .slice(1)
        .reduce((acc, n) => ({ value: n, next: acc }), lastNode);
      lastNode.next = linkedList;

      // Act
      const cycleDetected = detectCycleInLinkedList(linkedList);

      // Assert
      expect(cycleDetected).toBe(true);
    })
  );
});
```

Please node that the reduce trick could also have been used to build the first property without relying on `fc.letrec`.

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
Advent of PBT 2021 - Day 4
Tags: challenge, testing, webdev, javascript
Published: 2021-12-04 09:26:39

---
title: Advent of PBT 2021 - Day 4
published: true
description: Advent of Property Based Testing - Day 4
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

> _Advent of PBT 2021 — Learn how to use property based testing and [fast-check](https://github.com/dubzzz/fast-check) through examples_

Our algorithm today is: **detectCycleInLinkedList**.
It comes with the following documentation and prototype:
```ts
/**
 * Definition of a LinkedList
 */
export type LinkedList = {
  value: number;
  next: LinkedList | undefined;
};

/**
 * Check if there is a cycle in a given linked list.
 *
 * @param list - The linked list to check.
 *
 * @returns
 * true if there is a cycle, false otherwise.
 */
declare function detectCycleInLinkedList(list: LinkedList): boolean;
```

We already wrote some examples based tests for it:
```ts
it("should not detect any cycle for a one-element list", () => {
  const list: LinkedList = {
    value: 0,
    next: undefined
  };
  expect(detectCycleInLinkedList(list)).toBe(false);
});

it("should not detect any cycle for a two-element list", () => {
  const list: LinkedList = {
    value: 0,
    next: { value: 1, next: undefined }
  };
  expect(detectCycleInLinkedList(list)).toBe(false);
});

it("should not detect any cycle for a list with duplicates", () => {
  const list: LinkedList = {
    value: 0,
    next: { value: 0, next: undefined }
  };
  expect(detectCycleInLinkedList(list)).toBe(false);
});

it("should detect a cycle if a node appear twice", () => {
  const list: LinkedList = {
    value: 0,
    next: undefined
  };
  list.next = list;
  expect(detectCycleInLinkedList(list)).toBe(true);
});
```

How would you cover it with Property Based Tests?

In order to ease your task we provide you with an already setup CodeSandbox, with examples based tests already written and a possible implementation of the algorithm: https://codesandbox.io/s/advent-of-pbt-day-4-g0jdy?file=/src/index.spec.ts&previewwindow=tests

You wanna see the solution? Here is the set of properties I came with to cover today's algorithm: https://dev.to/dubzzz/advent-of-pbt-2021-day-4-solution-lh2

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
i18next translation demo
Published: 2021-12-04 09:08:38

Tutorial github link:
[https://github.com/zarrukh-jurakulov/i18next-translation-demo](https://github.com/zarrukh-jurakulov/i18next-translation-demo)

Hello everyone! In this tutorial we learn how to translate languages to another. Firstly we create new project :
`npx create-react-app i18next-translation-demo`.

Firstly we install `npm i i18next i18next-browser-languagedetector react-i18next` libraries. Then we open **locales** folder. In locales folder we create **en** folder for english language and **ru** for russian language. In both of folder we create **translation.json** json file.

In **en** folder of **translation.json** file we write some codes:
 ```react
{
  "title": "Welcome to learning i18next library",
  "part1": "Lets start learning",
  "part2": "Click here !"
}
```

In **ru** folder of **translation.json** file we write some codes:

```react
{
  "title": "Добро пожаловать в изучение библиотеки i18next",
  "part1": "Начнем учиться",
  "part2": "Кликните сюда !"
}
```

Create **i18n file** and write: 

```react
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import translationEN from "./locales/en/translation.json";
import translationDE from "./locales/ru/translation.json";
import detector from "i18next-browser-languagedetector";
// the translations
const resources = {
  en: {
    translation: translationEN,
  },
  de: {
    translation: translationDE,
  },
};
i18n
  .use(detector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    fallbackLng: "en", // use en if detected lng is not available
    keySeparator: false, // we do not use keys in form messages.welcome
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });
export default i18n;
```

In **App** folder we write: 

```react
import React from "react";
import { useTranslation } from "react-i18next";
import i18n from "./i18n";
import "./App.css";
// the hoc
function App() {
  const { t } = useTranslation();
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };
  return (
    <div>
      <button onClick={() => changeLanguage("en")}>english</button>
      <button onClick={() => changeLanguage("de")}>russian</button>
      <h1>{t("title")}</h1>
      <h3>{t("part1")}</h3>
      <h3>{t("part2")}</h3>
      <a href='https://www.i18next.com/'>https://www.i18next.com/</a>
    </div>
  );
}
export default App;
```
Issue in stripe configuration in react native
Tags: reactnative, webdev, tutorial
Published: 2021-12-04 08:44:24

Hello,

- I am trying to configure stripe in my project,
- Stripe version is: "@stripe/stripe-react-native":"^0.2.3"
- I am using this library:  yarn add @stripe/stripe-react-native.
- And My project React native version is : "react-native":0.65.1"
Note: 
it works for android but not for IOS
I am getting the following errors while configuring this
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arpp83ev39f67fmmbygi.png)
The Fastest Way to Write,Debug & Test JavaScript
Tags: javascript, webdev, programming, vscode
Published: 2021-12-04 08:37:00

**A really nice VS Code extension** for testing, prototyping, and learning JavaScript.

**Quokka.js** is an extension available that allows you to write JavaScript code in a scratchpad. 
This scratchpad will auto-update whenever you make changes which makes it the perfect tool for learning, writing, or debugging code

{%youtube ufnjlVYrdtU%}
Java Programming #3: Variable & Data Assignment
Published: 2021-12-04 08:30:51

In the last article, I have talk about several data types and a little bit of "variable". In this article, I will try to explain what is variable and how to assign value to it.

---

### 1. Variable
So, what is a variable?. Variable is some kind of a "placeholder" that will hold data / value. Let us use a box as the example, a box is something that we usually use to store / hold something. For example, Milkbox is used to hold a milk, toybox is used to hold a toy, etc., you get the idea. In programming, variable is used to hold or store values / datas.


![Toybox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0nrktbueeazoja1l8eb.png)
<figcaption>Fig.1 - Illustration of a variable and a data</figcaption>

---

### 2. Assigning data into a variable
After learning about variable, next thing to learn is to assign value to it. In order to perform this assignment operation, a `=` symbol needs to be placed between the variable and the value. In Java, this assignment operation can be done like this:
```java
int hello = 1;
```
let us break the above coding little by little: 
* First of all, the name of this variable is `hello`. 
* The type of this variable is Integer, because there is a `int` keyword before the variable name.
* The number 1 is assigned to the variable since there is a `=` symbol between them.

---

There you go, you have read my explanation about variable and how to assign value to them. Obviously, this article is quiet short and not practical enough, since we have not write any code on the IDE that have been installed previously. This is because we still talk about the core concept of the programming, and hopefully in the next article we will start writing code.

---

I hope that my article helps you to getting started in learning Java programming language. You can give this article some comments, as any feedback is very valuable and important to me (also suggest me some ideas that you think I need to cover). Thank you for reading this article, and have a nice day :smiley:

---

**References**
- https://i.picsum.photos/id/913/1920/1080.jpg?hmac=f2OUZNpb3GqF_ez6PYqRf2U5JIkAvFaD2klqfzlcSTs
Help With SVG In Python
Tags: help, python, flask, webdev
Published: 2021-12-04 08:18:13

Hello Dev.to community!
I am new here and hoping for a rewarding experience. I need help with questions I have about a Python project I am embarking on.

The project has me creating an application in Flask to generate lettering stencils - to be used to form the lettering on concrete tombstones - and also to manage records of the departed. The characters used in the stencils are in SVG format and the stencils are currently made manually using a vector-based editing software. The output is an A3-size PDF file which is then printed and laser-cut.

I seek to automate the stencil-generating process but have no experience working with SVG in Python. The ideal situation would be to find a way to get the application to "recognize" and store each SVG stencil character (perhaps by mapping it to regular alphabets, digits and symbols) and generate the appropriate PDF stencil file whenever the details of a departed person are fed in.

I have tried to do a little research on the SVG libraries available in Python and haven't been very encouraged by my findings (I confess I haven't researched them thoroughly).

My questions are:
1. Does anyone know any Python library or libraries that would be helpful for a project of this nature?
2. Is there a better way to do what I am trying to do? (This is really important to me).

Help, comments, questions are all welcome.
Thank you.
Display array from child component in parent component react JavaScript
Published: 2021-12-04 08:16:59

In the code below, I am passing object from the child component (AddContact.js) to the parent component (App.js) to save in the array in the parent component(contacts). My problem is how to display the array in the parent component. Both log button from the child component and the parent component are logging their array content to the console correctly but its not displaying

App.js

```

import './App.css';
import AddContact from './contact/AddContact';
import React, {useState} from 'react';

function App() {
	const [contacts, AddContacts] = useState([]);
	const Add = (data)=> {
	  contacts.push(data);
	}
  return (
    <div>
		<AddContact Add={Add}/>
		<button onClick={()=>console.log(contacts)}>Parent Contacts Log</button>
		<table>
		{
			contacts.forEach(contact=>{
				<tr><td>contacts.indexOf(contact)</td><td>contact.name</td><td>contact.email</td></tr>
			})
		}
		</table>
    </div>
  );
}
export default App;
```

AddContact.js

```
import React,{useState} from 'react';

function AddContact(props) {
	const [cont, AddCont] = useState({name:' ',email:' '});
	return (
		<div>
			<div><input type='text' placeholder='Please enter your name' onChange={e=>AddCont({...cont,name:e.target.value})} /></div>
			<div><input type='text' placeholder='Please enter your email'  onChange={e=>AddCont({...cont,email:e.target.value})} /></div>
			<button onClick={()=>props.Add(cont)}>Add Contact</button>
			<div><button onClick={()=>console.log(cont)}>Child Cont Log</button></div>
		</div>
	)
}
export default AddContact;
```