teleren/devto huggingface dataset:
SSH -b 옵션
Tags: linux, ssh, korean
Published: 2021-02-09 03:14:34

일단, 한국에서 `ssh`를 검색할 때, `-b` 옵션에 대한 설명을 찾으려고 하면 없을 것이다.
왜냐면 그나마 최근에 생긴 옵션이다 보니 `-b` 옵션이 빠져있는 설명서가 대부분이고, 만약 있다고 해도 잘 안 쓰다 보니 그저 옵션에 대한 설명에서 끝나는 경우가 대부분이다.

만약 네 컴퓨터에 2개 랜선이 연결되어 하나는 외부망, 하나는 내부망을 연결한다고 치자.
대부분이라면 `route` 명령어를 걸어 특정 IP를 접속할 때, 특정 인터페이스를 거치도록 세팅할 것이다. 예를 들면, 192로 시작하면 내부망, 그 외 라우팅 설정 안 하면 외부망으로.

그럼 리눅스 환경에서, 2개의 네트워크 환경이 구축되어 있다고 치자. 하나는 외부망, 하나는 내부망 연결되어 있는데, `root` 권한이 없어 `route` 설정이 곤란하지만, 내부망에 있는 쉘에 접속해야 하는 상황이라면 어떻게 할 것인가?

물론 대부분 `root` 권한이 있는 관리자에게 요청하여 라우팅을 세팅해 줄 것이다.
만약 그것조차 어렵다면?

`SSH` 는 `-b` 옵션이 제공되는데, 완전히 옛날 리눅스가 아닌 이상 이 옵션은 제공할 것이다.
`-b` 옵션에 대한 설명은 아래와 같다.

> -b bind_address
>  Use bind_address on the local machine as the source address
>  of the connection.  Only useful on systems with more than
>  one address.

> -b 지정 주소
> 현재 컴퓨터에 설정한 [지정 주소] 를 통해 연결한다.
> 시스템에서 복수 주소를 가지고 있을 경우에 유용하다.

흐음... 언뜻 보면 설명도 꽤 불친절해 보인다.
바로 이 옵션을 사용할 것이다.

사용법은 간단하다. `-b` 옵션 뒤에 니 컴퓨터에 세팅된 IP를 입력하면 된다.
예를 들어 '내부망' 인터페이스에 '192.168.0.123' IP를 할당받았고, 그 네트워크 안에 있는 '192.168.0.12' IP를 통해 쉘 접속하려고 한다면,

```sh
ssh -b 192.168.0.123 nebumang@192.168.0.12
```

이렇게 쓰면 된다. 물론 굳이 `-b` 안 써도 접속 되긴 하지만, 예를 든 거다.
이럴 때 유용하다. 니가 192.168.0.123 IP를 할당받았는데, 내부망 네트워크인 192.168.0.1 에서는 192.168.10.0 계열의 IP에 접근할 수 있다.
하지만 192.168.10.0 에 접근하고자 한다면, 보통은 라우팅을 써야 하지만, root 권한이 필요하기 때문에 라우팅 명령어로 등록할 필요 없이 아래와 같이 쓸 수 있다.

```sh
ssh -b 192.168.0.123 nebumang@192.168.10.12
```

그러면 내부망으로 할당받은 '192.168.0.123' IP를 통해 '192.168.10.12' IP로 쉘 접속을 시도할 것이다.

자. 설명은 끝이다. `-B` 옵션도 있는데 얘는 아예 인터페이스 ID를 지칭한다. 예를 들어 내부망 인터페이스 ID 가 `eth1` 이라 치면 `-B eth1` 이렇게 하면 된다. 기능은 `-b`와 동일하다. 하지만 이건 좀 더 최신 옵션이기 때문에 `-b` 옵션은 있으나 `-B` 옵션이 없는 환경이 있을 수 있다.

끗.
Master GitHub markdown tables with multi-line code blocks
Tags: github, markdown
Published: 2021-02-09 02:59:14

Do you want to show a table with a multi-line code block on GitHub?

![goal.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612724064933/wGoIfF1TN.png)

Then follow these golden rules

# 1. Use HTML table

Unfortunately, a markdown table is not suitable to contain code blocks.

Some markdown editors might show correct layout and syntax highlighting if you use HTML `br` elements in your code block. But this is very cumbersome and awkward. And finally, GitHub itself will show the code block on a single line :(

Use a HTML table instead!

# 2. Escape the code properly

Use either backticks (`\\\`) or the HTML `pre` element with attribute `lang` to enclose your code blocks.

Do NOT use HTML `code` element as you won't get syntax highlighting.

# 3. Remember the blank line quirk

Keep a blank line before and after a code block for correct formatting and syntax highlighting. Otherwise, your code may show up as a single line and unformatted.

# 4. Beware of the online editor you are using

Some of the popular online editors will not accurately preview such a table.

**Good** 👍: [Markdown Editor](https://jbt.github.io/markdown-editor/), [HackMD](https://hackmd.io/0YirLCWEQyORDuwOftegMQ) and [HedgeDoc](https://demo.hedgedoc.org/Y_qXSd1iTCynRbJjWuJjWQ?both)

![goodexample.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1612723580072/fEPNFeOltp.png)

**Bad** 👎: [StackEdit](https://stackedit.io/) and [Dillinger](https://dillinger.io/)

![badexamples.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1612723541543/qeH2I6h-a.gif)

# 5. Bonus tip: don't write markdown tables by hand

Use [TablesGenerator](https://www.tablesgenerator.com/markdown_tables) to easily generate either HTML or markdown tables.

![TablesGenerator.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1612723870382/DVthdDoaB.gif)

# Now get started :)

Use the following gist as a reference (view raw) and for testing in the markdown editor of your choice

{% gist https://gist.github.com/MarcoEidinger/c0f0583f19baca0a8f33bcded644be41 %}
All you need to know about mysql
Tags: database, mysql, query
Published: 2021-02-09 02:25:12


Discover and Learn CRUD (Create, Read, Update, Delete) operation and the concept behind database.

## Installation

```bash
sudo mysql -u root -p
PASSWORD: yourpassword
```

```sql
use mysql;
UPDATE user SET plugin='mysql_native_password' WHERE user='root'
UPDATE mysql.user set authentication_string=PASSWORD('yourpassword') where user='root';
FLUSH PRIVILEGES;
quit;
```
2 . Elements of Design!
Tags: design, computerscience, career, codenewbie
Published: 2021-02-09 02:19:01

There are the following basic Elements of Design!
1- Line
2- Shape
3-Texture
4-Space
5- Form
6-Typography
7-Colors

Today I will explain about lines
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mjyo6d3sfawqzwsjk2o7.png)

**1. Lines : **
It is used to MAKE 
1. HIERARCHY
2. DIVIDATION
3. CONNECTION
4. DECORATION. 
5. MOVE YOUR EYES 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u4fm8qd84yxe2mb4iqtz.jpg)

*Weight mean Thickness and Thinness of Line is also Important especially in Magazine etc.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/epax0ssdgse8vnekcdh5.jpg)
Lines create Harmony and Discipline instead of messing up everything.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qwquizthjgbkr1nxjv94.jpg)

I hope you learn more about lines.
Thanks for read.
5 Projects To Master JavaScript in 2021
Tags: javascript, programming, codenewbie, mastery
Published: 2021-02-09 02:06:53

In this article, I will tell you the 5 projects to master javascript in 2021

Some of you may find these projects easy or complex but you cannot build a project after just learning javascript from 1-hour tutorial you have to search the internet and find resources and solutions to errors on StackOverflow. But also on the other side, you will get a hang of it eventually and build projects faster.

**Note: I am not telling you to build in the same  layout  as the reference image**

JavaScript Stopwatch
![JavaScript Stopwatch Image](https://dev-to-uploads.s3.amazonaws.com/i/amw0a5wqfrlx8ojn3zbo.png)

If you can build a Stopwatch it would mean that you have mastered using functions in a real project. The stopwatch needs a stop feature, a start feature, a reset feature so you need to create a function for them.

[Check out a JavaScript Stopwatch here for an example](https://codepen.io/cathydutton/pen/GBcvo)

JavaScript Calculator
![JavaScript Calculator Image](https://dev-to-uploads.s3.amazonaws.com/i/ncr23g9icfw382e8z2rm.png)

After building a JavaScript Calculator you will be confident in using operations like +, -, *, /, etc. You will need to create the basic layout with HTML, CSS and then implement JavaScript for the functionality. 

[Check out a JavaScript Calculator here for an example](https://codepen.io/akashdevgan/pen/MKRwEZ)

JavaScript Drum Kit
![JavaScript Drum Kit Image](https://dev-to-uploads.s3.amazonaws.com/i/seyfldltm18z75cx0g92.png)

After Building a JavaScript Drum Kit you will be confident in working with DOM in future projects.

[Check out a JavaScript Drum Kit here for an example](https://codepen.io/amdsouza92/pen/xdooWa)

JavaScript TODO List
![JavaScript TODO List Image](https://dev-to-uploads.s3.amazonaws.com/i/q3073hv8ywibg4zw930b.jpg)

So Building a TODO List will help in dealing with event handlers and string the inputs through the page and will surely help in the future as you will be able to handle events easily in other and more complex projects.

[Check out a JavaScript TODO Kit here for an example](https://codepen.io/amdsouza92/pen/xdooWa)

JavaScript Weather Project
![JavaScript Weather Project Image](https://dev-to-uploads.s3.amazonaws.com/i/ksolc19mbhu39wbul1ce.png)

So If You Build a  JavaScript Weather Project You will master APIs, asynchronous programming, event handlers, operations, and DOM. So It would be like a test or adding up all the features in a single project and you will also learn to create with multiple big features.

[Check out a JavaScript Weather App here from Dev Ed](https://www.youtube.com/watch?v=wPElVpR1rwA)

If you have some recommendations for beginner projects drop it down below in the discussion box.

Don't forget to follow me on [Twitter](https://twitter.com/GarvitMotwani) for regular updates and useful resources.
RevolveR UI Core
Tags: javascript, css, ui, frontend
Published: 2021-02-09 01:34:15

For a long time I had been secretly building front-end library which would replace all the tools I liked last 10 years.

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

About 100Kb of code writed on ECMAScript 7and using CSS made the idea of.

RevolveR UI Core contains a lot of API intended to work with Document Object Model, dynamic requests, cookies, local storage, CSS animations and much more.

Most important UI\UX elements such as modal windows, tabs, flexible menues, styled HTML forms, collapsible elements, hints and slider added to library.

UI\UX elements examples you can find [here](https://xcmf.net/ui.html). Full API description placed [there](https://xcmf.net/docs.html).
Vue + Firebase + Google == Easy Authentication
Tags: vue, javascript, tutorial
Published: 2021-02-09 01:31:47

Hey, DEV community!

I sometimes create youtube videos about things I'm working on, detailing how I did it - instead of a video, I'd like to share how you can use Firebase Auth to authenticate your users with Google!

Getting started, I'll assume that you probably already have a firebase project up and running, the only thing we need to do on the firebase console is active Google sign in:

![](https://i.imgur.com/xNNw0A9.gif)

Once that's done, we can get started on adding functionality to our view.

Here's a base template consisting of a button and the empty method `googleSignIn`

```
// @/views/SignUp.vue

<template>
  <div>
    <button @click="googleSignIn">
      Sign In with Google
    </button>
  </div>
</template>

<script>
import firebase from "firebase";
export default {
  name: "SignUp",
  methods: {
    googleSignIn: function() {
      // We'll create functionality here
    }
  },
};
</script>

```

Now that we have the basic structure in place, we can figure out what we need.

First, we need to create an instance of our preferred provider: 
`let provider = new firebase.auth.GoogleAuthProvider();`

Second, we decide what method we want to use - in our case we're going to use `signInWithPopup()`

Lastly, let's implement this into working code:

```
let provider = new firebase.auth.GoogleAuthProvider();
firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          let token = result.credential.accessToken;
          let user = result.user;
            console.log(token) // Token
            console.log(user) // User that was authenticated
        })
        .catch((err) => {
          console.log(err); // This will give you all the information needed to further debug any errors
        });
```

That's it! You can now authenticate users with Google in your firebase project - yay!

Note, if you don't know how to sign someone out, it's pretty easy:

```
firebase
        .auth()
        .signOut()
        .then(() => {
          alert("Successfully signed out.");
        });
```

Let me know if you have any questions about the process and happy coding 😊
macOS and grpc_cli
Published: 2021-02-09 01:27:53

On my work mac I have Homebrew installed to `~/.homebrew`.

After successfully running `brew install grpc`, I attempted to run `grpc_cli`:

```
$ grpc_cli --help
dyld: Library not loaded: @rpath/libgrpc++.1.dylib
  Referenced from: /Users/username/.homebrew/bin/grpc_cli
  Reason: image not found
fish: 'grpc_cli --help' terminated by signal SIGABRT (Abort)
```

I found [this great post](https://blog.krzyzanowskim.com/2018/12/05/rpath-what/) from Marcin Krzyżanowski that explains what causes it.

In short, `LC_RPATH` points to the wrong dir:

```
otool -l ~/.homebrew/bin/grpc_cli | grep LC_RPATH -C 5
```

Look at the `path` value. It points to `/tmp/grpc-20210208-96893-12plm1r/cmake/build`.

Let's correct this by adding correct dir:
```
install_name_tool -add_rpath @executable_path/../lib ~/.homebrew/bin/grpc_cli
```
Convert Method to function and if statement
Tags: javascript, function
Published: 2021-02-09 00:47:20

```
const filterMovies = !filter ? movies : movies.filter((movie) => movie.info.title.includes(filter));

    filterMovies.forEach((movie) => {
        const movieEl = document.createElement('li');
        let text = movie.info.title + ' - ';
        for (const key in movie.info) {
            if (key !== 'title') {
                text = text + `${key}: ${movie.info[key]}`;                
            }
        }
        movieEl.textContent = text;
        movieList.append(movieEl);
    });
```

this is what i'm trying to get but it returns the function and not the data

```
 const filterMovies = function filterMoviesHandler() {
        if (!filter) {
            movies
        } else {
            movies.filter((movie) => movie.info.title.includes(filter));
        }  
             
    };
```
Keeping GitHub Action workflows secure
Tags: github, devops, security, githubactions
Published: 2021-02-09 00:05:19

[GitHub Security Lab’s](https://securitylab.github.com/) mission is to inspire and enable the community to secure the open-source software we all depend on. In a recent disclosure, they [disclosed 84 vulnerable GitHub Action workflows](https://twitter.com/GHSecurityLab/status/1357054015171923969) ranging from **pull_request_target** abuse to script injections reported to maintainers.

{% twitter 1357054015171923969 %}

If you have been following my daily tips, you know I am a big of the **pull_request_target** event for my open-sourced GitHub Actions. Today I am going to talk about and how you can ensure your use of it is secure. 

{% twitter 1356290815316910085 %}

GitHub Actions is a powerful feature, but with that power comes the responsibility to secure your code.

**TL;DR:** To prevent access to sensitive repository information; Refrain from using the pull_request_target with the actions/checkout.

|workflow trigger event|access|access to repo secrets
|-|-|-|
|[pull_request](https://docs.github.com/en/actions/reference/events-that-trigger-workflows#pull_request)|merge commit|no|
|[pull_request_target](https://docs.github.com/en/actions/reference/events-that-trigger-workflows#pull_request_target)|target repository (including secrets)|yes|

Using actions/checkout stores secrets in a local .git/config folder in the environment. This is not enabled if the action config set `persist-credentials: false`. By default, GitHub Actions scrub secrets from memory that are not explicitly referenced in the workflow or in an included Action.

Any automated processing of PRs from external forks is potentially dangerous and should be treated like untrusted input. As a precaution, reviewing the code from the GitHub Actions enabled on your project to validate its source.  

You can treat PR's from forks as untrusted input, by not including write access to forked repositories PR'd again your project. 

GitHub's standard **pull_request** workflow trigger by default prevents write permissions and secrets access to the target repository. However, in some scenarios, such access is needed to properly process the PR. To this end, the **pull_request_target** workflow trigger was introduced.

The **pull_request_target** runs in the context of the target repository of the PR, rather than in the merge commit. This means the standard checkout action uses the target repository to prevent accidental usage of the user-supplied code.

With all this said, if you can trust/validate all the input from a user's PR then you are in the most secure position. 

To keep up to date on other vulnerabilities through GitHub, checkout GitHub's full vulnerability list. 

https://securitylab.github.com/advisories

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

{% link https://dev.to/github/compress-images-for-the-web-with-github-actions-29a3 %}
How to edit the webpage in realtime on the browser itself using JavaScript?
Tags: javascript
Published: 2021-02-09 00:00:00

---
  title: How to edit the webpage in realtime on the browser itself using JavaScript?
  published: true
  tags: JavaScript
  date: Tue Feb 09 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/edit-the-whole-webpage-in-browser-realtime-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-e408ed58d18129d29cada48c1572e9d8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/edit-the-whole-webpage-in-browser-realtime-javascript)
  
To edit the whole webpage in realtime in the browser, you can use the property called `designMode` in the global `document` object and assign the value of `on` or `off` using JavaScript.

```js
// Make webpage editable realtime in browser 🚀
document.designMode = "on";
```

To turn off the editing in the browser, you can assign the value `off` like this,

```js
// Turn of real-time editing in browser
document.designMode = "off";
```

See the above code in action in [JSBin](https://jsbin.com/jobuvuruze/2/edit?html,js,output).

### Feel free to share if you found this useful 😃.

---
Perl binaries are mismatched - the revenge of the lazy person
Published: 2021-05-04 15:19:54

---
title: Perl binaries are mismatched - the revenge of the lazy person
published: true
date: 2021-02-09 00:00:00 UTC
tags: 
canonical_url: https://foursixnine.io/blog/linux/perl/2021/02/09/Perl-binaries-are-mismatched-the-revenge-of-the-lazy-person.html
---

# The uninvited eldrich terror

You use [local::lib](https://metacpan.org/pod/local::lib), and the pain unfolds: A shell is started, and you find a dreaded:

```
Cwd.c: loadable library and perl binaries are mismatched (got handshake key 0xdb00080, needed 0xdb80080)

```

![Pennywise, because I could not find the right gif, from the Uninvited, of Sabrina's netflix](https://media.giphy.com/media/CiJGnsh7wWXv2/giphy.gif)

Which means: that the module (Cwd in this case) is not compatible (Because it’s an [XS module](http://modernperlbooks.com/mt/2009/05/perl-5-and-binary-compatibility.html)) with your current version of perl, installed on your system: Likely it was compiled for a previous version, leadin to those [binaries mismatching](https://rt.perl.org/Public/Bug/Display.html?id=133440)

## Don’t panic!

I [wrote about this](/blog/2019/01/21/perl-binaries-are-mismatched.html) however, I left out how to get to the point where you have already an usable Perl again?

## The light

Instead of downloading local::lib from git as I used to do… this time I decided to do it on a much simpler way: use `perl-local-lib` from my distribution, and let it do the magic, I mean that’s why I run [openSUSE Tumbleweed](https://get.opensuse.org)

```
 $ rm -rf perl5-old || echo "First time eh?"
 $ mv perl5 perl5-old
 $ perl-migrate-modules --from ~/perl5-old/lib/perl5 /usr/bin/perl
 $ perl -MCPAN -Mlocal::lib -e 'CPAN::install(App::cpanminus)'
 $ cpanm App::MigrateModules
 $ perl-migrate-modules --from ~/perl5-old/lib/perl5 /usr/bin/perl

```

Et voilà, ma chérie!

![It's alive!](https://media.giphy.com/media/xT5LMDi8H2A1FtLlpC/giphy.gif)
Agile space travel
Tags: agile
Published: 2021-02-27 11:15:50

---
title: Agile space travel
published: true
date: 2021-02-09 00:00:00 UTC
tags: agile
canonical_url: https://jhall.io/archive/2021/02/09/agile-space-travel/
---

A while back I was working for a company going through an “Agile transformation”. During one of the agile training sessions, a long-time employee spoke up, saying:

> Agile is great, but it won’t work for my department. The technology we work on is just too big, and too complicated.

There’s a good chance you may have heard something similar. Perhaps even said something similar.

Then again… Space travel is pretty darned big and complicated. Yet SpaceX has proven that an agile mindset and approach to engineering can have a staggering impact in this industry.

If we can send people into orbit using Agile methodologies, surely your “Enterprise” ERP system can benefit from agile, too.
Lucky is lightning fast!
Tags: crystal, lucky, benchmarks, rails
Published: 2021-02-08 23:53:24

---
title: Lucky is lightning fast!
published: true
description: TechEmpower Benchmark #20 is here and Lucky Framework is in! If you needed empirical proof  that Luck if fast - it's here now. 
tags: #crystal #lucky #benchmarks #rails
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qh3m0qusiqkbqt4kd2mz.png

---

TechEmpower just posted [Round #20](https://www.techempower.com/benchmarks/#section=data-r20&hw=ph&test=json&c=e) of their Web Framework benchmarks and [Lucky Framework](https://luckyframework.org/) (that runs on [Crystal Language](https://crystal-lang.org/)) is in it, thanks to work done by @matthewmcgarvey (Great job on the benchmark!).  

Pretty solid result! Especially if you only consider "Full-stack" frameworks and not micro-stuff. 

1. In the Crystal-land Lucky is near the top. And in non-crystal-land too.
2. The main speed-competitor in Crystal-land is Raze framework( which has been retired). Lucky's speed is comparable to most other Crystal frameworks:  Kemal, Spider-Gazelle, Onyx & Amber (all did pretty well on speed thanks to Crystal :smile: )
3. The  most important comparison for me is against true full-featured frameworks like Rails, Hanami, Phoenix, Django, Symphony, Grails, Spring, Prologue, etc. And **Lucky** is doing really well there

If you go to the main page, there are ~250 benchmark results for every web-framework under the sun. However, that's too many results for my taste :smile: i.e. things like "h2o.cr" on the list are too purpose specific for me or anything I would do in a normal course of things, developing an enterprise or user-facing web application. 

I'm currently considering a Full-Stack Framework for a small web-based enterprise-type project and deciding between Phoenix, Lucky & Rails. Each has its own strengths for my use-case. So [this particular comparison is more of an interest to me](https://www.techempower.com/benchmarks/#section=data-r20&hw=ph&test=fortune&b=4&l=ypto4d-sd&c=a&d=8&o=8&f=zhayfb-zik03j-xalvcv-zih1f3-zhxjwf-zijunz-g3bqwu-zijzei-zfzbi7-zhx79b-piyn7j-cm7), based on frameworks & languages that I've had exposure to or would even consider for such an application. Take a look at the benchmark, and I hope you give [Lucky Framework](https://luckyframework.org/) a spin. 

![Frameworks Comparison List](https://dev-to-uploads.s3.amazonaws.com/i/71wiqmwcowy91dai5bzx.png)

**Disclaimer:**
Take these benchmarks with a grain of salt. 
1. Not all frameworks that are on the list are properly optimized.
2. Speed is *only one* aspect that should be under consideration
3. Ecosystem, dev experience and productivity are all more important than speed in most cases. 
4. Having said that :arrow_up:, Lucky ticks all 3 boxes for me.