teleren/devto huggingface dataset:
100 algos in 100 days (Day 32)
Published: 2021-10-19 19:13:53

###Queues vs NFL fantasy

Through my learning of data structures queues have fascinated me. On my old team we had a monitoring and logging queue which would sometimes get overloaded and cause things to break. Even in most junior days it would be up to me to investigate and fix!!

I think I spotted a similar issue on the fantasy.nfl website where maybe the weekly waivers are not being followed.

Essentially my guess is that: 'I think their waiver wire queue takes ages to dequeue... So you can skip it if you just do a player add whilst the queue is being dequeued'

I emailed engineers@NFL.com so hopefully they get back to me 😊
Simple Search box using JavaScript
Tags: beginners, html, javascript, programming
Published: 2021-10-19 19:07:23

Simple search operation using JavaScript to filter out the items from list.

{% codepen https://codepen.io/harshita-nahta/pen/NWvrYWB %}

so we have a search box here and an unordered list with 0 child items.  

```html
<div class="center">
<textarea rows="1" name="searchBox" id="searchBox" placeholder="Type to search"></textarea>
<i class="material-icons">search</i>
</div>
<ul class="center" id="list">
<ul>

```

* add elements to  the list using DOM Manipulation

```javascript
var list= ["banana" , "strawberry" , "orange" , "apple"]

var listEle = document.getElementById("list");

insertListItems = (tempList) => {
   listEle.innerHTML = "";
   tempList.map((i)=>{
      var liEle = document.createElement("LI");
      var liText = document.createTextNode(i);          
      liEle.appendChild(liText);  
      listEle.appendChild(liEle);
   })
}

insertListItems(list);

```

now add onkeyup event in textarea to call the search function on entering any value in textarea


```html
<textarea onkeyup="search(this.value)"  placeholder=" type to search" rows="1" name="searchBox" id="searchBox"></textarea>

```


the function takes search  value as parameter and checks if the search value is not empty  if it is empty it  simply  uses the same data , else using the filter method we can filter out values accordingly

Note : toUpperCase method is used so that search results are not case sensitive.


```javascript
search = (searchTerm) => {
  searchTerm = searchTerm.toUpperCase()
  var temp = list;
  if(searchTerm != ""){
      listEle.innerHTML = "";
      temp = list.filter((i)=>{
        i = i.toUpperCase()
        if( i.indexOf(searchTerm) != -1){
           return i
        }})
    }
     insertListItems(temp)
}

```


Link for reference :-
https://codepen.io/harshita-nahta/pen/NWvrYWB

Happy Developing!
100 algos in 100 days (Day 31)
Published: 2021-10-19 19:07:20

[18/10]

### Question 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q9q1s66bb8t5qjo0kju.png)
 
This was quite an easy and fun question which my TDD really helped with.
I actually didn't solve this with the O(1) time O(1) space solution but nonetheless really do understand the solution and have reproduced it.

The learning points are:

* Think up and draw out all the possible cases. Like we did with the ways ranges can overlap. +++ Visualization is so important!
* Use very specific and descriptive variable names. +++ I sometimes get too descriptive on these.
Ruby Web Scraping 
Published: 2021-10-19 18:59:49

Ruby is an open-source programming language with an elegant and easy-to-read syntax – very close to human-like language. It has gained popularity for building MVPs thanks to the Rails framework.

Because it’s such a great technology to pick up, we want to close our beginner web scraping series with an introduction to Ruby web scraping using HTTParty and Nokogiri.

This tutorial is aimed at beginners that wants are just getting started in the web scraping world and would like to be able to extract data from static pages.

https://www.scraperapi.com/blog/ruby-web-scraping-build-a-powerful-web-scraper-with-ruby/
BUILDING A FULL API with NodeJS + Strapi in 5 minutes or less (amazing!)
Tags: node, javascript, strapi, opensource
Published: 2021-10-19 18:47:04

A while ago, I decided to go hands-on with this amazing #strapi tool.
The test results couldn't have been better, I'm totally in love with Strapi! haha

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

<b>What is Strapi?</b>
A Content Management Framework (CMF) that facilitates general software development.

<b>What does the tool offer?</b>
-Elegant and intuitive admin panel
-Community plugins and the power to create our own plugins
-Agnostic front-end, able to integrate with any front-end technology (ReactJS, Vue, ReactNative, Flutter...)
-Security and varied authorization policies
-Open source and as Strapi.io says, ALWAYS FREE
-Very participatory community and always keeping everything up to date

<b>It was pretty easy to install the dependencies and run the project.</b>
With the project locally, connecting to the MongoDB database was done quickly.
The administrative panel is super intuitive and has short tutorial videos. Quite simply, I didn't mess with a line of code! oO - But can be added if needed.
With all this I set up a Webservice quickly, very robust and easy to maintain. (Full CRUD and relational tables).

The framework is wonderful, I recommend all devs to give it a try.
For those who already know, that each day, with the help of the strong community, this CMS is increasingly robust. ❤

<h3>Some screens showing the progress of the work:</h3>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75hfzos09fgyxr2bm10q.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmlmx1zxhcp7cfe50tk2.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdff71pd3ialbqew4pia.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xpc5ypaq618c4ct4qo7.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtq0jql0f9arehgvi4cm.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pm46h8djji33bi6f6re8.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3dl2upq17xvi7x0069q.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfnshbkj1uzq5dgsf7mv.jpeg)
   
  
   

<h4>The project is available on Github:</h4> https://github.com/luccadumas/strapi-test/
React: Creating a Controlled Form
Tags: react, devops, beginners, javascript
Published: 2021-10-19 18:19:50

* FreeCodeCamp in our last challenge showed us that React can control the internal state for certain elements like input and textarea, which makes them controlled components. This applies to other forms elements as well including the regular HTML form element.
* Here `MyForm` component is set up with an empty `form`. As you can see it has the `type` set to `submit` indicating it is the button controlling the form. They want us to add the `input` element in the `form` and set its `value` and `onChange()` attributes like the last post.

```React
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    // Change code below this line

    // Change code above this line
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {/* Change code below this line */}

          {/* Change code above this line */}
          <button type='submit'>Submit!</button>
        </form>
        {/* Change code below this line */}

        {/* Change code above this line */}
      </div>
    );
  }
}
```

* We should also call `event.preventDefault()` in the submit handler, to prevent default form submit behavior which will refresh the web page.
* Lastly they want us to create an `h1` tag after the `form` which renders the `submit` value from the component's `state`. 

* Answer:
```React
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      submit: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      submit: this.state.input
    })
  
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input value = {this.state.input} onChange = {this.handleChange}/>
          <button type='submit'>Submit!</button>
        </form>
        <h1>{this.state.submit}</h1>
      </div>
    );
  }
}
```
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-10-19 18:13:20

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## 'Tis the season to contribute

Such a fantastic guide to contributing to Forem, @blackgirlbytes! There is great advice in here for open source contributing in general, too 🌱 

{% link https://dev.to/github/if-you-re-reading-this-contribute-to-forem-368o %}

## Sharing is caring

@zernonia is back with another fantastic challenge! in this one, you will create a minimalistic E-commerce Website with the touch of modern UI based on a design provided for you. 🎨 

{% link https://dev.to/zernonia/i-design-you-build-frontend-challenge-3-gda %}

## Hacktoberfest: Start here... 

It might be well into Hacktoberfest, but there's still time to contribute! If you have any questions or hesitations, this article by @ruphaa is a fantastic resource.

{% link https://dev.to/ruphaa/an-evergreen-guide-to-hacktoberfest-1oa9 %}

## Dockerfile maintainability & security 

Thanks for these awesome Dockerfile best practices, @y0n3uchy!

{% link https://dev.to/y0n3uchy/7-easy-to-follow-best-practices-for-writing-dockerfile-2npa %}


## Up to date

As @jesusantguerrero says, dealing with dates and time as a human being is hard enough — and it's even harder as a software developer. In this post, you'll find out why and how to deal with this issue.

{% link https://dev.to/jesusantguerrero/dealing-with-timezones-in-web-development-2dgg %}

## It's a loud world

"If there's one thing I want people to get out of this, it's that I'm a whole human. You don't get all the benefits of autism without the drawbacks, and the drawbacks make you no less valid of love and acceptance."
- @baweaver

You don't want to miss this article, folks!

{% link https://dev.to/baweaver/tales-of-the-autistic-developer-loud-loud-world-122c %}

## Career revamp

I'll leave you with something supremely inspiring by @rinaarts...

{% link https://dev.to/rinaarts/how-i-got-my-career-back-on-track-56n4 %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Introduction to Test Driven Development with React
Tags: react, tdd, testing, tutorial
Published: 2021-10-19 18:08:49

In this video we learn how to apply Test Driven Development(TDD) to a react application. TDD is a test first approach. That means you write a failing test first. After the test is written you write the code to make it pass.  

We will create an application using TDD and the amazing part is that we will only run the application at the end of the video. That means we will rely 100% on your unit tests. 

The testing library that will use is called Testing Library(https://testing-library.com/). When you use npx create react app it comes preloaded.

{% youtube 7WY1cfRoUJk %}
Brando Mamana Menggila, Daniel Dihabisi 47 Detik
Published: 2021-10-19 17:35:37

Demi menantang juara kelas strawweight, Brando Mamana tampil menggila di One Pride MMA. Dia menumbangkan Daniel Chandra kurang dari semenit dalam laga classic fight, penantang sabuk juara, di Fight Night 40, Sabtu 19 Desember 2021.

Pertarungan Brando kontra Daniel menjadi laga classic fight yang bikin terperanjat bagi setiap pecinta One Pride MMA. Itu karena Tiger Karo hanya butuh 47 detik untuk mengalahkan Daniel lewat guillotine choke, di ronde ke-1.

Sejak sebelum laga, Brando sudah mengalami detak jantung yang berdegup kencang. Dia ribut dengan Billy Pasulatan, pemegang sabuk juara kelas straw. Keributan itu terjadi saat sesi timbang badan. 

Beruntung, keributan tidak berlangsung lama. Brando langsung melakoni timbang badan bersama Daniel. Namun, kericuhan kembali terjadi antara Brando dengan Daniel, meski berakhir dipisahkan dewan juri One Pride.

Selengkapnya: https://www.onepride.net/berita/1414808-classic-fight-brando-mamana-menggila-daniel-dihabisi-47-detik
nvm is for barbarians. Manage Node versions with Volta instead.
Tags: javascript, nvm, node, volta
Published: 2021-10-19 17:35:25

**_Previously published at [fullstackfish.com](www.fullstackfish.com)_**

Thanks to Volta, managing multiple versions of Node is no longer a pain.

Under the covers, all the Node version managers are doing the same thing: setting up symlinks to different versions of Node installed on your computer. The difference between them is how they manage those symlinks. If you know the correct version of Node for the project you are currently working on, you can use nvm to set it to the active version, and all is well, as long as you remember to do so. The problem here is that you need to know the correct version of Node. And if you're switching from a project that has different Node version requirements, you have to remember to switch each time you open one of those projects. As Wes Bos would say, that's no way to live your life. That's what barbarians do.

Volta takes a set-it-and-forget-it approach. You "pin" the version of Node you need for your project and **Volta auto-magically switches to that version anytime you are working on that project**, without any action on your part. You can have multiple projects open at the same time, each with their own, different versions of Node, running simultaneously.

> _"Because Volta’s toolchain always keeps track of where you are, it makes sure the tools you use always respect the settings of the project you’re working on. This means you don’t have to worry about changing the state of your installed software when switching between projects."_
> > — [Understanding Volta](https://docs.volta.sh/guide/understanding#managing-your-toolchain)

### Installation

Go to the getting started page on the [Volta site](https://docs.volta.sh/guide/getting-started) and follow the instructions for your operating system.

### Usage

Pin the version of Node you want to your project by running the `pin` command in the root folder of your project. For example:

```shell
volta pin node@14
```

Volta adds an entry to your package.json.

```json
{
...
  "volta": {
    "node": "14.18.0"
  }
}
```

Now anyone on your team that has Volta installed will get the benefit of having the correct version of Node pinned. If you don't have the specified version of Node, Volta will download and install it for you, then switch to that version. For any barbarians that may also be working on your project, the entry won't affect them, but will allow them to see the version of Node they'll need to use.

Volta is written in Rust and is completely cross-platform, working in Windows and in all Unix shells.

As web developers, we have more than enough things to worry about. Using Volta means that managing Node versions is no longer one of them.
Petarung Papua Buat Lawannya Menderita di Arena
Published: 2021-10-19 17:33:08

Petarung dari sasana Papua Top Team, Elianus Enembe sangat senang atas laga debut yang berbuah manis di One Pride Mixed Martial Arts (MMA). Elianus sukses menumbangkan Rizki Rifai di ronde ke-3, di Fight Night 50, One Pride MMA.

Dalam duel yang disiarkan tvOne, Sabtu malam, 16 Oktober 2021, Elianus bertemu Rizki di kelas strawweight (52,2 kg). Keduanya merupakan petarung debutan di One Pride. Namun, petarung yang berkulit hitam kekar ini sukses membuktikan diri.

Pertandingan yang tersisa waktu 1 menit 43 detik, Elianus keluar sebagai pemenang dengan kemenangan TKO lewat ground and pound di ronde ke-3.

Selengkapnya:https://www.onepride.net/berita/1414463-elianus-enembe-senang-bisa-mendapat-debut-manis-di-one-pride
How to use React History in React JS
Tags: javascript, react, programming
Published: 2021-10-19 16:41:03

Hi guys.

Ok so today we I will give you all the simple steps to use
**Browser History** in React JS.
Now you might be wondering, what is it for?
**React Router History **can be used to go to a previous page or to go to the appropriate response page, for example after a user logs in, he should be redirected to the dashboard page.

###Step 1

Install **react router dom**.
```
npm install --save react-router-dom
```

###Step 2

Import the history package from react router dom.
```javascript
import { useHistory } from "react-router-dom"
```

###Step 3

Assign the history function to a variable (not necessary but 
recommended)
```javascript
const history = useHistory()
```

###Step 4

Use the `push()` function to redirect the user _after a successful login, for example._
```javascript
history.push("/dashboard")
```
Here we are sending the user to the dashboard.

---------------------------------------------

And there you go!.
Thank you all for reading this post.
You can find the same article with a little more explanation and detail at HubPages. [React History Hubpages](https://hubpages.com/technology/React_History) 
If it was helpful, please consider following :)
Until next time
Bye!
Petarung Buas dari Bengkulu
Published: 2021-10-19 17:26:26

Deni Daffa tidak langsung memasang target tinggi setelah sukses mengalahkan Lintang Damar Langit di Fight Night 50 One Pride MMA. Baginya, target perlu dilakukan secara bertahap sampai akhirnya mendapat gelar sabuk juara One Pride.

Deni menumbangkan Lintang lewat ground and pound di ronde ke-1, dalam pertandingan yang disiarkan tvOne, Sabtu malam, 16 Oktober 2021. Deni bertemu Lintang pada partai perbaikan peringkat kelas lightweight (70,3 kg).

Kemenangan tersebut membuat Deni mencatat rekor 2 kali menang belum pernah kalah. Sebelumnya, petarung dari sasana Bengkulu Inflight itu menang atas Ronald Mastrana Siahaan di Fight Night 46.

Rekor manis tersebut tak lantas membuat Deni Daffa jemawa. Dia tidak langsung memasang target juara kelas lightweight. Namun, Deni ingin mengejar peringkat papan atas terlebih dahulu, baru bicarakan soal sabuk juara.

Selengkapnya: https://www.onepride.net/berita/1415182-tak-mau-muluk-muluk-ini-target-deni-daffa-di-one-pride
Number.toString() tips and tricks 
Published: 2021-10-19 17:25:56

As programmers we always face challenges and deal with different value types, frequently we need to parse a number into its string form for different purposes. 

Regarding this matter and as everything in software development there are many ways to achieve this. Today we are going to dig into one of them, specifically Number.toString() method offers a convenient way to deal with.

Let's start quoting what the documentation has to say about this method.

> The Number object overrides the toString() method of the Object object. (It does not inherit Object.prototype.toString()). For Number objects, the toString() method returns a string representation of the object in the specified radix.

What it states is the method is not a simply form of a string, it actually overrides the default method and not also converts a number to string but does that on an a specific radix.

Here we have an example of the simplest form about the Number.toString() work.

```
let numberToBeString = 123
console.log(numberToBeString.toString()) 
```

and the result, as expected is 123 but as string value. Nothing we already do not know :) 

Now let's make make something more interesting, what about if we need the representation of a number in its binary form. Guess what, Number.toString() comes to the rescue.

```
let numberToBeString = 123
console.log(numberToBeString.toString(2)) 
```

As you can see the method accepts a parameter as the radix, so we can now guess what the result will be. And if you say **1111011** you're right! that's because as we specify the radix the method parses the number into a string but also converts it to the given radix.

Now that we approach further to one way of transforming numbers based on different radix and if you are still eager to get more knowledge about it here you can find the [official documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString)

Have a great coding day!
My book on observability
Tags: observability
Published: 2021-10-19 17:02:02

Almost a year ago, I [began writing a book](https://twitter.com/theshalvah/status/1331357632108654597) about observability. I had a vision—a small book designed to explain the basic ideas of observability to devs and show how it could help them. Each chapter would have practical exercises where you'd try to implement the concepts in a real\-world \(ish\) app.

I did it, sort of. I finished the explainer content in a few months, but then I had trouble with the exercises. My vision for them was pretty ambitious—zero install or setup needed; with one click or command,you'd have all the apps running with simulated real\-world traffic and behaviour. You could then either try the challenge yourself or run another command to switch to the "solved" state and explore for yourself.

I made a couple of apps in PHP, JavaScript and C\# for the exercises. But there was too much friction involved in setting up, integrating and running them properly. I and a friend brainstormed new strategies and started from scratch a couple of times, but nothing stuck.

Eventually, I decided the stress I was going through wasn't worth it \(for a book I planned to sell for like $10\), and called it quits. However, I recently realized that, even without the exercises, there's still some valuable content there \(especially when combined with some blog posts I've published this year\). I shared the draft with a few people and they liked it.

So I've decided to publish it for free. Link below 👇. Enjoy\! And if you find it helpful, please let me know. I put a lot of work into this, and it's always nice to know your work is appreciated.

[Observability Basics \[PDF\]](https://drive.google.com/file/d/1-NjkbAXrbjaNLZU6UygzNIrUmZgQ5K_F/view?usp=sharing)
Wannabe software engineer newbie :)
Published: 2021-10-19 16:48:04

Hey Guys, new on here :)
I am a wanna be software engineer, currently learning Python in codecademy pro ( I know it will take a lot more than that) so I would like to ask for tips/resources (can't really afford a bootcamp, i've graduated in business with a lot of debt and also have three children on my own) soooooo, anyone who could give some advice would be much appreciated!