teleren/devto huggingface dataset:
How to Use New  React Context API Detailed
Tags: javascript, react, beginners, showdev
Published: 2018-04-05 13:27:43

---
title: How to Use New  React Context API Detailed
published: true
description: how react context API works consumer and provider 
tags: javascript,react,beginners,showdev
---
![context api](https://thepracticaldev.s3.amazonaws.com/i/w3z7iicoq435jopfx2lh.png)

 React Context API is available in the react16.3 so let's build a counter using 
 Context API.

Context API helps us to pass down the data to the components without the use of props at every component.

In our counter app, we only pass down one level.So let's install a react app using create-react-app 

```
npm install -g create-react-app
create-react-app newContext
cd newContext
npm start  //to start dev server
```

Now open with your code editor.

Let us create a new file context.js add these below code.

{% gist https://gist.github.com/saigowthamr/cadf4ba081d01c6c1342dcfd865611eb %}

In above code First, we imported React from its library.

on line 7 we created a context using the createContext method and passed initial state.

In Below code first, we are using props to pass the value.

{% gist https://gist.github.com/saigowthamr/09b1de84a4cabbba4d0894d7f385ef37 %}

Now we are replacing it with context API Instead of using props in the Counter component.

First, we need to import NumberContext from our context.js file

{% gist https://gist.github.com/saigowthamr/610f0e21b8a2889f47d6edfebe302a65 %}

In line 39 above code tells first we are providing value to our component by wrapping our Counter component with the NumberContext.Provider.

Now, we can use it in our Counter component by using Consumer wrapper.

That's all in react documentation says Context is designed to share data that can be considered “global” for a tree of React components.



[Code repository](https://github.com/saigowthamr/React-context-api)

Checkout --> [Best laptops for programming students](https://reactgo.com/best-programming-laptops/)
When you realize you’re at the bottom of a very steep gradient.
Tags: career, beginners, dev
Published: 2018-04-05 13:08:07

---
title: When you realize you’re at the bottom of a very steep gradient.
published: true
description: Overcoming thoughts of failure and self doubt
tags: career, beginner, dev
---
FRI 02:56

“i'm so mad
i've been doing a LOT of work planning out the way different classes need to interact with each other, and i'm realizing that i have my Trade model written all wrong
and that i really do need to being working with rspec and writing tests to validate my code AS i write it”
👍
1

“It seems like something everyone realizes as they learn
There needs to be unit tests for each line or function
I haven’t even written my own”

“i have way too much work to do with this thing god damnit”

“Ur thinkikng like a soft dev
Modular functions”

“i am so lucky that i have remote job”

“I think what you have is impressive as a personal project”

“it's not what it should be tho”

“I realize writing software is like polishing a rock”

“omg true”

“No but don’t let the ideal overwhelm or kill you”

“yeah
i'm trying to rewrite T and changing Item and adding S
if i can't get anywhee with it i'm going back to writing U”

“Very few people bang out foolproof stuff with short periods of work
I realize with the company I’m working at now the amount of code and features they have was iterated so many times in small ways
Over the last few years”

“yah?”

“There’s features that were slapped together over hack days that became major business features
The ones not written well or well considered were always maddening to the senior dev because improving it was like changing the wheels on a moving car
But it’s the nature of the beast apparently
The only benefit of this was that they committed and deployed frequently so there were fewer merge conflicts”
Explain Functional Programming Like I'm Five
Tags: explainlikeimfive
Published: 2018-04-05 09:16:25

---
title: Explain Functional Programming Like I'm Five
published: true
tags: explainlikeimfive
---

I have been using the Java 8 streams a lot for the past one year without knowing the underlying concepts. I'd be grateful if someone elaborates on this topic.
Explain "Data Crunching" Like I'm Five
Tags: explainlikeimfive, data, crunching, database
Published: 2018-04-05 08:37:10

---
title: Explain "Data Crunching" Like I'm Five
published: true
tags: explainlikeimfive, data, crunching, database
---

Is there any difference between **Data Crunching** and **Database Crunching**? If you know any good resources where I can read more about it please share.
Announcing a side project: DeveloperPosters.com
Tags: showdev, inspiration, projects, design
Published: 2018-04-05 06:37:06

---
title: Announcing a side project: DeveloperPosters.com
published: true
description: I'm proud to announce a new side project, beautiful and inspiring posters for software engineers.
tags: showdev, inspiration, projects, design
---

Hi Everyone! 

Sam here, some of you might know me for my *Junior Dev Diaries* series of blog posts, or my interview series *Dev Chats*. I've been posting on here about nine months or so. After doing these blog series (which are still ongoing), I came across some core truths to what makes a great software engineer. 

So, my partner, [HelloMissPotter](https://twitter.com/HelloMissPotter), and I created some posters for software engineers. These beautiful and inspiring posters are perfect for your home, office or workplace. 

 ![](https://thepracticaldev.s3.amazonaws.com/i/yuxt0nmfmfckqyklw4ec.png)


This month we are launching the online shop where you can buy a set for your office, (or nag your office manager to get a set ;)). 

You can visit the website at [DeveloperPosters.com](https://developerposters.com/). We've started with four posters (#MVP) and plan to add more.

Since I love Dev.to so much, I created a special code for you all. The code is **DEVTOLOVE**, and that'll give you 10% off your total order. 

I want to finish by saying thank you, for one, being so welcoming and engaging to me in the community, and two, for letting me share this with you. I really do hope you consider supporting this project, and support everyone on Dev.to's mission of improving the world's software engineers. 

Much love,
Sam
How to deploy Ember app to kubernetes
Tags: kubernetes, ember, javascript, docker
Published: 2018-04-05 06:15:33

---
title: How to deploy Ember app to kubernetes
published: true
description: 
tags: #kubernetes #emberjs #javascript #docker
---

As part of my unfinished project [observerio](github.com/observerio/observer-server) I were working on my first ember dashboard and when I finished to work on prototype, decided to deploy it as pod in kubernetes cluster in digitalocean. Why kubernetes probably it's saving a lot of time if you are solo developer and don't have enough money to support the non profitable idea.

On the first deploy I found that it was pretty easy to build released version of ember app but on open the dashboard in browser I found that my routing is not working properly. After googling the solution someone suggested to change nginx settings on serve ember app.

[Docker.released](https://github.com/observerio/observer-server/blob/master/web/Dockerfile.release) used by pod:

```Dockerfile
FROM alpine:3.6

COPY dist/ /app

WORKDIR /app

CMD ["tail", "-f", "/dev/null"]

```

How to change nginx settings? I started to think about it. I didn't know internal stuff in k8s and the next step for me was to explore a bit the containers from running processes in kubernetes cluster. In ingress pod I found the nginx template that used on serving my ember pod.
 
[nginx.tmpl](https://github.com/kubernetes/ingress-nginx/blob/master/rootfs/etc/nginx/template/nginx.tmpl)

To make sure that I would have the same template as installed ingress container, I copied [nginx.tmpl](https://github.com/observerio/observer-server/blob/master/deployment/app-deploy/ingress/templates/nginx.tmpl#L458) from the container and placed there(line: 458):

```
{{ if and (eq $path "/") (eq $server.Hostname "observer.rubyforce.co") }}
            try_files $uri $uri/ /index.html?/$request_uri;
{{ end }}
```

Then changed ingress controller to use the new template via config map, example of [Deployment](https://github.com/observerio/observer-server/blob/master/deployment/app-deploy/ingress/03-deployment.yml#L67)

Probably it could be helpful for someone as well.

Thanks for reading!
How my greenfield projects fall into muddy messes…
Published: 2018-04-05 05:16:41

---
title: How my greenfield projects fall into muddy messes…
published: true
description: Tips on keeping a greenfield project 'green'
---

![Lost it's head](https://s18.postimg.org/h4pzhvwxl/Screen_Shot_2018-04-04_at_11.44.15_PM.png)

When I started off as a developer, I remember the lead architect lamenting the fact that he hadn’t been on a“greenfield” project in a while - as he was scrolling through 30,000 lines of CSS code in one file…

***7 years later, I ask myself the question, “Have I learned how to keep a greenfield project ‘green’?”***

In the software world, the term “greenfield” refers to a brand new project, a lush undisturbed land, clean and un-trampled. In this place, a coder can lay down new laws, foundation, and ideals. He hopes people will come and view its beauty, maintainability, and scalability for years to come. Unfortunately, in one or two years time, reality comes crashing in with a vengeance. The project is no longer a “green field”, but rather a muddy mess.

***So what causes this? Here’s my opinion from my experience:***

1. Narrow deadlines provide easy excuses to compromise on code quality.
1. Tests fall behind because they’re hard to write and there’s not enough time.
1. Team leads are too embarrassed or not skilled enough for code reviews.
1. Scope creep messes up the most well-laid abstractions.

So how do you combat “muddy mess” syndrome? Ideally, you handle it BEFORE the technical debt accrues, but that hardly ever realistically happens. First of all, accept the fact that you WILL have to let go of some of your rules. Regardless, enumerate the most important ones (like testing) and hold fast to them. Communicate those principles. Don’t be afraid to say “that code is not very good”. Do these things, and next thing you know, you’ll be promoted to engineering lead, and you can slowly melt into middle management.

---

This is original content from [snaptest.io](https://www.snaptest.io), made because I needed to get tests made quickly and easily for many “muddy mess” projects.
Is coding a work-for-free popularity contest?
Tags: discuss, career
Published: 2018-04-05 03:21:18

---
title: Is coding a work-for-free popularity contest?
published: true
tags: discuss, career
---

I was a career-changer. In 2015, I stopped being a dev to go to sales. I won't get into that adventure here, but as I'm trying to figure out where the next chapter in my career should go, most employers would try to pigeonhole me into being a dev and I can't really seem to find consulting work where my target customer just sees me as the Code Guy.

Anyway, one reason I changed out of development was that there were always 2 subtly-implied qualities to get a better dev role than what I had at the time:

1. Work for free (in your free time)
2. Be real popular

Building a "brand" takes lots of time, and most of that seems to require your free time to do. In another post, someone said there's an expectation that you're devoting 100% of your time towards development, and the older I get, the less I want to.

Is it even realistic to advance your career anymore without obsessing over the latest technology, meetups, speaking events, conferences, etc.?
Explain to me this big difference between SAPI5 and Google speech synthesizer voices like I am five.
Tags: explainlikeimfive, speech, synthesis
Published: 2018-04-05 01:43:46

---
title: Explain to me this big difference between SAPI5 and Google speech synthesizer voices like I am five.
published: true
description: Google voices allow text to be spoken using other language voices, causing an accent.
tags: explainlikeimfive, speech, synthesis
---

Traditional Windows SAPI5 speech synthesis voices are language specific. The voice is designed/recorded to be a specific language. This means that if you feed English text to a French voice it will read and pronounce it as if it were French, making it sound idiotic.

Google has a speech synthesis service as well, available in Chrome browser and as API and it behaves a lot differently. If you feed English text to a Dutch  Google voice, it speaks/pronounces it properly but it gets a strong Dutch accent. This is not possible with traditional text to speech.

Please describe both processes and explain to me like I am 5 the fundamental difference between them that is responsible for this.

Thanks!
Celebrating the new.
Tags: goals, 2018
Published: 2018-01-03 21:31:25

---
title: Celebrating the new.
published: true
description: 
tags: #goals #2018
---
![2018](https://fibraworld.org/wp-content/uploads/2016/03/2018-text-1367X593.png)
2017 gave me many experiences like in my feelings, professional and working.
I lived challenges where the people around me showed me like make things another form, I saw other perspectives and built my personality.
Is incredible like all in one instant change your life, change yourself and your goals but all in your life is an experience.
In the professional topic, the most interesting is like studying make me a better person, Like an engineer, I can propose better solutions and faster.
Nos my ambient work now is awesome my partners and my boss are the other planet, it is the demonstration that all is possible with work and determination.
and de last one but didn't less important my family... my family always being next to me.
The energy that you can feel in this year is great, comes with many things in special in yourself goals, This blog is more less as daily personal, but I hope to write more times and share with them.
thanks for reading and comment.
See you later.
Do you pay for online courses or ebooks?
Tags: discuss, courses, ebook
Published: 2018-04-04 23:32:27

---
title: Do you pay for online courses or ebooks?
published: true
description: To spend or not to spend.
tags: discuss, courses, ebook
---

The internet is full of Hello World examples, there is an abundance of documentation and example projects on GitHub, thousands of development blogs/networks like dev.to and you can learn anything from YouTube.

On the other side of the spectrum there are online courses on sites like udemy that you do pay for. These platforms hand out a certificate when you completed a course. You can also buy books and/or ebooks.

Do you pay for knowledge? Do you ever buy (e)books or spend money on a course? Was this a good investment or did you waste your money? What makes/made you decide to give it a try? Do you recommend it to others? What is your story?

Thanks.
Did they remove ratings from the npmjs.org website?
Tags: npm, discuss
Published: 2018-04-04 22:40:31

---
title: Did they remove ratings from the npmjs.org website?
published: true
description: Unable to find 'star button' or list of starred packages.
tags: npm, discuss
---

On the NPM website there used to be a little star located on the left side of the package title that would star the package when you click it. On my profile was a list with all the packages I starred.  The website has changed in design a few weeks back and neither of them are still there.

Did they remove it, am I blind or is it a new toggle visibility account setting somewhere?

Running *npm stars* as well as *npm star packagename* still work.
Crypto Is Hard
Tags: cryptography, documentation, security
Published: 2018-04-04 20:02:22

---
title: Crypto Is Hard
published: true
description: Good security software is hard.  Why aren't there more beginner resources?
tags: cryptography, documentation, security
---

Software is easy to get wrong, and security software needs to be right.  This makes good security software hard.

It's especially hard for beginners, because (in my experience) good documentation, examples, and tutorials for common, "hello world" level security software development that actually does things right is nearly nonexistent.  Try finding an example of how to write a tool that takes a password to encrypt and decrypt text using ChaCha20, for instance, or even AES, that is comprehensible to someone who has been writing web applications, test frameworks, and Unix command line tools.

This is a big problem, but nobody seems to have noticed, or to care.
Problem Solving: A Hunch
Tags: problemsolving, analysis
Published: 2018-04-04 21:40:15

---
title: Problem Solving: A Hunch
published: true
description: 
tags: problem solving, analysis
canonical_url: http://smartpuffin.com/problem-solving-a-hunch/
---

<i>This post was originally published in my blog <a href="http://smartpuffin.com/problem-solving-a-hunch/">smartpuffin.com</a>.</i>

<hr/>

I call it a hunch.

Sometimes I sense something's wrong.

There is no visible indicator of it. Devs say it's going well, products say it's on time and under control, specialists say it's all aligned and agreed on.


But I sense something.

Then I ask a question. I am always embarassed to ask, because everyone says it's fine, they all already agreed, any why am I even bothering to double check?

But when they hear my questions, it turns out they didn't think of a problem. Or they have different "on times" in mind. Or they understand the agreement differently. Or they made very different assumptions.

It happens every week. I call it a hunch.
What is Each Language For?
Tags: programminglanguages, community, interoperability, discuss
Published: 2018-04-04 20:12:08

---
title: What is Each Language For?
published: true
description: Does each language's community have a central question it tries to answer?
tags: programming languages, community, interoperability, discuss
---

In theory, any modern programming language could be used for almost any task.  Why, then, are there so many?  It may be interesting to see if, at some point, some language begins to take over the niches.  At some point, there may exist a universal translator for programming languages, so everyone can read and write any code in their own preferred language.  For now, though, it seems that one reason there are so many programming languages is that their respective communities like to focus on different questions.  

Here are some of the questions that seem to occupy certain programming language communities:

* **Ruby**: What is the best way to do and think about development?
* **Python**: How can we make our code as readable as possible?
* **Java**: How can we structure our code to work together at enterprise scale?
* **Clojure**: How can we rethink what data is and how our software relates to it?
* **JavaScript**: How can we benefit from each other's work at web scale?

Do you agree that these questions are what these programming languages' communities tend to focus on?  What are some others?

Do you think programming will converge on a single language or interoperability paradigm in the future?
Intro to the CSS Box Model.
Tags: css, beginners, freecodecamp
Published: 2018-04-04 18:00:26

---
title: Intro to the CSS Box Model.
published: true
tags: css,beginners-guide,freecodecamp
canonical_url: https://medium.com/@JohnKennedy9147/intro-to-the-css-box-model-42781d331833
---

_I originally wrote this as a contribution to the freeCodeCamp_ [_Guide_](https://guide.freecodecamp.org/) _project. You can view the article as it stands_ [_here_](https://guide.freecodecamp.org/css/the-box-model/)_. You can read about the aims of the project in Quincy’s_ [_article_](https://medium.freecodecamp.org/heres-a-new-way-to-learn-coding-tools-and-concepts-right-when-you-need-them-ee82d15c576d) _from Sept 2017. Contributors to the project are always welcomed._

Understanding the CSS Box Model is crucial to being able to correctly layout a webpage.  
  
When a browser renders (draws) a webpage each element, for example a piece of text or an image, is drawn as a rectangular box following the rules of the CSS Box Model.  
  
At the centre of the box is the content itself, which takes up a certain height and width. This region is known as the **Content Area**. The size of the content area can be automatically determined, or you can explicitly set the size of height and width. (see note below regarding `box-sizing`)

![](https://cdn-images-1.medium.com/max/343/1*_r62OrD_SdDYYjccCfKGLA.jpeg)

Around the Content Area this is a region known as **Padding Area**. The size of the `padding` can be the same all around, or you can set individually for top, bottom, left and right padding. If you are using a background for the element, the background will extend into the Padding Area.

![](https://cdn-images-1.medium.com/max/343/1*isGpZLL9d9aaW3BGrpq37g.jpeg)

Next there is a **Border Area**. This creates a border around the element and its padding. You can set thickness, colour and style of the border. Style options include none, solid, dashed, dotted and several others. (see note below regarding `box-sizing`)

![](https://cdn-images-1.medium.com/max/399/1*Y2wKEqxt3o1RWyyXLbWmCg.jpeg)

Finally there is the **Margin Area**. This creates clear space around the element, padding and border. Again you can individually set top, bottom, left and right margins. Under certain circumstances margin collapsing occurs and the margins between adjacent elements may be shared.

![](https://cdn-images-1.medium.com/max/399/1*LCWYi8UVXqF24rgU-8sPHA.jpeg)

**`Box-Sizing` Property**  
The default for this property is `content-box`. If you use the default then the box model will allow the author to specify the size of the content area. However, it is possible to use these to instead specify the size of the border area. This is done by changing `box-sizing` property to `border-box`. This can sometimes make layouts easier. You can set the `box-sizing` property per element as desired.
Convert JSON to CSV using JSON path expressions with Konbert
Tags: csv, json, convert, data
Published: 2018-04-04 16:35:33

---
title: Convert JSON to CSV using JSON path expressions with Konbert
published: true
description: Flatten and convert complex JSON documents to CSV using simple JSON path expressions
tags: csv,json,convert,data
---

JSON paths are a very simple and intuitive way to reference elements in JSON documents, similar to CSS selectors, but for JSON.

This is how it works, if you had a document like this:

```json
[
  {
    "name": "Christopher",
    "age": "23",
  },
  {
    "name": "Michael",
    "age": "45",
  }
]
```

You could extract the names of all the person records with this expression:

```js
$.*.name
```

where:

* `$` references the root element, in this case an array
* `*` is to repeat the expression, so it will match on each object of the array
* `name` is to get the name property of the object

So if you used this expression to convert to CSV, this would result in:

```csv
name
Christopher
Michael
```

This is very useful when you need to flatten very complex JSON documents, and you only want to extract a few fields. 

Go ahead and try our custom [JSON to CSV conversion tool](https://konbert.com/convert/json/to/csv). Any feedback is welcome!
Get dependencies written in package.json from JavaScript code
Tags: javascript, node, beginners
Published: 2018-04-04 16:17:45

---
title: Get dependencies written in package.json from JavaScript code
published: true
description: How to get dependencies written in package.json from JavaScript code
tags: javascript,node,beginners
---

This is just a memo about how to refer dependencies written in `package.json` from JavaScript code.


```javascript
import pkg from './package.json';

const dependencies = Object.keys(pkg.dependencies);
const devDependencies = Object.keys(pkg.devDependencies);
const peerDependencies = Object.keys(pkg.peerDependencies);
```

It would be useful in case of specifying `externals` in `rollup.config.js`.

```javascript
{
  external: Object.keys(pkg.dependencies)
  ...
}
```