teleren/devto huggingface dataset:
Road to Genius: smart #25
Tags: javascript, beginners, computerscience
Published: 2020-06-21 11:31:05

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

In this post I will discuss two challenge, an easy and a more difficult one.

![coding challenge](https://dev-to-uploads.s3.amazonaws.com/i/nwoa85zxoszv2p6t83n4.png)

For the first challenge we have to find `R`'s value. The code starts  with an array of random numbers and `R=false`. Then the for-loop iterates over each number. Then it sets `R` to `true` if that number is not equal to 3. The answer will always be `true` unless every number in `arr` is 3, the chance of that happening is very small.

![coding challenge](https://dev-to-uploads.s3.amazonaws.com/i/63n079ucyd2gxfdmbkmu.png)

The second challenge's code is a whole lot more difficult, but fortunately we can ignore most of it, we only need to fix the bug 😈. Let's have a closer look at the buggy line:
`LG = Math.max(LG, i - arr[arr.😈 - 1]);`
The seems to be a property (or method) of an array. If you've worked with arrays in JavaScript you might immediately guess that 😈 should be `length`. The reason is that code like `arr.length - 1` is used for getting the last element (i.e. last index) of an array.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/avri4pno2nw0b72f3mi1.png)

Let's briefly analyze the code fully to understand its purpose. We have a function that takes one parameter, in this case it takes the following string:
`(((())(())()`
The code iterates over all parentheses and whether it's an open or closed one it keeps track of some things. The end result is to determine the length of the longest valid parentheses in that string, valid means it open has a corresponding closing parenthesis.
The longest valid parentheses sub-string in this example is:
`(())(())()` which has length 10 (that's why `A=10`)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Join me on the Road to Genius and upgrade your programming skills, at https://nevolin.be/codr/
Chrome debugger breakpoints not working with create-react-app
Tags: react, createreactapp, chrome, breakpoints
Published: 2020-06-21 11:19:51

---
title: Chrome debugger breakpoints not working with create-react-app
published: true
description: 
tags: reactjs, createreactapp, chrome, breakpoints
//cover_image: https://direct_url_to_image.jpg
---

A few days ago I came across a weird issue with my Chrome debugger when I was working on my ReactJS application created using create-react-app(3.4.1) and I did some logical error so as always I kept a breakpoint at the line of suspicion to check the issue and kept updating the code as the server was running. For some reason, the debugger was not pausing at the breakpoint. I went around searching the internet to find if any other person has faced a similar issue or it was just me.

I found an open issue in create-react-app with the Chrome debugger breakpoints https://github.com/facebook/create-react-app/issues/6074. A fix was released but later reverted due to an issue with Webpack.

One suggested workaround is to add --no-cache in your package.json which worked for me

From
 ```
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}
```

To
```
"scripts": {
  "start": "react-scripts start --no-cache",
  "build": "react-scripts build",
  "test": "react-scripts test --no-cache",
  "eject": "react-scripts eject"
}
```
If this does not work for you, you can try other suggestions under the issue in the GitHub.

From the ongoing discussion it seems like we will have to wait for a while for the issue to be fixed.
Linked List cycle
Tags: tutorial, beginners, linkedlist, javascript
Published: 2020-06-21 11:12:49

---
title: Linked List cycle
published: true
description: Given a linked list, we have to determine if it has a cycle in it.
tags: tutorial, beginner, linkedlist, javascript
cover_image: https://res.cloudinary.com/dczeev0fe/image/upload/v1592737565/dev.to/lll_cycle_vju1yp.png
---
We will use [Floyd's cycle-finding algorithm](https://en.wikipedia.org/wiki/Cycle_detection), also known as [tortoise and hare algorithm](https://en.wikipedia.org/wiki/Cycle_detection#Floyd's_Tortoise_and_Hare).

### Overview
1. We will use a 2-pointer technique where 1 pointer will be **fast** and the other pointer will be **slow**.
2. The whole idea is based on the principle that if there is a cycle in the Linked List, at some point both the pointers will meet each other, else one of them ( or its next ) will be NULL.

Let's implement using Javascript. - 

1. The input here will be a Linked List.
2. First of all, we will check if the Linked List is empty or has just 1 node. There will not be any cycle definitely in both of the cases.
3. Next, we will define 2 pointers, as mentioned above. First will be a **slow** pointer and the second will be the **fast** pointer i.e. while traversing, when the **slow** pointer will move one step ahead, the **fast** pointer will move two steps ahead. 
4. We will keep traversing until **slow** and **fast** is not equal or one of them ( or its next ) is not *NULL*.
5. If **fast** and **slow** becomes equal, then it means there is a cycle.
6. If either of the **slow** or **fast** pointer ( or its next ) becomes *NULL*, it means there is no cycle in the Linked List.
```
var hasCycle = function(head) {
    if (head === null || head.next === null) {    // Point 2
        return false;                             // Point 6
    }
    let slow = head.next;                         // Point 3
    let fast = head.next.next;
    while(slow!==fast) {                          // Point 4
        slow = slow.next;
        if (fast == null || fast.next === null) { // Point 4,5
            return false;                         // Point 6
        }
        fast = fast.next.next;
    }
    return true;                                  // Point 5
};
```
Please note that for point 6, we check only fast node for *NULL* value because at any point **fast** will be ahead of **slow** and it will visit every node before the **slow** node.
THE GOOGLE MAY 2020 UPDATE: HOW DOES IT AFFECT YOUR BUSINESS AND WEBSITE?
Tags: digitalmarketingagencyinuae, socialmediaagencyindubai, digitalagencyindubai, webdesignagencyindubai
Published: 2020-06-21 10:53:47

The May Core Update for 2020 is done and the world is reeling under the changes it has brought with it. Millions of websites across the world have lost ranking and SERPs in one fell swoop. Now Google has a mission to make the web better and as a part of that mission, it releases algorithm updates to better the net by raising the bar for standards to which web developers have to adhere to when creating and developing websites. As a well-known SEO agency in Dubai, Prism has collated valuable information and everything you need to know about this new update. You can also check out our blog post on the latest SEO trends for 2020 so as to check if your website is keeping up with the overall market trend. 

Learn More about us on: https://www.prism-me.com/blog/the-google-may-2020-update-how-does-it-affect-your-business-and-website/
کیا ہماری ترقی کی وجہ اداروں کا غیر موثر ہونا ہے؟ 
Published: 2020-06-21 05:42:45


تیسری دنیا کے ممالک پر کئے گئے ظلم اور انکے وسائل کی لوٹ مار پر پردہ ڈالنے کے لئے، ترقی یافتہ ممالک نے اس بات کو ہوا دے دیا ہے کہ تیسری دنیا کے ممالک کی ترقی نہ کرنے اور ترقی یافتہ ممالک کا مقابلہ نہ کر سکنے کی وجہ یہ ہے کے ان کے ادارے غیر مؤثر ہیں. یہ بات کس حد تک درست ہے؟ ہم اداروں کی غیر مؤثر ہونے کی بات کرتے وقت ان وجوہات کو کیوں ترک کردیتے ہیں جس وجہ سے وہ غیر مؤثر ہیں ؟
یہ ایک سفید جھوٹ ہے، اور اپنے گناہوں پر پردہ ڈالنے کے لئے، لوگوں کو یرغمال بنا نے کے لئے کہہ دیا کہ آپ کے تو ادارے غیر مؤثر ہیں. کیا آپ نے اداروں کے مؤثر یا غیر مؤثر ہونے کو ناپنے کے لئے آلات بنائے ہیں؟
ہم سب اس بات سے آگاہ ہیں کہ تیسری دنیا کے ممالک ترقی یافتہ ممالک کے محتاج ہیں. ہمارے ممالک کی امپورٹ ہی اتنی زیادہ ہے کے اگر ہم زیادہ سے زیادہ ایکسپورٹ کریں تو بھی ہم امپورٹز کا مقابلہ نہ کر سکیں گے. اسکی سیدھی سی وجہ ہمارے پاس انڈسٹریز کا نہ ہونا اور اکانومی کا زرعی ہونا ہے. اگر آج ہم انڈسٹریز لگائیں بھی تو ہمیں بڑی تعداد میں امپورٹ کی ضرورت ہوگی.
لیکن کیا وجہ ہے کہ ہم چاہ کہ بھی انڈسٹریز نہیں لگا پا رہے اور مغرب کے پاس اتنی انڈسٹریز ہیں کے ہمیں ان کا محتاج ہونا پڑ رہا ہے؟ اس کا سیدھا سا جواب "کلونیلزم" ہے. مغربی ممالک کو اپنی پیداوار بیچنے کے لئے نئی منڈیوں کی ضرورت درپیش آئ، اور وہ چاہتے تھے کسی طرح کم لیبر اور کوسٹ میں زیادہ سے زیادہ منافع کمایا جائے . منڈیوں کی تلاش کے غرض سے نکل کر انہوں نے باقی کمزور قوموں کی ریاستوں پر قبضہ کر لیا اور خود کو محکوموں کا مسیحا پیش کر کے وہاں کے حکمرانوں اور محکوموں کو آپس میں لڑا کر ادھر سے دھڑا دھڑ کما کر اپنے ملکوں میں بھیجنے لگ گئے. الجزیرہ کی کچھ دن قبل کی رپورٹ کے مطابق برٹش نے صرف  برصغیر سے (اُس وقت کے) 45 کھرب ڈالرز لوٹے. اب ان لوٹے ہوئے وسائل اور پیسوں سے ان کے ہاں انڈسٹریز بن گئیں. پھر کسی طرح جب انہیں کلونیز چھوڑنی پڑیں تو اس طرح قوموں کو آپس میں فسادات میں الجھا کر گئے کہ جانے کے بعد بھی ہم پر حکمرانی کر رہے ہیں. جسے ہم نیو کلونیلزم کا نام دیتے ہیں.
اب چونکہ تیسری دنیا کے ممالک کو قرضہ جات کے لئے انہی ملکوں کے بنائے بینکوں کا سہارا لینا پڑتا ہے تو قرضہ کے ساتھ ساتھ انکو ادارے چلانے کی ڈکٹیشن بھی مل جاتی ہے. یعنی آپکی پالیسیوں کا تعین وہی ادارے کریں گے. اب IMF اور پاکستان کی مثال لیں، ہمارے ٹیکس کیوں بڑھ گئے ہیں؟ اب چونکہ ہمارے ادارے وہی کرنے پر مجبور ہیں جو انکو زندہ رہنے کے لئے قرض کے بدلے میں کرنا ہے تو پھر یہ غیر مؤثر والی بات کہاں سے آتی ہے؟ اسکی ایک اور مثال لیں، یہ بات تو سبھی کو پتہ ہے کہ پاکستان میں سویلین بغیر اسٹیبلشمنٹ کی مدد سے پاور حاصل نہیں کر سکتے، اور ایک عدد جنرل کا انٹرویو سن لیں تو لگ پتہ جائے گا کہ ہمارے آرمی چیف کا تعین کس کی مرضی سے ہوتا ہے. اب اس سے تو صاف ظاہر ہے کے ہماری ترقی میں رکاوٹ ترقی یافتہ ممالک ہیں ہمارے ادارے نہیں.
an interactive Terraform graph
Tags: terraform, blastradius
Published: 2020-06-21 10:25:10

<sub><span>Photo by <a href="https://unsplash.com/@davidpisnoy?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">David Pisnoy</a> on <a href="/s/photos/graph-painting?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>

Terraform already has a [graph command](https://www.terraform.io/docs/commands/graph.html) that can be used with dot to produce a svg graph. But this graph is not interactive.

[Blast-radius](https://github.com/28mm/blast-radius) is a tool producing a svg graph interactive in a web browser, based on Terraform graph. You can see [online examples](https://28mm.github.io/blast-radius-docs/) for many providers.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ygd332qmyu2m257mrau1.png)

##A warning about version
I have tried to use it before, but due to parsing issues during the upgrade from Terraform 0.11 to 012 (and the producing / integration of the new pyhcl library), i had to stop it. But now, it is working again (if you use Terraform 0.12 or higher )!

##How to use it

You have to position yourself inside your project directory. [See the docs to know where you should be](https://github.com/28mm/blast-radius#docker--subdirectories).

The easiest way for me to use it, is through the Docker image.

Modifying the Dockerfile in [this issue](https://github.com/28mm/blast-radius/issues/71), you can easily set the terraform version you need. Create the dockerfile locally and build it.

Then, run the following command in your project directory (if it contains your .terraform):

```bash
docker run --rm -it -p 5000:5000 -v ${pwd}:/data --cap-add=SYS_ADMIN myDockerImageBasedOnBlastRadius --serve .
```

Now go to http://localhost:5000/ and you should see your graph.

Hope this helps !
How do I have so many followings
Published: 2020-06-21 10:13:59

---
title: How do I have so many followings
published: true
description: Dev.to unknown following
tags: 
//cover_image: https://direct_url_to_image.jpg
---

I have no clue how I have followed so many authors on Dev.to.
I havent followed anyone of them, but daily get notifications for it
Watch AI Evolve to Play Flappy Bird
Tags: javascript, showdev, machinelearning
Published: 2020-06-21 10:01:46

AI evolves to play flappy bird using genetic algorithms and neural networks 🎉

Assets are still in beta, but happy that the data model and UI interaction are finally done!

Here's a demo:

![Demo](https://media.giphy.com/media/SswVxUdVPWIsvpSyeg/giphy.gif)

You can see the site live right [here](https://vigilant-kepler-de0210.netlify.app/).

For the curious, pre-compilation ones and zeros are [here](https://github.com/adrianmarkperea/flappy-bird-genetic-algo-js). 😎

Let me know in the comments if you want a step-by-step on how I did it!
What is a collection in java
Tags: collectionsinjava, javacollections, sortinginjava
Published: 2020-06-21 09:37:58

<div class="entry-content">

<h2>What is a collection in java</h2>
<p>A collection is an object that groups one or more than one element into a single unit. Collection framework provides interfaces and classes to store, retrieve and manipulate the data.</p>
<p>A collection framework contains interfaces, implementations and classes</p>
<ul>
<li><strong>interfaces</strong> -Interfaces allow collections to be manipulated independently of the details of their representation</li>
<li><strong>implementations</strong>&#8211; These are reusable data structures.</li>
</ul>
<h2>Benefit of using collection:-</h2>
<ul>
<li>We can add any objects to the collection.</li>
<li>We can remove any objects from the collection.</li>
<li>We can identify an object or group of objects from the collection.</li>
<li>We can iterate/loop through the entire collection using utility classes.</li>
</ul>
<h2>Followings are the some list of Collection classes in Java:</h2>
<ul>
<li>List
<ul>
<li><a href="https://onlinetutorials.tech/vector-in-java/">Vector in Java</a></li>
<li><a href="https://onlinetutorials.tech/arraylist-in-java-with-example/">ArrayList in Java</a></li>
<li><a href="https://onlinetutorials.tech/linkedlist-in-java/">LinkedList in Java</a></li>
</ul>
</li>
<li>Set
<ul>
<li><a href="https://onlinetutorials.tech/hashset-in-jav">Hashset in Java</a></li>
<li><a href="https://onlinetutorials.tech/linkedhashset-in-java/">Linkedhashset in Java</a></li>
<li><a href="https://onlinetutorials.tech/treeset-in-java/">Treeset in Java</a></li>
</ul>
</li>
<li>Map
<ul>
<li><a href="https://onlinetutorials.tech/hashmap-in-java/">Hashmap in Java</a></li>
<li><a href="https://onlinetutorials.tech/linkedhashmap-in-java/">LinkedHashmap in Java</a></li>
<li><a href="https://onlinetutorials.tech/treemap-in-java-with-example/">Treemap in Java</a></li>
</ul>
</li>
</ul>
<h2>For sorting of collection use following interfaces:</h2>
<ul>
<li><a href="https://onlinetutorials.tech/comparator-in-java-with-example/">Comparator in Java</a></li>
</ul>

<ul>

</ul>
<hr/>
</div>
Lear more about <a href="https://onlinetutorials.tech/java-collection/" rel="dofollow">Collections in Java</a>
Different flavors of setState method in React
Tags: react, javascript, frontend
Published: 2020-06-21 09:18:07

Recently I was working on developing a react component where on updating state I had to make a fetch call which used one of the state properties as a URL parameter and I ran into some trouble which led me to read about setState() method in depth.

```javacript
this.setState({ userType: 'vendor'});

fetch(`${BASE_URL}/${this.state.userType}`)
.then((data) => { console.log(data) 
});
```
So according to fetch call made using the above code, I should have made call to URL with type vendor in it but it turns out that value of userType property wasn't updated despite the setState call made previous to the fetch call.

So I visited React official documentation and there I found that **setState** method is **asynchronous** in nature. This revelation led me to read about setState method in detail and I found below 3 ways of using this method.

## 1. Normal mode

```javascript
this.setState({ userType: 'vendor' });
```
In this mode object passed to setState method is **shallow** merged in current state object.

## 2. Functional mode

```javascript
this.setState((state, props) => {
  return {
    xCoordinate: state.xCoordinate + 1
  }
});
```

In this mode, we pass a function to setState method that receives the state and props which refer to the component's state and props at the time the change is being applied and this function computes the new state object which gets shallow merged to current state object.

### Use cases
- If we want to update state based on some previous state values, this mode might help us.

- Classic example would be toggling functionality.
```javascript
this.setState((state) => {
  return {
     isOpen: !state.isOpen
  }
});
```
- Useful in creating Animations, Games, [Dynamic Visualizations](https://github.com/jatin33/sorting-visualizer/blob/master/README.md) etc

## 3. Updater mode

```javascript
this.setState({ userType: 'vendor'}, () => {
  fetch(`${BASE_URL}/${this.state.userType}`)
    .then((data) => { 
     console.log(data) 
    });
});
```
According to React documentation,

> The second parameter to setState() is an optional callback function that will be executed once setState is completed and the component is re-rendered. Generally we recommend using componentDidUpdate() for such logic instead.

This mode helped me to solve the problem that I was facing at the beginning of the article.

### Use cases
- If we want to access state values as soon as they are updated.


## Parting Notes
Though **setState** method solves the problem it was designed to solve, we can improve it syntactically by providing promisified version of it as it is already asynchronous in nature.

Something like this:
```javascript
this.setState({ x: 'abc' }).then((currentState) => {
 // currentState holds the new state after we make updates to it 
});
```

Thanks for taking the time to read this. I'd love some feedback. Please share your experiences with using **setState** in comments and like and share this post if you liked reading it.
[Import Previous Blog] Internship @ Microsoft
Published: 2020-06-21 09:15:43

![Image of Microsoft][1]
This summer I will be interning at Microsoft India!  
I was lucky enough to bag an internship from Microsoft and this triggered many of my 'firsts'. I got my first (uh oh proper) internship which got me my first offer letter and will be my first professional experience in the Industry.

Here is how the process of interview process of Microsoft for internships was like -  
The process kicks off with a coding round held on the CoCubes platform. Three questions, seventy-five minutes for ten marks total (2+3+5) are asked. Each student gets a different set of three questions and the questions asked are mainly from Trees, Linked Lists, Strings, Arrays, and Sortings.  

Students are shortlisted on basis of this round and called for the next which is the Group Fly Round. In this round, we are supposed to code two questions with at least one degree of optimization in each of them. Microsoft employees are there around to help us understand the question and to discuss our solutions with them. It is very important to discuss the solution with them before coding the problem as they guide us with the problem so that we stay on the right track.  

Next, we have the technical interviews :). Each student has to answer at least two interviews to proceed to the further rounds and at least three to be selected for the internship. However, there is no cap on the number of technical interviews a student goes through. I had answered three, many of my friends who were selected had answered four. There was also a person I think, who had answered five rounds of technical interviews before they rejected him/her. So all I can say is until you get the offer in your hand do not take anything for granted.  

After the technical rounds, we were asked to wait outside while they decided on which students to select. They then called us in congratulated us and handed over goodies to us (T-shirts and stickers). As I went to get mine the HR looked over to the hiring manager and laughed while pointing at me and saying 'look he decided to come here'. (Background - I had my Goldman Sachs interviews on the same day). After this jokes were cracked, pictures were taken and selfies pouted.  

The whole process took around 12 hours for me (8 AM to 7.40ish PM) with eight interviews (both the companies combined). After calling my parents and my cousin I immediately hit the sack :P.

Annnnd that is how the most significant day of my life till now had panned out to be. I cannot be more excited about this internship.

Summer 2019 you where art though?

[1]: http://sevcon.in/wp-content/uploads/2018/08/Microsoft-Hyderabad.jpg
yasinates.com is coming soon 😋
Published: 2020-06-21 08:47:06

Hello everyone 😀, this is my first post. 

I will share the English of my articles on [medium.com](https://medium.com/@yasinatesim/) here.

I create the data on my website using the DEV API, medium.com API, and Github API services 😎

I will write my next article is about the publishing process of my website.

Hope to see you in new articles. 👋 👋

My medium profile: [medium.com/@yasinatesim/](https://medium.com/@yasinatesim/)

My personal website: [yasinates.com](http://yasinates.com/)
Responsive Navbar in HTML CSS
Tags: navbar, responsivenavbar, menu, navigationbar
Published: 2020-06-21 08:44:09

Hello readers, Today in this blog you'll learn how to create a Fully Responsive Navigation Menu Bar using HTML and CSS only. As you know the Menu Bar or Navigation Bar (Navbar) is important for any kind of website.

Many websites have responsive navbar. Essentially, responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width and prevents visitors from mobile devices from needing to do extra work to read your content.

As you can see in the image, This is a simple and fully Responsive Navbar Bar, not a stylish or not a fancy one. This is pure CSS based Responsive Navigation Bar where HTML <input type="checkbox"> tag is used to toggle menu bar that means when you click on that three-line bars.

The checkbox will be checked and the menu bar is shown and when you again click on those bars, the checkbox will be unchecked and that shown menu bar will be hidden. This process is only done by HTML <input type="checkbox"> tag and <label> tag.

If you like this program (Responsive Navigation Menu Bar) and want to get source codes.

<a href="https://www.codingnepalweb.com/2020/04/responsive-menu-bar-in-html-css.html">Click here to get Source Codes</a>