teleren/devto huggingface dataset:
Valid Palindrome
Tags: interview, python, dsa
Published: 2022-02-15 10:57:09

##Instructions

A phrase is a palindrome if, after converting all uppercase letters into lowercase letters and removing all non-alphanumeric characters, it reads the same forward and backward. Alphanumeric characters include letters and numbers.

Given a string s, return true if it is a palindrome, or false otherwise.

## Approach
We will remove any spaces and non-alphanumeric characters in the given string, convert the letters to lowercase and then compare if the new string is equal to its reversed equivalent.

##Python Implementation

In this solution, we filter the string to remove non-alphanumeric characters, we convert the iterator to a list and use the join method to convert the list to a string. Then we convert the string to lowercase and compare if it is equal to the reversed string.

The filter() method filters the given iterable and returns an iterator that is already filtered that satisfies the conditions specified by the function passed as a parameter.


```python
def isPalindrome(self, s: str) -> bool:
        a = "".join(list(filter(str.isalnum, s))).lower()
        return a == a[::-1]
```


We can also achieve the same results using the code below:

```python
def isPalindrome(self, s: str) -> bool:
        newStr = ""
        s = s.lower()

        for i in s:
            if i.isalnum():
                newStr += i
        return True if newStr == newStr[::-1] else False 
```
The time complexity if O(n) because we iterate through the string once.
The space complexity is O(n) because we need extra memory for the new string we create.
##Two-Pointer Approach
We can also initialize pointers at the beginning and at the end of the string and compare each letter. If the letters differ we return false

###Python Implementation

```python
def isPalindrome(self, s: str) -> bool:
        
        newStr = ''
        for i in s:
            if i.isalnum():
                newStr += i
        newStr = newStr.lower()
        start = 0
        end = len(newStr)-1
        while start < end:
            if newStr[start] == newStr[end]:
                start += 1
                end += -1
            else:
                return False
        return True
```
What are PropTypes in React?
Tags: react, reactprops, proptypes
Published: 2022-02-15 10:41:15


![What are PropTypes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73ozvtdj2eaq88yn7lqu.png)
PropTypes are a good first line defense when it comes to debugging your apps. But before getting into detail about PropTypes, we have to understand the concept of props.

Props are the read-only properties that are shared between components to give the unidirectional flow of React a dynamic touch. They're mainly shared from the parent component to the child component, but the reverse is also possible (though not recommended).

In this blog, we will discuss how to validate or check the props that we are passing to avoid complex debugging at a later stage.

## What are PropTypes?
PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype. This makes sure that we don’t receive an error at the very end of our app by the console which might not be easy to deal with.

I don't recommend using them in short apps like projects for self-practice but it's totally up to you. For larger projects like for a client, it's often a wise choice and a good practice to use them.

There are many different types of PropTypes and all of them have their unique ES6 classes which we can use. We will discuss every type in this article.

## How to use PropTypes?
Before the release of React 15.5.0, PropTypes were available in the React package, but now we have to add the prop-types library in our project.

We can do so by running the following command in our terminal:

```
npm install prop-types --save
```
We can use PropTypes to validate any data we are receiving from props. But before using it we will have to import it as always in our app:

```
import PropTypes from 'prop-types';
```
They are often used after the component ends and starts with the name of the component as shown:

```
import React from 'react';
import { PropTypes } from "prop-types";
 
const Count = (props) => {
  return (
    <>
      .........
    </>
  )
};
 
Count.propTypes = {
  //// key is the name of the prop and
// value is the PropType
}
export default Count;
```
PropTypes are also objects with a key and a value pair where the ‘key’ is the name of the prop while the value represents the type or class by which they are defined.

Since defining PropTypes on a component does not depend on the component implementation, we will be leaving out the code for the component itself in all the following examples. The code above can be simplified to the following:

```
Count.propTypes = {
// Put props here
}
```
Let's discuss how many types of PropTypes are there before understanding them with an example.
[Continue Reading](https://www.freecodecamp.org/news/how-to-use-proptypes-in-react/)
How to become a diagnoser?
Tags: dotnet, webinar, diagnostics, windbg
Published: 2022-02-15 10:14:49

{% youtube Tz2gBHx3rFI %}

[Konrad Kokosa](https://twitter.com/konradkokosa) and [Sebastian Solnica](https://twitter.com/lowleveldesign) team up once again and this time this dynamic duo will expose their big secret: how to become a successful diagonser! 

Join them if you want to learn debugging **21.02.2022 7 PM CET**
CryptoCurrency Development Services Company | Developcoins

Tags: blockchain, cryptocurrency, beginners, coin
Published: 2022-02-15 09:56:31

 CryptoCurrency Development Services 
Developcoins is the top-rated Cryptocurrency Development Company that provides premium [cryptocurrency development services](https://www.developcoins.com/) & solutions. We help to create your Crypto coin like Litecoin, Ethereum, Neo, Dash, Dogecoin, Monero, etc On top of Blockchain Platforms based on your needs.


---->>>>>>   [Create your Own Crypto Coin ](https://www.developcoins.com/)  <<<<<--------

**We also Provide Services like,**

1. Altcoin Creation
2. [Crypto Token Development](https://www.developcoins.com/token-development)
3. Coin/Token Forking 
4. Cryptocurrency Exchange Development
5. Crypto Wallet Development
6. [SmartContract Development](https://www.developcoins.com/smart-contract-development) 
7. NFT Development
8. DeFi Development
9. Blockchain Development
10. ICO/IDO/STO Platforms Development
11. [White Paper Writing Services](https://www.developcoins.com/white-paper-writing-services)
12. Sports Betting Dapp Development
13. And More 

Visit More - [https://www.developcoins.com/](https://www.developcoins.com/)

Book A Free Consultation via, Call/Whatsapp: +91 9500766617

Telegram - https://t.me/Developcoins

Skype - live:Tech Innovate

Email id - sales@developcoins.com

Original Source: www.developcoins.com
Run Unity web project with Angular
Published: 2022-02-15 09:48:25

Hi, 
Here a way to run a Unity project with Angular.
(with hardcore method!)

1 - Unity settings:

- go on _edit > Project Settings > Player_
- choose the webGL tab (install the module if you don't have it)
- in _Resolution and Presentation_ set to "minimal"
- in _Publish Settings_ set _Compression Format_ to "Disabled"

2 - Build to your Angular assets directory
- go on _file > Build Settings_
- choose the webGL platform
- click on _build_ and set the path to your Angular assets directory

3 - implement it on Angular
- add a script src in the angular index.html (or where you want):

```
<script src="/assets/yourProjectName/Build/yourProjectName.loader.js"></script>
```

- add a canvas with the id "unity-canvas" like so:

```
<canvas id="unity-canvas" width=960 height=600 style="width: 960px; height: 600px; background: #231F20"></canvas>
```

- wright the code below in the ts component you want to use in the ngOnInit for example:

```
ngOnInit() {
        //@ts-ignore
        createUnityInstance(document.querySelector("#unity-canvas"), {
          dataUrl: "/assets/yourProjectName/Build/yourProjectName.data",
          frameworkUrl: "/assets/yourProjectName/Build/yourProjectName.framework.js",
          codeUrl: "/assets/yourProjectName/Build/yourProjectName.wasm",
          streamingAssetsUrl: "StreamingAssets",
          companyName: "YourCompagny",
          productName: "yourProjectName",
          productVersion: "1.0"
        });
  } 
```

Done!
Now you just have to build your project after updates from unity in the angular assets path and it should be all to use it on your project. 
For production you can delete the unless _index.html_ file generated in the _assets/yourProjectName_
A simple global styling method with styled component.
Tags: react, tutorial, styledcomponents, cssinjs
Published: 2022-02-15 09:46:38

Using Styled-components, I have tried several ways to apply global styling & media queries to my React App. I'm here to share my preferred method this far (until I find another better way, of course!).

(For this article, I am using React version 17.0.2, and styled component version 5.3.3) Here it is, in step by step format:

## Step 01. 
- Install styled components


```
yarn add styled-components

//or

npm install styled-components

```

## Step 02.

- Inside the src folder: create a file, and call it `globalStyle.js`
- Here is a screenshot of my folder structure

![screenshot of my folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fumt10zpi0hcls5k18bs.png)

- Inside `globalStyle.js`, add these codes:

```
import { css } from "styled-components";

// Create global color
export const ctaColor = () => {
  return css`
        palevioletred
    `;
};

// Create media queries
export const mobile = (props) => {
  return css`
    @media (min-width: 576px) {
      ${props}
    }
  `;
};

```

**- as you can see, we are simply creating functions that return CSS for us**

## Step 03.

- To use these "CSS-functions" in our components: just import it, then apply it to our styling.

- It works just like the usual JavaScript functions.

- Refer to the codes below for some examples:

```
import styled from "styled-components";
import { mobile, ctaColor } from "../../globalStyle";


const Navbar = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  background: ${ctaColor};
  ${mobile({ flexDirection: "row" })}`

```

## Voila!

That is it, short and simple. I hope it is useful for your projects.

Cheers,

Your friend,
Marizoo
Single Number
Tags: python, dsa, beginners, tutorial
Published: 2022-02-15 09:46:06

**Problem Statement**

Given a non-empty array of integers nums, every element appears twice except for one. Find that single one.

You must implement a solution with a linear runtime complexity and use only constant extra space.

**Approach**

- First if there are no elements in the list return None.
- Keep track of numbers occurring once in singleSet and multiple times in multipleSet.
- Now go over each element in singleSet, and return the first element in singleSet.

**Algorithm**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gz9ift1odupwfdtfbj9.jpg)

**Code**

```
class Solution:
    def singleNumber(self, nums: list[int]) -> int:
        if len(nums) < 1: return None

        singleSet: set = set()
        multipleSet: set = set()

        startingPoint: int = 0
        endingPoint: int = len(nums) - 1

        while startingPoint <= endingPoint:
            if nums[startingPoint] in singleSet:
                singleSet.remove(nums[startingPoint])
                multipleSet.add(nums[startingPoint])

            elif nums[startingPoint] not in multipleSet:
                singleSet.add(nums[startingPoint])

            if startingPoint == endingPoint:
                startingPoint += 1
                endingPoint -= 1
                continue

            if nums[endingPoint] in singleSet:
                singleSet.remove(nums[endingPoint])
                multipleSet.add(nums[endingPoint])

            elif nums[endingPoint] not in multipleSet:
                singleSet.add(nums[endingPoint])

            startingPoint += 1
            endingPoint -= 1

        for num in singleSet:
            return num

        return None
```

**Leetcode Result**

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

So that's it... make sure if you liked the post and got to learn something, like the post and follow us. If you want me to improve at some point... leave that in the comment...
How to use named queries with JPA and JPQL
Tags: java, jpa, codever, snippets
Published: 2022-02-15 09:45:50


You can define several named queries on an entity by using the `@NamedQueries` and `@NamedQuery` annotations. For each named query you need to define a `name` and the jpql `query` itself:

```java
import javax.persistence.*;

@Entity
@Access(AccessType.FIELD)
@Table(name = PartnerInitialLoad.TABLE_NAME)
@NamedQueries({
  @NamedQuery(
      name = FIND_MAX_PARTNERNUMMER,
      query = "select max(p.partnernummer) from PartnerInitialLoad p"),
  @NamedQuery(
      name = FIND_PARTNER_BY_STATUS,
      query =
          "select p from PartnerInitialLoad p where p.status = :status order by p.partnernummer asc")
})
public class PartnerInitialLoad {
  public static final String TABLE_NAME = "T_PARTNER_INITIAL_LOAD";

  public static final String FIND_MAX_PARTNERNUMMER = "findMaxPartnernummer";
  public static final String FIND_PARTNER_BY_STATUS = "findPartnerByStatus";

  public static final String PARAM_STATUS = "status"; //the value here has to match the one in jpql, here "status"

 // further entity details emitted for brevity
}
```

Then use the named queries in your repository services. For that use the `createNamedQuery` method of the `EntityManager`,
which expects the **name** of the query you defined in the metadata, plus the **type of the query result**:

```java
@Stateless
public class PartnerInitialLoadRepository {

  @Inject private EntityManager em;

  public List<PartnerInitialLoad> getPartnersByStatus(Integer chunkSize, String status) {
    var query =
        em.createNamedQuery(PartnerInitialLoad.FIND_UNPROCESSED_PARTNER, PartnerInitialLoad.class);
    query.setParameter(PartnerInitialLoad.PARAM_STATUS, status);
    query.setMaxResults(chunkSize);

    return query.getResultList();
  }

  public int getMaxPartnernummer() {
    var query = em.createNamedQuery(PartnerInitialLoad.FIND_MAX_PARTNERNUMMER, Integer.class);
    var singleResult = query.getSingleResult();

    return singleResult == null ? 0 : singleResult;
  }
}
```

<hr/>

> Shared with :heart: from [Codever](https://www.codever.dev/snippets/620b6123e102f148ceb9f5e6/details). Use :point_right: [**copy to mine**](https://www.codever.dev/snippets/620b6123e102f148ceb9f5e6/details) functionality to add it to your personal snippets collection.
Hide Scrollbar view while scrolling feature is enabled - CSS
Tags: css, sass, html, webdev
Published: 2022-02-15 09:42:20

There are times, in web development, when it is important to add finishing touches to website or web apps, such as hiding the scrollbar view while scrolling feature is still enabled on such element or component.

This article is a quick but an effective tip on how to go about it, in CSS or SCSS or SASS.

Let's say the component that needs the scrollbar to be hidden is not neccessarily the overall body of the page, but an element in the body that has it's content overflowing. Let's say the component has a className of **overflowed-content**.


Then we will need to do our styling magic with the classname in **css**:

```
.overflowed-content {
   overflow-y:scroll
   scrollbar-width: none;
}

.overflowed-content::-webkit-scrollbar{
   display: none;
}
```
Loophole 🧐 in Instagram Music downloading 🎼🎶 Reel then story
Tags: sh20raj, instagram, tutorial, devops
Published: 2022-02-15 09:30:21

> According to instagram policy you may have noticed that Instagram doesn't allow you to download the music you had used to create a **reel or story**. 

If you save them Instagram will remove the audio _you had added using Instagram music_ from your **story or reel**. But here's the loophole came.

# The Loophole

Let's say you want to download the Instagram Music directly from Instagram ( ligally ).

- Create a reel using the Instagram Music 🎶.
- Share the reel to your Story ☺️.
- Now, Save the reel your music is not going to be remove ☺️👍. (I think Instagram treat the story as your own uploaded story. So, the save feature is comming.)

---

The purpose was only to make people know about this loophole. Tag this article to instagram if they can fix this ASAP. (If this is a real problem)

---

> Hey people I look it as a loophole. What's your opinion? You may comment to place your thoughts here...

[Instagram](https://instagram.com/sh20raj)

### Thanks 🔆
Optimize JavaScript Loading with ‘defer’ and ‘async’ Attributes
Tags: javascript, webdev, beginners, tutorial
Published: 2022-02-15 09:29:43

We are all used to using the script tag to load external JavaScript files in our HTML. Traditionally, the only workaround for having the scripts load after the HTML has been loaded was to move the script tags towards the end of the body. But JavaScript has come a long way since then. Attributes such as defer and async have been added to the specification in ES2015 that allow more granular control of how JavaScript gets loaded.

Let us take a look at what defer and async attributes are and how they help optimize JavaScript loading.

## Why do we need these tags?

If a script tag is placed in the header of an HTML page, the parsing of the HTML is paused until the script is fetched, and executed. The HTML parsing only resumes once the script execution is completed. This can lead to poor user experiences. Both defer and async help avoid this. They allow parallel download of the script tag while the HTML is being parsed.

## Defer and async

Both of these are boolean attributes with a similar syntax:

It is worth noting that the tags are only useful if the script is in the head section of the HTML. They are useless if the script is put inside the body tag.

If both are specified, precedence is given to async.

## Async

When the browser encounters a script tag with the async attribute, it downloads the script in parallel while it continues to parse the HTML. Once the script is fully downloaded, the browser pauses the HTML parsing and executes the script file. This helps improve the overall loading time of the page.

## Defer

The defer tag is similar to the async tag in the sense that it allows the parallel download of the JavaScript file without pausing HTML parsing. It goes one step further by waiting for the HTML parsing to be completed before executing the script.

## Which one should I use?

Here is a graphic to help visualize the different processes:

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

Most of the time defer is the preferred option because it reduces page load time the most. It does not execute until the DOM is ready, and follows the script order. So you get more control over the script’s execution as well.

Async sounds sexier but it is only useful if the script does not need the DOM or any other scripts.

And that is all you need to know about defer and async attributes on the script tag and how you can optimize the page loading time by using these. If you have any questions, feel free to drop a comment below.

*Originally published at [https://www.wisdomgeek.com](https://www.wisdomgeek.com/development/web-development/javascript/optimizing-javascript-loading-with-defer-and-async-attributes/) on August 15, 2021.*
What should I choose Next.js or Remix?
Tags: javascript, webdev, discuss, help
Published: 2022-02-15 09:27:49

---
series: Building a new blog
---

I want to rebuild [my personal website](juandavidvega.es), and I would like to take this as an opportunity to learn something new.

**What should I learn [Next.js](https://nextjs.org/) or [Remix](https://remix.run/)?**

I am a backend developer with a knee on the frontend, mainly React and Typescript. I don't want to learn Vue or any other framework right now.

I still need to pick a design, so if you have any suggestions.

I will keep sharing here my progress on building it.

[Photo by Andres Ayrton from Pexels](https://www.pexels.com/photo/woman-showing-apple-and-bitten-doughnut-6551415/)
LMDTFY Series : MultiCloud Vs Hybrid Cloud
Tags: hybridcloud, multicloud, difference
Published: 2022-02-15 09:16:02

![](https://raw.githubusercontent.com/ksingh7/blogs/main/posts/assets/multi-cloud-hybrid-cloud-min.png)

## Difference between : MultiCloud and  Hybrid Cloud

### TL;DR
These two terms are very similar yet different. Lol ;D

- **MultiCloud** : Refers to using multiple clouds from multiple public or private cloud providers for workloads or tasks spanning across said clouds but without any interconnectivity between the clouds.

- **Hybrid Cloud** : Refers to the combination of public and private clouds with some degree of connectivity, integration, portability and unified management.


![](https://raw.githubusercontent.com/ksingh7/blogs/main/posts/assets/thats-all-folks.gif)