teleren/devto huggingface dataset:
Code Smell 08 - Long Chains Of Collaborations
Tags: beginners, codenewbie, oop, 100daysofcode
Published: 2020-10-27 13:32:55

*Making long chains generate coupling and ripple effect.
Any chain change breaks the code.*

> TL;DR: Just sent messages to your acquaintances. 

# Problems

- Coupling

- Break encapsulation

# Solutions

- Create intermediate methods.
- Think about [Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter).
- Create higher level messages.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/de702945b0bb7cd80f696f8cbe19c91c)
```javascript
class Dog {
   constructor(feet) {
     this.feet = feet;    
  }
  getFeet() {    
    return this.feet;
  }  
}

class Foot {
  move(){    
    //..
  }
}

feet = [new Foot(), new Foot(), new Foot(), new Foot()];
dog = new Dog(feet);

for (var foot of dog.getFeet()) {
  foot.move(); 
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/b3b7d73ffb6554df2c06fce3b93a134f)
```javascript
class Dog {
   constructor(feet) {
     this.feet = feet;    
  }
  walk(){
    for (var foot of this.feet) {
      foot.move(); 
    }
  }
}

class Foot {
  move(){    
    //..
  }
}

feet = [new Foot(), new Foot(), new Foot(), new Foot()];
dog = new Dog(feet);
dog.walk();
```

# Detection

 Automatic detection is possible using parsing trees.

# Also Known as

- Message Chains

- Law of Demeter

# Relations

{% post https://dev.to/mcsee/code-smell-67-middle-man-cn3 %}

# More Info

- [Refactoring Guru](https://refactoring.guru/es/smells/message-chains)
 
# Tags

- Declarative

- Encapsulation

# Conclusion

Avoid successive message calls. Try to hide the intermediate collaborations and create new protocols. 

# Credits

Photo by <a href="https://unsplash.com/@chewy">Chewy</a> on <a href="https://unsplash.com/s/photos/dog">Unsplash</a>

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/06/10*
Forget pay cut, give me a raise to work remotely
Tags: discuss, career, watercooler, remote
Published: 2020-10-27 13:17:06

---
title: Forget pay cut, give me a raise to work remotely
published: true
description: An appeal to every employer on why they should offer a pay raise for asking employees to work remotely.
tags: discuss, career, watercooler, remote
canonical_url: https://www.remote.tools/remote-work/forget-paycut-give-me-raise-to-work-remotely
---
Last week, I wrote about one of the most contentious topics with regards to working remotely. Is it [fair to cut someone's pay](https://dev.to/hrishikesh1990/pay-cut-to-work-remotely-fair-deal-40fo) if they are given the benefit to work remotely?

Almost everyone on DEV & Twitter was vocal against this calling it absolutely unfair & presenting a multitude of reasons as to why it makes no sense.

So I want to follow up with an **appeal to every employer** on why they should offer a pay raise for asking employees to work remotely.

{% twitter 1318906362181505029 %}

## Remote work = increased expenses. Pay more to cover those expenses.

Every company expects their employees to have top-notch work setup with minimal disturbance. Our homes are not made for that and we need to spend money for:

- Setting up a proper home office (table, chair, laptop stand etc.)
- Setting up primary & backup internet & power connection
- Additional bills for electricity, water, heating etc.

On the contrary, companies save huge costs on:

- Rent
- Power
- Internet
- Food
- Maintenance staff

{% comment 173kb %}

## Remote work = more hours & more work done. Pay more for the additional effort.

Take any survey, conducted even in the middle of a global pandemic, and you'll see higher numbers in productivity & work hours for remote vs. in-office (latest example - [Reuters' survey](https://www.reuters.com/article/us-health-coronavirus-technology-idUSKBN2772P0)). Numbers are even higher when we look at surveys pre Covid.

All of this presents a very strong inference: Remote work results in more work done in less time. If that's the case, companies must pay higher compensation to remote employees.

{% comment 173l3 %}

## Remote work = access to jobs across the world. Pay more to retain talent.

When you hire someone, you pay him/ her to do the job. The pay shouldn't change just because the employee is now getting the same job done from their home or elsewhere.

On the contrary, the ability to work remotely opens up an entire new set of global jobs for remote workers. If you aren't going to compensate your remote employees fairly, they will switch to a company that fairly values their time, effort & skill.

{% comment 173kn %}

Remote work is a serious competitive advantage for companies. Pay fair and trust your employees to make remote work work for you.

**I write regularly about tech, products, startups on [Twitter](https://twitter.com/hrishiptweets). You can [follow my updates there](https://twitter.com/intent/user?screen_name=hrishiptweets).**
TIL: How to use async pipe and populate mat-select
Tags: angular, todayilearned
Published: 2020-10-27 13:13:12

I was trying to use `async | pipe` directly on the view to get all the country list and populate my `mat-select` dropdown. The `countrySelector` component has a `countryList$` observable which gets all the country from a service like so:
```typescript
 ...
  ngOnInit(): void {
    this.countryList$ = this.countryService.getCountries();
  }
 ...
```
Then in my view, I use `ng-container` with an `*ngIf` clause to check if the country list is available.
```html
<ng-container *ngIf="countryList$ | async as countryList">
```
I then use the `countryList` and populate the `mat-select` which uses `*ngFor` to go through the list of countries and add a `mat-option` for each of the item. It also has a poperty `onSelectionChange` which fires an event when a selection is changed. My final view will look something like this:

```html
<ng-container *ngIf="countryList$ | async as countryList">
 <mat-select>
  <mat-option *ngFor=" let country of countryList 
     [value]="country"
     (onSelectionChange)="changeCurrentSelection($event, 
     country)">					 
    {{country.name}}
  </mat-option>
 </mat-select>
</ng-container>
```
This way I can populate the mat-option without having to assign it to any variable on the component and directly use it in the view.

Please let me know if there are any other better ways to do it.
Tool for transforming any function into an API in seconds!
Tags: showdev, python, api
Published: 2020-10-27 13:11:59

[APIs](https://en.wikipedia.org/wiki/Web_API) are the way to expose your creations to the web. But it can be a bit frightening to learn how to create APIs from scratch, and sometimes it may even require you to **re-write your code** to match a certain framework. That's why I built [Asymmetric](https://github.com/daleal/asymmetric)! With Asymmetric, you can add 1 line to any function you have already written and **immediately** transform it into an API. Let's see an example! Imagine that you have the following method on your _beautiful_ machine learning python file named `predictor.py`:

```python
def predict(attributes, values):
    """
    Predict something and return a list of possible values for the input data.
    """
    predictions = MyModel.predict(attributes, values)
    return predictions
```

To transform that into an API, all you need to do is to add a decorator on top of your function! First, install Asymmetric with your terminal using `pip`:

```sh
pip install asymmetric
```

Now, back in your `predictor.py` file, decorate your function!

```py
from asymmetric import asymmetric

@asymmetric.router("/predict")
def predict(attributes, values):
    """
    Predict something and return a list of possible values for the input data.
    """
    predictions = MyModel.predict(attributes, values)
    return predictions
```

To run your API, just use **the `run` command** from your terminal! Remember to target the file containing your decorated function! (don't include the `.py` extension):

```sh
asymmetric run predictor
```

And that's it! You have succesfully transformed your function into an API! You can now make `POST` requests to `http://localhost:8000/predict`, passing in the request body the parameters of the function! Let's see an example using `httpx`!

```py
import httpx

parameters = {
    "attributes": ["color", "texture"],
    "values": [15.7, 8]
}

response = httpx.post("http://localhost:8000/predict", json=parameters)

print(response.json())
```

You should see the result of your prediction! Asymmetric has a ton of other _features_, such as _automagic documentation_ and _callback_ endpoints! [Go check out the project!](https://github.com/daleal/asymmetric) If you have any questions, don't hesitate to ask them! And if you like the project, a star would be massively appreciated :heart:
Fix Your Web Scrapers with This 15 Point Checklist

Published: 2020-10-27 13:09:46

Web scrapers are known to die on us. It's because so much is dependant on things on the internet we cant control. We at Proxies API always say if you want to understand the internet build a web crawler.web scraping tools, web scraping, web scraping api, best web scraping tools, web scraping tools open source
Installing MySQL Workbench And XAMPP on Ubuntu-18.04 and higher
Tags: opensource, database
Published: 2020-10-27 13:08:41

What is MySQL Workbench?

MySQL Workbench is a cross-platform graphical user interface tool used for MySQL database management. Mainly, this tool is used by database architects, administrators, and database developers to visualize the design of the database.

Step 1: 
- Download MySQL workbench from the below URL https://dev.mysql.com/downloads/Workbench
- Select your operating system
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/61xum5s3yzktcc2g2rty.png)

- select a suitable version for your operating system
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7dqnr99cegt1m4nsouh7.png)

- After selecting the version that suits your OS, click download. On the next page, click “No thanks, just start my download”
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/he5vnmuoeb1rm8oluml4.png)

Step 2: 
Once the download is completed, you click on the downloaded file in the directory which you saved it.
A page like this will open, which is a re-direct of the workbench file in the Ubuntu App Store.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vtn5rpwxyht6u5h99dui.png)

Step 3: 
Once the installation process is complete, launch workbench using the app launcher.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5cm4o0k3c1xml1hj8qgo.png)

Now let’s proceed to install XAMPP on Ubuntu 18.04 or higher

What is XAMPP?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cgixyg270hq4nm1a0xi9.jpeg)

XAMPP is the most popular PHP development environment
XAMPP is a completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.
Reference ===> https://www.apachefriends.org/index.html

Step 1:
Select the version you want to download specific to your OS. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5vv4mzuqwv913sg5tojv.png)

Step 2:
Open your terminal and navigate to the folder where you downloaded the XAMPP installer
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hwfr28gg3th627u7zebj.png)

Step 3: 
write the following code into the terminal and input your password when you are prompted to 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ye5txfusygsshb8mpeig.png)

You can then proceed with the installation process
Scraping Most Active Stocks data from Yahoo Finance with Python and Beautiful Soup

Published: 2020-10-27 13:06:21

Today we are going to see how we can scrape Most Active Stocks data using Python and BeautifulSoup in a simple and elegant manner.

The aim of this article is to get you started on a real-world problem solving while keeping it super simple so you get familiar and get practical results as fast as possible.

So the first thing we need is to make sure we have Python 3 installed. If not, you can just get Python 3 and get it installed before you proceed.

Then you can install beautiful soup with:

We will also need the libraries requests, lxml and soupsieve to fetch data, break it down to XML, and to use CSS selectors. Install them using...

Once installed open an editor and type in...

Now let's go to the Yahoo Most Actice Stocks page and inspect the data we can get.

This is how it looks:


Back to our code now... let's try and get this data by pretending we are a browser like this...

Save this as yahoo_stocks_bs.py.

If you run it...


You will see the whole HTML page

Now, let's use CSS selectors to get to the data we want... To do that let's go back to Chrome and open the inspect tool.

We notice that all the individual rows of data are contained in a with the class 'simpTblRow'. We can get BeautifulSoup to select that data like this.


This prints all the content in each of the rows.

We now can pick out classes inside these rows that contain the data we want. The symbol is in the element with the attribute aria-label with the value Symbol..

If you run it it will print out all the symbols...


Bingo!! we got the symbols...

Now with the same process, we get the other data like Name, price, change, change percentage, Market Cap, Volume, etc...


When we run it it will print out every detail we want like this...

We even added a separator to show where each symbol data ends. You can now pass this data into an array or save it to CSV and do whatever you want.

If you want to use this in production and want to scale to thousands of links then you will find that you will get IP blocked easily by Yahoo. In this scenario using a rotating proxy service to rotate IPs is almost a must.

Otherwise you tend to get IP blocked a lot by automatic location, usage, and bot detection algorithms.

Our rotating proxy server Proxies API provides a simple API that can solve all IP Blocking problems instantly.

With millions of high speed rotating proxies located all over the world,
With our automatic IP rotation
With our automatic User-Agent-String rotation (which simulates requests from different, valid web browsers and web browser versions)
With our automatic CAPTCHA solving technology,
Hundreds of our customers have successfully solved the headache of IP blocks with a simple API.

The whole thing can be accessed by a simple API like below in any programming language.

We have a running offer of 1000 API calls completely free. Register and get your free API Key here.
TOP-3 job remotely for developers 💻🚀
Tags: ruby, javascript, java, node
Published: 2020-10-27 12:57:05

https://www.remotely.jobs/
https://www.remotely.jobs/categories/remote-software-development-jobs/

1. Front-End Engineering Lead - Fluix team (https://www.remotely.jobs/remote-front-end-engineering-lead-fluix-team-job-at-readdle) (Readdle)

- TypeScript
- AngularJS + Angular (via ngUpgrade)
- React, Redux, Styled Components

2. Sr / Mid TypeScript Full Stack developer (https://www.remotely.jobs/remote-sr-mid-typescript-full-stack-developer-job-at-zaly) (Zaly)

- Strong proficiency in TypeScript and JavaScript
- Thorough understanding of React.js and its core principles

3. Ruby developer  (https://www.remotely.jobs/remote-ruby-developer-job-at-yalantis)(Yalantis)

- 3+ years of software engineering experience with Ruby (desirable Ruby 2.6 and RoR 5.2) 
- experience with the deployment of web applications
Rails 6, Stimulus  events
Tags: ruby, rails
Published: 2020-10-27 12:54:57

An action is a connection between:

* a controller method
* the controller’s element
* a DOM event listener


**gallery_controller.js**

```
// controllers/gallery_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  next(event) {
    alert("Justclick !!! :")
  }
}
```
##### View File Setup
```
<div data-controller="gallery">
  <button data-action="click->gallery#next">…</button>
</div>
```

##### Descriptors
The data-action value click->gallery#next is called an action descriptor. In this descriptor:

* click is the name of the DOM event to listen for
* gallery is the controller identifier
* next is the name of the method to invoke

##### The full set of these shorthand pairs is as follows:

![Screenshot 2020-10-27 at 6.24.03 PM](https://dev-to-uploads.s3.amazonaws.com/i/9jqk87rgkbp6v8xv77d1.png)

I hope that helps someone. Thanks :).
 
Thanks for reading. 🙂

I’d love to hear thoughts or comments around this. Feel free to email me at ronakabhattrz@gmail.com or hit me up on twitter, @ronakabhattrz.
How to React Native Framework reduce cost of Mobile App Development?
Tags: react, reactnative, javascript
Published: 2020-10-27 12:44:09

Read here short details about What is React Native and how does it work in mobile application.

REACT NATIVE helps you produce real and exciting mobile apps with the assistance of JavaScript solely, that is endurable for each ANDROID and IOS platforms. Simply code once, and therefore the REACT Native apps are on the market for each IOS and ANDROID platforms that helps to save lots of development time. Found an excellent quality and additionally backed by Facebook, REACT Native, encompasses an immense community support these days. React Native is made on top of ReactJS that has given an enormous competition to the long-time favourite, AngularJS.

The operating principles of REACT NATIVE are essentially an equivalent as REACT JS except that it's not manipulating the DOM via the Virtual Dom however some native views. It runs during a background method (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native platform via a serializable, asynchronous and batched Bridge.

How does React Native Work?

    There are TWO significant threads running in each React Native application:
    One of them is that the dominant thread, that additionally runs in every commonplace native app. It handles displaying the elements of the interface and processes user gestures.
    The other one is restricted to React Native. Its task is to execute the JavaScript code during a separate JavaScript engine. The JavaScript deals with the business logic of the application. It conjointly defines the structure and also the functionalities of the interface.
    These TWO threads never communicate directly and never block each other.

Learn more here Why Use React Native for Mobile App Development? https://www.quora.com/How-do-you-use-the-React-Native-framework-to-reduce-your-cost-for-mobile-app-development/answer/Jatin-Panchal-11
Ondersteuning voor McAfee-activering
Published: 2020-10-27 12:43:12

We hebben een toegewijde technicus voor McAfee-activering. Als u een probleem heeft met uw McAfee Antivirus, bel ons dan gratis op + 32-28081298. Bezoek <a href="https://bellentelefoonnummerbelgie.com/contact-mcafee-klantenservice-belgie.html">mcafee Ondersteuning belgium</a> of bereik ons via chat. Uw probleem wordt ter plaatse verholpen.
Uncaught Error: Minified React error #200
Tags: react, webpack
Published: 2020-10-27 12:42:24

My code like this, getting error Uncaught Error: Minified React error #200

how to fix this error anyone help me 

thank you in advance 
app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

 class Mainapp extends Component {
    render(){
        return(

    <h2>Main Page</h2>

        )
    }
}

ReactDOM.render(<Mainapp />,document.getElementById("main-content"));


index.html

<html>
<head></head>
<body>
<div id="main-content">
</div>

<script src="dist/main.js" charset="utf-8"></script>

</body>
</html>
Guide to Install Odoo V13 Using Docker
Tags: odoo, odooerp, odooimplementation
Published: 2020-10-27 12:40:51

To run Odoo on docker, we have to set-up two docker containers. For that, we can use docker images

Odoo Image: Odoo has an official image (Odoo Image) on the Docker in order to install Odoo on the docker virtual environment.
Postgress Image: Odoo uses Postgres SQL to store and manipulate its data. So before configuring Odoo image, we have to make sure that a Postgres image is properly running on our docker environment.
Install docker(Ubuntu 18.04)

First of all, we have to make sure that every required package is properly installed in the system in order to run the docker.

sudo apt install apt-transport-https ca-certificates curl software-properties-common

About IQodoo Expert

We are an <a href="https://iqodooexpert.com/">odoo development company</a> that got established in 2012. The company provides services like <a href="https://www.iqminds.com/odoo-customization-services/">Odoo ERP Customization</a>, <a href="https://www.iqminds.com/odoo-erp-implementation-services/">Odoo ERP Implementation</a>, Odoo Integration, Source Code Sale, Odoo Support, and ERP Development. We offer 350+ odoo apps and plugins for the odoo app store.
On .NET Episode: Getting started GraphQL APIs with HotChocolate
Tags: graphql, dotnet, webapi
Published: 2020-10-27 12:26:01

Hot Chocolate is a GraphQL platform for that can help you build a GraphQL layer over your existing and new infrastructure.

In this episode, we're joined by the author of Hot Chocolate, Michael Staib, who shows us how we can start creating GraphQL based Web APIs with Hot Chocolate and some other delicious deserts.

{% youtube Hh8L6I2BV7k %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).

#### Useful Links
 
<ul>
<li><a href="https://github.com/ChilliCream/hotchocolate" target="_blank">Hot Chocolate on GitHub</a></li>
<li><a href="https://github.com/ChilliCream/graphql-workshop" target="_blank">GraphQL Workshop</a></li>
<li><a href="https://chillicream.com/blog/2020/07/16/version-11" target="_blank">What is up with 11 of Hot Chocolate?</a></li>
<li><a href="https://docs.microsoft.com/aspnet/core/web-api/?WT.mc_id=ondotnet-c9-cephilli" target="_blank">Create web APIs with ASP.NET Core</a></li>
</ul>
How to hide API KEY in GitHub repo
Tags: github, git, javascript, node
Published: 2020-10-27 12:33:29

## How to hide API keys in github repo ##

If you have going to push your local code on GitHub, so it is a best practice to hide your sensitive data like `API KEY`, follow this guide to remove the sensitive info.

- In the terminal, create a `config.js` file and open it up:
```js
Code config.js
```
- In the config file, enter your API keys in an object like so (naming them whatever you like, and putting the keys in as strings). You don't need any other code in this file:

```js
var config = {
  MY_API_TOKEN : '12345',
  SECRET_API_KEY : '56789',
}
```

- In your HTML file, add a script link to this file BELOW your javascript but ABOVE your own script file links:

```html
<script type='text/javascript' src='config.js'></script>
```

- In your javascript file (probably `script.js`), declare variables that point to your `API keys` in the config file like so. Note that the `config` here refers to the object called 'config', NOT to the file `config.js`:

```js
var token = config.MY_API_TOKEN;
var key = config.SECRET_API_KEY;
```

- Be sure to replace every instance of the API keys with these new variables. 
E.g. if you had:
url: `'https://www.your-api-host.com/?query&token=12345&key=56789'`
Now you will have:
url: `'https://www.your-api-host.com/?query&id=' + token + '&pass=' + key`

- In the terminal create a .gitignore file and open in atom. Note the period at the start of the file name: 

```js
Code .gitignore
```

- In the `.gitignore` file, enter any file names that you want git NOT to `track`/`commit`/`push`. No other code is necessary. 
In this case you would enter:

```js
config.js
```

- Type git st. You should see the `.gitignore` file ready to be tracked. You should NOT see the `config.js` file.

- `git add .`, and git st again. Make sure the `config.js` file didn't get added. If everything looks good, you're ready 
to commit and push.