teleren/devto huggingface dataset:
Daily Challenge #106 - Average Fuel Consumption
Tags: challenge
Published: 2019-11-03 14:23:37

---
title: Daily Challenge #106 - Average Fuel Consumption
published: true
series: Daily Challenge
description: 
tags: challenge
---
You've just returned from a road trip and are curious about your car's fuel consumption during the trip. Unfortunately, you didn't reset the counter before leaving home. You do know the average consumption of your car and the previous distance you have traveled in that vehicle. 

Write a function that takes two pairs of input `(before, after)` and returns the calculated average fuel consumption of your car during your trip, rounded to the first decimal place. 

Both pairs consist of two valid numbers:
- average fuel consumption of the car (l/100km, float)
- previous distance traveled (km, integer)

 
<pre>
Example:
      BEFORE                   AFTER                  DURING
avg. cons, distance     avg. cons, distance         avg. cons
[l/100km]    [km]       [l/100km]    [km]           [l/100km]
[   7.9  ,   100  ]  ,  [   7.0  ,   200  ]    -->     6.1
[   7.9  ,   500  ]  ,  [   7.0  ,   600  ]    -->     2.5
[   7.9  ,   100  ]  ,  [   7.0  ,   600  ]    -->     6.8
</pre>

Have fun coding!
***
_Today's challenge comes from Anter69 on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Suspend pinch-zoom on React Hooks
Tags: react, reacthooks, javascript
Published: 2019-11-03 14:21:17

I create hooks that suspend mobile device pinch zoom.
This behavior not recommended, but we need sometime.

```js
const useDisablePinchZoomEffect = () => {
  useEffect(() => {
    const disablePinchZoom = (e) => {
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    }
    document.addEventListener("touchmove", disablePinchZoom, { passive: false })
    return () => {
      document.removeEventListener("touchmove", disablePinchZoom)
    }
  }, [])
}

```

If you want suspend pinch zoom partial area, you can use this component.

```js

const SuspendPinchZoom = ({ children }) => {
  const ref = useRef(null)
  // const ref = useRef<HTMLDivElement>(null)

  useLayoutEffect(() => {
    const target = ref.current
    if (!target) return
    const disablePinchZoom = (e) => {
      if (e.touches.length > 1) {
        e.preventDefault()
      }
    }
    target.addEventListener("touchmove", disablePinchZoom, { passive: false })
    return () => {
      target.removeEventListener("touchmove", disablePinchZoom)
    }
  }, [])
  return <div ref={ref}>{children}</div>
}
```

reference: https://stackoverflow.com/questions/49500339/cant-prevent-touchmove-from-scrolling-window-on-ios?noredirect=1&lq=1

original post(japanese): https://www.terrier.dev/blog/2019/20191103224505-react-hooks-pinch-zoom/
Hacktoberfest: effect of a simple OSS T-Shirt challenge on a random OSS library
Tags: opensourcehacktoberfest
Published: 2019-11-03 13:54:50

---
title: Hacktoberfest: effect of a simple OSS T-Shirt challenge on a random OSS library
published: true
description: Experience with this year's Hacktoberfest challenge from a perspective of library maintainer
tags: opensource hacktoberfest
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6ka8dn8gpw6ksxylc2f6.png
---

https://www.linkedin.com/pulse/hacktoberfest-effect-simple-oss-t-shirt-initiative-random-gorej/
Create a linux alias to list all available commands
Tags: linux, ubuntu, productivity, bash
Published: 2019-11-03 13:42:17

**Infomercial-style qualifier:** These instructions were created on Ubuntu 18.04. *Your mileage may vary.*

*I find myself constantly Googling Linux commands and then promptly forgetting them. This morning I decided to find a better way, and after creating my own process I thought I'd share. Hopefully it's useful to someone in the future.*

**Bonus**: Found something useful along the way: https://www.commandlinefu.com/commands/browse

___

## How To

*Create an alias named `allcomm` and save it in your `.bashrc`.*
`echo "alias allcomm=\"compgen -A function -abck\"" >> ~/.bashrc`

*Reload your .bashrc so the changes will take effect.*
`source ~/.bashrc`

## Usage

*Searching results:*
`allcomm search_string_here`

*E.g.*
```
allcomm zip

zip
zipnote
zipcloak
zipgrep
zipinfo
zipsplit
zipdetails
```

*Searching via grep:*
`allcomm | grep search_string_here`

*E.g.*
```
allcomm | grep zip

zip
preunzip
unzip
zipnote
unzipsfx
zipcloak
zipgrep
zipinfo
funzip
prezip-bin
mzip
zipsplit
zipdetails
gpg-zip
prezip
bzip2recover
bunzip2
gunzip
gzip
bzip2
```
___

Source: https://stackoverflow.com/a/949006
Update state from multiple input fields
Tags: react, javascript
Published: 2019-11-03 13:40:21

---
title: Update state from multiple input fields
published: true
description: How to write a function that updates state from multiple fields in a React form
tags: reactjs, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20190923-multiple-input.jpeg
---

## How to write a function that updates state from multiple fields in a React form

We have already seen how to update state from a form input field.
As a quick recap: we have a Student component with this initial state:

```
class Student extends React.Component {
  this.state = {
    name: ''
  }
}
```

And we have a text input field so we can enter the name:

```
<input
  type="text"
  name="name"  // the student name
  value={this.state.name}
  onChange={this.changeHandler}
/>
```

When we type in a name in our input, a `changeHandler()` function is called that updates state for this field:

```
changeHandler = event => {
  this.setState({ name: event.target.value });  // updates student name
}
```

So far, so good.
What if we want to add another field to set the student age?

First we need to initialize `age` in the state:

```
class Student extends React.Component {
  this.state = {
    name: '',
    age: ''
  }
}
```

And then we add a text field for `age`:

```
<input
  type="text"
  name="age"  // the student age
  value={this.state.age}
  onChange={this.changeHandler}
/>
```

If we try our form now, it won't update the state correctly because our `changeHandler()` function is hardcoded to only use the `name` input field and update the `name` property of the state.
We need to make our function more *generic* so it can handle an unlimited number of input fields with unique names.

Our input fields have a property called `name` that is set to *name* and *age* respectively for each field.
The value of this `name` property is captured in `event.target.name`. We can use this value to update the corresponding property in the state like so:

```
changeHandler = event => {
  this.setState({ [event.target.name]: event.target.value });
}
```

In order to evaluate the target name on the left side of the colon in the state object, we need to enclose the expression in square brackets.
This expression will evaluate to `name` or `age` depending on which field we are updating, and will in turn update the `state` object correctly.
Accelerating The Adoption Of Python At Wayfair
Published: 2019-11-03 13:23:07

<p>Large companies often have a variety of programming languages and technologies being used across departments to keep the business running. Python has been gaining ground in these environments because of its flexibility, ease of use, and developer productivity. In order to accelerate the rate of adoption at Wayfair this week's guest Jonathan Biddle started a team to work with other engineering groups on their projects and show them how best to take advantage of the benefits of Python. In this episode he explains their operating model, shares their success stories, and provides advice on the pitfalls to avoid if you want to follow in his footsteps. This is definitely worth a listen if you are using Python in your work or would like to aid in its adoption.</p><p><a href='https://www.pythonpodcast.com/python-adoption-wayfair-episode-236/'>Listen Now!</a></p>
Give IEx a memory
Tags: elixir
Published: 2019-11-03 13:16:02

I guess I'm not the only one here to use IEx during my Elixir session.
It's the REPL for Elixir, you can tinker with it, etc. 


## But, hey, if you read this you already know that.



So, IEx is good but maybe dumb. Everytime you exit IEx, you've to type everything back, it can be -- *it is* -- tedious.

So to give IEx a memory, just add this line to your shell config file.
For me it's in my `.zshrc` file.

```shell
export ERL_AFLAGS="-kernel shell_history enabled"
```

And voilà ! Your IEx session will remember it's previous command and just key up to whatever line you've want to pickup. 😎
2.3 Variables in Python
Tags: python, beginners, webdev
Published: 2019-11-03 12:09:07


{% link https://dev.to/mohit355/2-2-python-as-a-calculator-2fn1 %}{% link https://dev.to/mohit355/python-basics-3cjd %}

##variables :
  1. Variables are nothing but reserved memory locations to store values. It means that when you create a variable, you reserve some space in the memory.
  2. Based on the data type of a variable, the interpreter allocates memory and decides what can be stored in the reserved memory.
  3. There are different types of data types in python:
  a. Numbers
  b. String
  c. List
  d. Tuple
  e. Dictionary
Note: I will discuss these all in separate section

  4. A variable can hold different types of values.
  5. for example if you assign a string to a variable then that variable belong to string data types,and if you assign number to the same variable the its belong to number data types.

  6. Means to say that you can store any type of variable in any variable,that variable behaves according to that particular data type. need not to declare data type before the variable name (as done in language like C and C++).

##How to declare variable
  1. For declaration of variable in python no need to declare data type of it.
  2. Syntax :  variable_name = assigned_value
  example :
  name="abc"
  x=23
  roll=1 etc

  3. You may assign values to more than one variable at a time.
  example :  a=b=c=2 means a=2,b=2,c=2.

  4. You may also assign like this_
     a,b=2,3  i.e. a=2 and b=3  (this is not possible in language like C or C++)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b2r467bzf1ivtknjb8wc.png)

##Rules for declaration of a variable
  1. Variable name not start with a number  (show syntax error) but you can use number inside the variable name.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nm22mdr90dvpdq1i48nn.png)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/66h3xbjmmnw3s7zb8pux.png)

  2. Variable name only starts with any letters ,underscore(_) . this is for the first letter of the variable name
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5v6gnuh6c43og6v9delr.png)

  3. Not use any special symbol ($,^,@,%) in the variable name neither at the start nor in the middle or end.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/a9nn2vmu2q8c0j2g0i2x.png)

  4. keywords are not variables. They just have special meaning to the interpreter..
See below list for the python keywords these are not used as a variable :
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mrdyx0qaj83sylm4r5zc.png)

=>> This is all about variable as we continue we know more about variables as we go deeper in it.

Thank You....
Responsive Chart Components with ResizeObserver – Using React (Hooks) with D3
Tags: react, reacthooks, dthree, resizeobserver
Published: 2019-11-03 11:50:40

{% youtube a4rstx9Pz2o %}

Hi, this is part 6 of my "Using React (Hooks) with D3" series, and in this one, we tackle responsive charts, create a custom React Hook, and learn about the a hotness: the ResizeObserver API.

Enjoy!
7 Examples Of JavaScript Dynamic Import ES10
Tags: javascript, webdev
Published: 2019-11-03 11:08:47

In this article, we will talk about [JavaScript](https://buginit.com/category/javascript/) Dynamic Import that introduced in [ES10/2019](https://buginit.com/tag/es10/), we will cover basics and different types of examples also we will take a look at static and [Dynamic Import](https://buginit.com/javascript/7-examples-javascript-dynamic-import-es10/) in JavaScript. And don’t worry I’m not going to give you a long lecture, we will cover this with small points and examples.

Let’s start, Basically dynamic import is a new function like import statement that introduced in ES10/2019 and it returns a promise. As we know let’s have a look at static import of JavaScript below:

```
import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';
```

Now, Let’s have a look at the basic JavaScript dynamic import statement.

## #1 Simple Single Line Example

```
import("module/foo.js").then(foo => console.log(foo.default))
```

In the above example, we used the single-line statement of Arrow function for console.log to make it shorter. You can also use the normal function like the below example:-

```
import('module/foo.js').then(function(foo) {
  console.log(foo.default);
})
```

#### [To Read full 7 Examples Of JavaScript Dynamic Import ES10 click here](https://buginit.com/javascript/7-examples-javascript-dynamic-import-es10/)
Introducing 🥁 Made with CRL
Tags: showdev, javascript, gatsby, react
Published: 2019-11-03 10:53:10

## Background time

Imagine this 🔮... you're a React developer with an idea for a component or component library. You could go through **ALL** the setup work, configure bundling, setup an example project etc x 100, OR you can use [create-react-library](https://github.com/transitive-bullshit/create-react-library). CRL is a project by [Travis Fischer](https://github.com/transitive-bullshit) and provides you with an easy to use CLI to generate a project ready for you to start building your components.

## Made with CRL

Currently, the project sits at 2.8k stars on Github meaning there could be hundreds of components and/or libraries out there for you to use. That is where [Made with CRL](https://made-with-crl.netlify.com/) comes in. MWCRL has been built to showcase these components and provide developers with an easy way to showcase their components.

If you have a project built with CRL, create a PR on the [Github repo](https://github.com/HurricaneInteractive/made-with-crl) for it to be featured on the website.
I created a dev.to auto-follower bot!
Tags: bots, webscrapping, selenium, python
Published: 2019-11-03 10:35:21


I created a script that logs on your account and follows back everyone that recently followed you. At over 3k followers and only 500 followings, I felt weird about that ratio - so I decided to create a bot.

Yes, I read the terms of use and there were no mentions regarding automated bots.

{% link https://dev.to/mmphego/an-automated-dev-to-follow-bot-59ik %}


## Disclaimer

I hold no liability for what you do with this bot or what happens to you by using this bot. Not sure if abusing this bot can get you banned from dev.to, so make sure to read up dev.to terms of use.

## Code

Code is available on Github, see .travis.yml for usage and dependencies.

{% github mmphego/devto-auto-follower/ %} 


You can fork it, create travis account if you do not have any.

Read further on how to:
- automate the script: https://docs.travis-ci.com/user/cron-jobs/
- add environment variables: https://docs.travis-ci.com/user/environment-variables/
Instant development and staging environments
Tags: saas, productivity, serverless, localdev
Published: 2019-11-03 10:05:40

Hi all,

We are launching [https://defty.dev/](https://defty.dev/?utm_source=devto) which provides development, staging or QA environments to developers and teams instantly. No installation or maintenance hassle. All your team members will develop/integrate/QA against the same environment to prevent any "works on my machine" syndromes.

Environments can contain any of 40+ pre-packaged services: `MySQL` `MariaDB`, `PostgreSQL`, `Mongo`, `Cassandra`, `Redis`, `Memcached`, `RabbitMQ`, `Kafka` etc or your own services (dockerized or otherwise)

Please visit [https://defty.dev/](https://defty.dev/?utm_source=devto) and let us know if you would use any service like this and find it useful.

Thanks a lot for your feedback,

Deftydev team.
Guides to Refactoring
Tags: javascript, tutorial, books, refactorit
Published: 2019-11-03 09:59:56

One of the things I am lacking in experience with is refactoring code. So I did what I always do, and asked Twitter for their thoughts.

https://twitter.com/varjmes/status/1189574679142588417

I picked out a few things from the replies I intend to go through and added some of my own. I cannot vouch for any of these yet, so do let me know what you think of them.

1. 📙 Paid: [99 Bootles of OOP by Sandi Metz](https://www.sandimetz.com/99bottles)
1. 📙 Free: [Refactoring JavaScript](http://refactoringjs.com/)
1. 📙 Paid: [Refactoring by Martin Fowler](https://www.amazon.co.uk/Refactoring-Improving-Design-Existing-Technology/dp/0201485672/)
1. 📙 [Insight Loop: Code by Refactoring, a workshop by Deep Roots](https://insightloop.digdeeproots.com/)
1. 📺 [Therapeutic Refactoring by Katrina Owen](https://www.youtube.com/watch?v=KA9i5IGS-oU)
1. 📺 [Refactoring from Good to Great by Ben Orenstein](https://www.youtube.com/watch?v=DC-pQPq0acs)

A book is never going to teach you something fully though, everything you learn needs to be put into practice. So, find some small pieces of the codebase you're most familiar with and ask yourself if it could use some cleanup. Maybe there's a `Class` that's 700 lines long? Or a React component that has turned into an absolute monster? 🧟‍♂️

I'm curious if you have any other resources or tips on the art of refactoring, so do share in the comments!
365 Days of Coding Challenge: Day 2
Tags: codingphase, coding365challenge
Published: 2019-11-03 06:05:22

---
title: 365 Days of Coding Challenge: Day 2
published: true
description: Day 2 of my attempt to complete 365 days of coding
tags: #CodingPhase #Coding365Challenge
---

<p>
Today is my second day of getting into <a href="https://codingphase.com">Joe Santos' (aka CodingPhase.com) Coding365Challenge</a>.  Right now, I know what I am putting out is not really demonstrative any tangible skills but it is just my goal to get into the habit of coding on a daily basis.  Hopefully, in the days to come, I can be timely with my commits and the quality of my work can improve.
</p>

<p>Here is the link to my CodePen for Day 2 and a screenshot below:
<a href="https://codepen.io/idrissalemairethiam/pen/QWWarZg">https://codepen.io/idrissalemairethiam/pen/QWWarZg</a></p>
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pvrcehu64ygzwkt9ov5b.png)

<p>A quick shoutout to the <a href="fontawesome.com">FontAwesome</a> icon font and the <a href="https://sirv.com/">Sirv Image CDN</a> which I am starting to get familiar with by using in this project.</p>
<p>Cheers for now!</p>
Difference between Flexbox and CSS grid?
Tags: flexboxcssgridcss
Published: 2019-11-03 09:00:41

Flexbox:
1. Flexbox a 1-dimensional system, meaning it can handle in rows.
Example
Home    About us     Gallery    --------------->(Header)

2. Main motive to alter width and height to best fill the available space
3. More focus on content rather than layout
4. Use for small scale, fundamentally to display linear.

CSS Grid:
1. CSS Grid is a 2-dimensional system, meaning it can handle both columns and rows
Example
Header
Body
Footer

2. Layout allows us to align components into columns and rows
3. Approach mainly focus on Layout other than content
4. Grid is used for large scale where there no linear display
Very Basics of Cloud Services and AWS
Tags: aws, webdev, explainlikeimfive
Published: 2019-11-03 08:48:19

Cloud services, especially AWS, become more popular every day. So, “what is the cloud?” is an important question to understand whether we need it or not in our projects. In this article, I will try to explain briefly what I understood in [AWS Concepts course of Linux Academy](https://www.udemy.com/aws-concepts). I strongly suggest this short course (totally around 1 hour) to whom wonder cloud services and AWS basics. Then you can continue with [AWS Essentials](https://www.udemy.com/aws-essentials) course of the same lecturer if you want.

### Advantages of Cloud Systems:
1. __High Availability:__ Your files are always available for any device.
2. __Fault-Tolerant:__ If some problem occurs there is an available backup.
3. __Scalability:__ Increase your processor power, storage, database based on demand to your system.
4. __Elasticity:__ Decrease your processor power, storage, database based on demand to your system.

### Amazon Web Service (AWS)
![Basic structure of Amazon Web Service](https://miro.medium.com/max/2988/1*GKncqEpK7u_IKHlvIacjbg.png)
Let’s talk about these basic AWS elements:
* __EC2:__ A virtual computer which is primarily used for its computing power. You can think of it as a basic computer which includes CPU, RAM, Firewall, Operating System, etc. It generally used as a web hosting part of the system.
* __RDS:__ Database of AWS. You can store information such as inventory catalog or customer info in there.
* __S3:__ It is a massive storage bucket. It commonly used for storing media files such as images, videos, etc.
* __VPC:__ Virtual Private Cloud is your private section on AWS, where you can allow/restrict access to them.
![Availability Region & Zone](https://miro.medium.com/max/2412/1*qK3UniXOB_oodE8qorhilQ.png)

__Availability Zone:__ Physical location of Amazon Data Centers. They have separated geographically in each AWS region also.

__AWS Region:__ A geographical region which includes AWS Availability Zones, such as Tokyo, Dublin. It helps decreasing latency due to geographical distances.

Generally, there are more than one Availability Zones in an AWS region in order to provide ‘High Availability’ and ‘Fault Tolerant’ as we mentioned above. For instance, if there is a disaster or power outage in an Availability zone you can connect the other one.

As a result, these are the very basics of cloud services and especially Amazon Web Services. If you want to dig into more about this topic, I strongly suggest the courses which I mentioned in the introduction passage.

My some other articles:
[Create a Multi-Language Website with React Context API](https://dev.to/halilcanozcelik/create-a-multi-language-website-with-react-context-api-4i27)
[Chrome Devtool Tips](https://dev.to/halilcanozcelik/chrome-devtool-tips-2eb)
[An NLP Command Line Application with Node.js](https://dev.to/halilcanozcelik/an-nlp-command-line-application-with-node-js-33na)