teleren/devto huggingface dataset:
2º Best Way To Install NodeJs (Linux)
Tags: beginners, linux, node
Published: 2020-04-06 04:25:45

If you, even like me, **don't got installing the last version of the Nodejs** following the steps in the [Nodejs.org](https://nodejs.org/en/download/), i wanna show to you a other way to resolve this problem.

Basicaly we will use the [NVM(Node Version Manager)](https://github.com/nvm-sh/nvm/blob/master/README.md), him will permited us to use diferent versions of [Nodejs](https://nodejs.org/en/download/), and also choose the LTS(Latest) version we require.

####1) Install the requered libs.
      sudo apt update
      sudo apt-get install build-essential libssl-dev
####2) Install de NVM

     curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.35.3/install.sh | bash
This scrip will install the [NVM](https://github.com/nvm-sh/nvm/blob/master/README.md), you must confirm the number of the version before install, he will install in a ocult folder in your HOME directory. 

####3) List and install the version of [Nodejs](https://nodejs.org/en/download/) you will want:

     nvm ls-remote

This will show a list of all versions of Node. Choose the one you want, the last latest version, per example, and install her, like that:

     nvm install v12.16.1

####Some observations:
    //In case you install other versions of Nodejs and want switch between them 
       nvm use -version-
    //To verify the version of Node
       node -v
    //If necessary update the NPM(Node Package Manager) that came with the node 
       npm i npm -g

And that's about it, i hope this will help someone, like was help me fill days ago.

[This was the article that helped me initially.](https://medium.com/collabcode/como-instalar-node-js-no-linux-corretamente-ubuntu-debian-elementary-os-729fb4c92f2d)
We may be looking for "Work-Life Integration"
Tags: worklifeintegration
Published: 2020-04-06 04:21:00

---
title: We may be looking for "Work-Life Integration"
published: true
description: We may be looking for "Work-Life Integration" not "Work-Life Balance". 
tags: worklifeintegration
---

I found out that there is a term called "Work-Life Integration". I think it's quite interesting for all of us and I'd recommend everyone to check [this article](https://www.forbes.com/sites/forbescoachescouncil/2018/04/18/achieving-work-life-integration-in-this-new-world-of-work/#19afb88bfd9e) out.

[![Achieving Work-Life Integration In This New World Of Work](https://dev-to-uploads.s3.amazonaws.com/i/rftdvdnxioifm7u28wz5.png)](https://www.forbes.com/sites/forbescoachescouncil/2018/04/18/achieving-work-life-integration-in-this-new-world-of-work/#19afb88bfd9e)

See the definition of the term Work/Life Integration by [BerkeleyHaas](https://www.haas.berkeley.edu/human-resources/life-integration/) below:
> Work/Life Integration instead is an approach that creates more synergies between all areas that define "life": work, home/family, community, personal well-being, and health.

I really like it.
Drupal 8 admin themes for next level admin experience
Tags: drupal, cms
Published: 2020-04-06 04:11:41

​
Drupal administrator interface was never considered great in terms of catching up with modern design and standards. And if you are one of those people who always use "Seven" as Drupal administrator theme then this is the right time to switch.

Here are some of my recent favorite theme options for the Drupal 8 administrator interface for the next level admin experience.

<h2>1. Adminimal - Responsive Administration Theme</h2>
Adminimal is my favorite and the most popular contributed administrator theme for Drupal backend. Adminimal admin theme uses seven themes as a base theme and makes it less prone to bugs.
It is highly recommended to use the “[Adminimal Admin Toolbar](https://www.drupal.org/project/adminimal_admin_toolbar)” which provides minimalist style to [Admin Toolbar](https://www.drupal.org/project/admin_toolbar) in Drupal admin.
Project Page: https://www.drupal.org/project/adminimal_theme

<h2>2. Mediteran administrator</h2>
"Mediteran administrator" is a bluish, clean and modern admin for Drupal 8. It is a responsive theme admin theme that is optimized for mobile, tablet and desktop.
You can also combine the "Mediteran administrator" theme with "Admin Toolbar Mediteran" to get the clean look on the Admin Toolbar as well.
Project Page: https://www.drupal.org/project/mediteran

<h2>3. Claro</h2>
[Claro](https://www.drupixels.com/blog/claro-new-admin-theme-drupal) is an all-new admin theme for Drupal 8 added from 8.8.0 release. Claro theme brings a modern admin design to drupal out of the box.
Claro admin theme is built in compliance with [Admin UI & JavaScript Modernisation](https://www.drupal.org/about/strategic-initiatives/admin-ui-js) initiative to produce a re-imagined content authoring and site administration experience.

<h2>4. Material Admin</h2>
"Material Admin" is based on Google Material Design and modernize Drupal 8 administration UX and design.
This admin theme takes the mobile-first approach and great for people who want to use Drupal 8 backend from mobile.
Project page: https://www.drupal.org/project/material_admin

 
Let me know in the comment which one is your favorite or you are still not comfortable switching away from the "Seven" theme.

Original Post: https://www.drupixels.com/blog/drupal-8-admin-themes-next-level-admin-experience
​
A stock watching app using Redux toolkit, React-testing-library
Tags: react, redux, testing, showdev
Published: 2020-04-06 04:04:14

Reason: When I noticed the Redux toolkit is released three months ago, I know I need to try it, and the test example that I find out on the web mostly focuses on the unit tests, but I have more confidence in the integration test.

So I decided to write one myself, most tests are integration tests, using the redux toolkit in conjunction with hooks. It's RWD design, trying to hit as many 'best practice' as I know, and here I am, share what I've learned so far, and looking for feedback from our lovely community.

Online Demo: https://stock-scout.now.sh/

GitHub repo: https://github.com/thinkerelwin/stock-scout

p.s. I use Heroku (free tier) on fetching the data, so on your first visit, it's possible to see 'timeout' message, just refresh again, don't need to worry about that.
What is REST API?
Tags: beginners, codenewbie
Published: 2020-04-06 03:26:47

With its wide use, REST is something that many developers have become accustomed to, and yet I could never give a great definition to what it actually is.  Here is a simple breakdown of REST...

In 2000, Roy Fielding was frustrated with how URLs and their corresponding HTTP verbs (POST, GET, PUT, PATCH, DELETE) were being utilized differently across the web.  Thus he came up with REST (REpresentational State Transfer) as a standard for how web applications should structure their URLs.  This standardization of URL routes is used across the web today, and because of it, allows easy communication from one application to another. REST is  described as an "architectural design pattern", very fancy I know😜.  It is not a framework, but most web app frameworks use the REST design pattern in some form.

The table below is from the Rails documentation.  Pay special attention to the Path column, it displays a simple example of the REST design pattern. Say we were building out an instagram clone app and we wanted to visit the specific page to upload a photo,  following the table below we would go to *https://www.myinstagramclone.com/photos/new*.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ynm6sytspabrrj406x6r.png)
<figcaption>https://guides.rubyonrails.org/routing.html</figcaption>


Following the REST format makes it easy for other applications and developers to know where specific data is located within your API.
Get SMS notifications from GitHub 
Tags: twiliohackathon, javascript, github
Published: 2020-04-06 03:21:04

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built
SGS Stands for Short GitHub SMS 😁. It's an action which could be used to get updates about your GitHub repository like Issues and Pull Requests to your mobile number using twilio's SMS API. It's a simple JavaScript action which is below 70 lines of code.

## Demo Link
I couldn't test it or demo it since there was no SMS twilio numbers to be available in India

## Link to Code
https://github.com/athul/SGS
```js
async function run() {
  const resultMessage = await client.messages.create({
    from,
    to,
    body: message,
  });
  tools.log.success("SMS Sent")
  return resultMessage
}
```
These 9 lines of code does all the sms work
## How I built it (what's the stack? did I run into issues or discover something new along the way?)
The Stack is 
- Node.js
- GitHub Actions 

I've been hacking with actions for a few weeks so thought that this could be merged.
There was an official twilio action but it was limited to a specific message. I upgraded it to use a message with data from GitHub using literals and string truncation to reduce the title below 30 characters.Learned that 160 characters was the limit

## Additional Resources/Info
- https://github.com/JasonEtco/actions-toolkit Library for integrating actions
- https://github.com/twilio-labs/actions-sms Official Twilio Action
Can you write a JS function that memoizes Fibonacci?
Published: 2020-04-06 03:04:14

# Introduction

In this post, I'll walk through implementing the Fibonacci sequence in JavaScript, and then improving the approach by memoizing previous returns from the function. You can think of memoizing like implementing a 'cache' which stores information from previous calls to a function. In JavaScript, the best approach to take advantage of closures and implement an outer function, which creates the cache as a map, and an inner function, which inherits the scope of the outer function and can write/read from the cache. 

# 1: Recursive Fibonacci

Reviewing recursion is outside the scope of this post, but I wanted to share this approach with you as the memoize function will incorporate this code. This approach to fibonacci solves in O(log n) run time. 

```javascript
const fibonacci = (n) => {  
  if (n < 3) {
    return n - 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
};

```

# 2: Memoize Fibonacci

Memoizing the recursive function above will make a tradeoff between speed and space. Implementing the cache will take O(n) space complexity, but the best case for the solution will become O(1) instead of O(log n).

There are degrees of increasing utility (or, intelligence) to memoizing the fibonacci function.

1. Only cache answers for a given n, e.g. fib(20) would not benefit from previous calls of fib(21) or fib(19)
2. Cache all solutions up to a given n, e.g. fib(20) should cache fib(1...20), but fib(21) doesn't take advantage of fib(20)
3. Given an n greater than a previous n, leverage the solution for the previous greatest n, e.g. fib(21) should leverage fib(20)

The approach I implement below is the latter of the three. It 'caches' all previous solutions to the fibonacci function, including the recursive calls. So, memoizeFib(5) will cache the fibonacci number that corresponds to (1...5). 

```javascript
const memoizeFib = (n) => {
  const cache = {};
  const fibonacci = (n) => {
    if (cache[n]) {
      return cache[n];
    }
    
    if (n < 3) {
      cache[n] = n - 1;
      return n - 1;
    }
    
    let solution = fibonacci(n - 1) + fibonacci(n - 2);
    cache[n] = solution;
    return solution;
  };
  return fibonacci;
};
```

You would call this code by creating an instance of the memoizeFib function (which creates the cache and returns the fibonacci function), and passing that instance an argument. Example:

```javascript
const memoizedFib = memoizeFib()
memoizedFib(5) // returns 3
```

# Conclusion

Closures and memoizing in JavaScript are not only used to improve performance and prevent repetitious, expensive work. They're used for data security and privacy. Consider that, for the above example, the cache for `memoizedFib` is _not_ accessible outside the scope of `memoizedFib`. 

If you want to play around with the code above, you can fork the solution I implemented (with tests) on CodePen [here](https://codepen.io/gortron/pen/OJVdrWo).
Open source boilerplate Vue app with Typescript
Tags: showdev, vue, javascript, typescript
Published: 2020-04-06 02:45:51

Hi Dev.to community!

I've create a boilerplate project with Vue, Typescript, and JSX.

Stack: Vue, Vuex, Vue-route, TypeScript, JSX

Github repo: https://github.com/vutran6853/vue-typescript-jsx-boilerplate
React with Redux
Published: 2020-04-06 02:40:53

Why did we add two libraries?

React is split into two separate libraries.

**React** knows what a component is and how to make components work together.

**ReactDOM** knows how to take a component and make it show up in the DOM.

[React中使用Redux, React-Redux, Redux Thunk(Middleware)處理Request基礎實作 + 觀念釐清](https://medium.com/@brianwu291/learn-react-redux-and-redux-thunk-fd06ab2fd652)

react-redux提供了Provider跟connect這兩個函數(component)，設定元件的state與props，並跟redux中的createStore函數配合，按照使用者的行為改變存在store中的state。

react-thunk作為Middleware則是處理redux中action函數裡request非同步的問題。

![Alt react-redux](https://miro.medium.com/max/1400/1*8x2BkKo09RKCqGHlmtE5ZA.png)


### Redux Cycle

![Alt Redux Cycle](https://miro.medium.com/max/1400/1*V6JH2NTenLlyONt4ravT3g.png)

redux也要能和react溝通，所以才要安裝react-redux，並利用其中的 Provider 跟 connect 這兩個函數作為redux跟react之間溝通state的方法。

安裝redux-thunk之後可以做到的事情：讓 actionCreator 可以回傳action物件，也可以回傳一個函數！

![Alt react-redux](https://miro.medium.com/max/1400/1*vDBEgEj_B2qKLcpLxWjikw.png)

without redux
![Alt redux](https://miro.medium.com/max/1400/1*KDCXM8LDFkpCxrMtGoSX9g.png)

使用redux的關鍵思維是：
能不能把元件們再拆成："只"負責畫面顯示&"只"負責資料處理這兩種呢？
這樣之後畫面顯示部分的可以重複使用
c# quicky. Should we 'throw;' or 'throw e;'?
Tags: csharp
Published: 2020-04-06 01:57:01

This is a bit of an oldie.  Very old, in fact, since this question has been around since c# was born.  And likely before that for other languages.

What's the difference between these code snippets?

```c#
try
{
  ...some code
}
catch (Exception)
{
  throw;
}

try
{
  ...some code
}
catch (Exception e)
{
  throw e;
}
```

Well, it's all about where the exception originates and what happend to the stacktrace...

throw : Using a "throw" statement preserves the original error stack information. In exception handling "throw" with empty parameter is also called re-throwing the last exception.

throw e : Using a "throw e" statement, the stack trace of exception will be replaced with a stack trace starting at the re-throw point. It is used to intentionally hide stack trace information.

Most of the time you will want to 'throw;'.
Mini Solutions Series #3: Can't forEach()
Tags: javascript, fullstack, flask, udacity
Published: 2020-04-06 01:00:02

##BUG:

"forEach() error" or "forEach() not working" or "for each is not a function javascript"

![fail](https://thumbs.gfycat.com/AdorableAcidicKillerwhale.webp)

##Detailed Description:

In the past I haven't had enough confidence in my grasp on basic JS syntax to know why my use of the handy [forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) method wasn't working. I did complete [Wes Bos's 30 Day JavaScript](https://javascript30.com/) Series, and I vaguely remembered him mentioning something about a common beginner's mistake. 

Fortunately, by this point in my studies there is less mystery about proper syntax, and I decided to pop into Stack Overflow, and it didn't take long for me to realize...

##Solution:

...that what I was trying to iterate over LOOKED like an array, but it wasn't. It was an HTMLCollection. But you can turn that into an array with the equally convenient [spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) operator, and then use forEach().

[The explanation that helped me](https://www.gavsblog.com/blog/htmlcollection-foreach-loop-convert-object-to-array-javascript). 

##Takeaway:

So, using
```
const myArray = [...document.getElementsByClassName('myClass')]
```
INSTEAD of
```
const myArray = document.getElementsByClassName('myClass')
```
BEFORE trying forEach() is the code that fixed my problem.

##Bonus Tip:

I'm trying to cram a 4-6 month Udacity Fullstack nanodegree program into 1 free month. Saving money is a great kick-in-the-ass motivator, and I've never spent so many hours coding in a week. I can see that up until now I've underestimated my ability to soak in a lot of new information and debug dozens of new problems - my head is spinning a bit, but instead of feeling overwhelmed I actually feel more competent as a coder than ever before.
How does it works?!
Tags: test
Published: 2020-04-06 00:51:52

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus, ipsum maximus dapibus accumsan, mi elit venenatis tellus, vel malesuada justo elit non elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisis justo sed pellentesque suscipit. Quisque ut quam sit amet lorem condimentum malesuada. __Pellentesque efficitur, ex ac fringilla viverra, felis ante tempor neque__, in rhoncus metus sem ut augue. Suspendisse sed maximus risus, at efficitur ante. Pellentesque non velit erat. Mauris ipsum sem, cursus vitae _rhoncus eget, ultrices non neque. Duis sed gravida purus. Pellentesque_ ultricies justo metus. Quisque sit amet consectetur ex, et venenatis mauris. Proin eu est in magna varius eleifend ac et purus. Sed tempor dolor at turpis convallis, a commodo sem scelerisque. Donec ut semper dui, eget lobortis nulla.
Segundo teste - Api do DEV
Tags: testing
Published: 2020-04-06 00:45:25

### What am I Doing?
__Curabitur ut augue ex. Praesent finibus felis odio, non venenatis sapien rutrum sit amet__. Maecenas pellentesque, eros non ultricies tempus, dolor diam interdum augue, a tempus est nunc eget risus. Phasellus tincidunt risus et est feugiat, ac pretium orci placerat. Nulla facilisi. Duis rutrum, diam eget vulputate ultrices, orci neque egestas leo, a feugiat diam lacus in nisi. _Morbi sed molestie lectus. Cras vehicula, enim quis rutrum commodo, dolor_ quam blandit massa, ut congue erat dolor id quam. Integer faucibus nibh ac magna placerat imperdiet.
Establish healthy home office habits with Super Productivity
Tags: productivity, showdev
Published: 2020-04-06 00:18:34

---
title: Establish healthy home office habits with Super Productivity
published: true
description: Super Productivity got a new release. Check it out!
tags: productivity, opensource, showdev
cover_image: https://images.unsplash.com/photo-1502945015378-0e284ca1a5be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80
---

I just recently released a new version of Super Productivity the To Do list / Time Tracker app targeted at programmers and designers. It's free & open source and has a set of cool features, including a break reminder, a pomodoro timer and an anti procrastination feature. It also now integrates with Jira, Github and Gitlab.

Please check it out, leave feedback and spread the word if you like it!

https://super-productivity.com/
https://github.com/johannesjo/super-productivity
React Router in 5 Minutes
Tags: react, reactrouter
Published: 2020-04-06 13:34:14

---
title: React Router in 5 Minutes
published: true
date: 2020-04-06 00:00:00 UTC
tags: react, react-router
canonical_url: https://www.jamesqquick.com/blog/react-router-in-five-minutes
---

I use React all of the time and always have to look up how to setup React Router. In this post, I'll show you how to setup React Router in five minutes.

## Install the Package

First, you'll have to install the `react-router-dom` package on npm with the following command.

`npm install react-router-dom`

## Add Routes in App.js

To add the routes, we need to import the `BrowserRouter` and `Route` components from the package. Often, you'll see `BrowserRouter` renamed as `Router` as it is below.

```
import { Route, BrowserRouter as Router } from "react-router-dom";
```

Now, wrap the app in the `Router` component.

```
function App() {
  return <Router></Router>;
}
```

Inside of the `Router` component, you can add a `Route` component for each of your routes where you define the path and display component for each. I also surrounded mine with a container div for ensuring consistent padding on each page. Lastly, I marked the index route with the `exact` property to avoid conflicts with sub-routes.

```
function App() {
  return (
    <Router>
      <div className="container">
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/blog" component={Blog} />
      </div>
    </Router>
  );
}
```

Typically, you'll have something like a Navbar component that you want to display on every page. To include a component on each page, add it inside of the `Router` alongside your routes.

```
function App() {
  return (
    <Router>
      <Navbar />
      <div className="container">
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/blog" component={Blog} />
      </div>
    </Router>
  );
}
```

## Navbar component

With React Router, to link to different pages in your app, you'll need to use the `Link` component instead of traditional anchor tags. Import it like so.

`import {Link} from "react-router-dom"`

You'll use these in your Navbar and other areas in your app. Here's what they'll look like wherever you decide to use them. Just specify the `to` property which is the path of the page to navigate to.

`<Link to="/about">Home</Link>`

## Wrap up

That's it. Not too bad. You should be up and running with page navigation in your React app.
Getting Started Learning Docker
Tags: docker, beginners, tutorial, video
Published: 2020-04-06 00:27:51

---
title: Getting Started Learning Docker
published: true
date: 2020-04-05 23:23:39 UTC
tags: docker,beginners,tutorial,video
canonical_url: https://www.aaron-powell.com/posts/2020-04-06-getting-started-learning-docker/
---

Docker is a really useful tool in ones toolbox but when you're first trying to get started in understanding its role it can be quite hard, there's so many new terms to learn, different technologies that fit around the edge of the ecosystem and a lot of content focuses on the advanced (and very useful) applications of it.

But what do you do when you're first getting started? I found myself in that situation when I was consulting to a company so I decided to put together a talk that covers everything from the basics up to some common use cases.

I gave this talk last week as part of the [Microsoft Reactor](https://developer.microsoft.com/reactor/?WT.mc_id=devto-blog-aapowell) virtual programming and you'll find it online.

{% youtube gWYm2OwJRWg %}

There's also a companion workshop that you can follow along with [on my GitHub](https://github.com/aaronpowell/docker-from-scratch). Happy containerising!