teleren/devto huggingface dataset:
Linux security
Tags: linux, ubuntu, security, suse
Published: 2019-10-23 16:58:11

There are many softwares to secure your Linux box. You may think you are immune from bad malware, virus, actors. Well, nothing coul be further from the truth. So what can you do? Use some softwares to secure your box:

## AppArmor / SELinux

<a href="https://linuxtoko.com/app-armor/">AppArmor / SeLinux</a> tools let you harden your system to the file system level (And beyond). Which apps can access what directories, which app can access the internet and so on.

<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fgetintopc.com%2Fwp-content%2Fuploads%2F2014%2F03%2FSUSE-Linux-Free.jpg&f=1&nofb=1" alt="apparmor">

## ClamAV

<a href="https://www.clamav.net/">ClamAV AntiVirus</a> is a free, cross-platform and open-source antivirus software toolkit able to detect many types of malicious software, including viruses. 


<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F4.bp.blogspot.com%2F-1_xXEnvOLYQ%2FTuwZ6edxOzI%2FAAAAAAAAACY%2Fmz3gePdedmw%2Fs320%2FClamtk.jpg&f=1&nofb=1">

## Firejail

A tool to sandbox your apps. This is more "lightweight" than AppArmor. By runnning in a sandbox, the app can't do bad things outside of what it's supposed to do. Especially useful for web browsers.


## Firewalls

**UFW**

The UFW firewall can block access based on port. If you want to block certain ports (like SSH), you can with UFW. It doesn't allow per-application blocking, only port based blocking.

<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.ubuntupit.com%2Fwp-content%2Fuploads%2F2018%2F07%2FUFW-%25E2%2580%2593-Uncomplicated-Firewall.jpg&f=1&nofb=1">

**OpenSnitch**

Just an application firewall. If an app tries to access the internet, you'll get a popup asking if it's ok to access the internet

<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F1.bp.blogspot.com%2F-91giTlOwHL8%2FWth-0YTJkaI%2FAAAAAAAAAO4%2FB8Y-FWbelIExZCQtN8g3Tu_LRn26cpXTQCLcBGAs%2Fs1600%2Fopensnitch-allow-firefox.png&f=1&nofb=1">

So what do you use? :)
📢 Announcing React Timeline
Tags: react, javascript, showdev, opensource
Published: 2019-10-23 16:45:03

---
title: 📢 Announcing React Timeline
published: true
description: React Timeline lets you add responsive, customizable, and themable timelines to any React app.
tags: react, javascript, showdev, opensource
canonical_url: https://stevenmercatante.com/announcing-react-timeline
---

___
*This post was originally published at [stevemerc.com](https://stevenmercatante.com/announcing-react-timeline)*
___

I'm excited to announce the release of [React Timeline](https://react-timeline.com), an open source library for creating responsive, customizable, and themable timelines in React apps.

Originally conceived as a way for developers and designers to showcase their work and achievements (e.g. articles published, videos of conference talks, designs created, etc.), the library is also useful for any type of timeline where you want to display chronological events.

Its API provides high level `Event` components that lets users quickly build timelines, as well as low level components used to compose higher level events.

Timelines are fully themable — every visual element, from the event wrapper, date, timeline, marker, and event contents can be customized via a theme object. Each component also exposes semantic CSS class names, making styling via traditional stylesheets possible. The goal here was to give the user as much control over the visual style as possible. A few themes are provided out of the box, and creating your own is easy.

React Timeline supports various layouts. By default, events alternate around the timeline (assuming the viewport is wide enough), but you can also provide a layout prop that changes how events are arranged.

<a href="https://react-timeline.com">Check out the docs and demo here</a>, and the <a href="https://github.com/steven-mercatante/react-timeline">source code here</a>.

You can check out the CodeSandbox demo below, but I suggest opening it in a new tab to see how the responsive layouts behave.

{% codesandbox react-timeline-demo-1-srpe2 %}

👋 **Enjoyed this post?**

Join my [newsletter](https://stevemerc.com/newsletter/?r=dev) and follow me on Twitter [@mercatante](https://twitter.com/mercatante) for more content like this.
Creating my side-project in 2 weeks - day 2
Tags: laravel, vue, design
Published: 2019-10-23 16:24:09

# **Creating my side-project in 2 weeks**
## **Second day: basic working cards**

Welcome back to this second day of this serie. I made a lot of advancement today, so let's start now.

**The design part**
I ended up with this basic design for the cards, should be improved but i think it's good for now (also the buttons are not really the good ones, just to get an idea of the result).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dsrafthu1h8qt15ad4ur.png)

I then started creating a very basic sidebar for the dashboard page, where you will be able to create boards, access them and see you cards. Here is the result, also need a lots of improvements :

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tzkpaggc8leu6uudfd9l.png)

**The code part**
I added two routes for this card system, where you can only get all the cards and update a card.
```php
Route::group(['middleware' => 'jwt.auth'], function() {

    Route::get('cards', 'CardController@all');
    Route::post('cards/update', 'CardController@update');
});
```
Don't forget to add the `jwt.auth` middleware if you are also using JWT, and you also need to add a header when performing a request through your routes. Here is a exemple `POST` request with **axios** :
```js
axios.post('/api/cards/update', data, { // A variable or an object
    headers: { 
        'Authorization': 'Bearer ' + token, // The token of the current user
    },
}).then((response) => {
    // Here you get back your response
});
```
The `CardController` then handle the requests and send back a `success` data which can be true or false - based if everything went smoothly.

And with this basic stuff I got a very cool and easy view of what can be the result of this application - also by adding a feature to make the cards movables : I simply registered a **Vue directive** with the id `draggable`
```js
Vue.directive('draggable', {
    bind: (element) => {
        // Code to make the card movables
    }
});
```
and then i simply add `v-draggable` to the main div of the Card component to make it can move!

Here is it for this day, tomorrow I think i will be working on a custom right click menu, to create/delete cards, and also looking around to improve the design.
Favor Composition over Inheritance
Tags: typescript, javascript, oop, functional
Published: 2019-10-23 15:57:21

Short and simple:

Prefer this construct:

 MainClass.SomeContainer.DoSomething();

To this:

MainClass.DoSomething();


Why? Because you can dump in as many SomeContainers as you want without affecting each other, if you adhere to the Single Responsibility rule.

The only time MainClass.DoSomething(); works is when MainClass does only one thing and DoSomething does something directly related to MainClass.

Follow the Single-responsibility rule as if your coding life depends on it! Never duplicate code, and while coding, continually ask yourself "is all this code doing only one thing?", if not; repeatedly split code into new functions that only do one thing.
Hi everyone :)
Tags: node, react, webdev, design
Published: 2019-10-23 15:54:16

Hi there, mi name is Vladislav and i'm from russia but living in Argentina since I have 6 years old. 
Nice to join this community. 
I started to code about 1 year ago and I f· love this profession, hope to colaborate and help someday.

Cya!
[vim問題]ランタイムパスを調べるコマンドは？
Published: 2019-10-23 15:52:24

この記事では、Vimでプラグインを使わずに「ランタイムパスを確認」するコマンドについて、ご紹介します。 [解答] set runtimepath Vimコマンド :set runtimepath このVimコマンドでは、

つづきは[こちら](https://vim.blue/vim-set-runtimepath/)。
[https://vim.blue/vim-set-runtimepath/](https://vim.blue/vim-set-runtimepath/)
[vim問題]ロード済みプラグインを一覧表示するコマンドは？
Published: 2019-10-23 15:52:08

この記事では、Vimでプラグインを使わずに「ロード済みファイルやプラグインを一覧表示」するコマンドについて、ご紹介します。 [解答] scriptnames Vimコマンド :scriptnames このVimコマンドで

つづきは[こちら](https://vim.blue/vim-scriptnames/)。
[https://vim.blue/vim-scriptnames/](https://vim.blue/vim-scriptnames/)
[Vim問題]下方・上方へスクロールするキー操作は何種類ある？
Published: 2019-10-23 15:51:52

この記事では、Vimでプラグインを使わずに「下方・上方へスクロールする」キーについて、ご紹介します。 [解答] 上下それぞれお4種類ずつのキーで移動できる キーバインド1. ウィンドウ 1ページ分を上下にスクロールする 

つづきは[こちら](https://vim.blue/vim-scroll-down-up/)。
[https://vim.blue/vim-scroll-down-up/](https://vim.blue/vim-scroll-down-up/)
Why I'm Leaving Flask
Tags: python, webdev, flask, api
Published: 2019-10-23 13:53:22

>TL;DR
Not interested in the whole story? Just go check out [FastAPI](https://fastapi.tiangolo.com/)


Several months ago I started this series about how to make a REST API using Python and Flask. Then, abruptly, I stopped posting. Why? The purpose of the series was to show what I consider to be the best way to develop a REST API using Python, fueled by my experience using the Flask framework. Recently, as I have been given the opportunity to explore different technologies, I realized that Flask may not be the best choice anymore.

Let me explain- Flask is an excellent, modular, pluggable framework. Its greatest power comes from its flexibility and rich ecosystem, allowing you to build virtually anything on top of it. However, if you want to build a REST API with clear, static, inputs which are validated, you have to include several different packages from the community maintained by different groups of people that don't really play nice with each other. On top of that, you have to write a great deal of custom code to get it all working. The reality is, only developers who are really dedicated to correct, well documented, safe APIs will go through this effort. I am (and have), clearly, but most people are not.

This leads me to the real reason I'm leaving Flask: I found something else that fulfils my needs better. [FastAPI](https://fastapi.tiangolo.com/) is my new favorite web framework because it:
1. Is built from the ground up to do everything I want- no hacks required.
1. Does input declaration and validation with Python 3.6+ type hints, so the developer experience is naturally very good.
1. Is async which means I don't have to fight with gevent/eventlet monkey patching.
1. Is built on Starlette which has excellent GraphQL support. See my previous posts about GraphQL to see how confused I've been about why the experience is so bad on Python.  {% link https://dev.to/dbanty/discussion-why-graphql-54m0 %}
1. Has awesome documentation meaning I won't have to write an entire blog series to teach people how to build a well-documented API with it.
1. Is blazingly fast
1. Is very pluggable using their "dependency injection" system
1. Is written incredibly well- 100% test coverage including mypy checking. The kind of code quality I enforce at work. For real, check out the code {% github tiangolo/fastapi %}

I'm still experimenting with FastAPI, I haven't put anything into production yet that uses it (though that is changing soon). I'm very hopeful, this is by far the best option I've found that covers most of what I want my APIs to do. I can not encourage you enough to go and try it out.
Flawk Live Stream Outline - Week 2
Tags: showdev, startup, react, javascript
Published: 2019-10-23 15:41:59

> Cover Photo by Axel Blanchard on Unsplash

## We have a public roadmap! You can vote for features you want to see!
## https://flawk.to/roadmap

Every week I do a stream as I build out my new company [flawk.to](https://flawk.to). I have posted a little about this previously ([#1](https://dev.to/ericadamski/creating-more-meaningful-interactions-4j2h), [#2](https://dev.to/ericadamski/i-m-building-a-product-should-i-stream-it-51nk)) and will continue to write about it as time goes on. Some feedback I got on how to make my streaming more useful for others was a plan! So each week I will be posting an outline of what I will be doing in the stream and what the goals of that stream will be.

Here is last weeks plan and recorded video:

Plan: https://dev.to/ericadamski/flawk-live-stream-outline-week-1-gh6
Video: https://www.youtube.com/watch?v=Tiy-P1HvQRI

For this week I will be:

Adding a nice on boarding process for people signing up to flawk. We will be using react and lots of hooks! Then I'll be switching gears into a more CSS heavy mode. I will be creating components that will react to the users authenticated state and give the user the ability to edit their individual profile as well as the profile of their community (if they have one). If I am feeling up to it I will be doing some web scrapping with [puppeteer](https://pptr.dev/) 🤗

By the end of the stream I should:

* Create an account and an initial community.
* Be able to edit my account and community.
* Log out!

Looking forward to seeing y'all on the stream! I will be streaming over here https://www.twitch.tv/ericadamski starting at 9PM EST
Introducing Devmates - community of engineers who are solving and sharing solution of Daily Coding Problems.
Tags: showdev, webdev, beginners, javascript
Published: 2019-10-23 15:30:03

Hello👋, 
My name is [Alex](https://twitter.com/alexwawl) and I'm maker of [Devmates.co](https://devmates.co). 😊

We are resolving daily coding problems which asked by top tech companies together. We share our solutions, give some help if anyone stuck, support each other and just hang out together on the internet. 🍻☕️💬

I get these problems from our members or just searching them on the internet(leetcode forums, Glassdoor, teamblind, etc.).
Sometimes this problem can be very easy, sometimes too 👷‍♂️hard, everything depends on skills but we are trying to resolve all of them and Have Fun.  🙌 

![Home Page](https://thepracticaldev.s3.amazonaws.com/i/zqk9nhblvlpekhk922wo.png)

Nowadays a lot of companies are still asking a huge amount of coding problems which not related to real day job. All the time you have a choice - avoiding companies like this or prepare and try yourself.

I made [devmates.co](https://devmates.co) - for engineers who are learning algorithms & data structures or want to prepare for their interviews.


**Plans for the future:**

I want to add challenges where you can learn "new" tools/frameworks/libraries and share your solutions with others. I love the concept - learning by doing and want to implement it in Devmates.co.

This is the absolute beginning for [Devmates.co](https://devmates.co), so please do let me know your thoughts. There are so many different directions I could take this in and I'd love to hear your ideas.

Feel free to subscribe on [Devmates](https://devmates.co) or create your account [Here](devmates.co/home)

I look forward to hearing everyone’s feedback! Please share the site with anyone who you think it could help 🙌
Typescript and SOLID
Tags: oop, javascript, typescript
Published: 2019-10-23 15:10:07

JavaScript people often reject the concepts of OOP the way OOP people rejected JavaScript in the early days. Think about that a little longer, if you will.

Alas JavaScript and it's big brother Typescript are here to stay. Much to the chagrin of many OOP-ers.  Yes JavaScript is king like it or not. What did the OOP-ers learn in their 20+ year run leading up to JavaScript's dominance?

The major takeaways were 1)Favor composition over inheritance and 2) The SOLID principal.  The S in Solid is the Single Responsibility Principle (SRP), which says each class or function or method should only be responsible for one thing.  Think hard on that one, commit it to memory and live by it. Following the SRP rule means frequent refactoring. Anytime a new concern is introduced, it is split into a new function, method, class, object etc.  This then, results in code full of functions, methods, classes, objects that only do one thing.  This is exactly what JavaScript people are teaching when mentioning Pure-functions. 

All good OOP winds up at functional-styles anyway.  So what's the problem with OOP again?

Any questions?
OAuth2 auth with Nuxt.js/Vue.js (frontend),  Vert.x (backend for BL) and Keycloak (auth server) 👩‍💻👨‍💻 
Tags: hacktoberfest, vue, contributorswanted, help
Published: 2019-10-23 14:54:56

Hi all,

I need help with a **Nuxt.js** based frontend, which should use **OAuth2 authentication code flow** for authorization. Basically I don't want to use a *SessionHandler* and a *CookieHandler* on the Vert.x server side to prevent having to store state on the server (for scalability reasons in the future).

1. Basically I have a button which should execute a GET request on click to `https://localhost:9443/user/authenticate`.
2. On the server side the route will redirect to Keycloak for a login site. Then keycloak will redirect back to a given URL.
3. The frontend will now have to extract the generated "code" from Keycloak and make another POST request to `https://localhost:9443/token` to get a JWT token.

Something like this:

```javascript
axios.post('https://localhost:9443/token', {
  "code": this.code,
   "redirect_uri": this.redirect_uri //extra meta data needed
}).then(response => {
  var access_token = JSON.parse(response.request.response).access_token
  this.createNewResource(access_token)
})
```

Basically it should work like this [Gist of a React component](https://gist.github.com/MrBuggySan/8d8b26a80ed0d34cf1b457d9cde73bf1)

However, I'm totally stuck as I'm super new to the frontend stuff.

It is this issue:

{% github https://github.com/sirixdb/sirix-web-frontend/issues/31 %}

**I've tried some things in a [**branch**](https://github.com/sirixdb/sirix-web-frontend/tree/oauth2-auth), but I'm currently getting an internal server error (500) from Node.js and I have no clue why.**

The Node.js server is running on port 3005 so I had all sorts of issues with CORS and a self signed certificate (for testing purposes)...

**Setting up the SirixDB HTTP-Server and Keycloak should be doable via docker-compose. Have a look at the [REST-API documentation](https://sirix.io/rest-api.html).**

Maybe someone has done a similar login already with Nuxt.js, would be great 💚

**Update:24.10.: Added a CORS-Handler on the Vert.x server. Now I'm running into a docker problem: How do I address a host, which is not in the docker-network (the Nuxt.js application / the Node.js server running on localhost:3005):**

```
GET http://keycloak:8080/auth/realms/sirixdb/protocol/openid-connect/auth?redirect_uri=http%3A%2F%2Fkeycloak%3A3005&response_type=code&client_id=sirix net::ERR_NAME_RESOLUTION_FAILED
commons.app.js:1001 Uncaught (in promise) Error: Network Error
    at createError (commons.app.js:1001)
    at XMLHttpRequest.handleError (commons.app.js:536)
createError @ commons.app.js:1001
handleError @ commons.app.js:536
Promise.then (async)
login @ index.js:42
click @ index.js:82
invokeWithErrorHandling @ commons.app.js:15696
invoker @ commons.app.js:16021
invokeWithErrorHandling @ commons.app.js:15696
Vue.$emit @ commons.app.js:17719
handleClick @ vendors.app.js:15399
invokeWithErrorHandling @ commons.app.js:15696
invoker @ commons.app.js:16021
original._wrapper @ commons.app.js:20744
```

kind regards
Johannes
React components
Tags: reactjsjavascript
Published: 2019-10-23 14:35:54

---
title: React components
published: true
description: How to build functional components in React
tags: reactjs javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/react-functional-components.jpeg
---

## How to build functional components in React.

Components are the basic blocks of React. At their core, components are just Javascript functions or classes that have one thing in common, they all return `JSX`.
Of course there's more to that, and we will look at components in more detail later, but this is the main concept to remember at the moment.

As I said, components can be either Javascript function or classes. If a components is made out of a function it's called a functional component.
Let's see what a functional component looks like by creating one.

In the following code we create a `BasicButton` component.
Note that the variable name used to initialize the component is capitalized. Component names need to be *capitalized* in React, or they won't work.
The variable is assigned a function, in this case an arrow function, that returns a `<button>` element with some text in it.
Note also that we are using an arrow function to define the component. We could have used a regular `function` definition with the function keyword, but the convention in React is to use arrow functions so we will stick with the convention.

```
const BasicButton = () => {                  
  return(                                    
    <button>Click me, I'm a button</button>  
  )                                          
}  
```

Note that the `<button>` syntax resembles HTML, but it's actually `JSX`. We are writing JSX inside a Javascript file, and since we have imported React at the top of the file, the JSX is transpiled down to Javascript and HTML before it's passed to the browser, and it all works smoothly.

To use the component we have just created, we need to add it somewhere, but where?

If you remember, in a previous article I mentioned that `create-react-app` creates two directories inside our project, a `public` directory and a `src` directory.
The public directory has an `index.html` file that is the entry point of our application. The React application is mounted inside a `div` element inside this `index.html` file.
What is mounted inside the root element, is an `App` component, defined in the `App.js` file inside the src directory.
The App.js file looks like this:

```
function App() {
  return (
    <div className="App">
      <h1>Students</h1>
      <Students />
    </div>
  );
}
```

We can add our new `BasicButton` component inside the `App` component, and it will be rendered in the page.

```
<div className="App">
  <h1>Students</h1>
  <Students />

  // Rendering the BasicButton component
  <BasicButton />

</div>
```

In this article we have seen how to create a functional component and how to include it into our application.

There is another type of component, the class component, but before talking about class components we need to talk about another important feature of React: the way it manages state.