teleren/devto huggingface dataset:
What little things are you doing to make your online life easier?
Tags: discuss
Published: 2019-07-17 14:41:58

---
title: What little things are you doing to make your online life easier?
published: true
description: I finally marked all my old emails as read.
tags: discuss
---

![You got this!](https://media.giphy.com/media/xT9IgEYXCNqPZnqMuY/giphy.gif)

Today I finally marked all my old emails as read. That big red number will finally mean something. Tomorrow I might even unsubscribe from some of those newsletters that I never read. Little steps to make our online life easier, more organized, and healthier -- that matters! What are you going to do today?
What is Computer Vision?
Tags: vision
Published: 2019-07-17 14:24:44

---
title: What is Computer Vision?
published: true
description: python, vision
tags: python, vision
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zl03ejtma8pknyysrs72.jpg
---
Computer vision is a field that deals with how computers can be made for high-level understanding from images or videos.

This understanding is gained through Machine Learning or Deep Learning techniques. That's because just by image processing, the computer won't be able to understand.

### State of the art

Just like you can't tell what's in a painting by looking at every color dot in the painting, the computer can't tell without understanding the relationships and historical data.

So what is computer vision like these days? Judge for yourself (from 2018):

<img src="https://thepracticaldev.s3.amazonaws.com/i/zl03ejtma8pknyysrs72.jpg">

### How do I get started?

Do you want to learn about computer vision? You may feel overwhelmed with all the information out there.

At basic you need to know <a href="https://pythonprogramminglanguage.com/">Python programming</a> and <a href="https://pythonprogramminglanguage.com/python-machine-learning/">Machine Learning</a>. 

Because it's so much information to grasp, it can be easier to start out with a course.

* <a href="https://gumroad.com/l/MnRYU">Machine Learning course</a>
* <a href="https://www.coursera.org/learn/machine-learning-with-python">Coursera Machine Learning course</a>
* <a href="https://gumroad.com/l/GQWGG">Computer Vision with Python</a>

### What can I make?

You can make all kind of apps with Computer Vision. It can be applied to any webcam feed, image or video.

Think this is science fiction? If you live in China or Europe, chances are these systems are part of your daily life. Like traffic control systems:

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2F_zHLwtBiv00%2Fmaxresdefault.jpg&f=1">

<img src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fholyokecodes.org%2Fwp-content%2Fuploads%2F2017%2F08%2Fopencv-300x187.jpg&f=1">
Give a lightning Talk at DEV IRL Tel Aviv!
Tags: meetup, webdev, career, productivity
Published: 2019-07-17 14:07:03

---
title: Give a lightning Talk at DEV IRL Tel Aviv!
published: true
description: Have an idea for a lightning talk? Present it at the first dev.to IRL Tel Aviv meetup! 
tags: meetup, webdev, career, productivity
cover_image: https://i.imgsafe.org/f2/f2b5b07c2b.jpeg
---

*Do you have an idea you want to convey, something you learned or a story that you want to share? Come present it at the [DEV IRL TLV🌴 meetup](https://www.meetup.com/DEV-Community-IRL-Tel-Aviv/) in September!*

![](https://i.imgsafe.org/f2/f2afa4049c.png)

The first [Tel Aviv DEV IRL meetup](https://www.meetup.com/DEV-Community-IRL-Tel-Aviv/) will take place on **September 18th** at the Vonage R&D Center on the top of the Alon Towers with a spectacular view of Tel Aviv. We're looking for people to share things they're passionate about with the community! 

We are thinking about a few ten minute lightning talks on various subjects. So *yalla*! What are you waiting for?

## 👉 [Fill out this Google Form](https://forms.gle/ZpdM5TCW2GF4kQSu8)! 👈

Want to find out more about the DEV IRL TLV🌴 group? 

## 👉 [Join us on Meetup](https://www.meetup.com/DEV-Community-IRL-Tel-Aviv/)! 👈

See you soon! 👋

{% user avitaltzubeli %}
{% user benhayehudi %}
Image threshold with Python
Tags: python, cv
Published: 2019-07-17 14:01:14

---
title: Image threshold with Python
published: true
description: python, image
tags: python, cv
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--j0lC3HE0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/lhzayd7gvn0i164ygwd1.png
---
You can threshold images with the cv2 method threshold(). What is thresholding? What is cv2?

The module cv2 is the <a href="https://opencv.org/">computer vision module</a> for Python. This lets you make computer vision software, which goes far beyond image processing. The technique uses <a href="https://pythonprogramminglanguage.com/python-machine-learning/">Machine Learning</a>.

Start with an input image. This can be any input image, jpg, png or whatever you want.

Input image:

<img src="https://thepracticaldev.s3.amazonaws.com/i/nqbk53sfkko3cnjzm9vu.jpg">

If pixel value is greater than a threshold value, it is assigned one value (may be white), else it is assigned another value (may be black). The function used is cv2.threshold. 

There are different types of thresholding, which the program below demonstrates:

Different types are:

* cv2.THRESH_BINARY
* cv2.THRESH_BINARY_INV
* cv2.THRESH_TRUNC
* cv2.THRESH_TOZERO
* cv2.THRESH_TOZERO_INV

### OpenCV code

So how does it work in code? Start with an input image (image.jpg). Then use cv2 to show different variations.
 
    #!/usr/bin/python3                                                                                                                                                  

    import cv2
    import numpy as np
    from matplotlib import pyplot as plt

    img=cv2.imread('image.jpg')
    GrayImage=cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)
    ret,thresh1=cv2.threshold(GrayImage,127,255,cv2.THRESH_BINARY)
    ret,thresh2=cv2.threshold(GrayImage,127,255,cv2.THRESH_BINARY_INV)
    ret,thresh3=cv2.threshold(GrayImage,127,255,cv2.THRESH_TRUNC)
    ret,thresh4=cv2.threshold(GrayImage,127,255,cv2.THRESH_TOZERO)
    ret,thresh5=cv2.threshold(GrayImage,127,255,cv2.THRESH_TOZERO_INV)
    titles = ['Gray Image','BINARY','BINARY_INV','TRUNC','TOZERO','TOZERO_INV']
    images = [GrayImage, thresh1, thresh2, thresh3, thresh4, thresh5]
    for i in xrange(6):
       plt.subplot(2,3,i+1),plt.imshow(images[i],'gray')
       plt.title(titles[i])
       plt.xticks([]),plt.yticks([])
    plt.show()

Output for this example:

<img src="https://thepracticaldev.s3.amazonaws.com/i/lhzayd7gvn0i164ygwd1.png">

These lines show all the images in one plot:

    #/usr/bin/python3

    for i in xrange(6):
       plt.subplot(2,3,i+1),plt.imshow(images[i],'gray')
       plt.title(titles[i])
       plt.xticks([]),plt.yticks([])
    plt.show()

These are the different variations of thresholding. You can set the threshold parameters. The parameters include threshold and maxval.

Related links:
* <a href="https://opencv.org/">Computer vision module</a>
* <a href="https://pythonprogramminglanguage.com/">Python tutorial</a>
* <a href="https://gumroad.com/l/GQWGG">Computer vision course</a>
VIDEO 🎉📺 |Bye Bye 403 | Building a Filter Resistant Web Crawler in Python | Part IV - Ethics and Throttling
Tags: python, discuss, learntocode, ethics
Published: 2019-07-17 13:51:08

---
title: VIDEO 🎉📺 |Bye Bye 403 | Building a Filter Resistant Web Crawler in Python | Part IV - Ethics and Throttling
published: true
description: What are the ethics of web scraping? Why do Crawler bots have a bad reputation, and how to not be "part of the problem
tags: #python #discuss #learntocode #ethics
---

What's up everybody?! Part 4 is going to be a bit different than previous posts. How you ask? Well, it's a video!! Mainly because the topic of ethics can be really dry and boring. However, especially in a software specialty that is maligned by many, we **must** keep ethics and proper throttling technique involved in *all of our projects*. 

But fear not! The following video tries to keep it entertaining. There's baby animals, a ghost hand, and some funky music so give it a watch and we'll have a good time!

{% youtube aW2gdPC4pjg %}
Ethereum App Development
Tags: ethereumappdevelopmentcompany
Published: 2019-07-17 13:41:48


We are a leading Ethereum App Development Company, offering top-tier blockchain based application development solutions to businesses across the globe.
We create highly secure, reliable and scalable solutions to enhance operational efficiency with our Ethereum app development services. They include designing and developing decentralized apps, ERC20 contracts, smart contracts, and much more for a variety of industries.

visit https://blockchain.oodles.io/ethereum-application-development-services/
Quotes for Software Qualities Essential
Tags: inspirations, notes, softwaredevelopment, assurance
Published: 2019-10-01 17:35:51

---
title: Quotes for Software Qualities Essential
published: true
tags: Inspirations,Notes,software development,assurance
cover_image: https://esabook.files.wordpress.com/2019/07/depositphotos_24889893-stock-illustration-premium-quality-product-golden-label.jpg
canonical_url: https://esabook.wordpress.com/2019/07/17/quotes-for-software-qualities-essential/
---

 **“Quality is essentially about meeting user expectations. Consistently. Reliably. Confidently.”**

“Do it fast and fix it later. Or do it slow and you don’t have to fix it at all. ”

**“Done means done. End of story.”**

“If there is one company that got this guideline right, it’s Apple. Microsoft and Android and Google and most companies out there focus on more. More features. More options. More users. Apple, in contrast, focuses on how little they can do.”

**“Pre-written code only becomes an asset when you can re-use it. You can only re-use it if you can find it and understand what it is intended to do.”**

“If you see something wrong, do something about it. If you can fix it, do it. Immediately. If you can’t, tell someone who can.”

**“The square\_root() function shall return the square root of its input for all valid values.”** _– in a better specification would be:_ – “**The square\_root() function shall return the square root of its input for all valid values, and 0 for all invalid values. Valid inputs are positive 32-bit floating point numbers, zero and positive infinity. Invalid inputs are negative numbers, negative infinity, and NaN.”**
Grayscale Image conversion with Python
Tags: python, image
Published: 2019-07-17 13:36:01

---
title: Grayscale Image conversion with Python
published: true
description: python, image
tags: python, image
cover_image: https://thepracticaldev.s3.amazonaws.com/i/yn8t7h0mj46uemqxir0m.png
---
You can convert color images to grayscale. Because you have different color channels (R,G,B), you can change how it does that.

The input image is in color, then the program runs, and outputs a gray scale image. I took this input image:

<img src="https://thepracticaldev.s3.amazonaws.com/i/numj98y8mvcqp5ihnaj1.jpg">

The example below uses OpenCV, a computer vision library for Python. Computer vision goes beyond basic image processing, the computer vision field uses <a href="https://pythonprogramminglanguage.com/python-machine-learning/">Machine Learning</a> or Deep Learning.

Back to image processing, so all pixels are replaced by itself times an amount.

This way we access the color channel of each pixel, where (i,j) are the coordinates

    image[i,j][0] 
    image[i,j][1]
    image[i,j][2]

Then in code:

    #!/usr/bin/python3                                                                                                                                                      
    import cv2

    image = cv2.imread('image.jpg')

    grayimg = image
    height, width, channels = image.shape

    for i in range(height):
        for j in range(width):
            grayimg[i,j] = 0.3 * image[i,j][0] + 0.59 * image[i,j][1] +  0.11 * image[i,j][2]

    cv2.imshow('srcImage', image)
    cv2.imshow('grayImage', grayimg)
    cv2.waitKey(0)


By changing the values you can create different grayscale images:

<img src="https://thepracticaldev.s3.amazonaws.com/i/38fp0q0tk95kx1lba2sj.png">

<img src="https://thepracticaldev.s3.amazonaws.com/i/yn8t7h0mj46uemqxir0m.png">

So color to gray conversion can create very different images, based on which color channels you emphasize.

Related links:

* <a href="https://opencv.org/">OpenCV module</a>
* <a href="https://gumroad.com/l/GQWGG">Computer Vision Course & Examples</a>
* <a href="https://pythonprogramminglanguage.com/">Python tutorial</a>
Weekly Picks #84 — Development Posts
Tags: webdev, javascript, react, go
Published: 2019-07-17 13:32:27

* [Daily has gone open source](https://app.dailynow.co/r/1bb6d4630a7038a85e25cc447cc528ed)
* [5 Uses for the Spread Operator](https://app.dailynow.co/r/4580b88428db03323d86689954b1ab2e)
* [Angular Architecture Patterns and Best Practices (that help to scale)](https://app.dailynow.co/r/5ab090c40bd082bdaef6c1bc32c8f8d7)
* [Evolution of Web Design and Development 1990-2019](https://app.dailynow.co/r/ae9adc57332aaa921f6986f939c4a292)
* [Videos from Angular In Depth 2019 conference are available now](https://app.dailynow.co/r/fe6e5eddff10061ade0a5f0f9dfffdfc)
* [ReactJS Interview Questions for Senior Developers](https://app.dailynow.co/r/52e4118ad1e92639acf5394a94227eb7)
* [Building a React Native Chat App — Part Two: Message History | PubNub](https://app.dailynow.co/r/85f03c5a82748d8315851a9c1addd88e)
* [Golang vs Python: Which One is Best For Web Development?](https://app.dailynow.co/r/dca1c5af0faeb3152ef6f5dd5504408c)
* [React Native just got better! The New Javascript Engine is here!](https://app.dailynow.co/r/69fdbaf89ecef37d94f8fae913bb870e)
* [Sparque — Making project management easy](https://app.dailynow.co/r/e2a6ed8cbaee8df1b8e78297542f9b5f)

* * *

[_Thanks to Daily_](https://www.dailynow.co/) _developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab._

[![Daily promotion cover](https://cdn-images-1.medium.com/max/1024/1*7bwIhcH467BKX5Ni8XWpQg.jpeg)](https://www.dailynow.co/)
Trivial, typesafe translations in Angular
Tags: angular
Published: 2019-07-17 13:22:38

The official Angular translation system (angular-i18n) is problematic in various respects (read this ticket and thread in ngx-translate project for background):

{% github https://github.com/ngx-translate/core/issues/783 %}

Since we can't wait for Ivy to happen, we deployed our own translation system that [has barely any code](https://github.com/vivainio/ngx-pttx/blob/master/src/tx/tx.service.ts) or logic (as opposed to ngx-translate that has a bunch).

As preparation, grab files [from ngx-pttx github project](https://github.com/vivainio/ngx-pttx) and copy them to your project (no npm package created yet).


## The approach

You need to have the translations available in a hierarchical JSON structure. An example (in ``en-US.json``) would be:


```json
{
  "mygroup": {
    "mykey": "Hello my english text"
  }
}
```

Your application will download this once it knows what file to get (i.e. what language is chosen). The format may be familiar from [angular-translate](https://github.com/angular-translate/angular-translate) from your wild Angular 1 years.

Then, you set the strings to be available globally by injecting TxService and doing setStrings():

```ts
export class AppComponent {
  constructor(
    private txService: TxService
  ) {}
  ngOnInit() {
    this.fetchStringsSomehow.then(strings => this.txService.setStrings(strings));
  }


```

Now you can just use txService in various components:

```ts
const text = this.txService.instant("mygroup.mykey");

// warning: this can crash at runtime
const text2 = this.txService.txs.mygroup.mykey;
```

In templates you can use ptTx pipe:

```html
<span>{{ "mygroup.mykey" | ptTx }}</span>
```
 
Or ptTx directive:
```html
 <span ptTx="mygroup.mykey"></span>

```


Now you may ask - how is that type safe? Well, it isn't. 

Since you want type safety (to ensure your strings keep working and to get intellisense), you need to create type definitions. We do it in a build step, with [quicktype.io](https://quicktype.io/) command line application. Point it to the translation json file (one, typically english, is enough for type generation):

```shell
yarn quicktype --lang ts --no-maps --just-types --out gen/translations_common.ts ../../some_dir_to_translations/en-US.json
```

Now, we can use txService.make() to create a function that checks the type and gives you the string. It takes the quicktype-generated type as type argument:

```ts

import { MyUiStrings } from "./gen";

  private getLocalizedTexts() {
    const tx = this.txService.make<MyUiStrings>();

    return {
      someText: tx(s => s.mygroup.mykey)
    };
  }
```

## That's all?

Yeah, that's all you need to do. You need to provide a few parts by yourself:

- Figure out where to fetch the json files.
- call setStrings() before your app is drawing components. You can use [APP_INITIALIZER](https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e) provider for this.
Testing the ScrollToTop component in React with Enzyme and Jest
Tags: react, testing
Published: 2019-07-17 13:00:35

If you’ve implemented React Router in an application with long pages, you will have no doubt noticed that the scroll position doesn’t get reset when the location changes.

[React Training recommend a neat little component](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/scroll-restoration.md) to wrap around your App component, which will reset the scroll position to 0 when it detects a change in location:

```
import React from 'react';
import { withRouter } from 'react-router';
class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);
```

To ensure the component is doing what we expect, let’s write some unit tests for this component.

We want to test that:

1. The component calls `window.scrollTo` with the correct parameters when location changes.
2. It renders nested components correctly.

Let’s set up our test file:

```
import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';
global.scrollTo = jest.fn();
describe('ScrollToTop', () => {
  let wrapper;
  let history;
  beforeEach(() => {
    wrapper = mount(
      <MemoryRouter initialEntries={['/']}>
        <ScrollToTop>
          <p>Hi</p>
        </ScrollToTop>
      </MemoryRouter>
    );
    history = wrapper.instance().history;
  });
  afterEach(() => {
    jest.clearAllMocks();
  });
});
```

Firstly, we create a spy for the `window.scrollTo` method. Jest uses `global` as the `window` object, so we do this by assigning the spy to `global.scrollTo`.

We mount our `ScrollToTop` component within `MemoryRouter` and get a reference to the mounted components history.

We then make sure to reset our spy method after each test.

With the set-up done, we are ready to write some tests!

```
it('calls window.scrollTo when route changes', () => {
  expect(global.scrollTo).not.toHaveBeenCalled();
  history.push('/new-url');
  expect(global.scrollTo).toHaveBeenCalledWith(0, 0);
});
```

We call `history.push` just as we would in our application. This will activate a route change within `MemoryRouter` which will then pass through updated props to the `ScrollToTop` component, triggering the `componentDidUpdate` lifecycle method.

We can then assert that our spy method has been called with the correct parameters.

Lastly, we write a test to ensure `ScrollToTop` is rendering it’s nested components as expected.

```
it('it renders children', () => {
  const component = wrapper.find(ScrollToTop);
  expect(component.children().length).toEqual(1);
  expect(component.contains(<p>Hi</p>)).toEqual(true);
});
```

And we are done! I hope this proves useful to someone wanting to test a component that reacts to router events.
How Hasura scales to 1 million active GraphQL subscriptions (live queries)
Tags: graphql, postgres, cloudcomputing, webdev
Published: 2019-12-18 10:59:09

---
title: How Hasura scales to 1 million active GraphQL subscriptions (live queries)
published: true
date: 2019-07-17 12:53:42 UTC
tags: graphql, postgres, cloud computing, webdev
canonical_url: https://blog.hasura.io/1-million-active-graphql-subscriptions/
---

![](https://blog.hasura.io/content/images/2019/12/1-million-subs.png)

Hasura is a GraphQL engine on Postgres that provides instant GraphQL APIs with authorization. Hasura allows 'live queries' for clients (over GraphQL subscriptions). For example, a food ordering app can use a live query to show the  live-status of an order for a particular user.

We designed hasura to be scalable right out of the gate. We recently tested Hasura's performance to handle a million active live queries. As part of the test setup multiple clients (a web/mobile app) subscribe to data or a live-result with  an auth token. The data is in Postgres. 1 million rows are updated in  Postgres every second (ensuring a new result pushed per client). Hasura  is the GraphQL API provider (with authorization).

**The results:** At 1 million live queries (and hence 1 million open websocket connections to Hasura), Postgres is under about 28% load with peak number of Postgres connections at around 850.

We've written about the architecture that enables this performance (and some more notes on our benchmarking process and tooling) on our github repo.

Check it out here: [https://github.com/hasura/graphql-engine/blob/master/architecture/live-queries.md](https://github.com/hasura/graphql-engine/blob/master/architecture/live-queries.md)
Is JavaScript taking over the world?
Tags: javascript, technology
Published: 2019-07-17 12:43:32

---
title: Is JavaScript taking over the world?
published: true
description: can the almighty JavaScript be synonymous to technology in the near future
tags: javascript, technology
cover_image: https://cms-assets.tutsplus.com/uploads/users/71/courses/1261/preview_image/practice-javascript-and-learn-functions-400x277.png
---
As we all know, JavaScript is a widely used language and also has lots and lots of capabilities.
Can it take over all other languages? I'll say yes. Why? I'll say imagine a newbie who dedicates his/her to learning and mastering just JavaScript. let's see the superpowers he/she will be equipped with.
1. Front-end - Using VanillaJs and others(quite frustrating)
2. Back-end - Using NodeJs
3. 2D games- Using various Js game engines
4. Desktop Applications- Using Electron.Js
5. Drawing/Creative applications - Using the HTML inbuild Canvas and other frameworks
6. SmartWatch Applications - Using Pebble.Js
7. Mobile Applications - Using React Native

and others

But the truth is, It's never as easy as listed above. I remember how I felt after learning JavaScript functions which were the end of a course. I thought that was all to be learned but till today I'm still learning crap.

Please share your funny experiences or Js disabilities in the comments below.