teleren/devto huggingface dataset:
Self-Taught Developer Journal, Day 40: TOP DOM Manipulations and Events cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-16 02:45:43

Today I learned...

## Event Listeners
In the **addEventListener()** function, the function is called whenever the specified event occurs on the target. The target being a HTML element, Document object, etc.

     // target element to listen for event
     const elem = document.querySelector("#idExample");

     elem.addEventListener('click', (event) => {
       console.log(event.target.value);
       // `event` is passed into the callback from the 
       `.addEventListener` function when it receives a 'click' 
     event.
     });

The arrow function argument in the **addEventListener()** second parameter is a callback. A **callback** is when a function is passed into another function as an argument.

The *event* object passed by the **addEventListener()** function into the callback represents the event itself.

The event listener can be applied on a group of nodes using the **querySelectorAll()**.

## Practice
1. **Grab the first exercise in [Wes Bos’s JavaScript30 program](https://www.youtube.com/watch?v=VuN8qwZoego&ab_channel=WesBos) by cloning the repo at https://github.com/wesbos/JavaScript30. Code along with the Video Tutorial to build the rest of the exercise.**
2. **Watch the [Event Capture, Propagation and Bubbling video](https://www.youtube.com/watch?v=F1anRyL37lE&ab_channel=WesBos) from Wes Bos’s JavaScript30 program. If you want to code along with the video, you can use the contents of folder #25 from the repo you cloned above.**

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://briggs.dev/blog/understanding-callbacks
Using rxjs Operators to Create a Unique Username Field
Published: 2022-01-16 02:31:39

In this post I will demonstrate a general strategy for performing a search or other API call while a user is typing, by making an input field for a unique username.

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

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

I like this strategy because it is straight-forward, adaptable to any framework, and extendable to other use-cases where you might need to show immediate feedback to a user based on an action.

First, create a BehaviorSubject of type string to record the user's actions, and use the `asObservable()` method on it to create a variable that will update with each key-press.
  ```typescript
  // Search
  inputActionSubject = new BehaviorSubject<string>('');
  inputAction$ = this.inputActionSubject.asObservable();     
 
  onUserInput(event: Event): void {
    const input = (event?.target as HTMLInputElement)?.value;        
      this.inputActionSubject.next(input);
  }
 ```
 ```html      
   <input   
     matInput
     [formControl]="inputControl"
     (input)="onUserInput($event)"
     #input />
  ```
  &nbsp;
Apply the following rxjs operators to call the API each time the variable updates.

   * `debounceTime()` Wait this many milliseconds before proceeding to avoid sending requests while the user is still typing
   * `switchMap()` Call the API with the input as a parameter, and unsubscribe from the previous call, since we're sending a new one
   * `tap()` Connect to the observable returned by the API call within the observable for the user-input
     ```typescript
     // On Initialization
     this.inputAction$
       .pipe(
         debounceTime(300),
         switchMap((input: string) =>
           this.userService.getUsersByUsername(input).pipe(
             tap((res: User[]) => {
               this.checkForDuplicateUsername(res);
             })
           )
         )
       )
     .subscribe();
     ```    
     &nbsp;

Process the results from the API call and provide feedback to the user. In our case: set an error on the `FormControl` if the list of users with the given username is not empty.
   ```typescript
   // Using Angular Reactive Forms
   @ViewChild('input') input: ElementRef<HTMLInputElement>;
   inputControl = new FormControl('', [
     Validators.required,
     Validators.minLength(3),
   ]);

   checkForDuplicateUsername(users: User[]): void {
     if (users.length) {
       this.inputControl.setErrors({ notUnique: true });
       this.input.nativeElement.blur(); // Trigger update
       this.input.nativeElement.focus();
     }
   }
   ```
   &nbsp;


Full Angular Implementation
{% stackblitz angular-ivy-idvw5c view=preview %}
Personal Site Suggestions
Tags: showdev, help, programming, webdev
Published: 2022-01-16 02:24:53

My personal website is [https://aden-eilers.com](https://aden-eilers.com)

I am currently applying to webdev jobs. The goal of this site is to have a place where development managers can learn more about my development skills and experiences.

If you guys have any suggestions for things I should add, things I should change etc... that would be greatly appreciated! 

Thank you in advance for any feedback!
100 Days of Code
Tags: 100daysofcode, webdev
Published: 2022-01-16 02:08:59

Hey, happy new year everyone! I'm hoping that 2022 will bring many positive changes for myself and whatever you, reader, may need!

### Goals
With that said. I have some goals I want get down (in no order) and made known:
- Job search
- New job (part/full time, remote + benefits, pays $35k+/$70k+)
- Regular Open Source Contributions
- Get really comfy with JS
- Reach out to working devs in different roles, see what yall are up to and where I fit in!
- Document my journey

### How I'm doing this:
I want to get some learning in before diving head first into the job search with my bootcamp. So I'm doing 100daysofcode! What's my project pool looking like? Well,
- I'm in a 6-week bootcamp that's working on freeCodeCamp's JavaScript Algorithms and Data Structures Certification.
- I'm also like 75% done with the Responsive Web Design Certificate on fCC! I started in 2017 and I think I just want to finish it.
- From there, I would switch to working on frontend mentor challenges for my js skills. 
- I'd also like to keep my github active as well. Open source contributions and frontend mentor challenges will def help with that.

### The rules:
Check out [100daysofcode's website!](https://www.100daysofcode.com/) 

I've also followed the tag on here. **My official start date is JAN 11! End date is APRIL 21!** 

I'm planning a weekly-ish update (Tuesday/Thursdays) will prob be my best bet. ~~I'll burn myself out trying to post a daily update but I think I could keep a good log going and the post one big chunk. We'll see. But updates will be weekly, _at least._~~ Scratch that, I'm forking the 100 days of Code repo right now, I can keep my github active by logging my journey daily and code! 

These articles will be a more weekly thing, unless I'm confused on something, or need more space to flesh out some thoughts.

I think I want to comment on other's doing the 100 challenge as well. Just to encourage and interact with others doing the challenge! :)

### What about you?
Feel free to reach out and say hey. I'd love to hear how it's going for you and meet others on their journey :)
DUNIA PROGRAMING SANGAT DIBUTUHKAN
Tags: career, cybersecurity
Published: 2022-01-16 02:01:53

 Oke guys,selamat datang kembali di laman Dev Community gua ya🤗
  
   Kali ini gw mau membahas seputar "Dunia Programing"💻
  Seperti yang kalian ketahui bahwa di jaman sekarang ini, era technologi sudah sangat mendominasi kehidupan manusia sehari hari📲
    
   banyak perusahaan-perusahaan kecil🏨 maupun besar🏢 juga mengandalkan era teknologi ini, sebagai wadah mereka dalam memasarkan atau meng-iklankan produk-produk mereka🔄, melalui layanan situs website atau blogging untuk mencakup minat seluruh konsumen lebih banyak dan dengan cepat serta lebih efisien.Karena hal tersebut juga, banyak perusahaan yang melirik atau membutuhkan jasa seorang Developer situs website/blogg,atau programmer sofware, yang dapat membuat aplikasi, khusus mencakup dari bisnis online perusahan tersebut (Mis:aplikasi toko pedia dan shopee) untuk pemasaran yang mencakup lebih banyak konsumen lewat pasar online.

    Hal ini dapat dipandang sebagai sebuah peluang yang sangat menjanjikan bagi kamu yang hebat dalam "bahasa pemprograman atau coding" dan jika kamu juga dapat membuat laman website atau aplikasi sofware yang sangat di butuhkan ,maka tidak dapat dipungkiri bahwa hal ini sangat menjanjikan dengan laba incomr yang sangat besae (karena jasa developer/programmer ini terbilang sangat langka,hanya sedikir orang yang mampu menguasainya)
Great chat with Devon on his new podcast DEVCODER TV
Published: 2022-01-16 00:55:07

I've been following Devon's journey for a while while I lurk around Career Karma.

When I heard he was starting a podcast, I reached out - and guess what! I got to be the first guest.

It was really nice to finally meet the real human and not just the avatar - and I think we had a great talk / and that you'd like it.

@sherifferek Talks with Devon Curtis on DEVCODER TV: [The Mindset of Becoming a Developer](https://anchor.fm/dev-codertv/episodes/Episode-1-Derek-Wood---The-Mindset-of-Becoming-a-Developer-e1d0gnv) Listen here!

: )
Beacon Scanner
Tags: adventofcode, programming, algorithms, computerscience
Published: 2022-01-16 00:53:33

## [Advent of Code 2021 Day 19](https://adventofcode.com/2021/day/19)

## Solve for X where:
`X = the number of beacons`

## Our input is:
- A multi-line string

## The input represents:
- A collection of nearly 40 scanners
- For each one, a list of ~25 `x,y,z` coordinates...
- ...one for each beacon's location relative to that scanner...
- ...and only of the subset of beacons that are positioned within a 1,000 point 3D perimeter

## What makes this challenge difficult
- As stated above, only relative positions are given
- We don't know the exact positions of any scanners
- Of the ~25 beacons per scanner, only 12 coordinates will overlap with one other scanner's beacons

## What makes this challenge exponentially more difficult
- Each of the scanners could be in any of 24 rotations and orientations around each of the `x,y,z` axes

## All of the ways I felt intimidated by this challenge
- The description was the longest encountered in the series thus far, even after Days 23 and 25
- This reminded me of Day 22, in which I recall throwing in the towel after failing to grasp any sort of possible solution
- I struggle to visualize 3D areas without having photographic references.
- The thought of looping through each scanner's coordinate list and comparing each one to every other scanner's full coordinate list seemed inefficient, sloppy and wrong...but I can't think of any other way to solve this
- The anticipated arithmetic, geometry and physics seemingly involved in calculating distances and validating a variety of object alignments
- I couldn't even understand the example offered in the instructions, or how the author's conclusions were correct or arrived upon
- The [Reddit Solution Megathread](https://www.reddit.com/r/adventofcode/comments/rjpf7f/2021_day_19_solutions/) for this day housed comments that confirmed my lack of STEM knowledge likely required to even understand a solution to this challenge, let alone writing an algorithm that could solve it, too

## Pressing skip for my own wellbeing
I'm not prepared, or excited, to attempt this puzzle right now.

And since this isn't homework, nor am I being graded - in fact, this is supposed to be a fun project to keep my mind sharp - I vote to skip to the next (nay, previous) day.

Sad face now. But it's important to admit when you're not mentally equipped to attempt a puzzle.
What is BuildContext in Flutter
Tags: flutter, buildcontext, mobile
Published: 2022-01-16 00:24:25

If you're just picked up flutter, you must have written the word **buildcontext** more than a dozen times. If you don't know what it means and what it does, here's a quick explanation for you

## Widget trees
While learning flutter, you must have been told that everything in flutter is a widget, this is true to some extent but that is out of context here. These widgets are stacked together to form a widget tree. Let's take vuejs for example. You build micro components and stack them together to form a single tree, same in react, svelte, angular and so on. 
Applying this ideology in flutter, your texts, buttons, cards, columns all form the widget tree, with some members having sub trees. You cant have a tree without a root, and in our case a root widget. From these root widget we stack our small widgets to form our app.


Each widget has its own buildcontext. The text, button scaffold all have a unique buildcontext once created. This buildcontext is used to to track each widget in the tree and locate them and their position in the tree. 
In our basic example below,

```

    Scaffold(
      body: Center(
        child: Text("Home"),
        ),
      ),
    );
  

```
the Scaffold is the root widget with its unique buildcontext, its descendant the center widget has its unique buildcontext and same goes for the Text widget inside the center widget.

The widget tree rendered by a widget is returned from the build method, so for our previous stack, its build function returns it's widget tree alongside its buildcontext in order.

```
build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text("You are Logged in succesfully"),
        ),
      ),
    );
  }
```
For basic projects like the counter app, the root widget will be the MyApp widget and from it comes the widget tree. The picture below is a profiler and debugger for dart called. For better performance while coding, start by installing the flutter and dart extensions on vscode.


![Dart devtools profiler image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amhawngfcausrnmcxaf0.png)


We have seen that BuildContext is crucial in understanding how Flutter works. It helps to order our widget tree behind the scene in their hierarchical order. To build apps confidently, we need to understand every single concept of the flutter framework. 
Follow me on [GitHub](https://github.com/Utitofon-Udoekong) for real implementations on flutter, vuejs and your favorite frameworks
A Clean Way to Conditionally Render Components
Tags: javascript, webdev, react, typescript
Published: 2022-01-16 00:03:24

Today, I want to share a clean way to conditionally render child components while using React. It's very simple.

Live Demo:
https://codesandbox.io/s/if-component-demo-9iipl?file=/src/App.js

**Before**

```jsx
function App(){
  // ...
  return <div>
      {someCondition?
      <SomeChildA>
        <div>Some Contents</div>
        <div>Some Contents</div>
        <div>Some Contents</div>
      </SomeChildA>
      : 
      <SomeChildB>
        <div>Some Contents</div>
        <div>Some Contents</div>
        <div>Some Contents</div>
      </SomeChildB>}
    </div>
}

```

**After**
```jsx
function App(){
  // ...
  return <div>
      <If condition={someCondition}>
        <SomeChildA>
          <div>Some Contents</div>
          <div>Some Contents</div>
          <div>Some Contents</div>
        </SomeChildA>
      </If>
      <If condition={!someCondition}>
        <SomeChildB>
          <div>Some Contents</div>
          <div>Some Contents</div>
          <If condition={someOtherCondition}>
            <NestExample/>
          </If>
          <div>Some Contents</div>
        </SomeChildB>
      </If>
    </div>
}

```

**\<If/\> Component**

```jsx
function If(props) {
    return props.condition ? <>{props.children}</> : null;
}
```

Thanks for reading! Have a nice day!
SQL Injection
Published: 2021-11-25 16:34:24

#What exactly is SQL injection (SQLi)?

SQL injection is a web security flaw that allows an attacker to meddle with database queries made by an application. It generally enables an attacker to examine data that they would not otherwise be able to retrieve. This could include data belonging to other users or any other data that the programme has access to. In many circumstances, an attacker can alter or remove this data, resulting in long-term modifications to the application's content or behaviour.


An attacker can escalate a SQL injection attack to compromise the underlying server or other back-end infrastructure, or launch a denial-of-service attack in some cases.




#What are the ramifications of a successful SQL injection attack?

Unauthorized access to sensitive data, such as passwords, credit card information, or personal user information, can arise from a successful SQL injection attack. SQL injection attacks have been the cause of many high-profile data breaches in recent years, resulting in reputational damage and regulatory fines. In some situations, an attacker can get a persistent backdoor into an organization's systems, resulting in a long-term compromise that can go undetected for a long time.



##SQL injection vulnerabilities, attacks, and tactics come in a wide range of flavors and appear in a variety of contexts. Among the most prevalent SQL injection examples are:

-->Retrieving hidden data, in which you can change a SQL query to 
   retrieve more results.
-->Subverting application logic is the process of changing a query 
   in order to interfere with the application's logic.
-->UNION attacks, which allow you to retrieve data from many 
   database tables.
-->Examining the database, where you can extract information about 
   the database's version and structure.
-->Blind SQL injection is a type of SQL injection in which the 
   results of a query you control are not returned in the 
   application's answers.

##Example:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8u6cc8nex0mcd72ncpl.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i60z298ymb5flm88pel.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq0d25f6e4795m31qu7u.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e72u24t11n14f39ghif.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jb6gcwywu8omx0rcmz1c.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldc0cbekd8e0lxj3eeqz.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39gbqwnw7wq9ixykjrvj.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkjmo69w5ui6yfu1hqh7.PNG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7eeysqww8xlsqsko29mo.PNG)
Playwright: Wordle, with no hands!
Published: 2022-01-19 15:09:30

---
title: Playwright: Wordle, with no hands!
published: true
date: 2022-01-16 00:00:00 UTC
tags: 
canonical_url: https://www.tomcools.be/post/jan-2022-playwright-wordle/
---

Using Playwright to automatically play Wordle. I recently decided to give UI Automation another try live on Twitch. I’ve used Selenium in the past but that always felt like a hassle. So this time, I wanted to try out a new competitor on the scene of UI Automation Libraries: Playwright. And what better way to get a feel for a library then by using it in a fun project. As this is the point in time where the online game Wordle is immensely popuplar… why not try and automate that?

See full article at: https://www.tomcools.be/post/jan-2022-playwright-wordle/
What is the purpose of Interface used in other contracts as parameters
Tags: solidity
Published: 2022-01-15 23:40:54

I have the code for example this one..
pragma solidity ^0.8.7;
// SPDX-License-Identifier: MIT

import "@openzeppelin/contracts/token/ERC20/utils/SafeERC20.sol";

contract FeeCollector  {
    address public owner;
    uint256 public balance;
    
    event TransferReceived(address _from, uint _amount);
    event TransferSent(address _from, address _destAddr, uint _amount);
    
    constructor() {
        owner = msg.sender;
    }
    
    receive() payable external {
        balance += msg.value;
        emit TransferReceived(msg.sender, msg.value);
    }    
    
    function withdraw(uint amount, address payable destAddr) public {
        require(msg.sender == owner, "Only owner can withdraw funds"); 
        require(amount <= balance, "Insufficient funds");
        
        destAddr.transfer(amount);
        balance -= amount;
        emit TransferSent(msg.sender, destAddr, amount);
    }
    
    function transferERC20(IERC20 token, address to, uint256 amount) public {
        require(msg.sender == owner, "Only owner can withdraw funds"); 
        uint256 erc20balance = token.balanceOf(address(this));
        require(amount <= erc20balance, "balance is low");
        token.transfer(to, amount);
        emit TransferSent(msg.sender, to, amount);
    }    
}

In the function transferERC20() it is passing IERC20 as a parameter which which came from the imported eRC20.sol file. So my exact Question is that what is the purpose of the interface in the contract parameters because We cannot define any constructor in a interface or we can actually use any function for the output as we cannot define the functions in a interface. I saw several code out there using interfaces in a parameters of the other contract function.
Documentation
Published: 2022-01-15 23:39:29

I got a new code project challenge this week. As part of it they want a document to explain what I did and why.  I'm working on building the project and documenting it as I go. 

Writing for this blog has helped me with that. Once I submit the project I'll do a write up on what I learned. I've got some good notes so far and it helps me think out my code.
We made a website to easily share links between our devices.
Tags: webdev, utility, productivity
Published: 2022-01-15 23:31:25

My partner and I made a website to make us easily share links between our devices.

https://www.linkshared.io/


## Backstory

Many times when we found something interesting and wanted to share a link from one's phone or laptop to her desktop so we can both watch it on the big screen, we had to send the link by email, or sent to her phone via some app and she had to copy the link from her phone to the PC, Or we have to download some apps, etc.. The process was really annoying.

Therefore, we decided to make a website that can allow people share link by simply visit our webpage.

## How it works:

This webpage will hold the shared link for 2 minutes, for now, and people can share the link via a share code so other people can access the shared text.

Steps are very simple:
1. Share your text on the website.
2. Use the share code to get your text on other devices. If the text contains a URL, website will detect it and extract the link for you.

## How we made it & Costs

* We used NextJS to implement both the frontend and backend API.
* We opened a free Redislabs account so we can host our cache.
* We used the free hosting service provide by Vercel.
* We brought a domain name on Vercel for $70/yr.

## Why a two minutes limit?

1. We don't want to make a cloud storage.
2. We don't want to pay for a cloud storage.
3. In most use cases, this webpage just works like clipboard, so no long term storage is needed.
4. We don't want to pay for a cloud storage.

## Why don't just use a chat app?
* We're using WeChat, their desktop version login is annoying.
* We don't like to download unnecessary apps in our phones and PCs, and people are using different apps, so a website can avoid installing unwanted apps.

> We really hate the trend that everything needs an app to use nowadays.


## Thank you!
Please feel free to leave your comment!