teleren/devto huggingface dataset:
Status field in JSON responses
Tags: scala, rest, circe
Published: 2020-05-16 13:45:21

Sometimes I see pattern in REST JSON API responses with status field:

|field|type|description|
|:-----|:-----|:-----|
|**success**|boolean|True or false. **If false then only the two last parameters will be appended.** Default value: true|
|userId|string|Created user id. For example: "00000000-0000-0000-0000-000000000000"|
|errCode|number|**If success false**: Custom error code. For example: 210003|
|errMsg|string|**If success false**: Custom error message. For example: "Transaction failed"|

And such `success` field appears in all responses, forming what will be in response.
Let's implement this pattern in Scala.

## Step one: modeling response

First of all, lets think about responses. They all share the same status field. Error should have `false` and successful responses be `true`:
```scala
trait Response {
  val success: Boolean
}

trait ErrorMixin extends Response {
  val success: Boolean = false 
}

trait SuccessMixin extends Response {
  val success: Boolean = true 
}
```

If we return error, we do not need to write other fields except `errCode` and `errMsg`.
And by other side, no need to pass nulls on success in `errCode` and `errMsg`.
Such two case classes will look like this, without our status code.

```scala
case class Error(
  errCode: Int,
  errMsg: String
) extends ErrorMixin

case class UserIdResponse(
  userId: UUID
) extends SuccessMixin
```

Status code will be mapped in type by `Either`.
Since our app can have lots of endpoints and we want to have consistent error responses, I'll add type to show this explicitly:

```scala
type Result[S <: SuccessMixin] = Either[Error, S]

def findUser(req: RequestDto): Result[UserIdResponse] = ???
```

## Step two: encode it to JSON

I'll use [Circe](https://circe.github.io/circe/) lib to show how to encode these DTO's, but it should not be hard to adopt it for [PlayJson](http://kailuowang.blogspot.com/2013/11/addremove-fields-to-plays-default-case.html) or other lib.

Circe will give us `Either` encoder implicitly, so we need to add only status field beforehand:

```scala
def withSuccess[R <: Response](enc: Encoder[R]): Encoder[R] = (r: R) =>
  enc.apply(r).mapObject(_.+:("success", r.success.asJson))

import io.circe._, io.circe.syntax._

implicit val userCreatedEncoder: Encoder[UserIdResponse] =
  withSuccess(deriveEncoder[UserIdResponse])

implicit val errorEncoder: Encoder[Error] =
  withSuccess(deriveEncoder[Error])
```

And that's all! Status field will be always on it's place.
Now it is easy to map status codes for left part depending on error happened.
Wizar devlog 16 - Some webiste updates
Tags: gatsby, serverless, react
Published: 2020-05-16 13:38:45

This week I dive into Gatsby to update our website https://pro.wizar.world  (targets the tourism offices)
I made a (still empty) blog and page admin interface. We use Netlify cms which is terribly slow due to the github backend. But it works.
Code source is available here if you want: https://github.com/dagatsoin/wizar-pro-website

I wonder what could be used as an admin interface for Gatsby which offers:
- instant update
- node.js backend
- configurable with a YAML/JSON file
- using React

Though anyone?
Understanding Kubernetes: part 25 – Useful tools - part 5 - backup and restore with Velero
Tags: kubernetes, devops, docker, beginners
Published: 2020-05-16 13:13:00

---
title: Understanding Kubernetes: part 25 – Useful tools - part 5 - backup and restore with Velero
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h007fvr7rzzr5k4lrzs7.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with some useful tools to know.
In this fifth part we will see: Velero.
This tool allows you to backup and restore Kubernetes resources, ideal before an upgrade.
You can do a full backup, a backup with only wanted ressource and restore all resources or only several kind of resources. It's possible to plan scheduled backup too.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h007fvr7rzzr5k4lrzs7.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h044kp7gqpyxrvrnruae.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
A GitHub repo template featuring automation that makes it pretty darn easy to publish and maintain grade A NPM modules.
Tags: typescript, github, ci, actions
Published: 2020-05-16 12:56:06

[ts_ci](https://github.com/garronej/ts_ci)

This template automates the boring and tedious tasks of:
- Filling up the ``package.json``
- Setting up Typescript.
- Writing a [README.md](https://github.com/garronej/denoify_ci/blob/dev/README.template.md) with decent presentation and instructions on how to install/import your module.
- Testing on multiples ``Node`` version before publishing.
- Maintaining a CHANGELOG.
- Publishing on NPM and creating corresponding GitHub releases.

Good stuff that comes with using this template:
- No sources file are tracked on the default branch.
- Shorter specific file import path.  
  ``import {...} from "my_module/theFile"`` instead of the usual
  ``import {...} from "my_module/dist/theFile"`` 
- CDN distribution for importing from an ``.html`` file with a ``<script>`` tag.
- A branch ``latest`` always in sync with the latest release.
JavaScript Essentials: Modern ES6+ Features
Tags: beginners, javascript
Published: 2020-05-16 12:46:39

Heya, devs!

Just dropping by to share a presentation I made for our company's Tech Thursdays, in which I explained a few relatively "new" concepts of the ECMAScript ES6+ version.

Topics list are as follows:
* Block-Scoped Constructs: let and const
* Rest and Spread Parameters
* String Interpolation (Template Literals)
* Object Shorthand
* Object and Array Destructuring
* Arrow Functions
* Promises to Async/Await
* Modules
* Array Built-in Methods

{% slideshare JdRFp4v5Xj2IuV %}

Happy coding!
There's more than code
Tags: softskills, productivity, motivation, beginners
Published: 2020-05-16 12:45:07

---
title: There's more than code
published: true
description: It's time to focuser on your softer side
tags: soft skills, productivity, motivation, beginners
canonical_url: https://struggling.dev/theres-more-than-code
---

*I would love your feedback if you have any on what other topics you'd like to see - you can reach me on twitter: [@harryblucas](https://twitter.com/@harryblucas)*

---

Let me paint you a picture.

Imagine Bob. Friendly guy, knows his stuff. Knows how to get things done.

Lone wolf type. Headphones on. Slack = Do not disturb.

Moves tickets from to do -> in progress -> review before you've even finished you're coffee.

You give him a feature and you know it's going to get done. And done well. Pull requests are a bit big and his Git hub profile is showing a strong gravitation towards the commit axis, but hey, it's all worth it in the end.

Dream developer right?

* ✅ Finishes features on time
* ✅ Focuses throughout the day
* ✅ Quality code

![Thats a lie](https://media.giphy.com/media/uKPkgG7Utcd6E/giphy.gif)


Whilst Bob seems to be doing some solid, A+ "pat on the back" work, he needs to realise there is more to being a good developer than just pumping out features.

Developers work in teams. Teams move together.

For every 700+ line PR he pumps out, he's just taken an hour out of a team mates day.

Every PR he doesn't review, has just fallen onto the lap of another team member. Now they can't focus on their features.

Whilst the team is discussing an important architectural change, Bob's got his headphones on.

Worst of all, is the opportunity cost that's lost with the way Bob works. By himself he can contribute 2x as any other team member. That's fantastic.

But what if Bob spent time *helping* and *leveling up* is other team members. Helping them fill in gaps in their knowledge. Showing them better patterns, abstractions. Setting up tools to help them work faster, leaving **insightful** feedback on their PRs.

What if Bob helped his *whole* team become just as effective as him. Suddenly, instead of 1 person contributing 2x, we have 5 people contributing 2x.

Now you don't have a 10x developer.

You've got a 10x team, and that is 10x more valuable.

# Take aways
---
Think of your team like a rowboat. When someone stops rowing (PR reviews, stuck without help etc.) the boat slows and goes in circles.

1. Understand that there is more than just number of lines your write. Being apart of a team means exactly that, *being apart of a team*.
2. Smaller PRs are exponentially faster to review than larger once. Reduce the burden on your team.
3. Review your team members PRs as soon as soon as you get a chance. Get them rowing again.
4. Become a force multipler for your team. One person being 3x is less effective than 2 x 2x person.
Chingu Voyage 20 Starts on June 1st
Tags: webdev, career, development, learning
Published: 2020-05-16 12:09:55

Chingu Voyage 20 starts on June 1. What are the benefits of our Voyages?

A. Level up your Developer skills
B. Learn "soft" skills employers are looking for
C. Meet and be motivated by Developers from across the globe
D. Work hard, but have fun
E. **_All of the above_**

Learn how you can join at https://www.chingu.io
Handling Errors in Axios
Published: 2020-05-16 12:02:57

```javascript
axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
```
Using the validateStatus config option, you can define HTTP code(s) that should throw an error.
```javascript
axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // Resolve only if the status code is less than 500
  }
})
```
Using toJSON you get an object with more information about the HTTP error.
```javascript
axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });
```
Source [Axios Cheat Sheet](https://simplecheatsheet.com/tag/axios-cheat-sheet/)
Axios Shorthand methods
Tags: axios
Published: 2020-05-16 12:01:13

Send a REQUEST request
```javascript
axios.request(config)
```
Send a GET request
```javascript
axios.get(url, config)
```
Send a DELETE request
```javascript
axios.delete(url, config)
```
Send a HEAD request	
```javascript
axios.head(url, config)
```
Send a OPTIONS request
```javascript
axios.options(url, config)
```
Send a POST request
```javascript
axios.post(url, data, config)
```
Send a PUT request
```javascript
axios.put(url, data, config)
```
Send a PATCH request
```javascript
axios.patch(url, data, config)
```

Source: [Axios Cheat Sheet](https://simplecheatsheet.com/tag/axios-cheat-sheet/)
May 16 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-05-16 12:00:28

---
title: May 16 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Daily Developer Jokes - Saturday, May 16, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-05-16 12:00:24

---
title: "Daily Developer Jokes - Saturday, May 16, 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=Saturday%2C%20May%2016%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/5e1259ab8700f.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___: Why was nobody given food at the developer conference?

___A___: It was a serverless function!
 -->
Type checking props with PropTypes in React
Tags: react, frontend
Published: 2020-05-16 11:56:46

Use PropTypes
```javascript
import PropTypes from 'prop-types';
```
Prop is an optional array
```javascript
MyComponent.propTypes = {
  optionalArray: PropTypes.array,
};
```
Prop is an optional boolean
```javascript
MyComponent.propTypes = {
  optionalBool: PropTypes.bool,
};
```
Prop is an optional function
```javascript
MyComponent.propTypes = {
  optionalFunc: PropTypes.func,
};
```
Prop is an optional number (integer, float…)
```javascript
MyComponent.propTypes = {
  optionalNumber: PropTypes.number,
};
```
Prop is an optional object
```javascript
MyComponent.propTypes = {
  optionalObject: PropTypes.object,
};
```
Prop is an optional string
```javascript
MyComponent.propTypes = {
  optionalString: PropTypes.string
};
```
Prop is an optional symbol
```javascript
MyComponent.propTypes = {
  optionalSymbol: PropTypes.symbol,
};
```
Prop is an optional node (numbers, strings, elements, array, fragment)
```javascript
MyComponent.propTypes = {   optionalNode: PropTypes.node, };
```
Source: [React Cheat Sheet](https://simplecheatsheet.com/tag/react-cheat-sheet/)
React State Summary
Published: 2020-05-16 11:52:21

Update state with setState, except in constructor
```javascript
this.setState({
  title: 'Updated title',
});
```
Set state with previous state
```javascript
this.setState((prevState, props) => {
  return {count: prevState.count + 1};
});
```
Declare initial state in constructor
```javascript
class Heading extends React.Component {
  constructor(props) {
    super(props);
    this.state = {title: 'My title'};
  }
}
```
Do not update state directly
```javascript
this.state.title = 'Hello';
```
Lifting state up to share state between component
```javascript
class Wrapper extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {value: ''};
  }

  handleInputChange(value) {
    this.setState({value});
  }
  render() {
    const value = this.state.value;
    return (
        <Input value={value} onInputChange={this.handleInputChange} />
    );
  }
}

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onInputChange(e.target.value);
  }

  render() {
    const value = this.props.value;
    return <input value={value} onChange={this.handleChange} />;
  }
}
```

Source: [React Cheat Sheet](https://simplecheatsheet.com/tag/react-cheat-sheet/)
React quiz: spot a bug
Tags: react
Published: 2020-05-16 11:48:27

A few month ago I've posted this trick snippet on Twitter... And then I even forgot what the problem was myself!

```js
const [tokenize, setTokenize] = useState(null)
const someTokenizeFunction = () => null
useEffect(() => {
  setTokenize(someTokenizeFunction)
}, [])
```

Can you spot a bug? Write in the comments!

Could make a nice interview question, huh?
How to detect that mobile keyboard pops up in Web?
Tags: discuss, webdev, javascript, mobile
Published: 2020-05-16 11:33:42

Recently we had a feature in which we had to make an animation on our header only when the keyboard on mobiles devices has been displayed so that we can decrease the size of the header and make more space for the user on the screen.

I think there is no standard way to do this. The options were either listen for input `focus` events and based on them to apply our changes, or `resize` events where some height calculations could be made to achieve the wanted behaviour. However, both options have their drawbacks:
- with `focus` event we are trying to fight the browser's default behaviour when the keyboard pops up. This being the case the solution seems a little patchy.
- with the `resize` event there are some problems on iOS devices

Does someone know another way of detecting that the mobile keyboard is displayed?
How to Pass Data from React Native to Passport.js Token Strategy Callback?
Tags: reactnative, node, react, javascript
Published: 2020-05-16 11:00:17

Hi, how to Pass Data from React Native to Passport.js Token Strategy Callback?
https://stackoverflow.com/questions/61834412/how-to-pass-data-from-react-native-to-passport-js-token-strategy-callback
any help would be greatly appreciated.
DevParty – UK & Ireland
Tags: gdgdevparty, gdglondon, developers, devparty
Published: 2020-05-16 11:23:12

---
title: DevParty – UK & Ireland
published: true
date: 2020-05-16 10:57:46 UTC
tags: GDGDevParty,GDGLondon,developers,devparty
canonical_url: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fbq53hiev7khlk75grdd.png
---

GDG UK and Ireland are very excited to host DevParty today from 4:30 to 7:15pm (GMT+1), an online event which offers interactive talks from experts in a range of fields, and provides a great chance to connect with other developers from all across the UK and Ireland!

The event is split in 4 tracks: Mobile, Cloud, Machine Learning and Ethics & Diversity.

Make sure you are registered -> it’s [Free](https://www.eventbrite.co.uk/e/devparty-uk-ireland-tickets-103899644634)!

## Mobile Track

4:45 pm – Devops-ify your life with Github Actions – Nicola Corti

5:30 pm – Rapid prototyping with Flutter and Firebase – Paul Ruiz

6:15 pm – Exoplayer “2” the Rescue – Stacy Devino

[Watch Mobile Track Talks](https://www.youtube.com/watch?v=_802qLwWgkE)

## Machine Learning track

4:45 pm – Machine Learning & Google Cloud – Marc Cohen

5:30 pm – Productionising Machine Learning – Dr Larissa Suzuki

6:15 pm – Machine Learning for Developers: A practical approach – Sergii Khomenko

[Watch Machine Learning track](https://www.youtube.com/watch?v=F4nZ9xdzSes)

## Ethics & Diversity track

4:45 pm – Diversity matters, or Why your build fails – Emma Haruka Iwao

5:30 pm – A Technologist’s Introduction to Epistemic Injustice – Cat Swetel

6:15 pm – Public As Programmer: Participatory Design and ML Ethics – Christine Meinders

[Watch Ethics & Diversity track](https://www.youtube.com/watch?v=BvjNM8ZsEgk)

## Cloud track

4:45 pm – Google Cloud Storage options with demos – Swapnil Parashar

5:30 pm – Serverless Cloud Computing: Technical Architecture and Real-life Use Cases – Martin Omander

6:15 pm – Identity Platform – Jen Person

[Watch Cloud track](https://www.youtube.com/watch?v=_802qLwWgkE)

[![](https://lh3.googleusercontent.com/aYbdIM1abwyVSUZLDKoE0CDZGRhlkpsaPOg9tNnBktUQYsXflwknnOn2Ge1Yr7rImGk=w300)](https://www.instagram.com/panayiotisgeorgiou)

[Follow me on Instagram](https://www.instagram.com/panayiotisgeorgiou)

**That’s it for now. **

If you liked this article, then please subscribe to my [YouTube Channel](https://www.youtube.com/c/PanayiotisGeorgiou?sub_confirmation=1) for video tutorials.

You can also find me on [Twitter](http://twitter.com/panay_georgiou) and [Facebook](https://www.facebook.com/panayiotisgeorgiou.net).

The post [DevParty – UK & Ireland](https://www.panayiotisgeorgiou.net/devparty-uk-ireland/) appeared first on [Panayiotis Georgiou](https://www.panayiotisgeorgiou.net).
In this video, we will create a dynamic dropdown dependent on another dropdown value
Tags: javascript, typescript, react, nextjs
Published: 2020-05-16 10:45:39

When the "make" dropdown changes, an HTTP call is performed to load all the models available for the selected "make" dropdown. With the result of the HTTP call, we populate the model dropdown.

We are going to use Formik and SWR.

I hope you find this helpful. Please let me know any feedback you may have :)

{% youtube 6FKSqWmZ5Ec %}
Logging using Telegraf and Influxdb for Mongo Restore and Backup Process
Tags: telegraf, influxdb, mongodb, backupandrestore
Published: 2020-05-16 10:33:21

This story provides a way to backup and restore MongoDB data using bash scripts, data encryption, and decryption using OpenSSL, logs collection using telegraf and influxDB for data storage.

### Overview

In the above diagram, MongoDB is running on VM-1, while data backup and restore with telegraf on VM-2, telegraf collects the logs generated by backup and restore processes and finally dump the logs in a measurement of influxDB running on VM-3.
The architecture given above is one of the many ways to skin this cat.

### Guideline

Detailed guidelines for the above processes can be found in the **README.md** of this [repository](https://github.com/aliartiza75/mongodb-backup-restore).

### Final Thoughts

I hope you have liked this tutorial. Do give me feedback about anything that can be improved. Thank you.


### Image credits

1. https://cdn3.iconfinder.com/data/icons/file-format-2/512/log_.log_file_file_format_document_extension_format-512.png

2. https://getdrawings.com/free-icon/mongodb-icon-62.png

3. https://d22e4d61ky6061.cloudfront.net/sites/default/files/Influxdb_logo_1.png

4. https://icons.iconarchive.com/icons/icons8/windows-8/512/Database-Backup-icon.png
Angular 9 with Firebase Cloud Database
Tags: angular9firebase
Published: 2020-05-16 10:31:25

i have create a project form scratch. in this project we have cover all insert, delete and update operations. so want to learn how to deploy angular 9 app on firebase  cloud hosting so please click, on the link.

Full Series -  https://www.youtube.com/watch?v=Stj9I9_Q_6w&list=PLbCi1k95dW0FmxIpQDLtlRalvXDsZIXfT

Part 1- Angular 9 crud opractions https://www.youtube.com/watch?v=TucRRB57fi8&list=PLbCi1k95dW0FmxIpQDLtlRalvXDsZIXfT&index=4

Part 2- Angular 9 crud opractions https://www.youtube.com/watch?v=tfy2mTv5JsY&list=PLbCi1k95dW0FmxIpQDLtlRalvXDsZIXfT&index=5