teleren/devto huggingface dataset:
Boilerplate - the Angular vs React difference
Tags: react, angular, functional
Published: 2020-12-11 10:25:49

---
title: Boilerplate - the Angular vs React difference
published: true
description: 
tags: React, Angular, FP
//cover_image: https://direct_url_to_image.jpg
---

In React - a component is a function that returns a DOM tree (possibly by calling other component-functions). To test the function, you call it with different arguments, and assert different results.

In Angular, a component is a class, with a decorator and a corresponding module, which must be registered by some other component's module, and whose dependencies are injected via a constructor (whew - say that twice!) It's a class, but you never call new yourself on the component in prod code or tests. To test an Angular component involves setting up mock providers, repeating some of the registration of imports/declarations etc so that the test environment (or Storybook) satisfies all the same things the prod code has.

The difference is the amount of boilerplate.

Boilerplate/configuration is not code you step through, or write 'from the head' or test-drive - it's stuff you trial-and-error your way through, with manuals and examples. A part of every coders job, yes, but hopefully a decreasing amount over time. Boilerplate gives you a low BizCode-to-FrameworkCode ratio, and leaves BizCode coupled tightly to the framework. I wrote some Angular tests where I manually new-ed up a component. They didn't get me very far.

I think this difference is why React is eating the world - the mental model is simple enough yet composes arbitrarily, and you can do amazing things with it. There are fewer concepts to wire together in tests and code to simply get the return value of a function merged into the DOM. I'm not crapping on Angular or those who like it - it's powerful and opinionated. But newer frameworks (React, Vue, Svelte) area generally simpler, and that's a trend that won't likely reverse, imho. So let's hop the next bus out of boilerplate-town - we won't miss it.
JAVA: OOP in brief
Tags: java, oop
Published: 2020-12-11 10:14:02

Q1: what do you mean by OOP concept?
Q2: List of OOP Features?
Q3: Why use OOP concepts or advantages of OOP?
Q4: Disadvantages of OOP?
Q5: Difference between Procedural and OOP programming?

**NOTE**: For detailed information on OOP feature click on one you wish to explore

****
**1. what do you mean by OOP concept:-**
>1.1 stands for Object-Oriented Programming.
1.2 OOP is a methodology or paradigm to design a program using classes and objects.
1.3 OOP simplifies software development and maintenance by providing a few concepts such as:

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

**2. List of OOP Features:-**
>2.1 class: a collection of object & logical entity, eg. bike
2.2 object: a real-life entity that has state & behaviour of its own, eg. colour
2.3 [Inheritance](https://dev.to/supriya2371997/java-oop-inheritance-178l): acquiring properties and behaviour from another class, eg. father and son
2.4 Polymorphism: one task in different ways, speak can be as meow and for the dog, it can be woof.
2.5 Abstraction: hiding internal details and showing functionality, eg. ATM machine
2.6 Encapsulation: binding/ wrapping code & data together into a single unit, eg. capsule containing different medicines

**3. Why use OOP concepts or advantages of OOP:-**
>3.1 faster
3.2 Simple and provide a clear understanding and structure of code
3.3 reusability - able to reuse content and behaviour of the existing class in a new class.
3.4 code optimisation
3.5 Modifiability i.e. easy to update
3.6 Secure because of data hiding concept
3.7 easy to upgrade from small to large system
3.8 we cn eliminate redundant code and extend the use of existing classes
3.9 possible to have multiple objects
3.10 easy to partition the work in a project based on objects
3.11 provide message passing technique for communication between objects

**4. Disadvantages of OOP:-**
>4.1 require more memory to increase speed
4.2 larger program size
4.3 not suitable for all type of programs

**5. Difference between OOP programming & Procedural oriented language:-**
>OOPs makes development and maintenance easier i.e. if code grows it's easy to manage it
>>POL is not easy to manage 

>OOP provide data hiding
>>in procedure-oriented programming global data can be accessed from anywhere![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dliqxhamrky8rak7bz1j.jpg)

>OOP follows the bottom-up approach
>>POL follows the top-down approach

>OOP have many access specifiers such as public, private, protected etc
>>POL does not have any

>updation in OOP based program is easy
>>updation in POL based program is difficult

>because of data hiding, OOP is secure
>>POL doesn't have any proper way of data hiding, thus it is less secure

>in OOP data is more important
>>in POL functions are more important

>OOP is mainly used to solve real-world problems
>>POL is mainly used for unreal issues

>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pdokcalwp2nycijouyok.jpg)


**Please comment if you have any feedback or suggestions**
JavaScript Password Strength Detector
Tags: javascript, html, css
Published: 2020-12-11 09:55:29

In this Project, I am Creating a *Password Strength Detector* which can detect Password Strength using JavaScript Code. Detector can change self background into White, Red, Orange and Lime
{% youtube 76C38uCSde8 %}

# Code is Here:
### Html Code
```
<input type='password' id='pwd' oninput='myfun()'/>
<div id='idigator'></div>
```

### JavaScript Code:
```
function myfun()
{
   var txt, indigator;
   txt = document.getElementById('pwd');
   indigator = document.getElementById('indigator');

   if(txt.value.length==0)
   {
     indigator.style.background = 'white';
   }
   else if(txt.value.length<5)
   {
     indigator.style.background = 'red';
   }
   else if(txt.value.length<10)
   {
     indigator.style.background = 'orange';
   }
   else
   {
     indigator.style.background = 'lime';
   }
}
```

> If u need full code then watch the video above.

Thank You.
Start to learn Typescript and React
Tags: typescript, learn, study
Published: 2020-12-11 09:54:34

Hey all,
For my new job I need to learn Typescript with Node.js for backend and React for frontend,
For those who don't know me I comes from Python and Java background with almost no experience in frontend

If you can share any tips or resources for learning you will get hug and a cookie :)

Thanks all
Microsoft created some dotnet installer scripts (official)
Tags: dotnet, microsoft
Published: 2020-12-11 09:52:37

---
title: Microsoft created some dotnet installer scripts (official)
published: true
description: Microsoft have published some scripts to auto install dotnet core
tags: dotnet, microsoft
//cover_image: https://direct_url_to_image.jpg
---

Installing dotnet core is getting easier. There are two scripts that Microsoft offer to install on Windows or Unix.

[https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-install-script](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-install-script)

[https://dot.net/v1/dotnet-install.sh](https://dot.net/v1/dotnet-install.sh) for Linux/MacOS

[https://dot.net/v1/dotnet-install.ps1](https://dot.net/v1/dotnet-install.ps1) for Windows

These scripts have a lot of parameters you can use such as:
-  `-Version` if you need a previous version
- `-InstallDir` if you have a specific location you need to install on
- `-Dry-Run` if you want to simulate the installtion without any files changing
- `-Architecture` if you want to run x86 on a x64 machine

The official documentation shows all the available parameters and some examples of how to use

If you want to run quickly you could run 
```Powershell
# In Windows
&powershell -NoProfile -ExecutionPolicy unrestricted -Command "[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12; &([scriptblock]::Create((Invoke-WebRequest -UseBasicParsing 'https://dot.net/v1/dotnet-install.ps1'))) <additional install-script args>"
```

```Bash
# In Linux
curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin <additional install-script args>
```

Or if you want to install a specific version (assuming you have downloaded the script file first)

```Powershell
# In Windows
./dotnet-install.ps1 -Runtime dotnet -Version 3.0.0
```

```Bash
# In Linux
./dotnet-install.ps1 -Runtime dotnet -Version 3.0.0
```
Of course there are some caveats. https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-install-script#script-behavior. Some dependencies need to be installed and there is a lot of default behaviour so check out the parameters list if you have any special requirements https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-install-script#options.
Important Features to Consider for Building a Food Delivery App like UberEats
Tags: mobile, android, devjournal, discuss
Published: 2020-12-11 09:26:00

This pandemic age has brought many restrictions and norms like social distancing for all of us. It has changed some of our ways to work and live. One of them is ordering food, groceries, and other items. Though we used to give orders online even before the COVID-19 outbreak, this the method has become a new norm as we battle against this pandemic globally.

On-demand food delivery apps like UberEats and GrubHub have made the online ordering of food items more convenient for users. They have made it possible to get favorite food from restaurants using our fingertips. A survey conducted by Zion and Zion has revealed that both these apps have been used by 37.8% and 36% users respectively in the USA.

Simply put, the food delivery apps’ market is thriving while offering many opportunities. If you a restaurant or a takeaway owner, you can come up with an on-demand food delivery app to stay ahead of the curve. Even startups can make the most of on-demand food delivery app development to grow their business in a short time.

https://www.suriainternational.com/food-delivery-app-development-key-features/
Hacking Django websites: clickjacking
Tags: django, python, security, webdev
Published: 2020-12-11 09:22:48

Clickjacking is an attack where one of your logged-in user visits a malicious website, and that website tricks the user into interacting with your website via an iframe.

_Ready for a Django security challenge? Play our [Django security challenge](https://django.doctor/challenge/settings-security)._

As an example, see the green "create pull request" button on https://django.doctor - which will create a Pull Request on GitHub as the logged in user:

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

Let's say the malicious website has some nefarious React:

```jsx
import React from 'react';


export default function (props) {
  const [position, setPosition] = React.useState({ clientX: 0, clientY: 0 });
  const updatePosition = event => {
    const { pageX, pageY, clientX, clientY } = event;
    setPosition({ clientX, clientY,});
  };

  React.useEffect(() => {
    document.addEventListener("mousemove", updatePosition, false);
    document.addEventListener("mouseenter", updatePosition, false);
    return () => {
      document.removeEventListener("mousemove", updatePosition);
      document.removeEventListener("mouseenter", updatePosition);
    };
  }, []);

  return (
    <>
      <iframe
        style={{zIndex: 100, position: 'absolute', top: position.clientY-200, left: position.clientX-650}}
        src="<path-to-target-website>"
        width="750px"
        height="500px"
      />
      <div>Some website content</div>
    </>
  );
}

```

When one of https://django.doctor logged in users accesses the malicious website this happens: the iframe follows the mouse so that the button is on the mouse. When the user clicks, they click on the iframe.

{% youtube BYos791Wqk0 %}

Now that is very obvious - the user can see the iframe, but that's one change away: `style={{display: 'none', ...}}`. For the sake of the demo I used `style={{opacity: '0.1', ...}}`(otherwise you would see nothing interesting):

{% youtube -_8x-ygK-ck  %}

### Clickjack prevention middleware

The solution is simple: to set iframe embed policy for your website: adding `django.middleware.clickjacking.XFrameOptionsMiddleware` to settings `MIDDLEWARE` and `X_FRAME_OPTIONS = 'SAMEORIGIN'` will result in `X-Frame-Options` header with value of `SAMEORIGIN`, and modern browsers will then prevent your website from being embedded on other websites.

### Does your website have security vulnerabilities?

Over time it's easy for security vulnerabilities and tech debt to slip into your codebase. I can check that for you at [django.doctor](https://django.doctor), or can [review your GitHub PRs](https://github.com/marketplace/django-doctor/):

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

Or try out [Django refactor challenges](https://django.doctor/challenge).
Is Udacity Data Science Nanodegree Worth It in 2021?
Tags: datascience, machinelearning, career
Published: 2020-12-11 09:17:10

**Is Udacity Data Science Nanodegree Worth it?**… Well, this is the first question we have when we hear about Udacity Data Science Nanodegree Program. 

Right…?. 

That’s why I thought to write an article on this topic. In this article, I tried to cover all the important points you need to know before paying to the Udacity Data Science Nanodegree program.
 
So give your few minutes and get your answer to this question- Is Udacity Data Science Nanodegree Worth It?

##**Table of Content-**

1. Prerequisites
2. Instructors
3. Course Structure
4. Projects Details
5. Price and Duration
6. How to Get Financial Support and Discount on Udacity?
7. How to Complete the Udacity Data Science Nanodegree In Less Time?
8. Why do I like the Udacity Data Science Nanodegree program?
9. Conclusion and Final Note
10. FAQ

The first thing before enrolling in any course is the Eligibility Criteria or you can say the **Prerequisites for Enrolling in the Nanodegree program.**

Right…?

Because without having prerequisite knowledge, you will feel lost in the Nanodegree program and you may think that you have wasted your money with the wrong program. 

That’s why this is the first parameter I always consider before selecting any course.

So, let’s see what are the prerequisites for Udacity Data Science Nanodegree?
**[Click to continue reading...](https://www.mltut.com/is-udacity-data-science-nanodegree-worth-it/#prerequisites)**
How is React different from vanilla JS
Tags: react, javascript, webdev, codenewbie
Published: 2020-12-11 09:14:06

#Vanilla Js
VanillaJS is a name to refer to using plain JavaScript without any additional libraries. All major web browsers have a built-in JavaScript engine that executes the code on the user's device. It is the language to communicate with the browsers directly. Let it be any framework Angular, React, etc they are all built on top of vanilla JS. When making small web apps using vanilla JS or any of the framework wouldn't make any big of a difference. But when there are more functionalities to be added code gets messier.

#React

It is a framework built on vanilla JS. Think of it as the middleware to communicate with the browser. Modern browsers provide many functionalities that improve user experience and provide good visual animations also. To communicate with the browser we use vanilla JS. But the code gets many times too long making things look complicated in vanilla JS. React hides these complexities and let a developer access the features of the browser using less code. Also, I would like to remind you here that *React is a `declarative` language for this reason.*  

React is a `Component-Based` framework. This means components are once written and used multiple times within the app. In vanilla JS it is not the same case as everything has to be hard-wired to make things work.

React can also render on the server using Node and power mobile apps using `React Native`.Many companies use React Native for their mobile app because the same code can be deployed to both `Play Store` and `App Store`.This helps them ship out new features and information to their users in less time.

>I hope that this article helped you learn something new today. If it did you can follow me on [Twitter](https://twitter.com/amansethi00), to stay connected.
Troubleshoot Roku error code 012
Tags: errorcode012
Published: 2020-12-11 09:06:17

Let us help you to troubleshoot **[Troubleshoot Roku error code 012](https://www.gocomconnectivity.com/)**. If you do not fix these error codes, it's hard to experience uninterrupted streaming. The tips and tricks here to overcome the error

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


* At first, understand what causes Roku error code 012. The error code 012 that popup indicates Ethernet related error

* Check if the Ethernet cable is connected properly to the device and the Router. If not, disconnect the cable and connect it back again

* If the cable used is faulty, try replacing it with a new one. You can check out the device reviews to find the compatible cable to use with your device 

* Perform a device restart and then check if Roku error code 012 resolve. You can make use of the soft, hard, and factory reset settings
* Also restart the Router. If you do not know how to restart the Router, check the Router setup manual 

* What if the error codes remain even after troubleshooting? If Roku error code 012 remains even after troubleshooting, you can go for a device replacement. Roku Express, Express Plus, premiere, Premiere plus, and streaming stick are the top models that arrive with the best features 

* It's always good to avoid connecting multiple devices to the same router

**Get help to resolve Roku error code 012**

If you require any help to troubleshoot **[Roku error code 012](https://www.gocomconnectivity.com/)**, do contact our Roku customer support. Ringing the support number will transfer your call to our techies right away +1-888-861-8720.
Downgrade composer from 2.x to 1.x via brew

Tags: composer, brew, downgrade
Published: 2020-12-11 08:56:57

You just upgraded your brew packages and composer updated itself to version 2.x but you still need version 1.x? This is how you can downgrade (& upgrade again):

#### Show available versions of composer:
```brew log composer```

For me the latest 1.x version to date is: *composer 1.10.15*

#### Let's downgrade
```composer self-update 1.10.15```

#### To switch back to the 2.x version use
```composer self-update --rollback```
Dear vanilla JavaScript users, which version do you use? Transpiler?
Tags: javascript, node, discuss, webdev
Published: 2020-12-11 08:56:51

This aligns with not only [Node version](https://node.green), but also [which web browsers do you target](http://caniuse.com).

Do you transpile JavaScript _(or something else, like Kotlin)_ to JavaScript at all?

Also, on Node.js - commonjs or ESM? Commonjs style can be easily used as `node index.js` or `node .`, but is running ESM really that more complex, considering Deno is even worse?

```sh
node --experimental-modules server.js

# if you want to use Chrome inspector
node --experimental-modules --inspect server.js

# without precompiling with Babel
babel-node server.js

# ts-node that probably will always run
ts-node -O '{"module":"commonjs","noExplicitAny":false}' -r tsconfig-paths/register server.ts

deno --allow-net server.ts
```

**I feel like TypeScript is waging war with JavaScript.** If it ever add non-JavaScript compilation target, it would be [Embrace, Extend, and Extinguish](https://en.wikipedia.org/wiki/Embrace,_extend,_and_extinguish). So Microsoft-like. I feel like people are forced to choose either.

TypeScript is just a near-zero-config to-JavaScript compiler; with only single-install (and Babel is just the opposite of complexity). Not to mention that Babel is not the only JavaScript compiler.

Also, in VSCode, it is helpful to have `jsconfig.json`, no matter which JavaScript do you choose.
Fix Homebrew (Brew) on macOS 11 Big Sur
Tags: brew, macos, bigsur
Published: 2020-12-11 08:55:13

If you encounter issues with [brew](https://brew.sh/) on macOS 11 Big Sur, than it has a high chance of being a similar issue that I ran into.

One of the many error messages regarding brew on macOS 11:

```
Traceback (most recent call last):
 11: from /usr/local/Homebrew/Library/Homebrew/brew.rb:23:in `<main>'
 10: from /usr/local/Homebrew/Library/Homebrew/brew.rb:23:in `require_relative'
  9: from /usr/local/Homebrew/Library/Homebrew/global.rb:37:in `<top (required)>'
  8: from /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/2.6.3/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
  7: from /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/2.6.3/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
  6: from /usr/local/Homebrew/Library/Homebrew/os.rb:3:in `<top (required)>'
  5: from /usr/local/Homebrew/Library/Homebrew/os.rb:21:in `<module:OS>'
  4: from /usr/local/Homebrew/Library/Homebrew/os/mac.rb:58:in `prerelease?'
  3: from /usr/local/Homebrew/Library/Homebrew/os/mac.rb:24:in `version'
  2: from /usr/local/Homebrew/Library/Homebrew/os/mac.rb:24:in `new'
  1: from /usr/local/Homebrew/Library/Homebrew/os/mac/version.rb:26:in `initialize'
/usr/local/Homebrew/Library/Homebrew/version.rb:368:in `initialize': Version value must be a string; got a NilClass () (TypeError)
```

## How to fix this?

#### Remove old xcode command line tools
```sudo rm -rf /Library/Developer/CommandLineTools```

#### Install new xcode command line tools
```sudo xcode-select --install```

#### Update brew
```brew upgrade```
_Note: I had to run it twice_

#### If you still get an error message try to reinstall brew via:

```/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"```

#### Test if brew works
```brew doctor```

Now brew should work just fine under macOS Big Sur!
Fix issue with scroll position after loading data in Chrome 56+
Tags: chrome, scrolling
Published: 2020-12-11 08:51:01

![Load More](https://dev-to-uploads.s3.amazonaws.com/i/io6ck4ngq0bxcejbkvcf.png)

Chrome 56 executes some computations to make the scroll position stay in the same position. This currently looks like this:

![Current behavior in Chrome 56+](https://dev-to-uploads.s3.amazonaws.com/i/excc20xsc0y7mas2nvdx.png)

### What you would expect instead

![Expected behavior](https://dev-to-uploads.s3.amazonaws.com/i/rwg4wl5pcy0ezn7m10zr.png)

### How to change this behavior?
overflow-anchor to the rescue! https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

```overflow-anchor: none;```

It’s as easy as this.
Installing Kali GUI in Azure Virtual Machine
Tags: linux, azure
Published: 2020-12-11 08:50:14


Have you ever thought of using Kali linux in RDP

As of Azure Virtual Machine they just only provide Command line Kali linux.

So if you want to use Kali linux GUI in Virtual Machine you can go with the steps provided in this video. It will help you provide a kali GUI and can be used in RDP. 

https://www.youtube.com/watch?v=24KsWyw7Ca0&t=2s