teleren/devto huggingface dataset:
customizing chrome devtools
Tags: productivity
Published: 2018-06-13 15:09:19

---
title: customizing chrome devtools
published: true
description: customizing chrome devtools interface.
tags: #productivity
---

for frontend developers, devtools is as important as IDE or text editor. Personally, I change my IDE theme frequently & always try to experiment with different fonts. Chrome devtools offer two themes(light & dark). you can try different devtools themes from chrome webstore.

- [Zero Dark Matrix](https://chrome.google.com/webstore/detail/devtools-theme-zero-dark/bomhdjeadceaggdgfoefmpeafkjhegbo)
- [Material Design Theme](https://chrome.google.com/webstore/detail/material-design-theme-for/bhhaihcbledolbbigofbpegdbomoimfa?hl=en)
- [NightLion Dark](https://chrome.google.com/webstore/detail/devtools-theme-nightlion/nmiejanhomgcihofiaipfpgenalpjnmp)

One of the annoying things to me about chrome devtools is it doesn't allow you to change devtools font. Luckily we can override it with extensions. I have created an [extension](https://chrome.google.com/webstore/detail/devtools-font-changer/fikbcnlbgoafooldbkgikejejhaddajg) for customizing devtools fonts.

To use above mentioned extensions. you need to follow below steps.

- Navigate to [chrome://flags](chrome://flags) and enable *Developer Tools Experiments*
- Enable *Allow custom UI themes* in *Experiments tab* of chrome devtools settings.
How do you make time for your dev/tech projects?
Tags: discuss, productivity
Published: 2018-06-13 14:49:10

---
title: How do you make time for your dev/tech projects?
published: true
description: 
tags: discuss, productivity
---

## Question

I was about to write a long post about how I'm unable to allow a part of my free time to my dev projects (and other hobbies) but to avoid the "TL;DR" let's keep things simple: how do **you** make time for these things in your everyday life? Provide context if you can:
- How many hours do you work a day?
- How many do you sleep? (It does take time...)
- Do you have other unavoidable obligations? (family, parenting...)
- How much free time do you have, daily? (on average)
- How do you stay motivated when you have too little time and too much to do?

## Some context on my issue

- I do have free time, possibly more than most people, but I'm not able to use it efficiently and it still seems not enough
- The things I have to do keeps piling up (even things not related to dev projects)
- It makes me feel unproductive, which is discouraging... making me even more unproductive
- I have a tendency to reduce my sleeping hours to have more free time, no need to explain why it's not a good thing
Who do you follow on Github?
Tags: github, follow, developer, discuss
Published: 2018-06-13 14:48:18

---
title: Who do you follow on Github?
published: true
description: Just list down some developers you follow on github and why.
tags: github, follow, developer, discuss
---

List down some of the developers you follow on github and why. 

## Here's mine: 

1. shanselman - I'm a fan. Ever since I started working on C#, I've been following him. Even before I created my github account. 

2. getify - If you've read 'You-Dont-Know-JS', then you know this guy. You can either buy the book or view it in his github. 

3. lbugnion - I've been using MVVM Light for the longest time and I have learned a lot from his code.
How to set up different Webpack configurations for development and production
Tags: webpack, devops, webdev, production
Published: 2018-06-13 14:34:46

---
title: How to set up different Webpack configurations for development and production
published: true
description: 
tags: #webpack #devops #webdev #production
---
A common requirement with web applications is a different build process for development and production. This is easily achievable with task runners such as Gulp or Grunt, but with Webpack you'll need to take a different approach. Here I'll show you the most straight forward method I've found.

First, create 3 files: 
`webpack.config.dev.js`: This will be your Webpack config for development
`webpack.config.prod.js`: This will be your Webpack config for production
`webpack.config.js`: This will be your main Webpack config

The contents of `webpack.config.js` should be simply this:
```
module.exports = (env) => {
  return require(`./webpack.config.${env}.js`)
}
```
Now the `webpack` command will take an argument `env`, which tells it which config file to use.

Next, populate your `dev` and `prod` config files as you normally would your `webpack.config.js`. In `webpack.config.dev.js` you may want to run a dev server and inline all your styles, while in `webpack.config.prod.js` you may want to extract your styles to a CSS file, uglify your JS, and [deploy your build directory to a server](https://community.wia.io/d/9-how-to-gzip-and-deploy-your-front-end-assets-to-amazon-s3-with-webpack).

Now you can run `webpack --env=dev` or `webpack --env=prod` to run the respective webpack configs.

If you find that a lot of your configuration is duplicated between the two, you could create a fourth file called `webpack.config.base.js` or similar. In this file, set up your webpack config with all the rules that apply to both development and production. In your `dev` and `prod` config files, only include the rules that apply to that environment.
In order to merge the `base` config into the others, you'll need [webpack-merge](https://github.com/survivejs/webpack-merge).

`npm install webpack-merge`

In `webpack.config.dev.js` and `webpack.config.prod.js`, include the following at the top of the file:
```
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');
```
...and change
```
module.exports = {
  ...
};
```
to
```
module.exports = merge(baseConfig, {
  ...
});
```
Now you can run the same commands as above, and the `base` config will be merged into the others.
Does offering social login tangibly increase signups for a web app?
Tags: discuss, sociallogin, socialauthentication, returnofinvestment
Published: 2018-06-13 14:18:00

---
title: "Does offering social login tangibly increase signups for a web app?"
published: true
description: 
tags: discuss, social-login, social-authentication, return-of-investment
---
what is the Return of Investment integrating social authentication for a web app?
Startups and freelancing
Tags: startup, freelance, parttime
Published: 2018-06-13 14:07:45

---
title: Startups and freelancing
published: true
description: Joining a startup has risks, and one should be aware of them beforehand.
tags: #startups #freelance #part-time
---
If you have joined a startup or thinking of joining one and don't know much about the startup world, then this little advice is for you. Beware co-founders... :) This is for start-up employees strictly.
We hear all the time on internet news about startups that got funded in millions. What we don't hear are the hundreds of startups that tried and did not quite make it. There are many reasons for a startup for fail. 
1. An idea that does not solve a real world problem.
2. An idea that has a temporary value.
3. A team incapable of executing the idea.
4. Incorrect approach to solving a problem.
5. Overspending

and the list goes on...

Chances are that you are joining a startup because of an incentive either in form of better salary or an equity. There is a higher risk involved and it makes sense to be compensated better than a similar position at an established organization.

So, I learned this the hard way, when I joined a startup for a good compensation and dropped all side projects, part-time work because I thought now I didn't need to. Six months into the job, the startup burnt all the cash and I was without work and money. The idea isn't to do lesser at your full-time job, but it is of having a side income, in case things don't work out well for the startup. Do the following in order to make your finances safe:
1. Stay in touch with old employers, clients at good terms.
2. Keep working on small side project and maintain a steady pipeline of work.
3. Keep learning.
4. Know your capacity.
How to make many http requests with react
Tags: discuss, help, fetchapi, react
Published: 2018-06-13 13:47:42

---
title: How to make many http requests with react
published: true
description: 
tags: discuss, help, fetchAPI, react
---

Hi, please i'm stuck.
is somebody knows how to make many request in a react component or route?

```
componentDidMount = () => {
    const { match: { params } } = this.props
    fetch(`/w/${params.work}`)
      .then(res => res.json())
      .then(work => this.setState({ work }))

    fetch('/works')
      .then(res => res.json())
      .then(otherWorks => this.setState({ otherWorks }))
}

```
something like this that works.
I'm a beginner with **React** so i don't really want things like **Redux**
i just want a beginner way.The first fetch work but not the second
Top 11 Ways to Use Mobile Forms
Tags: mobileformsoftware
Published: 2018-06-13 13:35:57

---
title: Top 11 Ways to Use Mobile Forms
published: true
description: Forms are more essential in every business. In this digital age still, most of the businesses are into Paper Forms. You know That Paperwork is 30% slower and 60% more errors compared to Mobile Forms.

tags: mobile form software,
---
Forms are more essential in every business. In this digital age still, most of the businesses are into Paper Forms. You know That Paperwork is 30% slower and 60% more errors compared to Mobile Forms.

What can I do with Mobile Forms? You can Create your own Digital Form which is a complete replicate of your Paper form. You can share your created form to your workforce. You can do instant approvals. You can get various reports based on your needs. Mostly as all the Mobile Forms Application are Cloud-Based you can access any forms you need at any time. So these are some least possibilities that you can do with Mobile Forms.

Expectations in Mobile Forms Application? The application must work without any coding knowledge. Having a Drag and Drop feature will be easy to create your desired form. The validation of the forms is mandatory for the application. Having Mobile Application will be an added advantage and easy to share and access the Forms for your workforce. Check on the go approval process and reports structure. These are our suggested expectations for a Mobile Form Application.

Mobile Forms are making their own way in the market. Comparably It can perform a lot better than Paper forms at any business. These Mobile Forms gives you more access and leverage in your business to understand your insights and analytics better. Moreover, every business has various form needs. So is it really important to move your business to Mobile Forms? It’s not about the importance of Mobile Forms, It’s Necessary for a business who wants to make themselves unique, improve their customer satisfaction and to allow themselves to rectify or clear their errors further in helping to create a new strategy for your better business pipeline. Check out our Infographic and find some of the top ways Mobile Forms can be used by your business…… https://goo.gl/aV9cJp

![Top 11 Ways to Use Mobile Forms](https://thepracticaldev.s3.amazonaws.com/i/6jl0svc2heyeqr4vpted.png)
Let discuss Software License
Tags: discuss, product, dev, software
Published: 2018-06-13 12:47:37

---
title: Let discuss Software License
published: true
description:  Software Licensing
tags: #discuss #product #dev #software
---

![software licensiing](https://s8333.pcdn.co/wp-content/uploads/2015/08/software-licensing-product-image.png)

Software licensing is one of the important things most developers neglect, especially when cloning, working or building  an OSS. 

* What is Software license 
* Types 
* Why you should have one
* And Advantages.
Another build system for Cpp
Tags: cpp
Published: 2018-06-13 09:32:34

---
title: Another build system for Cpp
published: true
description: 
tags: cpp
---

I think scripting tool like CMake is too complex for the most C++ project, so I create a project called: Cdog.

Here is link [cdog](https://github.com/dannypsnl/cdog).

I would like to know does it useful?

How to use:

1. create a project dir.
  `mkdir hello && cd hello`
2. create a sub dir `src`
  `mkdir src`
3. create a config file called `cdog.toml` & type following message into it
  ```toml
  [project]
  src = "src" # source
  bin = "build" # output dir
  ```
4. At dir `hello` execute `cdog build`

That's all.

Option `src` will become include dir. So you can `#include "add.h"` if you have a `add.h` under your source dir. If you have `add.cc` under the same path, Cdog will try to compile it & add the objectfile into final binary.

Compile result will appear at option bin's setting.
What have you automated? 
Tags: discuss, automation, automate
Published: 2018-06-13 09:09:57

---
title: What have you automated? 
published: true
description: Lets talk about the things you automated
tags: discuss, automation, automate
---

_You can talk about everyday stuff, fun things, anything really... Big or small..._

I'll start: a year ago, I automated apartment hunting and I'm happy to report I found one. To do it, I built multiple scrappers in nodejs. Every time there was a new apartment matching my requirements, it would notify me and add a new line to a google spreadsheet.
Learn to defend your decisions
Tags: productivity, career, programming, learning
Published: 2018-06-13 06:05:23

---
title: Learn to defend your decisions
published: true
description: Learn to defend your decisions and why it is important.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lzlp0h39r70c7f11bwla.png
tags: productivity, career, programming, learning
---

One thing I learned recently which really helped me grow as an engineer is to learn how to defend my decisions.  When you make an choice on a framework to use, an architecture pattern, or the style of your code, it is very important that you can defend why you made that decision.  I have noticed that unseasoned or junior developers can't really justify why they made their choice. Typical answers when grilled includes, "That's how it's been done in other places in the codebase", "It works", "We have always been doing this", or "That's what everyone else does".

How does being able to defend your action help you grow? For every decision you make while designing and developing, you should be asking yourself how would other people poke holes in my choice. If they do find a flaw, how would I be able to explain to them that it's okay or that I've thought about it and I've got a solution later.  A good developer will mostly likely be able to defend their decision with some hesitation if grilled on the spot.  An excellent developer would have already prototype the alternatives, vetted through any flaws well in advance and be able to defend their position when questioned.  You will grow tremendously when you do this. You will become more confident in your choices.  It's not easy and it takes a lot of time but it is rewarding. You might end up going down the rabbit hole that is full of tangential tracks but it will be worth it to your growth.

There is a good technique you can use to help achieve more confidence in defending your decisions. When you make a choice you can try to ask your self why. Ask yourself why you are doing this, why is this better than the alternatives, why is it important, and keep asking why to drill down to the fundamentals.  Learn to be curious, learn to see alternatives, and learn to be humble.  You may have put in countless hours to learn every bit of defense for your decision but always be prepared to acknowledge you may not know everything and someone may provide a better solution.

A note for those doing the grilling, be strict but be fair. There's no need to put others down if they can't completely defend their choice but use it as an opportunity for them to learn.
Floating Point Imprecision
Tags: python, floats, help
Published: 2018-06-13 04:59:02

---
title: Floating Point Imprecision
published: true
description: 
tags: python, floats, help
---

# What is Floating point imprecision?
These two expressions in python are suppose to produce the same result. But why don't they do that?

```
>>> 7 / 3 * 3
7.0

>>> 1 / 3 * 7 * 3
6.999999999999999
```


# When should you be careful about floating point imprecision?
Pizza Or Not a Pizza
Tags: python, opensource, apis, showdev
Published: 2018-06-13 00:28:37

---
title: Pizza Or Not a Pizza
published: true
description: I just created this small python script after getting inspired by Silicon Valley Show. This script uses machine Learning to determine whether its a pizza or not a pizza. Btw the script can also be customized to tell whether your pizza has pineapples or not.
tags: #python, #open-source , #apis, showdev
---
Why does the data property on a Vue component must be a function?
Tags: javascript, vue, beginners, explainlikeimfive
Published: 2018-07-20 19:23:43

---
title: Why does the data property on a Vue component must be a function?
published: true
tags: javascript,vuejs,beginners,explainlikeimfive
cover_image: https://winnercrespo.com/assets/images/2018-6-13-why-does-the-data-property-on-a-vue-component-must-be-a-function.jpeg
canonical_url: https://winnercrespo.com/why-does-the-data-property-on-a-vue-component-must-be-a-function/
---

If you don’t get familiar with the basic rules of a framework (programming language, tool, etc) when starting to use it, things won’t work as expected, since it wasn’t conceived that way.

While using Vue for the first time, I made this by mistake:

```js
data: {
  message: 'Some Message'
}
```

then, I got the following warning message:

[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.

What you should do instead is:

```js
data: function() {
  return {
    message: 'Some Message'
  };
}
```

So, the reason why Vue forces the data property to be a function is that each instance of a component should have its own data object. If we don’t do that, all instances will be sharing the same object and every time we change something, it will be reflected in all instances.

Check out what the [Vue’s documentation](https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function) says about it and a quick live example.

I hope this helps.
Getting Notifications for New GitHub Project Releases
Tags: development, webdev, opensource
Published: 2018-06-14 21:29:27

---
title: Getting Notifications for New GitHub Project Releases
published: true
tags: Development,webdev,opensource
canonical_url: https://www.raymondcamden.com/2018/06/13/getting-notifications-for-new-github-project-releases
---

This is one more post covering something that I assume most folks knew already. I just discovered this a few weeks ago myself. It definitely isn’t new, and in fact, you can find a StackOverflow answer covering this from [two years ago](https://stackoverflow.com/questions/20839622/notifications-for-new-github-project-releases). But as I usually do - I share what I learn since I figure I can’t be the only one who missed this.

So as the title says - how can you get notifications for new releases of a project at GitHub? Turns out every repo has an Atom feed available at:

https://github.com/(org or user)/(repo)/releases.atom

So for example, here is the feed for one of my favorite new projects, [VuePress](https://vuepress.vuejs.org/):

[https://github.com/vuejs/vuepress/releases.atom](https://github.com/vuejs/vuepress/releases.atom)

And that’s really it. Of course, the ‘notifications’ aspect involves reading the Atom feed and figuring out when something new has been added. Luckily, [IFTTT](https://ifttt.com/discover) has a service for this. If you’ve never used it, IFTTT is essentially an “automation” service for the web with hundreds of plugins/connections/etc for various services. One of the simplest solutions they have is a “email me on new item in a RSS feed” service. That works great for blogs that don’t have a subscription feature and it works great here as well.

Simply [create a new applet](https://ifttt.com/create) and on the first step, select RSS Feed:

![I like arrows](https://static.raymondcamden.com/images/2018/05/ifttt1.jpg)

Then select “New feed item”:

![I love arrows](https://static.raymondcamden.com/images/2018/05/ifttt2.jpg)

And then paste in the feed URL:

![Sorry, no arrows](https://static.raymondcamden.com/images/2018/05/ifttt3.jpg)

Click “Create trigger” and then you move onto the “that” aspect (i.e. what should happen when a new item appears in the feed). On the action service page, select email:

![Woot the arrows are back!](https://static.raymondcamden.com/images/2018/05/ifttt4.jpg)

This only gives you one option (so I’ll skip the screenshot), “Send me an email”. You can now customize the email. I suggest adding a prefix to the Subject to make it obvious what is going on:

![Sigh, no arrows](https://static.raymondcamden.com/images/2018/05/ifttt5.jpg)

You can customize more there too if you want. Finally click “Create action”. You’ll get to the review page and you want to make sure you then hit the “Finish” button.

And that’s it. I hope this is helpful!
Help me validate blog ideas!
Tags: cnc2018, blogmore, blogging
Published: 2018-01-27 17:17:06

---
title: Help me validate blog ideas!
published: true
description: Help me validate blog ideas!
tags: CNC2018, BlogMore, Blogging
---

I'm going to start blogging in 2018. I guess this post is a good start!

I joined the #BlogMore track in the [#CNC2018](https://2018.codenewbie.org/) project. The pre-mission was to read about the three different categories of blog posts, and find a great post that fit each category. The three categories are tutorial, explainer, and project: a tutorial post walks the reader through accomplishing a specific task, an explainer post explains some general concept, and a project post describes a project that the author is working on. I turned that "assignment" in a couple days ago, and now have my first mission!

My first mission is to brainstorm ten ideas, narrow it down to five, and then get feedback from the community on these five ideas to narrow it down to the best three. I've narrowed my brainstorm down to five, but now I need your help to validate my ideas! Here are the five ideas I came up with:

Tutorial: GitHub
How to set up a new project on [GitHub](http://www.github.com), including best practices for READMEs, licenses, git branching, etc.

Tutorial: React
Creating your first react app using CRA ([create-react-app](https://www.npmjs.com/package/create-react-app)), and describing the advantages and disadvantages to using CRA.

Explainer: REPL
Defining a REPL (Read-Evaluate-Print Loop), giving examples of common ones, and why you might want to use one.

Project: Portfolio
Showing the current state of my personal "portfolio" site [joncass.com](http://www.joncass.com), improvements I want to make, and walking through the steps I take to change it.

Project: Crystal Football
A few months ago, I released an app called [Crystal Football](https://assistant.google.com/services/a/id/53bc5e1949cf5456/) to the Google Assistant directory. This post would explain that process, and walk through improvements that I would like to make or am making.

So that's it! I've also posted a poll in the CNC2018 Facebook group. I'd love your feedback on what you'd like to see and why - vote in the Facebook poll or comment below.

Thanks for reading!