teleren/devto huggingface dataset:
YPSKA #6 JAM stack
Tags: javascript, api, staticsitegeneration
Published: 2019-11-17 22:09:52

I first stumbled upon the [JAM stack](https://jamstack.org/) at the [Caribbean Developer Conference](https://www.cdc.dev), great conference by the way. I decided to have a closer look, and has since then grown a certain fondness of it.

It stands for **J**avaScript, **A**PI and **M**arkup, and the basic idea is to create static websites that calls APIs when in need of dynamic data or functionality. 

You will probably see more of the JAM Stack here, since I'm using it to build two of my most recent sites. In the mean time go check it out.
I need help for a changement
Tags: html, javascript, canvas
Published: 2019-11-17 22:05:34

Hi guys! I would like to have an information.
https://pastebin.com/68recZYa
In this code, when I click "Move" button, the image in "myDIV" div go ahead, and the viewport follow him. But I would like that this method would work in a canvas instead of a div. Can you tell me a how can I do it?
Kubernetes, how to get started
Tags: discuss, beginners, devops, tutorial
Published: 2019-11-17 21:51:20


Recently I've published bitesize content(2 min read) about various concepts in [Kubernetes](https://dev.to/adipolak/kubernetes-in-bitesize-2blm) and got you all **excited** about logs, etcd and more.

![](https://media.tenor.com/images/17817c07f6f01962ab774457ce779cc5/tenor.gif)

Packaged it with a [full step by step tutorial](https://dev.to/adipolak/kubernetes-and-virtual-kubelet-in-a-nutshell-gn4) and glossary of everything you need to know to get started as well as things to know and consider when taking Kubernetes to [production](https://dev.to/adipolak/kubernetes-are-you-ready-for-production-ba4) while working for a big corporate (lessons learned from some of the Microsoft teams).


![](https://media1.tenor.com/images/e7e936e67a8fa6fb21371c22d9c079c9/tenor.gif?itemid=5099594)

Where else do you struggle with Kubernetes and basically 
**what would you like to know more about Kubernetes**?

There are no wrong quastions answers. 
Share with me here or on private message on [Twitter](https://twitter.com/AdiPolak).
 DMs are open. Always.
Vue, guard routes with Firebase Authentication
Tags: vue, firebase
Published: 2019-11-17 21:15:29

With Vue Router you might want to guard some paths and redirect users to a signup page if they are not authenticated. I will show you how this is done correctly with Firebase Authentication.

This article assumes you already have implemented your project with [Vue Router](https://router.vuejs.org/) and [Firebase Authentication](https://firebase.google.com/docs/auth)

First, we must mark each route that we want to guard with a meta property called `requiresAuth`.

```js
const routes = [
  {
    path: '/signin',
    component: SignIn,
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      requiresAuth: true,
    },
  },
]
```

In this example, the path `/signin` is allowed for everyone, but `/profile` should only be for signed-in users.

Now we can use the `beforeEach` guard to check for this property.

```js
router.beforeEach((to) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
  if (requiresAuth && !currentUser) {
    return '/signin'
  }
})
```

Now if the `currentUser` is `null` or `undefined`, we should redirect users to the sign-in path. But how do we get `currentUser`? We can’t use `getAuth().currentUser` because on page refresh that property has not been set yet before the guard is triggered. We will have to use the `onAuthStateChanged` callback somehow. Let’s create a function that waits for the auth state to be set.

```js
const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

function getCurrentUser() {
  return new Promise((resolve, reject) => {
    const unsubscribe = onAuthStateChanged(
      auth,
      (user) => {
        unsubscribe()
        resolve(user)
      },
      reject
    )
  })
}
```

This method will return a Promise which resolves `currentUser` as soon as it is set. `onAuthStateChanged` will trigger the callback immediately with either null or the user object if signed in. Then we unsubscribe to not listen for further changes.

Now we will update our `beforeEach` guard so that only paths that require authentication await this method.

```js
router.beforeEach(async (to) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
  if (requiresAuth && !(await getCurrentUser())) {
    return '/signin'
  }
})
```

That’s all. This also simplifies getting the currentUser for components under the guarded routes, because we know `getAuth().currentUser` is set.

For full example check out this [GitHub repository](https://github.com/gautemo/Vue-guard-routes-with-Firebase-Authentication) and demo at [vue-routes-authentication.web.app](https://vue-routes-authentication.web.app/)
Why SVG ?
Tags: svg
Published: 2019-11-17 21:11:43

This is originally posted on [iamtrapti.com](https://www.iamtrapti.com)

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. There are various reasons why we should use this, some are listed below - 

1. [File size] (https://www.sitepoint.com/gif-png-jpg-which-one-to-use/) of well optimised SVG is less than any other image format(ex. png, jpg etc.).
2. [Accessibility](https://simplyaccessible.com/article/7-solutions-svgs/) and [SEO](https://css-tricks.com/accessible-svgs/).
3. SVG's can be animated and interactive. 
4. SVG's are resolution independent and responsive.
5. All Modern [browser support] (https://caniuse.com/#search=svg) SVG.
6. Various tools are available to create SVG's like [Illustrator](https://www.adobe.com/in/products/illustrator/free-trial-download.html), [Figma](https://www.figma.com/) etc.
7. SVG's are easy to read and write. It has syntax like HTML. 
8. Styling can be done on SVG's using id's and classes. 
9. Practical use cases of SVG's are logo, icons, creative graphics, graphs, etc.

**SVG is Awesome.**  
{% codepen https://codepen.io/tripti1410/pen/dBLEar %}

Share in comment if you wanna add more.
What I don't like about beginner Tutorials (YouTube)...
Tags: php, webdev
Published: 2019-11-17 20:53:23

Hello there. Its again another weekly article where i talk about my journey as a beginner who is self taught. As i said in my last article, i have embarked on my journey to learn php professionally. So I went on to check out the laravel(a php framework) page and i was referenced to an awesome learning page called laracast.com . The content on the site is very beginner friendly but the thing I like most of about is it teaches the way things are done in real life by the professional devs themselves. This kind of thing lacks in most if not all YouTube videos for beginners. I think its okay to just introduce someone to the syntax but also teach it the professional way its done. If someone just watches a crash course on YouTube and does project, it will be a lot of volongoto and unproffessional. 
So whenever I watch an episode in the tutorial series on laracast.com , I start to wish every YouTuber  taught the same way or better. 
Therefore, this is a loud call to all YouTubers, TraversyMedia, RTC, DevEd to mention but a few , please have a touch of how things are done, professionally  in the real world so that someone can move from a beginners tutorial of crash course when they can start a project and structure it well.
Thank you so much for reading and please leave a comment about the article down below. 
Blessings!
Getting Started with JavaScript Proxy
Tags: javascript, proxy
Published: 2019-11-17 20:04:02

Have you ever wished you could hook into the process of a fundamental operation on an object in JavaScript and extend it? 

Using the `Proxy` object, we can intercept and define custom behaviour for operations like property lookup, assignment, and function invocation. Effectively, this allows us to overload these operators.

# Background

`Proxy` was first introduced as a standard in [the ES2015 specification](https://www.ecma-international.org/ecma-262/6.0/#sec-proxy-objects). It resides under the idea of [metaprogramming](https://en.wikipedia.org/wiki/Metaprogramming), specifically _intercession_ (a type of reflection).

There are three important constituents when dealing with `Proxy`.

1. **handlers**: These are placeholder objects which contain _traps_.
2. **traps**: These are methods we can use to hook into operations. They provide property access.
3. **target**: The object that our proxy _virtualises_. This is effectively the object that we are proxying access to.

Let's jump into a quick example.

{% gist https://gist.github.com/duncandean/327ec974725ad01dc115a43cb0dd820f %}

Note that even though we never assigned a value to the property `something`, 42 was returned when we accessed it. This is a result of setting the `get` trap on our proxy. We essentially _overloaded_ the `.` operator.

Interestingly, we can create a crude observable of an object using a `Proxy`.

{% gist https://gist.github.com/duncandean/ae1717af84ab3aea70d1b0ea467a3080 %}

Here we use the [Reflect API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) to ensure that we are still setting the actual property and not just calling `onChange()`.

# Proxy in the Wild

Now that you understand some of the basics of `Proxy` we can take a look at how it is being used in some open source libraries to achieve some pretty neat functionality.

We'll take a look at [comlink](https://github.com/GoogleChromeLabs/comlink), a library that makes using WebWorkers much simpler without having to orchestrate all your messages between your worker and the main thread with `postMessage()`. It operates like [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call). You can expose an object with certain properties and methods from the WebWorker scope. These are wrapped as promises in the main thread scope that you can `await`.

An example of comlink usage:

{% gist https://gist.github.com/duncandean/0ae71ba96cac642c2d69eec9a9217524 %}

{% gist https://gist.github.com/duncandean/d0988480193a90eaf084cb7d146a7abe %}

Under the hood, when we call `.wrap()`, [a `Proxy` is being created](https://github.com/GoogleChromeLabs/comlink/blob/96d11972f7e195babbc93cdf2bc75912aaee750a/src/comlink.ts#L206) so that the fundamental operators can be overloaded to provide extra functionality.

`Proxy` has also been used extensively in popular UI frameworks to notify views of any model changes using the `.set()` trap.

The `Proxy` can be a powerful tool for intercession in JavaScript and has great power. Use it wisely. 😉
Firebase React CRUD tutorial. How to use Firebase Firestore with ReactJS.
Tags: react, firebase
Published: 2019-11-17 20:03:43

---
title:  Firebase React CRUD tutorial. How to use Firebase Firestore with ReactJS.
published: true
description: In this React Firebase tutorial we'll build a simple CRUD application using React and Firebase. We'll set up a firestore database with spells from D&D. Our app will get data from the database, update records and also add and remove them.
tags: react, firebase
series: React Firebase
---

{% youtube yyo_TcZCrS4 %}

In this React Firebase tutorial we'll build a simple CRUD application using React and Firebase.

We'll set up a firestore database with spells from D&D.

Our app will get data from the database, update records and also add and remove them.

You can find code here: https://github.com/satansdeer/react-firebase
Firebase auth video: https://www.youtube.com/watch?v=unr4s3jd9qA
polytonic_to_monotonic.py (convert a polytonic ancient Greek document to monotonic)
Published: 2019-11-17 19:43:27

https://github.com/djemos/polytonic_to_monotonic.py

This is a python program to convert a polytonic ancient Greek document to monotonic

Usage: python ./polytonic_to_monotonic.py polytonic_file monotonic_file

Save your ancient Greek polytonic text to a file e.g. polyt.txt then run

python ./remove_accents.py polyt.txt mono.txt
The mono.txt file will contain the monotonic text.

==Ancient Greek doc==
Ὦ κοινὸν αὐτάδελφον Ἰσμήνης κάρα,
ἆρ᾿ οἶσθ᾿ ὅ τι Ζεὺς τῶν ἀπ᾿ Οἰδίπου κακῶν
ὁποῖον οὐχὶ νῷν ἔτι ζώσαιν τελεῖ
Οὐδὲν γὰρ οὔτ᾿ ἀλγεινὸν οὔτ᾿ ἄτης ἄτερ
οὔτ᾿ αἰσχρὸν οὔτ᾿ ἄτιμόν ἐσθ᾿ ὁποῖον οὐ
τῶν σῶν τε κἀμῶν οὐκ ὄπωπ᾿ ἐγὼ κακῶν.
Καὶ νῦν τί τοῦτ᾿ αὖ φασι πανδήμῳ πόλει
κήρυγμα θεῖναι τὸν στρατηγὸν ἀρτίως;
Ἔχεις τι κεἰσήκουσας; ἤ σε λανθάνει
πρὸς τοὺς φίλους στείχοντα τῶν ἐχθρῶν κακά;

==mono.txt==
Ω κοινὸν αυτάδελφον Ισμήνης κάρα,
αρ᾿ οίσθ᾿ ό τι Ζεὺς τών απ᾿ Οιδίπου κακών
οποίον ουχὶ νων έτι ζώσαιν τελεί
Ουδέν γὰρ ούτ᾿ αλγεινὸν ούτ᾿ άτης άτερ
ούτ᾿ αισχρὸν ούτ᾿ άτιμόν εσθ᾿ οποίον ου
τών σών τε καμών ουκ όπωπ᾿ εγὼ κακών.
Καὶ νύν τί τούτ᾿ αύ φασι πανδήμω πόλει
κήρυγμα θείναι τὸν στρατηγὸν αρτίως;
Έχεις τι κεισήκουσας; ή σε λανθάνει
πρὸς τοὺς φίλους στείχοντα τών εχθρών κακά;
remove_accents.py (remove all accents from a polytonic Greek document)
Tags: python, ancient, greek, polytonic
Published: 2019-11-17 19:41:59

https://github.com/djemos/remove_accents.py

This is a python program to remove all accents from a polytonic ancient Greek document

Usage: python ./remove_accents.py polytonic_file monotonic_file

Save your ancient Greek polytonic text to a file e.g. polyt.txt then run

python ./remove_accents.py polyt.txt mono.txt

You will get the new text with no accents in the file mono.txt

==Ancient Greek doc==
Ὦ κοινὸν αὐτάδελφον Ἰσμήνης κάρα,
ἆρ᾿ οἶσθ᾿ ὅ τι Ζεὺς τῶν ἀπ᾿ Οἰδίπου κακῶν
ὁποῖον οὐχὶ νῷν ἔτι ζώσαιν τελεῖ
Οὐδὲν γὰρ οὔτ᾿ ἀλγεινὸν οὔτ᾿ ἄτης ἄτερ
οὔτ᾿ αἰσχρὸν οὔτ᾿ ἄτιμόν ἐσθ᾿ ὁποῖον οὐ
τῶν σῶν τε κἀμῶν οὐκ ὄπωπ᾿ ἐγὼ κακῶν.
Καὶ νῦν τί τοῦτ᾿ αὖ φασι πανδήμῳ πόλει
κήρυγμα θεῖναι τὸν στρατηγὸν ἀρτίως;
Ἔχεις τι κεἰσήκουσας; ἤ σε λανθάνει
πρὸς τοὺς φίλους στείχοντα τῶν ἐχθρῶν κακά;

==mono.txt==
Ω κοινὸν αυτάδελφον Ισμήνης κάρα,
αρ᾿ οισθ᾿ ό τι Ζεὺς τών απ᾿ Οιδίπου κακών
οποίον ουχὶ νων έτι ζώσαιν τελεί
Ουδέν γὰρ ούτ᾿ αλγεινὸν ούτ᾿ άτης άτερ
ούτ᾿ αισχρὸν ούτ᾿ άτιμόν εσθ᾿ οποίον ου
τών σών τε καμών ουκ όπωπ᾿ εγὼ κακών.
Καὶ νυν τί τουτ᾿ αυ φασι πανδήμω πόλει
κήρυγμα θείναι τὸν στρατηγὸν αρτίως;
Έχεις τι κεισήκουσας; ή σε λανθάνει
πρὸς τοὺς φίλους στείχοντα τών εχθρών κακά;
Anas Aldera, Landscape Photographer
Published: 2019-11-17 18:47:50

Anas Aldera is now firmly established as one of the leading landscape photographers in Toronto.
He was born in 1981 and studied marketing, and he got his Masters Degree in Marketing from University of Wollongong in Dubai (UOWD). Then he worked in his family business in the construction industry for the first 15 years of his professional life in Dubai. 
Then he moved to Canada and worked in Digital Marketing business. And he started travelling a lot in Canada and exploring amazing nature places. Throughout this period, he became fascinated by nature. Gradually the landscape and the way it can be revealed to us through light, shade and colors stole him away from the Marketing profession.
His style is unique in that his photographs convey a spiritual quality of serenity and calm. He has established a worldwide reputation for his particular approach to his work. His photographs are shared on his social media platforms like his Instagram account [@anas.aldera](https://www.instagram.com/anas.aldera) , and his Facebook account [anas.aldera2](https://www.facebook.com/anas.aldera2) and his personal website as well  https://www.anasdera.com .
He is working now on starting his own landscape photography business in Toronto, that will help other amateurs to learn and practice landscape photography through hiking trips in Ontario.
How far behind are we? How do we catch up?
Tags: discuss, javascript
Published: 2019-11-17 16:55:37

Hello everyone!

My name is Tanner, and I am a .NET and JS developer. I work for a fairly large company where I develop primarily internal business applications.

I'm writing this post because I am hoping to get some feedback from fellow developers on my current situation.

First, let me explain a bit about our environment, then get on with my overall question. As it exists today, we have a .NET API and an ASP.NET MVC front-end. We setup MVC pages and use Bootstrap, vanilla JavaScript and JQuery to do everything. We do not use any frameworks or other libraries (outside of some basic charts/grids/etc...). All of our pages are essentially coded once and forgotten about. Almost nothing is reusable. The closest we come to re-usability is a master JS file with some common function calls that we use in multiple places.

So, this means that we do not use ES6, linters, or any package managers. Basically, as soon as we get past simple UI setups, we start venturing into JQuery spaghetti code. 

As a young developer, I look around and see all of these cool advancements in JS and front-end development. I feel like we are in the stone age. I feel like everything is a complete mess, and we are just adding to that mess every day.

My question is this. Are we in the stone age? How can we begin to get out of what I see to be a mess?

I am interested in moving towards something like Vue or React, as that will at least get us into the modern era where can at least start doing things with npm, and various libraries etc... However, I am the most junior on our team, and I feel like this will be a huge leap for our team.

Is there any way to help smooth the transition, or to gradually start improving things for a team that is primarily familiar with Microsoft technologies, and are not well versed in JS?

I apologize if this post is too broad. As I said, I am the youngest developer on our team, I see a bunch of problems, but I dont know how to start fixing them. I am looking for guidance from more senior developers.

Thanks,
Tanner
How can i make my career in open source development?
Tags: opensource, career
Published: 2019-11-17 16:20:29

---
title: How can i make my career in open source development?
published: true
description: 
tags: opensource,career
---

I see some people in Twitter whose bio says that they are Open source developer or open source advocate in some xyz company. I am also very much interested in open source development but not sure how to make a good career out of it.

Can anyone please guide?
hello gem steep
Tags: ruby, types, steep
Published: 2019-11-17 15:56:32

---
title: hello gem steep
published: true
tags: Ruby,types,steep
---

Ruby3.0から静的型チェックする機能が追加されるということで、軽く触ったので備忘録です。

SteepというGemを使いました。

{% github soutaro/steep %}

## 練習リポジトリ

{% github YutaGoto/hello_steep %}

## 結果

{% twitter 1196081335770632192 %} 

## やっていること

`lib/` ディレクトリにいつもどおりにクラスを定義します。

```rb
# lib/hello.rb
class Hello
  def initialize(name)
    @name = name
  end

  def say
    "hello, #{@name}"
  end
end
```

`sig/` ディレクトリに型の定義を書いていきます。拡張子は `.rbi` になります。

```rbi
# sig/hello.rbi
class Hello < Object
  @name: String

  def initialize: (String) -> any
  def say: -> String
end
```

メインで使ってみます。

```rb
# app.rb
require "./lib/hello"

hello1 = Hello.new('John')
puts hello1.say

hello2 = Hello.new(123)
puts hello2.say
```

この `app.rb` は `hello2` に代入するときの `Hello` を `initialize`  するときの引数の型が違っています。ただこのまま実行してもとくにエラーもなく実行することができます。
このあたりもチェックさせることができます。

```sh
$ bundle exec steep check --fallback-any-is-error app.rb
app.rb:6:19: ArgumentTypeMismatch: receiver=::Hello.class constructor, expected=::String, actual=::Integer (123)
```

6行目のところで引数の型が違うことを指摘してくれたので、成功です。

## 所管

シンプルなクラス定義などではかなり簡単に使うことができて、とてもよさそうです。
RailsのモデルメソッドやServiceクラスなど部分的にもRailsプロジェクトに取り込めそうでちょっと型安全になるかもしれません。
How to detect HTTP(S) issues in mobile apps
Tags: api, ios, android
Published: 2019-11-17 15:52:19

Most of the mobile and wearable apps will have a cloud back end with which they communicate using APIs. Any failure in this communication may result in unexpected outcomes and broken features. It is very difficult for developers to be aware about any such problem once the app has gone live.

Here is a blog on how to use Finotes to monitor issues in API calls over HTTP(S) in live mobile apps.

https://www.blog.finotes.com/post/how-to-detect-http-s-call-issues-in-mobile-apps
Computing Daily Stock Market Returns in Python
Tags: python, finance
Published: 2019-11-17 15:45:53


Computing stock market returns in Python is simple. The first step is to import the required libraries.
```

import pandas as pd
import numpy as np
import datetime
import matplotlib.pyplot as plt
from pandas_datareader import data as pdr
```

The next step is to get the stock data. I prefer to use yahoo as the source of my data. We use the get_data_yahoo method from the pandas_datareader library which has been imported as pdr. We also specify the start and end date using the datetime method. We will be getting the data for Apple. Therefore, all this is stored in the appl variable.
```
aapl = pdr.get_data_yahoo('AAPL', 
                          start=datetime.datetime(2006, 10, 1), 
                          end=datetime.datetime(2012, 1, 1))
daily_close = aapl[['Adj Close']]

```
Next is to get the returns. Firstly, we extract the daily close quote from the aapl data frame . Then, we apply the pct_change() method on daily_close and store it in the returns variable.

```
returns = daily_close.pct_change()
```

Finally, we can apply the plot method on the returns variable to plot the returns of apple within the time frame

```
returns.plot()
```
Music for Coding: A Spotify playlist for progamming
Tags: productivity, music
Published: 2019-11-17 15:02:23

Do you want to know how to irritate software engineers? Break their focus. Much of what we do is problem solving. Sometimes they are simple, but often they don't have an obvious solution. If we aren't able to focus on the problem at hand then solving it is harder than it should be.

I work in an open-office environment. There are only 4 of us in the room, but it can still be distracting. Someone is on a call. These two are catching up. Did he say my name?
 
#####Downing out the noise is imperative.

I have tried every "focus" playlist Spotify recommended to me, but they all had a problem. Some were too slow and peaceful that I could fall asleep listening to them 😴. Others were catchy, but I find lyrics in music to be distracting.

I wanted something upbeat, not too crazy, no lyrics, but wouldn't put me to sleep. Enter the creatively named [Music for Coding](https://open.spotify.com/user/jdkaiser/playlist/2Uh4sdLSVfCz79j9RWfHcN?si=LSSXROnyR7OObnSeWibVHw). 3 hours of music to drown out the noise when you need it the most. I have been using it for a few months and it hasn't let me down yet. If you are in the mood for something new and different then give it a try. 

Enough distraction - back to that problem! 

{% spotify spotify:playlist:2Uh4sdLSVfCz79j9RWfHcN %}
Arcology Roguelike Lifestream E3
Tags: gamedev, livestream, roguelike, unity3d
Published: 2019-11-17 14:28:13

# Episode 3: Procedural Generation

In this video I continue with the Procedural Generation algorithm, attempting to generate an entire level made up of randomly placed room templates. The video ends with me getting a little stuck on getting the full Procedural Generation to work! (Don't worry the next episode shows the fix...)

{% youtube hiEcoIUmEp4 %}
Arcology Roguelike Lifestream E2
Tags: unity3d, roguelike, livestream, gamedev
Published: 2019-11-17 14:22:40

# Episode 2: Procedural General

In this episode I look at creating the first part of the Procedural Generation for the Levels of the game. This part includes reading in *templates* from files for the various Rooms that will be generated in the game.

I end the video of by displaying a full room template using prefabs created from basic Unity 3D shapes.

{% youtube 00wKbuhFMXg %}