teleren/devto huggingface dataset:
Attaching Jira issues to commit
Tags: productivity, git, showdev, python
Published: 2020-05-24 06:02:01



*TL;DR: Dynamically attach Jira attributes to commit body using git-hook.
Check the project&rsquo;s [README](https://github.com/benmezger/gjira/).*

The place I work at requires Jira story ID and task ID attached to the commit body. Initially, I was attaching the ID to the commit body manually, by checking either my previous commit or opening up the Jira board, however, after working some hours I was easily forgetting to attach the IDs to the commit and getting annoying having to either reword them and perhaps having to lookup Jira again.

This was tedious and frustrating, so I wrote a Git hook using [pre-commit](https://pre-commit.com) to handle and install the hook. Our workflow requires the task ID to be attached to the branch same, like so: `SKYR-123_branch-description`, so Jira is capable of logging commits related to task branches[^fn:1].
This makes it easy for the hook to know which task are you working on before writing to the commit body. As it checks whether you are in a task branch or any other branch. The Jira ID branch is configurable by specifying a regex for the Jira ID, like so: `SKYR-\d+`.

Git provides a `pre-commit-msg` hook, which prepares the default commit message before prompting the user for the commit description/body. To allow extensibility, the hook handles custom Git template with [Jinja](https://jinja.palletsprojects.com/en/2.11.x/templates/), so each project may have a custom commit template.

For example, the following template will write the task ID, story ID (if any) and task description.

```text
Task description: {{ summary }}
Jira task ID: {{ key }}
{% if parent__key %}Jira story ID: {{ parent__key }}{% endif %}
```

The fields are related to Jira&rsquo;s REST fields. Inner fields such as `parent.key` should replace the dot (`.`) with a double underscore (`__`).

I named the project [GJira](https://github.com/benmezger/gjira/) , as of Git-Jira.

{% github benmezger/gjira %}

Original post: https://seds.nl/posts/attaching-jira-issues-to-commits/

[^fn:1]: <https://www.atlassian.com/blog/bitbucket/integration-tips-jira-software-bitbucket-server>
Construct and move svg figure
Tags: codepen, svg, matrix, filter
Published: 2020-05-24 08:08:22

---
title: Construct and move svg figure
published: true
tags: codepen, svg, matrix, filter
---

<p>The simple idea behind this pen was to allow to easily draw a closed figure simply by entering a number of x and y numbers. You should also be able to move the object position and see the updated points you had entered.</p>

<p>I am using translate function on the group containing the line segments (paths), and when movement stops, I use a matrix to get the new position of each pair of numbers you have entered.</p>

<p>Click the figure to activate movement mode and click again to leave the movement mode.</p>

{% codepen https://codepen.io/netsi1964/pen/PoPyJqB %}
HTML a href Download Attribute
Tags: html
Published: 2020-05-24 07:36:59

Did you know the `a href` element comes with a `download` attribute?

We can put this `download` attribute on our `a href`

## HTML Structure

```html
<a
  href="https://images.unsplash.com/photo-1589923189710-aa8f494ab9ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
  download
  >Download here</a
>
```

This will download the image directly.

We can also pass a value to the download attribute; this will be the name that the downloaded file will have.

```html
<a
  href="https://images.unsplash.com/photo-1589923189710-aa8f494ab9ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
  download="flowers"
  >Download here</a
>
```

Unfortunately, this does not work 100% in Codepen but feel free to get the code from Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="rebelchris" data-slug-hash="Vwvgpxo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="HTML a href Download Attribute">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/Vwvgpxo">
  HTML a href Download Attribute</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

The download attribute doesn't work in IE or Opera.

![Download](https://caniuse.bitsofco.de/image/download.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
An exclusive content Web Component for the Web Monetization API
Tags: gftwhackathon, webdev, webmonetization, opensource
Published: 2020-05-24 07:34:44

---
title: An exclusive content Web Component for the Web Monetization API
published: true
description: More about my submission to the Grant For The Web x DEV Hackathon
tags: gftwhackathon, webdev, webmonetization, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pp95916l79zyiw88pcye.png
series: Web Monetization Components
---

Last week I started work on a series of web components that will make working with the Web Monetization API easier for developers and site owners. The first component to be released was the [`<wm-ad-hider>`](https://www.npmjs.com/package/web-monetization-ad-hider) which hides ads once payment via Web Monetization is detected.

Today I released the first version of my second component: [`<wm-exclusive-content>`](https://www.npmjs.com/package/web-monetization-exclusive-content). This is a component that you wrap around content that you want to hold back until you are receiving payment via the web monetization API.

The component is based off [the simple example of the exclusive content example on webmonetization.org](https://webmonetization.org/docs/exclusive-content), but it makes it as easy as adding a script to your page:

```html
<script src="https://unpkg.com/web-monetization-exclusive-content@0.2.0/dist/wm-exclusive-content.min.js"></script>
```

And then wrapping your exclusive content in the element and a `<template>` element:

```html
<wm-exclusive-content>
  <template>
    <!-- Your exclusive content goes here -->
  </template>
</wm-exclusive-content>
```

When Web Monetization is detected and payments are being sent, your exclusive content will appear.

You can use this component to display anything from that paid-for content that you want for premium users to a thank you for supporting your site and your work.

## Check out the code

You can see the code for both the `<wm-exclusive-content>` and `<wm-ad-hider>` components on GitHub here: 

{% github https://github.com/philnash/web-monetization-components %}

## To do

The Web Monetization site includes [a more complete example](https://webmonetization.org/docs/exclusive-content#a-complete-example) of this idea. This web component will work towards supporting the features displayed in the example, including an optional call to action, and a loading message while waiting for payments to start streaming.

This is also just the second of a potential suite of components. If you have ideas for other components, please [raise an issue on the repo](https://github.com/philnash/web-monetization-components) or drop a comment here.
1. My Tech Journey: Intro
Published: 2020-05-24 07:23:13

<b> 1. Introduction </b>
Sun 24th May, 2020

<b> About Me: </b>
Hello, my name is Rehannah and I'm currently 19 years old. I'm a girl from the Caribbean with an interest in tech and Computer Science.

<b> Preface:</b>
Although I studied Information Technology at A levels, I don't know anything much about Computer Science. I watched lots of videos and did few online courses but nothing actually concrete. I want to learn more programming languages.


<b> Why my attempts to learn on my own so far have failed? </b>
• I think I fell into "Tutorial Hell" as one of the coders I follow put it. I've just been watching YouTube videos without practicing anything.
• I've been intimidated by all I have to learn. Keep in mind I still have exams to study for and I have my hobbies too. There's so much time that goes into learning anything and with Comp Sci there's just so much to learn.


<b> Why start this blog? </b>
I started this blog because I was supposed to start learning Comp Sci and coding on my own in July after my exams were over so I'd be on the same level as those who did Comp Sci at A Levels when I went to uni in September. However, with the current pandemic I don't even know when my exams will be. So I decided to start this blog to help me be accountable in my learning journey. The final decision was made after seeing a similar blog by a boy in tech from my country. He was updating what he was learning each week with his mentor. I thought it was a great idea.

<b> What's this blog about? </b>
This blog will update once a week to document what I learnt that week. Hopefully, other beginners can use it as a self-learning framework or learn from my mistakes.

Peace,
Rehannah
Looking for webboard / commenter / data collector CRUD tutorials
Tags: webdev, database, help
Published: 2020-05-24 07:16:16

Or POLL data collector. Or something like Reddit.

That is, allow users to CRUD; and definitely have security implications.

The closest I have done is,

[https://github.com/patarapolw/aloud/tree/mongo-auth0-cloudinary](https://github.com/patarapolw/aloud/tree/mongo-auth0-cloudinary)

But BaaS like Firebase or MongoDB Stitch are definitely more strict at security than me, that's why I failed at the new branch. (Also, MongoDB Stitch isn't very friendly with Firebase; I have chatted with MongoDB staff.)

[https://github.com/patarapolw/aloud/tree/mongo-firebase](https://github.com/patarapolw/aloud/tree/mongo-firebase)
PODCASTER - A platform for hosting podcasts enabled with Web Monetization
Tags: gftwhackathon, react, webmonetization, showdev
Published: 2020-05-24 06:57:35

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## The Project 
####Podcaster is a podcast hosting platform, where the goal of the platform is to help creators host their content and get paid without using ads or annoying sponsor messages.

### How it works
When a user comes on the page, we check if the user has coil in the browser, if it is not there, then we show the user free content and a prompt to get a coil subscription. If coil is present then we redirect to premium content page.




### Submission Category: Creative Catalyst


## Demo
{% youtube drYGqkneM6Y %}
 

## Link to Code
{% github rohanreddych/Podcaster %}


## How I built it 

### Technology Stack
Web Monetization API
HTML|CSS| JavaScript
React


## Additional Resources/Info 
I found this starter script very useful.
{% link https://dev.to/emma/getting-started-with-web-monetization-in-react-3m4j %}

## Edit:- Thoughts on COIL Payment system
I had a question about the coil payment system, What happens when the user spends so much time on a website such that coil has paid $5? so I asked the coil support team and their reply was "Once you've streamed $4.50, we lower the payout rate to stretch the remaining .50 cents until the end of the month. Even if you reach $5, we'll continue to pay creators at the lowered rate. This ensures you can't payout more than you put in which reduces fraud on the platform". So I was thinking if there could be a system which monitors the user's behaviour over a time span and allocates money to a particular site so that it can be divided into smaller amounts instead of the standard $0.36/hour so that if the user spends more time on one creator then goes to another creator, the latter does not get less money. But again coil's principle is to not track their users. Please leave your thoughts.
####Correct me if I am wrong anywhere.
A better way to copy text to Clipboard in JavaScript
Tags: todayilearned, javascript, webdev
Published: 2020-05-24 06:46:50

*Originally posted on my [blog](https://komsciguy.com/js/a-better-way-to-copy-text-to-clipboard-in-javascript/).*

# The problem

Typically, this is how copying text is done (taken from [here](https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f)):

1. Create a `<textarea>` element to be appended to the document. Set its value to the string that we want to copy to the clipboard.
2. Append said `<textarea>` element to the current HTML document.
3. Use `HTMLInputElement.select()` to select the contents of the `<textarea>` element.
4. Use `document.execCommand('copy')` to copy the contents of the `<textarea>` to the clipboard.
5. Remove the `<textarea>` element from the document.

The code looks like this:
```javascript
function copyToClipboard(text) {
  const el = document.createElement('textarea');
  el.value = text;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};
```

There are two problems with this approach:

1. There may be some flashing due to the temporary <textarea> element.
2. It will unselect whatever the user is selecting.

We can work around both, but the function will become much longer.

# Solution

> When the user initiates a copy action, the user agent fires a clipboard event name copy.
>
> W3C Specification

1. Use addEventListener to attach our custom event handler, which will override the current data with our text.
2. Use document.execCommand('copy') to trigger the copy action.
3. Use removeEventListener to remove our event handler.

```javascript
function copyToClipboard(text) {
  const listener = function(ev) {
    ev.preventDefault();
    ev.clipboardData.setData('text/plain', text);
  };
  document.addEventListener('copy', listener);
  document.execCommand('copy');
  document.removeEventListener('copy', listener);
}
```

# Bonus

You can even copy rich text!

```javascript
function copyRichText(text) {
  const listener = function(ev) {
    ev.preventDefault();
    ev.clipboardData.setData('text/html', text);
    ev.clipboardData.setData('text/plain', text);
  };
  document.addEventListener('copy', listener);
  document.execCommand('copy');
  document.removeEventListener('copy', listener);
}
copyRichText('<i>Markup</i> <b>text</b>. Paste me into a rich text editor.');
```

# Browser compatibility

According to MDN Web Docs, this should work on all major browsers except Internet Explorer.
HTML a Programming Language
Tags: html, css, javascript, php
Published: 2020-05-24 06:34:17

We will explain about HTML and CSS with the example and as well as is HTML a programming language.
 
Hence, HTML is a programming language “HyperText Markup Language” which is the most basic building block of the web page.

After that, whenever any programmer starts web programming they start with the Html. Further, because it is a basic programming language and its very easy understanding.<a href="https://wlearnsmart.com/is-html-a-programming-language/">Is HTML a Programming Language</a>

So, using this programming language make the structure of a web page and defines the different different types of content with the help of Html programming language.

Similarly, when we have to use HTML then it can be created many pages and block for a website. Therefore, there are many options for creating structure.Learn <a href="https://wlearnsmart.com/relational-algebra/">Relational Algebra</a>
DocCom - A Doctor's Community
Tags: octograd2020
Published: 2020-05-24 06:33:58

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## DocCom

A forum application built for Doctors to come up and discuss issues related to Covid-19 happening in India, users can sign up and post questions and can answers to questions as well. In this critical situation of Covid-19 in India, having a community especially for Doctors helps for patience. Hope this helps Doctors during Covid-19 in India.


## Demo Link
https://youtu.be/giYzqEMOz4w
 

## Link to Code
{% github https://github.com/may55/DocCom %}


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Explicit and implicit return in function (Spanish)
Tags: javascript, webdev, beginners
Published: 2020-05-24 06:22:52

## Antes de iniciar.

**Explícito:** Que expresa algo con claridad.
**Implícito:** Que está incluido, sin que está lo especifique.

## Retorno explícito.

Las funciones regulares y las funciones flecha pueden comportarse de forma similar, ya que podemos devolver un valor explícitamente, utilizando la palabra reservada “return”.

#### Función regular.

```javascript
function add(x,y) { // Statements
  return x + y;
}
```

#### Función flecha.

```javascript
const add = (x,y) => {
  return x + y;
}
```

## Retorno implícito.

Las funciones flecha tiene una ventaja sobre las funciones regulares, ya que las funciones flecha pueden devolver un valor de forma implícitamente, simplemente omitimos las llaves que normalmente envuelven el cuerpo de una función.

> **Nota:** El implícito es exclusivo de las funciones flecha.

```javascript
const increment = x => ++x; // Expression
```

Cuando se usan retornos implícitos, los objetos deben estar entre paréntesis para que las llaves no se confundan con la apertura del cuerpo de la función.

```javascript
const obj = () => { name: "Victor" }; // return undefined
const obj = () => ({ name: "Victor" }); // return { name: "Victor"}
```

## ¿Cuándo usarlos?

Si tu función necesita varias declaraciones entonces retorna de forma explícita, de lo contrario use la forma implícita y ahorra lineas de código.

Espero les guste :)
How I became a software engineer
Tags: beginners, html, webdev
Published: 2020-05-24 06:17:24

The year was 2019, and I would leave the banking industry. I needed a fresh challenge after underutilizing my potential for about two years. Coming from an engineering background, I knew I could do much more than booking investments, balancing ledgers, and giving financial advice to customers about the bank’s products. I wanted to engage my brain more. At that point, banking was becoming monotonous (probably because I wasn’t a part of the bank’s technology team). This is not to undermine banking. It is a noble profession. The issue was that I was motivated to be at the forefront of creating solutions.

Several months before my departure, I had applied to Lambda and passed several qualifying exams. I knew I was close when I got a mail to begin the pre-course work. At that point, I decided to be fully focused. I did the pre-course work although I struggled (it wasn’t unexpected as I had never written a line of code in my entire life).

In July, I received another mail confirming my acceptance as one of the first set of Africans to be admitted into Lambda. We were 53 from countries like Ghana, Kenya, South Africa, and Nigeria. I spoke to a friend about this and we both agreed it was a game-changer. 

The journey started in August. I remember having so much doubt in me if I had the qualities to thrive as a software engineer. Gabriel Cabrejas, one of the best teachers in the industry, was in charge and the topic was SEMANTIC HTML. I wrote my first line of code and it felt magical. I remember feeling excited after creating my first pull request. Finally, I would be liberated and I could do stuff by myself. 

It wasn’t easy at the beginning. I struggled with CSS (I still do). There were times I considered throwing in the towel because of the struggle. Web development isn’t easy, and that is the truth. There are so many skills to pick up and many technologies to master. However, I kept going and the words of encouragement from mentors spurred me on. I became a software engineer less than a year ago, but I’d say I am happy with my steady growth. In that time, I have written code in HTML, CSS, JavaScript, React, Node, and Express.  Also, I have become conversant with Postgres, SQLite, and other DBMS. In other words, I can do both Backend and Frontend.

At the start, I struggled with imposter syndrome. Most of the guys in my cohort were into web development before me and I felt I would never reach their level or match their skills. However, my mentors will say, “Web development is a journey and we will all arrive at our destination differently”. I took this and put in the work. Thankfully, there is a tremendous difference between where I was when I started and where I am now.

As I look forward to my first anniversary as a software engineer, I can’t but imagine if I had started earlier. That said, there are still grounds to cover and room for growth.
Refurbished Wifi Access Points
Published: 2020-05-24 06:15:59

Loving a good project I once had the idea of taking a spare wifi card and using it as a wifi access point.  I plugged it into a box running OpenBSD (of course) and found the following solution.

First enable IP forwarding by uncommenting the line in /etc/sysctl.conf
```
net.inet.ip.forwarding=1
```
Then enable PF in /etc/pf.conf to use Network Address Translation.  Adding the following lines.
```
ext_if=em0 #ethernet
int_if=ath0 #wireless
pass out on $ext_if from !($ext_if) to any nat-to ($ext_if)
```
Update /etc/dhcpd.conf to assign IP addresses.
```
option domain-name-servers 192.168.1.1, 8.8.8.8;
```
Enable DNS & DHCP in /etc/rc.conf.local, also adding the following additional lines.
```
named_flags=""  # this enables DNS
dhcpd_flags="ath0"  # this enables DHCP
```
Finally the wifi adapter needs to be told how to treat incoming logins.
```
inet 192.168.1.1 255.255.255.0 NONE media autoselect mediaopt hostap
nwid NETWORK wpakey PASSWORD chan 11
```
...and with a quick reboot we now have our OpenBSD server acting as a wifi access point!  With all the tools such as tcpdump or pfctl available to manipulate data from the device.
Online FREE Education Learning Platform
Tags: rails, aws, ux, webdev
Published: 2020-05-24 05:57:12

I have been working on developing a skill-sharing platform called 1oh1. Instead of being structured courses of text and video like other sites, it’s designed so you can learn anything from anyone by booking a time and having a live, one-on-one conversation with the experienced individual to get specific help. Think coffee with a mentor, office-hours at university, or, as we suggest, the Uber of education.

I know many of you have a lot of experience with skills in different sectors and if you teach it, I would love to book a time to pick your brain about it!
I hope to see you there.

[1oh1.org](1oh1.org)
![icon](https://firebasestorage.googleapis.com/v0/b/oh1-b365f.appspot.com/o/1oh1.gif?alt=media&token=8a560a50-0c8a-4019-8a4b-c66ebb1698b5)

Ps:  For a better view, please visit the website at Desktop, we are working on to improve the mobile version of the website.
Please let me know if you face any sort of bug or issue and do share your feedback.