teleren/devto huggingface dataset:
How to upload a video to GitHub?
Tags: github, git, upload, video
Published: 2021-05-21 13:13:28

From: https://github.blog/2021-05-13-video-uploads-available-github/

Developers have always been interested in sharing bugs in the program or code in video. Because this method is much easier and more understandable.
That's why GitHub is trying to add this capability to its platforms.

When it comes to writing up a bug or describing a new feature, words only get you so far. Sometimes you need a video to easily illustrate the point.
That's why GitHub now gives you the ability to upload videos across its platform, in issues, pull requests, discussions, and more.
As developers, the ability to collaborate through video (for example, pair programming, demos, etc.) is an extremely important part of a software workflow, especially for communities and teams that are distributed. At GitHub, we’ve utilized video to more concisely detail complex workflows, show our teammates where we’re blocked, and inspire our colleagues with the next big idea.

Bugs are something that every developer deals with, but sometimes words aren’t enough to help someone else reproduce the problem quickly.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndfnjc53xcyqgaipnkb4.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixjkj7fuqdimhfk2kc3b.png)

When it comes to developing a new feature or product, a thoughtfully worded proposal or static designs are great, but often lack the ability to really convey the end-to-end user workflows and interactions. Sharing videos of prototype walkthroughs or providing talk tracks for a static design have also helped development teams get to the heart of what they are setting out to build and why so they can get others excited about their work and ultimately build a better product for their own users.

No feature is truly complete until there is mobile support as well. So we’re also excited to announce that uploading videos from both the iOS and Android GitHub mobile apps is now available to all users. This is especially great for mobile developers who can now record a video of a mobile bug and upload it straight to an issue all from the same device.

It seems that GitHub will help developers a lot by developing this issue, and also if video uploading is added to GitHub, it will increase the level difference between this platform and the rest.
Proxies and nested Objects
Tags: javascript, proxies
Published: 2021-05-21 13:11:30

Recently I read an excellent post from the wizard John Lindquist

[Proxies](https://johnlindquist.com/safely-get-nested-values-with-proxies/)

Here is an example adapted from this :

```html
<table>
    <tr><td>Nom</td><td><input data-key= "nom" /></td></tr>
    <tr><td>Prénom</td><td><input data-key= "prenom"  /></td></tr>
    <tr><td>Age</td><td><input data-key = "age" type="number"    /></td></tr>
    <tr><td>rue</td><td><input data-key ="rue"  /></td></tr>
  </table>
<div id="app"></div>
```

```js
let person = {
  name: {
    prenom: 'John',
    nom: "Doe"
  },
  age:  59,
  adresse : {
    rue : "des marronniers",
    num : 2
  }
}

let handler = {
  get(target, prop) {
    let value = target[prop]
    if (value) {
      if (typeof value === 'object') {
        return new Proxy(value, handler)
      }
      return value
    }
    return new Proxy({}, handler)
  },
  set(target, property, value) {
        target[property] = value; 
        render (); 
        return true;
  }
}

person = new Proxy(person, handler)

function updateForm (e) {
  let key = e.getAttribute("data-key")
  person.name[key] = (e.value)
}

function render () {
 var str = JSON.stringify(person, null, 4);
 app.innerHTML = `
  <pre style="font-size:24px">${str}</pre>`
}

render()

document.querySelectorAll('[data-key]').forEach(item => {
  item.addEventListener('input', event => {
    updateForm(event.target)
  })
})
```

You can test it here [Proxies](https://flems.io/#0=N4IgtglgJlA2CmIBcAWAnAOhQZgDQgDMIEBnZAbVADsBDMRJEDACwBcxYR8BjAeytbwByEAB5WNAEYIAfAB0qAAmWLxAJxnioMgHK8wogPSttWzRCoAHAK6tFUGhIC0Aa3gBPALyK5IKvt9FQ01jU2MNBRVVVg0zAAU1AEv-A1DNE3MrW3tHGlcPb19LNSEAkGVgowyqiKUVdXTtAEEAc3gq02qLGzsHZzd3RUKQGjbA1ndLeE9fKmswSXg1QJVKtJr5OuUGszVrdvWurN7c-MGZkD34FbXq8M3t4ylZBVEoCAA3RWgLmktLXwhd4fTZcEAkeAIbisCD8MiMAAMSARTgA7MiQABfXDUOgMJgAKzIPH4gmEjAQdimahI-CGimAkUUtHoSAZTOUxVKYDZAHIAFK8ZhUXm4DnM-Rs3wAEV41xATOxTNG8DZigArGgxXUaFASiQIYo2YytoorkafCAoPASIowDQ1Gp+FQIEsSL5tVE5mALQAmRUKTEKBSUxTMGhUOBLekm5RtVgACgkanjuEUxV4lgAlOzTaGPjRYPt6cn4+QM5YALriiAERQJgtF+A52NRb51pOTeC8OuN4ueAeKXm8SQE+DQ3kt8VREqsaxqJRUeAAd0UCV4AA93A3C-s0+HIwg1Fnp4og6blLP50o+9dTeeZ-A5wvmSu106twngNiwxGo8fFU9RQIUTUsnzTCslgmNNbynC8VDA1hyydakJkrelbwAbh8eDLyEa01HrLNsNPPDnyUGJ9kwgMqHPBRqVpJRvCXVd10-Bj+H3P8jxPKgFAIawqGhWElGsSw+ngAAxXg1B9BNm1zZRQwGel4AweMmlYGIIEkWx4ATXw+jyAZfF4zk3X4DAWXgcgBnQ7x5IwWDA2DKgBKEmE6RKSNowTODFALQiSBiel+QAZQAeR0DBgrUCwWlrbcOKoNM5lgWA0xQYjIj+SwMAsJc1AACQAFQAWQAGXpAADJlRC5YCJgQC4CFJJwSAgAAvVVfRQSwN0BAASYBYsxIwuRkWraNc7yCL81yoF4bh5iEVgMAAR32NR3DCyFx1YGSmnShNeXIIyzkrScMFatQAFEaG4ZgEwgQQfU8GRFO+V6MF1KBbo+VaKogYKhCWE7ulsUVFHgAGBCGD7W2UMSJOk2T5NhtbELMs9eMxXiFD4KhaQQDBYF4FoE2SjAN3xviqDBPgwEsYglhESQpEhMEIShTyiZEJEUXVFAMWxXF6BEDBuANBnSVWkQsUrTEgA)
Resources for Web Development
Tags: webdev, resources, hosting, animation
Published: 2021-05-21 13:08:00

##Contents
1. [Resources for Icons](#icons)
2. [Chrome Extensions](#ce)
3. [Resources for PNG](#png)
4. [Hosting](#hosting)
5. [Animation](#ajs)

###Icons <a name="icons"></a>
1.[Noun Project](https://thenounproject.com/)
2.[Vecteezy.com](https://www.vecteezy.com/)
3.[Flaticon](https://www.flaticon.com/)
4.[iconscout.com](https://iconscout.com/)
5.[iconset.io](https://iconset.io/)

###ChromeExtension <a name="ce"></a>
1. JSON Viewer - chrome extension for printing JSON
2. CSS Peeper - Extract CSS and build beautiful style guides
3. LightHouse - automated tool for improving the performance, quality and correctness of your web apps

###PNG <a name="png"></a>
1. [stickpng](https://stickpng.com)
2. [pixelsquid](https://pixelsquid.com)
3. [pngpix](https://pngpix.com)
4. [pngtree](https://pngtree.com)
5. [freepng](https://freepngs.com)
6. [freepngimg](https://freepngimg.com)

###Hosting <a name='hosting'></a>
1. [Github pages](https://pages.github.com)
2. [Heroku](https://www.heroku.com)
3. [Netlify](https://www.netlify.com)
4. [Vercel](https://www.vercel.com)
5. [AWS](https://www.aws.amazon.com/)

###Animation <a name="ajs"></a>
1. [MO.js](https://mojs.github.io/)
2. [KUTE.js](https://thednp.github.io/kute.js/)
3. [Simple Parallax.js](https://simpleparallax.com/)
4. [Granim.js](https://sarcadass.github.io/granim.js/)
5. [Animated Letters](https://tympanus.net/Development/AnimatedLetters/)
Weekly Update #92 - I need you!
Tags: devrel, azure, weeklyupdate, discuss
Published: 2021-05-21 12:52:35

This week I am asking for something from all of my listeners and viewers.  I need your feedback, I wan to hear what you enjoy, what you hate, what you would like to see me do more of etc on my YouTube channel.

I have a ton of ideas of things I'd like to blog about, create videos about, but I never seem to get any time to do that strategically.  I always seem to be rushing around so I am taking a step back to try and focus and concentrate on the direction I am going on.

Your feedback will help make sure I am heading in a direction that works for you as well.  So your input is important. So please don't be shy.

# Azure News
- [Windows Virtual Desktop web client to end support for Internet Explorer 11 on September 30, 2021](https://techcommunity.microsoft.com/t5/windows-virtual-desktop/windows-virtual-desktop-web-client-to-end-support-for-internet/m-p/2369007?WT.mc_id=modinfra-29110-salean)
- [General availability: VNET peering support for Azure Bastion](https://docs.microsoft.com/azure/bastion/vnet-peering?WT.mc_id=modinfra-29110-salean)
- [Azure Stack HCI learning path](https://docs.microsoft.com/learn/paths/operate-maintain-azure-stack-hci/?WT.mc_id=modinfra-29110-salean)

{% youtube DP4-UAD9BsY %}
My Virtual Challenge Percentage Bookmarklet
Tags: javascript
Published: 2021-06-06 15:30:54

---
title: My Virtual Challenge Percentage Bookmarklet
published: true
date: 2021-05-21 12:51:00 UTC
tags: JavaScript
canonical_url: https://drmsite.blogspot.com/2021/05/my-virtual-challenge-percentage.html
---

I did [1000 miles of exercise at the beginning of the year](https://www.justgiving.com/fundraising/dominic-myers5) (I'm only £20 off my target if you want to follow that link and donate?) using [My Virtual Mission](https://www.myvirtualmission.com) and found myself at a loose end when I finished the challenge... so I signed up for a new one. This one is a lot longer (2,485.5 miles), and I've been assiduously adding my steps and cycle rides every morning since I started - but I don't know what percentage I've completed. So I wrote some code in a Snippet and converted it, once it was doing what I needed, into a Bookmarklet: [Get Percentage](javascript:(()%20=>%20%7Bconst%20container%20=%20document.querySelector('.mission-container');const%20target%20=%20container.querySelector('.mission-target');const%20current%20=%20target.querySelector('#goal-mine%20.progress-bar-current');const%20missionTarget%20=%20Number(target.querySelector('.totals%20.total-value').innerHTML.split('%20')%5B0%5D.replace(/,/g,%20''));const%20current_text%20=%20current.innerHTML;const%20current_miles%20=%20Number(current_text.split('%20')%5B0%5D.replace(/,/g,%20''));current.innerHTML%20=%20%60%24%7Bcurrent_text%7D%20(%24%7B((current_miles%20/%20missionTarget)%20*%20100).toFixed(2)%7D%)%60;%7D)();). I've found it works well so feel free to copy it to your bookmarks should you also want to see your millage converted to a percentage.

Should you want to check the code, this is it:

```js
const container = document.querySelector('.mission-container')
const target = container.querySelector('.mission-target')
const current = target.querySelector('#goal-mine .progress-bar-current')
const missionTarget = Number(target.querySelector('.totals .total-value').innerHTML.split(' ')[0].replace(/,/g, ''))
const current_text = current.innerHTML
const current_miles = Number(current_text.split(' ')[0].replace(/,/g, ''))
current.innerHTML = `${current_text} (${((current_miles / missionTarget) \* 100).toFixed(2)}%)`

```
Cross-browser testing with Comparium
Published: 2021-05-21 12:31:31

Cross-browser testing is becoming a must-have for every developer and thus there are more and more tools to make this process easier. However, let's talk about one of the best tools for cross-browser testing Comparium. 

It's a simple tool for performing cross-browser tests on different platforms. You can find [browser emulators](https://comparium.app/browser-emulator.html) for Chrome, and also for Opera, Firefox, and Edge along with various operating systems and display resolutions.
CSS Animation Libraries
Tags: webdev, css
Published: 2021-05-21 12:31:13

###[Animate.css](https://animate.style/)
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

###[Animista](https://animista.net/)
Animista is a CSS animation library and a playground where you can play with a collection of ready-made CSS animations and download only those you will use.

###[Hover.css](https://ianlunn.github.io/Hover/)
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

###[Magic Animation](https://www.minimamente.com/project/magic/)
CSS3 Animations with special effects built using SCSS and javascript
Custom webhook to trigger build on DigitalOcean App Platform using Strapi 
Published: 2021-05-21 12:18:10

A couple of days ago i needed to create a webhook to trigger a GatsbyJs build after update, create or delete something in our backend using Strapi.

Strapi has a built in option to do that very easy if your frontend app is on Netlify, but our app is on Digitalocean so we need to create our own webhook.

Reading digitalocean's documentation i found that the url that we need to make the request is this one: 

`https://api.digitalocean.com/v2/apps/YOUR_APP_ID/deployments`

First we need to go to our api endpoint models (in this case i'm using Strapi) and i want to rebuild after creating , deleting or updating a post, so i  will go to `/api/posts/models/posts.js`

We are going to use Strapi lifecycles hooks, afterCreate,afterUpdate,afterDestroy.

We also need to create a Token / Key in digitalocean `(your digitalocean account/->api->Tokens/Keys)` 

I put the token in a .env file as POSTS_BUILD_TOKEN

then install axios `npm i axios`

Our `/api/posts/models/posts.js` should look like this:


```
'use strict';
const axios = require('axios')

const token = process.env.POSTS_BUILD_TOKEN

module.exports =  {

    lifecycles: {

    async afterCreate()  {
       
        axios({
            method: 'post',
            headers: {
                'Content-Type': 'json',
                'Authorization': `Bearer ${token}`
            },
            url: 'https://api.digitalocean.com/v2/apps/${token}/deployments',
           body:{
               "force_build":true
            }
          });
      },

  
    }
};
```

Then you can go to your Content Type and create, edit or delete and as soon as you click save, it will trigger the build.
Day 2/30 : Neumorphism Login & Sign Up Form using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-05-21 12:10:40

Welcome to Day 2 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Neumorphism Login & Sign Up Form](https://1.bp.blogspot.com/-ro2lDij149A/YKOWQnFq7dI/AAAAAAAAAAw/obQR0rgBf8sd582jz0dUBilZouy2UNVKwCLcBGAsYHQ/s600/p2.gif)

**➜ Video Tutorial :**

{% youtube A8OBtZR9Msw %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/05/neumorphism-login-and-sign-up-form.html


**➜ Instagram Post and Reel for Day 2 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
🧩 Introducing the Identity Maturity Framework
Tags: security
Published: 2021-05-21 12:08:48

#### 📌 The Auth0 Identity Maturity Framework helps you understand what’s working about your current identity implementation and what needs to mature.
### <br>

Today’s users are accustomed to living and working online, and they expect a secure, effortless experience every time they access your platform. Seamless authentication is no longer a nice-to-have; it’s a requirement for success. And since companies are building more custom applications, users need fast, secure access across multiple platforms and devices. Identity touches every aspect of your business, so managing identity is more complex and more critical than ever before.

In response, organizations are exploring the value of third-party [identity-as-a-service (IDaaS)](https://auth0.com/blog/what-is-idaas/) platforms like Auth0. These solutions offer a centralized source of truth for authentication, authorization, and customer insight.

## What Is Identity Maturity?

Identity maturity is a way of thinking about the efficacy of your existing identity solution and its capacity to handle new business requirements and customer demands as you grow and scale. Achieving identity maturity involves understanding what a fully functional, centralized authentication solution looks like. Evaluating your current state, creating a plan to improve your identity infrastructure, and fostering a culture of continuous improvement are also key to reaching identity maturity.

As an IDaaS provider, Auth0 works with organizations of all sizes in a diverse array of industries to tackle identity challenges. In doing so, we’ve learned a huge amount about the identity models that work for particular business needs and goals.  

In fact, we’ve consolidated our expertise and our customers’ knowledge and experiences into a solution we call the [Auth0 Identity Maturity Framework (IMF)](https://auth0.com/imf-form): a collection of tools, tactics, and expert input that will help you understand what’s working about your identity solution and what needs to change. 

[Read more...](https://auth0.com/blog/introducing-the-identity-maturity-framework/?utm_source=content_synd&utm_medium=sc&utm_campaign=identity)
Fix Flutter doctor failed due to permission denied on Linux
Tags: flutter, archlinux, mobile, troublushooting
Published: 2021-05-21 12:06:33


## Problem

When I tried to install [Flutter](https://flutter.dev/) 2 on [Linux](https://linux.org/), [running `flutter doctor` was required](https://flutter.dev/docs/get-started/install/linux#run-flutter-doctor).

Running it, however, resulted in the "Permission denied" error below.

```console
$ flutter doctor
touch: cannot touch '/opt/flutter/bin/cache/.dartignore': Permission denied
```

Should I do it as root, superuser? No. It is not recommended:

```console
$ sudo flutter doctor
   Woah! You appear to be trying to run flutter as root.
   We strongly recommend running the flutter tool without superuser privileges.
```

## Solution

Invite the user you use to "__flutterusers__" group.
Here is an [Arch Linux](https://archlinux.org/) example. Run this command:

```console
$ sudo usermod -a -G flutterusers <your-user>
$ # alternatively:
$ #sudo gpasswd -a <your-user> flutterusers
```

Log out and login again.
Then, try `flutter doctor` again.

```console
$ flutter doctor
   Building flutter tool...
```

Solved 🙂

### Optional: Another way (less recommended)

Alternatively, it may be solved by changing `/opt/flutter` permission. But it is perhaps less recommended.

```console
$ sudo chown -R <your-user>: /opt/flutter 
```
Daily Developer Jokes - Friday, May 21, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-21 12:00:05

---
title: "Daily Developer Jokes - Friday, May 21, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20May%2021%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259082460c.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why do kayakers make bad programmers?

___A:___ Because they're afraid of waterfall.
 -->
Setup a Virtual Python Environment and a new Flask Project on WSL2
Published: 2021-05-21 11:52:46

This post will guide you through setting up basic local python development environment on a Windows PC using WSL 2.

[Click here for steps for setting up WSL 2 and installing the Ubuntu 20.04 LTS distribution.](https://dev.to/jackdarracott/setup-a-local-php-mysql-development-environment-using-windows-subsystem-for-linux-2-5b)

## Install Python

Open Ubuntu 20.04 LTS Terminal:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl3t7dlp0xsuuy54n671.png)

*Download available package information*
```bash
sudo apt-get update
```

*Install python pacakges*
```bash
sudo apt-get install python3 python3-venv pythonpy
```

## Create Project Environment

You'll want to keep your projects separated, so create a new directory, navigate to it, then set up a python virtual environment.

*Create a directory for the project*
```bash
mkdir python-project
cd python-project
```

*Create a virtual environment for the project*
```bash
python3 -m venv venv
```

## Activate The Project Environment

You'll need to remember to do this each time you start work on the project.

```bash
. venv/bin/activate
```
If done correctly, your terminal commands should be prefixed with (venv) - indicating you're in the python virtual environment.

## Get Started With Flask

Ensuring the project environment has been activated, run the below command to install Flask into the project.

```bash
pip install Flask
```

Now you can create the first script:

```bash
touch index.py
```

Finally, open the project in Visual Studio Code:

```bash
code .
```

## Hello World!

Enter the below code into index.py. This will import the flask package you installed previously and store it in the "app" variable.

```py
from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello World";

if __name__ == "__main__":
    app.run()
```
Save the file and return to the terminal, you can now use python3 to serve the script, so you can view it in a web browser:

```bash
python3 index.py
```

You'll be prompted with the access URL:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86g2otes4r4kfb1ve7gd.png)

Which when accessed via a web browser, displays the return returned in the "home" function:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avkn6iwaev7ar6eub7wi.png)

## Disclaimer
This was written for a friend in my lunch break. I don't know anything about Flask or Python so do not use for production.
hyper -v 导致 windows 10 分辨率降级
Tags: troubleshooting, wsl2
Published: 2021-05-21 11:42:11

<https://github.com/microsoft/WSL/issues/5662>
参考其中一个人的建议解决

> For those of you with HP systems having this issue, do you have the systems set to "Legacy Support Enable and Secure Boot Disable" (BIOS F10 > Advanced > Secure Boot Configuration). If so try changing to "Legacy Support Disable and Secure Boot Enable" or "Legacy Support Disable and Secure Boot Disable".