teleren/devto huggingface dataset:
Run multiple Postman Collection in parallel — Stress-Tests
Tags: postman, test, CI
Published: 2020-05-27 20:22:12


A known limitation of the Postman Collection Runner is that it can only execute collection in a consecutive way. This is just a simple implementation of the solution explained in this[ StackOverflow conversation](https://stackoverflow.com/a/41181892/2042761).

**Create your Postman Collection and corresponding tests**

Here I needed to attack first `/api/persons` to get the list of persons ids.

![/api/persons](https://m4nu56.dev/images/multiple-postman-collection-stress-test/collection.png)

And then `/api/persons/:id` for each person in the list.

![/api/persons/:id](https://m4nu56.dev/images/multiple-postman-collection-stress-test/collection2.png)

To do that I used the `postman.setNextRequest()` tricks that specify the next request that will be executed in the collection run. And in each run I get the last personId and pop() it from the array in environment variables.

**Export your collection and the environment variables**

![/api/persons/:id](https://m4nu56.dev/images/multiple-postman-collection-stress-test/export_collection.png)

And save the files in a `postman/` directory.

**Create the new npm project**

Simply run `npm init -y` and install the 3 dependencies: `npm i async newman path`

```json
{
  "name": "newman_parallel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "async": "^3.1.0",
    "newman": "^4.5.6",
    "path": "^0.12.7"
  }
}
```

**The script !**

It’s kind of self explanatory, update the path for your postman collection and environment, specify the number of concurrent run you want to launch with the constant `PARALLEL_RUN_COUNT` and execute the script with `npm start`

```js
const path = require('path')
const async = require('async')
const newman = require('newman')

const PARALLEL_RUN_COUNT = 2

const parametersForTestRun = {
    collection: path.join(__dirname, 'postman/postman_collection.json'), // your collection
    environment: path.join(__dirname, 'postman/localhost.postman_environment.json'), //your env
    reporters: 'cli'
};

parallelCollectionRun = function (done) {
    newman.run(parametersForTestRun, done);
};

let commands = []
for (let index = 0; index < PARALLEL_RUN_COUNT; index++) {
    commands.push(parallelCollectionRun);
}

// Runs the Postman sample collection thrice, in parallel.
async.parallel(
    commands,
    (err, results) => {
        err && console.error(err);

        results.forEach(function (result) {
            var failures = result.run.failures;
            console.info(failures.length ? JSON.stringify(failures.failures, null, 2) :
                `${result.collection.name} ran successfully.`);
        });
    });
```

![newman](https://m4nu56.dev/images/multiple-postman-collection-stress-test/newman.png)


And here you can play around with your api and build some stress tests to see how it handles the pressure.
You can find the code in the [Github repo](https://github.com/m4nu56/newman-parallel-run).
why some of my projects failed
Tags: codenewbie, productivity
Published: 2020-05-27 20:18:31

Over the last 3 years, these are some of my projects and why I think they did not succeed. 

1. project: adstech

aim: to monitor how well your ads are doing across platforms

failure reason: built only the landing page, marketed to the wrong market, didn't know how to build the whole project at the time

2. project: apiteacher.website

aim: to teach people how to use popular APIs on the internet

failure reason: was too time consuming to learn and teach what is learnt, pricing was not inviting to customers

3. project: codebrunner blog

aim: a blog about tech

failure reason: a saturated market, designing the website took 3 months as I was first learning to code front end and back end

4. project: chargewhat.website

aim: advising new enterpreneurs on how to price their product

failure reason: was a great idea, had good initial traction, but did not find a way to monitize, solving customer problem required a lot of research and too much work, could not be automated

5. project: covid19 app

aim: an app to monitor the progress of covid 19

failure reason: no market need, inability to monitize, google tried to discourage people from installing apps not from their playstore

6. project: emailmanagement

aim: auto reply to emails, important emails automatically appear at the top of your inbox

failure reason: built only the landing page, building the actual project was too difficult at the time, difficult to get access to peoples' gmail inbox

7. project: travel master

aim: a website that showed people the tourist attractive places in a country and how to get there from the airport

failure reason: customer of the project had too low a budget, cost of work exceeded profit

8. project: neckline helper

aim: to help manage the businesses of busy enterpreneurs

failure reason: no market need, poor marketing of project, built only the landing page

9. project: htmlrice.website

aim: a website boilerplate

failure reason: no market need for a paid boilerplate, too costly for customers, similar boilerplates existed in the market for free

10. project: neckline 

aim: to help online buyers to order the right cloth size for their bodies

failure reason:no market need, was a web app instead of a mobile app, customers expected the service to work inside the sellers' website but mine was standalone, sellers did not encourage using their cloth charts for your own purpose

Thank you for spending time to read this post. Have a nice day
React Code Reviews Comments #1: Computed State
Tags: react, codequality
Published: 2020-05-27 20:12:49

Some of the code reviews comments I usually write for junior React developers.

First let's take a look at this component:

```jsx
const SimpleComponent = () => {
  const [price, setPrice] = React.useState(10);
  const [tax, setTax] = React.useState(0.15);
  const [total, setTotal] = React.useState(price * tax);

  React.useEffect(() => {
    setTotal(price + price * tax);
  }, [price, tax]);

  return (
    <div>
      <input type="number" value={price} onChange={({ target: { value } }) => setPrice(+value)} />
      <span>Total: {total}</span>
    </div>
  );
};
```

**First Code Smell**: a state setter `setTax` is not used, which means `tax` can be a variable defined out of the component scope, or maybe it's even better to keep it as an optional prop with a default value.

```jsx
const SimpleComponent = ({ tax = 0.15 }) => {
  const [price, setPrice] = React.useState(10);
  const [total, setTotal] = React.useState(price * tax);

  React.useEffect(() => {
    setTotal(price + price * tax);
  }, [price, tax]);

  return (
    <div>
      <input type="number" value={price} onChange={({ target: { value } }) => setPrice(+value)} />
      <span>Total: {total}</span>
    </div>
  );
};
```

> There may be a special case where you want to keep the initial value of a prop, so you won't need to use the setter, which is fine.

**Second Code Smell**: A state setter is used only after another state changes.

```js
React.useEffect(() => {
  setTotal(price + price * tax);
}, [price]);
```

In this example, `total` changes only after the `price` state changes, which could be replace with a simple variable

```jsx
const SimpleComponent = ({ tax = 0.15 }) => {
  const [price, setPrice] = React.useState(10);

  const total = price + price * tax;

  return (
    <div>
      <input type="number" value={price} onChange={({ target: { value } }) => setPrice(+value)} />
      <span>Total: {total}</span>
    </div>
  );
};
```

By this, we went down from 3 states to 1 state, which makes our component much easier to understand and read.

These may be simple notes, but they can slip in huge components like a data table. Where you should keep which column we are sorting by not the sorted rows, same for filters/pagination.

```js
// Don't
const [sortedRows, setSortedRows] = React.useState(rows);
const handleSortByName = () => {
  setSortedRows(sortRowsBy(rows, "name"));
}

// Do
const [sortBy, setSortBy] = React.useState(null);
const sortedRows = sortRowsBy(rows, sortBy);
const handleSortByName = () => {
  setSortBy("name");
}
```

`sortedRows` is what I call a "Computed State" as it changes based on another state.

If it makes performance issues you can always useMemo.

```js
const sortedRows = React.useMemo(() => sortRowsBy(rows, sortBy), [rows, sortBy])
```

Hey, this is my first blog ever. And it's the first of a series. Please let me know if you have any notes/questions and if you want to see more of this series.
How NOT to make a Website featured in net magazine
Tags: showdev, writing, webdev, beginners
Published: 2020-05-27 20:58:38

---
title: How NOT to make a Website featured in net magazine
published: true
date: 2020-05-27 20:00:07 UTC
tags: showdev,writing,webdev,beginners
canonical_url: https://www.csrhymes.com/2020/05/27/how-not-to-make-a-website-featured-in-net-magazine.html
cover_image: https://www.csrhymes.com/img/net-magazine-feature.jpg
---

I have some exciting news to share! My book, ‘How NOT to make a Website’, was featured in the June 2020 edition of net magazine as the Side Project of the Month.

> I wrote a book called “How NOT to make a Website”, to help you know what to avoid when making a website, helping improve visitor experience.

The article explains why and how I wrote the book, the drawings and what I learned in the process.

> The decision to publish the book has increased my confidence in my own writing abilities

It made me think back over the chain of events from building my own website to help promote the books, to building an open source [Jekyll theme](https://www.csrhymes.com/themes) and now writing blog posts and short stories.

> It’s amazing what one side project can lead to.

‘How NOT to make a Website’ is available on [Amazon](https://www.amazon.co.uk/dp/B00KEE3HES) in both kindle & paperback format, as well as PDF format on [Gumroad](https://gum.co/DNuil).
How I upgraded my laptop without any hardware changes
Tags: productivity, vscode, hardware, performance
Published: 2020-05-27 19:54:32

I want a new laptop. I know I don't need it, but I feel like it would be a quality-of-life upgrade. I currently own a 2017 Razer Blade Stealth; it does the job 80% of the time.  Although, it does start to show its age when I am working on a project. Build times are getting longer, the fan sounds like a drone is on my desk, and general frustration ensues.

However, I like my laptop. I have everything set up just right - my terminal, fonts, apps, OS Settings, and everything else. I don't really want a *new* laptop. I just don't want to have to wait so long for angular to compile a site, or `npm build` to take as long. So, I started to think about what I could do.

I am most productive when everything just works. I don't want to have to take any extra time waiting on something or switching context. So even though it sounds small, having to wait ~20 seconds for something to rebuild and be ready can add up over time.

With that in mind, my laptop isn't the problem - the build is. I knew Visual Studio Code allows for remote development, and I started to wonder if I could just switch to that. The bar was high though. I have everything just so. With 4 keyboard shortcuts I can 

- launch a terminal with mongod, mongo shell, the app, and any dependent services running
- open vsCode pointed to whatever project I need to work on

Whatever I changed has to support that. I don't want to manually ssh into a server and set things up. It just needs to work when I say so.

So I went looking at Azure VMs. I picked out a "compute optimized" sever and instantly ran into snag. You are initially limited to 4vCPUs in a region, and I was getting one with 8. It wasn't looking good, but I downgraded to one with 4 cores and gave it a try. I figured I can always go down the upgrade path when/if this worked out.

I spent the rest of the evening getting it set up. Installing mongo, node, setting up ssh, moving my terminal aliases over, everything. The hardest part was integrating it into my workflow. 

I found ways to still keep my keyboard shortcuts locally, but just modified the commands to do everything remote. I just can't figure out how to automatically launch vsCode and have it connect to the remote server. I still have to do it the long way. 😣

Overall, I am a mostly impressed. That server cut my build times down by about 80%, and with the tooling in vsCode I really don't even notice. I set up port forwarding so `localhost:xxxx` traffic is sent over the ssh connection, and it feels perfect. 

The best part is the price. I manually start/stop the VM when I need to, so it only runs for a short while. I'm guessing it will cost $17/month. Not bad! I could do that for years before getting a new laptop would have been cheaper.

Bonus points for my fan not whining at me the entire time :) A quiet computer is a good computer.
How to Remove Duplicates from Arrays
Tags: ruby, beginners
Published: 2020-05-27 19:45:04

#Hmm...
Okay, you want to remove duplicates from your array. As a beginner this might prove a difficult task. Luckily, Ruby has created more than one way to do this, so you don't spend your time writing a function for it. Let's get into it.

#Duplicates, Duplicates, Duplicates...
So, what are these methods anyway? Well, since you asked so nicely you can use the unique method (.uniq), the difference operator(-), the union operator(|), and the intersection operator(&), your own short-hand method(which we'll get into later), and to_set.

#Let's Start From the Start, Syntax
Let's take a look at the syntax for each method.
{% gist https://gist.github.com/OreOlad/876ab67a3b3f55a8dfbdc8b5733a4c6d %}
#Let's see how they work
![You better work!](https://media1.tenor.com/images/1d2c75196bf40bb26367b157ddc65d19/tenor.gif?itemid=4887517)
###Uniq
{% gist https://gist.github.com/OreOlad/195c30406c7d52d1c8f1b6b0f3f86b42 %}

###The operators
These three operators have different uses. The Difference operator returns items from the first array that **DON'T** appear in the second and vice versa. The Union operator can be used to return one of each item in both arrays, which guarantees that there will not be any duplicates. The Intersection operator returns items that appear in both arrays, also without duplicates.
After all I've said you're probably thinking,
!["I don't care, get to the point!"](https://i.imgflip.com/jfq5n.jpg)
but to your surprise there actually is a reason that I'm telling you this. Here, let me show you.
{% gist https://gist.github.com/OreOlad/98656c0c9a29031719c6ca3d9fe778ce %}
###Don't worry you're almost to_set!
The to_set method is a lot simpler than the previous methods. You have likely already learned what a set is, but for those who haven't a quick recap. 
![Here we go again!](https://lh3.googleusercontent.com/proxy/V45CW-MyyR76vx6GAl0JbFL1Q5rtzVfWIIsxP7G0LbGwBh088Yz2ekkfTwu31p7JOVFBZ19PTFRzCDjPhovO_3S0LnTRkN9PQ2xAWPnbFeBiOaU)
***<figcaption>Bruuuh</figcaption>***
##Sets
Sets are unordered lists that can't have duplicates. So the to_set method creates an instance of the array to a set. Making all the duplicates disappear. So you can assign the variable to the duplicate free list.
###to_set usage
Let's see!
{% gist https://gist.github.com/OreOlad/25fbb13635ec83b43e20829138f33068 %}
#Finally, what I've been waiting to write!
![FINALLY!!!!!](https://www.memekingz.net/img/memes/201805/aceb324e10bb797ec061881347548226.jpg)***<figcaption>FINALLY!</figcaption>***
It's not the end yet, but now we get to see a all the ways mentioned before and my own custom method in action.
{% replit @OreOlad2/uniq-uses %}
Mine is not as good, for it to work it has to return the array sorted. Anyway, all this reading is probably boring you so I hope you liked this post, if you have any questions put them in the comments.

BYE **;)**
A Simple Way to Render Tabs/Navigation in React!
Tags: react, javascript, webdev, tutorial
Published: 2020-05-27 19:32:58

Hi!

So, I've used this method in a few web apps so far and I've found it to be very straight-forward and easy to implement, esp. considering that no libraries are needed. Just core React concepts!

The general idea is to use an object with the keys pointing to whichever component you want to render. The key will be held in the parents' state.

Let's say you have a file structure that looks like this (emitting the React boilerplate structure and looking only at src):

```
src
│   app.jsx
│   index.html
│   index.js    
│
└─── components
   │   navbar.jsx
   │   about.jsx
   │   product.jsx
   │   contact.jsx

```

In this case, `app.jsx` will be in charge of rendering the overall structure of the page (the parent). It will look something like this (excluding imports and using React hooks):

```javascript
const TABS = {
  'about': <About />,
  'product': <Product />,
  'contact': <Contact />
}

export default function App () {

  const [selectedTab, setSelectedTab] = useState('about');
  
  return(
    <div>
      <NavBar 
        setSelectedTab={setSelectedTab}
      />
      {/* this is the main content of the page */}
      {TABS[selectedTab]}
    </div>
  )
}
```

So, the selected tab in state will determine which component is rendered to the page. The setState function is passed down as a prop to the navigation bar, which will set the state appropriately when a user clicks on a tab.

Here's what NavBar might look like (simplified, of course):

```javascript
export default function NavBar ({setSelectedTab}) {
  
  return(
    <div>
      <div onClick={() => setSelectedTab('about')}>About</div>
      <div onClick={() => setSelectedTab('product')}>Product</div>
      <div onClick={() => setSelectedTab('contact')}>Contact</div>
    </div>
  )
}
```

And that's pretty much all there is to it! Obviously, it may get more complicated depending on the complexity of your website, but the basic idea should remain the same.

With <3, happy coding!
React-Redux - add second store to your app
Tags: react, redux, beginners, javascript
Published: 2020-05-27 19:24:44

You may encounter situation when you need second **Redux Store** in your app. Wait what? Isn't **Redux** a single store architecture...?

Yes it is, but maybe you have to extend existing application and you would rather not to interact with existing **Redux Store**.

Wit **react-redux** you can create new **Store**, which will be using separate context:

```javascript
import React from 'react'
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook
} from 'react-redux'

const customContext = React.createContext(null)

export const useCustomStore = createStoreHook(MyContext)
export const useCustomDispatch = createDispatchHook(MyContext)
export const useCustomSelector = createSelectorHook(MyContext)

const customStore = createStore(rootReducer)

export function MyProvider({ children }) {
  return (
    <Provider context={customContext} store={customStore}>
      {children}
    </Provider>
  )
}
```

You can find docs about this solution [here](https://react-redux.js.org/api/hooks)
Rewarded for 25 days of Leetcode May Challenge
Tags: leetcode, computerscience, algorithms, codenewbie
Published: 2020-05-27 19:21:29

Today I completed 25 days of Leetcode's May challenge, and got rewarded for the same.
I want to share what I have gained & how it feels after these many days of a continuous streak.

The most challenging bit is to be consistent(at least for me). Everything comes next. These days I have pushed myself to just stop all the procrastination at once. I tried to tell myself that it's just one question that I have to do. Nothing more, just one.
 Of course, when I did one I pushed myself to solve a next problem related to the one I did that day. The next problem being similar, seemed easy after knowing how to do the 1st one. And so I did atleast a 5 questions a day.

This way I did not only improve my problem solving skills but also I made a habit to code daily.

![Desk-plant with macbook](https://dev-to-uploads.s3.amazonaws.com/i/wycv4flw38r9lgvcvtre.jpg)

Sharing my progress on a daily basis helped me stay motivated throughout this. I mostly shared it with my friends who are doing the same, and also on [twitter](https://twitter.com/prakh_r).

I noticed that many other domains of software engineering and development had a good supporting community on twitter but not much for those who are involved in competitive coding and problem solving.

Which lead me to make a twitter bot [LeetcodeBot](https://twitter.com/LeetcodeB) which retweets #leetcode #codechef #hackerrank #hackerearth #100DaysOfCode #30DaysOfCode #coding among a few.

This bot will help tweets with these tags, reach masses, and hence one might not feel that he/she is alone in this journey.

At last I got rewarded with 100 leetcoins for maintaining a 25 day streak, which felt great.
"This Probably Won't Solve Your Problem" — A Tough Pill to Swallow
Tags: podcast, meta, productivity
Published: 2020-05-27 19:04:14

We had [Kelsey Hightower](https://twitter.com/kelseyhightower) on the [DevDiscuss Podcast](/devdiscuss) this week.

Among several wonderful topics this podcast covered in the realm of "unpopular opinions" was the idea that Monoliths are often a better approach compared with microservices. A move from one monolithic application to a scenario with smaller deployables will bring a lot of power and luxuries in choice... but at the cost of a lot of extra complexity in orchestration.

The big underlying idea is that _the problem lies elsewhere_. If you have a monolith and it is giving yo problems, it's probably not the architecture, but instead a process or approach that needs adjustment along the way. If you trade in your monolith for microservices you've just traded one set of problems for another, but you're still grappling with the inherent difficulties of complex problem solving and trade-offs.

It was a great episode overall...

{% podcast devdiscuss/s1-e3-unpopular-opinions-in-software-development %}

For a fuller picture of what we discussed in the episode and all the player links, check out this post:

{% link https://dev.to/devteam/devdiscuss-episode-3-unpopular-opinions-in-tech-with-kelsey-hightower-57pn %}
Show Your Design Skills :)
Tags: react, vue, angular, design
Published: 2020-05-27 19:03:00

I [published](https://twitter.com/yazilimci_adam/status/1265716886240727040) this joke on my twitter account before

Hi everyone.

I know a lot of people here who has good design skills :) But I'm not good at design :) Trust me :)

What can you do to show your skills? This is my work. I used GIMP to make this :)

![Fight of Frameworks](https://dev-to-uploads.s3.amazonaws.com/i/wrosb0g6dw2993ua26j1.png)
Setting up a Django dev environment
Tags: python, django, git, pipenv
Published: 2020-05-27 18:33:40

I'm working through [Django for Beginners by William S. Vincent](https://djangoforbeginners.com/). The first part is about setting up your dev environment. The book is setup to start for a _complete_ beginner level, which is really nice. It starts from introducing the basics of the CLI for both Mac and Windows systems, and then some simple terminal commands with `cd`, `ls` etc.

It then goes on to help with installation of Python3, `git`, `pipenv` and `django`, all great stuff for getting started, plus it set's a great baseline for the rest of the book.

For anyone who has worked at all with terminals, version control, isolating environments and code editors, 90% of this will be already done on the machine, but I still think it's worth putting in. Having it laid out for you at the start of your programming experience that version control and the terminal are part of the process I think helps with the hump I've seen in more experienced beginners where `git` and `pipenv` are Yet Another Thing To Learn and so get pushed back in the learning pathway more out of fear than anything else.

Personally, I zipped through the setup in a few minutes. Hello World django app next!

Has anyone else seen the 'git is yet another thing to learn' hump? Maybe even had it? How did you overcome it?