teleren/devto huggingface dataset:
no dislocation = no-undef
Tags: javascript, eslint
Published: 2021-11-15 12:45:58

```json
{ "rules": { "no-unused" : "warn"}}
```

My dislocation lead me so many times to type wrong variable names in code. In Javascript that is don't cause immediately error, because thats name use as undeclared global. My solution is really simple under vs-code. With esLint no-unused rule help to mark red underline the typing errors.
This setup also show console.log, console.warn, which is also don't good to stay in product code. You can choose this rule set as warn or error, by own taste.

> This method also good for alert outer dependency.

### esLint json with no-unused example :: 
```json
{
  "parser": "babel-eslint",
  "plugins": ["unused-imports", "react", "react-hooks"],
  "rules": {
    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": [
        "warn",
        { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
    ],
    "no-undef" : "error",
    "react/jsx-uses-vars": "warn",
    "react/jsx-uses-react": "warn"
  }
}
```
Day 59-61/100 Modules
Tags: 100daysofcode, challenge, motivation, programming
Published: 2021-11-15 13:00:58

"Write code that is easy to delete, not easy to extend."

– Tef, Programming is Terrible

![module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odzjryjzuqgf3fnjeloq.png)
Python: upload multiple files concurrently with aiohttp and show progress bars with tqdm
Tags: python, upload, aiohttp, tqdm
Published: 2021-11-15 12:55:31

I had to quickly implement this functionality in a command line tool and tried to look for some online ready-to-use example.
Since I wasn't able to find any, I came up with this solution (perhaps someone can find it helpful).
```python
import os
import asyncio
import aiohttp
import aiofiles
from tqdm import tqdm


class FileManager():
    def __init__(self, file_name: str):
        self.name = file_name
        self.size = os.path.getsize(self.name)
        self.pbar = None
    
    def __init_pbar(self):
        self.pbar = tqdm(
            total=self.size,
            desc=self.name,
            unit='B',
            unit_scale=True,
            unit_divisor=1024,
            leave=True)
    
    async def file_reader(self):
        self.__init_pbar()
        chunk_size = 64*1024
        async with aiofiles.open(self.name, 'rb') as f:
            chunk = await f.read(chunk_size)
            while chunk:
                self.pbar.update(chunk_size)
                yield chunk
                chunk = await f.read(chunk_size)
            self.pbar.close()


async def upload(file: FileManager, url: str, session: aiohttp.ClientSession):
    try:
        async with session.post(url, data=file.file_reader()) as res:
            # NB: if you also need the response content, you have to await it
            return res
    except Exception as e:
        # handle error(s) according to your needs
        print(e)


async def main(files):
    url = 'https://httpbin.org/post'
    files = [FileManager(file) for file in files]

    async with aiohttp.ClientSession() as session:
        res = await asyncio.gather(*[upload(file, url, session) for file in files])
    
    print(f'All files have been uploaded ({len(res)})')


if __name__ == "__main__":
    # In a real application you may may want to handle files
    # in a more robust way, do some validation etc.
    files = ['./file_1', './file_2', './file_3']
    
    asyncio.run(main(files))

```
What is the best way to make a fan club website like OnlyFans?

Tags: onlyfansclone, javascript, webdev, onyfansclonescript
Published: 2021-11-15 12:34:34

Among a plethora of social media apps, OnlyFans is one of the most popular subscription-based social networking apps. Noticing its trend in recent years has made newbie entrepreneurs to launch an OnlyFans Clone. If you have decided to enter the social media sector with a content subscription service app, this blog will guide you through choosing which approach to proceed with.  

<Strong>Two different ways to build a content subscription app like OnlyFans</Strong>

<Strong>OnlyFans Clone app development from scratch</Strong>

The conventional way to build an app like OnlyFans is to start from scratch, and it takes nearly 6 to 8 months. As the time required for development prolongs, the cost for the same will elevate significantly. Considerably, app developers have to put a lot of effort into crafting the final product as per your business requirements. However, from a business owner’s perspective, it takes longer to start a business. 

<Strong>A ready-made OnlyFans Clone app solution</Strong>

The app development process is no longer tedious now. Thus, the modern approach is opting for an <a href="https://www.uberlikeapp.com/onlyfans-clone">OnlyFans Clone Script</a>. It is a pre-crafted custom-built content subscription service app solution filled with general features. Its customizability and scalability elements will make your app modifiable based on your business requirements. 

Most importantly, the time required for customization does not take much time compared to the previous approach and so the cost will be comparatively less. Therefore, you can develop and launch OnlyFans Clone at an affordable price. On a simpler note, you can hit the market with a budget-friendly solution.

<Strong>Which approach to choose for OnlyFans Clone app development?</Strong>

Commonly saying, both approaches have pros and cons. You can choose a suitable approach based on your needs and available resources. Among these, OnlyFans Clone Script is widely preferred by most entrepreneurs nowadays. It is now in your hands to decide on which approach to choose for OnlyFans Clone app development.

<Strong>Final note</Strong>

To conclude, if you need to launch a content subscription service app immediately, opting for an OnlyFans Clone Script will be a wise decision in this fast-paced world. Reach out to a clone app development company and get the app crafted sooner.
Third week taskforce 4.0 journal
Published: 2021-11-15 12:27:12

---
title: Third week taskforce 4.0 journal
published: true
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--qpHCYMWj--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g9zgldo4mzcwqdkw518.jpeg
description: 
---
Hello guys; happily, i want to say that, we've ended our third task-force week. Heading to the fourth, which might be intensive. I hope you're all curious about the last week experience. In fact it is interesting.
  
Initially, this week sessions, was all about analyzing the showApp web, code review and soft skills level up.

Actually, i can say that analysis sessions were amazing; With the help of Regis(CodeofAfrica software Engineer), We discussed a lot about the project, and was finally productive because We learned a lot about project analysis and also the project phase has been successful.  

Code review
We had session of reviewing the codes, that introduced to us the theory behind code reviewing.

We also had several soft skills session, that emphasized on team cultural, cultural awareness and communication. In fact, all this sessions were very educative because now i could say that I've improved in my communication skills of how you could communicate with people of diverse cultural.

In short, third week was awesome. now i am confident enough to analyze the project on my own.
How to maintain Quality ratings on Amazon?
Tags: amazon
Published: 2021-11-15 12:27:06

Most of the times, Often Online Shopper considers rating and reviews of a product before they purchase as per <a href="https://www.statista.com/statistics/1020836/share-of-shoppers-reading-reviews-before-purchase/">Statista</a> data. Especially, coming to Amazon, Reviews and ratings play a key decision in deciding for 80% of the users according to <a href="https://www.amazingmarketingco.com">amazon Agency</a> who works for brands on the platform.

It is often the best advice from the Industry experts to maintain Quality rating on your products on Amazon can happen when you have a quality product which satisfies the price worthiness of a Product. Thus you can maintain a healthy rating, if you have quality product. The quality rating also helps in long run of your listing to see a spike in the sales.

Always its better to launch a good quality product which you think can satisfy the audience based on it's price. These days Amazon marketplace is booming and there are several brands trying to get their market share.
Taking advantage of react-router v6 to manage Providers
Tags: react, architecture, javascript, webdev
Published: 2021-11-15 12:15:17

#####All of us know how tricky may react architecture be. One of the best approach that I bumped into during my react developer career was to [move files around until it feels right](https://react-file-structure.surge.sh/)

#####and today I'd love to share my approach to setup `<AppProviders />` with [React Router v6](https://reactrouter.com/)


React Router provides us with powerful tool which is nested routes. Right now we may create routes in the following fashion:

```
export const Router = ({ providers }: { providers: React.ReactElement }) => (
  <BrowserRouter>
    <Routes>
      <Route path={AppRoute.home} element={providers}>
        <Route index element={<Home />} />
      </Route>
    </Routes>
  </BrowserRouter>
);
```

and if our `<AppProviders />` contains `<Outlet/>` inside, it will also render content of our `subroute`, in this case `<Home />`, as it is `index ('/')` of our precedent route.

So what we want to do is create our `<AppProviders />` right now:

```
export const AppProviders = () => {
  const queryClient = new QueryClient();
  const theme = createTheme();

  return (
    <QueryClientProvider client={queryClient}>
      <CssBaseline />
      <ThemeProvider theme={theme}>
        <Layout>
          <Outlet />
        </Layout>
      </ThemeProvider>
      {openReactQueryDevtools && <ReactQueryDevtools initialIsOpen={false} />}
    </QueryClientProvider>
  );
};
```
We could make more levels of routing to handle styles and `<Layout />` appearance but in this simple scenario it's not necessary.  

Then we could simply pass our `<AppProviders />` as an prop to our Routing where we want to do it, for me it's `index.ts`

```
ReactDOM.render(
  <React.StrictMode>
    <Router providers={<AppProviders />} />
  </React.StrictMode>,
  document.getElementById('root'),
);
```

![software architecture meme](https://www.memecreator.org/static/images/memes/5137923.jpg)

Hopefully it could help any of you improving your react architecture-game.
All your Imaginations are real, week 3 Taskforce 4.0
Tags: awesomity, codeofafrica
Published: 2021-11-15 12:09:01

All imaginations are real

The week started with an event storming session, where we learned to brainstorm and come up with all possible events that will happen in a particular project.

then from the events, we got during event storming were used to get DB entities and their attributes.

### Team culture
We proceeded by learning more about team culture and had an exercise to do as a team

### Communication 
We continued with a session about communication learning what is communication and how to communicate well so as to be productive, The biggest lesson for me in this session is listening is actually harder than it seems if you listen well and ask questions, you are halfway there the rest is empathy and there you have it. you are good at communication.

### ERD
We continued with creating an entity relation diagrams from the entities gathered in event storming and make sure we make a DB query that's work.

### Code review
The week continued with learning why doing code review and how to properly do it.

### The End
we wrapped up the week with a weekly demo where we presented everything we've been working on the whole week in teams.

My biggest takeaway this week would be communication is key in every professional environment to work. and in communication listening might be the hardest skill and some people just don't give it much value.

>"When you talk, you are only repeating what you already know. But if you listen, you may learn something new" By Dalai Lama

it was insightful week in general and can't wait for the next week
Send an Email for every training job created in Google AI Platform Training
Tags: webmethods, integation, esb, cloudstreams
Published: 2021-11-18 13:27:24

---
title: Send an Email for every training job created in Google AI Platform Training
published: true
date: 2021-11-15 11:56:05 UTC
tags: #webmethods, #integation, #esb, #cloudstreams
canonical_url: https://tech.forums.softwareag.com/t/send-an-email-for-every-training-job-created-in-google-ai-platform-training/245929
---

## Summary

This article describes a business use case to send an email for every training job created in **Google AI Platform Training**.

## Prerequisites

- User should have a working [webMethods.io](http://webmethods.io/)Integration tenant.

- User should have a working **Google AI Platform Training** account.

## Steps

1. Login to [webMethods.io](http://webmethods.io/)Integration tenant and create a Workflow.

2. Drag and drop the **Google AI Platform Training** connector to the workflow palette.

3. Click the **Settings** to configure the **Google AI Platform Training** connector. Select action as **createJob** and add an account to authorize it.

4. In the next screen, provide the necessary inputs for creating the job.

5. Test the trigger and click on **Done**.

6. Drag and drop the **Switch** under **Developer Tools** to the workflow palette.

7. Now drag and drop the **Send an Email** under notification to the workflow palette. This should be connected to the **Switch** in step 6.

Learn how to configure a condition and see the finals steps in sending an email for every training job created in **Google AI Platform Training** by visiting the original article in the [Software AG Tech Community](https://tech.forums.softwareag.com/t/send-an-email-for-every-training-job-created-in-google-ai-platform-training/245929).
React Input Tags Component
Published: 2021-11-15 11:55:53

#Simple React Component
*src/App.js*
```
import React from "react";

const App = () => {
  const [tags, setTags] = React.useState([]);
  console.log(tags);
  let tagInput
  const removeTag = (i) => {
    const newTags = [...tags];
    newTags.splice(i, 1);
    // Call the defined function setTags which will replace tags with the new value.
    setTags(newTags);
  };

  const inputKeyDown = (e) => {
    const val = e.target.value;
    if (e.key === "Enter" && val) {
      if (tags.find((tag) => tag.toLowerCase() === val.toLowerCase())) {
        return;
      }
      setTags([...tags, val]);
      tagInput.value = null;
    } else if (e.key === "Backspace" && !val) {
      removeTag(tags.length - 1);
    }
  };
  return (
    <div className="input-tag">
      <ul className="input-tag__tags">
        {tags.map((tag, i) => (
          <li key={tag}>
            {tag}
            <button
              type="button"
              onClick={() => {
                removeTag(i);
              }}
            >
              delete
            </button>
          </li>
        ))}
        <li className="input-tag__tags__input">
          <input
            type="text"
            onKeyDown={inputKeyDown}
            ref={(c) => {
              tagInput = c;
            }}
          />
        </li>
      </ul>
    </div>
  );
};

export default App;

```

*src/index.js
```
import React from "react";
import ReactDOM from "react-dom";
import App from './App'

ReactDOM.render(
  <div>
     <App />
  </div>,
  document.getElementById('root')
);
```
*src/index.css*
```
* {
  font-family: sans-serif;
  font-size: 17px;
}

body {
  background: #f2f2f2;
  padding: 20px;
}

.input-tag {
  background: white;
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  display: flex;
  flex-wrap: wrap;
  padding: 5px 5px 0;
}

.input-tag input {
  border: none;
  width: 100%;
}

.input-tag__tags {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  width: 100%;
}

.input-tag__tags li {
  align-items: center;
  background: #85A3BF;
  border-radius: 2px;
  color: white;
  display: flex;
  font-weight: 300;
  list-style: none;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px 10px;
}

.input-tag__tags li button {
  align-items: center;
  appearance: none;
  background: #333333;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  height: 15px;
  justify-content: center;
  line-height: 0;
  margin-left: 8px;
  padding: 0;
  transform: rotate(45deg);
  width: 15px;
}

.input-tag__tags li.input-tag__tags__input {
  background: none;
  flex-grow: 1;
  padding: 0;
}
```
Simple styling using CSS grid for column groups
Tags: gridlayout, css
Published: 2021-11-15 11:58:06

---
title: Simple styling using CSS grid for column groups
published: true
date: 2021-11-15 11:51:40 UTC
tags: gridlayout,css
canonical_url: https://relatablecode.com/simple-styling-using-css-grid-and-pseudo-selectors/
---

![columns](https://cdn-images-1.medium.com/max/1024/0*spzMRIasxnqxkM5d.jpg)

Recently, I was tasked with creating a scheduler component. Although this article won’t go into full detail on how it’s being implemented one thing that I had to do was set up the layout (obviously).

I decided that the best course of action for this was to use a [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) to lay everything out. One of the requirements is that it was necessary to have column groups with different color backgrounds. Simple enough right?

### Planning it out

Where possible I like to use CSS and not javascript as it tends to be considerably faster. In this case, instead of iterating over the array and manually applying the styling that way, I decided the best way would be to use a CSS pseudo-selector in order to determine which columns should be colored.

Luckily enough there exists a [pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) called nth-of-child and nth-of-type. These can be used to dynamically apply a set of CSS styling to a specific number of children. How you may ask? Well the selector can be used in conjunction with simple math to plan it out

```
Example: 
li:nth-child(2) { 
   color: red; 
}
```

### Determining the sequence

Within the selector we have the option to select a child with the following operation: an + b So for example, if we were to just list out nth-child(3) it would be the third child. With the following sequence nth-child(2n) it would be every second child starting with the second.

In my particular case, I had to group up the columns by 4 and style them that way.

What I ended up going with was the following sequence:

![example code](https://cdn-images-1.medium.com/max/840/0*WHpJRZD_5rxwfnxH.png)

With this, we are grouping up the columns by 8 and only coloring the second group of columns as by subtracting I am targeting the final four each time.

Here is the provided example:

[https://codesandbox.io/embed/jolly-nobel-27rtv?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/embed/jolly-nobel-27rtv?fontsize=14&hidenavigation=1&theme=dark)

And that’s it! Let me know if you have any questions or if you have a preferred method of applying styling to columns/rows using a CSS grid!

_Originally published at_ [_https://relatablecode.com_](https://relatablecode.com/simple-styling-using-css-grid-and-pseudo-selectors/) _on November 15, 2021._
Why would be better off avoiding Faker and random data in tests
Tags: rails, ruby, testing, programming
Published: 2021-11-15 11:48:14

Faker/FFaker can seem like the perfect solution to generate data for testing. But in reality, Faker comes with hidden costs.

Here is what we learned using Faker in our projects 👇 
[Stop using Faker and random data in the test fixtures](https://jtway.co/stop-using-faker-and-random-data-in-the-test-fixtures-67332269a64e?source=friends_link&sk=13a2a829d188eefc447884a46d707fb4)
B2B Commerce Administrator B2B-Commerce-Administrator Exam Dumps
Published: 2021-11-15 11:44:35

Question 1
What is the difference between a Kit end a Bundle?

AThe pricing of a Bundle is determined by the price list item associated with the Bundle.
BA Bundle is constructed by the customer.
CThe pricing of a Bundle is determined by the products contained in the Bundle, but a Kit price is determined by the price list item associated with the Kit.
DA Bundle is a tightly related set of products.
Great article Shantanu. I agree its a shame salesforce does not provide any native support around pdf. While visualforce lets you render as pdf, that's where the buck stops. B2B Commerce Administrator B2B-Commerce-Administrator Exam Dumps.I've had requirements where we have had to split pdf documents, merge pdf documents (prior to emailing/faxing), and we resorted to external services to do that for us. While in LWC, we have the option to use third-party js libraries, but that would be additional maintenance overhead.
Localstack S3 in Github Actions
Tags: aws, github, s3, localstack
Published: 2021-11-15 11:43:53


In your workflow `yml` file:
```
services:
  localstack:
    image: localstack/localstack
    env:
      SERVICES: s3
      DEFAULT_REGION: ap-northeast-1
      DATA_DIR: /tmp/localstack/data
    ports: ["4566:4566"]
steps:
  - name: Configure localstack
    run: |
      aws configure set aws_access_key_id localstack
      aws configure set aws_secret_access_key localstack
      aws configure set default.region ap-northeast-1
      aws mb s3://my-bucket --endpoint-url=http://localhost:4566
  - name: Run tests
    env:
      DEFAULT_REGION: ap-northeast-1
      AWS_ACCESS_KEY_ID: localstack
      AWS_SECRET_ACCESS_KEY: localstack
    run: # command to run your tests
```
Top 10 Most Popular Healthcare Applications Examples
Tags: healthcare, industry
Published: 2021-11-25 12:12:21

---
title: Top 10 Most Popular Healthcare Applications Examples
published: true
date: 2021-11-15 11:42:58 UTC
tags: Healthcare,Industry
canonical_url: https://www.botreetechnologies.com/blog/most-popular-healthcare-applications-examples/
---

The global mobile health market is estimated to reach $185 billion by the year 2025. Digitization of healthcare is rising as users move from offline channels to digital methods for their healthcare requirements. Today, consumers want applications that can tell them on their phone how they are doing healthwise – their heart rate, oxygen levels, step counts. Apart from that, mobile healthcare technology is becoming prominent to connect patients with healthcare facilities and provide convenient healthcare outcomes. 

Most of all, healthcare applications are simplifying patient management at hospitals. While there’s always an influx of patients, it becomes difficult for facilities to manage their operations. Therefore, [healthcare software solutions](https://www.botreetechnologies.com/healthcare-app-development) that streamline the workflow of healthcare institutions are much more useful today than ever before. 

The post [Top 10 Most Popular Healthcare Applications Examples](https://www.botreetechnologies.com/blog/most-popular-healthcare-applications-examples/) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
No SOLID Evidence
Tags: solid, design, coding, tdd
Published: 2021-11-15 11:42:53

---
title: No SOLID Evidence
published: true
description: my talk from NE-RPC online conference
tags: solid, design, coding, tdd
//cover_image: https://direct_url_to_image.jpg
---

My talk from NE-RPC back in 2020 on why the SOLID principles aren't what people think they are and what I would like to replace them.

https://youtu.be/0l-kX9y5IaE