teleren/devto huggingface dataset:
What are, Mixins?
Tags: javascript, beginners, codenewbie, webdev
Published: 2020-09-12 19:23:37


### Introduction

Throughout all the blog posts on my blog, we have realized that prototypical inheritance works reasonably well in JavaScript. We do know; however, there is only one [[Prototype]] for each object. It means that an object can only inherit from one other object. The same goes for classes as we can only extend from one other class. JavaScript doesn't support multiple inheritance.

A mixin could is a class that has methods which we can use in our class without inheriting from the mixin class. It is a way of adding properties to object without using inheritance.

In theory, it would look something like this.

* Inheritance in classes

```javascript
class B extends A {}
```

* Inheritance but with Mixin (M1)

```javascript
class B extends A with M1 {}
```

* Inheritance with multiple Mixins (M1, M2, M3)

```javascript
class B extends A with M1, M2, M3 {}
```

The complete secret sauce of mixins is in `Object.assign`!

### Implementation

#### For Objects

```javascript
cconst employee = {
    name: "John Smith",
    age: 30,
    gender: "male"
}

const payroll = {
    duration: "monthly",
    amount: 7000,
    currency: "dollars"
}

const benefits = {
    retirement: true,
    savings: true,
    health: true,
    dental: false
}

const employeeProfile = Object.assign({}, employee, payroll, benefits);

console.log(employeeProfile);
```

The output on the console will be:

```javascript
{ name: 'John Smith',
  age: 30,
  gender: 'male',
  duration: 'monthly',
  amount: 7000,
  currency: 'dollars',
  retirement: true,
  savings: true,
  health: true,
  dental: false }
```

Yes, this is what a mixin does. It allows us to combine the properties of different objects into a single object (in simplest terms). The `Object.assign` copies all enumerable properties from one or more source objects to a target object. The first argument is the target object, followed by all source object(s).

#### For Classes

```javascript
let employeeDetails = {
    returnName() {
        console.log(`The employee is ${this.name}`);
    },
    subscribesToDental () {
        console.log(`Employee ${this.name} does ${(this.dental) ? "" : "not "}subscribe to dental benefits`);
    }
};

class Employee {
    name;
    dental;
    constructor(name, dental) {
        this.name = name;
        this.dental = dental;
    }
}

Object.assign(Employee.prototype, employeeDetails);

new Employee("Parwinder", false).returnName();
// The employee is Parwinder
new Employee("Parwinder", false).subscribesToDental();
// Employee Parwinder does not subscribe to dental benefits
new Employee("Robert", true).subscribesToDental();
// Employee Robert does subscribe to dental benefits
```

🚨 Javascript supports the use of `super` keyword now. Mixins are not able to support `super` as it is lexically bound!
C# REPL
Tags: csharp, dotnet
Published: 2020-09-12 19:20:07

Having a quick C# REPL can help a lot on testing little snippets of code.

# .NET Fiddle

The quickest one is probably [.NET Fiddle](https://dotnetfiddle.net/), which can be accessed by your web browser and don’t required any setup or registering:

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

# csi.exe

There’s a C# REPL in Visual Studio on `View > Other Windows > C# Interactive`:

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

Which opens:

![](https://dev-to-uploads.s3.amazonaws.com/i/564b6vr7brg0cxcu117a.png)

You can also fire `csi.exe` directly outside of Visual Studio:

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

Having Visual Studio 2017 Enterprise and Visual Studio 2019 Community installed on my Windows machine, I’ve managed to find it on:

```
C:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\MSBuild\15.0\Bin\Roslyn\csi.exe

C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin\Roslyn\csi.exe
```

# dotnet-script

It seems that `csi.exe` is not available for folks using .NET Core on Linux yet. Fortunately, there’s [dotnet-script](https://github.com/filipw/dotnet-script):

```
$ dotnet tool install -g dotnet-script
You can invoke the tool using the following command: dotnet-script
Tool 'dotnet-script' (version '0.53.0') was successfully installed.
$ dotnet script
> Math.Pow(3, 2)
9
```

# csharprepl (.NET 7)

If you are already on .NET 7 you can install [csharprepl](https://github.com/waf/CSharpRepl):

```
dotnet tool install -g csharprepl
```

Just call `csharprepl` from your terminal and you'll drop into a fully functional REPL (syntax highlight, auto complete, documentation, etc):

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqq1v2je9ulzh6a24j7q.png)

# Other alternatives

I haven’t tested it myself, but a quick search gives [LINQPad](https://www.linqpad.net/) and [CS-Script](https://www.cs-script.net/) as alternatives.
How to Customize Prev/Next Buttons in React SwiperJs
Tags: swiper, webdev, react, carousel
Published: 2020-09-12 19:16:48

I was asked [on YouTube](http://www.timoernst.tv) to explain how to customize the appearance of the prev/next arrows in the [React version of Swiper Js](https://swiperjs.com/react). There are 2 methods. One is to simply overwrite the color value. The other one is to completely replace the image. Follow along to learn how to accomplish both.

## 1. Change Color of Swiper Arrows
To change the colors of the prev/next arrows you can overwrite css like this:
```
.swiper-button-next { color: red; }
```
Result:

![Replace color of swiper js arrows](https://dev-to-uploads.s3.amazonaws.com/i/f4beigz09gu32ajn7t17.jpg)

## 2. Replace Image of Swiper Arrows

In our example we use an svg to replace the original image. However, if you want you can also use any other web compatible image format you want like png, jpeg etc…

```
.swiper-button-next {
  background-image: url(./next.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-next::after {
  display: none;
}
```

Result:

![Replace color of swiper js arrows](https://www.timo-ernst.net/wp-content/uploads/2020/09/react-swiper-replace.jpg)

To change the arrow on the left replace class `swiper-button-next` with `swiper-button-prev`. Also keep in mind that there is a class called `swiper-button-disabled` which shows an arrow in a opaque way, so you probably want to overwrite that one as well.

If you want to learn more I have provided a working demo for you and also uploaded the full code to GitHub. Click the links below to find out more. Also, if you want feel free to follow me on Twitter or visit me on YouTube.

Links:
- [Demo Website](https://www.timo-ernst.net/misc/swiper-react-arrow-colors)
- [GitHub Repository](https://github.com/valnub/swiper-react-arrow-colors)
- [My Blog](https://www.timo-ernst.net/)
- [Follow me on Twitter](https://www.twitter.com/timo_ernst)
- [My YouTube Channel](http://www.timoernst.tv/)

Have more questions about Swiper Js or web development tutorials in general? Leave a comment down below :-)
Javascript: Predicate
Tags: javascript, codenewbie, womenintech
Published: 2020-09-12 17:43:10

In Javascript, functions are first class objects. Functions can be assigned used as a values. One such type is *Predicate*, as the name suggest refers to a function that accepts an input and returns boolean(true/false) as an output. Let's look at example.

<code>const Person={name:"John",age:30,height:5.6}</code>

We have defined a Person object with name, age and height field. Now we will check if age of the object is more than 25.

<code>const isAbove25=((p)=>p.age>25);</code>
<code>p=Person();</code>
<code>console.log(isAbove25(p));</code>

Here it will print true as output.

### filter

filter() iterates through each element of array and returns elements that satisfies the specified condition. filter() loops through each element of an array and invokes predicate on each element. 

<code>const numbers=[2,5,7,3,9,15,18,29];</code>

Let's find numbers that are divisible by 3 using a predicate.

<code>const isDivisibleby3((x)=> x%3===0);</code>
<code>const result=numbers.filter(x => isDivisibleby3(x));//[3,9,15,18]</code>

### some

some() loops through elements of an array in ascending order, and invokes predicate on each element of an array. If predicate returns true, then looping stops and returns true immediately.

<code>const isDivisibleby3((x)=> x%3===0);</code>
<code>const result=numbers.some(x => isDivisibleby3(x));//true</code>
Here 3 is found matching the criteria immediately the loop stops and true is returned as output.

### find

find() iterates through each element of array and returns first element that satisfies the specified condition. find() loops through each element of an array and invokes predicate on each element.  

<code>const isDivisibleby3((x)=> x%3===0);</code>
<code>const result=numbers.find(x => isDivisibleby3(x));//3</code>

### findIndex

findIndex() iterates through each element of array and returns first matched element index that satisfies the specified condition. find() loops through each element of an array and invokes predicate on each element.  

<code>const isMoreThan10((x)=> x>10);</code>
<code>const result=numbers.find(x => isMoreThan10(x));//5</code>

That's all for now, but the predicates can be used with other functions as well. 
Predicates are more over like lambda, but predicate takes single input and returns only boolean. Predicates are used only for testing objects against criteria.

Happy Coding!
Spread Syntax
Tags: javascript
Published: 2020-09-12 18:51:02

The spread operator is one feature of JavaScript which I often overlook. This week, I wanted to take a deeper look into spread syntax and write a short summary of the benefits.

First, and probably the most common use of the spread operator, shallow-cloning. Sure, we can get a shallow copy of an array from the slice method, but the spread syntax looks a little cleaner to me.

```javascript
let arr1 = [1, 2, 3];

// slice
let arr2 = arr1.slice();

// spread
let arr3 = [ ...arr1 ];

// arr2 value: [1, 2, 3]
// arr3 value: [1, 2, 3]
```

We can also use the spread operator to get a shallow copy of an object.

```javascript
let obj1 = { v1: 0, v2: 1 };

let obj2 = { ...obj1 };

// obj2 value: { v1: 0, v2: 1 }
```

Another great use of the spread operator, array concatenation.

```javascript
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// concat
let arr3 = arr1.concat(arr2);

// spread
let arr4 = [ ...arr1, ...arr2 ];

// arr3 value: [1, 2, 3, 4, 5, 6]
// arr4 value: [1, 2, 3, 4, 5, 6]
```

You're able to merge objects this way as well.

```javascript
let obj1 = { v1: 0, v2: 1, v3: 2 };
let obj2 = { v2: 10, v3: 20 };

let obj3 = { ...obj1, ...obj2 };

// obj3 value: { v1: 0, v2: 10, v3: 20 }
```

It's also possible to pass multiple arguments to a function or method, using the spread operator.

```javascript
const add = (a, b) => {
    return a + b;
}

let args = [10, 11];

let result = add( ...args );

// result value: 21
```

I do think that spread syntax can help to improve the cleanliness of our code. If you know of any other neat tricks or tips, please leave a comment below.
Have you ever had multiple offers to weigh before?
Published: 2020-09-12 18:50:24

I see this all the time - "interview around and make sure that you're getting the best deal at a company you value" is the type of saying I see in various areas by bloggers and engineering influencers. I'm curious to see how many engineers actually do get multiple offers to weigh because I feel that while this is good advice, it comes from an assumption a certain amount of leverage that the engineer must have in order to garner multiple offers whether that be through references, experience, expertise, saved money, etc.

I personally have never had multiple offers and I believe it is because:

1. I have never really had the monetary leverage to wait and interview long enough to get them. 
2. I am normally really bad at technical interviews.

So the question is, **have you ever had multiple offers to weigh before and why**? 

If you have, what do you think contributed to that (timing, money, experience, etc)? If you haven't and you're comfortable with saying why you took the first offer you got, please reply!
3 Tools and 2 Commands to Improve Your Git Workflow
Tags: git, tooling, workflow
Published: 2020-09-12 18:38:05

Let's start with tools. Takes only a couple of minutes to set them up and soon it will be painful to use Git without them.

## [Micro](https://micro-editor.github.io) as Default Editor

Unless you're using Vim as your main IDE, you need something that resembles your GUI editor but on the command line, with standard navigation, mouse support, and syntax highlighting. [Micro](https://micro-editor.github.io) is exactly that.

Install and set it as your Git editor:

```bash
git config --global core.editor micro
```

![micro@2x](https://dev-to-uploads.s3.amazonaws.com/i/kwn62r36kaqm9wrmykk9.png)
 

## [diff-so-fancy](https://github.com/so-fancy/diff-so-fancy) Instead of Default Diff

Standard diff is fine, but with minimal effort, it can be even better. Take a look, left - standard, right - [diff-so-fancy](https://github.com/so-fancy/diff-so-fancy).

![diff-so-fancy@2x](https://dev-to-uploads.s3.amazonaws.com/i/jso3buzxns35nli0ct9n.jpg)

Less clutter and more information. Install it and modify the config:

```bash
git config --global core.pager "diff-so-fancy | less --tabs=4 -RFX"
```

## [git jump](https://github.com/mykolaharmash/git-jump) for Better Experience With Branches

I've built this tool to fulfill my own need, but the feedback confirmed that other people have the same issues when it comes to dealing with a large number of Git branches.

[git-jump](https://github.com/mykolaharmash/git-jump) puts recently used branches on top of the list, has fuzzy-search, and interactive UI among other things.

![git-jump](https://dev-to-uploads.s3.amazonaws.com/i/bahhnc8h3f8nr61dwx3o.gif)

No setup required, just install and use.


---


Now to the commands.

## Get a Single File From a Different Branch or Commit

Messed up a file? No need to go to GitHub or stash changes to look it up in a different branch. 

```bash
git restore --source=<commit or branch> <file path>
```

## Fixup and Squash

This one requires some habits adjustments, but it's worth it.

While doing code-reviews this is a very common workflow:
1. Push changes in a single commit with a nice message
2. Collect feedback from teammates
3. Create a bunch of other commits with messages like "fix", "review", etc.
4. Squash all commits into the first one with the clean message

Now, on step 3, use `git commit --fixup=HEAD`. This will re-use commit message from the previous commit and add `fixup!` prefix to it.

Next, on step 4, use `git rebase -i --autosquash <rebase target>`. `--autosquash` flag will mark `fixup!` commits to be squashed automatically. You just need to save and quit rebase editor.

And sure, set up your own shortcut aliases. Real time-saver.

![fixup](https://dev-to-uploads.s3.amazonaws.com/i/z7mda0plvdq5hj6swcnr.png)

---

Hope you've picked something for yourself. Please leave a comment with your personal Git tweaks. 👋 

[Follow me on Twitter](https://twitter.com/mykolaharmash), I post there useful dev stuff.
Shorten up huge URLs to a small link
Tags: actionshackathon, webdev, showdev, javascript
Published: 2020-09-12 18:36:20

Today I created a node app to get generate a small link for a long website link.

## How to use:

### Request

![request](https://ishanbagchi.github.io/Ishan-Tech-Blog/day5/images/request.PNG)

I am using [Hoppscotch](https://github.com/hoppscotch/hoppscotch) to play with my routes. You may use any tools like Hoppscotch, [Postman](https://www.postman.com/), etc. Here I am creating a POST request to the URL `https://ishan-us.herokuapp.com/api/url/shorten` with content type _application/json_ and a Parameter name _longUrl_ with the value of any large URL you want to compress. That's it!!!

### Response

![response](https://ishanbagchi.github.io/Ishan-Tech-Blog/day5/images/response.PNG)

View the response in a JSON format. you can see a response with status _200_. The longUrl is the actual site where the user will be redirected, and the shortUrl is your generated small URL. 

> I automated the workflow of this project with [GitHub Actions](https://github.com/features/actions).

It was my first ever Actions so I was super duper excited. After clicking the Actions option in my repository, the below page appeared

![Actions get started](https://ishanbagchi.github.io/Ishan-Tech-Blog/day5/images/actions-get-started.PNG)

I selected the set up your workflow yourself option to get started.

## My Workflow
The name of my Github Actions is `Node.js CI`. It runs the following code every time something is pushed on the master branch, or if a pull request is made to the master branch.

```bash
npm ci
npm run build --if-present
npm test
```

After I created my .yml file and ran my workflow, this page displayed after building.

![build image](https://ishanbagchi.github.io/Ishan-Tech-Blog/day5/images/actions-build.PNG)

## Submission Category: 

Wacky Wildcards

## Link to Code

[@ishanbagchi/url-shortner](https://github.com/ishanbagchi/url-shortner)

## Note: 

> The collaboration to the project is open to all.
C++, C#, Java, Kotlin, Python, JavaScript . Which Has Better Opportunities and a Future 
Tags: kotlin, python, javascript, java
Published: 2020-09-12 18:32:38

Which programming language do you choose and why? 

I’ve been concentrating on React/Vue and now Python for a while (I prefer React and like the possibilities of python/Django) But it seems like Python is I demand really for Machine Learning and Data science.... but it’s more like you need College to be taken seriously? 

Out of the others mentioned .... which has a great outlook?
A  way to avoid callback hell for functions from older modules: 
Published: 2020-09-12 18:32:15

We can use async and await to avoid callback hells but when we are using any functions from older modules that use callbacks we could use some workarounds to avoid using callbacks. One such workaround is using deferred objects from the module q. The q module has a lot of methods to deal with promises but let’s just focus on how to avoid callbacks. 

Let’s see an example 

In node  when we read files using the fs module the old way of using it was to use callbacks
```javascript
const fs=require("fs");

fs.readFile("content.txt","utf-8",(err,data)=>{
 
    if(err){
        console.log(err);
        return;
    }
    console.log(data);
})

```
Now if we don’t want to use callbacks for this kind of functions we can make use of modules like q

```javascript
const fs=require("fs");
```
Require the module
```javascript
const q=require("q");
```
Create a deferred object and in place of the callback use the method makeNodeResolver and then we can return the deferred object as a promise. 
```javascript
function readfile(){
 
  let deffered=q.defer();
 
 fs.readFile("content.txt","utf-8",deffered.makeNodeResolver())
  return deffered.promise;
 
}
```
And then we can use those promises just like any other promises. 
```javascript
readfile().then(function(data){
 
    console.log(data);
})
```
 

Or with async-await 
```javascript
var readfile2=async ()=>{
    const text= await readfile();
    console.log(text)
}
 
readfile2();
```
The q module has very good documentation and a lot of ways to handle functions that return promises. Do check it out. 

There are a lot of other ways just wanted to share this one too.
Create a full fake "REST API" with zero coding in less than 30 seconds (seriously).

Tags: webdev, react, npm
Published: 2020-09-12 18:02:58

# Why we need a Fake REST API?

Let's say we are building a **React** application or **Angular** application (no pun intended 😉) where we need some data to get the gist/design of website & we are not having a back-end, or we might want to set-up a server or we might think setting up a backend is an arduous task (which really is😆).

#### So to solve this above stated problem **Fake REST API** comes to rescue.

The solution stated below is the easiest solution available to generate fake **REST API response**, so that we can entirely focus on building our application without worrying about the data.

There are some websites like [jsonplaceholder](https://jsonplaceholder.typicode.com) where we can generate have a **fake JSON response**, but there are a number of caveats to that solution. We need to work with the structure of the data that they provide. But most of the times this might not be beneficial to us. 

Instead we can get our own JSON API working(in like 30 seconds). Really it is this simple. Let us walk through this together.

* So first of all we need to have **Node**(any version) installed on your computer.


* Then we need to initialize a NPM repository by typing the following command in the terminal:
```
npm init
```

* Then, we need to type the following command to install a package called **json-server**:
 
```
npm install -g json-server
```

##### NOTE: The -g flag will install globally in to your machine.

#### Creating your own JSON structure.

* First of all, create a file name with **"file_name.json"**.For example let's say we have created a file called: 

```
db.json
```

* Now we need to define how your JSON structure should look like. For simplicity lets create the following structure:
```
{
  "employee": [
    {
      "id": "007",
      "Name": "John Wick",
      "email": "john@gmail.com",
      "age": 34
    },
    {
      "id": "008",
      "Name": "Mark Andreessen",
      "email": "mark@gmail.com",
      "age": 33
    }
  ]
}
```

* Finally, now its time to start the server which would serve the the JSON response by using the following command:
```
json-server --watch db.json
```
##### Note:- For this command to run the package should be installed globally.

### Finally your JSON response is generated and your output should look like :

![output](https://dev-to-uploads.s3.amazonaws.com/i/dwdkhg9fb2fwaausgoza.png)

You can see your JSON response by clicking on the **/employee** under the **Resources** & the superscript of **/employee** are the number of entries in the employee that you have entered.

![output1](https://dev-to-uploads.s3.amazonaws.com/i/np7dink8xmicpe8spnl4.png)

 
##### Refer the **json-server** docs for **Reference** & **more Features**.
[Docs](https://github.com/typicode/json-server)
My #100DOC - Day 17
Tags: challenge, 100daysofcode, log
Published: 2020-09-12 17:56:12

### Day 17: September 12, 2020

#### **Today's Progress**: 
1. **[Continued with The Complete JavaScript Course](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (2h 35min):<br>I did challenge 7 which served as a summary of everything seen in this section of the course. Also, I learned what they are and how to use Callbacks.
    
#### **What I learned**: 
* Review of section 5.
* JavaScript Callbacks.

#### **Total time**:
2h 35min.