teleren/devto huggingface dataset:
Non-Repeating Number except two
Tags: java, bitmanipulation, beginners, programming
Published: 2022-01-30 18:46:29

Given an array A containing 2*N+2 positive numbers, out of which 2*N numbers exist in pairs
whereas the other two number occur exactly once and are distinct. Find the other two numbers.

Example 1:
Input: 
N = 2
*arr[] = {1, 2, 3, 2, 1, 4}*
Output:
3 4 
Explanation:
3 and 4 occur exactly once.

So this is a **MEDIUM LEVEL** question on bit manipulation, asked in many companies like *Amazon, Accolite, Google, MakeMyTrip*.

To solve this question click here:(https://practice.geeksforgeeks.org/problems/finding-the-numbers0215/1)

Before starting you should know one basic properties of XOR:
(i) n ^ n=0      (XOR of two same elements is always 0)

1=0001
2=0010
3=0011
2=0010
1=0001
4=0100


1.First step is to find the XOR of all the elements. 
*(Since all the elements occur twice except two elements so all the elements will cancel each other out and the two unique elements will be left.eg: 1^2^3^2^1^4=3^4=0111      as 1^1=0 , 2^2=0 )*

2.Suppose the XOR of all the elements is stored in variable 'res' , res=0111(3^4) then the next step is to find the right most set bit mask(rsbm) of res.*(which is rsbm=0001)*

3.Here the basic idea is to separate those elements with right most set bit 1 (rsbm=1) from the elements with rsbm=0 and then find the XOR of these elements separately, *(for eg. find the XOR of 1,3,1 separately and 2,4,2 separately....1^3^1=3  and  2^4^2=4)*

4.So after finding the XOR separately, we  got the two unique elements present in the array. 

**JAVA CODE:**
```
import java.util.*;
class Twonon_repeating_no {
    public static void main(String[] args)
    {
        Scanner sc=new Scanner(System.in);
        System.out.println("Enter a number:");
        int n=sc.nextInt();
        int[] arr=new int[n];
        System.out.println("Enter the elements of the array:");
        for(int i=0;i<n;i++){
            arr[i]=sc.nextInt();
        }

        int res=0;

        for(int i=0;i<n;i++){
            res=res^arr[i]; //XOR of all the elements
        }
        int rsbm=res & -res; //right most set bit mask of the XOR of the two unique element present in the array

        int x=0;
        int y=0;

        for(int i=0;i<n;i++)
        {
            if((arr[i] & rsbm)==0){
                x=x^arr[i];
            }
            else{
                y=y^arr[i];
            }
        }
        if(x>y){
            System.out.println(y);
            System.out.println(x);
        }
        else{
            System.out.println(x);
            System.out.println(y);

        }
    
    }
}
```
Day 1 of 100DaysOfCode
Tags: 100daysofcode, todayilearned, python, discord
Published: 2022-01-30 18:46:21

## Day 1 of 100DaysOfCode Challenge
Here can you find what I learned (& published) today.
 

### What I learned & published / updated today?
Day 1 of 100DaysOfCode I learned the basics of the 2captcha and Google Captcha API and I published the advanced rich presence example (for discord in python using presence) in the [DiscordCustomRPC.py](https://github.com/InvalidLenni/DiscordCustomRPC.py) repository. 

### Recommendation 
I recommend the 100DaysOfCode Challenge to **every** developer! 😄
How to Train a YOLO-V5 Model on Custom Dataset.
Tags: python, machinelearning, deeplearning, yolo
Published: 2022-01-30 18:22:47

Object Detection is a task in computer vision that focuses on detecting objects in images/videos.

In this article, we are going to use Yolo-V5 to train our custom object detection model. YOLO is one of the most famous object detection models.

## How We Going to Train Our Model.
1. First we need a data set.
2. Second we will tain our model through google colabs.
3. Third we will run it on our own machine.

## Environment Setup
Here is link to notebook: [Google Colab](https://colab.research.google.com/drive/1gDZ2xcTOgR39tGGs-EZ6i3RTs16wmzZQ#scrollTo=Ie5uLDH4uzAp)
You need a google account to use Google Colab. You can either use  notebook which is provided and recomended by YOLO to train or you can create your own notebook and follow along.

If you are planning to use this notebook then make sure to File → save a copy in your drive. Then you will be able to edit the code.

### Installing the YOLOv5 Environment
To run object detection model in your own machine you need to setup YOLO in your own machine following code will clone the code base.
```
!git clone https://github.com/ultralytics/yolov5  # clone repo
!pip install -U -r yolov5/requirements.txt  # install dependencies
```
## Preparing the Dataset.
First we need to download the data set in your machine and go straight to [Roboflow](https://roboflow.com/) and create new project. Roboflow is a great tool also recomended by the YOlO readme.

![Create new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tapnn6725a7ta9p8kj9t.PNG)
After creating new project then we need to upload dataset. Roboflow is very fast and it will upload images and lables. 
![Roboflow Upload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y15grlmj3e7u1br9lwq4.PNG)
Roboflow will convert data set into Yolo-V5 format and divide dataset in to train validate and test according to your personal requirments. After that you only need to export by download code.

![Download Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpparwwvp5zi7lukvbfx.PNG)
Now we have prepared our dataset lets move to next step of training the model.

## Train the Model
For this part we will now move on to google coloabs notebook after saving a copy of notebook you only need to run all the code cells which are already written please run one cell at a time with sequence after cell is done move to next.

In the third block provide your snippet of code given by roboflow.

After that run the rest of the code cells it will take a lot of time training the model but after running the last cell you will have a weights file in your goolge drive.

## Run it on Your Machine
Now remeber we cloned Yolo-V5 go in that directory. Downolad Best.pt file from google drive and place this file in Yolo-5v directory along with a test image.

```
python detect.py --weights best.pt --source image.jpg 
```
Run this command and you done.
Fear.......
Published: 2022-01-30 18:18:36

Thirty-seven.....thirty-seven years old. I have lived, loved and lost. Yet, a little blog post scares the shit out of me. Go figure! All that keeps coming into my mind is my swimming instructor. When I was younger I was put into swimming lessons after almost drowning at a local water park. The instructor shortly after starting the lesson asked me to go sit on the diving board. My heart raced as I walked over to the deep end and sat criss cross at the end of the diving board. 

My instructor asked me to hang my feet over the edge, and began asking me about my likes and dislikes. What did I enjoy about school any friends that I had. I remember thinking to myself how weird are these questions. You and I are not here to make friends, and before I could continue the thought I was in the water. My instructor had pulled me in when I wasn’t paying attention. I was kicking and I remember feeling like a bobble head doll coming in and out of the water confident I was swallowing way more than I was spitting out. 

Heart racing, arms flaring, and feet kicking.....I was doing it. What felt like an eternity in reality was only a few minutes. It took the instructor, the family that had brought me several minutes of scream to get my attention and calm be down enough to notice I was swimming.  Calmer and listening to the instructions being given to me I slowly began to get better. Months later I was jumping off the high dive into the water no problem. I was no where near the level of professional divers and swimmers but I was proud of what I had accomplished. Looking back it was a really good lesson for me, one I would remember from time to time when my nerves got the better of me. 

And look, my first post. Written, posted and out there. Sure the grammar may be bad, the spelling may be horrible. But I did it, and I am confident over time I will get better. The hardest part is over......breath.....think....repeat......
FOSS projects should describe what is a good actor behavior
Tags: watercooler
Published: 2022-01-30 18:13:42

The faker.js scandal got me thinking on many things. One of them is that in FOSS we leave ourselves open a lot to abuse from bad actors who abuse the openness and permissiveness of FOSS. As developers we expect that the users of our software will be also good actors. Most of the times this actually doesn't matter, but it becomes really painful when you actually want to expand your project into something more wonderful or finally decide to build a service to support financially the further development of your software or do something else to raise funds.

With FOSS licenses you can't prevent anyone from using the software or creating a competing service build on top of it. Over my years in FOSS I have seen and have been on receiving end of bad actors who use the FOSS license as an excuse for their bad behavior. After all they have no responsibilities as users of your software towards you, no matter what they do, as long as the license allows it and even if it does not, do you have the money to sue unless you have a big backing yourself? As such I feel it is necessary to describe somewhere what is expected behavior to at least be able to point to something concrete and be without a doubt label them as bad actors. This might also help others who wish to follow in additional steps.

So what do I think this should include? For starters I came up with this:

1. If the author(s) provide any services then it should be noted that they should be primarily used in order to support the further development of the software.
2. Letting the authors know if you use the software in a notable project, so that it can be advertise on the package.
3. If the software is used in a profitable project, especially if it helps significantly and the authors have a support page, at least a minimum donation should be given.
4. For MIT and other licenses that don't require that fixes and features are contributed to the original project it should still be mentioned as good manners to do so.
5. Include any other ways on how to contribute to the project to keep it going.

Obviously these things would not be things that could be enforceable. Let's be honest for average FOSS developer nothing really is. The only thing here could be that bad actors would be banned from participating in the community or some other restrictions that are feasible to levy. Similar to what is in code of conduct. Which is where this could be included or maybe in a separate document named something like "codex" or something like that.

Another approach would be to describe what is a bad actor behavior, but I think that would be rather limiting as bad actors would always find a new ways to get around the existing list.

What do you think? Does this make sense? Is it worth attempting to create some sort of a template? Should this be put into code of conduct or some other place. Please let me know your thoughts.


--------
If you like my work, please support me on [GitHub Sponsors ❤️](https://github.com/sponsors/StorytellerCZ).
"==" or "===" ? Key difference b/w them
Tags: javascript, beginners, webdev, programming
Published: 2022-01-30 18:09:56

While learning JS, I've always wondered how `==` and `===` are different from each other, and how exactly do they work BTS. So here's what I got to know.

**The equality operator (==)** uses the *Abstract Equality Comparison Algorithm* to compare two operands. In simple words, it compares the two operands irrespective of their datatypes. For example:

   `console.log(2 == "2")` will return true, even if the second operand here is a string. But why? How? Here's the deal.

   When the operands are of different types, the algorithm converts the operands to the same datatype before comparing. Now, **which one gets converted, you may ask**.

   - On comparing a number with a string, the string is converted to a number. (empty string is converted to 0, non-number strings return NaN i.e Not a Number)
   - If either of the operands is a boolean, it gets converted to either number 1(if true) or 0(if false).
   - Lastly, if one of the operands is an object and the other is a number or a string, the object gets converted to a primitive value (just like using `valueOf()` and `toString()` methods)

**The strict equality operator (===)** uses the *Strict Equality Comparison Algorithm* to compare two operands. Even "===" also checks whether two values are the same or not but there is **no type conversion before comparison**. So even if the values of two operands are the same, but are of different datatypes, it will return false.


Happy coding :)

###10DaysofJSFundamentals (DAY 3)
Conceptos básicos de CSS
Tags: webdev, spanish, beginners, css
Published: 2022-01-30 18:08:28

- Lenguaje de hojas de estilo en cascada que permite modificar la presentación en el navegador de un documento escrito en formato HTML.
- La sintaxis principal del lenguaje CSS se basa en el uso de reglas de estilo, las cuales permiten seleccionar un elemento HTML para posteriormente modificar su presentación.

El siguiente es un ejemplo de una regla de estilo aplicada a un elemento HTML tipo `<p>`.

```
p {
  color: red;
}
```

* *p* - Selector.
* *color* - Propiedad.
* *red* - Valor

Cada par propiedad-valor se debe separar dentro de la regla de estilo mediante el carácter **;**.

## CSS y HTML

Existen 3 formas de vincular código CSS con los elementos definidos en la estructura de un documento HTML.

* **Interno** - Se incluye la regla de estilo directamente dentro del elemento HTML, haciendo uso del atributo `style`.
```
<p style="color: red;">
```
* **Embebido** - Dentro de las etiquetas `<head></head>` del documento HTML, se incluye un elemento `<style>` cuyo contenido podrá incluir reglas de estilo CSS.
```
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
``` 
* **Externo** - Es la forma más común y recomendada de vincular código CSS y HTML, ya que permite mediante un documento con extensión **.css**, el cual contendrá únicamente código CSS, asociarlo a la estructura del sitio web de la siguiente manera.
```
<head>
  <link rel="stylesheet" href="/main.css">
</head>
```

## Selector de clase e id

Los atributos `class` e `id` permiten seleccionar un elemento HTML para posteriormente estilizarlo de la siguiente manera:
```
<h1 class="estilo-1">Encabezado</h1>
<p class="estilo-1">Hola Mundo</p>

.estilo-1 {
  color: red;
}
``` 

Una misma clase puede ser asociada a multiples elementos HTML, de forma tal como en el ejemplo anterior, al tener ambos elementos el mismo valor de clase, el resultado será la aplicación de la misma regla de estilo.

La selección de elementos mediante `id` permite únicamente seleccionar un elemento a la vez, con lo cual multiples elementos no deben compartir el mismo valor de `id`.
```
<p id="estilo-2">

#estilo-2 {
  color: green;
}
```

## Propiedades CSS

Las propiedades CSS son las encargadas de definir que estilo será el aplicado al elemento seleccionado, permitiendo modificar atributos tales como el color, tamaño, posicionamiento, etc.

### Estilizar texto

* `font-family` - Modifica el tipo de fuente.
* `font-size` - Modifica el tamaño.
* `font-style` - Modifica el aspecto.
* `font-weight` - Modifica el peso de los caracteres.
* `color` - Modifica el color.

### Modelo de caja

La estructura HTML posiciona cada uno de sus elementos como si fueran cajas apiladas una sobre la otra.
Cada elemento contiene una serie de propiedades que pueden ser modificadas haciendo uso de CSS.

* `width` - Ancho del elemento.
* `height` - Altura del elemento.
* `padding` - Cantidad de espacio existente entre el contenido del elemento y su borde.
* `border` - Linea que rodea cada uno de los 4 lados del elemento.
* `margin` - Cantidad de espacio existente entre cada uno de los elementos.
Working towards 2.6 release
Published: 2022-01-30 17:46:28

This week, there's a lot of things happening in terms of planning for 2.6 release. React Native is added to the repo, Supabase SSO is being implemented, there are also tons of documentation and research going on. 

I opened 1 major [PR](https://github.com/Seneca-CDOT/telescope/pull/2716) this week and went through a few PRs by other contributors. 

### Understanding the unfinished work

I picked up the work from Irene trying to add mobile view to telescope. Basically, she tried to make the title of the blog post to be an accordion, whenever it is clicked, it expands and display more information.

![Initial mobile view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9754ktyjex41o7q9ypp.png)

The feature basically works but it has a few issues. It's hard tell apart which one is the header and which one is the blog post, the accordion pretty much blended in with the blog post. The GitHub information takes up too much space as it's displaying as `flex column`. Lastly, there's no hint that the accordion is open or closed. 

### Completing the mobile view feature
You can go to [telescope staging](https://dev.telescope.cdot.systems/) to test the feature out
<img width="100%" style="width:100%" src="https://media.giphy.com/media/TJJZriWz0TE4vOETgX/giphy.gif">

Basically I added a border between header and blog post, added icon button to hint user, and when clicked it expands or collapses, changed the flex direction to `row` and made it auto close when user scrolls past the post. 

Most of the work was editing css and material ui, it can be understood easily if you look at the PR, though making it auto closes was a bit challenging. 

```js
 useEffect(() => {
    const onScroll = () => {
      // get the distance between the bottom of the blog post and
      // the top of the web page
      const bottom = sectionEl?.current?.getBoundingClientRect().bottom;
      if (bottom && bottom < 1) {
        // if bottom reaches top => close header and remove event listener
        setExpandHeader(false);
        window.removeEventListener('scroll', onScroll);
      }
    };
    // only if header is open, we attach the onScroll function to scroll event
    if (expandHeader) {
      window.addEventListener('scroll', onScroll);
}, [expandHeader])
```
Whenever a header is expanded, I attach an event listener `onScroll()` to the `scroll` event. `const bottom = sectionEl?.current?.getBoundingClientRect().bottom;` is to get the distance between the bottom of the blog post and the top of the page, if it is < 1 (I found 1 works better than 0) => close the header and remove the listener. Out of a few ways I came up with, this one saves a lot of performance. 

--- 

I have a few issues to work on before 2.6, not all of them are doable but at least I have teammates to talk to and share the work. Will try to better to review PRs too, I'm not familiar with the project enough to spot mistakes.
best github repo for improve and learning javascript.
Tags: javascript, tutorial, programming, webdev
Published: 2022-01-30 17:31:41

last days, I am one of the best javascript resource.
the link: [https://devdojo.com/arpit/github-repos-to-become-better-javascript-developer](https://devdojo.com/arpit/github-repos-to-become-better-javascript-developer)

**I hope to add star this repository to support me** [https://github.com/devSupporters/volder](https://github.com/devSupporters/volder)
10 React Interview Questions Part 1️⃣
Published: 2022-01-30 17:25:47

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

**1. How can you import and export components?**

- export default ComponentName
- import ComponentName from
'components/ComponentName';

**2. How can you optimize a React app?**

1) useMemo hook memoizes
expensive data

2) PureComponent
and putting state down reduce
re-renders

3) lazy loading makes
the app load faster

**3. How can you perform an automatic redirect?**

With:

`<Redirect to="/some-path" />`

**4. How do you create a React app?**

- install Node,
- call npx create-react-app my-app,
- open the code in your favorite
code editor.

**5. How do you memoize a component?**

By wrapping a function returning
a component with React.memo.
React.memo will re-render the
component only when function
props change.

**6. How do you pass data between components?**

- from parent to child with props,
and in reverse with callbacks

- other ways: inversion of control,
Context API, state management

**7. What are fragments?**

Fragments let you group a list of
elements without adding extra
nodes to the DOM by wrapping
them with <React.Fragment> or <>.

**8. What are portals in React?**

Portals allow you to render children
into a DOM node that is not part of
the normal component hierarchy.
Syntax: createPortal(children,
popup);

**9. What are uncontrolled components?**

HTML elements are uncontrolled by
default because the DOM stores the
data. When we bind a value and
events to store the state in React,
a component becomes controlled.

**10. What differs ES6 from ES5?**

With ES6 (ES2015) we use import
and export, not 'require' and
'module.exports'. We don't use
createClass, getInitialState or the
'function' keyword.

The questions come from STJ: React Interview Questions Deck. It is a deck of flashcards and also a game that helps to prepare for a React tech interview. 

If you’d like me to publish another set of questions please upvote, follow and comment.
best resource to find exeplined grid and flexbox properties in css
Tags: javascript, webdev, programming, tutorial
Published: 2022-01-30 17:24:58

this sites serve new way of showing the grid and flexbox in concise way:
- flexbox link: [https://flexbox.malven.co/](https://flexbox.malven.co/)
- grid link: [https://grid.malven.co/](https://grid.malven.co/)

**I hope to add star this repository to support me** [https://github.com/devSupporters/volder](https://github.com/devSupporters/volder)
CSS position absolute versus relative easy way!
Tags: css
Published: 2022-01-30 17:17:09

**CSS position property**

CSS position property determines the positioning of an element and also plays an important role of how the element will be displayed in the browser.

**Absolute position**

In absolute position, an element changes the positions and layout with respect to its parent. If it didn’t find any parent then it will use the document body.

**Relative position**

In Relative position, an element changes its position within its current position without affecting the layout.
How is the acer nitro 5 for full stack web development?
Tags: discuss, webdev
Published: 2022-01-30 17:08:03

Hello, i just recently bought a acer nitro 5 with a hexa core ryzen 5 4600h processor,now there was also 5600h option available but as I already ordered the model so i can't able to buy that one.

Now my question is how good is this laptop for web development I run multiple docker containers, python apps,vscode and some browser tab.

It has 8gb ram and if any of you are using that for programming please share your experience and if anyone bought latest 5600h one let me know what is better than the 4600h one.

Have a great day,
Waiting for cool experiences.