teleren/devto huggingface dataset:
Getting Started with CloudKit and ReactJS (using Gatsby)
Tags: react, gatsby, cloudkit
Published: 2020-06-15 18:00:10

Hey friends,

I'm currenly building the next version of a Mac desktop app (NotePlan) and wanted to have a web version in future as well. So last weekend I planned to build the proof-of-concept version to get started and see what my users think about it (this is a great strategy to test the waters of a feature before actually building (much) of it).

I was building my landing page with Gatsby (ReactJS) already, and used the same tech for this mini-project.

1. You need to get the cloudkit.js file loaded. With Gatsby is not as easy as adding it to your index.html unfortunately, but you can use a plugin for that. I have used `gatsby-plugin-load-script` and added it to the gatsby-config.js.

I want to share my working results here, because it was tough to figure it out. All the tutorials on the web are for v1 of the cloudkit library and don't work. Then React/Gatsby makes it a little harder as well.

Here is how that looks like:

Inside gatsby-config.js under `plugins`
```
{
   resolve: 'gatsby-plugin-load-script',
   options: {
        src: 'https://cdn.apple-cloudkit.com/ck/2/cloudkit.js'
   },
},
```

2. In your `index.js` you need to configure CloudKit, provide signup divs and start using it:

```
import React from "react"

window.CloudKit.configure({
  containers: [{
    containerIdentifier: 'YOUR_CONTAINER',
    apiTokenAuth: {
      apiToken: 'YOUR_TOKEN',
      persist: true
    },
    environment: 'development'
  }]
});

const container = window.CloudKit.getDefaultContainer()

class IndexPage extends React.Component {
  constructor() {
    	super();
      this.state = {
      	userInfo: null,
      }
    }

    onAuthenticated() {
      // Load your data here
    }

    componentDidMount() {
      container
        .setUpAuth()
        	.then(userInfo => {
          	if(userInfo) {
              this.onAuthenticated()
            	this.setState({userInfo: userInfo});
              return;
            }
            container
              .whenUserSignsIn()
            	.then(userInfo => {
                  this.onAuthenticated()
              		this.setState({userInfo: userInfo})
              })
      })
    }

  render() {
  	return <div>

      <div id="apple-sign-in-button"></div>
      <div id="apple-sign-out-button"></div>
    </div>
  }
}

export default IndexPage

```
Clothing Style Detection & Recommendation System: Dataset Construction
Tags: machinelearning, objectdetection, imagelabelling, dataset
Published: 2020-06-15 17:56:42

[Introduction](https://dev.to/thecodingdino/clothing-style-detection-recommendation-system-introduction-1cj4) for the complete detection and recommendation system. In this post, I will talk about the dataset used to train the object detection model.

A majority of the available datasets distinguished clothing items on the basis of their category such as T-Shirt, Jeans, Dress etc., and not on the basis of occasion wear. Also, they mostly contained Western clothing items. Since we were unable to find a dataset containing Indian clothing items, we decided to construct a custom dataset which categorized clothes according to Occasion Wear.  

The dataset contained 6864 clothing instances and was approximately equally distributed over the following five clothing styles:
- Comfort Wear
- Street Wear
- Office Wear
- Party Wear
- Ethnic Wear

For the Ethnic Wear subset, we collected images of Indian clothes such as Sari, Kurta, Pyjama etc., from the Internet and manually labelled them using labelImg software. For the remaining categories, we modified subsets of DeepFashion dataset and labelled them according to the above clothing styles using labelImg.

labelImg is a graphical annotation tool and can be found here: https://github.com/tzutalin/labelImg

Further information on DeepFashion dataset available here: https://liuziwei7.github.io/projects/DeepFashion.html
Automate Sending New Emails to Contacts Added by RocketReach
Tags: automate, wayscript, rocketreach
Published: 2020-06-15 17:49:48

Introduction
------------

Today, we'll learn how to use RocketReach to research someone's email by using his name and company name stored in a Google Sheet and send an email using Sendgrid.

Prerequisites
-------------

No Prerequisites but some content you might find useful :

*   [Working with Google Sheet Trigger](https://docs.wayscript.com/library/triggers/google-sheets-trigger)
*   [Working with RocketReach](https://docs.wayscript.com/library/modules/rocketreach)
*   [Working with Sendgrid](https://docs.wayscript.com/library/modules/sendgrid)

Workflow
--------

Our workflow will look like this :

*   Get the name and the company name of the new row added
*   Make a request with RocketReach to retrieve the work email
*   Send an email using Sendgrid

Add the Google Sheet Trigger
----------------------------

The Google Sheet contains information such as name and company name.  
We want the script to run every time a new row is added. We'll add Google Sheet as Trigger. Set the mode to read and choose the sheet.

![](https://wayscript.com/blog_img/101/1.png)

We'll use column\_A for name and column\_B for the company name.

![image for tutorial](https://wayscript.com/blog_img/101/3.png)

RocketReach
-----------

With RocketReach module, we can easily find profiles for professionals. Lookup for a profile here will require name and company name.

![image for tutorial](https://wayscript.com//blog_img/101/2.png)

We will work with Profile output. It contains the work email we are searching for.

Sendgrid
--------

To make it easier to send mail, we'll use the SendGrid module. Add it as a new step and let's configure it.

![image for tutorial](https://wayscript.com/blog_img/101/4.png)

Configure it to Simple email mode and add the email you want to use to send mails. For the recipient and the message, we have Profile.email and Profile.name variables.

Final Step
----------

Now that's everything is build, switch on the Trigger. Now, if a new row is added, Wayscript will automatically run your script.

![image for tutorial](https://wayscript.com/blog_img/101/5.png)

Conclusion
----------

Questions about this script or anything else? Join our [Discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work with the full script template, just find it [here](https://wayscript.com/user/mangabo_kolawole/M9pOm0T5).
Minute JavaScript - indexOf, includes, find, and as a bonus findIndex
Tags: javascript, video
Published: 2020-06-15 17:47:10

---
title: Minute JavaScript - indexOf, includes, find, and as a bonus findIndex
published: true
description: Minute JavaScript - indexOf, includes, find, and as a bonus findIndex
tags: javascript, video
---

Minute JavaScript is a Fast format JavaScript Tutorial that gets straight to the point.

Topic: indexOf, includes, find, and as a bonus findIndex

# More Videos

If you'd like to see more of my videos, [head over to YouTube](https://www.youtube.com/channel/UCDYDhCEPlrYfRyj2ApxeVMA/).

More Minute JavaScript Videos: 

[![Screenshot of YouTube Channel](https://dev-to-uploads.s3.amazonaws.com/i/ql8225baay311dte4eib.png)](https://www.youtube.com/playlist?list=PL59tadyXaIqVBUhq1PlZQvUSSzQzM62AF
)


What would you like to see next?
My Experience with Native Script and why I've Switched to React Native
Tags: reactnative
Published: 2020-06-15 17:44:04

Note: I'm a web dev that started in on mobile dev due to a few ideas I had. I am not an experienced mobile dev.

When I first started mobile development, I narrowed my choices to two: React Native and NativeScript. 

NativeScript has a few features I like about it. First, you can choose Angular, Vue.js (supports Typescript), or vanilla JS. 

NativeScript runs natively (mostly). And the team there suggest that NS may have certain features that would fare better over RN. That being said, NS wasn't a fun experience. NS requires two apps, one to connect to your project, the other to open your project. The live reloading didn't always work, and compiling became an issue for small things. While my experience was certainly a factor, the documentation didn't always cover my needs. Portions of the docs were old and outdated. Other portions vaguely covered topics.

So I tried out React Native. There's a great course at http://www.handlebarlabs.com/ that was recently updated. While I didn't start with that course, I ended up using the course to expand my knowledge on professionalism (standard folder structure, etc.) in RN.

RN isn't always easy to use, but the hot reload feature works better for me than the NS apps. Since RN uses Javascript (also supports Typescript), RN is much more familiar to me than NS. 

The only downside I've had so far with RN is the debugger. The debugger is not always clear with errors.

Possibly my favorite part of React Native is navigation. It's fairly simple to setup and create a basic app with navigation. I only use React Navigation, but there are a few other choices out there. (That being said, I couldn't figure out navigating in NS. It would continually break on me, even with the templates.)

That being said, whatever framework or library you use, I'm hoping you enjoy it!

Want to correct me? Want to add something else? Feel free to drop a comment.
FA-ICON problems in Angular Library Projects : Root Causes and Working Example
Tags: angular, typescript
Published: 2020-06-15 17:30:37

We've run into some serious issues in attempting to import existing components into a library. The most annoying and pervasive issue is shown in [this article](https://dev.to/jwp/angular-libraries-fontawesome-1j1p).

**Error NG8001: 'fa-icon' is not a known element.**

Here's a solution on fixing these errors.
- Make sure the library has run these commands

```
 npm i @fortawesome/angular-fontawesome
 // and any peer dependencies it calls out.
 npm i fortawesome/fontawesome-svg-core@^1.2.27

```
- Make sure the public-api.ts file exports these:

```
export * from "@fortawesome/angular-fontawesome";
export * from "@fortawesome/fontawesome-svg-core";
export * from "@fortawesome/free-regular-svg-icons";
```
- Make sure the lib.module.ts file looks like this:

```
import { NgModule } from '@angular/core';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'

@NgModule({
  declarations: [//components go here],
  imports: [
    FontAwesomeModule
  ],
  exports: [//components go here]
})
export class LibModule { }
```
Where FontAwesomeModule is only in the imports section.

- The package.json file for the library shows the peerDepenencies correctly

```
//we added the fontawesome items manually
{
  "name": "lib",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^9.0.7",
    "@angular/core": "^9.0.7",
    "tslib": "^1.10.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0"
  } 
}
```
- And the package.json file for the workspace includes this

```
//these are done by npm i at workspace folder level
"dependencies": {
    "@angular/animations": "~9.0.7",
    "@angular/common": "~9.0.7",
    "@angular/compiler": "~9.0.7",
    "@angular/core": "~9.0.7",
    "@angular/forms": "~9.0.7",
    "@angular/platform-browser": "~9.0.7",
    "@angular/platform-browser-dynamic": "~9.0.7",
    "@angular/router": "~9.0.7",
    "@fortawesome/angular-fontawesome": "^0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
```

[A Working Github Repository Example](https://github.com/Javaman2/FontAwesomeAngularLibrary)

**Root Causes for fa-icon failures in Libraries**

- Does the consumer HTML page contain components that are not there? 

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

- Can't bind to NgClass errors?

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

 

- public.api.ts doesn't have at least these exports?

 ```typescript
export * from "@fortawesome/angular-fontawesome";
export * from "@fortawesome/fontawesome-svg-core";
export * from "@fortawesome/free-regular-svg-icons";
```

Now that we know the root causes, hopefully you'll be able to benefit.

JWP 2020 FA-ICON problems in Angular Library Projects
"Can data science lead us to the grand unified theory of brain function?"
Tags: gitcommitshow, git, developers, networking
Published: 2020-06-15 17:28:02

Updated schedule and registration at [https://gitcommit.show](https://gitcommit.show/)

Join this live interactive masterclass session on Jun 27(weekend)
"Can data science lead us to the grand unified theory of brain function?"
by **Arpan Banerjee**, a Scientist at National Brain Research Centre on the topic. 

Arpan is a Cognitive Computational Neuroscientist who is an expert in applying machine learning, artificial intelligence, image and signal processing, statistical modelling on big data sets.
Thinking about next steps as a Python Full Stack Developer
Tags: python, career, node
Published: 2020-06-15 17:05:40

As someone who identifies as a Python Developer and uses Python as the primary language for programming, thinking about what to learn next is confusing. I primarily do “Full Stack development”, that is write backend API in Python Flask/Django and use modern JS (React/Vue) for the frontend. But recently I am seeing a disconnect between the idea of “Python Developer” and “Full Stack Developer” in the job postings. Full Stack development seems to be defined more or less synonymous to JS development. Python Job postings on the other hand are more closer to dev ops, systems development, data analytics and machine learning.

I downloaded the job listing from Stack Overflow and looked at the numbers.

Full post below at my blog on the link below

https://arunmozhi.in/2020/06/15/thinking-about-the-next-step-as-a-python-developer/
Generate Generators Repeatedly
Tags: python, generators, hack
Published: 2020-06-15 16:59:38

---
title: Generate Generators Repeatedly
published: true
description: Hack a generator to produce results repeatedly.
tags: Python, generators, hack
canonical_url: https://modasserbillah.ml/2020/06/15/generator/
cover_image: https://source.unsplash.com/daTYdZHaDWg/800x400
---

Generators are great. We all know it. They save us all the memory lists take up yet give us the same results and more. Well, almost. 

The only catch with generators is that they generate the values only once. Let's look at an example.

```python
def generate_numbers(num):
    while num > 0:
        yield num
        num -= 1
```

The function above gives us a generator. It takes a number as an argument and produces all the numbers from there down to 1. 

```py
generate5 = generate_numbers(5)
```

If we print `generate5` it will show us that it holds a generator.

```py
print(generate5)
>>> <generator object generate_numbers at 0x10dcb2b88>
```

Now we can do something like the following to generate the numbers:

```py
for number in generate5:
    print(number)
```

And this will print:

```py
5
4
3
2
1
```

But if you run it again

```py
for number in generate5:
    print(number)
```

You won't see any output.

![Where did it go?](https://media.giphy.com/media/6uGhT1O4sxpi8/giphy.gif)


Well, this is what generators do. They generate values on the fly and then stop. You can't run them again and again unless you run `generate5 = generate_numbers(5)` each time. Generally people will tell you in cases like this you should use a list. 

But there's a way around if you insist on using generators yet want repeated outputs. Let's see how.

```py
class NumberGenerator:
    def __init__(self, num):
        self.num = num
        
    def __iter__(self):
        count = self.num
        while count > 0:
            yield count
            count -= 1
```

The code from the `generate_numbers` function is copied over (well, almost with slight class related modifications) to the `__iter__` method for the `NumberGenerator` class. Whenever we loop through an object, it looks up the `__iter__` method. If it's there, Python will use it to return an iterator. 

So, now you can do something like this to instantiate the class:

```py
generate5 = NumberGenerator(5)
```

And then loop over it as many times as you want using:

```py
for number in generate5:
    print(number)
```

Note that this may not be the optimal thing to do all the time but it's an interesting tidbit to know that you can hack a generator this way to work more than once. 

Happy hacking!

This post was originally published [here](https://modasserbillah.ml/2020/06/15/generator/)
Top 10 no-code web app development platforms
Tags: webdev, nocode, lowcode, webapp
Published: 2020-06-15 16:55:26

Hello all!

Looking for a fast & cost-effective way to build your web app? 
Check out the list of top 10 no-code web app development platforms.
Besides the well-known Bubble.io, the list contains diverse no-code development platforms suitable for various budgets & easy to onboard.
Check the list: https://hubs.ly/H0rtVN90
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wwrunwrtqdnl7o117thy.png)
Change Java_Home Path and restart Solr 
Tags: java, devops
Published: 2020-06-15 16:41:13

It happens quite often in Windows - when JAVA has been updated, but it doesn't update Java_Home path. It crushed my Solr everytime...

1. Go to edit the system environment variables => Environment Variables.

**Note**: my edit button was grayed out when I directly went to Environment Variables

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

2. Change the Java_Home Path to a create one.

3. Restart computer

4. Check https://localhost:8985/solr. It should work now.
React Tutorials - Create YouTube Player- 1
Tags: react, javascript, webdev, showdev
Published: 2020-06-15 16:40:12

I had recently started my YouTube channel — The Web Dev. I had decided to start putting all my blogs into the YouTube channel. So, i am starting with the my first blog. So, here is my YouTube video. Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.

[![alt text](https://dev-to-uploads.s3.amazonaws.com/i/7txxkqbfnmn1mlkl358j.png)](https://www.youtube.com/watch?v=yT_bWQhgvrw&t "Create Youtube Player - 1")

You can also read the complete blog here -

https://thewebdev.tech/create-youtube-player-in-reactjs-part-1
The next AR Game - Balloon Invaders AR
Tags: android, csharp
Published: 2020-06-15 16:36:15

Welcome to <b>Balloon Invaders!</b> - <i>an <b>AR</b> balloon popping game.</i>

Your mission is to pop the balloons that have <b>invaded your living room</b>. The game uses <b>Augmented Reality</b> to spawn balloons around you, after which you can look around to find them. Once they appear, pop the Balloons with a tap! 
There are <b>multiple kinds of balloons,</b> having different features and colours. Pop as many balloons as you can <b>before the time gets over.</b>

Google Play: [https://play.google.com/store/apps/details?id=com.AgrMayank.BalloonInvaders](https://play.google.com/store/apps/details?id=com.AgrMayank.BalloonInvaders)

<i>It's March 2024, a month after the Balloon Invasion began. The Earth has fallen into chaos. The Balloons have taken over half of the planet already. It's total madness out there. 
Help us stop the invasion. Come on, let's go. We need your help!</i>

<b><u>FEATURES: </u></b>
• Play in <b>Augmented Reality (AR)</b>.
• <b>Easy to play</b> even for <b>kids!</b> 
• Single-player <b>Time Limit</b> mode. 
• Huge <b>Variety of Balloons</b> with different colours.
• <b>Night Mode</b> to pop balloons at the night <b>(Turn off the lights).</b> 
• Dedicated <b>Photo Mode / AR Camera</b> for taking beautiful photos with the balloons.
• Directly <b>Share photos with your friends and family</b> via social media!
• Google Play <b>Leaderboard</b> for competing with friends.
• Complete <b>Achievements</b> to get rewards.

<b><u>BALLOON TYPES:</u></b>
• <b>Regular</b> Balloons <i>(Multi-colour)</i>: +5 Points 
• <b>Bunch</b> of Balloons <i>(Multi-colour)</i>: +3 Points Each 
• <b>Defective</b> Balloons <i>(Brown)</i>: 0 Points 
• The <b>Evil</b> Balloons <i>(Black)</i>: -5 Points 
• <b>Extra Time</b> Balloons <i>(White/Neon Green)</i>: +3 Seconds Time 

<b><u>HOW TO PLAY:</u> </b>
• <b>Look around</b> to find balloons in your room. 
• See those <b>Balloons floating around you?</b> 
• <b>Tap on them to shoot</b> before they disappear. 
• Yay! You <b>popped a Balloon.</b> 

<b><u>NOTES: </u></b> 
• Works best with Android devices that have <b>3GB RAM</b> and run on <b>Android 7.0 and above.</b> 
• Use devices that support <b>ARCore for optimal performance.</b>
Developer CMS - open-source headless cms
Tags: headlesscms, api, javascript
Published: 2020-06-15 16:34:51

A few months ago, I decided to create a content management system with a focus on the needs of a developer. And that's the result.

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

These are the features that are available in this CMS.

* Publish or Draft your posts, page, portfolios and more as Contents
* Clean data (an object of content instead of HTML)
* Receive and manage messages
* Extra fields for additional information to include your API
* Secure and Customizable

get starting is very simple, just create a free MongoDB atlas database and edit the config.json file, now you can deploy it on a NodeJS host.
<br>

More details 👇👇
`https://github.com/anorouzii/developer-cms`
<br>

✅ also, you can check the live demo
username: `adminuser` 
password: `adminpass`

`https://devcms.ir/`
Use Docker and Docker Compose for Local Databases
Tags: docker, tutorial
Published: 2020-06-15 16:30:21

{% youtube IEE6wwZ3_9s %}

Just a quick introduction video on how to use docker and docker-compose for developing with local databases like postgres or mongodb

## Included in Video
- How to use the docker cli
- Pull docker images
- Start docker container with image and options
- Executing commands inside docker container
- Writing a docker compose file
- Using docker compose for multiple containers
- Multiple container interactions 

## Resource Links

- [Docker](https://www.docker.com/)
- [Docker compose](https://github.com/docker/compose)
Destructuring
Tags: javascript, webdev, react, node
Published: 2020-05-31 06:25:53

Destructuring, or "destructuring assignment syntax" describes the syntactically efficient extraction and declaration of new variables in the local scope from arbitrarily complex data structures.

### Object Destructuring

When destructuring, object literal notation syntax is used on the left side of the assignment operation to both describe the target data structure and name the new local variables to be declared.

```js
var data = {
  foo: 'foo',
  bar: 'bar',
  baz: {
    qux: 'qux'
  }
};

var {foo:newFoo,bar:newBar,baz:{qux:newQux}} = data;

newFoo; // 'foo'
newBar; // 'bar'
newQux; // 'qux'
```
A shorthand syntax can be used when the desired local variable names are the same as the object keys in the data. This has the benefit of not having to name target keys twice as in `var foo = bar.foo` and so minimises typing and errors.

```js
var data = {
  foo: 'foo',
  bar: 'bar'
};

var {foo,bar} = data;

foo; // 'foo'
bar; // 'bar'
```

### Array Destructuring

Array literal notation syntax can be freely mixed with object literal notation syntax while destructuring.

```js
var data = ['foo','bar',['baz']];

var [foo,bar,[baz]] = data;

foo; // 'foo'
bar; // 'bar'
baz; // 'baz'
```

### Iterator Destructuring

Array literals can be used to destructure any iterable object.

```js
var set = new Set().add('a').add('b').add('c');

var [x,y,z] = set;
console.log(x,y,z); // a b c
```

### Loop Destructuring

We can destructure in a loop header to efficiently declare loop variables.

```js
let map = new Map();
map.set('a',1);
map.set('b',2);

for (let [k,v] of map) {
  console.log(`key = ${k}, value = ${v}`);
}
```

### Parameter Destructuring

Destructuring can also be used inline in function parameters.

```js
function f ({foo,bar}) {
  console.log(foo);
  console.log(bar);
}

f({foo:'foo',bar:'bar'}); // 'foo' 'bar'
```
Happy Coding 😀