teleren/devto huggingface dataset:
React: useEffect explained with lifecycle methods
Tags: react, webdev, javascript
Published: 2019-08-05 07:57:51

---
title: React: useEffect explained with lifecycle methods
published: true
description: React's `useEffect` hooks combines `componentDidMount`, `componentDidUpdate` and `componentWillUnmount` lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple `useEffect` hooks to be called in a single component.
tags: react, beginners, webdev, javascript
canonical_url: https://blog.prototyp.digital/react-useeffect-explained-with-lifecycle-methods/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vxsv34rw3s1qce1cmdpd.jpg
---

React's `useEffect` hook combines `componentDidMount`, `componentDidUpdate` and `componentWillUnmount` lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple `useEffect` hooks to be called in a single component.

You can read more about the `useEffect` hook here: <a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="nofollow">React docs</a>

Sometimes, we'd like only a single of those lifecycle methods to run. The following cheat-sheet will help you achieve the "effect" you're looking form.

## componentDidMount equivalent

In order to have this hook run only once (when a component is mounted), we need to set an empty array as a hook dependency.


```js
useEffect(() => {
  /* ComponentDidMount code */
}, []);
```

## componentDidUpdate equivalent

In order to have this hook run when the component is updated (this includes mounting), we need to set at least one variable as hook's dependency (in this case, `var1` and `var2`).


```js
useEffect(() => {
  /* componentDidUpdate code */
}, [var1, var2]);
```

## componentWillUnmount equivalent

In order to have this hook run when the component is unmounted, we need to return a function from the hook. If we want cleanup function to run only when component has unmounted, we need to set an empty array. If we set one or more variables in the dependency array, cleanup will run at every re-render.


```js
useEffect(() => {
  return () => {
   /* componentWillUnmount code */
  }
}, []);
```

## All three combined

```js
useEffect(() => {

  /* componentDidMount code + componentDidUpdate code */

  return () => {
   /* componentWillUnmount code */
  }
}, [var1, var2]);
```

<hr />

These articles are fueled by coffee. So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

<a href="https://www.buymeacoffee.com/ubnZ8GgDJ" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.
NPM or Yarn ? im a junior dev following course on internet
Tags: webpack
Published: 2019-08-05 07:47:02

---
title: NPM or Yarn ? im a junior dev following course on internet
published: true
description: 
tags: webpack
---

im using npm but a course i follow are using yarn and i started using both randomly when installing modules or run script, some error pops, any tips for me?
"Haskell for madmen" started
Tags: haskell, tutorial
Published: 2019-08-05 07:11:15

---
title: "Haskell for madmen" started
published: true
description: 
tags: #Haskell #tutorial
---

Just a quick heads up that I've started working on the Haskell tutorial mentioned in [my last post](https://dev.to/drbearhands/interest-in-a-haskell-tutorial-5848).

If you'd like to help out by checking spelling and clarity, you can find the [WIP on my new blog](http://drbearhands.com/haskell-tutorial/), I'd love your help on this matter. The best way to contact me about errors is through merge requests or issues at the [repository](https://gitlab.com/DrBearhands/blog).

I will be cross-posting paragraphs to dev.to once they reach a sufficient level of quality to be considered "done".
Find missing integer(s) in given an array.You know that every integer 1-N appears once in the array
Tags: javascript
Published: 2019-08-05 06:45:50

Here is solutions

<pre>
var numbers = [0,1,3,4,5,7,8]; // Missing 2,6
var missing = [];

// Find the missing array items
for ( var i = 0; i < numbers.length; i++ ) {

    if ( (numbers[i+1] - numbers[i]) > 1 ) {
        missing.push( numbers[i+1] - numbers[1] );   
    }
}

console.log( missing );
</pre>
Prototypal vs Pseudoclassical Instantiation
Tags: javascript, github, opspark
Published: 2019-08-05 06:21:19

When it comes to Javascript instantiation comes in many different forms, but I chose to look specifically at the differences between Prototypal and Pseudoclassical.  However, before we dive any deeper, first we must look at what inheritance is, and why it is so important.

To put it simply, it's a way to recycle code using parent/ child pairing, allowing children to access any variables, methods, or functions that may have been declared in the parent.  And, because you aren’t wasting space on code you have already written, this saves memory AND time!

Pseudoclassical instantiation uses a constructor function and the “new” operator to create an object and uses the “prototype” property to create the inheritance chain.  Constructor functions are normally named with a capital letter to signify their importance to the reader.  We can create a new object  using the "new" keyword, which allows the child to inherit any properties of the parent.  We can even make constructor functions that inherit from another constructor function using the .call( ) method!

Prototypal instantiation confusingly doesn’t use .prototype, but is very similar to pseudoclassical instantiation, with a few differences.  We start by creating an object that will act as our constructor with it’s keys being the variables we want to be shared.  However, rather than calling the original constructor to create a new inheritance, we create an entirely new object from out animal object using Object.create().

So, in conclusion, both prototypal and pseudoclassical instantiation, provide very useful means of reducing memory storage.  Both cut down on the amount of typing one needs to do, reducing the chance for syntax errors.  Both are much systematic, allowing for much more organized code.  The only real differences being that prototypal uses a much more object focused approach, while pseudoclassical uses more of a functional approach. 

So, at the end of the day, they both do the same thing, so it’s up to YOU!
Linux by example - System setup
Tags: linux
Published: 2019-08-05 06:19:05

---
title: Linux by example - System setup
published: true
description: We create a lot of directories for the new Linux environment and copy the required files to continue building our system.
tags: linux
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9e8hiy1zmv3n95w93zk1.jpg
---

{% youtube 0LcJzmmwfxk %}
Pleroma official-docker-support
Tags: elixir, phoenix
Published: 2019-08-05 06:07:38

Merge branch 'official-docker-support' into 'develop'

https://git.pleroma.social/pleroma/pleroma/commit/ba72d02f86d229ae83d4ca669e548b9968bdf8dd

詳細は帰宅後
実際にやってみる。
Why remote development is not for everyone?
Tags: career, job, remote
Published: 2019-08-05 02:09:06

Hi, my name is Carlos, and I am a first time writer. English is not my native language, so any corrections are welcome. :)

I want to share some insight on working as a remote developer.

Working as a remote developer is harder than working in an office. I have worked remotely for 4 years and working remotely requires a lot of commitment and change several conducts you have while working in an office.

There are two types of remote development, one as a freelancer, and one being hired by a company to do remote work daily. In this post, I'd like to talk about the second type. 
We can discuss the freelance life later.

First of all, landing a job like this is pretty easy nowadays, several companies are adopting this line of work because modern technology and infrastructure allow for constant communication and control over processes remotely.

Most companies will allow you to work on your own time and with your software, this "freedom" usually comes with several conditions and limits.

- You will have to deliver the product in time, doesn't matter what issues you had through the day or week.
- Commitments are closed to discussion. If you have an ETD or ETA (Estimated Time of Delivery or Estimated Time of Arrival) it can't be moved.
- You'll have to be online at certain hours to discuss items with the team and with your superiors. Sometimes this is an issue for some people, for example, if you like to work at night.

Besides those limits, there is also a high need of commitment from you, you will be handling how many hours you work every day, how you want to distribute those hours, and how much work you want to get done towards the next goal the company set for you.

This means you have to have a very strong force of will, you can't have many distractions through your coding/working sessions. And make sure you are making enough progress to deliver on time and don't overkill yourself with last-minute tasks.

My advice if you want to go through this line of work, or if you are already working remotely is:

- Use social networks the minimum you can, expend only some minutes, max an hour.
- Learn to do good procrastination. If you are tired of working for a day, read a book, improve another skill, read about some other tech you are interested in. But always remember you have to get back to the task at hand.
- Commit to work a certain number of hours every day. Those hours should be enough to advance and get the job done.
- If you are stuck with something, spend some minutes trying to figure it out yourself, if not ask asap. Google, Stackoverflow, and several other sites like dev.to are your best friends.
- Install a tool like stretchly (https://hovancik.net/stretchly/) to help you take the necessary breaks through the day.
- Learn Kanban and use a Kanban board to organize your day. 
- Plan every day in advance.

And the most important item.

- Don't forget to spend time with yourself, your family, practice your hobbies, eat, have a beer or a cup of coffee, walk and enjoy life!
Object.create()
Published: 2019-08-05 05:31:29

#The Object.create() Method

   
   Object.create is a newer method in JavaScript that can be a more simple and efficient way for you to create objects. Although there are many ways to accomplish making new objects and assigning them properties, the Object.create method is unique because it lets you bypass making a constructor function by allowing you to set any existing object as the prototype for a new object.

   This method takes two parameters: the first being the object being used as the prototype, and the second an optional properties object which is used to set specific properties on the new object. When the new object is returned it will have all the properties of its prototype plus its own properties, either given through the properties object or added later with dot or bracket notation. 

   in conclusion, Object.create is a quick and easy way to create new objects. With the seemingly endless ways to make new objects, Object.create simplifies the process. Even with its awkward optional second parameter, it is an easy way for programmers, especially newcomers like myself, to create new objects and keep track of their inheritance.
Contrib: Using Nodemailer with Express and Templating
Tags: node, javascript, tutorial
Published: 2019-08-05 05:00:49

Hello Viewer, 

I recently stumbled upon a user of dev.to, who wanted help in getting nodemailer to work with express. As a beginner sometimes all that documentation is a bit confusing and you only need that is required to get the thing going, so i thought i`d share this with you guys. I made a little github, hope it is helpful.

## Required
* Node and NPM
* Email Account with SMTP

[Github: https://github.com/th3n00bc0d3r/Nodemailer-Express-Node](https://github.com/th3n00bc0d3r/Nodemailer-Express-Node)

From Command Line

```
git clone https://github.com/th3n00bc0d3r/Nodemailer-Express-Node
cd Nodemailer-Express-Node
npm install
open app.js in your Editor and change smtp settings

node app.js
```

You will need to initiate a GET Call to http://localhost:3000/send/mail or just open it in the browser that should work as well.
What happens when you type in www.xyz.com
Tags: dev, beginners, backend
Published: 2019-08-05 05:00:46

---
title: What happens when you type in www.xyz.com
published: true
description: Some fun basic DNS explanations for the many of us who don't bother about this a lot
tags: #dev #beginner #backend
---

### How Does the Domain Name System work?

How does the internet know what to get you and how to get you your website?

This blog will be relatively shorter than most because it’s straightforward to explain, considering that a few steps are going to be skipped and only the main necessary logic points will be explained!

Lets go!🚀

Side note: have a look at the diagram, that should simplify things for you 😀

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

### When you type in www.xyz.com in your browser what happens?

You set up a “query” or a question to send to a server. The first server your query hits is called the Recursive Resolver, which is usually operated by your internet service provider (Vodafone, Telstra). The recursive resolver knows which other DNS server or domain name system servers to ask the original question of “What is the IP of www.xyz.com” — IP stands for internet protocol, think of it as an address, or perhaps like your phone number.

The first DNS server the recursive resolver talks to is the Root Server which are servers running all over the world and have information about Top Level Domains such as .com/.net. So the recursive resolver asks the root server for DNS info regarding .com. — Note that there's 1000s of servers supporting the root and its the DNS’ job to find the answer to your query quickly!

The Top Level Domain DNS server stores information regarding the second-level domains i.e the .com sever stores information regarding xyz.com. I.e the TLD DNS server responds back with the IP address of the domain’s name server, which gives us the next clue!

The recursive resolver then takes this IP and sends a query to the domain’s name server, this DNS server knows the IP address of our website www.xyz.com and returns to the recursive resolver the IP address of our website.

After all this, the website appears in our browser, and voila done!
PS all this happens in a fraction of a second!

Nothing in programming is magic. Except CSS...
We need Literature in CS Courses
Tags: education, discuss
Published: 2019-08-05 03:13:36

---
title: We need Literature in CS Courses
published: true
description: 
tags: education, discuss
---

Think back to high-school. Do you remember Literature class? It was different from grammar. In what way? It was trying to demonstrate good writing. If you hated it,  it's probably because you found the books boring. They should have been teaching you the Harry Potter books! Nevertheless, the principle was right: if you want to do something, see how the experts are doing it. If you want to skateboard, you can study the techniques step by step, but it also helps to watch great skateboarders. See how they use the techniques, and how they break the rules too.


If you want to build skyscrapers, you must study structural engineering, 3-D modelling, etc., To learn, you need to dive deeply into specific aspects of  architecture. Yet, you also need to study the whole building. You should study and  visit real buildings to see how other architects put their ideas into practice. 

Babies learn language through exposure and immersion. Similarly, while learning about software, one must learn the language, but one should also look at the "literature'. One ought to look at real software, actively used in various projects to see how it was designed. 

Perhaps there's some framework you love to use. It's useful to go behind the scenes and ask: how did they code this? what choices did they make and why? It's like studying the work of great artist, or a great author. Colleges ought to offer courses like this.

Won't this stifle creativity? Won't this encourage mindless aping? Yeah, it could. So, _don't do that_, :) The first rap-artist learnt language through exposure, yet came up with original cadence and lyrics.
Congressional District-based Encoding
Tags: elixir, showdev
Published: 2019-08-05 01:23:08

---
title: Congressional District-based Encoding
published: true
description: Stupid project based on ridiculous font
tags: #elixir #showdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lvk6oisb56tejdso32gk.jpg
---

**Note: this project has no political basis. I did this just because I thought it would be funny.**

My Twitter-verse was all aflutter this late last week due to the release of a [typeface based on gerrymandering](https://twitter.com/UglyGerry/status/1153661354462588929). Neutral of its possible perceived political implications, I thought this was hysterical, and that it warranted having its own encoding.

# Introducing Gerry Cipher!

Gerry Cipher is basically translating Base64 encoding into congressional districts. This was interesting in a couple of regards:
- Some letters were formed by combining two districts
- M and W were the same district, just mirrored
- There were no districts provided for numerals

To address converting the district-based encodings to upper-/lowercase letters, it was fairly trivial: if a letter was comprised of one district, the uppercase encoding had uppercase letters, and likewise for lowercase. If the letter was a composite, then the left/upper district was the uppercase encoding, and the right/bottom district was the lowercase encoding. In the case of M/W being mirrored (NY's 8th district), the encodings are mirrored (`NY08`/`80YN` and `ny08`/`80yn` for `M`/`W` and `m`/`w`).

Addressing numerals was something not covered by the Ugly Gerry typeface. To this effect, I used the ten largest congressional districts by area. Since I was using Base64 encoding as a basis, there was the matter of handling `+` and `/`. I determined that the two longest-running non-voting delegations would be used - Puerto Rico (PR01) and Washington D.C. (DC01).

# What's Next?

It's just a silly little project, and I may or may not translate it to other languages just to propagate the silliness. I will code up... er... decoding... soon as well. I welcome you to check it out!

Happy coding!
I Have Been Exclusively Working With The Aurelia Javascript Framework For 4.5 Years Now, Ask Me Anything!
Tags: ama
Published: 2019-08-05 00:53:03

---
title: I Have Been Exclusively Working With The Aurelia Javascript Framework For 4.5 Years Now, Ask Me Anything!
published: true
tags: ama
---

While many of the more popular Javascript frameworks and libraries hog the spotlight; Angular, React and Vue most notably, I have been working with Aurelia since January 2015 every single day. 

In my previous job, I architected a massive two-year rebuild of an existing visualisation heavy product (with the help of a great team who picked Aurelia up fast), and where I currently work, I am architecting form-driven applications at the moment primarily for the insurance industry.

There is a high chance you might not have heard of Aurelia and while this isn't a post advertising another Javascript framework, I encourage you to check it out if you get the chance. It's clean, fast and incredibly easy to be productive once you learn the basics. I wouldn't work with it so much if I didn't believe in it.

In amongst all of this, I have been active in the blockchain space, specifically helping build Steem blockchain applications once again, I have been using Aurelia.

I have had the massive privilege and honour of getting to work with an under the radar Javascript framework I love so much for the last four and a half years (and counting). And when I say exclusively, I mean every project I've touched has been Aurelia, I experimented with Vue on my own time, but have only been working with Aurelia.

Ask me whatever you want, it doesn't have to be specifically Aurelia related or even related to development.
GitHub as Code
Tags: git, github
Published: 2019-08-05 00:39:47

---
title: GitHub as Code
published: true
description: A tool to create and configure repositories quickly.
tags: Git, GitHub
---

# The Problem

I work on a team when new GitHub repositories need to be created daily. In a perfect world, our repos have the following characteristics:

* Two branches: `master` and `dev`
* Part of our GitHub organization
* A repo topic of our team name
* Another repo topic specifying a frontend or backend project.
* Our GitHub team set as an admin repo
* Pushes to master require review
* Administrators are required to abide by branch rules

Unfortunately, GitHub has no convenient way to specify all of those options at one time. It's also just (relatively) takes a lot of time and when you're in the zone developing, you don't want to spend that time setting up a GitHub repository. So what ends up happening is that a repository is created without the characteristics we want and in turn, technical debt is created because eventually, we have to go back and add those settings in. It's just a pain

# The Solution

As I was thinking about how to solve this issue, the thought that came to me was "infrastructure as code." I know that there are tools like [CloudFormation](https://aws.amazon.com/cloudformation/), [Handel](https://github.com/byu-oit/handel), and [Terraform](https://www.terraform.io/), so I thought "why couldn't there be something like this for GitHub?" That is where the idea for [GitHub as Code](https://www.npmjs.com/package/ghac) came from.

GitHub as Code (GHaC) works just like you'd expect any infrastructure as code. You create a YAML file defining the GitHub repo, the use the GHaC command line tool to build the repository. Here is an example of a GHaC YAML file:

```yaml
name: Test Repo
private: true
topics:
  - ghac
auto_security_fixes: true
```

This would be a simple GHaC YAML file. You can install GHaC with `npm i -g ghac` and run `ghac filename.yml`. It would then follow the instructions in the YAML file. In this case, it would create a private repo with the "ghac" topic and automatic security fixes enabled. You can see all of the options GHaC supports in the [GHaC README](https://github.com/blakemorgan/ghac#readme). Ultimately, the goal is to support every feature supported by the GitHub v3 REST API. This tool also uses the preview GitHub API's in order to provide more customizability.

# Conclusion

With this tool, you can more easily create GitHub repositories with all the settings your team needs. It will save you time and increase the uniformity of your team's GitHub repo settings.

*Try GHaC out!* You can download it from [NPM](https://www.npmjs.com/package/ghac).