teleren/devto huggingface dataset:
Facing problem in JS
Tags: javascript, webdev, beginners, frontend
Published: 2023-03-10 19:16:52

**😇Can anyone help me to understand the the line of code i mentioned with emoji down below**

`const form=document.querySelector(".form");
const input=document.querySelector(".form_input");
const list = document.querySelector(".toDoList");
const submit=document.querySelector(".submit_btn");

form.addEventListener("submit",(data)=>{
        data.preventDefault();
        let data_id=String(Date.now());//Try to remove the "String"
    let value=input.value;  
    create_the_list(value,data_id);
    input.value="";
})

list.addEventListener("click",(x)=>{
    let unique_id=x.target.getAttribute("data-id");
    if(unique_id)
    {
        remove_element(unique_id);
    }
    
})

function create_the_list(value,data_id)
{
    const li=document.createElement("li");
    li.innerText=value;
    li.setAttribute("data-id",data_id);
    list.appendChild(li);
}

function remove_element(element)
{
   👉 **var li = document.querySelector('[data-id="' + element + '"]')**
list.removeChild(li);
}`
Riddle Solved: How many Ancestors I have since 1000 BC... ChatGPT answers
Tags: chatgpt, ai, watercooler
Published: 2023-03-10 19:08:00

CHATGPT ANSWERS AS UNDER:

Assuming an average male reproductive age of 35 years, and assuming that you were born in the year 2000, that would mean that there have been approximately 57 generations of male ancestors between you and a male ancestor who lived in the year 1000 BCE.

Since each generation doubles the number of direct ancestors, the number of male ancestors you would have had in each generation going back 57 generations would be:

1 (you)
2 (your father)
4 (your grandfather)
8 (your great-grandfather)
16 (your 2nd great-grandfather)
32 (your 3rd great-grandfather)
64 (your 4th great-grandfather)
128 (your 5th great-grandfather)
256 (your 6th great-grandfather)
512 (your 7th great-grandfather)
1,024 (your 8th great-grandfather)
2,048 (your 9th great-grandfather)
4,096 (your 10th great-grandfather)
8,192 (your 11th great-grandfather)
16,384 (your 12th great-grandfather)
32,768 (your 13th great-grandfather)
65,536 (your 14th great-grandfather)
131,072 (your 15th great-grandfather)
262,144 (your 16th great-grandfather)
524,288 (your 17th great-grandfather)
1,048,576 (your 18th great-grandfather)
2,097,152 (your 19th great-grandfather)
4,194,304 (your 20th great-grandfather)
8,388,608 (your 21st great-grandfather)
16,777,216 (your 22nd great-grandfather)
33,554,432 (your 23rd great-grandfather)
67,108,864 (your 24th great-grandfather)
134,217,728 (your 25th great-grandfather)
268,435,456 (your 26th great-grandfather)
536,870,912 (your 27th great-grandfather)
1,073,741,824 (your 28th great-grandfather)
2,147,483,648 (your 29th great-grandfather)
4,294,967,296 (your 30th great-grandfather)
8,589,934,592 (your 31st great-grandfather)
17,179,869,184 (your 32nd great-grandfather)
34,359,738,368 (your 33rd great-grandfather)
68,719,476,736 (your 34th great-grandfather)
137,438,953,472 (your 35th great-grandfather)
274,877,906,944 (your 36th great-grandfather)
549,755,813,888 (your 37th great-grandfather)
1,099,511,627,776 (your 38th great-grandfather)
2,199,023,255,552 (your 39th great-grandfather)
4,398,046,511,104 (your 40th great-grandfather)
8,796,093,022,208 (your 41st great-grandfather)
17,592,186,044,416 (your 42nd great-grandfather)
35,184,372,088,832 (your 43rd great-grandfather)
70,368,744,177,664 (your 44th great-grandfather)
140,737,488,355,328 (your 45th great-grandfather)
281,474,976,710,656 (your 46th great-grandfather)
562,949,953,421,312 (your 47th great-grandfather)
1
Reusable pagination component using hook
Tags: react, hook, pagination, reusable
Published: 2023-03-10 18:48:33

Create a hook for pagination like this
```
import { useState } from "react";

export default function usePagination() {
	const [offset, setOffset] = useState(0);
	const [limit, setLimit] = useState(10);

	function changeOffset(offsetParam: number) {
		setOffset(offsetParam);
	}
	function changeLimit(limitParam: number) {
		setLimit(limitParam);
	}
```
This is the reusable pagination component UI,

```
type TypeProps = {
count: number;
changeOffset: (offset: number) => void;
offset: number;
limit: number;
};

const Pagination = (props: TypeProps) => {
const { count, changeOffset, offset, limit } = props;

let startingItemNumber = offset + 1;
let endingItemNumber = offset + limit > count ? count : offset + limit;

return (
<div>
  <p>Showing {startingItemNumber} to {endingItemNumber} of {count} entries
   </p>
   <button onClick={() => changeOffset(offset - limit)} disabled= 
     {offset === 0} >
	Prev
   </button>
   <button onClick={() => changeOffset(offset + limit)} 
      disabled={endingItemNumber === count}>
	Next
   </button>
</div>
  );
};

export default Pagination;

```
Use the pagination hook and the pagination component like this in your page

```

const List = () => {
const { limit, offset, changeOffset } = usePagination();
//_e.g. usage of the pagination hook _
const { data, isLoading } = useGetList(limit, offset);


return (
<>
//_Populate list_

 <Pagination
  //make sure count, offset and limit is Number type
  count={data.count}
  offset={data.offset}
  limit={data.limit}
  changeOffset={changeOffset}
 />
<>
)

export default List;

```
Would anyone be interested in receiving code mentoring?
Published: 2023-03-10 18:39:22

I don’t know what would be needed for mentoring, but I can help guide you along your coding journey, depending of course where you're at. I'd like to mentor folks long-term.

Coding can sometimes be a bit overwhelming, like drinking from a firehose of knowledge and often the smallest amount of information when it’s a smaller group can help a lot!

I’m specifically interested in helping coders who are further along in their learning, and are outside the US or have a non-traditional background, but if you have a traditional CS degree or experience, or if you feel like you could use support and mentoring feel free to shoot me a message.

Let’s chop it up on a quick zoom call and see if I can help you… what’s important to me is that whatever we set up is impactful for you on your code journey.

My why: I am writing code (MicroManager) that helps you draft, develop, and deploy dependable code. It's a didactic development environment that calls dozens of linters and static analyzers. It dogmatically enforces extremely strict code quality standards for BASH, COMPOSER, JAVASCRIPT, JSON, MySQL, PHP, HTML, and YAML.

The name MicroManager is a double entendre. It micromanages (AI) developers and the deployment of high-performance backend and frontend micro-services. I would like open-source contributors. I feel that this is a win, win situation as the code would get completed, and contributors can add MicroManger to their portfolio AND use it to write clean code! Hit me up!
Mortgage Calculator(first post)
Tags: beginners, python
Published: 2023-03-10 18:13:21

Hello everyone, I just made a mortgage calculator. 
This is my first post here, so I hope this is being useful for someone :) 


**Code**:
`
print("Hello this is your mortgage calculator! This calculator is made, so you don't have to calculate, how much you have to pay off on your house each month.")

home_price = input("Please tell me how much the house costs: ")
down_payment = input("How much money do you start with to pay off: ")
years = input("Now I want you to say how many years you have to pay off on the loan: ")
interest = input("Last but not least, tell me the interest percentage of your loan: ")
    
home_price = float(home_price)
down_payment = float(down_payment)
years = int(years)
interest = float(interest)

netto_mortgage = home_price - down_payment
    
monthly_interest = interest/12/100
months = years*12
monthly_payment = netto_mortgage* (monthly_interest*(1+monthly_interest)**months) / ((1+monthly_interest)**months-1)
monthly_payment = int(monthly_payment)
print("You have to pay {x} off each month!".format(x=monthly_payment))
`
What is a Parser?
Published: 2023-03-10 18:11:47


In computer science, a parser is a program that analyzes the structure of a given input text (usually code) based on a formal grammar. A parser takes a stream of tokens as input and outputs a parse tree, which represents the syntactic structure of the input.

**Types of Parsers**

There are two main types of parsers:

**Top-down parsers**

A top-down parser starts with the grammar's start symbol and applies grammar rules to produce the input string. These parsers are also known as recursive descent parsers, as they recursively descend down the parse tree, from the root to the leaves. Top-down parsers include LL(1) parsers, which can handle left-recursive and non-left-recursive grammars, and LL(k) parsers, which can handle ambiguous grammars.

**Bottom-up parsers**

A bottom-up parser starts with the input string and applies grammar rules to produce the grammar's start symbol. These parsers are also known as shift-reduce parsers, as they shift input tokens onto a stack and reduce them to grammar rules until the start symbol is produced. Bottom-up parsers include LR(0), SLR(1), LALR(1), and LR(1) parsers, which can handle left-recursive grammars.


[Apache-Age:-https://age.apache.org/](https://age.apache.org/)
[GitHub:-https://github.com/apache/age](https://github.com/apache/age)
What does effective advocacy look like?
Tags: wecoded, career, discuss
Published: 2023-03-10 18:02:53

People of marginalized identities are no strangers to the concept of **advocacy**. We advocate for ourselves, for each other, for our work, for our community — sometimes all at once. It's exhausting, right?

This is why we also look to allies (coworkers, colleagues, and friends who are not marginalized based on a particular identity, such as race or gender) to advocate for us and with us. And yet, sometimes allies get stumped: when they don't know how best to advocate for us, they freeze up and remain silent, which allows the status quo to continue.

So let's talk about it.

### What does effective advocacy in the workplace look like?

**Feel free to share ideas, lived experiences, questions, and concerns.** All your intersecting identities are welcome in this conversation! 

And, of course, a reminder to abide by the [Code of Conduct](https://dev.to/code-of-conduct) while we discuss. I promise to moderate the discussion swiftly and with nuance. ❤️

@abbeyperini wrote an awesome article with some great, actionable ideas for advocating for women in the workplace specifically:

{% embed https://dev.to/abbeyperini/8-ways-to-support-women-developers-55lf %}

If you know of another good article on this topic, please drop it in the comments!
☁ 🎮 Cloud Gaming: The Game Changer in the Gaming Industry 🎮☁
Published: 2023-03-10 17:35:33

The gaming industry is experiencing a revolution with the rise of cloud gaming. Cloud gaming is a technology that allows gamers to stream games over the internet without the need for expensive hardware. This means that gamers can access games on multiple devices without having to download or install them.

Cloud gaming is becoming more and more popular, with major players like Google, Microsoft, and Amazon investing in the technology. Google's Stadia, for instance, allows players to stream games on a variety of devices including TVs, laptops, and smartphones. Microsoft's xCloud service lets gamers stream games from their Xbox consoles to their smartphones and tablets, while Amazon's Luna offers games on multiple devices such as Fire TVs, PCs, and Macs.

The benefits of cloud gaming are numerous.
🔴 First, it makes gaming more accessible and affordable for gamers. Gamers no longer have to purchase expensive hardware to play their favorite games, as cloud gaming only requires a stable internet connection. This allows more people to enjoy gaming, regardless of their budget.

🔴Secondly, cloud gaming allows gamers to enjoy games on multiple devices, which makes it more convenient and flexible. For instance, gamers can play their favorite games while on the move, waiting in line, or traveling, as long as they have a stable internet connection.

🔴Cloud gaming also has the potential to create new business models for game developers and publishers. Subscription-based services and microtransactions are some of the ways that game developers and publishers can leverage cloud gaming to generate revenue.

However, there are some challenges that cloud gaming faces. The primary challenge is internet infrastructure, especially in areas with slow or unreliable internet connections. Cloud gaming requires a fast and stable internet connection, which may be a barrier for some gamers.

Despite these challenges, cloud gaming is a game-changer for the gaming industry. It makes gaming more accessible, affordable, and convenient. As internet infrastructure continues to improve, we can expect cloud gaming to become even more popular and widespread.

In conclusion, cloud gaming is a technology that has the potential to transform the gaming industry. It is a game-changer that offers accessibility, affordability, and convenience for gamers. The rise of cloud gaming is an exciting development that every gamer should try, and I'm confident that it will continue to grow in popularity as more people discover its benefits.

#development #gaming #technology #people #cloud #businessmodels #microsoft #investing #infrastructure #connections #google #like #amazon #hardware #web3 #cloudgaming #cloud #cloudgame
sqlite / sqlx + async
Tags: rust, database, sql
Published: 2023-03-10 17:27:17

I am working on geolocation bot. This bot should send to users nearest showplaces in Tashkent. I created some demo DB using Python and Django. And I have an old telegram bot that sends nearest cafes in Tbilisi. But it doesn’t use any DB just a hardcoded catalog. So I spend an evening to try Rust crates sqlite and sqlx. I’ve already tested both of them with my bot: both works. Here are few lines of code to show how it works with different libraries.

#sqlx

```bash
[dependencies]
anyhow = "1.0"
tokio = { version = "1", features = ["full"] }
sqlx = { version = "0.6", features = ["sqlite", "runtime-tokio-native-tls"] }
```

```Rust
use sqlx::{sqlite::SqlitePool, Row};

struct Museums {
    name: String,
    summ: String,
    sche: String,
    pric: String,
}

#[tokio::main]
async fn main() -> anyhow::Result<()> {
    let content = database().await;
    
    for i in content {
        println!("{}\nWork hours: {}\nTicket price = {}\n\n{}\n", i.name, i.sche, i.pric, i.summ)
    }
    
    Ok(())
}
#[allow(unused)]
async fn database() -> Vec<Museums> {
    let mut museums: Vec<Museums> = vec![];
    
    let pool = match SqlitePool::connect("db.sqlite3").await {
        Ok(it) => it,
        Err(err) => return museums,
    };
        
    let base = sqlx::query("SELECT * FROM catalog_museum").fetch_all(&pool).await;
    for i in base.unwrap() {
        let temp_struct = Museums {
            name: i.get(1),
            summ: i.get(2),
            sche: i.get(3),
            pric: i.get(4),
        };
        museums.push(temp_struct)
     }

    museums
}
```

#sqlite

```bash
[dependencies]
anyhow = "1.0"
tokio = { version = "1", features = ["full"] }
sqlite = "0.30.4"
```

```Rust
use sqlite::State;

struct Museums {
    name: String,
    summ: String,
    sche: String,
    pric: String,
}

#[tokio::main]
async fn main() -> anyhow::Result<()> {
    let content = database().await;
    for i in content {
        println!("{}\nWork hours: {}\nTicket price = {}\n\n{}\n", i.name, i.sche, i.pric, i.summ)
    }

    Ok(())
}

async fn database() -> Vec<Museums> {
    let connection = sqlite::open("db.sqlite3").unwrap();
    let query = "SELECT * FROM catalog_museum";
    let mut statement = connection.prepare(query).unwrap();

    let mut museums: Vec<Museums> = vec![];

    while let Ok(State::Row) = statement.next() {
        let temp_sctruct = Museums {
            name: statement.read::<String, _>("name").unwrap(),
            summ: statement.read::<String, _>("summary").unwrap(),
            sche: statement.read::<String, _>("schedule").unwrap(),
            pric: statement.read::<String, _>("price").unwrap(),
        };
        museums.push(temp_sctruct)
    }

    museums
}
```

I’ll probably choose the last one because it’s more comfortable to use real names instead of indexes.
Starting as a Hashnode blogger
Tags: hashnode, beginners
Published: 2023-03-10 17:24:01

I've been on here for more than a year now and I've realised it's time to post on more than one blogging community.

I looked around and found that Hashnode was pretty popular, so I joined it and created [an account](https://hashnode.com/@vulcanwm).

I will still use DEV as much as I used to, but will also post relevant educational posts on Hashnode, so it will be easier to find my quality posts (as I post a lot of discussions here as well).

Thanks for supporting me in this journey, and I hope to see you again soon!
Blobby image animation in CSS 🦠
Tags: css, tutorial, beginners, codenewbie
Published: 2023-03-10 17:19:17

Was bored on a Friday and whipped up a fun little animated image using CSS:

{% codesandbox blobby-image-animation-es8n3c %}

It overlays multiple elements with the same background image rotated at different intervals. To align the images to the same plane and stitch them together each element is first rotated back (using the `:before` [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)) then resized and positioned accordingly. 

Then, by adding `overflow: hidden;` to the parent element, the image is cropped to the `border-radius` value of the pseudo-element and enables it to take a shape!

Since each image is technically in the same position but with a different parent the values for dimensions and positioning must be identical. This was slightly tricky as the height & width vary slightly with the different rotations (thanks to [geometry](https://en.wikipedia.org/wiki/Pythagorean_theorem)), so the image needs to be stretched a bit. 

You can see how this is handled here:

{% codesandbox blobby-image-animation-es8n3c view=editor module=styles.css %}

For the animation, it uses a simple [`keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) rule to smoothly transition `border-radius` values. Each div has an `animation-delay` value to offset and create a directional effect.

Hope this was a good showcase of how easy it is to easily create complex animations using basic CSS/HTML!
3 Mistakes I Made as an Engineer, but Had To Become a Manager To See
Tags: programming, career
Published: 2023-03-10 17:18:33

I was shocked how obvious my mistakes as an engineer became after my perspective changed. Taking on manager responsibilities for the first time revealed mistakes I had made as a engineer. Here are the top three things I could only see after becoming a manager.

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

## People problems are as important as “real” problems

Over the years, I’ve seen several engineers on other teams become less productive and then leave the company because they weren’t happy. Each time, I didn’t pay attention and stayed focused on my projects.

As a manager, I now have a higher level view on how everyone is doing. It’s much more obvious how people problems affect the team even before anyone decides to leave. Having motivated, happy teammates is critical to getting things done. For that reason, people problems are just as important as problems with the code itself.

## Hiring well is one of the best uses of your time

I always ignored hiring when I was an engineer. It felt like a side hobby compared to shipping projects that had business impact. After hiring 3 engineers last year and seeing the impact they are having, I’m shocked at how wrong I was.

Think about it this way - even if you work extra hours, you might only be able to contribute an additional 50% to your team if you’re lucky. But, if you hire just one strong engineer, your team gains an additional 100% of your productivity. Not to mention that hiring takes much less time than working longer hours.

## Get to know your coworkers

When I was a junior engineer, I only focused on my code. I never went to social events because I was so focused on having an impact. Although I was a little extreme, many engineers tend to share a similar mindset.

The problem is that all projects of consequence come from working together with others. If you don’t build connections with relevant people, you’ll realize it only too late when you reach out and they aren’t responsive.

I was lucky to have an excellent manager that made it so that other teams helped me and my teammates. Now that a large part of my job is to do the same, I see how important it is.

---
Junior engineers often focus a little too much on just the code. There are plenty of other areas where a small time investment will go a long way. Learn from my mistakes to get ahead of this.

**Over to you: How would you rate yourself when it comes to these? Are you blind like I was?**

If you learned something helpful, [subscribe for free to my Substack receive new posts](https://www.developing.dev/).

Thanks for reading,
Ryan Peterman
С++ ga kirish
Tags: cpp
Published: 2023-03-10 17:10:26


C++ bu dastur tili bu tildan ko'pincha odamlar "foundation"da o'rganishadi.
Va bu til dasturlarning poydevoridir hamda juda oson til.Masalan men hozirgi kunda "foundation" kursida o'qimoqdaman.
```
`#include <iostream>;`****
using namespace std;

int main(){

cout<<"\\    \/\\"<<endl;
cout<<" )  ( ')"<<endl;
cout<<"(  \/  )"<<endl;
cout<<" \\(__)|";
return 0;  
  }

/*Bu esa mening birinch dastur kodim.Bu Mushuk kodi.
 \    /\
  )  ( ')
 (  /  )
  \(__)| */
```