teleren/devto huggingface dataset:
Line by Line:  leaflet.js 
Tags: javascript, beginners
Published: 2019-05-14 00:04:06

## Introduction 

Leaflet.js is a JavaScript library for creating maps.
JS classes are functions. 

Example:

```
function Person() {
            this.firstName = "unknown";
            this.lastName = "unknown";
            this.getFullName = function(){
                return this.firstName + " " + this.lastName;
            }
        };

var person1 = new Person();
person1.firstName = "Steve";
person1.lastName = "Jobs";



```

## Up and running 

1. Declare var mapData which is a an object literal with the center key and zoom key. The values of which are the longitutde and latitutde and an integer representing the zoom level. Increasing numbers mean increased zoom level

```
var mapData = {
   center: [35.083498, -106.651960],
   zoom: 16
}


```

2. 
 Use the map class of leaflet to create a map on a page
 Instantiate a new map by calling on the map class which takes 2 arguments: the DIV id wherein the map will be placed within 
           the object literal 


```
var map = new L.map('map', mapData);


```

3. Display the tile layers on the map using the TileLayers class
  Wikipedia A tiled web map, slippy map[1] (in OpenStreetMap terminology) or tile map (raster or vector) is a map displayed in a browser by seamlessly joining dozens of individually requested image files over the internet. 
The Tilelayer class takes as an argument the tilelayer from the specified provider (openstreetmap)


```
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');


```
Reader Question Round-Up, Part 4
Published: 2019-05-13 22:39:34

---
title: Reader Question Round-Up, Part 4
published: true
description: This week's edition of the reader question round-up features questions about software design, learning, and a couple of terms that I've coined during my years of blogging.
tags: 
---

I've taken to doing a Youtube video where I answer reader questions every few weeks or so.  This one in particular features a question about my blog post series on the so-called "[Expert Beginner](https://daedtech.com/how-developers-stop-learning-rise-of-the-expert-beginner/)."

Since people here have recently been chatting about that, I thought I might cross post this latest video here.  I'm embedding a frame below.

Here are the topics that I tackle in the video.

1. 1:02 How to Reconcile YAGNI and TDD (without test cruft)?
2. 5:27 How to Get Expert Beginners Learning Again?
3. 8:52 Resources for Thinking Like a Programmer?
4. 12:22 What Has Changed to Make the [Efficiencer](https://daedtech.com/your-job-title-of-tomorrow-efficiencer/) Path Easier to Follow?

{% youtube pu9JVCGwmtI %}
Creating a network graph using nodes and links(loop) D3
Tags: javascript
Published: 2019-05-13 22:19:53

I am trying to plot a network graph using nodes and links.
so far I was able to plot the nodes only.

Nodes graph:



to draw the links between those nodes I have to iterate through the data to extract the nodes location. Below is a sample of the data:

    "links": [
        {"node01": "site05", "node02": "site08", "amount": 10},
        {"node01": "site05", "node02": "site02", "amount": 120},
        {"node01": "site05", "node02": "site03", "amount": 50},
        {"node01": "site05", "node02": "site07", "amount": 80},
        {"node01": "site05", "node02": "site09", "amount": 210},
        {"node01": "site05", "node02": "site10", "amount": 350}]
    
    "nodes": [
        {
          "id": "site09",
          "x": 317.5,
          "y": 282.5
        },
        {
          "id": "site01",
          "x": 112,
          "y": 47
        },
        {
          "id": "site03",
          "x": 69.5,
          "y": 287
        }]

I tried using a for loop but I don't think my approach is correct.

    window.onload = function(){
    var svgCanvas = d3.select("svg") //setting up the canvas
    .attr("width", 960) 
    .attr("height", 540) 
    .attr("class", "svgCanvas");
    
    
        d3.json("map.json", function(data) {
            console.log(data);
    
     svgCanvas.selectAll("circle.nodes")
            .data(data.nodes).enter() 
            .append("circle") 
            .append("svg:circle")
            .attr("cx", function(data){
                return data.x;})
            .attr("cy", function(data){
                return data.y;})
            .attr("r", 10);
    
    var myMap=new Map();
    myMap.set(links.data,nodes.data);
    for (var [key,value] of myMap){
        console.log(key+'='+value);
    }
        })
    }
The day I failed to prove I’m not a robot
Tags: wekan, kanban, robot
Published: 2019-05-13 20:17:32

---
title: The day I failed to prove I’m not a robot
published: true
description: The day I failed to prove I’m not a robot
tags: wekan, kanban, robot
---

Some months ago I got comments from Wekan users that I’m making so many releases of Wekan per day (record amount is 7 releases per day) so some are thinking that maybe I am a robot.

Some days ago I did register new user account to website that is about making robots. I jumped through a lot of hoops, when trying to register, answering basic math questions, refilling registration form and changing calculations, and changing my profile picture to another, as was instructed in registration info. I got logged into website, and browsed robot building instructions.

But today I got email from that website, that I had my account have been cancelled, because I had failed to prove I’m not a robot.

I’m thinking, my photo most likely looks too much like a robot.

It seems that I have to accept my destiny, and try to live my life as a robot, because I’m unable to prove I’m a human.

BR,

xet7

(posted originally at: https://blog.wekan.team/2019/05/the-day-i-failed-to-prove-im-not-a-robot/index.html)
What I've learned lately - 20190513
Tags: todayilearned, react, graphql, aws
Published: 2019-05-13 19:30:28

I'm getting married this year. Literally the last possible day of the year, to be exact. 

Ya know that wedding website thing that people do? We're doing that too. Except, instead of using some of the existing tooling out there, i.e. Minted or The Knot, I saw a learning potential there.

Why not use it to learn something cool? I hadn't ever used some of the AWS stuff, and I wanted to give it a shot. So, like 20 minutes later, I had my AWS Amplify Console up and running, connected it to my GitHub, and fired up the website. I'm still not totally certain about a good bit of it. But it was *cool*.

I'm using React for the front-end, so I set up an AWS AppSync GraphQL back-end for it. Mainly for the most overly ambitious RSVP system of all time (again, learning new stuff). 

I'm not done with it yet, but I may share it here when I finish. Or maybe the source code. Anyway, that's what I'm learning right now. I don't know much about this kinda thing, as I'm mostly a Microsoft developer, but it's awesome, and I want to use it more.
React Native Full Width Horizontal ScrollView
Tags: reactnative, android, javascript, ios
Published: 2019-05-13 18:47:47

---
title: React Native Full Width Horizontal ScrollView
published: true
description: React Native Full Width Horizontal ScrollView
tags: #reactnative #android #js #ios
---

Source : <a href="https://www.skptricks.com/2019/05/react-native-full-width-horizontal-scrollview.html">React Native Full Width Horizontal ScrollView </a>

This tutorial explains how to create react native full page width swipeable horizontal scrollView layout for android or ios device. In this example we have created simple swipeable horizontal view and when you can perform swipe left and right operation in your android or iOS device using below code, then you will find below observation:
1. when user swipe left in the device, then it will navigate user to next page or view.
2. when user swipe right in the device, then it will navigate user to previous page or view.

Basically, react native ScrollView component provides a very special property named as pagingEnabled = { boolean }  , in which Boolean can have one of two values either true  or false . pagingEnabled  allows you to stop at every single view during scrolling.

<img src="https://3.bp.blogspot.com/-ey0ntuJOwDs/XNj0QghRLII/AAAAAAAACy0/EfxKPtIS1F088rirKUqeMdjRJ5xqrjEpACLcBGAs/s400/react-native-full-width-horizontal-scrollview.jpg" alt="React Native Full Page Width Swipeable Horizontal ScrollView" />

<a href="https://www.skptricks.com/2019/05/react-native-full-width-horizontal-scrollview.html">Click here to read more</a>
Changelog: Upgraded Editor
Tags: meta, changelog, webdev, preact
Published: 2019-05-13 17:41:15

Hey folks, just wanted to let you know that we just shipped some upgrades to the editor for creating DEV posts.

Most of the functionality is the same, but things have moved around a bit. 

Importantly, both versions of the editor ("v1", where you define meta info in "frontmatter" and "v2" which is more of a GUI) are now part of the same codebase, and both now include localStorage saving of drafts in progress (just in case your browser crashes etc.)

"v2" is also now the default for new users. We'll forever use markdown for the body of posts, but the frontmatter yaml for defining the rest of the info is not what everyone wants.

The editors are written in [Preact](/t/preact), and now that we have unified the codebase with a good library for state management, we should be able to ship fixes and improvements at a faster pace.

Please feel free to offer feedback here. If you hate anything we've done, don't worry: We'll be finally shipping the create/update API for posts so you can write your own markdown editor! 😋

Let us know if you run into any new bugs.

Happy coding!
How long did it take you to get comfortable with the command line?
Tags: beginners
Published: 2019-05-13 18:04:35

---
title: How long did it take you to get comfortable with the command line?
published: true
description: 
tags: beginner
---

I'm curious:

**Experienced devs:**
How long did it take you to get comfortable with the command line?

**New devs:**
What's the biggest challenge you've faced learning to use the command line versus graphical interfaces?
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2019-05-13 17:54:37

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Share The Power

HTTP verbs and resource URLs allow for basic interaction with an API, but K recommends providing additional functionality to support your users. This post shares the what, when, and why for providing parameters and query strings.

{% link https://dev.to/moesif/rest-api-design-best-practices-for-parameters-and-query-string-usage-31l6 %}

#2. Recommended Reading
 
Despite the title, this list of 8 books is great for not only aspiring JS devs, but all JS devs.

{% link https://dev.to/jerodsanto/8-great-reads-for-aspiring-javascript-devs-3bpa %}

#3. Do you have any questions?

Remember, a job interview goes both ways! Milecia shares important questions to ask during an interview.

{% link https://dev.to/flippedcoding/10-questions-you-should-ask-in-a-web-dev-interview-1c2d %}

#4. A Helpful Tool

Next time you're stuck, try to solve your problem in plain words. Ali explains the benefits of pseudocode and how to approach it.

{% link https://dev.to/aspittel/moving-past-tutorials-pseudocode-13a6 %}

#5. Pipeline Benefits

Marko shares a quick overview about continuous integration and continuous deployment - a practice that helps teams ship bug-free code on a regular basis.

{% link https://dev.to/markoa/ci-cd-pipeline-a-gentle-introduction-2n8k %}

#6. You Deserve It!

Tomasz shares some practical tips for speaking at conferences - things they wished they knew when they submitted their first CFP.

{% link https://dev.to/tlakomy/what-i-wished-someone-told-me-about-speaking-at-tech-conferences-3opp %}

#7. People & Ice Cream

As part of the "Data Structures with Javascript" series, this post walks us through creating and visualizing a directed graph.

{% link https://dev.to/emmawedekind/creating-graphs-with-javascript-4efm %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
What C# 8 Features Are You Most Excited For?
Tags: discuss, msbuild, csharp
Published: 2019-05-13 17:47:31

---
title: What C# 8 Features Are You Most Excited For?
published: true
description: Catching up on MS Build 2019, the preview into C# 8 has me excited.
tags: #discuss #msbuild #csharp
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5olaghuvobpq0dwyf1s9.png
---

I'm just now starting to catch up on [Microsoft Build 2019](https://www.microsoft.com/en-us/build), and even in the early stages I'm excited to put these new features to use.

For me, I'm looking forward to pattern matching and nesting [switch expressions](https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-8#switch-expressions).


What C# 8.0 features are you most excited to see?
Nexmo Get Call on WebApp using Websocket 
Tags: help, nexmo, websocket, voice
Published: 2019-05-13 17:38:09

I am creating an application in NodeJS using Express and Nexmo Voice API.

The Scenario is to get a Inbound call in the Web Browser of our Agent, So that he or she can get details of the client in the CRM

Nexmo allow us to use websocket endpoint and i got it to make call and get it to desktop, but dont know to make it accept calls and send replies from the agent.., I dont know how to stream audio two way..any help?
What's the point of our devices becoming so powerful?
Tags: future, discuss, tech
Published: 2019-05-13 17:37:43

We all know that consumer devices (our phones, laptops, desktops, etc.) are getting more and more powerful each day. A few years ago, 2 GB of RAM in a smartphone was a pretty big deal. Now we dirt phones with 6 GB of RAM, same is the case for processors.

How much of this performance do we actually utilise? What do we do with this much compute power? The most intensive thing an average person like you or I would do is play games (or mine cryptocurrencies). Most of the time, our devices sit idle, doing nothing, wasting all that compute power.

What if there was a way to provide our devices' compute power to someone more in need. You could say we could rent our devices or something. But hey! nobody wants to give their device to a stranger. You shouldn't, it is yours, you paid for it with your hard earned money. What if we could rent only our compute power to someone? We wouldn't have to move a muscle, while our devices, that previously used to sit idle, would now do someone's work on their own, and we earn money while doing nothing.

How feasible is this? What are its security implications? Would we be okay to increase our energy usage (and consequently our carbon footprint) just for a little rent money?

All these questions really interest me and I would love to talk about them.
Changelog: Zen Mode
Tags: changelog, meta, webdev
Published: 2019-05-13 17:30:21

I loved this post from a while ago:

{% link https://dev.to/detunized/dev-zen-mode-userscript-12bd %}

So this weekend, while working on some other stuff, I implemented this as a native feature. It's a feature that hides elements on the page with a key stroke. It minimizes the design so you can focus on reading. And then you can bring back navigation with another keystroke.

![](https://cl.ly/387a659aef70/Image%202019-05-13%20at%201.26.52%20PM.png)

That article's implementation used <kbd>shift + z</kbd> to accomplish this. I went with simply the <kbd>0</kbd> button, which is located right next to the arrow keys on the num pad. I could see an argument for other key configurations, though. So we can see how this works in the wild and get feedback.

We're going to be looking at de-cluttering the design in general over the next few weeks, but this was a simple addition that will always have a place one way or another.

This feature won't yet be available on all articles until the cache clears, and I have already noticed a bug in the use of "toggle", where things kind of get out of sync. So I want to go back and implement it a bit differently.

P.S. That "working on some other stuff" was an update to the site's editor:

{% link https://dev.to/devteam/changelog-upgraded-editor-45mk %}

Happy coding!
Changelog: Tweet Suggestions and other tools for authors
Tags: meta, changelog
Published: 2019-05-13 17:15:40

---
title: Changelog: Tweet Suggestions and other tools for authors
published: true
description: DEV authors can now propose tweets for their articles, and a few more tools. 
tags: meta, changelog
---

DEV authors now have new ways to manage and share their posts.  From both the [dashboard](https://dev.to/dashboard) and individual post pages, you’ll see a new Manage button.

![manage button location](https://cl.ly/975b170d00bf/Image%202019-05-12%20at%201.53.13%20PM.png)

After clicking that button, you’ll see a page that looks like this:

![screenshot of manage area](https://cl.ly/92891717bc79/Image%202019-05-12%20at%201.54.48%20PM.png)

We’ll likely be adding features to this page over time, but let’s talk through a few items on this page that you can immediately use:

### Suggest a Tweet
The primary new feature is the ability to **Suggest a Tweet**.  This is an opportunity to propose a tweet for your post which will go out across one of our Twitter accounts.  In addition to our main [@ThePracticalDev](https://twitter.com/@ThePracticalDev) account, we also have a growing number of topic-specific accounts such as [@TheBeginnerDev](https://twitter.com/TheBeginnerDev), [@the_ruby_dev](https://twitter.com/the_ruby_dev), etc.  You can view the full list of DEV-affiliated Twitter accounts [here](https://dev.to/page/twitter).

We can’t share every tweet that gets proposed, and we reserve the right to make adjustments to the suggested copy, but this has already proven to be a great feature for authors.  We quietly launched the feature a few weeks ago and it’s been working really well.

### Experience Level
As an author, you now have the ability to assign the “experience level” of your post.  This feature was described more fully in Ben’s original Changelog post, but the options is now available for authors in addition to community mods:

{% link https://dev.to/devteam/new-experimental-feature-target-experience-level-for-posts-2g3j %}

Filling out the experience level of your posts will help provide a _gentle_ indicator to the feed algorithm, giving your target audience a slightly higher likelihood of encountering the article in their feed.

### Mute notifications
If you’ve been fortunate enough to have one of your DEV posts get super popular, you might have experienced the desire to disable notifications for that specific post.  This feature has technically been available from the Dashboard for a while, but we think it makes a lot more sense for it to live on this `/manage` page.

I tend to make use of this option when I have a [#discuss](/t/discuss) post that is racking up replies.

---

That's it!  If you have any questions or feedback, please leave a comment, send us an email, or open a GitHub issue ✌️
Building a Ruby gem with CLI that scrapes data from an online page
Tags: cli, ruby, nokogiri, objectorientedruby
Published: 2019-05-13 16:44:44

---
title: Building a Ruby gem with CLI that scrapes data from an online page
published: true
description: Playing with Transfermarkt website to scrape data about European football
tags: CLI, Ruby, Nokogiri, Object Oriented Ruby
---
I've been completing my software development bootcamp in full-stack web development at Flatiron School (now part of the WeWork galaxy).

As the first portfolio project, I am required to developed a command-in-line application.

The task for CLI Project is to build a Ruby gem that provides a Command Line Interface (CLI) to an external data source. The CLI will be composed of an Object Oriented Ruby application. 
I could scrape information from any webpage I liked: weather forecasting page, news page, anything sport related. Based on that information I created my own program. I picked the Transfermkt website (https://www.transfermarkt.com/), I scraped updated information on my favorite soccer league (or football, it depends on which side of the ocean you live!) and played around with that information. I created a program that could provide a user with detailed information about a specific team in the league I've selected: Serie A, the top Italian soccer league.
I've been using the fantastic 'Nokogiri gem' in Ruby to scrape data from the website.

Transfermarkt is a great German website for soccer. It has a lot of data including several detailed financial values.  I've used in the past to make some fun computations and analysis on European soccer. 

My program shows first and foremost the current standings of the league:

```
Welcome to Serie A CLI
1. Juventus
2. SSC Napoli
3. Inter
4. AC Milan
5. Atalanta
6. AS Roma
7. Torino
8. Lazio
9. Sampdoria
10. Cagliari Calcio
11. Fiorentina
12. Sassuolo
13. SPAL
14. Parma
15. Genoa
16. Bologna
17. Udinese Calcio
18. FC Empoli
19. Frosinone
20. Chievo Verona
```

After that, it is possible to select a team based on their ranking and see information as:

(I've picked my favorite team as an example: Inter Milan)

```
"Inter is currently valued $635.44mn"
Total team market value in millions of $

"Inter players average age is 28,8"
The average age of the team

"They play at Stadio San Siro - Giuseppe Meazza"
This line shows the stadium where they play

```
SEO:React or Vue.js?
Tags: react, vue, seo, help
Published: 2019-05-13 16:42:46

---
title: SEO:React or Vue.js?
published: true
description: worried about this noob question, but currently I've heard that javascript misconfigured may have problems with SEO
tags: react, vue.js, SEO,help,
cover_image: https://cdn.searchenginejournal.com/wp-content/uploads/2018/07/SEO-and-JavaScript-6-Things-You-Need-to-Know-760x400.png
---

Hey guys, 

I'm very sorry to create a post for something that has probably been dealt with at the moment, but I couldn't find it.

Currently I want to make an ecommerce that sells only one product, and I have proposed to use React, Gatsby or Vue.js to make it extremely fast and customizable. Besides a modern technology.
What worries me is that I have read that I need a pre-rendered (nuxt) and some other things.

**Someone could recommend a reading or share a guideline to know what things to take into account for the SEO to be "perfect"? or "SEO-FRIENDLY"?**

In addition, I want to traction visits through the blog, and as I explained earlier in a comment, I was recommended Gatsby or Gridsome in case I use Vue.js. Do I have anything else to keep in mind?

It would be great if someone could pass me a mini guide with all the recommendations for Google to love my website.

Really, thank you very much for your answers. I have a lot to learn from you guys.