teleren/devto huggingface dataset:
React - Stateless vs Stateful Components 
Tags: react, javascript, beginners
Published: 2018-12-11 20:33:35

---
title: React - Stateless vs Stateful Components 
published: true
description: Why use one over the other?
tags: #React, #Javascript, #beginner
cover_image: https://reactjs.org/logo-og.png
---
Prerequisite - This tutorial is intended for beginners who have started learning React and need a better overview of components.

##Component Intro
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. When building your React application you will have many different components that make up your React application. Some will likely have state changes and may even have to access your backend. Other components may just render a piece of your UI with access to props to render successfully. Below we will go though a stateful and stateless example. 

Stateful - Establishes state, has methods    

```javascript
import React from "react";
import Show from "./show";

class Input extends React.Component {
  constructor(props) { //<----Method
    super(props);
    this.state = { //<----Initialize state
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) { //<---- Method/Set State
    this.setState({ value: event.target.value });
  }

  render() { . //<-----Method/Return JSX/HTML
    return (
      <div>
        <input
          name="firstName"
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <Show value={this.state.value} />
      </div>
    );
  }
}
export default Input;
```

The above is an example of a stateful component, why? Three things, we first initialize state, secondly we have methods on our constructor, and lastly we setState within our `handleChange` method. These are three critical pieces of a stateful component. Next let's look at a stateless component.


Stateless - Returns a part of our UI with the value from our input

```javascript
import React from "react";

function Show(props) {
  return( //<----Return JSX/HTML
    <p>{props.value}</p>
    )
}

export default Show;
```
The above is an example of a stateless component, its just simply returning a p tag  that will have the value of our input as we type. It is not setting any state, there are no methods. This is a great way to keep your react code maintainable and readable. Breaking it up into smaller components and passing props to child components. We export this component and include it the parent component. Its only job is to display the value from the input.

If this were a complete form full of inputs our code would be hundreds of lines of code. Even longer if we needed to display the values, using this method allows us to break that up being more readable and maintainable. 


Thanks for reading.
Changelog: Adjusted position of post buttons for wide screens
Tags: meta, changelog, design
Published: 2018-12-11 20:23:26

This is a change to help readability on desktop. It only applies to screens greater than 1530 pixels wide.

![](https://cl.ly/45f035a2c466/Image%202018-12-11%20at%203.14.32%20PM.png)

Since making the reactions fixed position, there have been mixed feelings about how this has affected readability of posts on laptops/desktops.

One such not-so-mixed feeling is described here:

{% link https://dev.to/flaque/this-article-is-hard-to-read-2kgg %}

The sticky footer is useful because people don't use the web in a purely linear way, and at any point you may like to toss a ❤️, or bookmark a post. Skipping to the discussion is also valuable.

We will continue to fiddle with design concepts to get this element of the site just right. We have plans to keep improving the usefulness of bookmarks and reactions in general. Hopefully the reading experience is just a bit better now.

Happy coding ❤️
Debug Your Node.js App in 60 Seconds
Tags: debugging, vscode, javascript, node
Published: 2019-02-27 14:57:21

---
title: Debug Your Node.js App in 60 Seconds
published: true
tags: debugging,vscode,javascript,nodejs
canonical_url: https://medium.com/the-node-js-collection/debug-your-node-js-app-in-60-seconds-9ee942a453f0
---

Setting up debugging can be a chore. It can make you feel like console.log isn’t so bad after all. Right? While I enjoy a good console.log as much as anyone, I’d much rather debug with zero configuration of my app. Wouldn't you?

![](https://cdn-images-1.medium.com/max/1024/1*RUTm8jf4xhyRMKhpplUrDg.jpeg)<figcaption>Sketchnote of Debugging Node.js in 60 Seconds</figcaption>

[Visual Studio Code](https://code.visualstudio.com/?wt.mc_id=devto-blog-jopapa) (aka VS Code) has changed the game on Node.js debugging. There is a feature called **Node: Auto Attach** ([you can learn more about it here in the docs](https://code.visualstudio.com/docs/nodejs/nodejs-debugging?wt.mc_id=devto-blog-jopapa)). Or keep reading — this will only take a minute.

When you enable this feature, you can run your node app from a command line, from an npm script, or from a tool that runs one of those. Just make sure you add the Node Inspector flag to let Node know you are planning on debugging. Once you do this, the debugger lights up in VS Code!

![](https://thepracticaldev.s3.amazonaws.com/i/sil2q2wm0lm9ca0iuchl.jpg)<figcaption>Auto-Attach the Debugger to Node.js Apps with VS Code<figcaption>

### Step by Step

Open the settings in VS Code (CMD + , on Mac or CTRL + , on Windows). You can also go to the Command Palette (CMD + SHIFT + P on Mac or CTRL + SHIFT + P on Windows) and search for settings.

Search for “auto attach” and you’ll see a setting for **Node: Auto Attach**. Go ahead and turn that  **on**.

Now run your Node.js app from your favorite command line whether that be integrated terminal, external terminal, or using a magic wand (well, if you have a magic wand, you likely don’t need debugging 😀).

```
node --inspect=0.0.0.0:9229 server.js
```

Now when you launch your app with the --inspect flag the debugger attaches to your app in VS Code! From here you can set breakpoints, step through your code, and have all the great debugging goodness!

You can learn more about this feature from [this link in the VS Code docs](https://code.visualstudio.com/docs/nodejs/nodejs-debugging?wt.mc_id=devto-blog-jopapa).


![Auto-Attach](https://cdn-images-1.medium.com/max/672/1*cvDAt4AVZ1K_yGOyvZRvNw.png)

* * *

_Cross posted from original article on [medium](https://medium.com/the-node-js-collection/debug-your-node-js-app-in-60-seconds-9ee942a453f0)_
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2018-12-11 19:28:17

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

The most popular discussion thread this week asked the following: **[What software development skills only come with experience?](https://dev.to/ben/what-software-development-skills-only-come-with-experience--578a)**.  @biros and @damnjan offered their insights: 
{% devcomment 7bcm %}

{% devcomment 7bcg %}

**[Have you ever heard a more beautiful phrase than this?](https://dev.to/ben/have-you-ever-heard-a-more-beautiful-phrase-than-this-2fe)** The statement in question is:
> Everything's fine with the monitoring. Turns out the site's just more stable

Ah, what a wonderful realization.  Luckily, as @chiefnoah points out, we can all capture that feeling... _sort of_ 🙈:
{% devcomment 7d6b %}

@aspittel answered the question **[What is a type of "overconfidence" you have observed in developers?](https://dev.to/ben/what-is-a-type-of-overconfidence-you-have-observed-in-developers-5e39)**, by offering a well-justified vent:
{% devcomment 7d5a %}

I really enjoyed the **[90% of my job is...](https://dev.to/david_j_eddy/90-of-my-job-is-8ie)** prompt, it led to some great answers.  None better than @buphmin's reply here:
{% devcomment 7ddh %}

See you next week for more great comments ✌
A short list of Data Science resources #6
Tags: python, datascience
Published: 2018-12-11 18:30:15

---
title: A short list of Data Science resources #6
published: true
description: 
tags: #python #datascience
---
Even in those last seven days I found 4 interesting links related to data science and 
Python that I wish to share with you.

- Code examples for 50 matplotlib visualizations https://www.machinelearningplus.com/plots/top-50-matplotlib-visualizations-the-master-plots-python/

- Three hints to build better data science presentations https://towardsdatascience.com/effective-data-science-presentations-caab621abc66

- Easily import (and work with) Jupyter notebooks in Visual Studio Code https://blogs.msdn.microsoft.com/pythonengineering/2018/11/08/data-science-with-python-in-visual-studio-code/

- A long guide to use itertools in Python
https://realpython.com/python-itertools/

If you have any feedback or cool resources, please share them in the comments!
When to install packages and their weight?
Tags: webdev, general, discuss
Published: 2018-12-11 18:30:08

---
title: When to install packages and their weight?
published: true
description: 
tags: web development,general,discussion
---

In web development, either working or not with a framework, the need for installing packages is almost inevitable. There are a few which are really indispensable for each and every person.

Part one of my question is, what should be the deciding factors on when to install an X or Y package or not (and just develop the necessary logic yourself).

Second part of my question is, do installed packages influence a lot of the web apps performance? For example, I once saw an image of a company called Spatie (which develops Laravel packages) create a web app for a client, and the list of packages they were installing was gigantic (my standards, like around 30 or 40).
Modern Day Wizard
Tags: wizard, tech, technology, programming
Published: 2018-12-11 17:56:59

---
title: Modern Day Wizard
published: true
description: A modern take of the definition of a wizard
tags: wizard, tech, technology, programming
---

Back in the medieval times, wizards were individuals who could wield power to perform acts that the [hoi polloi](https://www.merriam-webster.com/dictionary/hoi%20polloi) could assume to be attributed to magic. 
However, we know that they were not really wielding magic, but rather were skilled in the art of deception. 
For this reason, the word "wizard" does not only refer to people with magical powers, but can also refer to [a skillful person](https://www.merriam-webster.com/dictionary/wizard).

That being said, in the modern era people have taken a liking to seeing those who are technologically adept as something akin to wizards. 
This is probably due to the third law of [Clarke's three laws](https://en.wikipedia.org/wiki/Clarke%27s_three_laws) which states "any sufficiently advanced technology is indistinguishable from magic". 
Additionally, from *[Structure and Interpretation of Computer Programs](https://mitpress.mit.edu/sites/default/files/sicp/full-text/book/book-Z-H-9.html#%_chap_1)* there's a splendid description of how programming factors into the analogy of magic to technology:

> In effect, we conjure the spirits of the computer with our spells.

> A computational process is indeed much like a sorcerer's idea of a spirit.

> It cannot be seen or touched. 

> It is not composed of matter at all. 

> However, it is very real.

> It can perform intellectual work. 

> It can answer questions. 

> It can affect the world by disbursing money at a bank or by controlling a robot arm in a factory. 

> The programs we use to conjure processes are like a sorcerer's spells.

With this in mind, simply addressing one's self as a wizard without any other context tends to lean towards the medieval type of wizard rather than the kind that is well versed in technology. 
So, to better distinguish between the two I went with the title "Modern Day Wizard".
Dear future programmer
Tags: beginners, motivation, learning, career
Published: 2018-12-11 17:04:21

---
title: Dear future programmer
published: true
description: My version of what launch told me when I started.
tags: #beginner, #motivation, #learning, #career
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dakogtmoqaouui4ya9r7.jpg
---

Dear future programmer,

As programmers, we are problem solvers. In fact, we rarely have the solution to a problem the moment it is presented to us. It is the best and sometimes, most frustrating part of our job.

As a new programmer, you will face many unknown challenges. Learn to love period of time between when you are presented with a problem and the point at which you discover the solution. This period of time is where many things are unknown, a period of time where the solution is uncertain. This is also the period of time where the most learning occurs.

In this period of uncertainty, it is easy to become frustrated or angry. It's easy to give up here. You might let depression sink in because you feel like you'll never figure out your solution. Or even worse you'll try everything you find on Stack Overflow without giving the problem any real thought.

All of these feelings are very normal, but they keep you from thinking clearly. When the pressure of uncertainty starts to affect your mood, the best thing you can do for yourself is to take a break. Never quit, Never accept defeat but always allow yourself a break. Go for a walk. Go lift something. Hell, go play some video games. Disconnect from the problem for a period of time. When you do this, you'll find that when you return, you will be able to approach the problem with a fresh perspective.

You should be mindful of your attitude while learning to program. There is a saying taught to me by a Green Beret I had the pleasure to train with; Attitude is everything, keep yours positive. Our attitude affects others around us. Our attitude while learning also determines how willing others are to help us. If I'm always negative or if I always look and act frustrated when under pressure, very few people will want to work with me. However, if I approach challenges with a positive attitude, if I celebrate even small victories, and always thank others for their help, I will always have someone to help me when things get tough.

Whenever you start to feel frustrated, remember this: the uncomfortable feeling of not knowing the solution is only a precursor to the exhilaration of solving the problem. Embrace the suck. Don't let a negative attitude or frustration cause you to stop. Stop stopping. Progress, no matter how small, is still progress. 

Sincerely,

Someone who has been there.
Zero Config JavaScript App Prototyping with ParcelJS
Tags: javascript, bundler, parceljs
Published: 2018-12-11 16:46:24

---
title: Zero Config JavaScript App Prototyping with ParcelJS
published: true
description: Learn how to easily and quickly prototype JavaScript apps using ParcelJS.
tags: #javascript #bundler #parceljs
canonical_url: https://auth0.com/blog/zero-config-javascript-app-prototyping-with-parceljs/
---

Sometimes you don't need a framework like Vue or React to demonstrate an idea or concept in JavaScript. You just want a framework-agnostic, plain JavaScript development environment to play around with things like service workers, web workers, new JavaScript syntax, or IndexedDB, for example. 

In this blog post, you are going to learn how to quickly prototype plain JavaScript apps using ParcelJS to create such environment with zero config and low development overhead.

[Read on 📦](https://auth0.com/blog/zero-config-javascript-app-prototyping-with-parceljs/?utm_source=dev&utm_medium=sc&utm_campaign=zc_parceljs)

![Zero Config JavaScript App Prototyping with ParcelJS](https://thepracticaldev.s3.amazonaws.com/i/6jwjko159quy14wgk0xz.png)
A funny rap song about stereotypical startups
Tags: showdev, programming, culture
Published: 2018-12-11 16:03:23

---
title: A funny rap song about stereotypical startups
published: true
description: https://www.youtube.com/watch?v=JjjUj1ypVmI
tags: #showdev, #programming, #culture
---

Song url: https://www.youtube.com/watch?v=JjjUj1ypVmI

Quick background on the project: I'm a full time programmer and I love making rap music. I see a lot of humor in the profession/industry, and thought it would be fun to combine the two.

Here is what I'm planning on for next steps. I'm always open to feedback!

1. Paid ad on a popular Twitter account

2. Rent a GoPro and shoot a music video for one of the existing songs (if you have any tips on recording, please let me know - I have done some music video editing but don't know much about video cameras)
Help wanted to Enhance documentation of Web Atoms
Tags: javascript, mvvm, xamarinforms, contributorswanted
Published: 2018-12-11 15:48:38

---
title: Help wanted to Enhance documentation of Web Atoms
published: true
description: 
tags: javascript, mvvm, xamarin.forms, contributorswanted
---

# Web Atoms

Repository: https://github.com/neurospeech/web-atoms-core

Documentation: https://www.webatoms.in/samples.html

## Introduction

Web Atoms Core is a UI abstraction framework along with powerful MVVM pattern to design modern web and mobile applications.

Web Atoms" is an advanced MVVM framework to write cross platform applications in HTML5 and Xamarin.Forms. Unlike other frameworks, Web Atoms lets you divide User Interface logic in strict MVVM fashion and separates View in HTML5 and Xaml. Benefit of separating User interface logic in ViewModel is you can individually unit test view model to make sure your logic is consistent across platforms.

Also everything is transpiled into JavaScript, your View Model and Services remain in JavaScript and in browser it works flawlessly.

In Xamarin.Forms, Web Atoms package written C# helps you easily host JavaScript modules inside an application and entire User Interface is hosed via JavaScript.

## Contributors Wanted

The project is stable and in production use. Xamarin.Forms bits are in beta but almost ready for lightweight application.

I need some help in enhancement in documentation and writing some samples on it.
Work machines for the new year
Tags: discuss, gear, help
Published: 2018-12-11 15:12:36

Good morning!

When I left the Army, I left behind a screaming machine, Dell's Precision 5520 configured to the tune of about $2,500. Now I'm getting set to purchase 10 machines for our team, and I wanted the community's opinion. Let's call it your birthday gift to me. 😉

I really love my UHD display, and virtualization is a requirement. We aren't mining bitcoin at work or developing games, but most of us will prefer to run a couple of external displays (mixed HiDPI and standard). We'll all be running Windows 10, and that is for a separate discussion. I've not been given a price point, but I'm assuming $2,500 is on the high end.

What are you using?
Add form field esignatures in your .NET based PDF files
Tags: net, api, esignature, esign
Published: 2018-12-11 13:42:23

---
title: Add form field esignatures in your .NET based PDF files
published: true
description: post
tags: .NET, API, eSignature, eSign
---

GroupDocs.Signature for .NET is a document esigning API for .NET platform supporting a whole host of extremely useful and advanced features across different types of web, desktop and mobile applications. Following code snippet demonstrates how application developers can insert checkbox form field signature in a PDF document on .NET platform.

_// instantiate check-box form field signature
FormFieldSignature checkboxSignature = new PdfCheckboxFormFieldSignature("FieldCheckbox", true);
// instantiate options based on check-box form field signature
PdfFormFieldSignOptions checkboxOptions = new PdfFormFieldSignOptions(checkboxSignature)
{
    HorizontalAlignment = HorizontalAlignment.Left,
    VerticalAlignment = VerticalAlignment.Top,
    Margin = new Padding(120, 20, 0, 0),
    Height = 10,
    Width = 10
};
// sign document
string signedPath = handler.Sign("02_pages.pdf", checkboxOptions,
    new SaveOptions { OutputType = OutputType.String, OutputFileName = "Pdf_FormFields" });_
Pravega, 2016
Tags: hackathon, azure, data, machinelearning
Published: 2018-12-11 11:59:53

---
title: Pravega, 2016
published: true
description: Pravega, 2016
tags: #hackathon, #azure, #data, #ml
---


Pravega was a data science hackathon conducted in Indian Institute of Science, Bangalore, during January 2016. It was a solely Microsoft sponsored event, they were trying to push this new platform called Azure ML that took care of most of the heavy lifting when it came to Machine Learning and gave a simple user interface that you could use to learn/train data.

We were given a three hour lecture on how to use Machine Learning for preliminary tasks like prediction in case of linear regression and other easy to explain examples. At the end of the lecture, they asked us to find data-sets on http://data.gov.in and use those to show them valuable visualizations. It was an open topic, so you could pick any topic that you were comfortable with and draw conclusions on that topic.

The Azure ML platform took raw data from the user and learnt using the data based on the algorithm you decide. The learnt algorithm could then be exposed to a web service and hosted on the Azure cloud, which can be run at any time. We were supposed to, as part of this hackathon, claim raw data, learn from the data, expose the algorithm to a web service, optionally call the web service from a thin client and display the visualization to the user.

We picked blackouts as our area of interest, we looked at two data-sets one from data.gov.in which was rather useless and one from http://powercuts.in, which wouldn't allow you to download the reports. We later found a cached copy on a repository in GitHub of the same set. It had only around 292 rows of data which I assume was a factor in the prediction of the algorithm.

The intuition was to machine learn the different factors that influenced power cuts in India. A lot of factors such as whether it was planned/unplanned, the geolocation of the powercut, date, time and other factors were given as variables in the data-set. We used Azure ML to machine learn the report using the Two-Class Boosted Decision Tree algorithm. So the input data-set was divided into 2 parts, 70% and 30% respectively, 70% is used to train the model and the algorithm, and 30% is used to test the algorithm and get an accuracy score which can be used to compare how good the algorithm is working. We got an accuracy of 99.7% and that seemed a bit too good to be true at the time. We planned to expose this to a web service that listened for a timestamp and a location and given the two variables, it would tell you whether there could be a power blackout expected in the next 8 hours.

We did not win anything at this hackathon, but it was an amazing experience, the judges and the mentors we were given throughout the hackathon were extremely helpful and resourceful. I loved the time I spent at this hackathon and learnt a significant amount about machine learning and the Azure ML platform.
How many UI libraries are too many?
Tags: javascript
Published: 2018-12-11 11:25:34

![](https://thepracticaldev.s3.amazonaws.com/i/01a4wisnwig1r7q0v42b.gif)

from [Curated list of framework component libraries for UI styles/toolkit](https://github.com/anubhavsrivastava/awesome-ui-component-library)
Advent of Code 2018 - Day 2
Tags: java, example, live, advent
Published: 2018-12-11 10:58:07

---
title: Advent of Code 2018 - Day 2
published: true
description: Going though the process of solving the advent of code challenges for this year.
tags: Java, example, live, advent
---

{% youtube 9y3NQW4iaUA %}