teleren/devto huggingface dataset:
How I setup my ssh config to be able to use different Gitlab/Github ssh keys.
Tags: ssh, devops, gitlab
Published: 2019-07-24 19:20:40

## Backstory

So the original idea for this post actually stemmed from me adding some ssh keys for private gitlab repos to be able to git clone other private repos for building docker containers in our CI/CD stuff, but this was a perfect jump start for an issue that I had and how I solved it

## What the problem was.

Well, so you see, last week I setup a new ssh key to use the deploy key feature of Gitlab to give read only access to other computers, in this case it was a gitlab-ci runner, but thats beside the point. Also if you don't know ssh stuff and are still logging in every time you wanna clone/push to a remote git repo I suggest you head over here to a (great Digital Ocean breakdown of ssh connection education](https://www.digitalocean.com/community/tutorials/understanding-the-ssh-encryption-and-connection-process).

A few days after I added the key, upon a restart of my computer, I could no longer clone projects or push changes to remote repos with ssh. I know what it is, ssh is using my newer ssh key by default, lets test that theory!

If I typed `ssh -T git@gitlab.com` it would say what I expected, a failure right?:

```
➜  ~ ssh -T git@gitlab.com
Welcome to GitLab, @fergyfresh!
```

Damn! I was hoping that would fail. Let's try to clone a private repo again:

```
➜  ~ git clone ssh@gitlab.com:path/to/my/private/repo.git
Cloning into 'repo'...
ssh@gitlab.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```
:( so sad. Well, that stinks. I'm lost, or am I?


## Solution

So I remember that I had used `~/.ssh/config` to specify an `Identity` before, so we can surely do that again. The file we are going to want to modify is `~/.ssh/config`. Or in most cases, like mine, it didn't even exist so I had to create it.

We are going to want to add an entry for a host and the ssh `IdentifyFile` to use. All of my ssh keys are in the `~/.ssh/` directory:

```
host gitlab.com
    HostName gitlab.com
    IdentityFile /home/ferg/.ssh/id_rsa
    User git
```

Now, once you see that you know the power of the ssh config and can extrapolate that setup to use a different ssh key for any number of hosts. Don't forget to have the path to the private key at `IdentifyFile` to be on your computer and not just blindly cut/paste my path, with MY username.


# Questions, comments, concerns

Feel free to click one of these buttons in order to signal me with something that was messed up with this. I'd be glad to fix anything that didnt work for you.
What are the challenges you encounter while learning computer programming?
Tags: story, sharing, inspiration, programming
Published: 2019-07-24 19:08:22

---
title: What are the challenges you encounter while learning computer programming?
published: true
description: I wanna hear your story!
tags: story, sharing, inspiration, programming
---

The challenges I encounter while learning computer programming is that I have no machine to start with I only use an android smartphone in learning programming. I browse websites for tutorial and watching videos. I even install some coding application to my first android phone so I can try what I learn. Eventually, that time I have enough knowledge to contribute to open source projects and one day, an employer wants to hire me at the age 18 years old to work as Junior Front End Developer.

When I get the job, I earn a decent amount of money to buy my first Laptop. When I get my Laptop that's the first time to continue the study in programming. Today, I have computers at home both laptop and desktop and still want to upgrade what I have. 

I just wanna share my story to you guys! I start on a smaller screen into a bigger double computer monitor screen.

I wanna hear yours!
package.jsonの各種要素を読み込みたい！
Tags: nodejsjavascript
Published: 2019-07-24 18:53:10

---
title: package.jsonの各種要素を読み込みたい！
published: true
description: package.json
tags: nodejs javascript
---

ラーメン 今日食べたものです。package.jsonに書かれたデータが欲しいことが往々にして存在します。たとえば`version`です。普段から`npm version`コマンドを利用するように意識していると、やはりどうしてもアプリケーション内でpackage.json内の`version`を読み込んで表示したり、`console.error`を繰り出す際に`version`も併記してSentryなどのエラー監視ツールなどの補助情報として利用し、問題の絞り込みをしてみたくなるものです。

## Node.js
`process.env.npm_package_version`を呼び出せばよい。かんたん

## Web Application
ひとくちにWeb Applicationといってもなんか世界が広すぎて解説しきれないので2つの手法を提示する。

* `package.json`を読み込む  

ES6であれば次のように読み込める。

```js
import packageJson from "../package.json"
console.log(packageJson.version)
```
ただし、`src`以下のディレクトリしか読み込みのみを許可されている場合はpackage.jsonを直接読み込むことができない。対処法としてはsymbolic linkを貼ってやればよい。

```bash
ln -s package.json src/package.alias.json
```

これで次のように読み込める。

```js
import packageJson from "./package.alias.json"
console.log(packageJson.version)
```

* create-react-appの場合  

そもそもpackage.jsonを読み込んでしまうのは中々穏やかではない（気がする）。create-react-appは最初から色々揃っており、`.env`に次のように記載すればよい。

```
REACT_APP_VERSION=$npm_package_version
```

すると`process.env.REACT_APP_VERSION`として読み込みが可能である。

**おっと、これはWindowsでは動きませんよ!**
このコードをwindowsでビルドしてしまうと、`process.env.REACT_APP_VERSION`はバージョン情報を出さず、`$npm_package_version`と表示してしまいます。困りましたね。

Windowsでのnpmの環境変数の読み込みは次の形式となります。

```
REACT_APP_VERSION=%npm_package_version%
```

しかしこれではmacOS, Linuxでうまく読み込めません。

解決方法は、上記の.envのやり方を諦めてpackage.alias.jsonを読み込むか、泥臭い方法で頑張るかです。

```
REACT_APP_VERSION_UNIX=$npm_package_version
REACT_APP_VERSION_WIN=%npm_package_version%
```

```js
export const appVersion = process.env.REACT_APP_VERSION_WIN === "%npm_package_version%" 
    ? process.env.REACT_APP_VERSION_UNIX 
    : process.env.REACT_APP_VERSION_WIN
```

泥臭いですがこれでWindows, macOS, Linuxどれでも`version`情報を読み込むことができました。こんなことするぐらいならpackage.jsonをimportした方が良い気もしますが。

# 他にもnpmの環境変数が欲しい？
`process.env`には様々な情報が含まれています。パッケージ名を含む`npm_package_name`、ライセンス情報を含む`npm_package_license`等。各自見てください。全部紹介する気にはなりません。とはいえWeb開発にはpackage.jsonの中身さえ読めれば十分とは思います。
Pushing Left, Like a Boss — Part 5.7 — URL Parameters
Tags: programming, tutorial, beginners, security
Published: 2019-07-24 18:13:36

---
title: Pushing Left, Like a Boss — Part 5.7 — URL Parameters
published: true
description: The 5th section of this series details various examples of secure coding.
series: Pushing Left Like a Boss
tags: programming, tutorial, beginners, security
---
###This series, and my blog, have moved! [Check it out](https://wehackpurple.com/g8tg)!

Never put information in the parameters in the URL of your application that are *important*. When I say “important”, I mean something that would potentially be used to make a decision in your application that is not trivial. The same goes for hidden fields, don’t store or pass anything valuable there either. Important information must be transmitted in a secure manner, and hidden fields and URL parameters are not the place for that.

Risks of putting sensitive information in the URL include; sensitive data being cached, sensitive data exposed in the case of a man-in-the-middle attack, or an attacker potentially injecting their own values.

Examples of things that should not be in URL parameters:
* User IDs (for a user logging into a system, not when it is used to bookmark a public page, and nothing more. Book marks on public pages are not sensitive.)
* Account numbers
* SIN Numbers
* Dates of birth and other combinations of information that could possibly be used to impersonate someone
* Home address
* Query or search information
* Personal Identifiable Information (PII)
* A token or session ID

![Franziska Bühler and I at the Open Security Summit, 2018](https://thepracticaldev.s3.amazonaws.com/i/lzvl4qvppllwg5g8h548.jpeg "Franziska Bühler and I at the Open Security Summit, 2018")

######[Franziska Bühler](https://twitter.com/bufrasch) and I at the [Open Security Summit](https://open-security-summit.org/), 2018

###[Read the rest on my NEW blog!](https://wehackpurple.com/lvv4)!
redis-namespace: when one sidekiq process is not enough
Tags: sidekiq, redis, ruby, rails
Published: 2019-07-24 18:13:06

---
title: "redis-namespace: when one sidekiq process is not enough"
published: true
description: "how to deal with few apps using redis on one server"
tags: "sidekiq, redis, ruby, rails"
---

Few months ago I was working in a project in which we had two applications communicating with each other. 
Each of them had to has its own sidekiq process, but they were deployed to one server. After some time, I realized that after deploying one app, the second one has problems with invoking its workers. The problem was that sidekiq was restarting and loading workers only from one (last deployed) app. So after each deploy I had many errors saying that
```
NameError: uninitialized constant AppOneWorker
``` 
and another time 
```
NameError: uninitialized constant AppTwoWorker
```
With rescue came gem called `redis-namespace`.

### [redis-namespace](https://github.com/resque/redis-namespace)

As pointed in it's repo description, `redis-namespace`:
```
...adds a Redis::Namespace class which can be used to namespace Redis keys. 
```
What does it mean? It means that we can have plenty of apps using one Redis server, with many sidekiq processes not conflicting with each other.

All you need to do is to add `redis-namespace` to your Gemfile and configure it in `app/config/initializers/sidekiq.rb` like this:

```
# frozen_string_literal: true

require 'sidekiq'

Sidekiq.configure_server do |config|
  config.redis = {
    url: 'redis://127.0.0.1:6379',
    namespace: 'my_first_app_name'
  }
end

Sidekiq.configure_client do |config|
  config.redis = {
    url: 'redis://127.0.0.1:6379',
    namespace: 'my_first_app_name'
  }
end
```
And do the same for the second app (with its proper name, of course).  

After that, when you visit your app's `/sidekiq` route (if you mounted it in `routes.rb`), you can see that sidekiq process has namespace added at the beginning of it's name.
Other way to check if everything is OK is to launch `redis-cli` in command line, and look up for keys containing your namespace.
```
redis 127.0.0.1:6379> keys *app_name*
 1) "my_first_app_name:queues"
 2) "my_second_app_name:queues"
```

### Credits
When I had that problem, I wouldn't resolve it without [Maciej Mensfeld's post](https://mensfeld.pl/2014/07/multiple-sidekiq-processes-for-multiple-railssinatra-applications-namespacing/) about redis-namespace. Thanks!  
You can even find my enthusiastic comment there, I left back then, haha.
CSS - Center both vertically and horizontally
Tags: css, gridlayout, flexbox, centering
Published: 2019-07-24 17:52:35

---
title: CSS - Center both vertically and horizontally
published: true
description: 
tags: #CSS #grid-layout #flexbox #centering
---

Say you have a HTML `<body></body>` tag and you want its child `<div></div>` to be centered both vertically and horizontally with modern CSS : how to achieve that ?

`index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div>
        <h1 class="title">Hello DEV!</h1>
    </div>
</body>
</html>
```

Flexbox says :
`style.css`
![image](https://thepracticaldev.s3.amazonaws.com/i/4118y5sa0iznx8n8t5ns.png)

CSS Grid says :
`style.css`
![image](https://thepracticaldev.s3.amazonaws.com/i/2iy5vsrhw3fte1gr8a4t.png)

Voilà!

See you next time!

Drozerah
The Golden Jam of Web Stacks
Tags: jamstack
Published: 2019-07-24 17:37:24

---
title: The Golden Jam of Web Stacks
published: true
description: 
tags: JAMstack
---

Over the course of time my go to tech stack for web development has changed. At one time it was Ruby on Rails with Heroku, then Firebase and React, then Polymer and lit-html. While all of these had their place and still work brilliantly I have been able to fine tune my go to technologies; finding a more specific niche use case while also broadening capabilities. As I see it these are the major problems to solve in web development:

1. Rendering
1. Hosting
1. Source control
1. Content management
1. Business logic
1. Data storage
1. Delivery

Every tech stack will need to have an answer for these problems. The set of technologies that I use falls under the JAMstack paradigm. Here they are listed in same order as the problems they solve:

1. Orison
1. Netlify
1. GitHub
1. Contentful
1. Netlify functions
1. Firebase Firestore
1. SPA + PWA

The beauty of JAMstack is that any one of these seven parts could be replaced by another technology which solves the same problem. On any given project I might use Gatsby instead of Orison, Firebase Hosting instead of Netlify, Bitbucket instead of GitHub, Blogger instead of Contentful, and the list goes on. As time goes by pieces of the stack can be swapped without major dependencies upon the other layers. The other benefit is that the performance and security of this stack is largely not based upon these technologies themselves, but upon the web platform itself.

While my previous go to tech stacks required lots of specialized knowledge, this tech stack runs very closely to the web platform itself and has precanned solutions to almost all of the major problems of web development.
Bypassing Twitter's t.co domain
Tags: javascript, jquery, twitter, webextensions
Published: 2019-07-24 17:32:59

I found [this post](https://dev.to/paulleclercq/twitter-without-short-links--1cig) by searching "twitter" on dev.to b/c Twitter. It's now 2019 and there's a "new" twitter. I thought to comment on said post but it's an old post and I'm not sure about netiquette concerning adding new wine to old bottles, so I decided on a post rather than a comment. The present post is my first post-level post on dev.to so please consider being gentle.

Link wrapper politics of twitter seems largely unchanged, though. I too am an extension developer (in my case FF but I at least try to port mine to Chromium). I too basically move the URL from the "title" attribute to the "href" one for the inline outlinks ([see code in repo](https://gitlab.com/n8chz/twitter-usability/blob/master/content.js#L117)):

    $("a[title^='http']").each(function () {
      $(this).attr("href", $(this).attr("title"));
      $(this).removeAttr("title");
    });

But there are also tweets with embedded graphics in a box that links to some article on the web. For these there is no unwrapped link supplied anywhere in any of the nesting-doll-like Twitter elements (I checked). So I brute-forced the d-t.co-ization of these links by using the words in the title of the linked article, and the domain name of the website where it's hosted (these details are supplied by Twitter) as seen here:

    $(".r-1mi0q7o").each(function () {
      if ($(this).text() != "") { // kludge
        let title = $(this).children().first().text();
        let query = title.split(/\W+/).join(" ").trim().replace(/ /g, "+");
        let tld = $(this).children().last().text();
        let site = encodeURIComponent(tld);
        let url = `https://duckduckgo.com/?q=${query}+site%3A${site}`;
        $(this).closest("a").attr("href", url);
      }
    });

The element with class name `r-1mi0q7o` (subject to change without notice, I'm quite sure) has three top-level children, whose `textContent`s are article title, article sample text and article domain (without path), respectively. This jQuery expression is rather brute force, and makes me jump through the intermediate hoop of clicking a link on a search result, but on the plus side I find misses to be very rare, and much more often than not the article in question is the very first one in the search results. 

My browser extension is called Twitter Usability Suite and is available for Firefox at [https://addons.mozilla.org/en-US/firefox/addon/twitter-usability-suite/](https://addons.mozilla.org/en-US/firefox/addon/twitter-usability-suite/).

I have not yet succeeded at running it on Chromium. There seems to be a difference between the browsers either with the attachment of the content script or the firing of the page load event, but I'm not entirely sure what the problem is. The content script seems to be running before the elements it's looking for have arrived.
Teaching Kids to Code
Tags: discuss, beginners
Published: 2019-07-24 17:28:07

My oldest kid (currently age 11) has expressed an interest in learning to code for a while. I've tried working through HTML basics and simple "hello world" type stuff in PHP and Javascript, but it's not really hooking him. 

The most fun code-adjecent thing we've done together was modify Donald Trump's tweets with Inspector and send around the manipulated screenshots 🤣🤣🤣

In any case, I've had a lot of trouble finding resources for kids in his age group. 

Does anybody have any suggestions?
Web Scraping with Python Tutorial
Tags: webscraping, sms, python
Published: 2019-07-24 17:23:13

![](https://thepracticaldev.s3.amazonaws.com/i/7mqnktzvs2lu8fsudnvl.png)
https://youtu.be/JU2GjEEj0TY

In this tutorial, I use BeautifulSoup and Requests in Python to pull the market cap of a stock (AAPL) from Yahoo Finance. Next, we set our program to run everyday and to send us an sms text message with the results.
Reversing a string using an ArrayBuffer
Tags: javascript, programming
Published: 2019-07-24 13:58:17

---
title: Reversing a string using an ArrayBuffer
published: true
description: more string reversal experiments
tags: javascript, programming
series: reversing a string
---

How many more ways are there to reverse a string in JavaScript? I was reading the [friendly manual](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays) again and thought of another way.

The method is let down a little by the `.map()` at the end. I was rather hoping for a less pedestrian way of changing the ArrayBuffer back into normal text.

The other gotcha is that we're storing uint values, so prepare for mangled emojis.
```javascript
function Bruce_ByteBuffer(string) {
  let buffer = new ArrayBuffer(string.length);
  let int8View = new Uint8Array(buffer);
  for (let i = 0, j = string.length - 1; i < string.length; i++, j--) {
    int8View[i] = string.charCodeAt(j);
  }
  return Array.prototype.slice.call(int8View).map(function (item) {
    return String.fromCharCode(item)
  }).join("");
}
```
Speed-wise, using my [framework](https://dev.to/bugmagnet/testing-string-reversal-functions-8m6), it's in the slower end of midrange.
```
Sarah_ForOf                 1997.262 ticks
Bruce_CharAt                3165.792 ticks
Sarah_SplitReverseJoin      3382.125 ticks
Bruce_Recursive2            3423.004 ticks
Theophanis_SplitFor         3765.074 ticks
Nathanael_SplitReverseJoin  3829.166 ticks
Bruce_Recursive1            3981.59 ticks
Sarah_Reduce                4272.548 ticks
Theophanis_SplitFor_Bruced  4310.981 ticks
Sarah_Recursive             4580.1 ticks
Bruce_ArrayApplyMap         6305.892 ticks
Bruce_ReverseGenerator      8994.98 ticks
Bruce_MapSortMap            11262.885 ticks
Bruce_ByteBuffer            15190.07 ticks
Bruce_CharAt2               17016.049 ticks
Bruce_IteratorReverse       103529.193 ticks
Bruce_RegReverse            582476.836 ticks
```
What Makes a Good DEV Post?
Tags: discuss, meta, beginners, tutorial
Published: 2019-07-24 17:12:32

---
title: What Makes a Good DEV Post?
published: true
description: What makes a good DEV post, conversation, discussion?
tags: discuss, meta, beginners, tutorial
cover_image: https://i.ibb.co/LvyfwVS/charles-Lks7vei-e-Ag-unsplash-small.jpg
---

What techniques have really helped your posts spark a conversation or get a bunch of reactions? Which things do you hate to see?

I, for one, strongly prefer when all the article content is on DEV, rather than me needing to click-off to someone's personal website.
Create a Simple and Secure Node Express App
Tags: node, webapp, programming
Published: 2019-07-24 16:45:43

---
title: Create a Simple and Secure Node Express App
published: true
description: Learn how to secure a simple Node.js and Express app by adding user authentication with Passport.js and Auth0.
tags: #nodejs #webapp #programming 
canonical_url: https://auth0.com/blog/create-a-simple-and-secure-node-express-app/
---
In this tutorial series, you'll learn how to create a secure and simple Node.js application built with the Express web framework. You'll see how Passport.js with Auth0 is used to manage user authentication and protect routes. On the frontend, you'll use Pug templates for rendering views along with CSS for maintaining style sheets.

In the first part, you learned how to create a user interface and an API and how to streamline your Node.js development workflow by using nodemon and browser-sync.

In this second part, you'll secure the web app by adding user authentication to it using Passport.js and Auth0.

[Continue Reading 📖](https://auth0.com/blog/create-a-simple-and-secure-node-express-app/?utm_source=twitter&utm_medium=sc&utm_campaign=simple_nodeexpress)
Next.js Practical Introduction: Styling and Theming
Tags: javascript, programming
Published: 2019-07-24 16:38:40

---
title: Next.js Practical Introduction: Styling and Theming
published: true
description: Learn how to handle styling and theming while using Next.js to build server-side rendered React applications.
tags: #javascript #programming 
canonical_url: https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/
---
In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications.

Created by ZEIT, a cloud company for hosting frontends and serverless functions, Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

In the first part of the series, you learned how to create pages and layouts. In this second, you'll learn how to apply styles to pages and create a theme using Next.js 9, the most recent framework version at the time of writing. Familiarity with the React library is recommended.

[Continue Reading 📖](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/?utm_source=twitter&utm_medium=sc&utm_campaign=nextjs-tutp2)
Scraping data of 2019 Indian General Election using Python Request and BeautifulSoup and analyzing…
Tags: beautifulsoup, python, webscraping, requestslibrary
Published: 2019-07-24 16:35:21

---
title: Scraping data of 2019 Indian General Election using Python Request and BeautifulSoup and analyzing…
published: true
tags: beautifulsoup,python,web-scraping,requests-library
canonical_url: https://www.pythoncircle.com/post/683/scraping-data-of-2019-indian-general-election-using-python-request-and-beautifulsoup-and-analyzing-it/?utm_source=devto
---



![](https://cdn-images-1.medium.com/max/700/1*Y8ypg1T4mAMOSeHPV856dw.png)

Do you know that: 

Shankar Lalwani from Indore constituency got 1068569 votes which are highest votes any candidate got in this election season.


C. R. Patil from Navsari constituency won by highest margin i.e. 689668 votes.


Bholanath (B.P. Saroj) from Machhlishahr won by just 181 votes which is the lowest margin among all constituencies.

Total votes cast: 613133300

NOTA votes cast: 6514558

You can fetch much more information like above if you know how to fetch data and analyze it.

Refer below article to know how to Scrape 2019 Indian General election data and analyze it.

[**Scraping data of 2019 Indian General Election using Python Request and BeautifulSoup and analyzing it**](https://www.pythoncircle.com/post/683/scraping-data-of-2019-indian-general-election-using-python-request-and-beautifulsoup-and-analyzing-it/)