teleren/devto huggingface dataset:
Labeling Service for Machine Learning
Tags: ai, machinelearning, datascience
Published: 2020-04-19 12:42:29

Labeling as service, what does it actually mean?

Data Labeling Service – an AI Platform which allows us to generate accurate and high-quality labels using Machine learning models on the collection of data.

Say for example, you have a collection of images or videos taken in your garden or favorite landscape. You need to identify the flowers by name as you run the gallery. In this case, you can train the model to identity the flowers in the image by labeling its names. Similar way, you can train a model to identify all disease or terminology from collection of medical documents.

Is it a complex process?

Labeling training data acts as the first step in machine learning development cycle under Computer Vision. Consider we need to train a machine learning model to identify a specified category of objects from collection of data.

We would need to collect representation data samples which has to be classified and analyzed along with Machine Learning algorithm for handling each sample.

How do the service benefit?

A report says, that about 80% of data scientist spend their time solely of creation and managing training data. This lag can be due to inappropriate tool, re-work on labeling and no proper collaboration within data science team.

You can accelerate the production with our robust data training solution for machine learning along with best tooling, collaboration and integrated support.

Any dependencies? How do you work?

Yes, the labeling service will work perfect with the following resources,
As initial step after receiving these resources along with service confirmation, our ML engineers shall start annotating items in the dataset according to the instructions provided. On completion of labeling, the dataset can be exported and used in further machine learning development.

Our labeling services shall replace the manual annotation process with automation via a user-friendly interface which ease annotation and parameter defining process.

The solution provides configurable and intuitive interfaces which ease the annotation process by selecting the object or mapping the object (with box or polygons) and categorize them. Also, the solution shall allow collaboration of the task within team and connect with cloud storage.
Render to Caesar the things that are Caesar's
Tags: rot13, javascript
Published: 2020-04-19 12:40:41

The /r/portugal sub-reddit can be a surprising little place. Today someone [asked](https://www.reddit.com/r/portugal/comments/g3z05x/algu%C3%A9m_sabe_o_que_%C3%A9_isto/) if the message in the cover picture was some form of encrypted text.

Well, it's a Caesar's cipher with ROT1, which is a simple dictionary substitution cipher and we can easily come up with encrypt/decrypt functions by mapping the character index in the source message's alphabet to the destination's. 

```js
//first we need to define our regular alphabet
const alphaB = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
//now the rot1 alphabet, ie our regular alphabet shifted by one place
const rot1 = 'ZABCDEFGHIJKLMNOPQRSTUVWXY'

//our encrypt/ decrypt functions use the same logic but invert the source and target alphabets
const caesarsEnc = str => [...str].map(e => alphaB[rot1.indexOf(e)])
const caesarsDec = str => [...str].map(e => rot1[alphaB.indexOf(e)])
```

The functions only work with capital letters, but it's enough for our purposes.

```js
const myMsg = 'HELLO WORLD';
> caesarsEnc(myMsg).map(e => e !== undefined ? e : ' ').join('')
'IFMMP XPSME'

const mySecretMsg = 'IFMMP XPSME'
> caesarsDec(mySecretMsg).map(e => e !== undefined ? e : ' ').join('')
'HELLO WORLD'
```
Code Review: Review labels in GitLab
Tags: gitlab, codereview, labels
Published: 2020-04-19 12:27:24

We use GitLab to host our code. One of the aspects of it is deal with code reviews on daily basis. 

In our team, we're about 10+ devs, it's quite difficult to have someone attention to code review, if it's product team and most of the time you focus on your own work and hoping if someone is review your changes. 

Initially, we have this, 

![GitLab without labels](https://dev-to-uploads.s3.amazonaws.com/i/78qj4p0y5yilc2icz81g.png)

Here's an issue, which is no way to tell if someone is reviewing your code, or if you have enough reviewers and etc. Number of comments are not gave you much, and `0 of 2` is not really helpful here.

---

In our code review guidelines we have few rules, one of them is to have your Merge Request (abbr. MR) to be reviewed by at least 2 person in team.

There's few concerns to address,

* how to make it visible if someone is reviewing your MR;
* who reviewing what, and have they done so;
* do you have enough reviewers.

Gitlab has it's [own approval system](https://docs.gitlab.com/ee/user/project/merge_requests/merge_request_approvals.html) in place, and code review guidelines. It does work, but we decided to tweak this a bit to improve communication within a team.

![GitLab with labels](https://dev-to-uploads.s3.amazonaws.com/i/exljqoxdyanzc8qamo3z.png)

There's few types of labels we introduces,

* `Review Me`, label is used to have an attention to MR and stating that it's ready to be reviewed, otherwise it can be `wip`;
* `Review by Paul Atreides`, each reviewer has it's own label assigned once they start commenting;
* `Approved by Padishah Emperor Shaddam IV`, each reviewer has it's own label once review is done, and comments are addressed.

With this in practice, once you going to visit list of MRs waiting. You're not checking each of them in order to find out, if it's been reviewed by someone else and it's ready to be merged. And it's greatly improve visibility of state on each Merge Request.
Daily Developer Jokes - Sunday, Apr 19, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-19 12:00:01

---
title: "Daily Developer Jokes - Sunday, Apr 19, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Apr%2019%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125894734cf.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What diet did the ghost developer go on?

___A:___ Boolean
 -->
border-radius css control with vanilla js
Tags: codepen, css, html, javascript
Published: 2020-04-19 11:57:47

---
title: border-radius css control with vanilla js
published: true
tags: codepen, css,html,javascript
---
Hi forks,
Css border-radius control with javascript. 
Each border-radius will change and copy the current border radius at the clipboard.
The box border also change if the border radius change.
This control can be useful when we work and the current border-radius is unknown and we can check the fancy border-radius. Though there are a lot online platform which provide border-radius generator. this is for mine tried. Hope good. Thanks all.


{% codepen https://codepen.io/nikhilroy2/pen/wvKWQvb %}
More Inkscape Hexagon stuff
Tags: graphics
Published: 2020-05-12 04:26:54

---
title: More Inkscape Hexagon stuff
published: true
date: 2020-04-19 11:55:00 UTC
tags: Graphics
canonical_url: https://drmsite.blogspot.com/2020/04/more-inkscape-hexagon-stuff.html
---

<picture>
  <source type="image/svg+xml" srcset="https://annoyingmouse.js.org/WireFrameJS/000-MISCELLANEOUS/800.svg" media="(min-width: 400px)">
  <img border="0" src="https://3.bp.blogspot.com/-c5N3LrsVwDI/Xpw6e2rx91I/AAAAAAAAmGw/lLfR5Bo5EnMFWwLXB0-RyH6unZX_C75lQCLcBGAsYHQ/s400/800.png" width="400" height="400" data-original-width="800" data-original-height="800">
</source></picture>

That was lots of fun and I got a chance to use the [`picture`](https://www.w3schools.com/html/html_images_picture.asp) element for the first time!

Here it is with black and white backgrounds:

[![](https://1.bp.blogspot.com/-69yS2-rit5o/Xpw8Bzm8CvI/AAAAAAAAmHA/DyZP5fiUsQkUh_ZGzUWaFujhUvEBu4PCQCLcBGAsYHQ/s400/800white.png)](https://1.bp.blogspot.com/-69yS2-rit5o/Xpw8Bzm8CvI/AAAAAAAAmHA/DyZP5fiUsQkUh_ZGzUWaFujhUvEBu4PCQCLcBGAsYHQ/s1600/800white.png)

[![](https://4.bp.blogspot.com/-ccN5hRKaJVs/Xpw8Bzfj_4I/AAAAAAAAmG8/uyVR_msxYCAFdFY_4bR1qU_IagxgUbScwCLcBGAsYHQ/s400/800black.png)](https://4.bp.blogspot.com/-ccN5hRKaJVs/Xpw8Bzfj_4I/AAAAAAAAmG8/uyVR_msxYCAFdFY_4bR1qU_IagxgUbScwCLcBGAsYHQ/s1600/800black.png)

And here is the [SVG on a Gist](https://gist.github.com/annoyingmouse/8742b95910c5530fb11a084681c6535f).
Useful resources to learn React.
Tags: beginners, javascript, react, showdev
Published: 2020-04-19 11:36:04

---
title: Useful resources to learn React.
published: true
description: Useful resources to learn React component, state, props and others
tags: beginners, JavaScript, React, showdev
---

**Have you learnt JavaScript and you want to up your game with React?**

This post contains most things you need to know:

##Understanding STATE and PROPs

This part will help you understand PROPs and STATE. It shows you how to quickly play with React.

[Get up and running with react](https://youtoocancode.com/react-for-beginners-get-up-and-running-in-minutes/)


##How to set up a React application.

This part will show you how to set up your first React application with ease.

[Setting up a React Application](https://youtoocancode.com/react-made-easy-how-to-set-up-a-react-application/)


##Offline documentation 

This part shows you how to have React and other documentations offline to reduce data consumption (if applicable).

[How to use React documentation offline](https://youtoocancode.com/react-made-easy-how-to-use-react-documentation-offline/)


##Understanding React component

 This explains React Component in a simple way that will help you understand its uses. And that is one of the major strengths of React.

[Getting to understand React component](https://youtoocancode.com/a-gentle-introduction-to-react-component/)


##Making a CRUD application with React

  This part shows you how to make a CRUD application with React.

[How to make a CRUD application with React](https://youtoocancode.com/react-made-easy-a-quick-guide-to-making-crud-apps-with-react/)

##This part shows you how to consume APIs in React applications.

An article is coming soon on this though it is currently "working on my computer" 😂. It is coming soon.

Stay connected.

Any information, opinion or suggestion?

Leave a comment!
COVID-19 Peak Detector
Tags: twiliohackathon
Published: 2020-04-18 17:39:50

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built

COVID-19 Peak Detector is a Java Spring Boot application with a DynamoDB store that displays graph information with stats about COVID-19. You can select the country you are interested in and you can create an alert by entering your phone number.

A scheduled process will check the data periodically and will send the alert when a peak is detected.

For simplicity and to avoid unnecessary spam, after sending the alert the process removes it from the database.

In addition to that, there is an anonymous chat available, in which COVID-19 news are posted every 5 minutes. People can comment on the news or just talk about the weather.

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

## Demo Link

http://covid19.plopcas.com

## Link to Code

https://github.com/plopcas/covid19-peak-detector

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

In a nutshell, this application uses the following techonologies:

- Spring Boot as the web framework
- DynamoDB as the database
- Thymeleaf for templating
- Chart.js for graphs
- Twilio SMS for alerts
- Twilio Chat for in-app messaging
- Twilio Sync for news
- Gradle as the build tool

For the COVID-19 data and the news, I'm using free APIs that are available via the Postman website here https://covid-19-apis.postman.com/.

The demo application was deployed in AWS using Elastic Beanstalk.

## Additional Resources/Info

https://dev.to/plopcas/twilio-hackathon-covid-19-peak-detector-5hfk
What Is a TypeScript
Tags: javascript, typescript
Published: 2020-04-19 11:20:12

TypeScript is a JavaScript but with an additional syntax that is called type system. All the JS rules also apply for TypeScript, so array functions, objects, arrays, spreading, everything that you know in JS can be used for writing a TypeScript.

The purpose of TypeScript is to catch errors early in the development process. To compare with JavaScript, to find a possible error or a bug, you first need to execute the code. That is not an ideal process, which makes development slower, because you need to continually rerun the code to see if you have left a bug somewhere.
With the help of the type system,  during development your code is analysed continuously, looking for possible errors and or bugs. If it finds one, then you are noticed inside the code editor with a message of the error and a provided fix. And all of this happens without the need to execute the code.

TypeScript compiler analyses code by using type annotations. Type annotations let you define the type of variable, input or output for the function or method. For example, you can annotate the type of the function to be a String or some variable to be the type of a Boolean. And once you annotate, it tells the compiler that only this specific type is allowed to use. If the compiler detects a different type used on the identifier, it throws an error. In other words, you are describing the information that is going through your code.

Type annotations are used during development only. After the code is compiled from TypeScript to JavaScript, all the type system is removed. You will not see any types that you defined. And the browser or NodeJs does not understand what the TypeScript is, nor it needs to know about it. The types are used only during the development process to help catch errors fast.

Many strong typed language compilers provide an option for code optimisation. That is not the case with TypeScript. It does not do any performance optimisations during the compilation process. It just removes the type system and converts the code to the plain JavaScript.

## Summary

To sum up, TypeScript is a JavaScript + Type System. It bounds types (i.e. Boolean, String or Number), to the expressions (i.e. variables, function inputs or outputs), and makes sure that only these types are used. It speeds up the development process because mistakes are caught early, before executing the code. TypeScript is used only in development, and after the compilation, the code converts to plain JavaScript getting stripped of all types.
Consuming a separate stylesheet with Lit & TS
Tags: typescript, lit, css, rollup
Published: 2020-04-19 11:18:45

# Sometimes, you let an outsider in:

If the metaphor for LitElement coding practices was a club, then it would be a _very exclusive_ club. Typescript, Web Component and browser standards, even commonly accepted libraries and coding practices are all pretty tightly adhered to by this club - if one thinks in that metaphor.

What you don't do is just bring in jquery or jsx or a bunch of legacy cowboy-coder stuff into a Web Component - at least by the ethic referenced above. 

So it's a **bit of a shock** to think about bringing an external stylesheet into your otherwise locked down, and compact, typescript coded Web Component.

## It's still more important to know when not to do this:

If you're using Lit and TS you're already not a cowboy coder - you would have never walked through that wall of fire in the first place.

So this article assumes you've thought about the many reasons not to bring in an external CSS file into your Web Component.

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

## Benny Powers makes it possible:

Credits in the project itself - but if you want to combine Lit and TS and your own external CSS file in a Web Component you might find [this project](https://github.com/petecarapetyan/lit-css-ts-MVP) helpful.

Photo by fran hogan on Unsplash
Display current git branch in bash shell prompt
Tags: linux, git
Published: 2020-04-19 11:16:55

A pet peeve according to Google is something that a particular person finds especially annoying. A pet peeve according to me is when I need to type `git status` or `git branch` to double check I'm not accidentally mucking up the remote master.

You've `add`ed, `commit`ted, and now you're ready to `push`. Then you hear  a voice from the back of your head nagging you to check if you're on the correct branch:
```bash
rapramos@rapdr_ramos:~/Documents/projects/my_awesome_project$ git branch
  awesome_branch
* master
```
Phew, dodged a bullet. Normally your remote master should be protected from accidental pushes but better safe than sorry.

## Display your git branch in your command line
Fire up your editor and open `/home/your_username/.bashrc`. You should be able to find this setting:
```bash
if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$ '
fi
unset color_prompt force_color_prompt
```
Above the block, add:
```bash
show_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
```
Then call the function via `$(show_git_branch)` and insert it right before the last `\$` for both cases. The final code should look like:
```bash
if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]$(show_git_branch)\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(show_git_branch)\$ '
fi
unset color_prompt force_color_prompt
```
Save, exit then run `source ~/.bashrc` to apply your changes. If everything was done correctly, congratulations because now you'll know what branch you're on all the time:
```bash
rapramos@rapdr_ramos:~/Documents/projects/my_awesome_project(master)$
```
Textarea (Comment Box) in Forms: HTML Forms
Tags: html
Published: 2020-04-19 10:51:58

Textarea in forms is used to create a text field box where user can type maximum characters. A text area field is used mostly to take user’s message just like a comment area box.
How to Create a Simple Textarea Box:
 
<textarea name=”comment”>Comment Box</textarea>
Result:
 
Attributes and More Example:
It is a by default size of a [VPN Master](https://apps.apple.com/us/app/vpn-master-by-veepn/id1246703610). We can change its size by two attributes. “rows” and “cols”. See an example below to learn more.
Example One:
Code:
<textarea rows=”12″ cols=”55″>Comment Box with Rows and Cols.</textarea>
Result:
 
Example Two:
Code:
<textarea rows=”20″ cols=”55″>Comment Box with Rows and Cols.</textarea>
Result:
 
Example Three:
Code:
<textarea rows=”10″ cols=”15″>Comment Box with Rows and Cols.</textarea>
Result:
 
In this way we can control its size using rows and cols as per we need. The more value we use in rows attribute, the [more lines](https://www.docdroid.net/czodpKC/fieldset-and-legend-in-forms-docx) we get and the more values we use in cols attribute the more width we get.
In next chapter we will learn how to create fieldset and legend in form.
WebP support detection with @supports and @media
Tags: css, webperf, webdev
Published: 2020-04-19 10:31:50

While developing Royal Ur (https://royal-ur.com) I remembered the Audit feature in the Chrome Dev Tools. I fixed a couple of things and then came across the following hint: "Serve images in next-gen formats".

I decided that it was time to properly learn about WebP, a file format developed by Google in 2010, which is now supported by Chrome/Chromium, Edge and Firefox. As I wanted to support all the browsers not supporting WebP, my first idea was to use the CSS `@supports` feature. Turns out there unfortunately is no `@supports(webp)`.

JavaScript feature detection was not an option either. I did not want to rely on JavaScript for this and JavaScript still blocks rendering in browsers.

After more searching I came across https://engineering.naukri.com/2015/11/optimizing-css-background-images-using-webp/. They suggest using a combination of `@media` and `@supports` to detect features that were added to browsers at the same time or after support for WebP was added. Their approach unfortunately has two drawbacks: a) Firefox does not get WebP but does support it b) Safari gets WebP but does not support it.

So with all this information and the great list of browser hacks at http://browserhacks.com/ I set out to write WebP detection in CSS. This is the result:

{% gist https://gist.github.com/janhohner/6ef5a08e16a9a6ad49ab9b9ae946b11e %}

I hope this is useful for somebody. Let me know what you think!
An undefined function fails
Tags: react
Published: 2020-04-19 10:22:10

I'm pretty new at React. I proceed by reading the documents, I got stuck at the first stage while dealing with error management. While the code should have made an error, it did not, and I could not make sense.

This line : \<input onChange={this.handleInput} value={this.state.inputVal} /\>

Mentioned 'handle input' or 'inputVal' in stats etc. I did not define anything. Just a basic component and i return it. Shouldn't it normally throw an error like "this.handleInput is not defined"?