teleren/devto huggingface dataset:
All about SIEM
Tags: applicationsecurity, security
Published: 2020-04-11 16:18:32

SIEM stands for "Security Information and Event Management". It is a set of tools and services that offer a holistic view of any organisation's information security. It works by combining two technologies: Security information Management(SIM), which collects data from the log files and runs an analysis on the security vulnerabilities and reports them, and Security Event Management(SEM) which monitors any system on a areal-time basis and also keeps the network admins notified about the threats. SIEM is used to identify threats and anomalies in the network, cyber attacks from gigs of data.

__SIEM requirement in Cyber Security__
__Cyber Security Incident detection:__ SIEM is the primary tool used in teh detection of security incidents by collecting logs from all the data sources across the network and triggers an alert on successful match of condition defined in the correlation rule. In other words, it triggers an alert in case any network anomaly is detected in the network.

__Regulatory Compliance:__ Its is also used to comply with many security compliances like, PCIDSS (Payment Card Industry Data Security Standard), ISO, HIPPA and ensure that the company assets within the network meet the requirement of the compliance.

__Effective Incident Management:__ Dashboard logging, Search Queries, reports are some of the features that SIEM tools provide which allow the security professionals to handle the security breaches.

__SIEM Architecture:__
__Receiver:__ The main responsibility of this component is to get the logs from all the data inputs like windows OS, linux, application, routers, firewall, VPN servers etc. It is also meant for parsing the logs, normalisation and aggregation.

__Manager:__ This is the heart of any SIEM architecture. It has a correlation engine where we define a correlation rule where we match a specific rule and trigger and alert based on the match. It is a centralized management to identify and monitor different cyber attacks based on the condition which we define in the rule.

__Logger:__ This is a storage device to store the past events and triggers alerts. It is also used to store data for a longer period of time in case required, with an option to configure the retention period of data based on the business needs.

Some of the SIEM platforms provided by different vendors in the market:
HP ArcSight
1) RSA Security Analytics
2) IBM Security QRadar
3) Splunk
4) McAfee Nitro
5) LogRhythm
6) Solarwinds
7) Securonix
✒️ Markdown Cheat-Sheet [PDF + Infographic]
Tags: beginners, inthirtyseconds, html, github
Published: 2020-04-11 16:10:26

**Markdown** is a popular Markup Language. Several static site renderers like Gatsby take in markdown and split out web pages. 

Dev.to uses markdown for its blog posts. I use markdown to take notes. _Github_ uses markdown in Gists, Pull Requests, Issues and README files.

In this cheat-sheet, I have selected the most used markdown syntax.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5zhubbpov3m3ly9a1t9c.png)

📁 [Download](https://github.com/godcrampy/cheat-sheets/blob/master/markdown/markdown-cheatsheet.pdf) the pdf version of this cheatsheet
🌟 All my cheat-sheets are in this [repo](https://github.com/godcrampy/cheat-sheets/) (Star it!)
🚀 Find me on [Instagram](https://www.instagram.com/godcrampy/) | [Github](github.com/godcrampy) | [Twitter](twitter.com/godcrampy) | [Website](sahil.surge.sh)
😄 Have a wonderful day!
I created an open-source anime quote API 🚀
Tags: showdev
Published: 2020-04-11 16:04:04

---
title: I created an open-source anime quote API 🚀
published: true
tags: showdev
---
Website:  https://anime-chan.herokuapp.com  :tada: 
Repo :  https://github.com/RocktimSaikia/anime-chan :rocket: 

I am creating an open-source anime quotes API. For the last couple of weeks, I have been busy mostly on my internship which will end in June. Even tho I enjoy working there. I also wanted to work on a fun side project during these times.
So I started working on this anime quote API. which is a fully open-source project. I created a bot that crawls the web and scraps any anime quotes if finds. After scrapping; it directly stores the data to an online MongoDB database. Till now it has scrapped and stored over 8000+ anime quotes on the database.
[Note: I have not  made the bot open source, only the API]

After that process. I started working on the actual API which uses `node` on the backend and `express`  as it's framework. Right now the API routes are limited and will be extended in the future.

Since this is an open-source project you can also find and submit any issue and start working on it to improve the API. :rocket:
Chrome extensions to boost productivity
Tags: beginners, productivity, webdev, codenewbie
Published: 2020-04-11 15:19:14

We all are trying our best to be productive during this lockdown/quarantine due to the COVID'19 pandemic .

But it's tough to not get lost in a rabbit hole on the Internet.

So here I have got a few chrome extensions that will boost your productivity by removing distractions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i44fjwex965qqgo32v4v.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w241r479hlvejltmv4hi.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vmlkcbsgzk0ugblmq152.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uz6gsbsp3nhttcunsd11.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rdetcmuzq1l7lelhrubv.png)
Roll Your own One-Line Math.average Function Using Array.reduce
Tags: javascript, webdev, tutorial, beginners
Published: 2020-04-11 15:06:31

---
title: Roll Your own One-Line Math.average Function Using Array.reduce
published: true
description: A quick example of using array.reduce to roll your own one-liner average calculation
tags: javascript, webdev, tutorial, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/17rhj44zcrbdf6x4arkb.jpeg
---

Just a quick example of using array.reduce to roll your own one-liner average calculation!

```javascript
const average = (...nums) => 
  nums.reduce((a, b) => a + b, 0) / nums.length;

console.log(average(1, 2, 3, 4));
// 2.5
```

Cheers!
[Tutorial Git] git rm: Excluindo arquivo do repositório
Tags: git, remove, rm, braziliandevs
Published: 2020-04-11 14:54:52

Para apagar um arquivo no repositório Git, fazemos

```
$ git rm <nome do arquivo>
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.
- **rm**, do inglês *remove*, para remover o arquivo.
- digite o nome do arquivo sem os sinais **< >**.

Exemplo:

Vamos deletar o arquivo **playstation.html** do nosso repositório.

![deletando arquivo do working directory](https://dev-to-uploads.s3.amazonaws.com/i/vuccle446myyv63tkxip.png)

Para finalizar, basta fazer o **[commit](https://dev.to/womakerscode/tutorial-git-enviando-arquivos-para-o-repositorio-git-1k91)** dessa remoção.

Caso você tenha excluido o arquivo de outra maneira, ao digitar **git status**, o Git irá informar sobre o arquivo.

Exemplo:

Excluímos o arquivo **gba.html** diretamente no diretório.

![arquivo excluído](https://dev-to-uploads.s3.amazonaws.com/i/0ml2ukdiesx9zmfivdsa.png)

Então, para registrar essa exclusão, podemos usar os comandos **git add** ou **git rm**. Assim, temos:

![registrando a exclusão do arquivo no git](https://dev-to-uploads.s3.amazonaws.com/i/ayh78bcihiquu3yu6c6h.png)

Em seguida, fazemos o **[commit](https://dev.to/womakerscode/tutorial-git-enviando-arquivos-para-o-repositorio-git-1k91)**.

Para excluir uma pasta/diretório não vazio, basta incluir a flag **-r**, de recursividade, para incluir toda a árvore do diretório. Assim:

```
$ git rm -r <nome do arquivo>
```
AutoComplete Component with Vue Composition API in VueJS
Tags: vue, javascript, webdev, video
Published: 2020-04-11 14:49:20

Simple AutoComplete Component built using a custom built `useAutoComplete` hook I built using the [vue composition api](https://github.com/vuejs/composition-api). Since I am quite fond of [Ionic Framework's Web Components](https://ionicframework.com/docs), I used the components to construct a clean presentation of the work.

The hook takes in two parameters, `options` which is the array of data to search, and `optionKey` which is what property in the array of objects to search on.

I this example I have loaded in some data from [RandomUser.me](https://randomuser.me/) to populate the array of data and I am used the `email` property as my filter.

The dropdown that appears in the `ion-card` component from [Ionic Framework](https://ionicframework.com/docs); and the rest of the magic is accomplished using `css` with some position.

```javascript
import { toRefs, reactive } from "@vue/composition-api";

/**
 *
 */
const useAutoComplete = (options, key) => {
  let state = reactive({
    userInput: "",
    filteredSuggestions: [],
    suggestions: options,
    selectedItem: {}
  });

  let selected = _item => {
    state.userInput = _item[key];
    state.filteredSuggestions = [];
    state.selectedItem = { userInput: state.userInput, item: _item };
  };

  let onChange = _event => {
    let i = state.userInput;
    state.selectedItem = { userInput: state.userInput, item: null };
    if (i.length === 0) {
      state.filteredSuggestions = [];
      return;
    }
    const r = state.suggestions.filter(
      suggestion => suggestion[key].toLowerCase().indexOf(i.toLowerCase()) > -1
    );
    console.log(r);
    state.filteredSuggestions = r;
  };
  return {
    ...toRefs(state),
    selected,
    onChange
  };
};

export default useAutoComplete;

```
{% youtube S-XTgVE7YqU %}
####[Full Source Code](https://codesandbox.io/s/vue-composition-api-typeahead-search-m2peb?file=/src/components/AutoComplete.vue:536-551)
How to render the value in array one by one?
Tags: react, javascript
Published: 2020-04-11 14:36:46

Hi. I'm student and studying English.
i'm making react project to memorize English words.
That project's algorithm is 
1. get words to array.
2. if start button is clicked, run start function.
start function : repeat(words.length) {
render words[i] while 4s;
render nothing while 5s;
}

how to make it? i failed to do. please somebody help me.^^
What’s your alternative solution? Challenge #19
Tags: javascript, codenewbie, challenge, learntocode
Published: 2020-04-11 14:34:17

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Calculate the sum of digits of a positive integer number

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge17

function sumDigits(n)
{
    var s = n.toString();
    var sum = 0;
    
    for(var char of s)
    {
        var digit = parseInt(char);
        sum += digit;
    }
    
    return sum;
}

var sum = sumDigits(1235231);
println("Sum: ", sum);

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
02: Front-end Development
Tags: webdev, javascript
Published: 2020-04-11 14:23:29

#*Front-end Development is my priority* 
The front-end developer is a fundamental part of any web team, working closely with back-end developers. 

Whereas the back-end developer focuses on the internal functioning of the application -  the “plumbing” 

**the front-end developer builds the interface that users see.**

----
##They are often in charge of:

1) Bringing mock-ups to life in a beautiful and consistent manner

2) Optimizing page loading time

3) Communicating with back-end developers for information exchange across the application

4) Using best practices to structure HTML, CSS, and JavaScript code as 
 components

5) Writing tests to ensure the site’s front-end accounts for all possible 
   uses

6) Ensuring the maintenance and growth of a site’s front-end


---

- Analyze a project and choose a technical solution
- Design technical architecture using UML diagrams
- Create web projects with JavaScript
- Query a database that uses and stores information
- Use tools such as jQuery to simplify front-end code
- Implement unit and integration tests
- Write project documentation
- Optimize performance
- Create responsive interfaces
v-if vs v-show
Tags: vue, javascript, beginners, tutorial
Published: 2020-04-11 10:58:13



`v-if` & `v-show` are part of the in-built directive in [vue](https://vuejs.org/v2/guide/index.html), a **progressive framework** for building user interfaces.


Both directive play a very significant role when it comes to rendering data conditionally in [vue](https://vuejs.org/v2/guide/index.html).  Quite a few people may be able to spot out the difference as result of their experience over time with the directives.

But if paraventure , you happen not to understand this concept, this article got you covered.

**v-if**

With our basic knowledge of `JavaScript`, the `if` condition is not strange , with that being said, the `v-if` is a conditional directive in `vue` that is used to **add** or **remove** content from the [DOM](https://vuejs.org/v2/guide/render-function.html).  The content will only be rendered if the directive’s expression returns a truthy value.

```html
<p v-if ="true">Hello</>
<p v-if ="false">world</>

```
```
Hello
```
**v-show**

This is a conditional directive in `vue` that renders based on the CSS `display` property. 

In other words, it is used to **show** or **hide** content in the `DOM` . what this means is, whenever we want to change content frequently in our application, the `v-show` is very handy, for e.g a navbar toggle to show and hide menu bearing in mind that our content is still very much part of the `DOM`


```html
<p v-show="false">Hello</>
<p v-show ="true">world</>

```
```
world
```

To practice more , visit vue [documentation](https://vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt)

Code sandbox sample [demo](https://codesandbox.io/embed/github/ojudith/vue-in-action?codemirror=1) 


Original post was published on my [blog](https://judyblogbeta.netlify.com/2020-v-if-vs-v-show/)
Using HTML, CSS, and JavaScript to Create OBS Plugins for Your Live Streaming Sessions
Tags: webdev, javascript, livecoding, html
Published: 2020-04-11 14:21:08

A few days ago, I decided to give a try to live coding on Twitch. I developed a bot for one of the forums I visit regularly and it was a great experience, a lot of people visited the streaming and the big majority stayed for a while.

Because of that, I have been looking for ways to improve the experience of my live coding sessions and then I thought that one of these ways could be creating my own plugins for OBS (Open Broadcaster Software).

I found out that OBS plugins can be written in C++, but that's overkill! Then I thought that maybe there's another way using web technologies (HTML, CSS, and JS), that's when I discovered the `Browser` source.

![Browser Source](https://dev-to-uploads.s3.amazonaws.com/i/nt242vt70j7e4sonz54s.png)

This type of source allows you to use an internal browser that supports modern web capabilities, just point it to an URL or a local HTML file and start building a dynamic experience for your viewers!

![Browser Source Properties](https://dev-to-uploads.s3.amazonaws.com/i/2b2yyj2ag6n58l1z3s7t.png)

Once I got to know about this, I decided to use [Preact](https://preactjs.com/) with [HTM](https://github.com/developit/htm) and plain CSS as the stack to build my plugins. I believe that this stack rocks for this use case because it doesn't require a build step, just go ahead and use the platform!

Here's a GIF of my first OBS plugin, which loads the latest posts of my dev.to profile in case someone wants to read one of my publications after the stream finishes:

![Plugin that retrieves my latest dev.to publications](https://dev-to-uploads.s3.amazonaws.com/i/jy2zusgwrplz81yk3rey.gif)

After building my first plugin and seeing that this stack rocks, I have created a repository that you can use as a template to develop obs plugins with this stack: [HorusGoul/preact-obs-plugin](https://github.com/HorusGoul/preact-obs-plugin).

{% github HorusGoul/preact-obs-plugin %}

---

_Follow me on [Twitter](https://twitter.com/HorusGoul) if you want to know about my future articles, projects or whatever I come up with!_
Github Sale in 2018
Tags: github, microsoft
Published: 2020-04-11 14:05:43

Nothing new - but I am currently thinking about some alternatives, and for me, knowing that Github is now owned by Microsoft, this is a reason to leave Github.

What do you think?

It's a shame that successful projects are bought by big companies -- obviously, money is still tempting, who could resist billions of bucks... 

This especially shameful as M$ obviously want to gain control over open source software.

Are there any alternatives to github?

https://www.heise.de/newsticker/meldung/Microsoft-kauft-GitHub-fuer-7-5-Milliarden-US-Dollar-4067633.html
01: Data Structures and algorithms 
Tags: javascript, computerscience
Published: 2020-04-11 14:04:18

#*Why are data structures and algorithms so important in computer science?* 

Data Structure :
A data structure is a particular way of organizing and storing data in a computer so that it can be accessed and modified efficiently. More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to the data. 


---
1) Take some input
2) Process it
3) Give back the output.

The input can be in any form, for eg while searching for directions on google maps, you give the starting point and the destination as input to google maps, while logging in to facebook, you give your email and password as input and so on.

Similarly, in the third step, the computer application gives us output in some form or the other.

To make this process efficient, we need to optimize all the three steps. As you can guess, the most we can optimize is the 2nd step, which is where we have Data structures and algorithms.

Data structures refers to the way we organize information on our computer. With a slight thinking , you can guess that the way we organize information can have a lot of impact on the performance. Take for example, a library. Suppose, you want to have a book on Set Theory from a public library, to do that you have to first go to the maths section, then to set theory section. If these books are not organized in this manner and just distributed randomly then it will be really a cumbersome process to find a book on set theory.

This is the way a librarian organizes his books(data) into a particular form (data structure) to efficiently perform a task(find a book on set theory).
 
In this manner we computer scientist process and look for the best way we can organize the data we have, so it can be better processed based on input provided.


--- 

##What actually is a computer?

A machine that:

- Takes some input
- Process that input
- Output the result
- Stores that

Algorithms are everywhere. Anything you do, can be broken down into small steps and that is the Algorithm. Suppose you want to find a word from a Dictionary. Algorithm involved is:

1/ Find the Dictionary
2/ Search for the word
3/ Look for meaning once you found the word.
4/ In the above steps, searching can be broken down further.

* Now what is a data structure?

**Data Structures helps to store data efficiently. A dictionary stores words. And just think if thew words were stored in a random order, it would have become impossible to find a word from the dictionary**

**The dictionary stores words in Alphabetical Order. This is the data structure a dictionary follows. The algorithm for searching a word in a dictionary is called Binary Search**

--- 

[Do you need to know algorithms for frontend development?](https://www.reddit.com/r/Frontend/comments/3euhau/do_you_need_to_know_algorithms_for_frontend/)
Getting familiar with Objects.
Tags: javascript, beginners, node, writing
Published: 2020-04-11 14:00:01

Objects are everywhere in JavaScript. Getting more knowledge of objects will definitely help you at some point in your journey. In this post, we will discover some properties and methods of objects that most the developers don't know about or didn't find useful.

I hope you are already familiar with the syntax of creating an object.

```javascript
let obj = { key: "value" }
```

But did you know we can make lots of customizations on these keys and values?

`Object.defineProperty` method gives you the power to control the behavior of a property. Let's see how it works.

```javascript
let obj = {}

Object.defineProperty( obj, "a", {
    value: 1,
    writable: false,
    configurable: true,
    enumerable: true
} )
```

`defineProperty` takes three arguments.

1. The object in which you are trying to create a property.
2. Name of the property.
3. A configuration object.

Now let's talk about configuration object.

## value
Value could be any valid value you want to set on the key (a).

## Writable
If you set writable as false. You will not be able to edit the value.

```javascript
obj.a = "new value"   // Oops, not allowed.
```

## Configurable
If we set `configurable` as true. We can change the behavior at any time with the same `defineProperty` method, but if you set it to `false`, you will not able to change it again. It's a one-way operation.

## Enumerable

If we set enumerable to false, it will not be shown in enumerations like `for...in` loop.

Now, let's take a look at some builtin methods that prevent the extension of an object.

## preventExtensions

As its name suggests. It will prevent you from setting more properties on an object.

```javascript
let obj = { a: 1 };

Object.preventExtensions( obj );

obj.b = 2;   // in strict mode it will throw an error.

console.log( obj.b )   // undefined
```

## Seal

This method works the same as `preventExtensions`, but it makes all existing properties as `configurable: false`. So you can't add new properties and also can't reconfigure it. Again one-way operation.

```javascript
let obj = { a: 1 };

Object.seal( obj );

obj.b = 2;   // in strict mode it will throw an error.

console.log( obj.b )   // undefined
```

## Freeze

This is the highest level of immutability. Freeze set all "data accessor" of an object as `writable: false`.

```javascript
let obj = { a: 1 };

Object.freeze( obj );

obj.b = 2;   // in strict mode it will throw an error.

console.log( obj.b )   // undefined
```

These are the methods I found useful and interesting. If you know some more interesting methods, please comment down below. I will back with another exciting post, until then Bye.

![alt] (https://media.giphy.com/media/QVUktPB3lA4ooKhYa4/giphy.gif)
Automate Conversion of your CODE to PNGs with this GITHUB ACTION 😎
Tags: showdev, opensource, automate, devops
Published: 2020-04-11 13:41:32

I've create a Github Action to automate the conversion of source files to PNG snaps.

This action snaps all the source files in a particular folder and saves them into another folder inside the workflow.

Marketplace: https://github.com/marketplace/actions/code-snap-action
Repo Link : https://github.com/sharadcodes/code-snap-action