teleren/devto huggingface dataset:
Clothing Style Detection & Recommendation System: Introduction
Tags: machinelearning, objectdetection, transferlearning
Published: 2020-06-14 18:32:12

E-commerce is growing rapidly across the world. The major advantage that e-commerce websites have over retail stores is the abundance of user data, which can be used to make recommendations for the user. Retail stores need to gain a better understanding of their users. 

As a solution to this problem faced by retailers, our team aimed to build a basic system that uses object detection to identify the clothing style worn by the customer. Clothing recognition can be used for smart customer analysis and for building their clothing profile. Once the clothing style has been identified, the system can suggest similar products from the store's database.

The solution implemented uses occasion wear to distinguish between various clothing styles. We use transfer learning to train an object detection model to identify clothing items in the input image and predict its style. This information is then passed onto a recommendation system that recommends similar clothing items on the basis of the predicted style.

In this series, I will go into the details of building this system. The complete detection and recommendation system was developed with @GauravAidasani, where I mostly focused on the style detection part, and hence it will be mostly focused on my contribution.
Implementing your own Generator using closure !!!
Tags: javascript, iterator, node, closures
Published: 2020-06-14 17:51:38

Here is a small program generating x to y numbers using generator in JS later we will implement equivalent function by using closure.

---

### Generating x to y numbers using Generator

---

```javascript
function *genXtoY(x, y){
  while(x < y)
    yield x++
  return x++      
}

const _iter = genXtoY(1, 5)

_iter.next() //{ value: 1, done: false }
_iter.next() //{ value: 2, done: false }
_iter.next() //{ value: 3, done: false }
_iter.next() //{ value: 4, done: false }
_iter.next() //{ value: 5, done: true }
_iter.next() //{ value: undefined, done: true }

```

---

### Generating x to y numbers using closure

---

```javascript
const genXtoY = (x, y) => {
  const next = () => {
    if(x <= y)
      return {value: x++, done: (x - 1 === y)}
    
    return {value: undefined, done: true}
  }
  return {next}
}

const _iter = genXtoY(1, 5)

_iter.next() //{ value: 1, done: false }
_iter.next() //{ value: 2, done: false }
_iter.next() //{ value: 3, done: false }
_iter.next() //{ value: 4, done: false }
_iter.next() //{ value: 5, done: true }
_iter.next() //{ value: undefined, done: true }

```
How to change electron forge's renderer port
Tags: electronforge, electron, webpack
Published: 2020-06-14 17:51:23

I just started using electron-forge and I stumbled across a problem : when trying to change the renderer's port (that runs by default on port 3000), my changes to the webpack file were ignored...

I found out on their [github](https://github.com/electron-userland/electron-forge/blob/master/packages/plugin/webpack/src/WebpackPlugin.ts) that they override the webpack config in their custom webpack (`@electron-forge/plugin-webpack`) package. But they still gave us two options (`port` and `loggerPort`) to achieve our needs and you can write them in the package.json like so : 
```json
{
    "config": {
        "forge": {
             "plugins": {
                 [
                      "@electron-forge/plugin-webpack",
                      {
                           "port": 3001, // default is 3000
                           "loggerPort": 9001,  // default is 9000
                      }
                  ]
             }
        }
    }
}
```

A bit too nested and undocumented if you want my opinion.
ES6 Modules in Node
Tags: javascript, tutorial, node
Published: 2020-06-14 17:49:19

### Tale of Two Options

For a long time, JavaScript existed without a clear standard for modules. That wasn’t a problem in the beginning, but as projects grew larger and more complex, there was a growing need for standardization as independent communities sprung up to invent their own ways of organize code. Two popular standards exist today:

- CommonJS (Node) – the module system created for Node.
- ES6 Modules (Native) – the specification written by ECMA TC39.

Because ES6 is the official specification, the Node community has made experimental strides to allow ES6 modules when working with Node.

### CommonJS

In Node, importing and exporting has traditionally worked like this:

```js
// index.js
var someVar = require("./constant");
console.log(someVar); // 33

// constant.js
const MPG = 33;
module.exports = MPG;
```

Now if you're running Node 13.x and above, you can use the ES6 modules syntax. Experimental support is enabled by default. You can achieve this by either:

- Using the .mjs extension
- Adding `{"type": "module"}` in the nearest parent package.json file.

Note that Node will treat all other forms as CommonJS, and this is for backwards compatibility.

The Node docs also recommends that it's best to be explicit about whether Node should treat a file as a CommonJS module or an ES6 module. You can achieve this by either:

- Saving the JS file with .cjs extension.

- Adding `{"type": "commonjs"}` in the nearest parent package.json file.

### ES6

Here, I've opted to change one line in `package.json` as opposed to renaming all of my JS files with a cjs extension. 

```js
// index.js
import fuelEconomy from "./constant.js"
console.log(fuelEconomy); // 33

// constant.js
const MPG = 33;
export default MPG;

// package.json
{
  ...
  "type": "module"
  ...
}
```

Here's the takeaway from all of this. You have two good options in Node: ES6 and CommonJS. You must choose one. You cannot selectively load some pieces of code as ES6 and other pieces as CommonJS. You pick one, and you make sure that Node understands how it should interpret your code.

Warmly,
DH
Clustering Algorithms: K-Means 
Tags: machinelearning, datascience
Published: 2020-06-14 17:48:53

### Introduction
K-Means is an unsupervised machine learning algorithm. The algorithm divides the data points into k groups (called clusters), where each data point can belong to only one cluster. K-Means aims to group together similar data points into the same cluster, while keeping different clusters as far apart as possible. 

![Working of K-Means Algorithm](https://dev-to-uploads.s3.amazonaws.com/i/4ubbljs0a4fyogifxuyf.png "Working of K Means Algorithm")

Each cluster has a center, which is a data point that represents the center of the cluster. A data point gets added to a cluster whose center is closest to that data point. Distance between points is measured using sum of squared distances method.

### Algorithm

 1. Select the number of clusters, k
 2. Appoint k data points as cluster centers (either random assignment, or space them as far apart as possible)
 3.  Until cluster assignments do not change, do the following for each data point:
	 1. Calculate the sum of squared distance between it and all the cluster centers.
	 2. Assign the point to the cluster having the closest center.
	 3. Recalculate the center for clusters by taking the average of all data points assigned to that cluster.

### Additional Information

 1. K-Means clustering is highly sensitive to the initially chosen cluster centers. Hence, K-means can be run with different starting cluster centers to get optimum results.
 2. If you do not know the optimum number of clusters to divide the data, try the algorithm with different values of k and select the best k for which the data gets nicely grouped together.

For further information, please checkout https://stanford.edu/~cpiech/cs221/handouts/kmeans.html (image taken from here)
How to avoid and debug most of timezone problems in production
Tags: node, nextjs, nestjs, timezone
Published: 2020-06-14 17:48:07

Have you ever been struggling to reproduce a weird bug happening only on production? 
Some offset between what you have in local (that obviously works perfectly) and what your clients see on this evil, inaccessible server?

If you're using anything other than Windows Server, there are chances your server is using the UTC timezone, which is not - unless you live in England - the same timezone than your computer.

The simplest solution to reproduce what's happening on your server is to set your timezone to UTC. And there is a way to run node in UTC without changing your computer timezone!

To use UTC as your node timezone, you can simply set it in the env before running node, like so : 
```bash
TZ=utc node index.js
```

 It also works with other timezones, for instance this would set the timezone to Amsterdam's one: 

```bash
TZ='Europe/Amsterdam' node server/index.js
```
I recommand setting it in your package.json to always develop to stay as close as possible to production's conditions. In my package.json it looks like this :
```json
{
    "scripts": {
        "dev": "TZ=utc nodemon --max_old_space_size=8192 server/index.js",
    }
}
```

And if you're not using UTC on production, you should definitely read [The worst Server Setup Mistake You Can Make](http://yellerapp.com/posts/2015-01-12-the-worst-server-setup-you-can-make.html).

Good luck debugging your timezone issues !
Fixing class-validator issues in a new Nest js project
Tags: nestjs, classvalidator, validationpipe, nest
Published: 2020-06-14 17:46:24

*This weekend, I played a bit with this express-based node.js framework called* **Nest**.

Let's remind first what is a DTO :

> A DTO (Data Transfer Object) is an object that defines how the data will be sent over the network. 

> It defines the shape of data for a specific case, such as creating an user:
> ```
CreateuserDto {
    name: 'john',
    password: 'isthissecureENOUGH??123'
}
> ``` 
>  Or updating the status of a shipping:
> ```
UpdateShippingStatusDto {
    status: 'ON_HOLD'
}
> ``` 

So, I love the concept of DTO and I was trying to validate it using `ValidationPipe`, just like [the doc](https://docs.nestjs.com/techniques/validation#auto-validation) says. It quickly went wrong:

## The "class-validator" package is missing. Please, make sure to install this library ($ npm install class-validator) to take advantage of ValidationPipe. 

![CleanShot 2020-04-05 at 15.44.34.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1586094310885/WYdLgXJ0t.png)

Oh. I thought it would work out of the box since ValidationPipe comes from `@nest/common`, but nevermind, the fix is easy :

```
npm install class-validator
``` 

No more errors in my console ! I carried on and sent a POST request on my endpoint...

## Nest: No metadata found. There is more than once class-validator version installed probably. You need to flatten your dependencies.

This one made me crazy. Should I install class-validator as a peer dependency ? Is it a problem in the yarn.lock or in package.json ?

Not at all ! It turned out that my DTO had _**zero**_ validation rules !

It's that simple : if you get a `No metadata found. There is more than once class-validator version installed probably. You need to flatten your dependencies.` when using `ValidationPipe`, triple-check that you have at least one validation rule.

For example:
```
import { IsNotEmpty } from "class-validator";

export class CreateUserDto {
    @IsNotEmpty()
    firstName: string;
    lastName: string;
}
```

[This stackoverflow comment](https://stackoverflow.com/a/55491966) saved the day. Thanks !
Join the triage team
Tags: opensauced, github, opensource
Published: 2020-06-14 17:28:29

Open Sauced is a project with the lofty goal making open-source more accessible to new contributors, so when I learned how ExpressJS was onboarding new contributors with their [new Triage team](https://github.com/expressjs/express/blob/master/Triager-Guide.md), I got very excited. The idea of having a triage or bug role is not new, but it is the first time I came across an open-source project approaching new contributor onboarding in this manner. 

The only requirements for joining the Triage team is accepting the terms and having the interest to learn.

I love this! And I had to follow this pattern with our project, so I am happy to announce the Open Sauced now has a [Triage team](https://github.com/open-sauced/open-sauced/blob/master/TRIAGE_GUIDE.md) too. 

![pizza-party](https://media.giphy.com/media/JNxjvjiYs3sr2ImDeO/giphy.gif)

If you are interested in getting into open-source for the first time or already a seasoned contributor, I encourage you to mention your interest in this [GitHub Discussion](https://github.com/open-sauced/open-sauced/discussions/638). This team has already provided valuable insight and product feedback and instrumental to making our goal of accessible open-source onboarding real. 

The only requirement for triage team members joining the team is creating an account on the [opensauced.pizza](https://opensauced.pizza) account; this requirement is needed for identifying and triaging bugs (be sure to create a goals repo too). Once you have signed up, please take a look at the [Triage Guide](https://github.com/open-sauced/open-sauced/blob/master/TRIAGE_GUIDE.md) and mention you have an interest by dropping a reply in [this discussion](https://github.com/open-sauced/open-sauced/discussions/638).

Remember all feedback is valid. We look forward to you joining the team. Stay saucy!
Well... This is It.
Tags: laravel, webdev, career, beginners
Published: 2020-06-14 17:26:35

<h2>Yeah... This is "It"</h2>

<p>My name is Dwayne, Dwayne Robinson and this is terrifying for me. Before I get to "this", let's do a quick introduction. You already know my name, and I'm a young lad from Kingston, Jamaica(25, is still considered young right?) Back in high school I had a strong passion for coding, back then I was mainly doing c programming and was fascinated with it. After high school, a university tuition was too much for my people to handle so I had to get a job and for many years turned my back on programming. It was still more or less a hobby so during that time I was messing around with a little bootstrap and JavaScript here and there. Time skip, here I am now. Stuck in a stagnant Tech Support 9 - 5. I used the opportunity to work from home during this Corona pandemic to take a few online courses from Coursera and Udemy to become the "Ultimate Full Stack Developer" and after 2 months of learning, here comes the "it"...</p>

<p>I said it was terrifying... Well that refers to this part, I've never had a strong online presence and shun social media so just introducing myself and opening up to you guys really scare me. I've been doing my research, and I understand the importance of building up a network and getting help from people who are at a higher level, so this is my attempt at doing so. I got inspired to do this after Google recommended an article on this website about another young guy who was a cook in Ghana and he made the switch to Web Development in April(his Name is Kofi, you can view his post <a href="https://dev.to/iamkarsoft/i-switched-4h28">here</a>) and now he's an intern! I thought that was awesome. </p>

<p>Getting back to the real "it"..., It will be my first serious project that I take on to build up my portfolio, and I will see it through to the very end no matter what obstacles or challenges I face. My girlfriend also has a hobby, she likes to craft, and makes really cool stuff (Check out <a href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwiK4_a14oHqAhVRSTABHWEABxQQFjAAegQIARAB&url=https%3A%2F%2Fwww.instagram.com%2Fwunderkrafts%2F%3Fhl%3Den&usg=AOvVaw3ZOS-FUNNh0egpME7AYHU3"> WunderKrafts</a> on Instagram) and my very serious project will be using Laravel to make an e-commerce website for her.</p>

<p>I'm confident enough that I can pull it off...(nervous laughter) and would like to share my journey and progress with all of you on here as I do so. I guess I'll try to provide weekly updates and would very much welcome any feedback, opinion, guidance, thoughts and ideas that <strong>anyone</strong> has to offer. </p>

<p>For those who managed to read through all of my ramblings, thank you for taking the time to hear me out, I really do appreciate it, and thanks for becoming a part of my journey.</p>
How to pass input data from one class to another
Tags: react, reactnative, javascript
Published: 2020-06-14 17:24:11

I'm trying to pass the data from one class to another and displayed it in main class i.e user write something in input field(Component A) and at the same time data or input value is display in another component(Component B) and both work is displayed by Component C. But I can't figure out what's wrong with my code. Below is my dummy code but the actual code is the same as below.

```
class A extends React.Component {
    constructor(props) {
        super()
    }
    render() {
        return (
            <input name="firstName" placeholder="Enter name" />
        )
    }
}

class B extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <h1> "Display data here from input of class A " </h1>
        )
    }
}

class C extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <A />
                <B />
            </div>
        )
    }
}

ReactDOM.render(<C />, document.getElementById("root"))
```
Auto restarting Laravel Horizon on code changes
Tags: larvel, horizon
Published: 2020-06-14 17:09:22

---
title: Auto restarting Laravel Horizon on code changes
published: true
description: Watch your PHP files and restart on changes
tags: Larvel, Horizon
cover_image: https://i1.wp.com/iotbyhvm.ooo/wp-content/uploads/2019/01/Nodemon.png?resize=800%2C445&ssl=1
---
I have been meaning to look into a solution for restarting Laravel Horizon on code changes for a while. Our team uses Docker for our development environment and a container will start with horizon running. However, any code changes would mean we had to restart that container before the changes would load.

That's when I looked into a solution. It turns out it was pretty simple. There is a handy node tool that will monitor files for changes and restart. I have seen it in use for simple nodejs servers. Enter [nodemon](https://github.com/remy/nodemon)

We can install it in an Ubuntu container with

    apt-get update && apt-get install npm -y && npm install -g nodemon

Now we launch our horizon with the below command 

    /usr/local/bin/nodemon --exec /usr/local/bin/php artisan horizon -e php

the `-e php` tells nodemon to monitor all `.php` files and restart on a change.

<a href="https://www.buymeacoffee.com/squareborg" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
Mastering XPATH for Selenium Testers [With Locator CheatSheet].
Tags: testing, tutorial, webdev, beginners
Published: 2020-06-14 17:06:10

✅Join us - https://sendfox.com/thetestingacademy

In this video, We are discussing XPath in selenium webdriver and we are going to master them one by one.

✅ What is XPath?
- XPath can be used to navigate through elements and attributes in an XML document.
- XPath is a syntax for defining parts of an XML document
- XPath uses path expressions to navigate in XML documents
- Mastering XPath/ CSS is essential for the Selenium test automation engineers to locate dynamic web elements, elements without ids or names and elements with dynamic ids and names.
 
[![Mastering XPATH for Selenium Testers](https://i.imgur.com/YbQbXgk.png)](https://youtu.be/Mi1X8dsYSjQ "Mastering XPATH for Selenium Testers") 

<button style="background-color: #e7e7e7; color: black;" name="button"><a href="http://sdet.to/locator">Download Locator CheatSheet!</a></button>


✅ Why do we need to learn many XPath?
 Locating elements with partially static attribute values
 Locating elements with respect to a known element
 Locating elements without attributes or without unique attributes
 XPath can do bidirectional navigation (Going forward and backward)


✅ Types of XPath
- Absolute XPath starts with the root
   break when minor structural changes
   lengthier and hence they are not readable
   /html/body/header/div/a
    /html/body/header/div/a
- Relative Xpath
  Relative XPaths are started with two forward slashes ‘//
  locating  elements with respect to a element with known (solid) XPath
  //form/div[@id=’divUsername’]/input
 Absolute XPaths are faster than the relative XPaths

🚀 Day 11 Task :  Mastering XPATH for Selenium Testers
🚀 Thread :  https://scrolltest.com/automation/day11
🚀 All Task List : https://scrolltest.com/automation/task
🚀 Watch Full Playlist : https://scrolltest.com/automation/playlist

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Peeking at HttpContext.Request.Body, without consuming it
Tags: dotnet, beginners, webdev, productivity
Published: 2020-06-14 17:04:38

---
title: Peeking at HttpContext.Request.Body, without consuming it
published: true
description: A NuGet library, to peek at the HttpContext request body without consuming it in ASP.Net Core  
tags: dotnet, beginners, webdev, productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ufaee4e5u9o3j8etz1na.jpg

---

## Usage

>Install it from [Nuget](https://www.nuget.org/packages/Request.Body.Peeker/)
>
>Check out the source code from [Github](https://github.com/alicommit-malp/Dotnet-Core-Request-Body-Peeker)


```bash
Install-Package Request.Body.Peeker -Version 1.0.0
```

After installation you can read the HttpContext request body without consuming it as follows

```c#
//Return string
var request = context.HttpContext.Request.PeekBody();

//Return in expected type
LoginRequest request = context.HttpContext.Request.PeekBody<LoginReuqest>();

//Return in expected type asynchronously
LoginRequest request = await context.HttpContext.Request.PeekBodyAsync<LoginReuqest>();
```

We are happy with the .Net core's Middlewares and ActionFilters. They provide us with a moment with the HTTP request to check the JWT validity or ApiKey with ease but as far as the parameters which we are interested are located in the HTTP header or the query string. As soon as we need to check a value in the request body we start facing some weird issues.

> A stream is like a one-time message, it will be gone, as soon as you read it.

The HttpContext.Request.Body is also a stream, by reading it in middleware 1 , you will end up with an empty stream in the MVC middleware if the pipeline's order is as follows :

```bash
Middleware 1 -> MVC Middleware
```

> The known solution is to read the stream and then put back in its place.

```c#
var request = HttpContext.Request;
request.EnableBuffering();
var buffer = new byte[Convert.ToInt32(request.ContentLength)];
request.Body.Read(buffer, 0, buffer.Length);
```

By enabling the buffering mode on the HttpContext request body stream we can read the cloned version of the stream from the memory. After we have finished with the reading we must set the stream position pointer to the beginning again like this

```c#
request.Body.Position = 0;
```

Writing all above code, or having a helper class in each project to take care of it can be annoying. That's why i have put together a [Nuget](https://www.nuget.org/packages/Request.Body.Peeker/) extension to the HttpRequest class to take care of all this behind the scene.

>Install it from [Nuget](https://www.nuget.org/packages/Request.Body.Peeker/)
>
>Check out the source code from [Github](https://github.com/alicommit-malp/Dotnet-Core-Request-Body-Peeker)

Happy coding.