teleren/devto huggingface dataset:
React Class vs Functional Components, Part 3: Lifecycle Methods
Published: 2021-04-30 23:09:56

Bad news; There's not exactly a one-to-one comparison here. Functional components have access to useEffect, which can give us most of the functionality we got from methods like componentWillUpdate, componentDidUpdate, componentDidMount, componentWillUnmount, etc, but it's not quite the same.

## The basics
If you want to make use of useEffect, you'll need to import it (it's a named export of React). useEffect takes a callback function and an optional array. This could be: 
```
useEffect(() => console.log('You can define in line'))
```
Or
```
const someFunction = () => {
  console.log('You can pass a function')
}

useEffect(someFunction)
```
These examples will call the effect every time the component renders or rerenders. This could be costly, if we don't want to call the effect every time, we need to pass a dependency array

# Dependencies
If we only want to call the effect after the initial render, we can pass an empty dependency array to the hook.
```
useEffect(someFunction, [])
```

We can also have useEffect call the effect whenever certain things change by adding those values or references to the dependency array.
```
const [name, setName] = useState('')
useEffect(someFunction, [props.someValue, name])
```
In the above example, we will call the effect someFunction on initial render, as well as when the value of either props.someValue or name changes.

## Cleanup
We might have effects that require cleanup, for example an asynchronous function or subscription. In this case, we need to make sure to include a cleanup function.
```
const [name, setName] = useState('')
useEffect(() => {
  someFunctionThatWillNeedCleanup()  
  return someFunctionToDoCleanup()
}, [props.someValue, name])
```
For more information about effects and cleanup, visit [the Effects with Cleanup section of the react docs](https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup).
Project Universe Game Dev update
Tags: gamedev, indiegamedev, opendev, projectuniverse
Published: 2021-04-30 22:41:29

Development is cruising along, we're focused on inventory management at the moment now that farming, mining, crafting are semi-functional

The renderer still needs work (things are more glossy than they should be), but it's low priority

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3aqk77bw6nmrquiefa6.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ki73rrlb1l74j6cxhr8.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i18yfqiqwd9at4jb2f0h.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2auenfjs9ft6jm5m37v1.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsmg7kegwqh1qbcdskpp.PNG)

(Forgot to post this yesterday!)
Project Universe Indie Game Dev update
Tags: gamedev, indiegamedev, opendev, projectuniverse
Published: 2021-04-30 22:35:08

The inventory system is coming along nicely

We can now transfer items from cargo containers to player inventory & there's simplistic tool-tips

It's an open community developed sci-fi MMO as means of ending global poverty forever!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/126zp4ojodlgssqivrq1.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cff1t408e0wl2lobkiu.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf7pftxia45qcnz53ynv.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mrlhca9zh645huw7jii.PNG)
Is the first programming language you learned the one you enjoy using the most?
Tags: watercooler, discuss, programming
Published: 2021-04-30 22:30:03

I’m interested in finding out how many devs tend to stick to their first language and if there is a correlation between your first language and the one you enjoy using the most.

So what was your first language and do you still use it today? Would you consider it your favourite language to use?

The first language I learned was C. While I still enjoy writing applications in C I find myself now choosing to use Python where it’s possible!
Day 357 : Above The Clouds
Tags: hiphop, code, coding, lifelongdev
Published: 2021-04-30 22:21:43

_liner notes_:
- Professional : Got up early, like 5am early haha, to tune into the event I did the presentation for. A lot of really good talks. My talk was the last one of the event. Had the event on in the background while I did some work. Had our team meeting. It was good to see everyone. My presentation happened right after the meeting. Got some really good feedback on it. Did some more work. Then there was a party for a person going on maternity leave. Had some laughs, played a few rounds of Scattegories and wished them well. Good times. Good way to bring in the weekend.

- Personal : Last night, got my slide page updated with the latest. After that, I went through some tracks for the radio show. I think that's it.

![View from the top of a mountain in Ai Petri, Crimea above the clouds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zx5y1gz5fkrvet313ao.jpg)

Going to add the shop to the my slides page. Can't believe I didn't put it on there before. It's just an iframe and adding links to it. I almost got it done, but my Chromebook crashed. Going to make sure it works and push the code. I want to make another Web Component that will be used to display a countdown timer and use it in my current side project. Also want to get the radio show together for tomorrow.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube NqhNTA2VHqk %}
What's Up with React-Redux
Published: 2021-04-30 22:14:41

   This was one of those posts that was going to be a technical, but I did not want to write on something I was not 100 comfy with. React-Redux is one of that library system where you did not know how to search for a book in their system at first but then you find out how to use the system but do not know where or how to physically search for the book in the library!

  So other words you have to keep asking the Librarian and other folks who frequent the that library till you can navigate it on your own. This is how I feel my learning process was with this.

  The best way I can visualize how Redux works is; you work for a large company with a storage department or "store". It was set up for one special purpose, to hold the updates to other departments info. It is accessible to every department that wants to use it. However, they was get that information in a particular way.

 In order the those other departments to update or change the way they operate they have to come through your storage department. I believe the flow kinda goes something like this. other departments (which represents components) need to create an write a request form stating what they want to do or are about todo(an Action) and send it through a dispatch which comes to you, an member of the store department.

  You then take the action and see if it meets the criteria that the boss laid out for you. Find that exact response to that action then update that departments operation.

There is a lot more going on but that kind of illustration helps me understand the Redux flow a little bit. The main thing is keep reading up on this stuff and practice examples to get more familiar with this.
Introduction to Computer Science
Published: 2021-04-30 22:09:48

<!--
.. title: Introduction to Computer Science
.. slug: introduction-to-computer-science
.. date: 2020-03-02 21:32:33 UTC+03:00
.. tags: 
.. category: 
.. link: 
.. description: 
.. type: text
.. devto: true
.. medium: true
-->

I will talk and explain a fundemental concept in computer science 

how is data represented in the computer's memory

1. Binary system 
2. Decimal system 

how different data type is represented
1. integer
2. float
3. string (text)
4. Sound 
5. Images 
6. Videos
Disabling languages for Prettier (in VScode)
Tags: writing, vscode, tools, javascript
Published: 2021-04-29 08:53:13

---
title: Disabling languages for Prettier (in VScode)
description: How to disable Prettier for specific languages.
canonical_url: https://zellwk.com/blog/prettier-disable-languages/
tags: writing, vscode, tools, javascript
published: true
---
It used to be straightforward to disable languages for Prettier in VSCode. You just added a `prettier.disableLanguages` setting and you were done. 

```json
// In settings.json
[
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "json",
    "markdown"
  ],
]
```

Unfortunately, `prettier.disableLanguages` is deprecated so we can’t do this anymore. Here’s what we can do instead. 

There are two methods. 

  1. Enable Prettier in specific languages. 
  2. Enable Prettier globally but disable it in specific languages. 

## Enabling Prettier in specific languages 

The first option is to enable Prettier for specific languages you use. You can do this with the `editor.defaultFormatter` property. Here's an example where you enable it for CSS. 

```json
[
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
]
```

If you use this method, you need to enable Prettier for every language, which can be tedious. 

```json
[
  "[html]": {
  	"editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
]
```

So I prefer to enable Prettier globally, but overwrite Prettier in specific languages. 

## Enabling Prettier Globally but disabling it in specific languages

We can enable Prettier globally with the `editor.defaultFormatter` property. 

```json
"editor.defaultFormatter": "esbenp.prettier-vscode",
```

If you want to disable Prettier for a specific language, you can set the `editor.defaultFormatter` to `null`. 

```json
"editor.defaultFormatter": null;
```

You can also choose to overwrite a specific formatter for a specific language. In the following example, I use Standard JS instead of Prettier for formatting JavaScript. 

Note:
If you're using Standard for JavaScript, it's much easier to use the [prettier-vscode-standard](https://marketplace.visualstudio.com/items?itemName=numso.prettier-standard-vscode) extension instead. I wrote about this in [another article](https://zellwk.com/blog/prettier-standard).

```json
"[javascript]": {
    "editor.defaultFormatter": "chenxsan.vscode-standardjs"
},
```

<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/prettier-standard/). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
Using an HTTP Request Trigger
Tags: development, flow, powerautomate, triggers
Published: 2022-06-15 17:24:04

---
title: Using an HTTP Request Trigger
published: true
date: 2021-04-30 22:02:00 UTC
tags: Development,flow,PowerAutomate,triggers
canonical_url: https://barretblake.dev/2021/04/using-an-http-request-trigger/?utm_source=rss&utm_medium=rss&utm_campaign=using-an-http-request-trigger
---

Sometimes you want an easy way to trigger a Power Automate flow from another application. The HTTP Request trigger makes that easy to accomplish

The post [Using an HTTP Request Trigger](https://barretblake.dev/2021/04/using-an-http-request-trigger/) first appeared on [Barret Codes](https://barretblake.dev).
Easily fetch data: react-api-hook
Tags: react, api, typescript, hook
Published: 2021-04-30 21:22:02

When developing a complex _web app_ with **React**, the best thing is modularise and break up the code in smaller components, hooks or functions.
So our code will be _easier to maintain_ during the time, and it is more readable.

While reading [this](https://dev.to/davidkpiano/no-disabling-a-button-is-not-app-logic-598i) blog post, I understood how the usually fetch handling with:

```

import React, { useState } from 'react'

const ComponentWithFetch = () => {
    const [data, setData] = useState();
    const [isLoading, setIsLoading] = useState();

    const fetchTheData = () => {
        setIsLoading(true);
        //handle the fetch
    };

    return (
        <button
            onClick={fetchTheData}
            disabled={isLoading}
        >
            Start
        </button>
    );
};

export default ComponentWithFetch;

```

Is basically __wrong__, because is detached from the _logic_, and this is not good.

So, I decided to make a **package**, to make this easier, and __simply__ integrate in a project, declaring the hook in the component and passing the datas as parameters.

All the states of the fetch will be executed separately, in an independent logic, handled by _useReducer_.

It is also possible to _cancel_ the request and the state will update with `inAbort` and then `canceled`

### To install the package:

Go to the root of your React Project and, on the terminal, write:

```
npm i react-api-hook
```

### How to use the package

Now, you can use the package in any component:

```
import React,  {  useEffect  }  from  "react";
import useAPIHook from  "react-api-hook";

function  App()  {
    const  [state,  send,  cancel]  =  useAPIHook(
	    "https://jsonplaceholder.typicode.com/posts",
	    {  method:  "GET"  },
    );
    
    useEffect(()  =>  {
	    if (status.status  ===  "success") {
		    console.log(status.data);
		    //status.data.json() for the body of response  
	    }
	    if(status.status  ===  "failure") {
		    console.log(status.error);
	    }
    }, [status]);
    
    return (
	    <div  className="App">
			<header  className="App-header">
				<div>{status.state}</div>
			    <div>
				    <button  onClick={send}>start fetching</button>
				    <button  onClick={cancel}>stop fetching</button>
			    </div>
			</header>
	    </div>
    );
}

export  default  App;
```

You will see in the console the response and, on the screen, the status of the request.

Thanks for reading! _I'm open to any pull request or suggestions in the comment!_

### [Package link](https://www.npmjs.com/package/react-api-hook)
Use class Syntax to Define a Constructor Function
Tags: javascript, tutorial, beginners, devops
Published: 2021-04-30 20:59:05

* ES6 provides a new syntax to create objects, using the class keyword.
It should be noted that the class syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc.
* In ES5, we usually define a constructor function and use the new keyword to instantiate an object.
```
var Vegetable = function(name){
  this.name = name;
}
var carrot = new Vegetable('carrot');
```
* The class syntax simply replaces the constructor function creation.

```
class Vegetable {
  constructor(name) {
    this.name = name;
  }
}

const carrot = new Vegetable('carrot');
console.log(carrot.name); // Should display 'carrot'
```
It should also be noted that the class keyword declares a new function, to which a constructor is added. This constructor is invoked when new is called to create a new object.

* Note: UpperCamelCase should be used by convention for ES6 class names, as in SpaceShuttle used above.
Water down the mill (#2)
Tags: beginners, devjournal, motivation
Published: 2021-04-30 20:56:07

Water is amazing, isn't it? I am a hobby gardener and I love ag-tech, so naturally I love water. Last week, things were going fairly well - I felt driven by motivation, like water down the mill! I learned about the model-view-controller pattern and applied it to a learning program (which does nothing but illustrate its use! ;) and then to a card game I am developing using JavaScript. I continued to help out on FCC and repotted lots of plants, also laid a brick terrace in my garden.

## Daily summaries:
* Friday: fail, step back, understand, restart (5:50h)
* Saturday: dive into mvc design, help out on FCC (4:30h)
* Sunday: completed [mvc-test](https://github.com/beitist/mvc-test) and designed and half-implemented mvc pattern for [card game](https://github.com/beitist/simple-mau-mau) (9:30h)
* Monday: tracing errors, and thinking! (2:00)
* Tuesday: working prototype! (4:20)
* Wednesday: problems again... (3:40)
* Thursday: flash! prototype working again (1:50)

```stats:
last week's total: 223 hours
this week: 31:30 hours
new total: 254:30 hours
```

## Fire is good, coolness is better.
I have spent about 25h on the first version of my card game without achieving anything substantial, and worst of all creating chaos-code that became increasingly harder to maintain. **I failed.** So I stepped back and restructured my approach and started over. After 4h I had reached the same functionality I had in version 1 after 25h - and a code base that was much cleaner and easier to maintain. What do I make of it? **Plan thoroughly before coding!**

## And your week?
Was your river running freely or obscured by obstacles? What did you do to overcome them? What is your latest discovery, core insight, new thought you discovered last week?

*photo by Boudewijn Huysmans on unsplash.*
Write Concise Declarative Functions with ES6
Tags: tutorial, beginners, javascript, programming
Published: 2021-04-30 20:50:18

* When defining functions within objects in ES5, we have to use the keyword function as follows:
```
const bicycle = {
  gear: 2,
  setGear: function(newGear) {
    this.gear = newGear;
  }
};
```
With ES6, you can remove the function keyword and colon altogether when defining functions in objects. Here's an example of this syntax: Here we just refactored the function setGear inside the object bicycle and used the shorthand syntax.
```
const bicycle = {
  gear: 2,
  setGear(newGear) {
    this.gear = newGear;
  }
};

bicycle.setGear(3);
console.log(bicycle.gear); will display 3
```
General Developer Interview Questions
Tags: hiring, career
Published: 2021-04-30 20:47:34

The beginning of your interview will probably focus on more basic questions. These questions provide the hiring manager with an overview of who you are and your general qualifications for the role you're interviewing for.
 
Some of these questions have even been asked for developer job positions at Krowser Web Services.

Here are some general questions you can expect in an interview for a developer position:

• Tell me a little bit about yourself.

• What are your career aspirations?
Where do you see yourself in five years?

• Could you describe your self in one word? 
*This is a very popular question and one of the favourites of the founder of Krowser Web Services, Kayinajah Inyang.

• Why are you leaving your current job?

• Why do you want to work for our company?

• Why should we hire you over other candidates?

• What was your least favourite part of your last job and why?

• Pretend I’m a tech novice. Can you explain what IDE is in plain English?
*Quick Fact: Kayinajah, has asked this question in every developer interview he has presided over.

• What do you know about our company?

• How do your career aspirations align with our company mission?

• Why do you want to be a developer?

• What do you do outside of work hours to make yourself a better developer?

• What are your salary expectations?

• What are some of your strengths as a developer?

• What are some of your weaknesses as a developer?

• How do you keep up with the latest trends, advances and programming languages in this field?


In our next post, we would be sharing questions asked by Krowser Web Services recruiters about experience and background.
CSS Pirate Cartoon
Tags: codepen, html, css
Published: 2021-04-30 20:42:43

---
title: CSS Pirate Cartoon
published: true
tags: codepen, html, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up2mqcvkvvo482kiqprj.png
---

Today I drew a [cartoon of a pirate with HTML and CSS](https://codepen.io/alvaromontoro/full/JjEqzoY):

{% codepen https://codepen.io/alvaromontoro/pen/JjEqzoY %}

It may look a bit funky on some browsers because:

1. It uses `drop-shadow` filter (in the hook, earring, and pegleg), which is not fully supported by browsers like Safari.
2. It uses relative sizes and shadows, and some browsers (looking at you, Chrome) get mixed up and delete the shadows with relative sizes and percentages.

Anyway, it was fun to code this from scratch. It took me a little bit longer than usual, and I wish I had recorded the process...  maybe next time.

----

Edit: thanks to @afif for some animations and some fun in the comments (feel free to add an animation in the thread). Now the [cartoon has some motion too](https://codepen.io/alvaromontoro/full/gOgNxeJ):

{% codepen https://codepen.io/alvaromontoro/pen/gOgNxeJ %}
Spatial Implications of Sectoral Changes in Netherlands
Tags: python, stata
Published: 2021-04-30 20:39:07

We attempted to identify how sectoral changes impact spatial decisions throughout the Netherlands. Specifically, we try to understand how changes in sectoral share in the next ten years, which we forecast ourselves, will affect job market desirability and living desirability. This post is a summary of our research, the full version is available [here](https://drive.google.com/file/d/1vcv2GLrrupBoX5X_wFTzwoT_xdgTgyH-/view?usp=sharing).

We need sectoral data and also we want it to be as much as geographically detailed as possible, thus we decided using the number of companies in each sector per municipality. This data is available in Statistics Netherlands (CBS, [link] (https://opendata.cbs.nl/statline/portal.html?_la=nl&_catalog=CBS&tableId=81575NED&_theme=254)).

Now we want to estimate number of companies for each municipality in the year of 2030. We decided that Vector Autoregression suits our purpose since some industries have symbiotic relationship (look at industry coagglomeration if interested) and some are detrimental to others.
 
We use the following packages available in Python:
```python
import pandas as pd
import numpy as np
from statsmodels.tsa.vector_ar.var_model import VAR
from pandas import DataFrame
```
We then pivot our data and adjust it so the years represents indexes. And then we would like to estimate till the year 2030.
```python
### Load your data with your prefered method
data = pd.read_csv('YOUR DATA')

### The following format is the pivoting suitable for CBS data
df = data.pivot_table(index="year", 
                    columns=[
                        'gem', 
                        #'industry',
                        'id'], 
                    values=["companies"])

# VAR estimation: "y_predict" is the years we want to predict

y_predict = DataFrame(index=[2020,2021,2022,2023,2024,2025,
                             2026,2027,2028,2029,2030])

### We need a list object to use in the estimation

y = numeric_df.values.tolist()
model = VAR(y)
model_fit = model.fit(trend='nc')

yhat = model_fit.forecast(model_fit.y, steps=11)
```

We then use our estimations to be the exogenous variables for fixed effects for destinations. The regressions can be performed in STATA using 'reghdfe':

Here are some of our results:
![change in pop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd2bhgk8wpz7deuer6fp.png)*change in population*
![change in jobs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9vkub1t3la45xs4deh1.png)*change in the job market*

We then wanted zoom in to a particular city and examine the results there. Here are our results for Amsterdam:
![change in inflow to Amsterdam](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd9w62vfmzksa8d9uvme.png)*change in inflow to Amsterdam*
![change in outflow to Amsterdam](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/injoapd0p4zto0ofv71q.png)*change in outflow to Amsterdam*

Thanks for reading, consider looking at the full article for further questions. I would like thank my teammates that enabled this research.
JavaScript and Photos: Read, Edit, and Erase Location and Other Exif Metadata
Tags: javascript, datascience
Published: 2021-04-30 20:30:40

Do detective work and protect your privacy by using JavaScript to read, alter, and erase the Exif metadata that your phone writes into every photo.

[Read more...](https://auth0.com/blog/read-edit-exif-metadata-in-photos-with-javascript/?utm_source=content_synd&utm_medium=sc&utm_campaign=javascript)