teleren/devto huggingface dataset:
Albion and their app for corona
Published: 2020-09-15 01:26:29

Is this intrusive or necessary?

I think this is very intrusive. While it might work it does require everyone to follow it. Even if everyone follows it there are loopholes to get around it. Since it is a geofencing app you can spoof your location or you could even just turn off your location if you need some time without being constantly looked at. If you do not want to bring your phone with you or you want to hide your location in another way you could just leave your phone in your dorm to mask the location of where you are. This goes without saying I think this app will work if it is full proof and there is no way to mask or hide your exact location but it is very intrusive and I feel it is very unnecessary. 

Would you accept this here?

I do not think I would. I think making sure 25,000+ people on campus having this app would be an extreme amount of data and too much data to act on. Just making sure just one person deletes or turns off their location would be too demanding on the scale of this campus. The campus that it was tried on was smaller so their tech department or whoever was governing over the information did not have to deal with as much information as would our college would here at University Park. 

Is privacy of data more valuable than safety?

I do think that the privacy of data is more valuable than safety because already the government knows so much and already has so much power that if we give them more power we are no longer are a free country and one that is being controlled by the government. Our country would be turned from a Home of the brave to a body of mass with a controlling government such as China. 

Envision more ethical ways of solving this issue with tech?

I think there are only a few ethical ways to solve this with tech. One of the ways to have an optional app that is not mandatory.

Conceptual Risk Factors:

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

Physical Risk Factors:

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

Youtube Video:

https://www.youtube.com/watch?v=K6Qg5Jo6thM&feature=youtu.be&ab_channel=BeastMode
I automated my weather bot with GitHub Action. 😎
Tags: actionshackathon, github, javascript, showdev
Published: 2020-09-15 06:04:15

### My Workflow: [Weather Bot](https://github.com/cmcodes1/weather-bot/actions?query=workflow%3A%22Weather+Bot%22)

### Submission Category: Wacky Wildcards

### Yaml File: [action.yml](https://github.com/cmcodes1/weather-bot/blob/master/.github/workflows/action.yml)

### Link to Code:

{% github https://github.com/cmcodes1/weather-bot %}
Cartoonisation with Python (Submission for Github Actions x Dev Hackathon)
Tags: actionshackathon, github, python, opensource
Published: 2020-09-15 06:03:24


My Workflow:
The name of my Github Action is Python Cartoonisation. It is a fun program, created with OpenCV and able to animate normal images and pictures.


Submission Category: Wacky Wildcards

 
Link to code:
{% github https://github.com/Anugya-Gogoi/Cartoonisation-program %}
Vanilla JavaScript save canvas as an image
Tags: canvas, html, javascript
Published: 2020-09-15 05:45:58

Yesterday we got started on our [basic canvas course](https://daily-dev-tips.com/posts/getting-started-with-the-html-canvas/).
Thinking about the project I want to do, I need to export the canvas as an image.

So how do we convert the canvas to an image?

There are actually two ways of doing this, and we will explore both.

See the end result on this Codepen.

{% codepen https://codepen.io/rebelchris/pen/rNevrXg %}

## 1. Right-click to save

Everyone knows this option, but we can just right-click to save on the canvas.

This will only work in certain browsers, so it's not the most valid way of saving it.

![Canvas save to image right click](https://cdn.hashnode.com/res/hashnode/image/upload/v1599918970840/G1-S4b4nq.png)

> Note: Keep in mind the canvas has no background!

## 2. Adding a download button

The other option is to add a download button to our page. This download button will then export the canvas content en open the base64 image in another tab.

Adding the button:

```html
<canvas id="canvas" height="200"></canvas>
<br />
<button id="download">Download</button>
```

Now let's add the button variable to our `JavaScript`

```js
const download = document.getElementById('download');
```

Awesome, now we need to add a `eventListener` to it and listen to the click command.

```js
download.addEventListener('click', function(e) {
  var link = document.createElement('a');
  link.download = 'download.png';
  link.href = canvas.toDataURL()
  link.click();
  link.delete;
});
```

We create a temporary `ahref` on which we will place the canvas's data url and then click it.

We are using the `toDataURL` function which returns a base64 string that looks something like this:

```js
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
```

## Browser Support

The canvas element is well supported these days and is defiantly a good option if you want to draw vectors on screen.

![HTML Canvas support](https://caniuse.bitsofco.de/static/v1/mdn-html__elements__canvas-1599916182087.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)
Scoping Chain
Tags: javascript
Published: 2020-09-15 05:03:18

Calling a function in Javascript creates a new [execution context](https://dev.to/javila35/what-is-the-execution-context-in-js-in), and when that is created so is a scope chain for that function. The scope chain defines what variables and functions this execution context has access to. 

There is a global context which is the javascript file currently being executed. It's safe to assume that all execution contexts on the execution stack have access to the global context, and it's environment record. Consider the following code: 

```javascript
let globalVar = "this is the global context.";

function one() {
   const insideOne = "this is inside of function one.";
   globalVar = "I have access to globalVar here.";
   console.log(globalVar);

   two();

   function two() {
      const insideTwo = "this is inside of function two.";
      globalVar = "I also have access to globalVar in function two."
      console.log(insideOne, insideTwo, globalVar)
   };

};

function three() {
   const insideThree = "this is inside function three.";
   globalVar = "I also have access to globalVar in function thre.";
   console.log(insideThree, globalVar);
   console.log(insideOne);
};

one();
three();
```

If you run this in your console, you'll see the messages up until we hit the last line of `function three()` where we try to call the variable `insideOne`. We don't have access to `insideOne` because it's outside of the current scope chain. That variable only exists in the execution context of `function one()` and `function two()`. Once those are cleared off the execution stack, javascript erases them from memory.

Notice how in our nested function we do have access to the variable `insideOne`, and `globalVar`. When an execution context creates a scope for a function it maintains the variable objects of its parent function. The global context is the parent of all functions called in a javascript file. As I mentioned earlier, we'll always have access to global variables such as `globalVar`. Because `function two()` is nested within `function one()` we also have access to any variables declared in `function one()`. *Fun fact, this scoping chain is how [closures](https://www.w3schools.com/js/js_function_closures.asp) are created.*

You may have noticed I called `two()` before declaring the function. You can read about that in my [Hoisting article](https://dev.to/javila35/hoisting-4b80).
Ubuntu 18.04 üzerinde Liman MYS kurulumu
Tags: ubuntu, liman, php
Published: 2020-09-15 04:57:44

Liman MYS geliştirilmesi itibari ile Pardus işletim sistemi üzerinde kullanılmaya yönelik paketlenmiştir. Fakat Debian tabanlı sistemlerde çalıştırılmasının önünde hiçbir engel yoktur. Fakat bağımlılıklarından dolayı özellikle PHP 7.3 sürümünün bulunmasını beklemektedir.

Ubuntu 18.04 üzerinde PHP 7.3 sürümü bulunmamaktadır fakat bunu eklemek oldukça kolaydır. 

## Ubuntu 18.04 üzerinde PHP 7.3 sürümü kullanabilmek

Aşağıdaki depo ve güncelleme ile Ubuntu üzerinde PHP 7.3 sürümü kullanılabilir duruma gelmekteyiz.

```bash
sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt update
```

Ayrıca iki adet paket de güncellenmelidir:

```bash
sudo apt install php-sqlite3 php-curl
```

## Liman'ın bulunduğu Aciklab Deposunu ekleme

Aşağıdaki iki komut ile depo'yu sisteme ekleme ve bu deponun açık anahtarını sisteme tanıtma yapılabilmektedir.

```bash
echo "deb [arch=amd64] http://depo.aciklab.org/ onyedi main" | sudo tee /etc/apt/sources.list.d/acikdepo.list
sudo wget -qO - http://depo.aciklab.org/public.key | sudo apt-key add -
```

## Güncel Liman'ı depo üzerinden yüklemek

Güncel Liman'ı depo üzerinden yükleyebilmek için aşağıdaki iki komut gerekmektedir.

```bash
sudo apt update
sudo apt install liman
```

## Yönetici Parolası oluşturmak ve arayüze girmek

Kurulum sonrasında ilk yapılması gereken Yönetici parolası oluşturmak. Bunun için aşağıdaki komutlar ile sudo yetkili kullanıcıda iken liman kullanıcısına giriş yapılır ve yönetici hesabı oluşturulur:

```bash
sudo su liman
sudo php /liman/server/artisan administrator	
```

Bu adım sonunda karşınıza liman web arayüzünden giriş yapacağınız kullanıcı adı ve parolanız çıkacaktır. Liman'ı kurduğunuz sunucunun ip adresini web tarayıcınız üzerine yazıp bu bilgiler ile giriş yaparsanız Liman'ın Web arayüzüne giriş yapmış olacaksınız.

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

Pardus üzerinde kurulum kaynak: https://rehber.liman.dev/liman-kurulumu/liman-kurulum-yoentemleri/depo-uezerinden-kurulum
API PLATFORM - a framework to build modern API
Tags: graphql, react, php, beginners
Published: 2020-09-15 04:56:47

Downloading, modifying, uploading, in general exchanging data is fundamental for modern apps. Using API (defined set of rules how apps can communicate with each other) is the most popular way of setting up a communication system between external systems.

> *What makes a good API?*

First of all, it needs to be easily understandable and legible for all its potential users. A decent API should have well-documented examples and do not leave any room for guessing. There is a solution that comes in handy if you want to create a solid API, it's a tool called **[the API Platform](https://api-platform.com/)**.

## API Platform

API Platform is a set of tools that combined build a next-generation REST and GraphQL framework to build modern API. The server API Platform is built on top of enterprise-proven solutions:

- **Server-side** - Symfony 4 microframework and the Doctrine ORM.
- **Client-side** - we have an option to choose between ReactJS & Vue.js  for the web and React Native for mobile. 
- **Development & deployment environments** -  Docker, Kubernetes, and Helm.

All that powers the modules responsible for API creation, schema generation, admin panel & client generation:

- **API Platform Core Library** - a highly flexibly, stacked with cool features core library allowing you to build fully-featured REST or GraphQL API in minutes. 

- **The Schema Generator** -  a CLI tool that instantly generates a PHP data model from the Schema.org vocabulary allowing ORM to create corresponding tables.

- **API Platform Admin** - a tool to automatically adds a React-based admin interface to your API, all that without writing a single line of code.

- **API Platform Client Generator** - the fastest way to scaffold fully-featured web apps (powered by React or Vue.js) or native mobile apps (based on React Native).

![API Platform layers](https://dev-to-uploads.s3.amazonaws.com/i/sdnj799cea0e5gmdo5yq.png)

###### Source: [api-platform.com](https://api-platform.com/)


Platform API looks very promising as an all-in-one solution for modern projectsand it's worth taking a closer look. The wide range of microservices offered by API Platform might come in handy for many developers. I'm pretty sure that deeper dive into all its features and using what best it has to offer like data validation, pagination, hypermedia or GraphQL support, and many more can result in a significant productivity boost!

---

## Want to speed up your GraphQL schema development?

*GraphQL Editor* is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. **[Try GraphQL Editor for free!](https://graphqleditor.com)**


[![GraphQL Editor](https://dev-to-uploads.s3.amazonaws.com/i/a7qwlawx8v594fs2bq0a.gif)](https://graphqleditor.com/)
Rails Landmarks - Don't Get Lost!
Tags: rails, ruby
Published: 2020-09-15 04:51:20

Opening a repository that uses **Ruby on Rails** can be an intimidating experience to those new to the experience.  There are many folder with many folders with many files. However just like moving to a new city, once familiarized with major landmarks you can begin to enjoy your drive to work and find new things to love in this new big city!

Let's take a look at the file tree to see what fun things there are in this town.

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

There's a lot here, even before expanding most of these folders.  We're going to look at two groups - landmark folders in app_folder/app and landmark files outside the /app folder.  We'll go over the primary function of each item.  A simplified filed tree is below:

app_folder/
    --> app/assets/stylesheets/
    --> app/controllers/
    --> app/models/
    --> app/views/
app_folder/
    --> config/routes.rb
    --> db/
    --> --> migrate/
    --> --> schema.rb
    --> --> seeds.rb

The app folder houses our MVC, **Model View Controller** folders.  These are three of the most beautiful parks in the city, and powerful tools that rails gives us.  Our model folder houses associations: our `belongs_to`s `has_many`s, and `validates`es.  With this, our program can understand that a comment `belongs_to :post` and that a user can `have_many :posts`.

Controller holds the methods that each model can use.  Most models (a site's _users_, Facebook's _posts_) can be created, read, updated, and destroyed (CRUD), among other capabilities like _sign in_.  The view folder holds the .html files, literally what your audience views on the browser.  There should be a folder for each model, each with a .html.erb file for every action or page you give that model.  assets/stylesheets contains .css files, one for each model.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l757jmoludjh9ta7s4pj.jpg)

As you cruise through your new town you're likely to see many road signs, some with directions and arrows, others with advertisements of what is nearby.  Our config/routes.rb files is where to find most or all of the arrows and paths that a user on your site with be sent down.  This is where we find our verbs: `get`, `post`, `patch`, `delete`, etc.  A simple tool for knowing how to write these paths is RESTular.com .  Your migrate folder houses all your migrations and the schema.rb folder shows all of the elements that go into your models.  

If you have children you will no doubt want to help them feel safe at home in this new town.  The seeds.rb file is the backseat of your minivan, with plenty of room for all your rambunctious example material and class instances.
There is a lot to see in this new home of yours. Relax and enjoy the ride!
Intake Form using React and Django
Published: 2020-09-15 03:47:45

Links to deployed:
frontend https://virtualcharms.github.io/consult-app/


## Why?

As our lives get increasingly productive, many people are not able to make time for themselves, and specifically, to keep up on healthcare appointments. A digital intake form would be useful for users who would rather fill out an intake form at home or on their own time and be able to receive results and treatment plans remotely.

The pandemic and life in quarantine has seen the use of e-health and remote medicine skyrocket as a lifeline for both clients/patients and practitioners alike.

Brief Demo:
{% vimeo 457968447 %}


I got started on a digital intake form for an independent health practitioner or even as a liasion to an EHR, a.k.a: an electronic health record app or website.

## The Planning Process

I came up with this idea as a practitioner myself, as a solution for my own practice, in order to keep in touch with my existing clients (we all have crazy schedules) and to inspire potential clients to try out a new method of client and practitioner interaction through this digital version.

When I first plotted out the course of this project, I knew that it would be a grand undertaking so I broke it down into individual components and decided to tackle the most technical heavy aspect of the project. But looking back, this part of the project may have been the most challenging part of the project.  

## App Features

There are 2 main features of this project app:
- a backend (built with Django) that houses intake questions and potentially, protected client responses.

- a frontend (built with React) that displays questions brought in from the backend and that receives and saves the client’s responses from inputs.

## Highs and Lows:

### Challenges
- Coming back to React after a few weeks away was a little scary but went well.

- This project was especially challenging for me. After my last several projects, I tried to try out something different this time and I definitely came up against far more road blocks.

### Triumphs
- Returning to React was not as scary as I thought it would be and I was really excited to pick up Bootstrap for the first time with relative ease.
- Building the back-end with Django was chill. I did try out a new-to-me thing called enum as a choice field.

### Things I would do differently
- I think the biggest lesson learned from this project is that, when it comes to coding, things that seem straight forward are usually never straight forward. In the future I will prefer to err on over planning instead of getting stuck mid-project because of lack of planning.

- Once I get thru this part of the app I will like to be able to add User Auth and get my app to be HIPPAA compliant!
A Starter template for React & ASP.NET Core App in Azure 
Tags: azure, react, dotnet, showdev
Published: 2020-09-15 03:45:49

So you are thinking of building an app using React, ASP.NET Core and deploy to Azure.

That should be simple isn't it?

No, not likely if you are building something to put in production; because in that situation you (or InfoSec) will have several of following ideas, perfectly reasonable in themselves :

- Lets use newest React and .NET Core features. 
- Database? Obviously Azure SQL Db.
- Azure Search and Azure Redis Cache will make my app really fast. 
- Users really want SSO, so we should use OpenId Connect, OAuth 2.0, Azure AD, MFA ...
- Definitely no keys, secrets and passwords in config files.
- CI/CD is a given.
- We will fully automate cloud provisioning.  
- MVP in 12 weeks, Yey :smiley:!

However, together this is a lot of work. For example: 

How app will access Azure Search and Redis Cache? The best practice is to use Azure Managed Service Identity(MSI). However MSI is not supported for these services yet. That leads to Azure Key Vault; you can store the keys in Key Vault and retrieve them using MSI from the app. But can Key Vault be used for storing Azure SQL DB passwords as well? You can, but SQL DB does support MSI so it is better to use that. 

How about provisioning? You can use ARM templates, Azure PowerShell or Azure CLI. However if you goal is to achieve 100% automation and CI/CD then you probably need all 3.  

and there are more like this... 

Lot of this complexity is accidental in nature and has nothing to do with the success or failure of your app i.e. the solution to the problem you are trying to solve. Does that mean you can push it towards later in the development? Not advisable, you probably will under estimate the effort and risks and end up in trouble. 

So what is the solution?

Ironically, good news lies in the nature of the problem. As mentioned above, lot of this complexity has nothing to do with with your problem you are trying to solve. That means if you have a set of patterns that solve them you can carry them to your next app, provided you structure your code and deployment appropriately. 

Having been there recently, I built a template encapsulating the solutions for my future self. You might find it useful. Here it is: 

{% github bablulawrence/starter-react-dotnetcore %}
Create redux in 28 lines of code
Tags: redux, webdev, javascript
Published: 2020-09-15 03:00:05

Its such an eye opener when you learn to create the tools you are using and get a glimpse of how some of its functionality works under the hood.
```javascript
function createStore(reducer, initialState) {
	let state = initialState;

	function getState() {
		return state;
	}

	function dispatch(action) {
		state = reducer(state, action);
	}

	return { dispatch, getState };
}

function reducer(state = [], action) {
	switch (action.type) {
		case "add":
			return [...state, action.payload];
		default:
			return state;
	}
}

const store = createStore(reducer);
store.dispatch({ type: "add", payload: "learn to code" });
store.dispatch({ type: "add", payload: "react" });
store.getState();
//[ 'learn to code', 'react' ]
```
inspired by: **typeofnandev**