teleren/devto huggingface dataset:
Pro Setup Buying Guide
Tags: productivity, codenewbie, guide, setup
Published: 2020-09-14 17:42:23

`The best investment is in the tools of one’s own trade. –Benjamin Franklin`

Being a professional developer and a youtube, I have realized that the best _investment_ I have done is on the things or tools which I use on daily purposes.

Hello friends, I am Pawan Kumar. Apart from being a software engineer, I also run a youtube channel called “MTECHVIRAL”. Today I am in a position where I can say to people that I have a dream setup which once I could only dream about. And because of this setup, I feel very productive. So if you are someone who is looking to have a good work from home setup or want to start a Youtube channel then this post might be useful for you.

I have invested many years in arranging all the things which you will see below so don’t think that you have to buy them all or at once at least. The majority of the people reading this post might not need everything. Also, it’s very tough to look for products that are actually good.
For example: assembling your PC or let’s say you have to buy a USB type C dongle.
So here is my buying guide about all the things which I use on daily basis, you can check them out and buy them if you wish.

`Use my affiliated links to make me rich. 🤑💰`

My Laptop (Macbook Pro) — https://amzn.to/33nL3Pa
My Camera (Sony Alpha) — https://amzn.to/2FrqR6T
My Phone (iPhone) — https://amzn.to/35xJm49
My Monitor 1 (Dell) — https://amzn.to/2ZD43rQ
My Monitor 2(Lenovo) — https://amzn.to/3mnbAVt
Bluetooth Earphones — https://amzn.to/3bTUeui
My Studio Lights — https://amzn.to/3mmiyd5
My Router — https://amzn.to/3kc9PZa

__My PC Configs:__

Processor — https://amzn.to/3io6G89
Motherboard — https://amzn.to/33tXlp9
Ram (32gb) — https://amzn.to/33tc7w7
Graphic Card — https://amzn.to/32q6DTC
Power supply — https://amzn.to/2FvQiEa
SSD — https://amzn.to/3hx4E4i
PC Case — https://amzn.to/2E3jTo4
RGB Fans — https://amzn.to/2FyEr8a

__Accessories:__

My Keyboard (Logitech) — https://amzn.to/3hpuasl
My Mouse (MX Master 3) — https://amzn.to/2H1PTtX
My Microphone (Yeti) — https://amzn.to/3mcUgCi
My Speaker (Bose) — https://amzn.to/2FvOJWO
My Chair (Amazon) — https://amzn.to/33rNwIk
My Gimbal (DJI) — https://amzn.to/3bTQuce
My Tripod (Amazon) — https://amzn.to/2ZxTeHk
USB-C Hub — https://amzn.to/32pzK9N
RBG light strips — https://amzn.to/2RmJ3ki
Capture Card — https://amzn.to/2ZChc4p
HDMI Cables — https://amzn.to/2DWCRfR
Laptop Stand — https://amzn.to/3bXSz6V
Green Backdrop — https://amzn.to/3mfjYGx

## Learn More

If you would like to learn more, check out the various platforms I am a part of.

YouTube: https://www.youtube.com/MTechViral
Instagram: https://instagram.com/codepur_ka_superhero
Twitter: https://twitter.com/imthepk
Linkedin: https://www.linkedin.com/in/imthepk/

Happy Working! If you enjoyed the article make sure to show me some love and hit that clap button!
How to host your react app on firebase.
Published: 2020-09-14 17:36:00

Hosting on firebase is pretty easy, once you get your configuration set up properly. I feel like a lot of guides leave some things out however. Here's how I was able to get my react app setup with firebase. It'll help if you have a firebase account setup before you start.

## Installation / Setup (i assume you have a react app already.)

```
npm install -g firebase-tools
```

after you've installed, you need to login.

```
firebase login
```

## Initialization (**in your project directory**)

```
firebase init
```

Make sure to choose hosting below.

```
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
```

Give it your project name. This is the name you will see on your firebase dashboard.
```
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
 
? Select a default Firebase project for this directory:
-> give-your-firebase-project-a-name
i  Using project give-your-firebase-project-a-name
```

Make sure you answer these questions correctly as shown below. It's important to know, if you don't have a `build` directory in your react project folder, you need to build your project. To get that build folder, open up a terminal in your project directory and type `npm run-script build` -- this should generate a build folder. If not, check your package.json for a "build" script. if its not there you can always just type `npm react-scripts build`

```
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? No
```

## Configuration

You're almost done. A lot of tutorials will now jump straight to the `firebase deploy` command. This didn't work for me though. If it worked for you, then you don't really need to read on. If you're having trouble, here is how **I** fixed it. 

Go to your `firebase.json` file and make sure it looks similar to this.

```
{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "rewrites": {
    "source": "**",
    "destination": "/index.html"
  }
}
```

Once this is setup like the above, try running the following in the project directory:

```
firebase deploy
```

Your app should be good to go now. The console will spit out a link for you to check your app.
make your own custom STATIC SITE GENERATOR with NodeJS
Tags: javascript, node
Published: 2020-09-14 17:17:08

---
title: make your own custom STATIC SITE GENERATOR with NodeJS
published: true
description: 
tags: javascript, nodejs
---

It might be easier to create your own static site generator than learn a new framework.

In this video, I'll create a quick tool to generate a static site using Markdown files.

Note:

in this video I have written code like this:

```javascript
path.join(path.resolve(), 'src')
```

But it can also be shortened to this:

```javascript
path.resolve('src')
```

Source: 
https://github.com/joelnet/static-site-generator

Be sure to [subscribe](https://www.youtube.com/c/JoelCodes?sub_confirmation=1) for more videos like this!

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xb6e84yj8yc2gqelz4op.png)](https://www.youtube.com/c/JoelCodes?sub_confirmation=1)
Manage Thrivecart Payment using webhooks in Node.js
Tags: thrivecart, javascript, node, webhooks
Published: 2020-09-14 17:07:07

I really found it difficult to start with thrive cart integration for my marketing application.
The lack of complete API reference makes it confusing to use.

After some trial and errors, I have created the simplest approach to handle the thrivecart webhook events. 

Please visit this gist for more reference.
https://gist.github.com/cptiwari20/836e7875d38dd4965faeb14fb8f3a4ad


If you are new to thrivecart, Please use my promo code 'cptiwari20' to get 50% OFF on the premium plans.
What is Rubber Duck Debugging?
Tags: webdev, productivity, tech, debugging
Published: 2020-09-14 17:02:39

You’ve been banging your head against a virtual wall for what seems like a month, and you are no closer to getting your code to actually do what it’s supposed to do. What now? Perhaps a new career? Something less frustrating like crash test dummy sounds pretty good all of a sudden.

Ok, you take a quick breath and realize that maybe you can get help from a coworker. Someone to come look at your code with you and help you find the problem. That is actually a proven recipe for success. Just the act of explaining in clear terms what you’re trying to accomplish in your code will lead to you discovering the problem, and the other person often doesn’t even need to really participate, they just need to listen.

Only what do you do if you work alone? Or it’s late at night and nobody else is with you? Or your only coworker is on vacation following the Grateful Dead around on tour?

There is another solution, that is proven to be 83.29% as effective as an actual human. And that is the rubber duck.

![image](https://miro.medium.com/max/190/0*pVQvf0PnjakfPRMW?)

Yes, pull out your trusty rubber duck and set him/her/them/it on your desk and proceed to explain your code and how it works to Mr. Ducklesworth.

If you’ve never been exposed to this technique it can sound dumb, and even thinking about doing it may make you feel silly, but what is your priority? Looking as cool as [David Hasselhoff](https://www.youtube.com/watch?v=PJQVlVHsFF8) or getting your code into production?

Don’t believe me? Here’s a [great writeup](https://www.thoughtfulcode.com/rubber-duck-debugging-psychology/) on the psychology of rubber duck debugging.

So [get](https://ducksinthewindow.com/computer-geek-rubber-duck/?gclid=CjwKCAjw67XpBRBqEiwA5RCocZ5Ai_HIqm6kGCF-r1feMnRcA9-5zyYZJetCqICiEET0pa3PZdZWQhoC8N8QAvD_BwE) your [favorite](https://www.youtube.com/watch?v=cDy4PZPMDwU&feature=youtu.be&t=24) artificial waterfowl, keep him handy, and when necessary, lay out your technical problems on his very capable and water-proof shoulders.

Happy coding!

Signup for my newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=whatisrubberduckdebugging&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=whatisrubberduckdebugging&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
خرید ماسک سه لایه ، ماسک جراحی و ماسک فیلتر دار
Published: 2020-09-14 17:00:49

ماسک تنفسی یک پوشش بهداشتی و تمیز می باشد که بر روی دهان و بینی گذاشته می‌شود. این ماسک‌ها عمدتا جنبه‌ی پزشکی داشته و برای مصارف خاص پزشکی کاربرد دارند. از جمله‌ی این مصارف می توان به استفاده‌ی پزشکان در اتاق عمل و برای معاینه، استفاده برای مصارف خاص مانند کارمندان آزمایشگاه ها و کارمندان اشاره نمود. خرید ماسک سه لایه ، ماسک جراحی و ماسک فیلتردار در بتادارو امکان پذیر است.

ماسک تنفسی چیست

ماسک تنفسی نوع بخصوصی از گروه ماسک‌ها می باشد که به طور خاص توسط کادر درمانی مانند پرستاران و پزشکان استفاده می‌شود. این نوع ماسک از انتقال بیماری‌ها جلوگیری می نماید.

انواع ماسک تنفسی

ماسک‌های تنفسی انواع مختلفی را دارا هستند. ماسک ساده، ارزان‌ترین و ابتدایی ترین نوع ماسک‌های تنفسی می باشد که از این ماسک برای جلوگیری از تنفس آلودگی هوا استفاده می شود. نوع دوم این ماسک‌ها ماسک‌های فیلتر دار هستند که با عنایت به دسته‌بندی‌های خاص پزشکی قابلیت فیلتر نمودن ذرات و موارد مختلفی را دارند. ماسک N95 به عنوان معروفترین ماسک فیلتردار همان ماسکی است که پزشکان در اتاق عمل در کنار ماسک جراحی سه لایه از آن استفاده می‌ نمایند.
ماسک کربن اکتیو یک نوع از ماسک‌های فیلتر دار از گروه F امی باشد. فیلتر‌های این ماسک قابل تعویض بوده و از این ماسک در صنایع با آلاینده‌های شیمیایی و گازی استفاده می‌شوند. نوع دیگر ماسک ماسک سه لایه است که توسط عموم مردم مورد استفاده قرار می گیرد. خرید ماسک سه لایه جراحی نسبت به ماسک های دیگر بیشتر توصیه می شود.

راهنمای خرید ماسک تنفسی

داروخانه آنلاین بتادارو برای نخستین بار با ایجاد صفحه‌ای مخصوص فروش ماسک و به‌ویژه ماسک تنفسی؛ امکان خرید آنلاین ماسک نظیر ماسک سه لایه جراحی را برای مشتریان خود فراهم کرده است. شما می‌توانید با مراجعه به این صفحه محصولات مورد نظرتان را مشاهده نموده و در صورت تمایل خرید اینترنتی انجام دهید. برای یافتن اطلاعات بیشتر درباره‎‌ی هر محصول کافی هست به صفحه‌ی آن محصول در بتادارو مراجعه کنید.

نکاتی که باید در خرید ماسک تنفسی به آن توجه نمود

یکی از مهمترین نکاتی که باید درباره‌ی خرید ماسک به آن دقت نمایید، یکبار مصرف بودن این ماسک‌ها می باشد. به جز ماسک‌های فیلتر دار گروه N و R که تا 8 ساعت قابل استفاده می باشند.، ماسک‌های تنفسی دیگر نظیر ماسه سه لایه جراحی را باید بعد از 2 ساعت تعویض کرده و ماسک پیشین را دور انداخت.

طریقه استفاده درست از ماسک تنفسی

ماسک‌های تنفسی عمدتا از یک پوشش استریلیزه شده و دو کش در اطراف آن تشکیل شده اند. پوشش استریلیزه شده‌ی این ماسک‌ها روی بدهان و بینی قرار می‌گیرد و دو کش پشت گوش و پشت سر قرار می‌گیرند.
ماسک‌های ایمنی و نانو در صنایع دیگری مثل جوشکاری به‌کار می‌روند. خرید انواع ماسک تنفسی در مدل های متنوع از داروخانه اینترنتی بتادارو امکان‌پذیر می باشد. برای اطلاع از تخفیف و فروش ویژه‌ی محصولات به صفحه‌ی خرید ماسک در بتادارو مراجعه کنید.
Experienced devs in the community.
Tags: javascript
Published: 2020-09-14 17:00:11

---
title: Experienced devs in the community.
published: True
description: How does it feel to be humbled by Hackerrank/ codewars challenges whereas you solve day to day organisational problems daily without fail and all your tests pass? Is this normal?Does it make you doubt yourself in any way?
tags: Python, JavaScript
//cover_image: https://direct_url_to_image.jpg
---
Fastgeko Review - WordPress LMS und Lernplattform
Tags: wordpress, kurs
Published: 2020-09-16 13:58:31

---
title: Fastgeko Review - WordPress LMS und Lernplattform
published: true
date: 2020-09-14 16:57:48 UTC
tags: Wordpress,kurs
canonical_url: https://j0e.org/fastgecko/
---

![Fastgecko WordPress LMS](https://j0e.org/wp-content/uploads/2020/09/fastgecko-wp-lms.png)

    Das WordPress LMS Fastgecko ist eine deutschsprachige Lernplattform, mit der du Online-Kurse für deine Besucher …

[Fastgeko Review - WordPress LMS und Lernplattform »](https://j0e.org/fastgecko/)
Podcasting Book Promotion Strategies- The Building an Indie Business Podcast
Tags: podcast
Published: 2020-09-14 16:49:47

[Listen Here](https://baib-podcast.com/podcasting-book-promotion-strategies.html)

In this episode, I discuss the strategies I used to promote my podcasting book. How I used YouTube, live-streaming, SEO, Affiliates, Twitter, and Lead Magnets to promote the book.

**Show Notes:**

[Buy the book I wrote](https://openpodcast.xyz/)
[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
macOS status monitoring app written in SwiftUI
Tags: swift, showdev, news
Published: 2020-09-14 16:24:34

Maybe the most fashionable one of my recent SwiftUI practice, and the result looks good:

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

### Highlights

- Dark Mode compatible
- Drag to re-order components
- Detailed information
  - CPU: usage/temperature/cores/up time
  - Fan: current/min/max speed
  - Memory: usage/cached files/temperature
  - Battery: usage/health/cycle count
  - Network: in/out speed

[Download/GitHub](https://github.com/gao-sun/eul)

![Pref](https://dev-to-uploads.s3.amazonaws.com/i/3tavq0n75ijgjpxkl29i.png)
BFE.dev #9. decode message
Tags: javascript, interview, facebook
Published: 2020-09-14 16:23:26

> https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

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

This article is about the coding problem [BFE.dev#9. decode message](https://bigfrontend.dev/problem/decode-message)

## Problem
Your are given a 2-D array of characters. There is a hidden message in it.

```
I B C A L K A
D R F C A E A
G H O E L A D 
```

The way to collect the message is as follows

1. start at top left
2. move diagonally down right
3. when cannot move any more, try to switch to diagonally up right
4. when cannot move any more, try switch to diagonally down right, repeat 3
5. stop when cannot neither move down right or up right. the 

character on the path is the message
for the input above, `IROCLED` should be returned.

## Analysis

While moving forward, the direction only changes along the y-axis, meaning **we could use a flag to hold the vertical direction**.

By keep tracking current position `x, y`, we could get the next position `x + 1, y + 1`, or `x + 1, y - 1`.

When border is met, we change the vertical direction. When the last element is traversed, stop and return the result.

## Let's write some code

The code is fairly simple. 

```js

/**
 * @param { string[][] } message
 * @returns { string }
 */
function decode(message) {
  // edge case
  const rows = message.length
  if (rows === 0) return ''
  const cols = message[0].length
  if (cols === 0) return ''
  
  let result = ''
  let i = 0
  let j = 0
  
  // keep track of the direction vertically
  let directionY = 1
  
  while (j < cols) {
    result += message[i][j]
    
    // switch direction at the border
    if (i === rows - 1) {
      directionY = -1
    }
    if (i === 0) {
      directionY = 1
    }
    
    i += directionY
    j += 1
  }
  
  return result
}
```

I've posted above solution [here](https://bigfrontend.dev/problem/decode-message/discuss/51)

## Passed!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ds9gf0m6w4ufcosv0in4.gif)

If you are interested, have a try at BFE.dev https://bigfrontend.dev/problem/decode-message

Hope it helps, see you next time!
Pimcore CMS Tutorial
Published: 2020-09-14 16:17:37

[In this article](https://medium.com/@daniele.fontani/pimcore-tutorial-3035ab7c911d), I will try to show all the Pimcore capabilities building a blog from scratch.
I will cover the most important topic on Pimcore with a step by step explanation.
After this tutorial, you will be able to start working on a Pimcore website. Moreover, reading this article will help to understand if this solution suits you.

[Read the article](https://medium.com/@daniele.fontani/pimcore-tutorial-3035ab7c911d)
On .NET Episode: NET Microservices with Steeltoe
Tags: microservices, dotnet, azure, cloud
Published: 2020-09-14 16:10:29

Steeltoe is an open source framework for .NET that provides libraries to build cloud-native and microservice applications.

In this episode, Cecil chats with David and Hananiel from the Steeltoe project to learn about the various scenarios that it enables for .NET developers.


{% youtube QLRi6iPapVg %}

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


## Useful Links
<ul>
<li><a href="https://steeltoe.io" target="_blank">Steeltoe homepage</a></li>
<li><a href="https://steeltoe.io/get-started" target="_blank">Get stared</a></li>
<li><a href="https://github.com/steeltoeoss" target="_blank">Steeltoe on GitHub</a></li>
<li><a href="https://docs.microsoft.com/dotnet/architecture/microservices/?WT.mc_id=ondotnet-devto-cephilli" target="_blank">.NET Microservices: Architecture for Containerized .NET Applications</a></li>
<li><a title="Containerized Docker Application Lifecycle with Microsoft Platform and Tools" href="https://docs.microsoft.com/dotnet/architecture/containerized-lifecycle/?WT.mc_id=ondotnet-devto-cephilli" target="_blank">Containerized Docker Application Lifecycle with Microsoft Platform and Tools</a></li>
</ul>
What is Scrum? (Video)
Tags: scrum, agile
Published: 2020-09-14 16:10:12

Hello! In this series, I discuss things to prepare you for what it's like to work at your first software developer job.

In this video series, I am going to give you a bit of insight into what it is like to work on at a company as a developer.

Imagine you have just got your first gig as a junior dev, but you realize that up till now you've only really worked on your own projects, or in small groups at best. If you want to know exactly what to expect in your first few weeks as a junior dev, this is the video for you.

In this video we are going to cover how development teams work, or in other words:
Scrum

Thanks for watching, if you would like to see more videos like this please do Like and Subscribe so I know to create more.

Twitter: https://twitter.com/ania_kubow
YouTube: https://youtube.com/aniakubow
Instagram: https://instagram.com/aniakubow

{% youtube IObeedujfxY %}
misunderstanding the result of this code
Published: 2020-09-14 16:06:26

good evening geeks I hope you are well. Please, I would like you to enlighten me on one point. I don't understand the result of this php code it shows me 13. I really don't understand why. Need explanation. I want to clarify that I am a beginner Thank you in advance friends!

<?php
$total = 0;
$i = 1;
while ($i<=2) {
$total += $i;
$i =$i +1 ;
echo $total;
}
?>
Make it Rain 🌧 in HTML Canvas
Tags: html, javascript, showdev, codepen
Published: 2020-09-14 15:57:07

Hey guys, I am back with another fun experiment that I created sometime back when I was bored. It was a hot summer day and I hoped so much for it to rain. Since I was so bored, I wanted to make it rain. So I made it rain, not outside, but in my code. 

Here is what I achieved

{% codepen https://codepen.io/SoorajSnBlz/pen/dyGzKpE %}
Click Rerun if the rain does not start or if fullscreen is not used.

First of all, this is not a css animation. Only the lightning is a css based animation. I had to use vector math for the rain so that each raindrop falls with increasing velocity. The calculations are all math and physics based. 

This was done using HTML canvas and some vanilla javascript.

### Steps I followed
1. Each Raindrop is a class object with its own properties.
2. When loading the page, 'n' number of raindrop objects are created randomly and pushed to any array.
3. RequestAnimationFrame was used for animation to optimise the browser animations.
4. No new raindrop object is added after a raindrop fell to the floor.
5. I had to do 2 things when a raindrop hit the floor (collision detection). 
6. First is to reset its position, velocity and acceleration. This made it look like never ending rain. This also made sure that the array was not overflowing with values and the objects were reused for better performance. 
7. Second is using its last known position and velocity/acceleration, and create an opposite collection of raindrops that looks like splashes. You know like when a raindrop hits the floor, it loses its momentum and moves in the negative direction until it falls back. Same principle here.
8. Other than this I also added some presets and global environment, just in case I was going to make other objects interact with the rain
```javascript
const raintype = {
  drizzle: { count: 30, speed: 0.27 },
  light: { count: 100, speed: 0.3 },
  medium: { count: 250, speed: 0.4 },
  downpour: { count: 500, speed: 0.5 },
  afteshower: { count: 3, speed: 0.4 }
}

var environment = {
  wind: createVector(-0.05, 0),
  raintype: raintype.medium,
}
```

This was another one of my fun experiments with javascript, math and some imagination. Once in a while, I like to take time off from my official projects and do some imaginative and fun projects like these. And I did learn all those above mentioned concepts from this project. 

Hope you like this :) 

Codepen Link https://codepen.io/SoorajSnBlz/pen/dyGzKpE