teleren/devto huggingface dataset:
Prototyping stuff with Svelte's REPL
Tags: javascript, svelte, webdev, beginners
Published: 2020-03-11 03:35:31

---
title: Prototyping stuff with Svelte's REPL
published: true
description: A complete markdown editor in 6 LOC  
tags: javascript, svelte, webdev, beginner
---

Svelte's [REPL](https://svelte.dev/repl) is a very handy way to prototype new ideas. It's like CodePen, but specifically made for Svelte.

It's got some cool features. You can sign in with your GitHub account, which allows you to save your code. You can fork other folks' projects, download to run locally, and share projects with others.

Best of all, you don't need to install anything to use it 🙌

You can find the REPL here: https://svelte.dev/repl

# A Markdown Editor

Here's how you can build a very simple markdown editor with Svelte's REPL (in just 6 lines of code).

## Importing NPM packages

The REPL has integration with NPM, so you can import any package and it will install it for you on-demand.

In our case, we want a package that can convert markdown to html, so we'll use [marked](https://npmjs.com/package/marked). 

```html
<script>
  // import markdown conversion library
  import marked from 'marked'
</script>
```

## Binding inputs

Let's declare a variable `let markdown` to store the markdown text.

```html
<script>
  ...
  
  // declare a variable to store markdown data
  let markdown = "# Example Title"
</script>
```

We can bind the markdown to a `<textarea>`:

```html
<!-- updates the `markdown` var, whenever the textarea's value changes -->
<textarea bind:value={markdown}/>
```

## Outputting HTML

Markdown is converted to HTML by simply calling `marked(markdown)`.

```html
<!-- output raw HTML for current value of `markdown` -->
<!-- updates whenever the value of <textarea> changes -->
{@html marked(markdown)}
```

# Complete code:

```html
<script>
  import marked from 'marked'
  
  let markdown = "# Example Title"
</script>

<textarea bind:value={markdown}/>

{@html marked(markdown)}
```

There you have it, a complete live-updating markdown editor in just 6 LOC!


Link to example:
https://svelte.dev/repl/98a473d8e5ec46bca9db12b22b591902?version=3.19.2


Happy coding ✌


If you want to learn more about Svelte, I'm working on a [course](https://svelte.video) ✨
is elixir good for scraping ?
Tags: elixir, node, erlang, web
Published: 2020-03-11 03:00:34

---
title: is elixir good for scraping ?
published: true
description: so i have to scrape 40 website per query node was meeh , is  the advantages of elixir is any good here ?
tags: elixir ,node, erlang, web
---
Open Source Machine Learning On Quantum Computers With Xanadu AI
Published: 2020-03-11 02:42:25

<p>Quantum computers promise the ability to execute calculations at speeds several orders of magnitude faster than what we are used to. Machine learning and artificial intelligence algorithms require fast computation to churn through complex data sets. At Xanadu AI they are building libraries to bring these two worlds together. In this episode Josh Izaac shares his work on the Strawberry Fields and Penny Lane projects that provide both high and low level interfaces to quantum hardware for machine learning and deep neural networks. If you are itching to get your hands on the coolest combination of technologies, then listen now and then try it out for yourself.</p><p><a href='https://www.pythonpodcast.com/xanadu-quantum-computer-machine-learning-episode-253/'>Listen Now!</a></p>
How to create a Pull Request by Submitting your first Pull Request to Github
Tags: github, git, opensource, webdev
Published: 2020-03-11 01:37:31

---
title: How to create a Pull Request by Submitting your first Pull Request to Github
published: true
description: How to create your first Github Pull Request
tags: github, git, opensource, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/unb9lk0r3xeno76hcez0.png
---

In this tutorial, I am going to show you how to create a simple pull request by submitting your first pull request to Github. After we walk through submitting your first pull request to Github I am going to show you how to find issues that you can work on in some of your favorite open-source projects. If you want to contribute on open-source projects these days it is important to understand how to find issues that you can work on and understand the process for getting your changes into a project.  

{% youtube TWPXAbPVcio %}

When you have completed this tutorial you should understand: 
 ✅ How does a Github Pull Request differ from your normal daily workflow
 ✅ What is a Pull Request?
 ✅ Creating a simple Github pull request
 ✅ Submitting your first pull request to Github
 ✅ Finding issues to work on in your favorite open source projects
 ✅ This process would also work on Bitbucket, Gitlab or any other Git-based hosting.
vault Error ... unsupported protocol scheme ""
Tags: hashicorpvault, vaulterrors, unsupportedprotocol, stupid
Published: 2020-03-11 01:19:04

---
title: vault Error ... unsupported protocol scheme ""
published: true
description: What do you do with an unsupported protocol scheme ""? Check that you actually made a proper URI, for starters. 
tags: hashicorp vault, vault errors, unsupported protocol, stupid
---


I was brainless enough to get into this situation while using the Vault client binary: 

`unsupported protocol scheme ""` 

A better translation would be, "WTF my man, is this even a URI??"

It's probably because of a malformed URI or absent URI getting used in a web request by [GoLang's HTTP thingy](https://github.com/golang/go/blob/master/src/net/http/transport.go#L519-L522).

    if !isHTTP {
    		req.closeBody()
    		return nil, &badStringError{"unsupported protocol scheme", scheme}
    	}

Here's an example of what I did with it: 

    namespaccckler[micro-service-metadata-provider !?+]$ vault status
    Error checking seal status: Get notsosecure/v1/sys/seal-status: unsupported protocol scheme ""
    namespaccckler1[micro-service-metadata-provider !?+]$ export VAULT_ADDR=http://127.0.0.1:8200
    namespaccckler[micro-service-metadata-provider !?+]$ vault status
    Key             Value
    ---             -----
    Seal Type       shamir
    Initialized     true
    Sealed          false
    Total Shares    10
    Threshold       4
    Version         1.6.3+prem
    Cluster Name    vault-cluster-c9387625
    Cluster ID      0280f278-443a-210c-dcdd-c3dee0bd5f1d
    HA Enabled      false
    namespaccckler[micro-service-metadata-provider !?+]$ 

Anyone else run into this sort of bungling?
The problem with DOM’s event listeners 
Tags: dom, event, javascript
Published: 2020-03-11 00:45:21

The way we add and remove event listeners on DOM elements hasn’t change much for two decades. It's methods: [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), and [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) do a decent job, but if we want to dynamically add and remove the listeners, these methods become impractical.

Let’s see why is that so, and consider a potential solution.

## The problem

This is how an event listener is registered on the target element: 
```js
target.addEventListener(type, listener, options);
```

And this is how it’s removed: 
```js
target.removeEventListener(type, listener, options); 
```

The problem with this is the fact that `removeEventListener` method, requires parameters of identical value the listener was registered with, requiring us to save and keep track of these parameters.

For each registered listener that we might want to remove later, we would need to store it’s defining variables: target, type, and listener.

Imagine how cluttered our code would become if we register a dozen ***removable*** event listeners. We would potentially need a lot of variables... This practice then becomes cluttery and repetitive.

## The solution

A better way DOM could handle this is if the `addEventListener` method would return an instance of the subscription object which would hold all the defining parameters. Such object instances could hold methods like ‘unmount’, ‘mount’, or ‘update’...

So instead of just registering the listener, we could also **reference the subscription:**
```js
const sub1 = target.addEventListener(type, listener, options); 
```

**Unmount** the subscription:
```js
sub1.unmount();

// instead of this:
target.removeEventListener(type, listener, options);
```


**Update** the subscription:
```js
sub1.update({name: type2});

// instead of this:
target.removeEventListener(type, listener, options); 

target.addEventListener(type2, listener, options); 
```

Good news is that I've made a library that implements this idea: It’s called **Subvent** and You can read more about it here...
{% link https://dev.to/filibit/subvent-js-managing-dom-event-subscriptions-39g1 %}

... or start using it straight away:

{% github filibit/subvent %}
Cleanup Commits
Tags: softwaredevelopment, collaboration, learninpublic
Published: 2020-03-10 23:18:36

You open a PR. It's not a big change, but there are a bunch of commits. Why so many commits? Let's take a look.

The first says,

> WIP - first pass on this feature

The second commit says,

> Implement feature x [ticket 123]

That is followed by a commit that says

> lint

Then,

> Fix broken test

Then,

> Remove some comments

And then,

> some formatting

Lastly,

> Account for feature edge case

This is the real, honest path that many features take when we implement them. Our path to a feature meanders. It involves trial and error. We push some concerns out of our head while we do the main thing and then revisit them later. Though that is how we get there, it isn't necessarily the best thing to share with the team and commit to our main branch.

Most of these commits are what I'd call _Cleanup Commits_. These cleanup commits include things like:

- Recommendations from linting and formatting tools that we missed during our first pass on the implementation.
- Getting a test to pass that we didn't realize we broke with our original changes.
- Removing comments and logging statements.
- Precursor work like the WIP (work in progress) commit I included above. These often involve spiking out an initial take on the implementation, the exploratory part of coding a new feature.

Though all of these _cleanup commits_ are part of the process of building a feature, they are not that useful in our commit history. When we think about the record of changes that we want to have written in the history books of our codebase, I'm not interested in, for example, a separate formatting fix. I'd rather just see the main commit with the correct formatting integrated.

By all means, use your feature branch as a scratch pad. Do what you need to do with your feature branch commits whether that is a WIP commit, a checkpoint commit, or a fixup commit. A lot of feature branches will have all of the above. All the segmentation doesn't need to live beyond the feature branch.

When the implementation is done and you're ready for a review, squash the relevant pieces together. Tell a good story rather than a literal accounting of events.
How I saved thousands of lines of code - Functional Hook Composition for Everything
Tags: javascript, functional, node, devops
Published: 2020-03-11 00:36:11

https://github.com/opbi/toolchain

There're a large amount of semi-automatable codes in most production codebases, especially around input validation/null check, error/exception handling, observability anchors(log, metrics, tracing) and various other elements to thread functions together to achieve business goals stably. All those are essential for production code, while they are slowly corrupting the readability/maintainability of the codebase, incurring huge communication cost between teams due to a lack of common standards. Fortunately, without AI, it is still possible to automate some of those common programming actions with a standard.

With the power of function composition in Javascript, it becomes very simple to modularize those control mechanisms in the form of well-tested reusable decorators. This makes the core business logic functions extremely concise and easy to read/test/migrate.

I'm working on a new library to standardise a pattern to add reusable hooks to functions to configure their behaviour so that functions can be precisely about the core business logic. This would greatly improve the readability, testability and maintainability of a codebase.

It is currently at its very early stage while have been proofed in a production server. Any feedback or contributions would be welcomed.
Did you just say you want to 'git add' all those files except 1?
Tags: git
Published: 2020-03-11 00:30:50

You run a 'git status' and see that you've updated a heap of files.  One of those files you don't want to commit (often a config).  What's the easiest thing to do?  Well, I have a few options.

Option 1.  Use 'git assume-unchanged'.  I have a blog post about that here:  https://dev.to/nickraphael/git-assume-unchanged-for-when-you-want-git-to-ignore-an-edit-for-a-while-2lig

Option 2.  Just undo you edit before doing the add.  Basically using 'git checkout xxx/dontcheckmein.txt'

Option 3.  Run a 'git add .' to add all the files.  Then run 'git reset -- xxx/dontcheckmein.txt'.  This will undo the add.

Then you can 'git commit' to your hearts content.
A Javascript Newbie's Reference
Tags: javascript, babycoder
Published: 2020-03-11 00:13:27

Greetings!
I am starting the dive into Javascript, and I would like to share a little reference cheatsheet I am looking at as a quick reminder for some of the basics.
This post will hold very little conceptual significance and is more like a cheat-sheet for reference.

###querySelector(); & querySelectorAll();
Called on a document object, this is used to select anything within that matches the parameters passed in the argument.
Searching by an ID can utilize the hashtag ex. querySelector("#exampleID");
Searching by a Class can utilize the period ex. querySelector(".exampleClass");
We can also call this to find any HTML elements ex. querySelector("h1");


###findElementByID(); & findElementByClass();
Similar to above, these functions will find anything matching the parameters given. As the title of these suggest, these are less flexible than the above choices, but technically run faster (though negligibly so from what I could find on the internet)


###ARRAYS:
Adding to one? **UNSHIFT** is at the beginning. **PUSH** is at the end.
Removing from one? **SHIFT** is at the beginning. **POP** is at the end.

###Target:
This reminded me of params in Ruby. We call Target on events that we listen for- Once an event takes places, we can look at event.target to find a lot of attributes that we can play with. So far, we have only used this to pull out user to input, but given the list of attributes within target, I think that its flexibility is far grander than I can imagine.


I WILL UPDATE THIS AS I LEARN MORE! :)
Free book: Creative Coding for Kids
Tags: codenewbie, javascript, 100daysofcode
Published: 2020-03-11 00:04:10

In this short post, I'd like to present you a free book (PDF format) that aims at offering a gentle introduction to coding to kids and beginners alike.

The book is called "Creative Coding for Kids" by [Tariq Rashid](https://twitter.com/algorithmic_art).

Tariq is an extraordinary educator with a big passion for writing. He has been nicely enough to share a free version of his book with [codeguppy.com](https://codeguppy.com) users.


## Download PDF

You can download the PDF from:

https://codeguppy.com/site/download/tariq/creative_coding_for_kids.pdf

![](https://dev-to-uploads.s3.amazonaws.com/i/o85up1uie5tt14ai3kem.png)


The book is using the creative coding way to offer a gentle introduction to JavaScript programming.

The writing style and the provided examples are totally captivating.

The book is aimed at absolute beginners with no prior knowledge into JavaScript or any other programming language.

However, as the book progresses towards more complex examples, even the most experienced programmers will probably find something interesting to learn or have fun with the included examples.

## Examples

It is amazing what can be created in just a few lines of code. Just check out these examples:

### Noisy stripe

![](https://dev-to-uploads.s3.amazonaws.com/i/l2v8xnv1yvhr1dr8hgnh.png)

Source code:

```js
noStroke();
fill('purple');
repeat(100, 700, 1, 100, 500, 1, noisy_stripe);

noFill(); stroke(0); strokeWeight(1); rect(0, 0, width-1, height-1);

function noisy_stripe(x, y) 
{
	var x2 = x + (100 * noise(y / 50, x / 50)) - 50;
	var y2 = y + (100 * noise(x / 50, y / 50)) - 50;
	
	circle(x2, y2, 0.5);
}

```

To see this code running use this link: [https://codeguppy.com/code.html?tariq/ex07](https://codeguppy.com/code.html?tariq/ex07)


### Alien landscape

![](https://dev-to-uploads.s3.amazonaws.com/i/x4fkatqjhxne5r6a5pqf.png)

Source code:

```js
background('black');
colorMode(HSB);

noStroke();
repeat(0, 500, 1, 200, 500, 1, alien_landscape);

noFill(); stroke('white'); strokeWeight(1); rect(0, 0, width-1, height-1);

function alien_landscape(x, y) 
{
	var x2 = x + (y / 2);
	var h = 200 * noise(x / 200, y / 200);
	h += 30 * noise(x / 30, y / 30);
	var y2 = y - h + 50;
	
	var hue = (h - 180 + 360) % 360;
	var brightness = h*0.75;
	fill(hue, 80, brightness, 0.3);
	
	circle(x2, y2, 1);
}

```

To see this code running use this link: [https://codeguppy.com/code.html?tariq/ex08](https://codeguppy.com/code.html?tariq/ex08)


## Conclusion

If you are teaching coding to beginners... then this book may be for you.


If you enjoy this book, you may also find author's youtube channel also very interesting: [https://www.youtube.com/channel/UCO6iBPzIvUdzxcf87BN24FQ](https://www.youtube.com/channel/UCO6iBPzIvUdzxcf87BN24FQ)
Blog[2] = "Whats up with the DOM."
Tags: javascript
Published: 2020-03-10 23:40:07

What is the DOM?


At first my impression of the DOM, was just a replication of the original html code. But as I was introduced to Javascript, and other languages, I was quick to realize I was somewhat off with my interpretation. It was more similar to your dev tools in the browser than anything else.

Let me get this straight, the DOM isn't just a list of codes, but more like a better replica of html, where all the cool stuff happen. The Document Object Model (DOM) is an application programming interface (API) for valid HTML as well as well-formed XML documents. For an example, if you forgot to insert an element into your html, the Dom will be able to make its own record in it, add a type of element, just to perfect the code. Besides that your css will be able to better represent your DOM material, and influence several of the codes already written. Besides even this I have even found out after learning JavaScript that's its is capable of directly manipulating the html data. With the DOM, programmers can build different documents, navigate its structure, and add, delete, or modify elements as well as content.

As DOM and javascript continued to grow together, at once known as the API, other languages like python could finally be mixed in with the DOM.  

If it's a little confusing, let me give you a better example. Javascript is sort off like the worker, and the DOM is sort of like the machine. Without the machine none of the work can be done. In particular It's the DOMs Nodes and object that do the work. Javascript is just the syntax. This way programming languages can connect to the page.
addEventListener method
Tags: addeventlistene, javascript, beginners
Published: 2020-03-10 23:28:53

The __addEventListener()__ method attaches an event handler to the specified element. Whenever the specified event is delivered to the target element,
the method addEventListener() sets up a function that will be called.

Basically, in an abstract way of saying, the server is just doing its things until the user (a human) interact with it by clicking something on-screen, pressing a button on the keyboard, or they could do anything that a computer is programmed to recognize.


__Syntax:__
target.addEventListener(event, function, useCapture);


__Parameter:__
type: Required. A STRING that specifies the name of the event.
You can find more event name as string [here](https://developer.mozilla.org/en-US/docs/Web/Events):
function: Required. Specifies the function to run when the event occurs.

When the event occurs, an event object is passed to the function as the first parameter. The type of event object depends on the specified event.

useCapture: Optional. A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.


__Example:__

You can add events of different types to the same element, in this case, the button.
`document.getElementById("myButton").addEventListener("mouseover", myFunction);`
`document.getElementById("myButton").addEventListener("click", someOtherFunction);`
`document.getElementById("myButton").addEventListener("mouseout", someOtherFunction);`

Using the optional useCapture parameter to show the difference between bubbling and capturing:
`document.getElementById("myDiv").addEventListener("click", myFunction, false);`
`document.getElementById("myDiv").addEventListener("click", myFunction, true);`

In this case, only the "true" value from useCapture can be run.
Limit Your Scope
Published: 2020-03-10 23:27:59

While I'm writing code, I have to constantly remind of scope. The scope of my variables, the scope of my functions, and the scope of my ideas. 

The scope of my variables and functions can be easy to fix. If my program isn't working as I expect, I follow steps to debug that issue. The scope of my ideas can be a much bigger problem to tackle. 

When creating a project, an assignment or for fun, I dream big. Nothing wrong with that. Building a program with lots of functionality and cool features is a noble goal for any programmer. 

My process starts with the baseline idea: What do I want to build? What purpose will it serve? In my case, I decided on a basketball league stat tracking app.

My next step is to establish how I want my program to perform: How will it display information? What type of information will be displayed? How will my website look? What will my backend look like? How do my models interact? Can my program take user input? How will I gather that input? Are there any validations for that input? 

This step is usually where scoping, and my dream big mentality, become a problem. The programmatic way to deal with this is to abstract that step into much smaller steps, such as wire framing, establishing models and associations and finally moving onto user-facing side of the app. 

As a total newbie, that is not what happened the first time I sat down and plotted out my app. Eventually I got an idea of what I wanted to do and how I was going to do it.

I started with the database, and some seed data. I set up games and seasons, but I skipped over an important piece: player data and team data. A game can't have statistics if I player doesn't exist to score some points.

Once I got my faulty seeds set up I moved right into adding functionality, like displaying the information about the game. My program was not working as I expected it to, and I began to second guess my whole idea. The functionality I was adding relied on foundational work I hadn't laid out yet. I recognized that if I was going to add really cool features to my program having a working program as the foundation was the key.

I spent too much trying to figure out what was going on before realizing that I should focus on the smaller pieces of a program that serve as building blocks, before tackling the "cool and exciting" part of a program. 

If I could go back in time, I would tell myself to create an ordered list of things I needed to do. The list of cool features would be at the end, and the necessary but not as exciting bits would be at the beginning.