teleren/devto huggingface dataset:
GraphQL Contributor Days -- Front-end Framework Edition August 8th, 2019
Tags: javascript, graphql, frontend
Published: 2019-07-02 18:56:17

GraphQL Contributor Days is back, and we have a special front-end framework focused edition for you! 

The event takes place on August 8th, 2019 from 9am - 1pm PST. For full details and registration, [go here](https://www.thisdot.co/events/graphql-contributor-days-frameworks-edition).

In partnership with Hasura, this event welcomes any and all interested in GraphQL to join the conversation! 

Panelists and speakers from various frameworks, like React, Angular, Ember, and more, will discuss how they’ve integrated GraphQL into their work. 

This is the second GraphQL Contributors Days that is fully online and available for all to join in. We love being able to run an event that accessible for any, no matter where you live in the world! 

![Featured guests](https://thepracticaldev.s3.amazonaws.com/i/nma3dmaa3rs978ij3rey.png)

Our featured guests are: 
- Tracy Lee: Founder, This Dot & RxJS Core Team
- Rajoshi Ghosh: Co-Founder, Hasura
- Tanmai Gopal: Founder, Hasura
- Ryan Chenkie: Developer/Trainer
- Carlos Rufo: OSS Developer
- Sara Vieira: Developer, CodeSandbox
- Mark Stuart: Web Infrastructure, PayPal
- Shruti Kapoor: Software Engineer, Paypal
- Christina Yu: Software Engineer, Paypal
- Joey Nenni: Web Engineering Lead, PayPal
- Gabriel McAdams: MTS2 Software Engineer, PayPal
- Eve Porcello: Instructor, Moon Highway
- Alex Banks: Instructor, Moon Highway

& more to be announced!

Some topics we’ll be discussing:
- Getting started with GraphQL
- Experiences maintaining a GraphQL app:
  - Pros/cons
  - Complexity trade-off
- GraphQL API: Ownership, control & maintenance
  - Do you like precise APIs, or generic APIs that let you do what you 
    want
- API lifecycle:
  - Documentation/exploration
  - Regressions and testing
  - Deprecation
  - Monitoring/usage-analytics
  - Process changes (around debugging/performance)

Have a topic you’d like us to talk about? Join the live chat, and let us know! 

If you’re interested to attend online on August 8th, 2019 for this event, [sign up today](https://www.thisdot.co/events/graphql-contributor-days-frameworks-edition)! 

*Need JavaScript consulting, mentoring, or training help? Check out our list of services at [This Dot Labs](thisdot.co).*
Fireside Chats to stay with us beyond ngAtlanta
Tags: inclusion
Published: 2019-07-02 18:47:55


# We Hosted Diversity Chats and You Should Too- What We Learned
<img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*QO_Iaxa9wyDXhNcLHFyA-A.jpeg" src="https://cdn-images-1.medium.com/max/1600/1*QO_Iaxa9wyDXhNcLHFyA-A.jpeg">



There’s something about diversity that brings everyone together. Whether you’re interested in developing a more inclusive team or you already live and breathe it, discussions about equality can spark opportunities and build communities.

Some of the Angular community’s most talented speakers came together to discuss diversity and inclusion at January’s This Dot Fireside Chats during the ngAtlanta conference, in partnership with the Paved Road Foundation.

The consensus was clear: Changing the gender ratio in the tech workplace is paramount. Together, speakers and attendees were able to dive deep and get personal, while remaining judgment-free, on all things diversity and inclusion.

![](https://cdn-images-1.medium.com/max/8064/1*rPPsUoTXhtFA0yzs7v5ZiA.jpeg)

One of the liveliest hot-button topics we discussed was, “What does it mean to stand up for yourself?”

Speakers and audience members chimed in with their thoughts on what it means to value yourself and expect dignity and respect.

The biggest takeaway? “No matter your level, you still have valuable input.”

It’s more important than ever to encourage everyone to get involved at every level. Developers coming from various non-traditional backgrounds are learning to code and hungry to participate in the growing tech market.

But without mentorship and guidance, new developers will never be able to ramp up to their full potential. Everyone has something to offer the tech world. But first, we must set an example by creating a level playing field.

![](https://cdn-images-1.medium.com/max/8064/1*I5q4DsJ_rHDkvSojAUlT_g.jpeg)

We strongly encourage all organizers to host Diversity Chats at their conferences! Create conversations around inclusion and the new workforce that’s starting to enter the tech world.

Have questions? Email us about our experiences! hi@thisdot.co.

![](https://cdn-images-1.medium.com/max/8064/1*Yfqxj1Tx_llyGQaq6Hq8PA.jpeg)

This post was written by [Kaelyn St James](http://twitter.com/thekaeway), a team member at [This Dot Labs](http://thisdot.co/labs).

*Need JavaScript consulting, mentoring, or training help? Check out our list of services at [This Dot Labs](thisdot.co).*
Vue.js SVG Responsive Component 
Tags: vue, component, svg, responsive
Published: 2019-07-02 18:42:32

---
title: Vue.js SVG Responsive Component 
published: true
description:  A Vue.js component that returns a .svg file 
tags: #vue.js #component #SVG #responsive
---

> Simply Demonstrate a Vue.js component that returns a `.svg` file passed to the component as a property + turn the `img` html tag into a responsive/adaptative element using CSS rules

__Method:__

- we use a computed property to work with the SVG file into the component. 

**note:** _Computed properties_ sit halfway between properties of the data object and methods: we can access them **as if they were properties of the data object**, but they are specified as functions...
- we create a computed property function that returns the `.svg` file path using the `require()` method to access the `assets` folder
- we create the full path to the `.svg` source file using the value stored/passed as the property (props) of the component `this.SVGFile`
- we use the ES6 template literal syntax to construct the full path dynamically...
- we bind the value of the computed property to the `src` attribute of the `img` html tag...
- the `responsive-img` CSS class will let the `img` tag to automatically fit the size of its parent container


component `src\components\SVG-image.vue`

```vue
<template>
    <img class="responsive-img" alt="JS logo" :src="path">
</template>

<script>
export default {
  name: 'SVG-image',
  props: {
    SVGFile: String
  },
  computed: {
    path(){
      return require( `@/assets/svg/${this.SVGFile}`)
    }
  }
}
</script>

<style lang="scss" scoped>

.responsive-img{
  max-width: 100%;
  height: auto;
}

</style>
```
Using the component `src\App.vue`

```vue
<template>
  <div id="app">
    <main>
      <SVGImage SVGFile='logo-js.svg'/>
    </main>
  </div>
</template>

<script>
import SVGImage from './components/SVG-image.vue'

export default {
  name: 'app',
  components: {
    SVGImage,
  }
}
</script>
//...
```
![gif](https://raw.githubusercontent.com/Drozerah/MyGitHubStorage/master/gif/svg-component/vue-svg-component.gif)

## Check it out !

### Get a local copy of this repository

```
$ git clone https://github.com/Drozerah/vue-svg-responsive-component.git
```

### Project setup
```
$ npm install
```

### Compiles and hot-reloads for development
```
$ npm run serve
```

### Compiles and minifies for production
```
$ npm run build
```
Once you are done with the compilation, simply:

```
$ cd dist
```
Then go live your `index.html` with your local development server...

That's it!

[Vue.js SVG Responsive Component](https://github.com/Drozerah/vue-svg-responsive-component)

Thanks for reading!

See you next time!

Drozerah
What do you think about Mozilla Firefox weakening TLS security?
Tags: browser, security, discuss, https
Published: 2019-07-02 18:26:08

---
title: What do you think about Mozilla Firefox weakening TLS security?
published: true
description: Mozilla to implement support for man in the middle attacks.
tags: browser,security,discuss,https
---

Mozilla Firefox is about to add an option (which is enabled by default!) that will make it easier for anti virus software to act as man in the middlle in order to decrypt and analyze encrypted HTTPS connections.

More information can be found in the mozilla [knowledgebase](https://support.mozilla.org/de/kb/how-disable-enterprise-roots-preference).

I think this fundamentally subverts the whole purpose of TLS and trusted CAs. It is sad that browser manufacturers have to add security loopholes in order to gain acceptance of clueless users who expect higher security through running useless anti virus software.

Maybe there is a security expert around who can reasonable justify and explain this step?
Draws Graphs in the Terminal with Python
Tags: python, cli
Published: 2019-07-02 18:23:24

---
title: Draws Graphs in the Terminal with Python
published: true
description: python
tags: python, cli
---
<img src="https://thumbs.gfycat.com/AnguishedWeepyBluebottlejellyfish-small.gif">

If you are an advanced Linux or Mac user, you may use the terminal often. 

Sometimes the **terminal commands** you run show a **progress bar**.

Like this:

<img src="https://user-images.githubusercontent.com/45363/43405623-1a2cc4d4-93cf-11e8-8c96-b7134d8986a2.png">

Wondering how to show a progress bar in the terminal?

You can with <a href="https://github.com/mkaz/termgraph">termgraph</a>

If you have a simple data file like this:

    # Example Data Set 1
    2007    183.32
    2008    231.23
    2009     16.43
    2010     50.21
    2011    508.97
    2012    212.05
    2014 1.0

Then you can plot it like this:

    ~  ~/.local/bin/termgraph data.txt
    
    2007: ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 183.32
    2008: ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 231.23
    2009: ▇ 16.43
    2010: ▇▇▇▇ 50.21
    2011: ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 508.97
    2012: ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 212.05
    2014: ▏ 1.00 


## From Python

Yes, you want to do this from code!

You can use this module from Python like this:

    from termgraph import termgraph as tg

    labels = ['2007', '2008', '2009', '2010', '2011', '2012', '2014']
    data = [[183.32, 190.52], [231.23, 5.0], [16.43, 53.1], [50.21, 7.0], [508.97, 10.45], [212.05, 20.2], [30.0, 20.0]]
    normal_data = [[48.059508408796894, 50.0], [60.971862871927556, 0.0],
                   [3.080530401034929, 12.963561880120743],
                   [12.184670116429496, 0.5390254420008624],
                   [135.82632600258734, 1.4688443294523499],
                   [55.802608883139285, 4.096593359206555],
                   [6.737818025010781, 4.042690815006468]]
    len_categories = 2
    args = {'filename': 'data/ex4.dat', 'title': None, 'width': 50,
            'format': '{:<5.2f}', 'suffix': '', 'no_labels': True,
            'color': None, 'vertical': False, 'stacked': True,
            'different_scale': False, 'calendar': False,
            'start_dt': None, 'custom_tick': '', 'delim': '',
            'verbose': False, 'version': False}
    colors = [91, 94]
    tg.stacked_graph(labels, data, normal_data, len_categories, args, colors)


More info:

* https://github.com/mkaz/termgraph/blob/master/tests/test_termgraph.py
* https://pythonbasics.org/
* https://pythonprogramminglanguage.com/
Why Spy with my little Chai
Tags: testing, discuss
Published: 2019-07-02 17:44:28

Recently my TDD moment clicked, so my first opinion on something has surfaced! Secondly I have to say I'm sorry for the awesome title (not sorry).

It strikes me that spies are not such a good thing in tests. If you have to spy then your code is not testable in the first place, otherwise you might want to write some integration style tests. Am I right? What do you think?
Generate CLI for any Python object
Tags: python, programming
Published: 2019-07-02 17:42:23

---
title: Generate CLI for any Python object
published: true
description: python, programming
tags: python, programming
---
<img src="https://thumbs.gfycat.com/ImpracticalExaltedAntelopegroundsquirrel-size_restricted.gif">

You can generate command line interfaces (CLI) easily with <a href="https://github.com/google/python-fire">the fire module</a>. For the Linux or Apple terminal.


This is for a *Python object*, so you need to know the <a href="https://pythonbasics.org/class/">object oriented programming paradigm</a>.


    class Bot():
        def hello(self, name):
            print("Hello " + name)

        def whatsup(self):
            print("All good!")

Then import the fire module and load it in the main function.

    import fire

    class Bot():
        def hello(self, name):
            print("Hello " + name)

        def whatsup(self):
            print("All good!")

    if __name__ == '__main__':
        fire.Fire(Bot)

Then in the command line:

    λ  ~  python example.py
    Type:        instance
    String form: <__main__.Bot instance at 0x7fa7e1062320>

    Usage:       example.py 
                 example.py hello
                 example.py whatsup

<img src="https://media.tenor.com/images/1e6772cb6fa4e46b51fd1db2fb26d723/tenor.gif">

Need to write arguments with the command :)

You can do:

    λ  ~  python example.py hello bob
    Hello bob

To call the other method

    λ  ~  python example.py whatsup  
    All good!
    λ  ~  

Yes, all methods of the class are included.



More on Python:

* https://pythonbasics.org
* https://pythonprogramminglanguage.com/
Announcing the General Availability of the Auth0 SPA JS SDK
Tags: identitymanagement, idaas, authentication
Published: 2019-07-02 17:26:00

---
title: Announcing the General Availability of the Auth0 SPA JS SDK
published: true
description: Auth0 has a new SDK for securing single page applications with industry best practices.
tags: #identitymanagement #IDaaS #authentication
canonical_url: https://auth0.com/blog/introducing-auth0-single-page-apps-spa-js-sdk/
---
We are excited to announce the release of our new JavaScript SDK for Single Page Applications (SPAs) called auth0-spa-js.

Why a New SDK?
The auth0.js library has been our default browser-based SDK for the last few years and has been a key part of our product and success. It has over 100K+ weekly downloads and is used by almost every Auth0 customer in one way or the other.

Over this time, we have developed a large set of capabilities in the core product. As the platform has moved forward, auth0.js has grown in size and capabilities. While auth0.js is an extremely powerful SDK that can handle a large number of different scenarios, this versatility comes at a price.

We went back to the drawing board and we re-imagined how a web platform SDK should work for the most common scenarios developers will be implementing. 

[Continue Reading 📖](https://auth0.com/blog/introducing-auth0-single-page-apps-spa-js-sdk/?utm_source=dev&utm_medium=sc&utm_campaign=auth0_spajssdk)
Analogical naming - yay or nay?
Tags: discuss
Published: 2019-07-02 16:28:45

---
title: Analogical naming - yay or nay?
published: true
tags: discuss
---

I'm working on a project and struggling with one of the two hard things - naming things. I have names - but I don't really like them (the most descriptive names I could find for the two main roles only differ in a single letter)

When I picked a name for the project itself, I used an analogy to fantasy adventures. The software itself is not related to the fantasy genre, but I'm starting to think about using the same analogy to name some of the major components and processes in my architecture.

But I'm still not sure about this. It was fine for naming the project itself - projects need unique and memorable names - but the names inside the project should be as descriptive as possible, to aid readers who need to understand what does what. Not that I suggest arbitrary naming - I have a clear and concise analogy and I'm not going to just pick a random fantasy term for every software term that needs to be named - but I still fear it may look unprofessional to have classes named `Adventurer` or `Wizard` or `GuildHall`...

Should I go for it?
Using StreamReader to Read a Text File
Tags: csharp, tutorial, beginners
Published: 2019-07-02 16:17:25

---
title: Using StreamReader to Read a Text File
published: true
tags: csharp,tutorial,beginners
series: C# File I/O
cover_image: https://wellsb.com/csharp/wp-content/uploads/sites/2/2019/05/beginners-file-read-min.png
---

This is the third part in a series about C# file i/o operations.  In this tutorial, you will learn how to use the StreamReader object in C# to read the contents of an existing file.  This could be useful, for example, for reading a settings file or for restoring default settings from a file, particularly when a database is unnecessary.

You will learn how to use the ReadToEnd() method, the ReadLine() method, and the Read() method.  The tutorial also details how to ensure your StreamReader object is properly disposed, even if an error occurs.  Finally, the tutorial covers the basics of handling C# file i/o errors.

Click through to the source for the full tutorial: [Source](https://wellsb.com/csharp/beginners/async-write-to-text-file-csharp/)
VWC MVP, Eddie Prislac
Tags: gatsby, showdev, react, javascript
Published: 2019-07-02 16:16:35

---
title: VWC MVP, Eddie Prislac
published: true
description: Shouting out one of our own
tags: gatsby, showdev, react, javascript
---

One of the new things I wanted to do was to to give veterans performing well in our unit more forward facing accolades and recognize them for their work and commitment to helping Vets Who Code build world class JavaScript developers. One of those veterans is Eddie Prislac.

Eddie is a Marine who transitioned into web development a decade ago, the hard way, which means he made all the mistakes on his journey into the industry. He is currently a Sr. Software Engineer at Railroad19, contracted to NBC and started volunteering on our mentorship team about two years ago. While always being helpful to troops, he felt that he could do more, so this year, we had him lead the pre-work component of Vets Who Code.

Pre-work, as the person who initially created the process, is the single most **DIFFICULT** part of VWC. You have to have the intestinal fortitude to say the hardest word to your fellow veteran, no, to ensure that the people we bring into the channel will respect the time put into training 
 them, resources that our partners donate to us, the time that mentors donate, and to ensure that the slack channel is filled with hard working, eager troops. He is the gatekeeper, the first line of defense to ensuring that your donations and resources are being properly, the Heimdall of #VetsWhoCode. He is the person who you have to get past to to get an interview, and the price is finishing our [pre-work](https://github.com/Vets-Who-Code/prework) that is posted publicly on Github. We do this to see if you have what it takes to be a dev. Are you disciplined enough to do the work? Brave enough to ask questions? Comfortable with failure? But more importantly, **WILLING** to do the work? Software engineering is a tough skill to acquire, and in a world filled with code-schools who will take you just because your federally insured GI Bill, it shocks some veterans that a remote, online nonprofit that teaches veterans for free has a higher bar of entry to enter than most for-profit programs, but we do this to ensure our troops can be prepared for this career field and it's a standard he proudly upholds.

The other part of his duties is dealing with veterans who don’t handle rejection well. The harsh reality is we live in a world where lies travel at twice the speed than truth does and sensationalism sells. I explained this to him and he still took the duties and continued after recently experiencing his first “Angry Veteran” situation, who happened to be another Marine ( Wanna upset a Marine super fast? Be a Marine while not acting like a Marine). He handled the situation masterfully and its one of the many reasons why he is one of VWC's MVPs. Follow him on twitter [@semperfried76](https://twitter.com/semperfried76) and thank you for your continued service with #VetsWhoCode.
when i move image to new positon it also shows the old image with old position which i dont want pls help
Tags: javascript
Published: 2019-07-02 16:11:33

```

const cvs = document.getElementById("game");
const ctx = cvs.getContext("2d");
const ROW = 15;
const COL =15;
const VACANT = "WHITE"
const SQ =40;
function drawSquare(x,y,color){
  ctx.fillStyle = color;
  ctx.fillRect(x*SQ,y*SQ,SQ,SQ);
  ctx.strokeStyle = "Black";
  ctx.strokeRect(x*SQ,y*SQ,SQ,SQ);
}
//create board 
let board= [];
for(r =0;r<ROW; r++){
   board[r] = [];
   for(c=0;c<COL;c++){
       board[r][c]=VACANT;
   }
}
//Draw the Board
function drawBoard(){
  for(r =0;r<ROW; r++){
   for(c=0;c<COL;c++){
       drawSquare(c,r,board[r][c]);
   }
  }
}

drawBoard();



let foodImg = new Image();
foodImg.src = "images/food.png" ;
let playerImg1 = new Image();
playerImg1.src = "images/player1.jpg" ;
let playerImg2 = new Image();
playerImg2.src = "images/player2.jpg" ;
//Block image
let blockImg = new Image();
blockImg.src = "images/block.jpg" ;
//let  blockImg = document.getElementById('block1');
let food = {
x: Math.floor(Math.random()*8 + 12) * SQ,
y: Math.floor(Math.random()*13 + 1) * SQ
}
let player1 ={
x: Math.floor(Math.random()*0 + 2) * SQ,
y: Math.floor(Math.random()*4+ 0) * SQ

}
let player2 ={
x: Math.floor(Math.random()*3 + 12) * SQ,
y: Math.floor(Math.random()*13 + 6) * SQ

}
//control Player
let d;
document.addEventListener("keydown",direction)
function direction(event){

  if(event.keyCode == 37){
     
      player1.x -= SQ * 3;
       
  }else if(event.keyCode == 38 ){
     player1.y -= SQ * 3;
  }else if(event.keyCode == 39){
     player1.x += SQ * 3;
  }else if(event.keyCode == 40){
     player1.y += SQ * 3;
  }

moveCharacter();
}
function moveCharacter(){
 ctx.clearRect(0,0, player1.x.width, player1.y.height);

  ctx.drawImage(playerImg1,player1.x,player1.y) ;
   
  ctx.drawImage(playerImg2,player2.x,player2.y);
    
}
function draw(){
  
	ctx.drawImage(foodImg,food.x,food.y);
	ctx.drawImage(playerImg1,player1.x,player1.y);
  
	ctx.drawImage(playerImg2,player2.x,player2.y);
    for(let i = 0 ; i<=10; i++ ){
    	let block ={
x: Math.floor(Math.random()*8 + 3) * SQ,
y: Math.floor(Math.random()*13 + 2) * SQ

}    

let j = ctx.drawImage(blockImg,block.x,block.y) ;
      
      j
      
	}


}

draw();
var button = document.getElementById("button");
button.addEventListener("click", draw); 


```
Vector - A High-Performance Logs & Metrics Router Written In Rust
Tags: showdev, logging, observability, rust
Published: 2019-07-02 16:00:43

---
title: Vector - A High-Performance Logs & Metrics Router Written In Rust
published: true
description: Vector - A High-Performance Logs & Metrics Router Written In Rust
tags: #showdev #logging #observability #rust
---

Hi everyone, we just released [**Vector**](https://github.com/timberio/vector), an open-source logs and metrics collector built in Rust.

{% github https://github.com/timberio/vector %}

Basically, Vector rides along with your app collecting useful data (logs and metrics) and forwards it to a service of your choice. Ex: Elasticsearch, S3, CloudWatch Logs, and so on. This decouples your app from any specific vendor, giving you control, data ownership, and flexibility. Not to mention it's [quite a bit faster](https://docs.vector.dev/performance) :) 

The docs and website provide a deeper dive:

* Github: https://github.com/timberio/vector
* Docs: https://docs.vector.dev/
* Website: https://vector.dev

Let us know what you think!