teleren/devto huggingface dataset:
How to add an event listener to multiple elements in JavaScript
Tags: javascript, event, tutorial, webdev
Published: 2019-08-20 10:12:17

> [Sign up to my newsletter!](https://baransel.dev/newsletter/).

In JavaScript you add an event listener to a single element using this syntax:

```js
document.querySelector('.my-element').addEventListener('click', event => {
  //handle click
})
```
But how can you attach the same event to multiple elements?

In other words, how to call `addEventListener()` on multiple elements at the same time?

You can do this in 2 ways. One is using a loop, the other is using event bubbling.

### Using a loop

The loop is the simplest one conceptually.

You can call `querySelectorAll()` on all elements with a specific class, then use `forEach()` to iterate on them:

```js
document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  }
})
```

If you don’t have a common class for your elements you can build an array on the fly:

```js
[document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  }
})
```

### Using event bubbling

Another option is to rely on event bubbling and attach the event listener on the `body` element.

The event is always managed by the most specific element, so you can immediately check if that’s one of the elements that should handle the event:

```js
const element1 = document.querySelector('.a-class')
const element2 = document.querySelector('.another-class')

body.addEventListener('click', event => {
  if (event.target !== element1 && event.target !== element2) {
    return
  }
  //handle click
}
```
SSH  to Remote server on VsCode in 1 minute
Tags: vscode, ssh
Published: 2019-08-20 09:59:10

Lately, I was working on a project in Digital Ocean. I wanted to pull and access the folders there in my local Visual studio code. While  [Vs Code Documentation]() solves this, I want to provide a straight forward way to pull a remote server to your Vs Code.


> This article assumes that your ssh is already configured and all you want to do is get the remote server locally.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hssi4tganzyjzsvpdjdx.png)

### Step 1:Install Remote-SSH extension
On VsCode, navigate to extensions and Install `Remote-SSH`
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ug3iqthv4f0g3oedrb8u.png)

### Step 2: Configure SSH
i. Open the Vscode command Pallet(cmnd+shift+P) and type `Remote`. You will see a dropdown with several options. Click `Remote-SSH: connect to host`
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gxrw29r8rtu69a5165ry.png)

ii. In the input box provided, insert the hostname to ssh to in the format `username@hostname` ie `root@127.0.0.1` and click the highlighted option below it.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ga5anzt05vlz11mtsf29.png)

iii. Insert your password in the next step and Vscode will finish the rest of the configuration.

### Finally:
To open your folders, Navigate to `Files > open > file`
Alternatively, you can click on the File Explorer to Open the folder that you would like to access.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cqnix1gm531bwhnmvwpr.png)

Happy Coding From the shark:shark:
Working with WebRTC
Tags: webrtc, voip, vp8
Published: 2019-08-20 09:48:55

---
title: Working with WebRTC
published: true
description: Resources for working with WebRTC
tags: WebRTC,VoIP,vp8,
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tv6g1skrgh9s6bbjs2xp.png)

Anybody who worked with [WebRTC](https://webrtc.org/) will agree that there is a huge lack of learning resources and on top of that on every few years, [WebRTC](https://webrtc.org/) standards changes and changes are big sometimes that makes previous resources outdated, creating more gap. 

>WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.
>

I have found most of the resources either not clear, not compatible with the current [WebRTC](https://webrtc.org/) library or very incomplete. During my searching for resources, I have found a few as good resources. 

## Web
* [Real time communication with WebRTC](https://codelabs.developers.google.com/codelabs/webrtc-web)
* [WebRTC Web demos and samples](https://github.com/webrtc/samples)
* [Official documentation](https://webrtc.org/start/)

## Android
* [WebRTC Android Codelab](https://github.com/Sadmansamee/webrtc-android-codelab)
* [Getting Started with WebRTC for Android— Develop video call app easily!](https://vivekc.xyz/getting-started-with-webrtc-part-4-de72b58ab31e)

## iOS
* [A simple native WebRTC demo iOS app using swift](https://github.com/stasel/WebRTC-iOS)
* [A WebRTC and CallKit demo application](https://github.com/kurzdigital/Whale)

## Flutter
* [Flutter WebRTC plugin for Mobile/Desktop](https://github.com/cloudwebrtc/flutter-webrtc)
* [Demo for flutter-webrtc](https://github.com/cloudwebrtc/flutter-webrtc-demo)
* [A simple WebRTC signaling server for flutter-webrtc and html5.](https://github.com/cloudwebrtc/flutter-webrtc-server)
* [Flutter WebRTC plugin for iOS/Android](https://flutterawesome.com/flutter-webrtc-plugin-for-ios-android)


These are very high-level examples, I have a plan to write a full-fledged tutorial on this topic soon.
Tourism in Nigeria
Tags: timbucomnigeria
Published: 2019-08-20 09:47:10

Tourism in Nigeria centers largely on events, due to the country's ample amount of ethnic groups, but also includes rain forests, savannah, waterfalls, and other natural attractions.[1] The World Travel and Tourism Council estimated revenue related to tourism and travel in Nigeria will exceed $1 billion USD in 2007, and will account for approximately 6% of the gross domestic product. For more info visit timbu.com/Nigeria
Migrate from OpenCart to WooCommerce with Next-Cart
Tags: opencart, woocommerce, wordpress, migrate
Published: 2019-08-20 09:04:37

# What data can be migrated from OpenCart to WooCommerce
You are able to migrate entire eCommerce data from OpenCart to WooCommerce including products, images, categories, customers, orders, taxes and reviews.

### Products
1. Product Informations, e.g. Name, Description, Prices, Images, Meta, SEO (301 Redirects or Rewrite), Yoast SEO, etc.
2. Product Options and Product Variants.
3. Product Links, e.g. Categories, Downloads, Upsells and Cross-sells Products, Grouped Products.
4. Product Attributes.

### Product categories
1. Category Informations, e.g. Name, Description, Image, SEO URLs (301 Redirects or Rewrite), Yoast SEO, etc.
2. Category Parents

### Customers
1. Customer Informations, e.g. First Name, Last Name, Email, etc.
2. Customer Addresses. All addresses with full informations.

### Orders
1. Order General Informations, e.g. Status, Currency, Total, History, Notes, Date, etc.
2. Product Details, e.g. Name, Model/SKU, Quantity, Price, Tax, Option Details, etc.
3. Customer Details, e.g. First Name, Last Name, Email, Billing/Payment and Shipping Addresses.

### Taxes
1. Tax Class, Tax Zones and Rates.

### Reviews
1. Reviews of migrated Products. Review Details, e.g. Customer, Comment, Rating, Status, Date.

# How to migrate OpenCart to WooCommerce with Next-Cart
Next-Cart is a shopping cart migration service allows you to migrate data from your current store to another eCommerce platform. The whole procedure can be taken in 3 simple steps:

1. Set up source and target store
2. Choose the data you want to migrate
3. Perform the migration

{% youtube ZsrUhz_sXKs %}

Are you interested in my video? Let try Free Demo Migration at: [OpenCart to WooCommerce Migration](https://next-cart.com/product/opencart-to-woocommerce/)

# Thank you
If you have any questions, feel free to contact us at [https://next-cart.com/contact/](https://next-cart.com/contact/), our WooCommerce experts are always ready to help you 24/7. Don’t forget to like and share the guide with others if it’s useful for you.

Have a nice day!
Day #3 - Simple Weather App
Tags: android, gson, picasso
Published: 2019-08-20 07:31:18

---
title: Day #3 - Simple Weather App
published: true
description: Pratice Sharing Series
tags: android,gson,picasso
---


Hello, I am practicing android application development every day. I will share my samples daily.

Note: There may be old techniques. The logic is the same.

- Feel free to contact me for any questions.

https://github.com/ardakazanci/AndroidWeatherApp
React Tldr; React v16.9.0
Tags: react, tldr
Published: 2019-08-20 07:20:45

New Deprecations: 
 - you will now see a warning when using any of the old names of unsafe lifecycle method
 - Using "javascript:" URLs now will log a warning
 - No support for “factory” component that returns an object with a render method

New Features:
 - act() testing utility also accepts asynchronous functions
 - programmatic way to gather measurements called <React.Profiler> - measures how often app renders and what's the "cost" of render is

Bugfixes: 
 - A crash when calling findDOMNode() inside a <Suspense> tree has been fixed.
 - A memory leak caused by retaining deleted subtrees has been fixed too.
 - An infinite loop caused by setState in useEffect now logs an error. (This is similar to the error you see when you call setState in componentDidUpdate in a class.)

Source: https://reactjs.org/blog/2019/08/08/react-v16.9.0.html
Building microservices on .NET Core
Tags: dotnet, microservices, csharp, net
Published: 2019-08-20 05:58:22

---
title: Building microservices on .NET Core
published: true
description: 
tags: dotnet, microservices, csharp, net
---

I want to invite you to read our series of articles about **Building microservices on .NET Core**.

In the first article we introduced the series and prepared the plan: business case and solution architecture. 

In the second article we described how you can structure internal architecture of one microservice using CQRS pattern and MediatR library.

In the third article we described the importance of service discovery in microservice based architecture and presented practical implementation with Eureka. 

In the fourth part we presented how you can build API Gateways for your microservices with Ocelot. 

The fifth part was dedicated to implementation of data access with Marten library. 

In the sixth article we showed you how you can combine SignalR and RabbitMQ to build real time server-client communication.

Source code for complete solution can be found on our [GitHub](https://github.com/asc-lab/dotnetcore-microservices-poc).

Solution architecture:
![ASC LAB Microservices on .NET Core architecture](https://raw.githubusercontent.com/asc-lab/dotnetcore-microservices-poc/master/readme-images/dotnetcore-microservices-architecture.png)

I will update this article when a new article in the series appears.
Don't hesitate and check our series!

[Part I The Plan](https://altkomsoftware.pl/en/blog/building-microservices-on-net-core-1/)
[Part 2 Shaping microservice internal architecture with CQRS and MediatR](https://altkomsoftware.pl/en/blog/microservices-net-core-cqrs-mediatr/) 
[Part 3 Service Discovery with Eureka](https://altkomsoftware.pl/en/blog/service-discovery-eureka/)
[Part 4 Building API Gateways With Ocelot](https://altkomsoftware.pl/en/blog/building-api-gateways-with-ocelot/) 
[Part 5 Marten An Ideal Repository For Your Domain Aggregates](https://altkomsoftware.pl/en/blog/building-microservices-domain-aggregates/)
[Part 6 Real time server client communication with SignalR and RabbitMQ](https://altkomsoftware.pl/en/blog/building-microservices-6/)
30 Day Challenge: Write one Post per Day
Tags: productivity, journey, personaldevelopment
Published: 2019-08-20 07:04:00

---
title: 30 Day Challenge: Write one Post per Day
published: true
description: 
tags: productivity, journey, personal development
---

I start my "30 Day Challenge: Write one Post per Day".

My Why:
- I want to strengthen my publishing habits
- I want to tackle my fear of publishing
- I want to share my knowledge
- I want to strengthen my writing skills
- I want to benefit from social accountability

Rules:
- published between 0.00 - 23.59, UTC +2
- at least 1.000 characters
- no copy of an old post

Questions:
- What are your experiences with these kind of challenges?
- What are your tips to improve my challenge?
Suggestions for a blogging platform
Tags: discuss, blog
Published: 2019-08-20 06:28:33

---
title: Suggestions for a blogging platform
published: true
description: Suggestions for a new self hosted blogging platform
tags: discuss, blog
---

I've been using Wordpress since I started <a href="https://www.pmichaels.net">my blog</a> in 2014.  I'm now starting to wonder if it's time for a change.  I'd like to canvas opinions on self-hosted blogging platforms.  Ideally, I'd like to be able to use Markdown to write the articles, and have some kind of styling option (or be open source so I can just style it myself).

Any suggestions?
GitHub - Kickstart your multiplatform TypeScript development with PATT
Tags: javascript, react, typescript, android
Published: 2019-08-20 06:07:32

Hi dev friends and collegues!

I've decide to open source a few tools I've been using over the last few years as a template. It's called the Platform Agnostic TypeScript Template (PATT). 

PATT supports full stack TypeScript/Node development, deploys natively to Web, Android, IOS and comes with build in services for Authentication, Database and Storage via Firebase integration.

Hopefully TypeScript developers out there can use this template to shorcut a bunch of boilerplate code necessary to get apps deployed on mulitple platforms.

More here:

https://github.com/naishtech/platform-agnostic-typescript-template
Short bit and byte
Tags: ruby, rails, php, opensource
Published: 2019-08-20 05:52:48


While scrolling down to my LinkedIn feeds this morning I found this short story (*_*) which summarizes lessons from all the success stories  . So I just want to share with all my fellow devs .

2 stories to begin with 

1. Nokia refused Android 
2. Yahoo refused Google 

Story over 

Lessons learnt 
1. Take risks 
2. Embrace changes 
3. If you refuse to change with time , you might perish 

Ok 2 more stories 

1. Facebook takes over whatsapp and instagram 
2. Flipkart takes over myntra and flipkart owned Myntra takes over jabong & now Flipkart is taken over by Walmart 

Story over 

Lessons learnt 

1. Become so powerful that your competitors become your allies .
2. Reach the top position and then eliminate the competition
3. keep innovating 

2 more stories 

1. Colonel sanders founded KFC at the age of 65 .
2. Jack Ma , who coudnt get job in kfc , founded ALibaba .

story over 

Lesson learnt 

1. Age is just a number .
2. Only those who keep trying succeeds .

Last but not least 

1.Lamborghini was founded as result of revenge of a tractor owner who was insulted by Enzy Ferrari , the founder of ferrari

Story over

Lessons learnt 
1.Never underestimate anyone , ever !! .
2.Success is the best revenge .
Top Python Posts from August 12 week
Tags: python, bestofdev
Published: 2019-08-20 05:24:15

Hi! I'm Vicente, your friendly Filipino mod for the python tag. Today, is another episode of the Top Python Posts of the week!

Hope you'll follow along!

# 1.) Get an SMS when your favorite Twitcher is streaming in 30 lines of Python

The specifications are simple: we want to receive an SMS as soon as a specific Twitcher is live streaming. We want to know when this person is going live and when they leave streaming. We want this whole thing to run by itself, all day long.

{% link https://dev.to/daolf/get-an-sms-when-your-favorite-twitcher-is-streaming-in-30-lines-of-python-549a %}

# 2.) PyTorch Hello World

In neural networks primer, we saw how to manually calculate the forward and back propagation for a trivial network consisting of one input neuron, one hidden neuron, and one output neuron:

![](https://res.cloudinary.com/practicaldev/image/fetch/s--Rv98-LPx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/7xbmlv7qpot4zvrioaxf.png)

{% link https://dev.to/nestedsoftware/pytorch-hello-world-37mo %}

# 3.) Essential Python Tips And Tricks For Python Developer

Python is having shorthand statements and shorthand operators. These things will help you write more logic with less number of statements.

{% link https://dev.to/tuantvk/essential-python-tips-and-tricks-for-python-developer-5g9j %}

# 4.) Learning Python from Scratch: Dictionaries

## Goals
✔ Warm up/Catch up with chat, use !mark and !note in chat
✔ Recap from last episode
✔ Updates for next week
✔ Learn about Dictionaries in Python
✔ Stretch/break
✔ Closing and raid @CodeRushed

{% link https://dev.to/azure/learning-python-from-scratch-dictionaries-5fl7 %}

# 5.) Infinite scroll with Django

- Step 1: Creating our model
- Step 2: Creating our view
- Step 3: URL Configuration
- Step 4: Waypoints JS and Template

{% link https://dev.to/coderasha/infinite-scroll-with-django-d0a %}

See you again next week!
___ as a Service
Tags: justforfun, fun, game
Published: 2019-08-20 03:51:53

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2j3kopqhde7zno4tute5.jpg)

A. Side projects
B. Automation 🤖
C. node_modules 📂

Or suggest your own answer.
Samsung LogCat Fix
Tags: android, kotlin
Published: 2019-08-20 03:47:08

Are you tired of the cluttered Logcat?
Well I got you, I own a Samsung Note 9, and according to Samsung experts they add all kind of randoms in the Logcat window in Android Studio.

Basically I am inspired from this blog 

https://medium.com/@vlonjatgashi/how-to-filter-out-android-logcat-logs-66945a4a0e0a

Just create a new log tag as this

```
^(?!.*(AbsListView|ActivityThread|gies.*|ScrollView|OpenGLRenderer|InputTransport|InputMethodManager|InputMethodManager|zygote64|dalvik|ViewRootImpl*)).*$
```

This is for the emulator giving bunch of random Logs
```
^(?!.*(libEGL|libc|EGL_emulation|eglCodecCommon|RenderThread|HostConnection|Gralloc3|OpenGLRenderer|AbsListView|ActivityThread|gies.*|ScrollView|OpenGLRenderer|InputTransport|InputMethodManager|InputMethodManager|zygote64|dalvik|ViewRootImpl*)).*$
```

and package name as app package name.

Enjoy clutter free life ;)
Front end security - React
Tags: web, frontend, react
Published: 2019-08-20 02:31:55

---
title: Front end security - React
published: true
description: Front end security
tags: web, frontend, react
---

So you have built your site and it's now time to launch it to your users. What key things should you keep in mind from a front-end security point of view ? 
- Use SSL
- dangerouslySetInnerHTML (React) - Sanitize your inputs between client and server
- Have proper checks, like cart total, both on client and server. 
- While using forms with JS, make sure you use method="POST". Otherwise, on clients which don't support JS, all the fields with "name" will get transmitted in the URL on submitting the form. 
- Make sure you are PCI compliant while processing payment information of your clients.

Credit - Syntax.fm podcast
Advantages of designing and/or developing a site "mobile-first"?
Tags: discuss, responsiveness, frontend
Published: 2019-08-20 01:10:25

---
title: Advantages of designing and/or developing a site "mobile-first"?
published: true
description: 
tags: discuss, responsiveness, front-end
---

Just curious, I've tried this with a very recent project and I was wondering what other people's experience with designing (and/or developing) mobile-first was like.

It seems like it's a bit of a buzzword at the moment, I'm not even sure of it's actual definition, but I've interpreted it literally - Meaning, starting designs and/or development at mobile-sized resolutions.

Recently I designed mobile-first for a client who was very concerned with the responsiveness of their site. This made creating the designs a much smoother/simpler process initially - There was less space to work with, and less room for stylistic elements that you might spend more time creating on a desktop site.

However, once I finished the mobile designs and moved to larger screen resolutions, I started to notice a lot of dead-space that was hard to fill with substantial content or elements.

I like to think the site still turned out great (The client is happy with it:) But I still wonder if it would have turned out better if I hadn't designed mobile first.

What are your thoughts on the mobile-first workflow? Pros? Cons? Concerns?


P.S.
I actually *developed* the website "desktop-first" because I'm used to that workflow, but maybe it would've been better to stick to mobile first throughout the entire creation of the website.
Hookstate: the modern, extremely fast and extendable state management for React that is based on hooks.
Tags: react, typescript
Published: 2019-08-20 01:01:52

Please, meet [Hookstate](https://hookstate.netlify.com/) - modern alternative to Redux, Mobx, Formik without boilerplate but with impressive performance and predictable behavior. It allowed me to remove Redux and Mobx, and as a result improve the code quality and performance of my projects. It has got very simple API. It is extendable by plugins. And it has got impressive performance: here is the [example of the form state management with 5000 fields](https://hookstate.netlify.com/performance-demo-large-form) and [the example of the table state with 10000 cells](https://hookstate.netlify.com/performance-demo-large-table), where one random cell is updated every millisecond.

I am interested in to receive the feedback from the community.
Is The Playstation 5 Almost Here?!
Tags: sony
Published: 2019-08-20 00:51:01

Sony's PS5 will be revolutionary in the field of gaming. With it's release rumored to be in late 2020, fans are waiting in eager anticipation for another system that they can create fond memories with.

The PS5 will offer backwards compatibility, allowing players to relive the experiences of playing games on the PS4 in 8k resolution. In addition, the GPU will be clocked at an insane 2ghz! That is 9.2 TF on the RDNA architecture, and about 14 TF on the GCN architecture. That's double the power of the X1X. That's almost RTX2080 power! As of now, this achievement is unparalleled.

Imagine playing Spiderman PS4 and fast traveling through the city, but instead of waiting fifteen seconds to get to the other side of the map, imagine appearing their in less then a second! These specs have yet to be confirmed, but if they are true, the experience provided by the PS5 will be unlike that of any system before it. We'll just have to wait and see, until then fans will be waiting in eager anticipation.