teleren/devto huggingface dataset:
Next.js and Mongo RSS feed
Tags: atlashackathon
Published: 2022-01-13 20:58:39

### Features

1. Allows user to add rss feed and render the same in the user interface.
2. Report generation using scheduled triggers runs once every 12 hours.

Next Steps:

1. User authentication.
2. Notifications when the new report is added.
3. Landing Page. 

![Landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twit2mx7tw54p07nhmwt.png)

![Report Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lafel63h16zqmc4lqu6.png)

![Report Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnue13n7frow6jl36e4g.png)
 
 
 
### Submission Category: 
Choose Your Own Adventure


### Link to Code : {% github https://github.com/skarthikeyan96/next-mongo-rss-feed %}

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github https://github.com/skarthikeyan96/next-mongo-rss-feed %}` to share a GitHub repository)


### Deployed Url : http://next-mongo-rss-feed.vercel.app/
HeatSat
Tags: atlashackathon
Published: 2022-01-13 20:58:29

## HEATSAT

Checkout the application live here: [HEATSAT](https://heatsat.vercel.app/). The site is not ready for mobile yet, so please try to view it on a desktop.

### Overview of My Submission

My submission is a web application that scrapes and parses heat satellite data from [INPE](https://queimadas.dgi.inpe.br/queimadas/dados-abertos/#) and stores it in a time series database per region. A region can be any GeoJSON delimited block of land. Once a heat reading has been assigned to a region, it can be visualized on a map. You may also query a region to see how many heat readings it had this month, as well as if that is an increase from last month.

New data comes in every 10 minutes - 24/7 and the application ingests about 200 to 300 heat readings each day! The MongoDB time series database feature was crucial in ensuring all of this data is queried quickly by timeframe and by region. This is because data is stored efficiently by region and by timestamp. You can learn more about time series databases [here](https://www.youtube.com/watch?v=xu2AkGVI37E).

Here are a few feature demo gifs:

#### Browse heat data on a map.

![Brose heat data demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ez60bk8dwrhp02eygbru.gif)

#### List regions.

![List regions demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n53x92bajp8c2vvhmg99.gif)

#### View a region on a map, as well as its stats.

![View region demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slf4jgy0u5i8qnj8ef96.gif)

### Submission Category: 

This project is under the Prime Time category.

### Link to Code

{% github https://github.com/yvesnrb/heatsat %}

### Additional Resources / Info

Special thanks to:

[INPE](https://queimadas.dgi.inpe.br/queimadas/dados-abertos/#)
[TailwindCSS](https://tailwindcss.com/)
[NextJS](https://nextjs.org/)
[TurfJS](https://turfjs.org/)
[@react-google-maps/api](https://github.com/JustFly1984/react-google-maps-api)
Docker Installation on a MacOS Laptop
Tags: docker, programming, tutorial, productivity
Published: 2022-01-13 20:49:12


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyd2dw59smab2r25hr2c.png)
# Docker Installation on Machine
Docker is used universally. This post will _hopefully_ help others to install and understand docker a bit better. The first step to succeed is the installment using some basic links that are provided below.

This is the link for installing Docker Desktop on Mac: https://docs.docker.com/desktop/mac/install/

This is the link for installing Docker Engine on Ubuntu: https://docs.docker.com/engine/install/ubuntu/

Personally I have a Mac, so I used the first link to continue with the installment. Once on the site, clicking the link to download depends on the type of chip (Intel or Apple). This will automatically download a *Docker.dmg*, which then will have to be dragged and dropped into the Applications folder. From there, you can choose to drop it into the bar on the bottom of applications. This part is totally optional, but I recommend for easy access and use. It also is important to note that updates to Docker will be found in Settings/Preferences. It is important to update, so that you have the newest version, which is not outdated.

From this point, it is time to get started. Whatever repository you are using should be download/clone to your device and contain a **Dockerfile**. This will allow Docker to be used and can then use the command `docker build -t hax.` This says to build Docker and name it *hax*, since the repository I am using is *HAXcms*. On Docker, there is an image section that should be listed as recently created on the files. From there, *run* but add the optional settings of local host, for example 80, to use. Once that is completed, Containers/Apps should be listed and able to run right away. The image below shows in the black circle the *hax* that is listed. I use Docker for a lot of projects, so please ignore the excess information.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2et84e6jcwgzfnm2ekgj.png)

#What is Docker?
Docker is a platform, an open platform application that is used to build containers for developing, running, and shipping off applications. Everything that needs to communicate to one another can do it in one place. _Simple_.


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

#Why is Docker Useful?
Docker is useful because it makes it simple to run through containers. It also helps to be more efficient and scales better because time is money. It makes it more streamline. The key words that people use to describe it is fast and reliable. Some companies that use Docker are Netflix, Target, Verizon, The Container Store to name a few.
Developing games for blockchain
Published: 2022-01-13 20:26:55

Together with the boom in popularity of cryptocurrencies, new doors have opened for us, developers, to build decentralized apps and cash in on the trend.
However many developers choose to go about it the wrong way, not doing enough research and just trying to ship the product as quickly as possible. This has to lead to the creation of many dApps as well as practically unusable games, while they sold the idea, and made money in the process, often they are unable to maintain the hype and keep the user base from rapidly declining.

## Research for blockchain game developers
To find out how to build your game the right way you’ll need to do enough research in the first place. Start by identifying the needs of your idea. Am I making a game that is action-packed or turn-based? Do I want to use NFTs? Do I want the in-game currency to have its token?

All of these questions will guide you through your research, but most important are the questions that you’ll ask yourself.

## How Axie Infinity does it
Let’s look at a successful example of a blockchain-based game, Axie Infinity. Instead of using a public blockchain, they forked their own and built a ronin chain. Due to the low amount of validator nodes, and only their projects being available on the blockchain, it’s comparable in price to the traditional server structure. What’s cool is how they handle in-game currency and axies (game characters, think of Pokemon but in 2021).

As you play the game, you can earn $SLP (Smooth Love Potion). However, this currency works just like any video game currency. Its value is stored in a traditional database, not on the blockchain. The users can claim it once every 14 days which triggers minting of the token. The blockchain subsequently rewards the user with cryptocurrency. This approach limits the stress put on the blockchain, keeping its cost to run relatively low and the transactions free.

The same applies when it comes to axies (Axie Infinity’s NFTs). The gameplay aspect, such as stats, abilities, and its name is stored in an SQL-like database. The NFTs users own, are just a reference to that data and proof of ownership.

## TLDR;
What can we take away from Axie Infinity’s approach? TLDR; when building a blockchain game, build a normal game first and add the blockchain functionality on top of it.

## Applying the process
Take League of Legends for example. All you have to do to migrate it to a blockchain under Axie Infinity’s model is to make an association between the blockchain addresses of the users and their in-game accounts. Then create your token and give users the ability to convert the in-game currency once every 14 days into minted tokens.
Finally, mint NFTs with the creation of any cosmetic items (champion skins, wards, etc.) and award them to the users. This will have close to zero impact on the user experience, yet provides what most people are looking for in blockchain games. Proof of ownership, and the ability to monetize your gameplay...

[Read the full article here](https://karmastudios.dev/developing-games-for-blockchain/).
Easy history management for React with Mlyn
Tags: javascript, react, mlyn, webdev
Published: 2022-01-13 20:22:19

In the [introduction to mlyn](https://dev.to/vaukalak/introducing-mlyn-new-state-management-for-react-135c) post, I've shown an example of how easy is to create a TodoMVC app within it. In this post, I'd like to demonstrate how 2-way binding can help to setup history management. This is how the app would look like:
 ![Todo MVC with history](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/neagxe6c9bqocrr4xho0.gif)
You can see full code on [this codesandbox](https://codesandbox.io/s/react-mlyn-todo-mvc-with-history-lr34k?file=/src/App.js:475-1001)
The thing we want to track is todos field of the store:
```ts
const state$ = useSubject({
  todos: [],
  newTitle: ""
});
```
Since all parts of a `mlyn` store are 2-way bindable, we can easily pass it to the tracking function:
```ts
const [history] = createHistory(state$.todos);
```

`createHistory` is an utility from `mlyn-history` package. Within the returned history object we can jump to any step of the tracked state. Lets write a component for that:
```ts
const History = seal(({ history }) => {
  // let store past and future to local storage.
  useSyncronize(history.past$, "past");
  useSyncronize(history.future$, "future");
  return (
    <>
      <Mlyn.Input
        type="range"
        step="1"
        onChange={(e) => {
          // on input change, jump to a point in history
          history.jumpTo(e.target.value);
        }}
        // subscribe component to history position.
        value$={() => history.past$().length}
        // the range of mutations, indexing starts from 1
        // cause 0 is the initial state which can't be rolled back
        min={1}
        max$={() => history.entries$().length}
        // history with one entry (actual state)
        // is empty, hence can't be modified
        disabled$={() => history.entries$().length === 1}
      />
      <button onClick={history.commit}>COMMIT</button>
    </>
  );
});
```
And that's it, now every step of the todos state can be easily inspected. I hope the above has convinced you in the power of 2-way binding.
List Partitioning
Tags: 100daysofcode, programming, java, algorithms
Published: 2022-01-13 20:18:46

# [Description](https://binarysearch.com/problems/List-Partitioning)

Given a list of strings `strs`, containing the strings `"red"`, `"green"` and `"blue"`, partition the list so that the red come before green, which come before blue.

This should be done in O(n) time.

Bonus: Can you do it in O(1) space? That is, can you do it by only rearranging the list (i.e. without creating any new strings)?

**Constraints:** 

- `n ≤ 100,000` where `n` is the length of `strs`.

## Example 1

### Input

```
strs = ["green", "blue", "red", "red"]
```

### Output

```
["red", "red", "green", "blue"]
```

---

# Intuition

two pointers

# Implementation

```java
import java.util.*;

class Solution {
    public String[] solve(String[] strs) {
        int redIndex = 0, greenIndex = 0, blueIndex = strs.length - 1;
        while (greenIndex <= blueIndex) {
            switch (strs[greenIndex]) {
                case "red":
                    swap(redIndex++, greenIndex++, strs);
                    break;
                case "blue":
                    swap(blueIndex--, greenIndex, strs);
                    break;
                default:
                    greenIndex++;
            }
        }
        return strs;
    }

    private void swap(int i, int j, String[] strs) {
        String temp = strs[i];
        strs[i] = strs[j];
        strs[j] = temp;
    }
}
```

## Time Complexity

- Time: O(n)
- Space: O(1)
Golang: a simple echo server
Tags: go
Published: 2022-01-13 20:08:58

It is really easy to write a TCP Echo server in Go.

```go
package main

import (
	"io"
	"log"
	"net"
)

func main() {
	addr := "localhost:9999"
	server, err := net.Listen("tcp", addr)
	if err != nil {
		log.Fatalln(err)
	}
	defer server.Close()

	log.Println("Server is running on:", addr)

	for {
		conn, err := server.Accept()
		if err != nil {
			log.Println("Failed to accept conn.", err)
			continue
		}

		go func(conn net.Conn) {
			defer func() {
				conn.Close()
			}()
			io.Copy(conn, conn)
		}(conn)
	}
}
```

We used `io.Copy` here to copy from conn as Reader to conn as Writer (conn implemented the ReadWriter interface)

Run it:
```bash
$ go run main.go
```

Then in another terminal, test it with telnet:
```$
$ telnet localhost 9999
Trying ::1...
telnet: connect to address ::1: Connection refused
Trying 127.0.0.1...
Connected to localhost.
Escape character is '^]'.
hello
hello
can you repeat this after me?
can you repeat this after me?
```
Use previous value through a React hook
Tags: react, javascript, webdev, typescript
Published: 2022-01-13 20:05:33

React Hooks were definitely a game changer when they got [introduced in React v16.8.0](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html). It took me some time to familiarize myself with their usage. But now that I have used them a lot, I can see how using them make React components easier to reason about and maintain.
By creating custom hooks that you reuse within components, you can break up complex logic to smaller understandable functions.

After developing many applications, I have gathered a library of React hook patterns used in almost any of these projects.

One of them is retrieving the previous value of the state for example.  Written within a handful lines of code, it makes clever use of the `useRef()` hook. As I found out that not only you can use this hook to store the reference to a HTML element, but that it stores any value you pass it.
When combined with the `useEffect()` hook, you can create a small helper to store and retrieve the previous value of the variable you passed to it.

Let me show you the `usePrevious()` hook.

```tsx
import React from 'react';

export default function usePrevious<T>(value: T): T {
  // Create a reference to hold the previous version of the value,
  // as it is basically a generic object whose `current` property can hold any value.
  const ref = React.useRef<T>();

  // Use the `useEffect` hook to run a callback...
  React.useEffect(() => {
    // ...to store the passed value on the ref's current property...
    ref.current = value;
  }, [value]); // ...whenever the value changes.

  // And return the currently stored value,
  // as this will run before the `useEffect` callback runs.
  return ref.current;
}
```

## What to do with this hook?

When you combine the `usePrevious` hook with `useState`, you can run a callback whenever a value differs from the previous render cycle. I mainly use it in applications to compare boolean variables to their previous values, like the following.

```tsx
import React from 'react';

const Application = () => {
  // Call some external API through a custom hook.
  const { data, loading } = useAsyncApi()
  // Pass its loading indicator to our created hook.
  const wasLoading = usePrevious<boolean>(loading);

  // Use the `useEffect` hook to run a callback...
  React.useEffect(() => {
    // ...to check if the API was loading but now it is completed...
    if (!loading && wasLoading) {
        // ...and run some arbitary code...
    }
  }, [loading, wasLoading]); // ...whenever one of these changes.

  return (
    <div>
      {/* ... */}
    </div>
  );
}
```

How will you use this hook in your applications? Let me know, as I am curious to find out any other use case you can come up with!
Follow me, I'll soon start to share web development contents.
Published: 2022-01-13 19:34:26

I'll soon start to share my **3 years** of experience in Developing websites.
I do have a strong skill in:

- React.js
- Node.js
- Express.js
- Mongodb database
- Php
- Mysql
- Html5
- CSS3
- TailwindCSS
..........................
And I will write posts about

1. Easy programming post tutorial to follow. 
2. How to write efficient code.
3. Best practices to write code.
4. Tips & Tricks that make your life easier.
5. etc...
execCommand() Alternative
Tags: javascript, webdev
Published: 2022-01-13 19:26:14

#Abstract
Unfortunately, `document.execCommand()` function is no longer recommended, as it may be in the process of being dropped. If you are implementing a text editor in your web application, this is probably bad news for you. As this feature (JS feature) is used in making bold and italic texts, and may be in other few things too, like highlighting, redoing, ...etc.

This article gives you another way for implementing this kind of text manipulating — using built-in JS objects. Although, this article handles only bolding texts, the general approach can be used in implementing almost anything.

#Introduction: Some Definitions
Straightforwardly, we shall use [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [Range](https://developer.mozilla.org/en-US/docs/Web/API/Range) built-in JS objects instead of the function `document.execCommand()`.

##Range Object
This is considered as the primitive object that makes the whole magic. It's exactly what we need to bold a text.
> A range is a contiguous part of a document. A range can contain entire nodes as well as **portions of nodes** (such as a portion of a text node).

##Selection Object
As this object deals with the selected text in the screen via the user. Then it's our key to get a range object represents the text (portion of node) that we desire to manipulate.
> A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call `window.getSelection()`.

#boldCommand Function
"Writing a function that makes the selected text bold" is kinda synoptic description or fuzzy, I'd say. Let's reformulate it to: a function that wraps the selected text within a node ("strong" HTML tag, for instance). And that's what we exactly are going to do; we'll insert the `<strong>` HTML element in the node of the selected text, in a specific range, using the `Range` JS object.

The logic of our function is simply as follows:
- Create `<strong></strong>` HTML element.
- Initialize a variable to the selection of the user (Selection Object).
- Initialize a variable to the Range object from the selection in the previous step.
- insert the created element in the first step using the range object in the previous step.

```js
function boldCommand() {
    const strongElement = document.createElement("strong");
    const userSelection = window.getSelection();
    const selectedTextRange = userSelection.getRangeAt(0);
    selectedTextRange.surroundContents(strongElement);
}
```
Binary Search
Tags: cpp
Published: 2022-01-13 19:11:16

## Solution

```
class Solution {
public:
    int search(vector<int>& nums, int target) {
        int r=nums.size()-1;
        int l=0;
         while (l <= r) {
        int m = l + (r - l) / 2;

        // Check if target is present at mid
        if (nums[m] == target)
            return m;

        // If target greater, ignore left half
        if (nums[m] < target)
            l = m + 1;

        // If target is smaller, ignore right half
        else
            r = m - 1;
    }
        return -1;
    }
};
```
Do you want to know *exactly* what a PM does?
Tags: beginners, azure, career, management
Published: 2022-01-13 19:05:24

Well, look no further, you have found the article with the final answer (at least to me).

What's the role of a Program Manager in an enterprise like Microsoft? We get this question *many* times. Luckly a friend of mine, [Matthew Roche](https://twitter.com/SQLAllFather), recorded a video where he explains in detail, and IMHO in the best way possible, what a PM _is_ and _does_ in Microsoft.

So, if you are interested in learning more about the role, as you know we're always looking for talented people, you're probably interested in the website I built during the latest winter vacations.


![Website Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9400scui879thkpcvmv9.png)

I took the transcript of the recording and made it more accessible and easier to be discovered and consumed, so that everyone, e-v-e-r-y-o-n-e, can enjoy Matthew's work.

https://aka.ms/being-a-ms-pm

Enjoy (and share! :))

PS
In the meantime, I also enjoyed doing everything in a modern way, using GitHub as the source repo and GitHub Actions with Azure Static Web Apps to make it extremely easy to update the website. And I encourage you to help to make the site better if you find something you think can be improved. (And I'm sure there are a lot of things that can be improved...from the quality of the transcript to some better JavaScript effects or nicer look and feel)

https://github.com/yorek/ms-pm
Domain Monitor - A React SPA with MongoDB Cloud Services as a Backend
Tags: atlashackathon, typescript, react, mongodb
Published: 2022-01-13 18:58:15

### Overview of My Submission

I have a bunch of domains that I track using a shell script that sends me weekly emails with domain statuses. Some of the domains are mine, and I follow them because I don't want to miss the expiration date. The rest are the domains that aren't available now, but I'd like to acquire them once they become available. I've been using the script for years, and it suited me well, except for not having a friendly interface for adding and removing domains to the list.

Once I saw the announcement about this hackathon, I knew that it would be a perfect opportunity to rebuild that old and basic script into something more sophisticated and also to explore MongoDB Cloud along the way.

The result is a React single-page, multi-user application that uses MongoDB Atlas for storing domain entries, Realm functions and triggers for querying WHOIS servers, daily updates, and change detection. An email notification is sent to the user when a change is detected.

### Submission Category: 

Action Star

### Link to Code

{% github https://github.com/tunaitis/domain-monitor %}


### Additional Resources / Info

The live demo is [here](https://domainmonitor-itkcz.mongodbstitch.com).

Also, if you are interested in self-hosting the app, you can find the instruction on how to do that in the project repository.