teleren/devto huggingface dataset:
A simple way to work with Forms in React
Tags: javascript, react
Published: 2018-11-02 15:58:02

---
title: A simple way to work with Forms in React
published: true
description: 
cover_image: https://github.com/ngduc/ez-react-form/raw/master/screenshot-types.png
tags: #javascript #react
---

A simple way to work with Forms in React. This is my attempt to address complicate form rendering:

```
import { FormContainer, Form, Field, Button } from 'ez-react-form';

<FormContainer onSubmit={this.onSubmit} render={props => (
  <Form use="bootstrap4">
    <Field label="Text" name="text" />
    <Field name="password" />
    <Field textarea name="textarea" />
    <Field select options={animals} name="select" />
    <Field radios options={genders} name="radio" />
    <Field checkboxes options={roles} name="checkboxes" />
    <Field number name="number" />
    <Field date name="date" />
    <Field time name="time" />
    <Field toggle inline name="toggle" />
    <Field file label="File Upload" name="file1" />
    <Field file withPreview label="File Upload (with Preview)" name="file2" />
    <Field range name="range" />

    <Button type="submit"/>
    <Button>Cancel</Button>
  </Form>
)} />
```

Result: (Full form, validation (with yup) & error messages)

![Example](https://github.com/ngduc/ez-react-form/raw/master/screenshot-types.png)

[Demo](https://codesandbox.io/s/l5vxk5o7vq)
[Github](https://github.com/ngduc/ez-react-form)

I appreciate any feedbacks, suggestions or ideas below. Thanks! :)
Do you have any bad “sunk cost fallacy” stories?
Tags: discuss
Published: 2018-11-02 15:47:25

I recently found myself faced with a decision where the best outcome may be to abandon prior work and start over more simply.

This was hard to come by because my brain wants me to reap the rewards of prior labor, even if less than ideal.

Do you have any stories where you or your team went too far down the sunk cost rabbit hole?
Does FreeCodeCamp Prepare for a Career in Web Development?
Tags: freecodecamp
Published: 2018-11-02 15:33:37

---
title: Does FreeCodeCamp Prepare for a Career in Web Development?
published: true
description: 
tags: freecodecamp
---
Recently, I was asked by a Redditor (who will remain anonymous) if they are on the right path to becoming a web developer by using FreeCodeCamp. I would like to scream, at the top of my lungs, YES! FreeCodeCamp is an amazing resource and curriculum that encapsulates what is necessary to become a full-stack engineer in today's web development industry. Allow me to expand on this thought.

# Baby Steps

FreeCodeCamp starts off with the basic building blocks of any web application: HTML and CSS. It is here where new learners begin to build basic webpages. It is also here where new learners get frustrated with how "slowly" they're learning web development and how "boring" the HTML and CSS seem to be. However, you **must** crawl before you walk. I implore you to continue through the HTML and CSS, no matter how hard it may be to keep motivated.

# Trying to Run

After learning HTML and CSS, new learners are asked to create Responsive Web Design projects that _truly_ test their knowledge of HTML and CSS. This may be another point of frustration for many new developers. You may feel as if you gathered the puzzle pieces but haven't a clue where to start putting the puzzle together. My advice is to cut down the forest tree by tree instead of trying to cut the entire forest down all at once. Start by challenging yourself to render that image onto the screen. Next challenge is to center that image. After that is to render some text onto the screen. The challenges go on and on. Just take the project step-by-step!

FreeCodeCamp continues by teaching new developers JavaScript, React, Node and other new technologies. At each step, FreeCodeCamp challenges new developers to create projects. And **_THIS_** is where the magic of FreeCodeCamp lies. Projects are _THE_ single most important thing a developer can show their prospective employers. They are great talking points at interviews and (in my opinion) the place where web development are truly developed and honed.

Make _every_ FreeCodeCamp project you make to the best of your abilities. Do not stop at passing the included test cases. Instead, make a project that you'd be proud to show your friends, family and prospective employers. Ask for advice on the FreeCodeCamp [forum](https://www.freecodecamp.org/forum/) or [Gitter](https://gitter.im/FreeCodeCamp/home). With every project you complete, you are one step closer to your first web development job or client!

Best of luck!

Follow me!
YouTube: [The WebDev Coach](https://www.youtube.com/channel/UCERIxMohPPYmwjtHF3DdlJQ)
Twitter: [@AryanJabbari](https://twitter.com/aryanjabbari)
Instagram: [@TheWebDevCoach](https://www.instagram.com/thewebdevcoach/)
Medium: [@TheWebDevCoach](https://medium.com/@thewebdevcoach/)
Explaining PostgreSQL
Tags: postgres, tutorial, sql
Published: 2018-11-02 15:28:54

---
title: Explaining PostgreSQL
published: true
description: Understand what is going on under the hood of your queries.
tags: PostgreSQL, Tutorial, SQL
---

## [Explaining PostgreSQL](https://www.smoothterminal.com/articles/explain)

Hey guys and welcome to our continuing series on performance tuning our PostgreSQL databases. Today we're focusing on a very important method in the PostgreSQL command line up and that is explanation. To understand the idea behind explanation we first need to gain an understanding about the PostgreSQL query planner. For those who have watched our video about [analyzing](https://www.smoothterminal.com/articles/analyze), some of this will be a review. For others, this will be critical information.
explainable web?
Tags: discuss, web, machinelearning
Published: 2018-11-02 02:22:10

---
title: explainable web?
published: true
description: People are clamouring over Explainable AI, what about the web?
tags: #discuss #web #machinelearning
---

Hi everyone!

I just wanted to put this out, if there anything which resembles [**XAI**](https://en.wikipedia.org/wiki/Explainable_Artificial_Intelligence) for web. I don't know if this is even a valid point.

There are many tools, platforms, analysers which might be niche for a particular part of web, say traffic analysis or user behaviour etc., but what about looking at the whole picture? There is DOM and all the other things, inspecting stuff in browsers, ___**but is that something an end user would be able to understand and care about?**___

On the other hand, the whole debate about black box models in machine/deep learning and biases and so forth has been a discussion front page in ML in 2018! Did we just skip the entire web and jump onto something which was more esoteric, because people _**think**_ PhDs are working on it? I mean obviously the web is a trillion times more complex than a model predicting something, it's the arrogance of thinking that web is a solved problem.

Is that what Tim Berners-Lee is doing with [**SOLID**](https://solid.mit.edu/) & [**Inrupt**](https://www.inrupt.com/)? Because I don't understand blockchain really ! :(

And so, in my limited knowledge, I wanted to ask if there are tools which allows you to basically look though the web(**what's my UI doing, what happens if I click this, what's the point of this, how was this comment added, what will happen if I click on this like**) just like say [**tensorplayground**](https://playground.tensorflow.org) allows you to look through a model, even though you might need some background knowledge.

Also, I apologise for my extremely limited knowledge of the web, please forgive me!😅
Doing the wrong thing with good intentions
Tags: discuss
Published: 2018-11-02 15:20:54

What I'm going to talk about will self destruct in 60 seconds 😛

I've read an article on Medium called [Why the NSA Called Me After Midnight and Requested My Source Code](https://medium.com/datadriveninvestor/why-the-nsa-called-me-after-midnight-and-requested-my-source-code-f7076c59ab3d). 

The author narrates an episode of his life in which the NSA called him at night because they needed to break into encrypted (256-bit encryption) files on someone's laptop.

The files were encrypted with a piece of shareware software the author wrote. During the call the author find out the files were actually encrypted with the trial version, which, according to him, encrypts "only" with a 40-bit encryption algorithm.

The NSA asked him to turn over the source code so they could decrypt the files quickly.

The author seems to be a genuinely good guy called to do his "civic duty" by the government.

Still, there are a couple of things that bug me. Keep in mind that it was in the year 2000, way before Snowden's revelations or the standoff between Apple and the FBI over iPhones encryption. Probably NSA's reputation was stellar back then.

First: the guy believed the NSA operative right away. He was called at night, so it must have been super urgent. The operative gave little info, so it must have been something life or death. Given that it could have been true and I would have probably fell for the same thing, between the lines I can't possibly not notice the masterful social engineering put in place by the government. They knew where he was, so they must have been aware of this issue with the encrypter files for a while, tracked the info of the software creator and then his movements (he was physically in a place only his family knew about). There were no smartphones back in the day so I can assume knowing at all times where a person is (a person which is not the subject of the investigation) must have been something that was planned (this is my diet of american TV shows put to work). Still, he believed the situation was dire and time was scarce.

The part of the story that really bugs me though is the turning over of the source code of the encryption app. He developed an app to protect users's privacy and then with a phone call to his colleague he undid everything without even thinking deeply that he wasn't just going to help them catch "a bad guy" but he was also giving them the keys to ALL other files encrypted with his program forever and ever.

He humble brags that he receives a mug as a token for his cooperation... A mug!?

He had the best intentions but I believe he did the wrong thing. I'm not sure I could have said no the the NSA if I were in his shoes but I think this article is good food for tought.

What do you think?
Introducing our November 2018 sponsors
Tags: meta
Published: 2018-11-02 15:04:45

---
title: Introducing our November 2018 sponsors
published: true
description: Our wonderful sponsors are vital to the health of dev.to and it is great to work with companies contributing so much to the ecosystem.
tags: meta
cover_image: https://thepracticaldev.s3.amazonaws.com/i/925k1f96gv2lm44hwhde.png
---

Thank you to our wonderful sponsors who help sustain the [dev.to](/) ecosystem and the general developer community.

These three developer platforms are leaders in their space and I urge you to check out their offerings if you have not yet done so. Seriously, take a few minutes right now to poke around their product guides and documentation.

## DigitalOcean

[DigitalOcean](https://try.digitalocean.com/performance/?utm_source=devto&utm_medium=display&utm_campaign=Devto_2018_Brand) is a much-loved cloud computing platform. I'm always impressed by how well-built _and well-documented_ the DigitalOcean core products are. It's easier said than done, and they've been able to stay ahead of the curve.

DigitalOcean has been our longest-running supporter to date, and we're extremely thankful for their consistent support.  Their commitment to the developer ecosystem is crystal clear.

## Twilio

[Twilio](https://www.twilio.com/?utm_source=devto&utm_medium=banner&utm_campaign=summer_awareness_campaign) has been a great friend of ours since early in the [dev.to](/) days. We are users of their APIs, and folks from our team are always excited to get involved in their community initiatives. It's great to have them as a sponsor!

I can personally say that we chose Twilio Video because it made really great use of native peer-to-peer browser technology while also offering Twilio's infrastructure for necessary use cases wrapped in the same API. The docs and examples were well-organized and getting up and running was a synch.

## Raygun

[Raygun](https://raygun.com/?utm_source=dev.to) is an error, crash, and monitoring software service. Their products center around real usability, including frontend performance issues that we are often blind to in our web observability practices.

Consistency and ease of service is critical in this domain, and Raygun has earned a great reputation. Definitely check them out if you are looking to improve your monitoring.



***

These organizations are helping us build the best community we can. I urge you to check out their offerings if you are in the market for their services.

Happy coding ❤️
JavaScript Classes
Tags: javascript, beginners, oop
Published: 2018-11-02 14:55:55


---
title: JavaScript Classes
published: true
description: A quick look at Js class/constructor/new keywords
tags: #JavaScript, #beginner #oop
cover_image: https://cdn-images-1.medium.com/max/2000/1*7aJPlxn8gwhI7JjcBFr-tQ.jpeg
---

####What is a JavaScript class?
A JavaScript `class` is a function, which can be defined just as you would a function expression or function declaration. The `class` syntax has two components: 

1. class declaration `class Car {}`
2. class expression *unnamed* `let Car = class {}`
3. class expression *named* `let Car = class Toyota {}`

*class names should start with a capital letter*

To declare a class, you use the `class` keyword with the name of the class ("Car"). Class expressions can be named ("Toyota") or unnamed("Car"). The name given to a class expression is local to the class's body.

The `class` function uses the `constructor` and `new` keywords to create templates for objects to be created. Using the `class` function has benefits. Write less code, avoid typos, better readability, avoid repeating yourself(DRY).



####Constructor
The constructor method, which resides inside a class is used to create and initialize an object created with a `class`. You can only have one constructor method per `class`. The constructor builds your object based on predefined criteria you set. See the below example,

```javascript
class Car{
    constructor(make, model, color) {
        this.make = make;
        this.model = model;
        this.color = color;
    }
}
```
When I call this `class` later the arguments I pass to it will be the make, model, and color for my Car object. The object that will be created from this will look like the example below,

```javascript
const camry = new Car('Toyota', 'Camry', 'Blue');

console.log(camry);
//Car {make:"Toyota", model: "Camry", color: "Blue"}
```


####New
The `new` operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function. The `new` operator essentially says hey create a new instance of this `class` which we built above. The `constructor` tells the `new` operator, to use the arguments that were pass in to build the object.


####conclusion
Using the `class` function helps to create objects. What if we had to make 20 different cars that all had different colors and years! Not only would it take a while to create, we would have sooooo many lines of code to look through if we wanted to updated one. 

Check out these useful resources below-
[MDN Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
[JavaScript.info](https://javascript.info/class)
PHPStan
Tags: php, programming
Published: 2018-11-02 14:48:37

---
title: PHPStan
published: true
description: 
tags: php, programming
---

Recently I've heard and read about <a href="https://github.com/phpstan/phpstan">PHPStan</a>: I would like to use it for my everyday PHP work because it seems powerful and useful


does anyone know or use it ? 
Is it worth using it ?
At what point should you consider gRPC?
Tags: explainlikeimfive, webdev, beginners
Published: 2018-11-02 13:47:28

---
title: At what point should you consider gRPC?
published: true
description: Asking the community for opinions about gRPC
tags: explainlikeimfive, webdev, beginners
---

I have an app-in-progress which will use multiple frontends - a web console built with TypeScript/React, a native Android app (Java or maybe Kotlin if I feel adventurous), and a CLI (Rust) all talking to a server (Rust for now, but I'm considering a jump to Spring), with some IoT devices reporting in.  I've got bits and pieces of each of these individual components working but this is still very much in the planning stage (and ambitious - this is a long-term idea).

I'd like to use the opportunity to learn how gRPC works and began looking in to [capnproto](https://capnproto.org/).  It seems like a great idea and designed to tackle this exact scenario, but starting to actually implement this is giving me pause.

I feel like I am adding a *lot* of technical debt for a situation that could likely be handled just fine by a good old RESTful API.  Are the benefits going to outweigh the code weight, or do I not understand this tool well enough?  Is it worth it to build a REST version first, even though if I do decide to change down the road the switch would require significant rewrites?

I can't tell if I'm running toward something because it's actually a good idea or because it looks cool and I haven't tried it yet.  I'd love to hear your thoughts!  How are you using gRPC?
Embed parler.io Audio Directly into Your Own Blog Posts
Tags: meta, showdev, writing
Published: 2018-11-02 13:41:10

---
title: Embed parler.io Audio Directly into Your Own Blog Posts
published: true
description: 
tags: #meta #showdev #writing
cover_image: https://thepracticaldev.s3.amazonaws.com/i/i35rgsbj3elixmkww7dh.png
canonical_url: https://www.parler.io/blog/2018/11/02/embed-parler-io-audio-into-your-own-blog-posts/
---
You may have seen that some of my recent posts here on dev.to have included an embedded audio player at the top. This is a new liquid tag that I [contributed over on the dev.to repo](https://github.com/thepracticaldev/dev.to/pull/828). 

{% github https://github.com/thepracticaldev/dev.to/ %}

The tag allows you to embed your converted audio from [parler.io](https://www.parler.io/), a text to speech conversion service I have been building directly into your post here.

Parler is a side project I have been actively working on in my spare time. The goal is to convert written content into an audio format that can then be published, embedded, and shared onto other platforms. A future release will be aimed at doing the conversions automatically by watching your blog feed.

Now that you know what it is and how it can help you out, let's run through how you get parler audio into your own blog posts.

### How to add parler audio to your own dev.to blog posts
1. Get your RSS feed from here on dev.to or your own blog. Your dev.to feed can be found here: `https://dev.to/feed/<your-username>`.
2. Enter the feed into [parler.io](https://www.parler.io/)
3. Click convert on your blog post. This can take a few minutes to process.
4. Once your blog post is converted into audio, grab the URL of the audio near the bottom of the page.

![parler.io audio download link](https://thepracticaldev.s3.amazonaws.com/i/qcddscjrtrkd7w8o4cb0.png)

Once your post has been converted by Parler you can then embed it here on dev.to using the Liquid tag below.

`{% parler https://www.parler.io/audio/73240183203/ab59b90c45cd1f2144291f1a1cfd69894f87aabf.e466ec75-50e8-47c9-b376-55122f2e3a08.mp3 %}`

Save your post and share your awesome content in audio format as well as in written form.

![parler audio player](https://thepracticaldev.s3.amazonaws.com/i/zt57dlk5jhv4e3pmbd94.png)

It's worth noting that you can also embed your converted audio into other sites as well. This can be done by copying `<iframe>` code from your conversion screen and pasting it into your desired site.

### What is coming next for parler.io?
Right now Parler is in `alpha` release while I gather feedback from users like yourselves. The intention is to extend it with more features like batch conversions, selectable voices, and an enhanced embed player in the MVP and beyond. 

If you have any questions or feedback please feel free to drop me a comment below. There is also a mailing list on the [parler.io](https://www.parler.io) landing page that you can subscribe to in order to stay up to date on new developments.
Daily Coding Puzzles - Oct 29th - Nov 2nd
Tags: codingpuzzle, programming, challenge
Published: 2018-11-02 13:30:08

---
title: Daily Coding Puzzles - Oct 29th - Nov 2nd
published: true
description: A discussion about this week's Coding Puzzles
tags: #CodingPuzzle, #programming, #challenge
cover_image: https://thepracticaldev.s3.amazonaws.com/i/27pwqd090zw80tmboq71.jpg
---

Every day on [Twitter](https://twitter.com/aspittel), I post coding puzzles. These are quick coding challenges that increase in difficulty across the span of the week -- with Monday being the most beginner friendly and Friday being super tough. I love seeing other people's solutions as well, and so people post their solutions as well to the problem in any programming language.

[Here's more about them.](https://dev.to/aspittel/daily-coding-puzzles-4ce9)

I wanted to try posting these here. I'm going to post each question from this week as a comment below, and then we will thread answers under those questions. Please feel free to post your solutions to the ones you are interested in below! Then, you can comment with insights into people's solutions below that! I will also add a meta thread if you have advice on how to format this in the future!

Excited to see your solutions!
sitemap_generator using lastmod date from git repo
Tags: rails, sitemap, git
Published: 2018-11-02 12:24:23

---
title: "sitemap_generator using lastmod date from git repo"
published: true
tags: 
  - rails
  - sitemap
  - git
---

For my new project [Budget Fox](https://budget-fox.com?utm_source=dev.to) I added [sitemap_generator](https://github.com/kjvarga/sitemap_generator) even though it's just a few pages that I want indexed for now.


One thing I noticed when looking at the output was the `lastmod` date being the same for all entries. Can't be hard to fix that by pulling the date from the git repo I though.
Here's the code for this and as you can see, I did monkey-patch `SitemapGenerator::Interpreter`.

```ruby
class SitemapGenerator::Interpreter
  def lastmod(view)
    date = `git log --date iso  -n 1 --format="%ad" app/views/#{view}*`
    if date.blank?
      raise "Missing file #{view}"
    end
    return date
  end
end

SitemapGenerator::Sitemap.create(default_host: 'https://budget-fox.com', compress: false, include_root: false) do
  add root_path, changefreq: 'weekly', lastmod: lastmod('welcome/index')
  add team_path, priority: 0.5, lastmod: lastmod('welcome/team')
  add features_path, lastmod: lastmod('welcome/features.html')
  add pricing_path, lastmod: lastmod('purchase/new.html')
end
```