teleren/devto huggingface dataset:
Three Changes Needed for AI for All
Tags: machinelearning, management, inclusion
Published: 2019-05-30 21:38:35

What kinds of changes in technology planning and testing should AI leaders be considering? 

1.  Design for people.  Automated, intelligent systems should be part of a process, but not “the” process.  There should never be a point where someone using your technology says “Well, the system says…”  There should always be places where human intervention, feedback, and correction is allowed, especially in automated systems where the impact is on humans.

2.  Know now that your data sets are flawed.  The original assumption that our data collected at scale was representative enough to apply to all users is flawed.  Our technology is not evenly distributed and so our data points do not accurately reflect the population of the world.  This results in biased outcomes and *must* be tested for.  Joy Buolamwini’s work testing for the impact of bias in facial recognition software in the [Gender Shades project](https://www.media.mit.edu/publications/actionable-auditing-investigating-the-impact-of-publicly-naming-biased-performance-results-of-commercial-ai-products/) is the perfect example of this.  To build more inclusive products for everyone, we must have better data sets that represent *everyone*.

3.  Truly distribute your teams.  The developers we have now will not be able to build the technology that will help the next billion users.  Hire people and design teams to enable them to work effectively around the world.
JavaScript Named Parameters
Tags: javascript
Published: 2019-05-30 21:38:11

I find JavaScript's lack of named parameters frustrating. In this article, I will show you how you can get the same effect and as a bonus, show you how to achieve default values.

<!--more-->

## Without Named Parameters

This is how you are likely writing functions without named parameters.

```js
const formatDate = (day, month, year) => {
  return `${day}/${month}/${year}`;
};

// Somewhere else in your code.
formatDate(1, 2, 2018); // Good: Little-endian?
formatDate(2, 1, 2018); // Bad: Middle-endian?
formatDate(2018, 2, 1); // Bad: Big-endian?
```

_I've never understood the American middle-endian date format._

## With Named Parameters

In this example, I'm using Object destructuring to mimic named parameters.

```js
const formatDate = ({day, month, year}) => {
  return `${day}/${month}/${year}`;
};

// Very readable, order you parameters anyway you like.
formatDate({day: 1, month: 2, year: 2018});
formatDate({month: 2, day: 1, year: 2018});
formatDate({year: 2018, month: 2, day: 1});
```

## Default Values

In this example, I'm providing default values to day, month and year making them optional.

```js
const formatDate = ({day = 0, month = 0, year = 2018} = {}) => {
  return `${day}/${month}/${year}`;
};

// Just pass the parameters you need.
formatDate({day: 1, month: 2, year: 2018});
formatDate({month: 2, year: 2018});
formatDate({year: 2018});
formatDate({});
formatDate();
```
JavaScript Async/Await Promise All Array Destructuring
Tags: javascript
Published: 2019-05-30 21:36:16

I think you will agree with me when I say working with asynchronous code is an important part of modern app development. Using new JavaScript syntax you can drastically improve the readability and performance of your code. In this article, I will show you how to use `Promise.all()` along with array destructuring.

<!--more-->

Let's pretend you are building a book app and you want to fetch a book with its author and ratings.

## Naive implementation

```js
const getBook = async bookName => {
  const book = await fetchBook(bookName);

  const author = await fetchAuthor(book.authorId);
  const rating = await fetchRating(book.id);

  return {
    ...book,
    author,
    rating
  };
};

getBook("The Wealth of Nations");
```

Very clean looking code, but how does it perform?

* fetchBook: 1 sec
* fetchAuthor: 1 sec
* fetchRating: 1 sec
* **Total: 3 sec**

The bright people among you will have already noticed that fetchAuthor and fetchRating are independent and could be downloaded concurrently.

## Promise all implementation

```js
const getBook = async bookName => {
  const book = await fetchBook(bookName);

  return Promise.all([
    fetchAuthor(book.authorId),
    fetchRating(book.id)
  ]).then(results => ({
    ...book,
    author: results[0],
    rating: results[1]
  }));
};
```

Not so clean but now we are fetching the author and rating concurrently.

* fetchBook: 1 sec
* (fetchAuthor/fetchRating): 1 sec
* **Total: 2 sec**

## Best of both worlds

```js
const getBook = async bookName => {
  const book = await fetchBook(bookName);

  const [author, rating] = await Promise.all([
    fetchAuthor(book.authorId),
    fetchRating(book.id)
  ]);

  return {
    ...book,
    author,
    rating
  };
};
```

Here we are using array destructuring with await, which in my opinion, vastly improves the readability of the code and we still have the performance improvement from using `Promise.all`.
How to save exact npm package versions
Tags: npm
Published: 2019-05-30 21:34:09

I've recently started using exact versions in my package.json. This allows me to have more control over my versions and with tools like [Renovate](https://renovateapp.com/) this is easier than ever.

<!--more-->

## What is an exact version?

```bash
"react": "^16.0.0" // carat: allow 16.1.0
"react": "~16.0.0" // tilde: allow 16.0.1
"react": "16.0.0" // exact: only 16.0.0
```

## Why

Renovate has great documentation on why you would do this [dependency-pinning](https://renovateapp.com/docs/deep-dives/dependency-pinning)

## How

There are two ways to force npm or yarn to save exact versions in your package.json.

## 1. Everytime you install a package

```bash
// npm
npm install --save --save-exact react

// yarn
yarn add --exact react
```

## 2. Set a default in your config

```bash
npm config set save-exact=true
```

This adds `save-exact=true` to your `.npmrc`
JavaScript ES8 Object.entries/values
Tags: javascript
Published: 2019-05-30 21:32:16

JavaScript is advancing at a rapid pace. In this article, I will give a brief overview of the new Object static methods. ES8 (a.k.a 2017) now has Object.values and Object.entries to accompany Object.keys.

<!--more-->

## Object.keys

Using Object.keys to iterate over JavaScript object’s keys.

```js
const countries = {
  FJ: "Fiji",
  CL: "Chile"
};

Object.keys(countries); // ['FJ', 'CL']
```

## Object.values

Now we can do the same for values.

```js
const countries = {
  FJ: "Fiji",
  CL: "Chile"
};

Object.values(countries); // ['Fiji', 'Chile']
```

## Object.entries

But what happens if you would like to do both at the same time?

```js
const countries = {
  FJ: "Fiji",
  CL: "Chile"
};

Object.entries(countries); // [['FJ', 'Fiji'], ['CL', 'Chile']]
```

Let’s map over the countries using template strings and array destructuring.

```js
const countries = {
  FJ: "Fiji",
  CL: "Chile"
};

Object.entries(countries).map(([code, name]) => `${name} (${code})`);
// ['Fiji (FJ)', 'Chile (CL)']
```

Object.values and Object.entries are both available in all modern browsers and node 8.
How to use git branches for the organized code base you always wanted
Tags: github, git, javascript
Published: 2019-05-30 21:26:12

In this video blog I’ll go over why we use git to manage our projects and why committing all your code to a master branch is absolute insanity and something you should _never_ do. Instead, you should create feature branches- they allow you to create discrete chunks of code that you add to your staging branch one feature at a time until you have a version that you are ready to deploy to master.

You’ll see how this allows us to always have a production branch that is ready to go, a staging branch that has all the latest features but isn’t quite ready for prime time, and a feature branch that we can develop and break as much as we want without impacting anyone else.

**Git Branches for Well Ordered Code- #1 Overview**
{% youtube _-2khhnRWN8 %}

**Git Branches for Well Ordered Code- #2 Code Demo**
{% youtube rgQcPJNnb6o %}

**Download the Git Cheatsheet**

We made a step-by-step guide that explains how to use Github and GitKraken to setup your repository and use pull requests with and without a squash to merge your code. Check it out at [Code Mochi](https://www.codemochi.com/blog/git-branches-for-organized-code/).

**There is more where that came from!**
[Click here to give us your email and we'll let you know when we publish new stuff.](https://gmail.us20.list-manage.com/subscribe?u=37f38485b2c7cff2f3d9935b5&id=e3bc056dde) We respect your email privacy, we will never spam you and you can unsubscribe anytime.
Class properties with React
Tags: javascript, react
Published: 2019-05-30 21:24:07

Dealing with `this` binding in JavaScript can be a real pain. In this article, I will show you three ways to avoid binding issues. Class Properties is the new JavaScript syntax for creating handler functions that have the correct this binding.

<!--more-->

## Anonymous Arrow Functions

This creates a new function on every render potentially invalidating any efforts to memorise in Button.

```jsx
class AwesomeProject extends Component {
  constructor() {
    super();

    this.state = {n: 0};
  }

  onPress() {
    this.setState({n: this.state.n + 1});
  }

  render() {
    return <Button onPress={() => this.onPress()} />;
  }
}
```

## Bind

The same function is reused on every render this is the ES6 best practice.

```jsx
class AwesomeProject extends Component {
  constructor() {
    super();

    this.state = {n: 0};
    this.onPress = this.onPress.bind(this);
  }

  onPress() {
    this.setState({n: this.state.n + 1});
  }

  render() {
    return <Button onPress={this.onPress} />;
  }
}
```

## Class properties

We remove the need for a constructor and avoid manually binding the handler. I personally think this is the cleanest way of doing this.

```jsx
class AwesomeProject extends Component {
  state = {n: 0};

  onPress = () => {
    this.setState({n: this.state.n + 1});
  };

  render() {
    return <Button onPress={this.onPress} />;
  }
}
```
Stateless components in React Native
Tags: javascript, reactnative
Published: 2019-05-30 21:15:57

With the arrival of React 0.14 into React Native, we now have a third way of creating components in React Native, stateless components.

<!--more-->

## Three ways

```jsx
// Create Class
const Heading = createClass({
  render() {
    return <Text>{this.props.title}</Text>;
  }
});

// ES6 Classes
class Heading extends Component {
  render() {
    return <Text>{this.props.title}</Text>;
  }
}

// Stateless functions
const Heading = ({title}) => <Text>{title}</Text>;
```

## Example

```jsx
// index.ios.js
import React, {
  AppRegistry,
  StyleSheet,
  View,
  Text
} from "react-native";

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgb(142, 68, 173)"
  },
  heading: {
    fontSize: 36,
    fontWeight: "bold",
    color: "white"
  }
});

const Heading = ({title}) => (
  <Text style={styles.heading}>{title}</Text>
);

const App = () => (
  <View style={styles.page}>
    <Heading title="Stateless" />
  </View>
);

AppRegistry.registerComponent("MyApp", () => App);
```

I’m using stateless components from the root of the project in this example but obviously, you will need at least one stateful component. A good pattern is to have container components wrapping presentational components using stateless components for the latter.

Stateless components don’t have lifecycle methods or obviously state, but they really reduce the amount of boilerplate code you have to write.

EDIT: Scott Feeney pointed out that stateless components can have propTypes and defaultProps.

```jsx
const Heading = ({title}) => (
    <Text style={styles.heading}>
        {title}
    </Text>
)

Heading.propTypes = { PropTypes.string }
Heading.defaultProps = { title: 'Stateless' }
```
Weekly Coding Challenge - Week #12 - Toggle
Tags: challenge, css, javascript
Published: 2019-05-30 17:05:52

---
title: Weekly Coding Challenge - Week #12 - Toggle
published: true
description: Week #12 of the Weekly Coding Challenge program - Toggle
tags: challenge, css, javascript
canonical_url: https://www.florin-pop.com/blog/2019/05/dark-light-theme-toggle
cover_image: https://www.florin-pop.com/static/fce313150794ac1da897faaa342d9748/ff993/dark-light-theme-toggle.png
series: Weekly Coding Challenge
---

Theme of the week: **Toggle**

### Description

A toggle (or a switch) is a component which allows you to change a state / a boolean value from true to false and vice-versa. It is basically a checkbox, but we are going to hide it and display a nicer version of a toggle instead by using a label. 😄

Furthermore, in this article I'm going to build a Dark/Light theme toggle. See below!

## Useful Resources

Check out my submission for this challenge: [Dark/Light theme toggle](https://www.florin-pop.com/blog/2019/05/dark-light-theme-toggle).

See all the submissions in this [Codepen Collection](https://codepen.io/collection/AZJGRa/).

Are you interested in joining the challenge? :smiley: Read [The Complete Guide](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/) to find out how. Don't forget to share your creation! :wink:

Happy Coding! :innocent:
Deepest Truth in Huawei problem(Monopoly) and how vulnerable we all are!!!
Tags: discuss, internet, monopoly, help
Published: 2019-05-30 16:19:02

---
title: Deepest Truth in Huawei problem(Monopoly) and how vulnerable we all are!!!
published: true
description: 
tags: discuss, internet, monopoly, help
---

DISCLAIMER: This topic is created only for technology discussion and possible solutions, not about any political related discussion.

I and my colleague started discussing Google's ban on Huawei phones. Which may be a death blow to Huawei. Jokily we mentioned that what will happen of Google ban's service in our country or Oracle immediately imposes the ban on usage of MYSQL and JAVA. Basically, the monopoly in most of the internet segment is the key problem. 

UI frameworks such as Angular, React, Polymer etc were controlled by Google, facebook/ twitter. Almost all the popular frameworks and technologies are being controlled by them. Which make us vulnerable and need to bend for all those regulation imposed by them. 

Practically it takes years for Frameworks like Vue to take off. While shitty frameworks like Angular1.0 which takes off much easier and almost everybody started using it because of Google. 


I personally feel that the internet and important technologies should be free and open and always available to all. And open source projects should be truly open and should continue to deliver good things at all cost. 

We need an alternate way to solve those problems. Internet and key technologies should not be restricted by ethnicity, Location, political factors etc. 


The alternate should be truly distributed, easily available to all the people. 

Please suggest your thoughts here. Do we need an alternate solution? If so what will it be?
Python & Pandas Course
Tags: udemy, python, pandas, datascience
Published: 2019-05-30 15:41:27

---
title: Python & Pandas Course
published: true
description: Get Udemy's Python and Pandas course for free.
tags: udemy, python, pandas, data science
---
Not incentivized in any way but I just happened to stumble across a code for Udemy's [Python & Pandas course](https://www.udemy.com/course/data-analysis-with-pandas/).

Get it free with code: APRILMAGIC.

I guess the magic is the code still works when it's basically June. 🤷🏻‍♂️
Project Euler #6 - Sum Square Difference
Tags: projecteuler, challenge
Published: 2019-05-30 15:38:06

---
title: Project Euler #6 - Sum Square Difference
published: true
description: Solving problem #6 from Project Euler, sum square difference
tags: projecteuler, challenge
series: Project Euler
---

Continuing the wonderful community solutions to [Project Euler](https://projecteuler.net).

This is [Problem 6](https://projecteuler.net/problem=6), sum square difference.

> The sum of the squares of the first ten natural numbers is,
> 
> 1² + 2² + ... + 10² = 385
> 
> The square of the sum of the first ten natural numbers is,
> 
> (1 + 2 + ... + 10)² = 55² = 3025
> 
> Hence the difference between the sum of the squares of the first ten natural numbers and the square of the sum is 3025 − 385 = 2640.
> 
> Find the difference between the sum of the squares of the first one hundred natural numbers and the square of the sum.
Popular UI Design Tools and Free Image Material Site
Tags: ux, design
Published: 2019-05-30 15:22:17

When designing a website, we use a lot of tools, such as UI design tools. In order to make our website cool, we will also collect and insert some creative images. This requires us to dig valuable free image material at any time. Next I recommend to you several tools and image platforms.

Axure - https://www.axure.com/


Axure RP 9 is the most powerful way to plan, prototype and hand off to developers, all without code. Download a free trial and see why professionals choose Axure RP.

Mockflow - https://mockflow.com/

MockFlow is the world's only premier solution for planning UI/UX. Use MockFlow to visualize user interfaces, create user flows, document styles and approve designs.

ClipartMax - https://www.clipartmax.com

ClipartMax is a largest transparent clipart images collection with png format. All png clipart pictures with transparent background are high quality, easy to use. Just to search and unlimited download for free.

Pinclipart - https://www.pinclipart.com/

PinClipart is a vibrant clipart community, which provides large collections of free transparent cliparts, Silhouette, including user's upload and our own design. Love us? Pin us.

PngFind - https://www.pngfind.com/

PNGFIND provides the largest archieve of transparent HD png images. Upload, download and share transparent pngs you like.

Vippng - https://www.vippng.com

Vippng is large collections of PNG image resources for free download. All png images are high-resolution, unlimited download and easy to use.

Pnglot - https://www.pnglot.com/

Pnglot.com is a free stock png images platform. Millions of PNG Images, backgrounds are free unlimited download. Upload your original work and share your creative ideas on Pnglot.

PNGKEY - https://www.pngkey.com/

PNGkey provides millions of hd png images for free download. All png images with transparent background can be used in your personal non-commercial or educational projects

All of these UI design tools and photo material sites are malicious and free to use. It will always be used when you develop your website.
How to put your Android device in Developer Mode
Tags: android
Published: 2019-05-30 15:20:52

> This post was originally published on my website [jakenherman.com](https://www.jakenherman.com/articles/2019-05/android-device-developer-mode)

If you are a mobile developer like me, you need to have your device in developer mode in order to run your builds on something other than the extremely slow Android emulators provided by Android Studio. The problem is, the way to enable developer mode on your Android device is a bit cryptic.

First, open your device's settings app. Before developer options becomes an available setting, we first must find the phone's build number, and this is typically in a group called something like **Software Info** or **About Phone**. On most Android devices, you will be able to search for "Build Number", and you will get exactly what you are looking for. 

Now that you have found the build number screen, you will need to tap on the *Build Number* field **seven** times. Once you start tapping the build number, a small alert will prompt you saying *You are now # steps away from being a developer*. The number will count down every time you tap the field, until you have reached **seven** taps, at which point the prompt will display *You are now a developer!*

Now that you are a developer, the "Developer options" will be available to you as an option in Settings. Now you'll be able to enable things like USB debugging, WebView implementation, Bluetooth HCI snoop logging, and more. To get to developer options, search in your settings for "Developer options".

To turn developer options back off, just flip the switch at the top of the developer options screen to "off". Once you navigate away from this screen, it will be gone from your phone until you repeat the above steps to enable developer mode.
Which is the Best Static Site Generator and Why?
Tags: go, discuss, webdev
Published: 2019-05-30 15:09:00

---
title: Which is the Best Static Site Generator and Why?
published: true
description: Best static sites generator and reasons
tags: #go #javascript #discuss #webdev
---

It's 2019 and we have tons of static site generator all over the internet built with various languages.

I am trying to curate a list of the best and also the best one to use for my new open source project.

Below is a list of popular static site generator (the ones I know):

- Jekyll
- Hugo
- Gatsby
- Gridsome
- Octopress
- Vuepress
- Hexo
- Harp
- Pelican
- Cactus
- Roots
- Hyde
- Middleman

Pick one and explain why it is better. If the one you chose is not listed above, just say it and explain why you are choosing it over others. 

**Tweet and share this discussion to reach more people**

***PS: I will be taking notes from your comments and use it to write a comprehensive list of best static site generator, why and why not to use it.***
Let's talk about life goals
Tags: code, lifegoals, goals
Published: 2019-05-30 15:02:22

---
title: Let's talk about life goals
published: true
description: I'm struggling with my life goals, seeking for advice. 
tags: code, life goals, goals 
---

Hello everyone, 

So I'm here to talk about my life goals and my future, searching for advice since I feel like I want to do way more than I'm capable of. 

At the moment I'm studying full stack developer at Open Classrooms and I'm nearly done, and I love it. 

Now the problem is that I have a lot of projets and I don't know what to take. 
Si right now I want to continue my parents business what consist in renting holiday chalets to other people since I love that, but I also want to continue another 2 years at Open Classrooms and follow Expert Java. I like them both so I can't decide. 

Even for the future I can't decide. I love coding and would like to live from that, but I also have plans to expand my parents business or start a cocktail bar with my wife.
The problem here is that I can choose one of those and do the rest as a hobby in my free time but I can't do all of them, or at least I don't feel capable of. 

If someone has any good advice here I would appreciate that 😊
Launching the Semaphore Podcast
Tags: podcast, news
Published: 2019-05-30 14:54:24

---
title: Launching the Semaphore Podcast
published: true
description: A space to learn how to build great software products, ship them fast and provide an excellent service to users.
tags: podcast, news
---

Today at Semaphore we're [launching a podcast on building great products](https://semaphoreci.com/blog/launching-semaphore-podcast-the-uncut-chats). 🤓🎙

First episodes include conversations with some great people from [DigitalOcean](https://semaphoreci.com/blog/semaphore-uncut-with-eddie-zaneski-digitalocean), [Packet](https://semaphoreci.com/blog/jacob-smith-packet-on-running-an-infrastructure-product-and-arm-wireless-and-hardware-as-a-part-of-developer-stack) and [Cloudsmith](https://semaphoreci.com/blog/lee-skillen-from-cloudsmith-on-streamlined-software-packaging).

Listen and subscribe on:
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/semaphore-uncut/id1463768812)
- [Google Podcasts](https://play.google.com/music/m/Iab47jnyhhd2sxau25rnhmkxdom?t=Semaphore_Uncut)
- [Spotify](https://open.spotify.com/show/6Tqtzmt78HtlMeNROHAgzh)