teleren/devto huggingface dataset:
Beginner's Guide: How to Manage Netgear Extender
Published: 2020-01-09 05:18:10

Beginner's Guide: How to Manage Netgear Extender 

Do you own a Netgear extender? If yes, we must congratulate you for making a good decision of purchasing the extender of the company that is leading the market. 

Functionalities of Netgear extender can be managed with ease. If you are not much familiar with the device, then let's give you an overview on how you can make the most of your Netgear extender. Let's get started!

As there are many ways to set up a Netgear extender, similarly it can be managed using different ways. Here, we will shed light on two methods using which you can get best out of your extender.

Method 1 

Manage Netgear Extender Using Web Browser

We hope that you are all done with the installation process of your Netgear extender as it is must to manage your extender. Here's how you can manage your WiFi extender using GUI.

Connect your Netgear extender to your existing router.

Launch a web browser on your computer and visit mywifiext.net or mywifiext.com.

Hitting Enter will take you to the extender login page.

Enter the default credentials. If you have changed the default credentials to something new of your choice, then enter the changed username and password. 

You will be taken to <a href="https://geniesetup.download/">Netgear Genie Setup wizard</a>.

This is the dashboard of your extender. By navigating to the settings of your extender, you can tweak various settings of your device and use it the way you desire. 

Method 2 

Manage Netgear Extender Using Mobile App

If you find the above method a bit tricky or are looking to manage your extender from just about anywhere, then Netgear Genie app can help you.

Note: The app supports some limited models of Netgear extenders. If your extender is not supporting the app, get the Netgear Nighthawk app on your device.

First you need to opt for <a href="https://geniesetup.download/">Netgear Genie app download</a>.

For this, get access to your smartphone and launch the Play Store/App Store on it.

You can access the store that is compatible to the OS of your device.

Locate the Netgear Genie app and download it on your device.

Once done, launch the app and accept the given terms and conditions.

Now log in to your extender following the on-screen prompts prompting on the your device. 

Once done, you will reach the dashboard of your Netgear extender.

Now, you can make changes to the settings of your extender from just about anywhere. 

With Netgear Genie app, you can stream and share videos or music, set up parental controls, diagnose and fix network issues, provide guess access, reboot your router, have a glance on the network map, track your internet data usage,  and do a lot more. 

We hope that the above given ways will take your Netgear extender usage experience to the next level. If you have any other way in your mind that can help in managing the Netgear extender with ease, then do share that with your fellow readers by shooting it in the comments section. 

What are you waiting for? Get set and start using extender like a pro.
Quick take - Easy CMS editing from a phone?  No problem with Sanity
Published: 2020-01-30 23:20:30

---
title: Quick take - Easy CMS editing from a phone?  No problem with Sanity
published: true
date: 2020-01-09 05:00:00 UTC
tags: 
canonical_url: https://www.christianlobaugh.com/blog/2020/01/easy-cms-editing-from-a-phone-no-problem-with-sanity/
---

## Sanity studio is great at editing from your phone!

I've only tried using a CMS from my phone once before and it was pretty miserable. I decided to try again today with Sanity as I was away from my laptop and wanting to edit. My original thought was to just use a markdown editor and then copy the content over later. Then it occurred to me that I might be able to use the Studio directly. Worked like a charm. Responsive layout of Studio made it easy to navigate and I didn't find myself frustrated or missing any functionality from the desktop version.

And I'm not just talking about writing/editing a post. I was able to trigger my netlify build as well to update my Gatsby site.

Maybe other CMSs have figured this out too, and everyone will give a collective yawn. Or maybe this is pretty slick.

Which makes me ask - what is the proper way to write the plural version of CMS?
Storybook Best Practices
Tags: react, storybook
Published: 2020-01-09 04:42:45

Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment. Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app-specific dependencies and requirements. 

Since Storybook 5.2, Storybook’s Component Story Format (CSF) is the recommended way to [write stories](https://storybook.js.org/docs/basics/writing-stories/). In CSF, stories and component metadata are defined as ES6 modules. Every Component story file consists of a required default export and one or more named exports.

### Default export
The default export defines metadata about your component, including the component itself, its title (where it will show up in the [navigation UI story hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)), [decorators](https://storybook.js.org/docs/basics/writing-stories/#decorators), and [parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters). title should be unique, i.e. not re-used across files.

```javascript
import { withKnobs, select } from '@storybook/addon-knobs';
import Button from '@material-ui/core/Button';
import NavigationIcon from '@material-ui/icons/Navigation';
import React from 'react';

export default {
	title: 'atoms|Button',
	decorators: [withKnobs],
};

export const containedButton = () => (
	<Button
		variant="contained"
		color={select('color', ['primary', 'secondary'], 'primary')}
		size={select('size', ['small', 'medium', 'large'], 'large')}>
		Default
	</Button>
);

export const outlinedButton = () => (
	<Button
		variant="outlined"
		color={select('color', ['primary', 'secondary'], 'primary')}
		size={select('size', ['small', 'medium', 'large'], 'large')}>
		<NavigationIcon />
		Default
	</Button>
);
```

### Stories for Components that use Redux
By using brackets {} we are importing the RAW component before it has tied to the HOC and therefore should only be expecting props in order to render correctly.

```javascript
import React from "react";
import { withKnobs, select } from "@storybook/addon-knobs";

import { MyComponent } from "../MyComponent";

export default {
  title: "Atom|MyComponent",
  decorators: [withKnobs]
};

export const Basic = () => <MyComponent />;
export const WithProp = () => (
  <MyComponent
    variant="contained"
    color={select("color", ["primary", "secondary"], "primary")}
    size={select("size", ["small", "medium", "large"], "large")}
  />
);
```
Angular 8 FormGroup Example
Published: 2020-01-09 05:47:27

---
title: Angular 8 FormGroup Example
published: true
date: 2020-01-09 03:30:53 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/formgroup-in-angular-8-example-tutorialexample.html
---

In this tutorial i would like to explain you how to use FormGroup with Reactive Form in Angular 8 i will give one example of formgroup in angular 8 app i will show you angular 8 reactive forms formgroup example step by stepAngular 8 FormGroup is very most important part of Reactive Form FormG
When should I use forEach and map of JavaScript Array?
Tags: javascript, arrays, foreach, map
Published: 2020-01-09 03:24:30

---
title: When should I use forEach and map of JavaScript Array?
published: true
description: Javascript array methods
tags: #javascript, #arrays, #foreach, #map
---

I have always contemplated over when to use forEach and map of Javascript array. Both forEach and map does the same thing of running a `function` over every element of the array. But when should I use each one of these functions?

Scenario 1:
I want to create a new array based on a function. A transformation.

```js
const tenants = [
      { env: 'prod', users: 10 },
      { env: 'pre-prod', users: 5 },
      { env: 'dev', users: 1000 },
      undefined
    ];
const modifiedTenants = 
      .filter(Boolean)
      .sort((a, b) => a.env.localeCompare(b.env))
      .map((tenant) => {
        return { ...tenant, message: `${tenant.env} has ${tenant.users} users` };
      });

```


Scenario 2:
I want to read a set of files synchronously from a file server and do some awesome stuff while I do not need to modify my array nor care about the results of this because I do awesome stuff immediately.

```js
const jsFiles = [];
jsFiles.forEach(async (file) => {
   const fileContent = await fs.readFile(file, 'UTF-8');
   this.doAwesomeStuff(fileContent);
});
// Do see that I don't assign the results of forEach to anything because it doesn't return anything useful.
```

That's all folks.
How to deploy a website in few minutes with Surge.sh for free
Tags: javascript, html, css, beginners
Published: 2020-01-09 02:43:36

How many times do you feel discouraged to build some simple apps or code for fun because the deploy is harder to config than build the app?

So, some years ago I found a great solution for that: [Surge.sh](https://www.surge.sh/).

Surge is a very, very simple way to deploy your website/web app in a few minutes with node.js. Let see how:


To install Surge, just run:
`npm install --global surge`

After, go to your project root, run `surge` and fill the `project` (project path) and `domain` fields:

```
$surge

   project: ~/Jane/Desktop/my-project/
   domain: my-project.surge.sh
   upload: [============]

Success! Published and running at my-project.surge.sh
```

### Deploying to a custom domain

Surge offer options to deploy your project to a custom domain passing it as the second parameter:

`$surge ./ *mycustondomain.com*`

The first parameter is the project path, in this case, since I'm at the project root folder I passed the `./`. As second parameter my custom domain.

> IMPORTANT: You may need to configure your *DNS* with a *CNAME* or *A* registry pointing to *DOMAIN* ou *IP* provided by Surge. For more details, you can read the complete guide made by the Surge team [here](https://medium.com/surge-sh/make-something-of-your-ridiculous-domains-bb26fadeb93c).


### Conclusion

I bet you this is one of the easiest ways to deploy websites o have seen, right? hehe

Surge also has paid plans for professional projects with some perks like force HTTP to HTTPS, custom SSL, unlimited domains, custom redirects... just for $30/mo.

Thanks for reading ;)
dotnet quit unexpectedly
Tags: dotnet, visualstudioformac
Published: 2020-01-09 02:25:29

Hi guys,

It's the first work week for some of us in the year and you probably just decided to enjoy the comfort of the your updated Visual Studio for mac. You have written a long and pleasurable art and it's time to see it running so you can satisfy and reward your mind's effort at this new art but some how, this image above shows up and you want to go BONKERS!!!😭😩🤬

Just take a deep breath, calm down. You will be fine because I got your back. 😘💕

I believe, VS for Mac is still a work -in- progress but not so much of an excuse for the team that code / service related issues cannot be reported in the IDE's Application Output.

Here is what you might have to do to get your issue resolved.

1. In your IDE, right click on the project and select "Reveal in Finder".
2. Open your Terminal and cd to the Project's Location (the folder containing .csproj file).
3. Type in the command :-  dotnet run

This will give you a detailed error message and stack trace to help you figure out what the issue might be with your app at startup-time. Fix this and you will be just fine again.

Some Frequent Reasons for this will be:

1. The Port for your app is already in use :- kindly check that port 5000, 5001 or any port configured for your app is not currently being used by another application.
2. Service Dependencies :- Also check that you have properly configured all your app's dependencies in your startup class or autofac container (whichever one you use).

There might be other issues with your code, please share your own experience and help the community.

Have a Lovely day at work!😍👌🏾
7 Fancy Hamburger Menu Design Inspiration
Tags: webdev, design, css
Published: 2020-01-09 01:53:01

Today we will be looking at some [hamburger menu CSS design inspiration](https://codemyui.com/tag/hamburger-menu/), here are a few that I really like. 

#Hamburger Menu To Sidebar - [Codepen](https://codepen.io/jonwilcox/pen/WygLby/)
[![Hamburger Menu To Sidebar](https://codemyui.com/wp-content/uploads/2018/07/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif)](https://codemyui.com/hamburger-menu-to-sidebar-navigation-menu/)

#Hamburger Button To Doughnut Menu Animation - [Codepen](https://codepen.io/z-/pen/evxZpZ/)
[![Hamburger Button To Doughnut Menu Animation](https://codemyui.com/wp-content/uploads/2017/11/pop-up-corner-menu-on-click.gif)](https://codemyui.com/hamburger-button-doughnut-menu-animation/)

#Hamburger Menu Icon To MENU Text - [Codepen](https://codepen.io/IlyasR/pen/rrabLK/)
[![Hamburger Menu Icon To MENU Text](https://codemyui.com/wp-content/uploads/2018/07/Hamburger-Menu-Icon-to-MENU-Transformation-on-Hover.gif)](https://codemyui.com/hamburger-menu-icon-to-menu-transformation-on-hover/)

#Simple Hamburger Menu To X Mark Animation - [Codepen](http://codepen.io/dicson/pen/waKPgQ/)
[![Simple Hamburger Menu To X Mark Animation](https://codemyui.com/wp-content/uploads/2017/03/menu-button.gif)](https://codemyui.com/simple-hamburger-menu-x-mark-animation/)

#Slide In Nav Menu With Off-Trigger Area - [Codepen](http://codepen.io/Twikito/pen/zGdqVO/)
[![Slide In Nav Menu With Off-Trigger Area](https://codemyui.com/wp-content/uploads/2016/10/slide-in-nav-menu-with-off-trigger-area.gif)](https://codemyui.com/slide-nav-menu-off-trigger-area/)

#Pure CSS Hamburger Menu Slide Out Sidebar - [Codepen](https://codepen.io/Rabrennie/pen/WogNvV/)
[![Pure CSS Hamburger Menu Slide Out Sidebar](https://codemyui.com/wp-content/uploads/2018/04/Pure-CSS-Hamburger-Menu-Slide-In.gif)](https://codemyui.com/pure-css-hamburger-menu-slide-in/)

#Star Wars Lightsaber Hamburger Menu Icon - [Codepen](http://codepen.io/Naito/pen/pgyOVm/)
[![Star Wars Lightsaber Hamburger Menu Icon](https://codemyui.com/wp-content/uploads/2016/01/star-wars-lightsaber-hamburger-menu-icon.gif)](https://codemyui.com/star-wars-lightsaber-hamburger-menu-icon/)
3 Core JavaScript concepts you should understand (functions)
Tags: javascript, beginners, functional, webdev
Published: 2020-01-09 01:45:12

In JavaScript, functions are first class objects, meaning that they can access and be passed into function. But what does that really mean? How is a first class function different from a higher order function or a callback function? 

These terms aren't mutually exclusive, but I think it's important to explore the nuances.

###First class vs higher order vs callback

1. **First class:** In JavaScript, functions are treated as first-class objects. I already discussed why functions are objects in [this post](https://dev.to/jasterix/javascript-concepts-you-should-know-object-edition-51ah). A first class object is one that is treated like a variable, meaning they can be:
  1. stored to a variable
  2. passed as an argument (as a callback)
  3. returned from a function


2. **Higher order function:** This refers to a function that accepts a function as an argument or returns a function as its result 


3. **Call back function:** A callback function is one that gets passed as an argument to a function

Just remember:
1. A higher order function can accept a callback function as an argument
2. Both higher order and callback functions are first-class functions. This is because JavaScript treats functions as first class objects
 
Because these 3 terms are so intertwined, I've included the links below that discuss all three, instead of one post for each term:

- Any difference between First Class Function and High Order Function [*link...*](https://stackoverflow.com/questions/10141124/any-difference-between-first-class-function-and-high-order-function)
- Functional JavaScript: What are higher-order functions, and why should anyone care? [*link...*](https://jrsinclair.com/articles/2019/what-is-a-higher-order-function-and-why-should-anyone-care/)
- Closures, first-class functions, and higher-order functions [*link...*](https://levelup.gitconnected.com/closures-first-class-and-higher-order-functions-2dc97dc89cd8)

```javascript

let arr = [1,2,3,4,5]

const firstClass = (num) => {
  return num * num
}

const higherOrder = (array, callback) => {
  let newArray = []
  for(let i = 0; i < array.length; i++){
    newArray.push(callback(array[i]))
  }
  console.log(newArray)
}

higherOrder(arr, firstClass) // [ 1, 4, 9, 16, 25 ]
```

Still confused? Leave a comment to let me know. I'm happy to explain further!
Tool to help you plan subnets in networks
Tags: networking, subnet, infrastructure, productivity
Published: 2020-01-09 01:44:31

It is important, when you're working with infrastructure design to have a good plan for the layout of the network!

![Visual Subnet Calculator](https://thepracticaldev.s3.amazonaws.com/i/64inobp7kib2u6tp1ieu.png)


A really good tool for this is one I came across through a friend of mine while "complaining" about lack of good network tools and setting up cloud infrastructure over a beer at my favorite "satellite office" [Last Train](https://www.facebook.com/lasttrainoslo/) in Oslo.  

[Visual Subnet Calculator](http://www.davidc.net/sites/default/subnets/subnets.html?network=10.0.0.0&mask=16&division=1.0) has become one of the most valued tools I have in my toolbox when I work with cloud architecture and/or infrastructure. It is a simple, no fuss web app that lets you define a network, then start dividing and/or joining subnet addresses. It also has a feature that lets you store or share a direct link to the subnets you have created so it also can function as a network documentation.

Creating a IP map for any infrastructure project is core. The map will help you design a layout of your network and it's subnets, so that you'll later are able to determine where to deploy devices based on their needs and their context. 

This is particularly important when you later plan to apply security to the infrastructure, or when you need to add or divide new subnets inside a network to ie. isolate devices or create custom routing rules between devices.

Thank you Rikard!
API Design tool with people in Real Time
Tags: help
Published: 2020-01-09 01:15:52

Hey!

I want know if you know and can share with me a tool to design an API with my team but in Real Time.

I tried swagger but in the free version you can't do it, and I was thinking about the rudimental option that is use google sheets and some google formatter where we can save our response and share the link in the google sheet.

Thanks for your help!
Material UI Datepicker and @date-io/date-fns 2.0.0
Tags: materialui, react
Published: 2020-01-09 00:47:25

# The Need

I was working on a project at work, being it was a React project and needing a datepicker, it was time to try the MaterialUI Datepicker.

### Installing the packages

Following the documentation at [material-ui] (https://material-ui.com/components/pickers/) my dependencies looked like this.

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


Copying and pasting the example in:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/k9k618sqyksi0yy8ml3k.png)

### Fail Whale

I was greeted with the following result:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/inf4rydy9gtufu70vl53.png)

### The Googling

Like all good developers I began to google and found a Github issue that matched my problem.  The solution was to use an earlier version of the @date-io/date-fns library since a new 2.0.0 version had just come out 4 days prior and @material-ui had issues with it, being it was newer than the last release of material.

### Downgrading

So I downgraded to the earlier version and this was the dependencies I ended up with:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hubaukql9ww4az2ytmum.png)

## Success

Finally after choosing the earlier version I was successful.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8jbr6rohcj1nor8gb21t.png)

** Sometimes newer isn't always better **
SeasonEats: Eating seasonal local foods UX case study
Tags: ux, uxcasestudy, ui
Published: 2020-01-09 00:13:10

Will be importing from my [Medium](https://medium.com/@jaetay/seasoneats-eating-seasonal-local-foods-ux-case-study-22276e5a3555) post here soon. Read the full case study below!

{% medium https://medium.com/@jaetay/seasoneats-eating-seasonal-local-foods-ux-case-study-22276e5a3555 %}
Day 66 : Travellin' Man
Tags: hiphop, code, coding, lifelongdev
Published: 2020-01-09 00:10:34

_liner notes_:
- Professional : Pretty much spent the day traveling to Ohio for Codemash. Caught my flight, got my rental car, drove to the hotel and got some food. Now I'm about to hoping to work on a talk I have coming up.

- Personal : So I got my travel log site up and working (at least working good enough to not crash! haha). The URL is https://doingstuff.in but I also created a URL redirection site so I could do things like https://dwane.in/codemash2020 I even posted a 360 photo waiting at the airport and a video of what I did during the day.

![Mountain views of Torres del Paine in Chile](https://thepracticaldev.s3.amazonaws.com/i/mrogcg2i0qjzf1ff8nq1.png)

Hoping to meet up with my teammate later. It will be good to see him in person and not on my screen in a video chat. haha The rest of the night, I want to work on my upcoming talk for Orlando Devs! Tomorrow is my first day of CodeMask 2020. Again you can follow along at https://dwane.in/codemash2020 I'm a travellin' man!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube p2YUDZZV6H8 %}
Creating an SNS topic for an SES not in the default provider
Tags: terraform, aws, devops
Published: 2020-01-09 18:28:51

---
title: Creating an SNS topic for an SES not in the default provider
published: true
date: 2020-01-09 00:00:00 UTC
tags: terraform, aws, devops
canonical_url: https://www.ankursheel.com/blog/creating-a-sns-topic-for-a-ses-not-in-the-default-provider
description: How can you access resources created in a different AWS region with terraform? I ran into this when trying to access SES created in a different region to the rest of our infrastructure.
---

Let's assume that most of our infrastructure is in _ap-southeast-2 (Sydney)_. But, our SES is setup in _us-west-2(Oregon)_. We also want to create SNS topics and SQS queues so that we can handle bounce notifications. Now since SES is in a different region, our SNS topics also need to be in that region. So how do we tell terraform to create the topics in the ses region?

## Solution

### Step 1

Create providers.

```hcl
provider "aws" {
  region = "ap-southeast-2"
}

provider "aws" {
  region = "us-west-2"
  alias = "ses_aws"}
```

- **ap-southeast-2** : The default provider configuration.
- **us-west-2** : This is the additional provider configuration. Setting the **_Alias_** allows us to create more than 1 provider.

## Step 2

For the resources, we want to use the _us-west-2_ region we specify the _provider_ parameter and set it to be equal to the _alias_. If a _provider_ parameter is not specified, it will fall back to using the provider that doesn’t have an alias.

```hcl
resource "aws_sqs_queue" "example-queue" {
  name = "example_queue"
}

resource "aws_sns_topic" "example-topic" {
  name = "example_topic"
  provider = aws.ses_aws
}
```

In the above snippet, _example-queue_ will be created in _ap-southeast-2_ but, _example-topic_ will be created in_us-west-2_.

## Conclusion

By creating additional providers and specifying the _provider_ parameter in a resource, we can change its region.