teleren/devto huggingface dataset:
Project 7 of 100 - React Meme Generator
Published: 2020-11-09 02:08:38

What happens if you are in the middle of your 100 days of code challenge and you miss a day or two? Do you push out your projected end date and just get there when you can? Or do you try to jam 3 React projects into a single Sunday so you can catch up? I choose the latter.

##The Project
I had an absolute blast doing this project. This is the third time I have tried finishing Bob Ziroll's [free introductory React course](https://scrimba.com/learn/learnreact) on Scrimba- which I think is probably one of the best online classes out there.

For some reason the first two attempts just didn't pan out- I didn't understand what I was doing as well. Luckily since then I've had about 6 months of internship experience in web dev to hammer in those tricky Javascript bits that may have stopped me before. This meme project is the capstone to that Scrimba course.

##Concepts
The main reason I liked this project was the concept. Seriously- how many different online tutorials can a person possibly code a Todo list app for and still feel invigorated about development? The meme generator was a fun use case for the skills we've been learning in that course. 

####It uses the following:
1. Functional components
2. Class-based components
3. Controlled components (another way of saying an input and the components's state are connected)
4. The [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), which seriously not many courses give you enough chances to use
5. Javascript ES6 object destructuring
6. React lifecycle method `componentDidMount`
7. A fun memes API

This project reaffirmed for me that the best way to learn something is to pursue projects that excite you personally. I had a good time doing it and might even do it again on my own later tonight just to hammer in the concepts.

###5 / 5 stars would code again!


github repo: https://github.com/jwhubert91/100daysofreact/tree/master/day-8-meme-generator
deployed app: https://100-react-projects-day-8-meme-generator.netlify.app/

Follow me on Twitter and I'll follow you back - pretty please :)
https://twitter.com/jwhubert91
Observations from listening and producing 350+ startup podcasts
Tags: startup, product, data, motivation
Published: 2020-11-09 01:23:13

After listening to over 100 Nathan Latka Podcasts, observing 200 Indiehacker podcasts and watching 50 Microconf talks AND recording 80 episodes myself.

Here's what I've observed:

SEO
Over 70% of founders credited SEO for being their best source of growth. Invest into ASAP and build up that MOAT.

FB / Social Media
Its a hit or miss. Don't waste time curating the perfect Ad or post. Tim Doyle of Eucalyptus shared that his most profitable Ad was not some high quality video but rather a Doge meme.

Velocity is everything
When building companies you NEED to move fast, there is no alternative to it.

Product
Product led growth is the BEST type, its natural and doesn't feel forced.

Distribution
This is probably just as much if not more important than the content or product itself. Build with distribution in mind, articles / SEO or products.

SLC
NO ONE wants to use an MVP - stop using that mindset. Literally no one other than your Mum/Dad will use a "minimum" "viable" thing you build. Its 2020, the whole patchy product cycle doesn't exist. Aim for Simple, Loveable and Complete (or what I call Minimal Product for Impact) Introduce simple features that meet your north star and make sure they're complete.

Cold Email
Learn to master this, its a great skillset to have in building a company and distributing content.

Feature Validation
Before you build a feature, literally build a simple landing page, run some GAds to it for lifetime deals (this doesn't work always, but for some apps).

Communicate
Build every channel possible to communicate with your user as often as possible for as long as possible.

No CC No Bueno
UNTIL someone gives you their CC, you don't have validation. Do not take anything else as validation other than their CC.

Timeframe
Before you start, set a goal to hit, if you don't hit that goal, be quick to reflect. Build more or move on Last but the MOST important.

Audience
Almost 90% of all the "Super successful" founders attributed having a previous built audience as their reason for success. They built this audience through, podcasts, blogs, Youtube, Tiktok or even Newsletters. BUILD. AN. AUDIENCE. You have a higher chance of succeeding with a shit product and a large audience than vice versa For those that are keen.

Originally posted at: https://viralwegrow.com/blog/observations-from-over-350-startup-podcasts/ by Vaibhav
Beyond Basic Console.log()
Tags: javascript, typescript, webdev
Published: 2020-11-08 01:46:36

Here are a few quick tips that you can add to your debugging toolkit.

## Using Objects

Instead of logging naked variables, consider using objects to quickly create labeled logs:

```js
const hello = 'hello'
const num = Math.random()
console.log({ hello, num })
=> { hello: "hello", num: 0.9891318026649385 }
``` 

## Warn & Error

Most of you probably know this one, but it's very useful because it gives you a stack trace (meaning you can easily find where the warning/error is coming from). Therefore, I'm including it for the few who haven't heard of it. 

You can use either with a string like `console.warn('warning')` or `console.error('error')`

Or you can pass an error: `console.error(new Error('message'))`

I use this a lot when I'm temporarily logging multiple things, but want one of them to stand out in the console.

## Group

I haven't yet found a reason to use this one, but I can see how it could be useful. From [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Console/group):

```js
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");
```

In the console, you get collapsible groups.

Maybe someone can share how they're using this in the comments?

## Tables

If you're working with an array or object, sometimes it's useful to visualize it in a table. From [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/Console/table):

```js
var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);
``` 

This will display a table using the index numbers for row and column headers. You can also use `console.table()` on objects, and it will use the keys as the row headers.

## Conclusion

Were any of these new to you? What did I miss? I'd love to hear your tips about using the console for web dev!
Common types of OOP relationships and their UML representation
Tags: oop, uml, programming, java
Published: 2020-11-09 00:17:17

Code reuse is one of the many benefits of OOP (object-oriented programming). Reusability is feasible because of the various types of relationships that can be implemented among classes. This article will demonstrate the types of relationships (from weak to strong) using Java code samples and the symbols in the UML (unified modeling language) class diagram.

###**Dependency**###
Is a relationship when objects of a class work briefly with objects of another class. Normally, multiplicity doesn’t make sense on a dependency.

![Dependency UML Symbol](https://i.ibb.co/9hCMNG3/1-01.png)
```
class Move { 
   public void Roll() { ... } 
}

class Player {
   public void PerformAction(Move move) { 
      move.Roll();
   }
}
```

###**Association**###
This relationship transpires when objects of one class know the objects of another class. The relationship can be one to one, one to many, many to one, or many to many. Moreover, objects can be created or deleted independently.

![Association UML Symbol](https://i.ibb.co/q1ZFj6m/1-02.png)
```
public static void main (String[] args) {
   Doctor doctorObj = new Doctor("Rick");
   Patient patientObj = new Patient("Morty");
   System.out.println(patientObj.getPatientName() +
        " is a patient of " + doctorObj.getDoctorName());
}
```

###**Aggregation**###
Is a "has-a" type relationship and is a one-way form of association. This relationship exists when a class owns but shares a reference to objects of another class.

![Aggregation UML Symbol](https://i.ibb.co/VNngt1n/1-03.png)
```
class Address{
//code here
}

class StudentClass{
   private Address studentAddress;
//code here
}
```

###**Composition**###
Is a "part-of" type of relationship, and is a strong type of association. In other words, composition happens when a class owns & contains objects of another class.

![Composition UML Symbol](https://i.ibb.co/PcF4Vwf/1-04.png)
```
class Room {
//code here
}

class House {
   private Room room;
//code here
}
```

###**Inheritance**###
Is an "is-a" type of relationship. It's a mechanism that permits a class to acquire the properties and behavior of an existing class (or sometimes more classes, if the language allows multiple inheritance).

![Inheritance UML Symbol](https://i.ibb.co/9cNJX2r/1-05.png)
```
abstract class Vehicle {
//code here
}

class Car extends Vehicle {
//code here
}
```

Note: When reading a UML class diagram, there is no starting point. It’s up to you to choose where to start. Simply follow the relationships, and then you can begin to understand and analyze the properties, behavior, and relations of the classes.
ConvertFrom-SecureString : A parameter cannot be found that matches parameter name 'AsPlainText'
Tags: powershell
Published: 2020-11-23 16:15:05

---
title: ConvertFrom-SecureString : A parameter cannot be found that matches parameter name 'AsPlainText'
published: true
date: 2020-11-09 00:00:00 UTC
tags: powershell
canonical_url: https://swimburger.net/blog/powershell/convertfrom-securestring-a-parameter-cannot-be-found-that-matches-parameter-name-asplaintext
---

PowerShell 7 introduces a new option `AsPlainText` to the `ConvertFrom-SecureString` function. When using this new flag, you receive the plain text version of the secure string. If you're using older versions of PowerShell, you do not have this flag available and the following error is printed:

**"ConvertFrom-SecureString : A parameter cannot be found that matches parameter name 'AsPlainText'."**

You're not out of luck though, you can quickly create your own function which will give you the same result:

```
Function ConvertFrom-SecureString-AsPlainText{
    [CmdletBinding()]
    param (
        [Parameter(
            Mandatory = $true,
            ValueFromPipeline = $true
        )]
        [System.Security.SecureString]
        $SecureString
    )
    $bstr = [System.Runtime.InteropServices.Marshal]::SecureStringToBSTR($SecureString);
    $PlainTextString = [System.Runtime.InteropServices.Marshal]::PtrToStringAuto($bstr);
    $PlainTextString;
}

```

Load this function into memory and simply pass in your secure string to get a plain text version string back.
Object-Oriented Programming in JavaScript (Part III)
Tags: beginners, javascript, codenewbie, oop
Published: 2020-11-09 00:00:00

---
title: 'Object-Oriented Programming in JavaScript (Part III)'
description: 'Part III - Inheritance'
date: '2020-11-09'
cover_image: 'https://images.pexels.com/photos/1137525/pexels-photo-1137525.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
series: 'Object Oriented Programming in JavaScript'
---

So I know I've been jumping back and forth between subjects in Object-Oriented Programming, but I did some dumb things yesterday that led me to reset to a prior repository and losing the intended post for yesterday. Today I'm feeling much better, and I am going to skip on down to one of the more awesome yet complex aspects of object-oriented programming, and that is Inheritance. 

##Inheritance##

Last time I brushed a bit on the global Object and how every object has a `prototype` object under the hood that is derived from a superclass Object, and this prototype chain goes on back and back and back, linking one object under the hood to another until you reach the end of the chain where the prototype is `null`. 
JavaScript makes it possible for us to take a class and build a new class out of it with the same properties as the old class, but! We can take the properties of the new subclass and redefine them, since they are objects. This passing down of properties from a previous object is called *inheritance*. 

Take, for example, a React Class Component. Under the hood React has a defined class `Component` from which other class-based components React can *extend* its properties to. We use `extends` to indicate that our components should derive directly from `React.Component`, rather than `Object.prototype`. A class from which new classes are derived from is called the *superclass*, and the derived classes the *subclass*. But more on React later. For now, let's look at this example:

```
'use strict';

class Vehicle {
  constructor (height, width) {
    this.height = height;
    this.width = width;
  }
}

class Car extends Vehicle {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
    }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var Ford = new Car(8);
```

We initialize the App instance here by calling `super` in the constructor function. `super` allows the subclass to access properties that exist in the superclass. As the class tree grows in your code, it can be hard to keep track of your inheritance chain. Be wary of it!

I think I'll wrap this one up here. I may add a Part IV or not. Stay tuned!

---


**Works Cited**

> Haverbeke, Martin "The Secret Life of Objects", *Eloquent JavaScript - A Modern Introduction to Programming*, 3rd Edition, 2019, Chapter 6, No Starch Press, Inc.
Why the undefined variable is not sent in a JSON API response?
Tags: javascript, webdev, showdev, tutorial
Published: 2020-11-10 20:36:58

---
title: Why the undefined variable is not sent in a JSON API response?
published: true
date: 2020-11-09 00:00:00 UTC
tags: javascript, webdev, showdev, tutorial
canonical_url: https://jsmates.com/blog/express-json-response-removes-undefined-variables
---

What will happen if some of your variables is `undefined` in the JSON response?

It will be removed from the response by most server framework. Because

> Undefined is not a valid JSON type. All javascript objects are not valid JSON and vice versa.

Example,

```js
const response = {
  undefined: undefined,
  null: null,
  true: true,
  false: false,
  number: 0,
  string: 'string'
};

res.json(response);
```

The response will be,

```json
{ "null": null, "true": true, "false": false, "number": 0, "string": "string" }
```

All other values will be sent to the response but `undefined` won't be sent.

You can see it in action here,

{% codesandbox express-json-response-k8d7f %}
React, why we need state management and how we can do it well
Published: 2020-11-08 23:39:24

State management seems like a fancy word. But however you put it, we need to manage it or deal with it in some ways.

Think in this way: the application is like a state-machine which goes from one state to another. And that means we can have lots of states in our app which can be decided or derived from variables or values.

The way we're handling all these variables or values is called state management.

## Common State Levels through out 
### State in Component level

In old times, we can use `state` `setState()` to get hold of and change state.

With the help of hooks, simply `[state, setState] = useState()` will do

### State in Page level

Similar to state in component, you can treat it as a Page Compenent.

Things to note here is that at some point you have to use it and maybe you have to pass it to the child component which can be really deep.

### State in Application level

Believe me, we have those things like Global Snackbar or Global Banner which are those things that only have one instance or have only one state to represent it in the whole application.

We can of course manage it in the root component and pass it down deep, but don't..

## How to deal with it or manage it

### State in Component level

Just use hooks, it's easy and effective.

### State in Page and Application level

Use `React.Context` or third party `Mobx` or `Redux` to manage it.

- React.Context way: https://kentcdodds.com/blog/application-state-management-with-react/

- Mobx way https://mobx.js.org/react-integration.html#using-external-state-in-observer-components

- Redux way https://react-redux.js.org/introduction/quick-start#quick-start

## My Recommendation

There's no holy grails here. You can choose to do it in any way. But to me, it's very easy and straightfoward to go with the **Mobx** way.

With the Mobx way, you can easily define the state you want. No hierachy needed. The state doesn't have to be tied to a root. They can be managed as individuals just as they might be.

The idea is very much like it's in Recoil.
![react_recoil_-_Google_Search](https://dev-to-uploads.s3.amazonaws.com/i/luey3veejbilop0gsn2r.png)

It's also amazing to get hold of the state and update with the help of `useContext`.

No more redux boilerplates, no more Providers, so why not?
How to remove whitespaces from strings in JavaScript?
Tags: javascript
Published: 2020-11-09 00:00:00

---
  title: How to remove whitespaces from strings in JavaScript?
  published: true
  tags: JavaScript
  date: Mon Nov 09 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/remove-whitespaces-from-strings-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-9b8b56d6b949d6a79efe48ad1393e45a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/remove-whitespaces-from-strings-javascript)
  
## 🌟 Jump to:

- [Remove whitespaces from both the left and right sides](#remove-left-right)
- [Remove whitespaces only from the left side](#remove-left)
- [Remove whitespaces only from the right side](#remove-right)

<a name="remove-left-right"></a>

## Remove whitespaces from both the left and right sides

To remove whitespaces from both sides of a string, you can use the `trim()` string method in JavaScript.

Consider this string with `4` spaces to its left and its right.

```js
// string with 4 spaces
// in left and right sides
const str = "    Hai Jim    ";
```

Let's remove all the whitespaces using the `trim()` method like this,

```js
// string with 4 spaces
// in left and right sides
const str = "    Hai Jim    ";

// remove whitespaces
const trimStr = str.trim();

console.log(trimStr); // "Hai Jim"
```

The method returns a new string with whitespaces removed from the left and right sides.

See this example live in [JSBin](https://jsbin.com/zesudumahu/edit?js,console).

<a name="remove-left"></a>

## Remove whitespaces only from the left side

To remove whitespaces only from the left side of a string, you can use the `trimStart()` string method in JavaScript.

Consider this string with `4` spaces to its left side.

```js
// string with 4 spaces
// in left side
const str = "    Hai Jim";
```

Let's remove all the whitespaces to its left side using the `trimStart()` method like this,

```js
// string with 4 spaces
// in left side
const str = "    Hai Jim";

// remove whitespaces from left
const trimStr = str.trimStart();

console.log(trimStr); // "Hai Jim"
```

The method returns a new string with whitespaces removed from the left side.

See this example live in [JSBin](https://jsbin.com/ruyuwuveca/edit?js,console)

<a name="remove-right"></a>

## Remove whitespaces only from the right side

To remove whitespaces only from the right side of a string, you can use the `trimEnd()` string method in JavaScript.

Consider this string with `4` spaces to its right side.

```js
// string with 4 spaces
// in right side
const str = "Hai Jim    ";
```

Let's remove all the whitespaces to its right side using the `trimEnd()` method like this,

```js
// string with 4 spaces
// in right side
const str = "Hai Jim    ";

// remove whitespaces from right
const trimStr = str.trimEnd();

console.log(trimStr); // "Hai Jim"
```

The method returns a new string with whitespaces removed from the right side.

See this example live in [JSBin](https://jsbin.com/luropihiqo/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Change the Python3 default Version in Ubuntu
Tags: python3, python, ubuntu
Published: 2020-11-08 23:51:52

By default python on mostly ubuntu, there is python 2. We need to use python3 to run the python files with the latest version. 

After research, I am come up with an easy solution to set python3 as a default on the ubuntu system.

<h2>Steps to Set Python3 as Default On ubuntu?</h2>
<ul>
<li>Check python version on terminal - <code>python --version</code></li>
<li>Get root user privileges. On terminal type - <code>sudo su</code></li>
<li>Write down the root user password.</li>
<li>Execute this command to switch to python 3.6. <code>update-alternatives --install /usr/bin/python python /usr/bin/python3 1</code></li>
<li>Check python version - <code>python --version</code></li>
<li>All Done!</li>
</ul>
Node.js Under The Hood Routes vs Express Routes
Tags: node, javascript, programming
Published: 2020-11-08 23:39:40

So, I've been learning Node Js recently. It's been a little on and off but I'm still pushing through when I can. So far I'm really enjoying it. I'm actually learning it from one of my favorite developers. His name is Mosh. He has a very straightforward way of explaining things. I've actually used his videos in conjunction with another developer who goes by the handle The Net Ninja. He's pretty straightforward as well.

I really enjoyed how The Net Ninja starts off showing you what's going on under the hood in is Node.js series. For example, defining your routes without using express would include you using either a switch case, or an if else block. It'll look a little something like this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mpprbk78vk86gfmj7lzl.png)

The req.url is basically the condition. We want to check if any of the following cases match this condition. If we get a match we add the .html file to the value of path so that html can be rendered. Basically, the path variable is "./views/". Which tells the application where to look for the corresponding .html file. In this case it's our views folder. 

On the other hand you have express which provides us some middleware functions such as app.use, app.get, etc. This makes our routing a bit more cleaner and to be honest I find it quite fun. To set up routing with express we basically do the following

1. Install express => npm i express
2. Import it => const express = require('express')
3. Invoke it, returning the value and setting it as the value of a variable named app (by convention)
=> const app = express()
4. Start defining those routes like so

```
app.get('/', (req, res) => {
     res.send('This is the root page')
})

app.get('/about', (req, res) => {
     res.send('This is the about page'
})
```

And so on. Clearly we see that this is more fun than using a regular switch statement or if and else block.

Learn some Node my friends. If you aren't already.