teleren/devto huggingface dataset:
Learning JavaScript: "addEventListener"
Tags: beginners, javascript, programming, frontend
Published: 2023-07-22 13:02:28

My name is Meghan and I have been working for Amazon for 2 years now. This job has been a positive experience as I have been able to pursue my education at no cost. I was first introduced to Software Engineering when I saw a post at work for a program that would train you to become a Software Engineer called ATA. 

I began doing research in SE and other careers in Tech and became fascinated with the field. I believe a career in Tech would be a perfect fit for me! Unfortunately, I was not able to pass the exam in order to be accepted into the program. Still determined, I looked into certifications through the Amazon Career Choice Program. I came across Flatiron School and decided to apply!

I have enjoyed my experience learning how to code thus far. It has been challenging at times but when the solution finally comes through to me, it is such a rewarding feeling.

The most interesting thing that I have learned so far is **addEventListener**. This method allows for an event to happen that is called in a function. Events are actions made by the user or browser such as pressing play on a video or clicking a link which directs you to another page. There are so may events to choose from to make your browser interactive and entertaining! Below are just a few examples: 

- click               
- blur               
- mouseover           
- keyup              
- keydown
- cut
- copy
- paste

**addEventListener** consists of 2 parameters: the _event_ (defines the event name) and the _function_(responds to the event). Lets take a look at an example:

```
document.addEventListener("click", sayHello);

function sayHello() {
    alert ("Hello!")
}

```

In this example, the event is "click" and the function is sayHello. When the function is called through the event, the results would be "Hello". Also, _document_ is a target parameter in which the event listener will be executed. These are typically HTML elements but can apply to any DOM object. This is just a simple explanation of how **addEventListener** works. 

Resources: 
https://developer.mozilla.org
https://www.w3schools.com
What you learning about this weekend?
Tags: codenewbie, discuss, learning, beginners
Published: 2023-07-22 13:00:00

Howdy 🤠

What's everybody been learning?

Whether you're sharpening your JS skills, making PRs to your OSS repo of choice 😉, sprucing up your portfolio, or writing a new post here on DEV, we'd like to hear about it.

Knowledge is power!

![Jack Black looking intense and saying "Knowledge is power"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62iid1nm06cpb59koqj0.gif)
What is Execution Context | Execution Context in JS
Tags: javascript, tutorial, programming, coding
Published: 2023-07-22 12:35:46

In JavaScript, the "execution context" is a fundamental concept that helps to manage the execution of code. It can be thought of as an environment in which the code is evaluated and executed. Whenever a JavaScript program runs, it creates one or more execution contexts, each representing a particular scope, set of variables, and the rules for how the code is executed.

To understand in easy language, imagine your JavaScript code is like a play, and the execution context is like the stage where the play is performed.

The execution context is where your code comes to life. It keeps track of all the characters (variables) and their lines (values) as they interact with each other. Each time a function is called or code is executed, a new performance (execution context) is set up on the stage.

This stage knows about other stages too, so if one function needs something from another function, they can talk to each other.

When a function finishes its performance, the stage is cleared, and the next one gets ready for its turn.

This way, each part of your code gets its own stage (execution context), and they don't interfere with each other's performance. It's like a well-organized theater production, making sure everything runs smoothly and without any chaos! 

Thank you for reading, please follow me on Twitter, i regularly share content about Javascript, and React and contribute to Opensource Projects

Twitter-https://twitter.com/Diwakar_766

Github-https://github.com/DIWAKARKASHYAP
GitHub Insider: Your Monthly Gateway to Developer Excellence!
Tags: programming, tutorial, news, github
Published: 2023-07-22 12:27:27

Attention all developers! I've some exhilarating news to share with you. GitHub has brought back its much-awaited monthly newsletter, the "GitHub Insider." This exclusive digest is packed with a wealth of invaluable insights, technical tips, and expert practices to fuel your coding passion.



**Discover GitHub Insider:**

Say hello to the GitHub Insider, your ultimate guide to the developer wonderland. Every month, this treasure trove will grant you an inside look at GitHub's innovative products, unveiling their hidden gems. Alongside this, you'll find a carefully curated collection of technical guides and best practices that will empower your coding journey.

**Be Part of the Magic:**

The inaugural edition of GitHub Insider launched just days ago, and it's nothing short of fantastic! Join the thriving developer community and elevate your skills with insider knowledge and industry best practices.

Don't miss out on this golden opportunity to enhance your coding prowess. Embrace the GitHub Insider and stay ahead in the ever-evolving world of development. Sign up now and unlock the gateway to developer excellence!

Sign up here and embark on a journey of continuous learning and innovation: https://resources.github.com/newsletter/

Happy coding!


![cheers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o80zryd2vfh7lfqami2l.jpeg)
Linux for Troubleshooting - sudo
Published: 2023-07-22 11:46:49

**_<u>Sudo :</u>_**

1. Root user - Critical operations are taken care.
2. sudo or su do 
3. root binary setuid
4. /etc/sudoers - default sudo security policy pulgin - this file defines who can run what .

**_<u>Why we need sudo ?</u>_**

Risk - to avoid normal user changing the configurations.
Think before you type.

sudo su --> changes to root in the terminal --> sudo useradd techie

1. Lets give this user a root access
2. Important file is /etc/sudoers

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

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

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

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

1. sudo is more secure than su command.
2. /var/log/secure  or /var/log/auth.log --> logs that store sud usage.
3. Below one shows the logs in auth .

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

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

**Another important file is /etc/passwd**

Once the user is getting created , it stores the data in the passwd file with password . If there is not password then ' x ' won't be there. (TBD)

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

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

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

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

**_<u>Installing Programs :
</u>_**

1. rpm - Package Manager or apt in some distro.
2. Package Management System.
3. .rpm - file format
4. Yellowdog Updater or Modified Yum - Library - Utility

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

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

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

_**<u>su command :</u>**_

1. command for the user
2. Below user as root access .

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

**_<u>Note :</u>_**

1. what is the meaning of this ? export VISUAL=vim; visudo (TBD)
2. userdel for deleting the user also we can use 'f' to force the deletion. i.e., userdel -f Tom
While deleting if the user is running some process we can use 'f' to force them.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f0w21jaysnkufbiuut0.png)
After this what do i do?
Published: 2023-07-22 11:37:38

Hello everybody, LlamaCode here. I am a new Java developer/engineer what ever you want to call it, I have recently been taking a course by Tech By Tim on the programming language Java(https://www.youtube.com/watch?v=Yv_4RXyLjL8&t=3830s) and I am about 2/3 done and I want to know what to do after finishing it, what should I learn, what course and what concepts (I want to learn java for future career).
Leveraging the Power of PostgreSQL and Apache AGE for Graph Data Management
Published: 2023-07-22 11:33:55

Hello Dev.to community! Today, lets talk about two powerful tools that, when combined, can significantly enhance  data management capabilities: PostgreSQL and Apache AGE (incubating). 

#PostgreSQL

PostgreSQL is a robust, open-source relational database system. PostgreSQL's advanced features include complex queries, foreign keys, views, transactional integrity, and multiversion concurrency control.

But what if we want to handle graph data? That's where Apache AGE comes into play.

#ApacheAGE

Apache AGE (A Graph Extension) is an incubating project that adds graph database functionality to PostgreSQL. It extends PostgreSQL, allowing it to store, query, and process graph data. AGE is based on the openCypher Query Language, enabling developers familiar with SQL to quickly adapt to the graph model.

##Combining PostgreSQL and Apache AGE

By combining PostgreSQL's robustness and Apache AGE's graph processing capabilities, we can handle complex data relationships more intuitively and efficiently. Here's a simple example of how to create a graph and run a graph query using AGE:

```sql
-- Load the AGE extension
LOAD 'age';
SET search_path = ag_catalog, "$user", public;

-- Create a graph
SELECT create_graph('my_graph');

-- Insert vertices and edges into the graph
INSERT INTO my_graph
VALUES (1, 'John', 'Person'),
       (2, 'Doe', 'Person'),
       (3, NULL, 'Friendship');

-- Run a graph query
SELECT * FROM cypher('my_graph', $$ 
  MATCH (a:Person)-[:Friendship]->(b:Person) 
  RETURN a, b 
$$) AS (a agtype, b agtype);
```

In this example, we first load the AGE extension and create a graph. We then insert two 'Person' vertices and a 'Friendship' edge into the graph. Finally, we run a graph query that finds all pairs of people who are friends.

##Conclusion

The combination of PostgreSQL and Apache AGE provides a powerful tool for managing both relational and graph data. This allows developers to leverage the strengths of both relational and graph databases in a single, unified system.


Happy coding!

#postgresql #apacheage
Understanding async/await in JavaScript
Tags: javascript, beginners, learning, tutorial
Published: 2023-07-22 11:31:17

<aside>
💡 async/await is built on top of Promises and provides a more readable way to write asynchronous code. The async keyword is used to define a function that returns a Promise. Inside an async function, you can use the await keyword before an expression that returns a Promise.

</aside>

###Asynchronous Function:

```jsx
// Simulating an asynchronous operation with a Promise
function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const user = { id: 1, name: 'John Doe' };
      resolve(user);
    }, 1000);
  });
}

// Using async/await to handle the Promise
async function getUserData() {
  try {
    const user = await fetchUserData();
    console.log('User:', user);
    return user;
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error;
  }
}
```

In this example, getUserData() is an async function that uses the await keyword before calling fetchUserData(). When getUserData() is called, it waits for the fetchUserData() Promise to resolve before logging the user data to the console.

### Error Handling:

```jsx
function performTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() < 0.5; // Simulating success/failure
      if (success) {
        resolve('Task completed successfully!');
      } else {
        reject(new Error('Task failed.'));
      }
    }, 1500);
  });
}

async function doTask() {
  try {
    const result = await performTask();
    console.log(result);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

```

In this example, doTask() awaits the result of performTask() and handles both success and failure scenarios using the try-catch block.

### Multiple Async Operations:

Async/await makes it easier to deal with multiple asynchronous operations. You can use await with multiple Promises, and they will execute sequentially.

```jsx
function fetchResource(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Resource loaded from ${url}`);
    }, 800);
  });
}

async function loadResources() {
  const resource1 = await fetchResource('https://example.com/resource1');
  console.log(resource1);

  const resource2 = await fetchResource('https://example.com/resource2');
  console.log(resource2);

  const resource3 = await fetchResource('https://example.com/resource3');
  console.log(resource3);
}

loadResources();
```

In this example, loadResources() loads three resources sequentially using await, ensuring each operation completes before moving on to the next.

### Conclusion:

With async/await, managing Promises and handling errors become more intuitive and less error-prone. As you move deeper into JavaScript development, mastering async/await will prove to be an essential skill for building efficient and responsive applications.
Fun Game Projects in Python
Tags: beginners, python, gamedev, tutorial
Published: 2023-07-22 11:15:00

For the last few months, I start learning about Pygame since building games seems fun doing with Python. Throughout my journey, I created some of the famous cool games which are good practices to enhance skills and knowledge with Pygame.

## Topics

### Flappy Bird
Source Code: [https://github.com/Codeit-Michael/Py-Flappy-Bird](https://github.com/Codeit-Michael/Py-Flappy-Bird)

### Platformer Game
Article: [Platformer with Pygame](https://www.thepythoncode.com/article/platformer-game-with-pygame-in-python)
Source Code: [https://github.com/Codeit-Michael/Platformer-Game](https://github.com/Codeit-Michael/Platformer-Game)

### Maze Game
Article: [Build a Maze Game in Python](https://www.thepythoncode.com/article/build-a-maze-game-in-python)
Source Code: [https://github.com/Codeit-Michael/Maze-Game-Python](https://github.com/Codeit-Michael/Maze-Game-Python)

### Slide Puzzle
Article: [Slide Puzzle game in Python](https://www.thepythoncode.com/article/slide-puzzle-game-in-python)
Source Code: [https://github.com/Codeit-Michael/Slide-Pyzzle](https://github.com/Codeit-Michael/Slide-Pyzzle)

### Checkers
Article: [Make a Checkers game with Pygame](https://www.thepythoncode.com/article/make-a-checkers-game-with-pygame-in-python)
Source Code: [https://github.com/Codeit-Michael/Checkers](https://github.com/Codeit-Michael/Checkers)

### Tic-Tac-Toe
Article: [Make a Tic-Tac-Toe game in Pygame](https://www.thepythoncode.com/article/make-a-tic-tac-toe-game-pygame-in-python)
Source Code: [https://github.com/Codeit-Michael/TicTacToe-Game](https://github.com/Codeit-Michael/TicTacToe-Game)

### Hangman
Article:
(With GUI): [Hangman GUI game with Pygame](https://www.thepythoncode.com/article/hangman-gui-game-with-pygame-in-python)
(Command Line Game): [Hangman game with Python](https://www.thepythoncode.com/article/make-a-hangman-game-in-python)
Source Code: [https://github.com/Codeit-Michael/Hangman-GUI](https://github.com/Codeit-Michael/Hangman-GUI)

### Chess Game
Article: [Make a Chess Game using Pygame](https://www.thepythoncode.com/article/make-a-chess-game-using-pygame-in-python)
Source Code: [https://github.com/Codeit-Michael/Python-Chess-Game](https://github.com/Codeit-Michael/Python-Chess-Game)
teatv app for windows
Tags: teatv, tutorial, programming, beginners
Published: 2023-07-22 07:51:39

As of my last update in September 2021, TeaTV was available for Windows, allowing users to stream movies and TV shows on their computers. To use TeaTV on Windows, you typically needed to download and install the [TeaTV Apk](https://teatvhd.pro/) from their official website or other trusted sources.

However, I must emphasize that using free streaming apps like TeaTV to access copyrighted content without proper licensing or permission from the content owners may be illegal and considered piracy in many regions.

To ensure you are using streaming services legally and supporting content creators, consider using legitimate and licensed platforms for watching movies and TV shows on your Windows device. There are many legal streaming options available, such as Netflix, Amazon Prime Video, Hulu, Disney+, and more.

Please note that the availability and legality of specific apps might have changed since my last update. Always make sure to check the latest laws and regulations regarding streaming apps and services in your region to avoid any legal issues. Additionally, it's essential to be cautious when downloading and installing software from the internet to avoid potential security risks or malware.
ANGULAR | storing images in assets and using relative path in components templates not working properly after ng build
Tags: angular, django, webdev
Published: 2023-07-22 11:12:13

I am trying to build a project in Django and Angular. I want to serve the UI via Django (as in I don't want to run one server for angular and another for django). 

I set the outputPath(for 'dist') to /backend/static/ in 'angular.json' file and changed some settings in the django project(like set the `STATIC_URL='/static/'`, etc.

Also, I need to set this: `<base href="/static/" />` in index.html(if I keep href='/' I get a blank screen).

Following are the issues I am facing: 

1. The URL automatically changes to `localhost:8000/static` from `localhost:8000` on page load but if I try to open my app directly using the `localhost:8000/static`, I get this error: 

```
Using the URLconf defined in backend.urls, Django tried these URL patterns, in this order:
[name='angular_ui']
admin/
The current path, static, didn’t match any of these.
```
2. I store my images in `assets/` folder and I use relative paths in <img/> elements in angular components to point to the images but after running `ng build` command, the images don't load, I see the `alt` text only instead.


Please let me know if more details are needed here.

Thanks.
Scroll to anchor element with React Router V6 (hash links, anchor links)
Tags: react, reactrouter, webdev, programming
Published: 2023-07-22 11:07:49

Hi! With inspiration of [Nick Coughlin](https://ncoughlin.com/posts/react-router-v6-hash-links/), I developed a pretty simple solution for using hash links or anchor links with React Router V6. As Nick proposes, it's without any further dependency like the popular `react-router-hash-links`.

## Target

Goal is that your app scrolls to a certain element with a certain ID, when a so called hash link or anchor link is used.

Example:

```typescript
...
// react-router Link component
<Link to="/mypage#myheadline">Press Link to get to headline</Link>
...
```

By clicking this link, the user expects to be navigated to "/mypage" and scrolled to the element with ID "myheadline"

```typescript
...
// headline with ID "myheadline"
<h2 id="myheadline">My Headline</h2>
...
```

## ScrollToAnchor.tsx or jsx

Put this component anywhere within your router component. It simply listens for location changes and determines if there is a hash (or element ID) that your app should scroll to.

```typescript
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

function ScrollToAnchor() {
  const location = useLocation();
  const lastHash = useRef('');

  // listen to location change using useEffect with location as dependency
  // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
  useEffect(() => {
    if (location.hash) {
      lastHash.current = location.hash.slice(1); // safe hash for further use after navigation
    }

    if (lastHash.current && document.getElementById(lastHash.current)) {
      setTimeout(() => {
        document
          .getElementById(lastHash.current)
          ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        lastHash.current = '';
      }, 100);
    }
  }, [location]);

  return null;
}

export default ScrollToAnchor;
```
Connect One keyboard and mouse with multiple Laptops
Tags: barrier
Published: 2023-07-22 11:01:48

**Barrier** is a part-open source application that allows multiple computers to share a single keyboard and mouse set. This allows you to have multiple computers attached to separate monitors, all of which can be worked on with only one set of peripherals. **Barrier** works by running a server on the computer that the keyboard and mouse are connected to. This server then talks to clients that are installed on the other computers via SSH.
**Barrier** is working across different Operating Systems (MacOS, Linux, Windows) so you can download it very easily using `.exe` for windows and `.dmg` for mac and `command line` in linux.
Download from this [link](https://github.com/debauchee/barrier/releases) 
And from command line ubuntu

```
sudo apt update
sudo apt -y install barrier
```

![Barrier running on my Windows computer.](https://i0.wp.com/blog.delevingne.me/wp-content/uploads/2018/08/using-barrier-001.png?w=616&ssl=1)

Now, I took the IP from server to client.

![My Ubuntu Barrier client, displaying it’s status and connection configuration.](https://i0.wp.com/blog.delevingne.me/wp-content/uploads/2018/08/using-barrier-002.png?resize=768%2C444&ssl=1)

Maybe you would face this error 

> ssl certificate doesn't exist: /path/to/SSL/Barrier.pem
We need to install openssl within our server and client, so on **windows:** 
From CMD `winget install openssl` or download it.
On **linux:**
From terminal `sudo apt update
sudo apt update
openssl version`

Then on both Operating Systems

```
cd  "path to your SSL"
mkdir -p Fingerprints
openssl req -x509 -nodes -days 365 -subj /CN=barrier -newkey rsa:4096 -keyout Barrier.pem -out Barrier.pem
openssl x509 -fingerprint -sha256 -noout -in Barrier.pem > Fingerprints/Local.txt
sed -e "s/.*=/v2:sha256:/" -i Fingerprints/Local.txt
```
Then restart your Barriers
Laravel-Hands-On, a Learning resource for Laravel beginners
Tags: laravel, php, documentation, learning
Published: 2023-07-22 10:29:40

[laravel-hands-on](https://github.com/mazimez/laravel-hands-on) is a GitHub repository made for people who want to learn Laravel or improve their skills in it

This repository is structured into different branches, with each branch focusing on a specific topic in Laravel. Each branch contains a README file explaining a little bit about that topic and providing hands-on examples and code samples.

It gets a new TOPIC/BRANCH every week. Currently, it has over of 50 branches.

The AIM for this repository to provide the best and optimized way to create and maintain any LARAVEL application. Also providing some re-usable code that you can directly use in your other projects.

You can also request for any of your desired TOPIC to be added in this repository from [here](https://github.com/mazimez/laravel-hands-on/labels/NEW-TOPIC-REQUEST) use the label `NEW-TOPIC-REQUEST`