teleren/devto huggingface dataset:
Change Destination Directory of AirDrop on macOS
Tags: macos, shell, filesystem
Published: 2020-06-20 06:46:05

You can't.

But there is a workaround, that is moving the file received by AirDrop from Download to your desired destination automatically as it is received. We can achieve this using a Folder Action combined with some filtering thanks to a security feature provided by Apple. 

A Folder Action is an Automator workflow which runs whenever a file is added to a folder. Automator is a graphical programming environment specifically for macOS applications. It is similar to Shortcuts (originally Workflow) on iOS, but much older.

The finished Folder Action looks like this:

![Automator interface, showing a Folder Action containing three actions: Get Selected Finder Items, Run Shell Script, and Move Finder Items](https://dev-to-uploads.s3.amazonaws.com/i/llj09nuiiehqcmwsnxb7.png)

The Automator parts are hopefully straight forward. Simply search for the corresponding actions and drag them over. 

- "Get Selected Finder Items" takes the files added to Download and feeds it to the 
- "Run Shell Script" action, which filters to only the files transferred by AirDrop, and passes those to 
- "Move Finder Items", where you can configure the destination of those files. I have added a new folder called "AirDrop" inside my Download folder for this purpose.

The shell script inside the "Run Shell Script" action needs a bit more explanation. The code is this:

```zsh
for f in "$@"
do
    if [[ -n $(xattr -p com.apple.quarantine $f | grep "sharingd") ]] then
        echo "$f"
    fi
done
```

With "Pass input:" on the top right corner of the action as "as arguments", the for loop goes through each file. For each file, we check its `com.apple.quarantine` extended attribute with `xattr` and see whether `"sharingd"` is contained in it. If so we `echo` it, giving it to the next action to move, otherwise we ignore it.

The [extended attributes (xattr)][xattr] are extra metadata attached to files for various management purposes. In this case, `com.apple.quarantine` is the xattr containing the quarantine level of a file and where it comes from. `sharingd` is the daemon responsible for handling AirDrop on macOS, and it attaches this attribute with its own name in it to every file it receives. This is why we can use the command above to tell whether a file is received by AirDrop.

[xattr]: https://eclecticlight.co/2017/08/14/show-me-your-metadata-extended-attributes-in-macos-sierra/

---

1. To test the Folder Action, I had to add a Get Specified Finder Items at the top, since I cannot use the actual folder event. Automator told me so when I clicked the Run button.

2. The shell script uses zsh, which is default for macOS Catalina.

---

If you like this post please press the like button to let me know! Please also comment to let me know what I can improve!

If you'd like to donate, please [donate to Wikimedia Foundation](https://donate.wikimedia.org), to which I owe infinitely.
React Native Wifi & Hotspot Wizard.
Tags: showdev, reactnative, npm
Published: 2020-06-20 06:43:04

A react native library that will allow you to easily configure both Wifi & Hotspot settings programmatically using a single library.

## Installation 
```
npm install react-native-wifi-and-hotspot-wizard
```
## Auto Linking
The library supports Auto Linking using the following command

```
react-native link react-native-wifi-and-hotspot-wizard
```
# Usage 

## 🧙‍♂️ Wizards
Wizards will help you do all the necessary magic ✨ 

In this context, Wizards are javascript classes that contain functions that will help you configure settings.

<b>1. Wifi Wizard</b> (for Wifi Related Configurations)<br></br>
<b>2. Hotspot Wizard</b> (for Hotspot Related Configurations)

## Runtime Permissions

Runtime permissions are automatically managed by the library.
Permission will be asked on the device whenever they are required

## Importing Wizards

```javascript
  import {WifiWizard, HotspotWizard} from 'react-native-wifi-and-hotspot-wizard';
```

## Check out the API to learn some magic ✨ 

[<img src="https://res.cloudinary.com/prafulla98/image/upload/v1592631858/React%20Native%20Wifi%20and%20Hotspot%20Wizard/Frame_4get_started_button_fvscwx.png">](https://react-native-wifi-and-hotspot-wizard.netlify.app)

The documentation website is powered by [AbellJS](https://abelljs.org) which is a static site generation framework.

# For contributing check out
{% github Pika1998/react-native-wifi-and-hotspot-wizard no-readme %}
PROGRAMMING is your daily tasks.
Published: 2020-06-20 06:31:07

WHAT IS PROGRAMMING?



As a tutor, you set rules that guide your students, lay process to be follow and penalty for not abiding by the rules.

When you train a dog, you use special words like "sit",stay and fetch. Whenever you say those words to your dog it follow your command.

As a community, there is a rule lay down to every member of the community must abide to. Failure to abide to the rules set will be penalised.

That's exactly what's called Programming.

Unlike human programming. 
A programming is " a process of  writing program to a computer"

Getting started with programming is based on ALGORITHM.

According to a definition " a process or set of rules to be followed in calculations or other problem-solving operations, especially by a computer". Algorithm is not only process in mathematics or computer, it is the rule you set for yourself.

We work on algorithm in our daily activities, assuming you want to sign in to your Facebook account, you'll input your username and password. If the password is matched with what you use to create your account it'll log in, else it raise error.

Same to joining a community, some community will question you. Those questions are algorithm set by the community for you to become member, if your answer is correct to the question given you'll be approved.

Algorithm are rules you gabage into the computer to follow, the computer must abide to the rules given, if the computer doesn't abide the rules it'll be penalised (gabage out wrong information).


Knowing how algorithm works will enhance your software and how smart,secure your development will be. This algorithm are what formed AI (Artificial intelligence). 


So, starting with your programming is based on the algorithm.

Dauda Mubar
AI practitioner | Data Analyst | Karateka | Entrepreneur
Chrome Lighthouse Report
Tags: chrome, lighthouse
Published: 2020-06-20 06:20:03

Let's say you made your first or another website. Of course, we want to make sure we made an accessible and fast website.
We can do a basic audit with Lighthouse inside of Chrome!

We can test for the following categories in Lighthouse:

- Performance
- Progressive Web App
- Best practices
- Accessibility
- SEO

## How to Launch Lighthouse in Chrome

To open Lighthouse we can right-click on the webpage and click the `Inspect` button.
This will open de `Developer tools`. Now click the `Lighthouse` tab.

> You can also use `View > Developer > Developer Tools

## Running a Lighthouse Audit in Chrome

To run the audit, we can select the categories we want to test for and click the `generate report` button.

We then get a full report with tips on what we can improve.

The tips we get usually have links for more details on what google writes on it now (these do change).

## Tips for Making Your Site Faster

Some general tips I've learned over the years

- Compress your images [ImageOptim](https://imageoptim.com/)
- Make less CSS Request (Rather have one or a few stylesheets instead of multiple)
- Make Less JavaScript request (Same as above)
- Leverage Browser Caching [GtMetrix](https://gtmetrix.com/leverage-browser-caching.html)
- Don't overdue on fonts loading (Use one/two external fonts)

### 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)
FLUTTER : DART CHEAT SHEET- Write Smart Code
Tags: dartcheatsheet, flutter, flutterappdevelopmen, flutterwidget
Published: 2020-06-20 14:27:52

---
title: FLUTTER : DART CHEAT SHEET- Write Smart Code
published: true
date: 2020-06-20 06:11:43 UTC
tags: dartcheatsheet,flutter,flutterappdevelopmen,flutterwidget
canonical_url: https://medium.com/innovation-incubator/flutter-dart-cheat-sheet-write-smart-code-9bf26d45f588
---

### FLUTTER : DART CHEAT SHEET- Write Smart Code

![](https://cdn-images-1.medium.com/max/1024/0*F8P3wko5tlYVuujg.jpg)

While writing a long code for some functionality, you know that there will be an easier way to do it.

You might find a few of that in this post or maybe a hint.

This is just the icing, there are many of these functionality pre-built for you.

#### 1. Cascades

Normal Way:

![](https://cdn-images-1.medium.com/max/442/1*rk1sXp4Tgwer2UqPFce37g.png)

Smart Way:

![](https://cdn-images-1.medium.com/max/407/1*-XkEfqw7ZCPqF3tnHk6_yw.png)

#### 2. Null -aware operator

Normal Way:

![](https://cdn-images-1.medium.com/max/435/1*7DkazdM3uYB00zyVeZxKHg.png)

Smart Way:

![](https://cdn-images-1.medium.com/max/444/1*CKiWHGl9h4WLdGXSzIOUBQ.png)

#### 3. Ternary Operator

Normal Way:

![](https://cdn-images-1.medium.com/max/481/1*tWb3rT8220KcNPdwE_iMwg.png)

Smart Way:

![](https://cdn-images-1.medium.com/max/442/1*YTDK3S-kGKccrPy8Rbt4OA.png)

#### 4. Null -aware operator

Normal Way:

![](https://cdn-images-1.medium.com/max/370/1*WOGd8aE95HVJgGKQrenxjw.png)

Smart Way:

![](https://cdn-images-1.medium.com/max/388/1*-ywjNXqXzC3K4vhLoKxc_w.png)

#### 5. Assert Statement

Normal Way:

![](https://cdn-images-1.medium.com/max/469/1*UTP5dVnkwz0gyhaL_kqvdg.png)

Smart Way:

![](https://cdn-images-1.medium.com/max/427/1*pO9wmybp4nkbah4jxiBCwg.png)

#### 6. Index in List

Normal Way:

![](https://cdn-images-1.medium.com/max/509/1*pZK2v7j8mZTmn-BCP9BPDQ.png)

Smart Way:

![](https://cdn-images-1.medium.com/max/517/1*BJgYszpXEpcJkrahGbRLaw.png)

#### 7. Getters

Normal Way:

![](https://cdn-images-1.medium.com/max/397/1*3_s3olzgCrAjsGk_hcqBVA.png)

Smart Way:

![](https://cdn-images-1.medium.com/max/387/1*Z9fW8SsGx8F6qD5FPKGemQ.png)

#### 8. Exceptions

Smart Way:

![](https://cdn-images-1.medium.com/max/440/1*9xt8ovvbodaaHJN0lHFPzA.png)

* * *
How to block +,- and e in Number Input
Tags: react, javascript, css, html
Published: 2020-06-20 03:37:03


![How to block +,- and e in Number Input](https://i2.wp.com/blogreact.com/wp-content/uploads/2020/06/day_1043_input_styles_ui_design.png?fit=750%2C563&ssl=1)

Have you ever used number input and added special logic on onChange event to prevent +, – and e charterers saving to state. In this article we will gonna learn how to write a util function to block these +, – and e in your number input.

## Problem

Let’s see below example.

```
import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input
        type="Number"
        value={value}
        onChange={({ target: { value } }) => {
          setValue(value);
        }}
      />
    </div>
  );
}

```

If you notice we are using a number input and it’s also working fine but we don’t want user to enter +, – and e while typing.

![How to block +,- and e in Number Input](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/06/image-6.png?w=750&ssl=1)

## Solution

The solution is very straight forward. We will gonna write a reusable util function which basically gonna block invalid characters.

```
export const blockInvalidChar = e => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault();

```

We can simply import this function and use it on onKeyPress event.

```
import React, { useState } from "react";

import { blockInvalidChar } from "./blockInvalidChar";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input
        type="Number"
        value={value}
        onKeyDown={blockInvalidChar}
        onChange={({ target: { value } }) => {
          setValue(value);
        }}
      />
    </div>
  );
}

```

![How to block +,- and e in Number Input](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/06/image-7.png?w=750&ssl=1)

[![Edit k63s4](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/nice-kowalevski-k63s4?file=/src/App.js)

[How to use Formik with yup in React](https://blogreact.com/formik-with-yup/)
Drum Machine
Tags: codepen, codenewbie, react
Published: 2020-06-20 04:49:51

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Drum Machine App

Built as a solution to a [FreeCodeCamp](https://www.freecodecamp.org) challange, the [Build a Drum Machine](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine) challenge. Best viewed with a webkit browser *(Sorry old edge users!)*. Sound doesn't work right in anything besides webkit, definitely a fail.

Not entirely sure that I have followed best practice for the structure of the react components (state from children to parents and vice-versa).

What do you guys think? Check the code out on [Github](https://github.com/toastyrhombus/My-FreeCodeCamp-Solutions/tree/master/Front End Libraries Projects/drum-machine)

{% codepen https://codepen.io/toastyrhombus/pen/OJMWqGM %}
How to check the browser is offline?
Tags: javascript, internet, socket
Published: 2020-06-20 03:59:59


Let the user know that he/she is offline is not only a good feature but it helps developers to avoid unexpected conditions and handle errors gracefully. By detecting the client has gone offline you can perform all the security measures to ensure the security of your applications.
I have identified four ways to detect browser is offline which are briefly discussed in my article [How to detect Browser is online or offline?](https://www.blog.guidefather.in/2020/06/how-to-detect-browser-is-online-or.html)
![four ways to detect browser internet connection](https://dev-to-uploads.s3.amazonaws.com/i/w0lgf01fk3j1k4ofi945.gif)

As mentioned in this there are two categories 
* Client-Side Approaches 
* Server-Side Approaches 

You can't rely on client-side approaches to check that the user has internet or not because the browser checks that the system is connected to a network or not which means the user may be connected to a local network that doesn't have access to the internet so I will discuss Sockets approach which is nice and easy to implement if you already using sockets in your project

`let interVal=null; 
    const socket=io()
    socket.on("connect",function(){
        updateIfRequire("online");
        clearInterval(interVal)
    })
    socket.on("disconnect",function(){
        interVal=setTimeout(() => {
            updateIfRequire("offline")
        }, 100);
    })`

You may be wondering, why setTimeout and clearInterval? 
Because Sockets are very fast and in real live projects, small errors can occur any time which may interrupt the socket connection, however, sockets will try to reconnect and establish the connection within few milliseconds that's why I have used setTimeout to update the state after 100ms, meanwhile, if the sockets get connected just clear the setTimeout to stop code from updating the state.
You Can get the complete code from [here](https://github.com/guide-father/no-internet-detection)
Check the [article](https://www.blog.guidefather.in/2020/06/how-to-detect-browser-is-online-or.html) more info

Please let me know if you have a better approach.

t̷h̷a̷n̷k̷ y̷o̷u̷ f̷o̷r̷ r̷e̷a̷d̷i̷n̷g̷
Reactivity with Vuejs
Tags: vue
Published: 2020-06-20 03:22:52

---
title: Reactivity with Vuejs
published: true
description: Scenarios where we need to set reactivity in VueJS
tags: VueJS 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/olstchgwzao0aknpn5j3.png
---

## Problem

I have a component with data function that returns an object:

```js
data() => ({
    car: {}
})
```

Car is an empty string, then I want to add values by some interaction (button click):

```js
<div>
    <p>{{ car }}</p>
    <button @click="addProps">add props</button>
</div>

...
methods: {
    addProps() {
        this.car.brand = 'Kia'
    }
}
```

Then if I click the button the "car" would not be updated in the UI, this is the reactivity problem, Vue add a specific method to solve this problem using "$set":

```js
...
methods: {
    addProps() {
        this.$set(this.car, 'car', 'Kia' )
    }
}
```

This is helpful if you have only one property to add, but in many cases is necessary to add more than one property, in this case JS has a function to solve this problem by assing to the same data attribute a new assing object:

```js
methods: {
    addProps() {
        this.$set(this.car, 'brand', 'Kia' )
        this.car = Object.assign({}, this.car, {
            'brand': 'Kia',
            'year': '2020'
        })
    }
}
```

That's all thanks for reading.
Adventures in xAPI Implementation: Introduction
Tags: xapi, elearning, instructionaldesign, training
Published: 2020-06-20 03:16:48

If you're new to Instructional Design, or new to xAPI, well...you're a lot like me.

A few months ago, I was working as a Project Manager. I had been working primarily as a Project Manager the better part of 7 years. Before that I was a restaurant manager. Instructional Design was nowhere near my radar.

I've always loved solving problems. I enjoy understanding how and why things work the way they do, so as a child in the 90's who had access to a computer, once I discovered the internet I wanted to know how it, too, worked. Coding was a natural fit for me, and before I knew it I was building websites, tweaking blog and (what would eventually become known as) social media profiles, and even setting up some online businesses. I loved it, and eventually picked up some work where I was able to learn about SQL and PHP...but with the pressure to go to college, get a job, etc meant that my love for coding kind of fell to the wayside. Fortunately, I've had reasons to dip back in here and there, so some of my skills have stayed relatively up to date, but there are other areas where I am completely blind.

Learning specifications are definitely one of those areas.

A few months ago, I had never heard the term SCORM or xAPI...I don't even know if I had heard of Articulate, and if I had, I didn't know what it was or how to use it.

Today, I am turning over my first eLearning course - a course designed in Storyline that utilizes xAPI for more in depth tracking of learner data, which then ends up in an LRS that I have also set up.

Some of the things I've included in this course are:
- a personality assessment that will log 40 traits per person
- course content that personalizes to the results of said assessment
- an interactive scenario
- a printable plan formed from the learner's answers to specific questions
- light/night modes

It's been an adventure, and I'm excited to have a place to share the experience I had, and the lessons that come from it as it goes out to learners. My next post will dig more into the actual implementation of xAPI in a Storyline course, how to send custom xAPI statements using Storyline triggers, and a preview of what that data looks like as it comes back to us.
Deno: Vale a pena?
Published: 2020-06-20 02:37:09

Eu resolvi uma vez na vida entrar no hype da comunidade JavaScript e resolvi pesquisar sobre o Deno, o novo runtime JavaScript que teve como um dos principais desenvolvedores o Ryan Dahl, um dos criadores do Node.js. Li a documentação, vi/assisti um material sobre e apanhei um pouco fazendo exercícios práticos.

Daí eu resolvi fazer um projetinho de API de baixa complexidade usando ele. O objetivo era simples: Criar um projeto simples que também use um pouco de tudo que normalmente se usa em uma API real, para assim me fazer ler e pesquisar sobre os recursos que o Deno tem.

O Deno oferece suporte TypeScript nativo, não necessita do node_modules no projeto, oferece alguns recursos de teste nativamente e é mais rigoroso com segurança comparado ao Node.js. Por outro lado o Deno carece bastante de recursos, tem poucas bibliotecas e as bibliotecas que ele tem à disposição são minúsculas, por exemplo eu sofri bastante com a falta de recursos da biblioteca do Mongo no deno. Outro ponto negativo é que o Deno carece de alguma coisa que ajude a gerenciar os seus pacotes. Mas, nada disso é surpresa visto a idade que o Deno tem.

Meu parecer pessoal foi que mais uma vez o Ryan Dahl acertou em cheio e o Deno tem um potencial enorme para ser respeitado na comunidade JavaScript, tanto no lado cliente como servidor. É uma tecnologia que vale a pena ficar no radar do desenvolvedor para quem sabe daqui a uns dois anos ela estar mais bem consolidada

Segue o link do meu projetinho de Api, foi um desafio que eu pesquisei no Github do Back-end Br(https://github.com/backend-br)

https://github.com/kelvinmodesto/url-shortener
Remove Nth node from the end of a Linked List. Solving a Paypal interview question.
Tags: computerscience, webdev, career, javascript
Published: 2020-06-20 02:26:44

Question: Given a linked list, remove the n-th node from the end of the linked list and return its head.

eg if we're given a linked and asked to remove the 2nd node from the end: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0s1yegdcg2bc294sfryy.png)

Give it a try and comeback. 

<h2>Brute Force</h2>
A naive approach might be :
1 > Calculate the total length for the linked list.
2 > Determine the count of the node which is going to be nth from the end.
3 > Parse through the linked list and delete the node by setting it's previous node's next to current node's next. 

Code : 
```javascript
var removeNthFromEnd = function(head, n) {
    if(n == 0) return head;
    let dummy = head;
    let len = 0;
    while(dummy.next != null){
        len++;
        dummy = dummy.next;
    }
    let nth = len-n+1;
    let prev = null;
    dummy = head;
    while(nth-- !=0){
        prev = dummy;
        dummy = dummy.next;
    }
    if(prev !=null)
    {   prev.next = dummy.next;
        dummy.next = null;
    }else{
        return head.next;
    }
    return head;
};
```

An edge case: if for eg:
```javascript
List : [1,2]
n : 2
```

In this case, 2 - 2 = 0, so the head must be removed, which means prev will be null. So the following case : 

```javascript
if(prev !=null)
    {   prev.next = dummy.next;
        dummy.next = null;
    }else{
        return head.next;
    }
```

But here we parsed the linked list twice, can we do better?

To solve this efficiently, we use concept of two pointers. The idea is really simple and intuitive.  

Algorithm : 
Step 1> Create two pointers slow and fast,
Step 2> first move the fast pointer to the nth node.
Step 3> now move the fast (at nth) and slow (at head) pointers one node at a time.
Step 4> when the fast pointer reaches the end, slow pointer is at the nth node. 

Animation : ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ayhvhhgdgklfczrtkp5d.gif)

```javascript
var removeNthFromEnd = function(head, n) {
    let fast = head;
    let slow = head;
    while(n-- > 0){
          fast = fast.next;
    }
    let prev = null;
    while(fast != null){
        fast = fast.next;
        prev = slow;
        slow = slow.next;
    }
    if(prev == null){
        return head.next;
    }
    prev.next = slow.next;
    slow.next = null;
    return head;

};
```

That's it ! Hope you liked my explanation. 

github : https://github.com/AKHILP96/Data-Structures-and-Algorithms/blob/master/problems/removeNthNodefromEnd.js