teleren/devto huggingface dataset:
Web server attack tools
Tags: webserver, tools, cybersecurity, ethicalhacking
Published: 2021-05-31 01:02:25

👨‍💻Web server attack tools🗳

Some of the common web server attack tools include;

Metasploit– 
this is an open source tool for developing, testing and using exploit code. It can be used to discover vulnerabilities in web servers and write exploits that can be used to compromise the server.

MPack– 
this is a web exploitation tool. It was written in PHP and is backed by MySQL as the database engine. Once a web server has been compromised using MPack, all traffic to it is redirected to malicious download websites.

Zeus– 
this tool can be used to turn a compromised computer into a bot or zombie. A bot is a compromised computer which is used to perform internet-based attacks. A botnet is a collection of compromised computers. The botnet can then be used in a denial of service attack or sending spam mails.

Neosplit – 
this tool can be used to install programs, delete programs, replicating it, etc.
VSCode Property Snippet With XML Doc Comments
Tags: dotnet, devops, vscode, csharp
Published: 2021-05-31 00:52:28

I wanted a way to make it easier to generate C# XML code comments for properties for Visual Studio Code ("VSCode"). Working with doc comments in VSCode is painful.

There is no ghost-doc extension equivelant for C# in VSCode.

The closest extension for generating comments is the [docomment extension][do_comment] which is being replaced by [omnisharp][omnisharp_patch] functionality.

If you run analyzers for code documentation; constructors, properties, and other public code fragments require specific phrases and required XML elements.

On windows, you can fall back to Visual Studio.  If you're running your dev-environment on Linux, using Visual Studio isn't an option.

Visual Studio Code has documentation for [user-defined code snippets][vscode_snippet].

I found a post on how to split camel-cased words into lower-cased fragments on [stack overflow][stackoverflow_snippet_casing]

Using the above, I was able to cobble together the snippets below.

```json
{ 
    "prop": {
        "prefix": "prop",
        "body": [
            "/// <summary>Gets or sets the ${2/([A-Z][a-z]+$)|([A-Z][a-z]+)/${1:/downcase}${2:/downcase}${2:+ }/g}<summary>",
            "/// <value>Property <c>${2:property}</c> represents ${3:description}.</value>",
            "public ${1:type} ${2:Property} { get; set; }"
        ]
    },
    "ctor-summary": {
        "prefix": "ctor-summary",
        "body": [
            "Initializes a new instance of the <see cref=\"$TM_FILENAME_BASE\"/> class."
        ]
    },
}
```

I hope this helps.

[stackoverflow_snippet_casing]: https://stackoverflow.com/questions/67566628/how-to-convert-snippet-placeholder-from-camelcase-to-snake-case
[omnisharp_patch]: https://github.com/OmniSharp/omnisharp-vscode/releases/tag/v1.23.8
[do_comment]: https://marketplace.visualstudio.com/items?itemName=k--kato.docomment
[vscode_snippet]: https://code.visualstudio.com/docs/editor/userdefinedsnippets
How to put the Learning in Public in practice
Tags: career, writing, tutorial, motivation
Published: 2021-05-31 00:48:15

Learning in Public is a powerful tool to improve your soft and hard skills.

In this tiny text, I will relate how I like to put into practice my learn in public. Feel free to tell me your ways to do it.

**Share**

Every solution you have found should be shared. A blog post, a video, study group, whatever. If you were with a problem and this thing helped you to fix it or find a way to go forward remember that today or in the future it will have people in your place. When sharing, you can make their life easier.

**Give Back**

For all those things above, give back to it the way you can. What do I want to say with this?

*   It is a blog post, you can give back by leaving a comment thanking the author
*   Give a clap if it is a medium blog post, or like if is Facebook, Twitter, etc.
*   Being a video you can do more, you can share it on other social media besides doing the other things already said. Throw it forward to reach more people.
*   Subscribe or follow the channel where you find your solution

**Get over your fears**

After I introduce the learning in public for someone, the most common is this person start to share their fears.

*   talking in public
*   talking with strangers on the internet
*   what people will say about my solution?

I’m sharing something that helped me, that I think is useful, and I can still learn better ways of doing the same thing.

If what I’ve shared is “wrong”, I will learn the correct or better way to solve my problem

**How this helps me**

We can do the learning in public normally in our days. But, one thing that helped me was to be aware of what it is and how it could improve.

After that, my network flow improved so much. I start to be more able to talk with people, make new connections. Also on business.

**Communication**

Communication is one of the most important things in our life and career.

Now how to speak can help you on both sides. Being an interview or a discussion about some theme.

**Finding solutions more easily**

Finding the solution to problems started to become a common and easier practice. The paths become known, as well as the ways to find new ones or create them.

**Start to teach**

Teach is a good way to learn too. To teach, with intelligence and knowing something you need to study twice or more times. Need to put in practice, make a POC that their idea works. And, when will teach these to someone it will be like a review from it.

Start putting these little things into practice, a little at a time. Learn from others, improve your ideas, share, and soon you will have your learning in public in practice as something normal in everyday life.

Follow me on twitter.com/daniloab\_
My journey through NextJS
Published: 2021-05-08 05:11:20

I recently graduated from the Flatiron School for Software Engineering. It was truly an experience in building on a foundation, namely Ruby, the beloved object-oriented programming language. At the end of the course, I found myself drawn to React, the Javascript-based library used to build-out interactive user interfaces. React is based on components comprised of Javascript logic, in self-contained "building-blocks" that are easy to compose and reuse as needed. React's true utility is templating data and efficiently rendering those templates to the DOM. From a visual learner's stand-point, being able to see a '<Navigation />' component and a '<Footer />' component in the editor brought the big picture into focus without a ton of code obscuring the greater vision for an application. 
In exploring where to go after graduation, I found out about NextJS through a tutorial offered by Wes Bos, a popular programming blogger, educator and developer. While my blog will follow my journey through this course, I want to emphasize the greater technical take-aways from what I learn rather than give a "review" of the program. So to start off, NextJS is a framework that acts like a wrapper for React components, offering greater capabilities like routing, pages, static or server rendering and image handling. Enter pages; the "pages" directory offered by the framework offers easier composition of applications and produces the literal pages of a website using file-system-based routing. Add a page to the directory and immediately get that route created as well. As a light comparison I'd like to show-off the logic used to set routes in a React project I did for Flatiron called Lookin' Sharp. Here's a look 
![React routing pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37rcddjlhh5586fotn5l.png)
All wrapped together are a Switch component, the Router component from React Router and then the individual components to be routed...somewhere in there. Not to mention the React container holding onto this big chunk of code, it's beginning to look like a needle in a haystack scenario figuring out how to get from page to page. Now here's a peek at what it takes to route with NextJS: 
![NextJS routing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnjkzyw690ukv9of9m7n.png)
Boom, we define them in the pages directory and we can already navigate to those pages and their content. Index, the sell page, the signin page all routed for you upon creation! I'm loving the advantages of NextJS and honestly can't wait to start building more applications with it!
Authentication, SSO, IAM, Federation
Tags: authentication, sso, iam, federation
Published: 2021-05-31 00:34:44

## Intro

Once I started implementing an authentication system, I found myself coming back to these terms again and again to separate their individual roles and purpose in the system. This article was created to serve as a quick reference.

### Authentication

- process of the Principal proving its identity to the System
    - Examples of Principal
      - application
      - computer system
      - human
      - hardware, etc
    - System is any computer system that requires identification before allowing access
    - System could be hosted on
      - server
      - device
      - browser, etc

### Single Sign On (SSO)

- characteristic of an authentication mechanism
  - that relates to
    - the user's identity being used to
      - provide access across multiple Service Providers
- allows a single authentication system to be used across multiple systems
- The single authentication mechanism could be
  - LDAP or such directory server
  - a system generating trusted token
  - Federation (see below)

### Identity and Access Management (IAM)

- the management of identity concerns within an information technology organization
- can include 
  - authentication of users and system
  - authorization of those users and systems
  - user provisioning
  - audit of identity systems
  - user repository management (like LDAP or Active Directory)
  - password policies and other concerns

### Federation

- common standards and protocols
  - to manage and map user identities
    - between Identity Providers
      - across org (and sec domains)
    - via trust rel (like dig sig, enc, PKI)
- a sub-discipline of IAM, but typically the same team(s) is involved in supporting it
- a type of SSO where the actors span multiple organizations and security domains

#### Reference

For a deep dive into the above (and more): https://medium.com/@robert.broeckelmann

#### Related

If you found this quick reference article useful, you may also benefit from
  - [Notes on OAuth 2.0](https://dev.to/rounakcodes/notes-on- 
oauth-2-0-14oh)
  - [Notes on LDAP](https://dev.to/rounakcodes/notes-on-ldap-513d)
Normal text box vs Magical text box
Tags: showdev, webdev, beginners, tutorial
Published: 2021-05-31 00:01:21

Last week I faced one problem in the HTML text area. it more about the user interaction with the text area component. In, this article I am going to cover the problem and solution.

##Magic text box
  We all know about HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element and behaviour. but, In the input have one problem is inside the text box large text not able to read properly. 

*Example:*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4j3940ywf2daz2rzf0l.jpg)

In this case in our mind comes ` This problem will solve replace Input element to Text area element. so, we able to read the text properly `.

Yes. but, inside the text area will come small text. so the text area will fill more space without having large content.

*Example:*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1snjlzdr5wxw1h093q1q.jpg)

####Solution conclusion 
  Use text area with increase height based on the content. now, solved the problem in both cases.

let see the implementation part using **react** and **typescript**.

```javascript
import React, { useEffect } from "react";

interface MagicTextBoxProps {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
  defaultValue?: string;
}

const ReactMagicTextBox = (props: MagicTextBoxProps) => {
  const textAreaRef = React.createRef<HTMLTextAreaElement>();
  const [value, setValue] = React.useState(props.value);
  
  /* Incase text area based on the content */
  const autoAlignment = () => {
    // Using ref to get the text area element
    const node = textAreaRef?.current;

    if (node) {
      node.style.height = "auto";
      node.style.height = node.scrollHeight + "px"; // Main part of the code
    }
  };

  /* On load check and incase the height based on the content */
  useEffect(() => {
    autoAlignment();
  });

  const inputDataChange = (
    event: React.ChangeEvent<HTMLTextAreaElement>
  ): void => {
    // On change every time check the text area content and height
    autoAlignment();
    const currentValue = event.target.value;

    setValue(currentValue);

    if (props.onChange) {
      props.onChange(currentValue);
    }
  };

  return (
    <textarea
      className="input-text"
      ref={textAreaRef}
      onChange={inputDataChange}
      rows={1}
      placeholder={props.placeholder}
      value={value}
    />
  );
};

export default ReactMagicTextBox;

```

That's all. This is how I solved the problem. In case you know any solution better than this. please, share the solution via a comment at the post bottom.

Refer to the below real-time example for more understanding.
`Inside the textbox use large content and test it. And, see the difference.`  
{% codesandbox react-magic-textbox-wulbc %}

Thanks for reading this post 🍻🍻🍻.  

Please, [subscribe](https://lakshmananarumugam.com/#/portal/signup) to my blog website to get my latest blogs and project directly into your mail inbox.
Why we use JS's Async functions. 
Published: 2021-05-30 23:16:12

An Asynch function is a function declared with the `async` declaration keyword. 

Another keyword often used in tandem with `async` is `await` which enables asynchronous promises to be written more simply by avoiding the explicit coding of a promise chain. 

before going any further, why are we interested in *asynchronous* JS anyways?

To get to where we're going we have to understand Javascript is a single threaded language - which means exactly it can execute one piece of code at a time - that's it. When we're doing things synchronously each process must complete and everything else gets *blocked* or essentially queued up until we can move past the current line of code being completed...seriously? **seriously**

Given the perceived demands and complexity of modern applications / browsers, users aren't going to simply wait around for your bulky code to execute. Think about image rendering for instance, this is paused until the stack is cleared and resolved essentially.

#Asynchronous JS##

To avoid the aforementioned 'blocking' we use async callbacks, which will start executing in the background, when its finished running the callback is called.

```
btn.addEventListener('click', () => {
  alert('You clicked me!');
```
the second param () is the callback function once the click is heard. The code above is arguably a more 'dated' way to be writing async code, I wouldn't be doing flatiron any justice if I didn't show you the worse way to do things first ^_^. 

##Promises

Promises are the 'newer' more modernized async code. For my project I'm grabbing 'card/deck' data from my API.

```
    getDecks(){
    
        fetch(this.baseDeckURL)
        .then(r => r.json())
        .then(decks => {
            decks.forEach(deck => {
                const d = new Deck(deck)
                d.addToDom()
            })
        })
        .catch(err => console.warn(err))
    }
```
fetch is taking in a single URL param, and returning a promise. 
The promise being an object which represents the (ideal) completion or perhaps failure of the async operation. Now, the fetch does technically have to `await` the result of our browser to complete the function like anything else. Essentially the queuing of the event allows the main code to finish so as to not block any further events. The name of the game here is to have your user experience be a smooth one, as opposed to being bogged down by code running and fetching, waiting for downloads and so on. In these simple terms we can understand the purpose of wanting to code our JS functions asynchronously.
error Command "webpack" not found
Tags: rails, webpack, errors
Published: 2021-05-30 22:35:06

```
[Webpacker] Compiling...
[Webpacker] Compilation failed:
yarn run v1.22.10
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.


error Command "webpack" not found.

Completed 500 Internal Server Error in 705ms (ActiveRecord: 0.3ms | Allocations: 27913)


  
ActionView::Template::Error (Webpacker can't find application.js in /home/fasa/clear/clusterpbx-manager/clusterpbx-manager/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
):
     6:     <%= csp_meta_tag %>
     7: 
     8:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     9:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    10:   </head>
    11: 
    12:   <body>
  
app/views/layouts/application.html.erb:9

```

add this to package.json, then **npm install**

```
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.0",
    "babel": "^5.8.23",
    "babel-core": "^5.0.0",
    "babel-loader": "^5.3.2"

```
LeetCode 220. Contains Duplicate III
(javascript solution)
Tags: algorithms, javascript
Published: 2021-05-30 22:31:41

###Description:
Given an integer array nums and two integers k and t, return true if there are two distinct indices i and j in the array such that abs(nums[i] - nums[j]) <= t and abs(i - j) <= k.

Return the maximum number of events you can attend.

###Solution:
Time Complexity : O(n^2)
Space Complexity: O(1)

```javascript
var containsNearbyAlmostDuplicate = function(nums, k, t) {
    for(let i = 0; i < nums.length-1; i++) {
        for(let j = i+1; j < nums.length; j++ ) {
            if(Math.abs(nums[i] - nums[j]) <= t && Math.abs(i - j) <= k) {
                return true
            }
        }
    }
    return false
};
```
Variables in a Ruby Class
Published: 2021-05-30 22:14:52

[source](https://www.tutorialspoint.com/ruby/ruby_classes.htm)

Ruby provides four types of variables −

**Local Variables** − Local variables are the variables that are defined in a method. Local variables are not available outside the method. You will see more details about method in subsequent chapter. Local variables begin with a lowercase letter or _.

**Instance Variables** − Instance variables are available across methods for any particular instance or object. That means that instance variables change from object to object. Instance variables are preceded by the at sign (@) followed by the variable name.

**Class Variables** − Class variables are available across different objects. A class variable belongs to the class and is a characteristic of a class. They are preceded by the sign @@ and are followed by the variable name.

**Global Variables** − Class variables are not available across classes. If you want to have a single variable, which is available across classes, you need to define a global variable. The global variables are always preceded by the dollar sign ($).
Blockchain Identification
Published: 2021-05-30 21:48:01

 In this blog I am going to discuss blockchain identity and what that consists of on the blockchain. It can be confusing, so hopefully this helps clarify some of the confusion.

 What is blockchain identity you might ask? Well blockchain identity is similar to a social security card, bank account or drivers license.  A wallet in this case is what establishes your identity on the blockchain. Lets break down some components that are contained in a wallet. A wallet has a private key, public key and wallet address.  **Private key:** is a secret number that allows you to spend Bitcoin or Ethereum for example. **Public key:** is a publicly shareable key that cannot be used to spend bitcoin. **Wallet Address:** is a unique identifier for your wallet.

Now that we know what a wallet is lets break down the different type of wallets. **Non-deterministic wallet:** a  wallet where private keys are generated from random numbers. **Deterministic wallet:** is a wallet where addresses, private keys and public keys can be traced back to their original seed words. **Hierarchical Deterministic wallet:** is an advanced type of deterministic wallet that contains keys derived in a tree structure. Each one of these wallets are used in certain situations. For example, if you have a web server that sells memes you would want to keep track of each transaction independently. To do this you would have to have a master public key and generate a sequence of sub-public keys, each connected with a transaction and put that on a public web server with no private keys. That would be an example of a hierarchical  deterministic wallet.

The blockchain has many layers when it comes to interacting with it. The wallet is crucial because in order to make transactions on the blockchain you need a wallet, but in order to use the wallet you have to understand how it works. I think of the wallet as my personal account that I only have control over. If I lose the account information then I can't or nobody else can access that information. It will be loss forever. That is why it is vital that you store your seed words in several places and make sure that you keep up with that information. You are basically your own bank with full control of your assets.

I hope that this makes block identity more clear. I will be discussing more about blockchain soon.

Happy coding!
Tepki
Published: 2021-05-30 20:44:47

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
Change author of every commit in Git repository
Tags: git, github
Published: 2021-05-30 20:41:41

Recently I needed to change the author of all the commits in the repository. And here is how I achieved that.

Created a file `edit_commits.sh` and put a script there.

```bash
#!/bin/sh

git filter-branch -f --env-filter '
CORRECT_NAME="Your Name"
CORRECT_EMAIL="yourcorrect@email.com"

if [ "$GIT_COMMITTER_EMAIL" != "$CORRECT_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" != "CORRECT_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags
```
Then saved it and launched by the command.
```
bash edit_commits.sh
```
And that's it. Enjoy!