teleren/devto huggingface dataset:
querySelectorAll
Tags: javascript, beginners
Published: 2020-05-06 16:12:31

---
title: querySelectorAll
published: true
description: selecting multiple elements
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/opulhny9slkdd3icq3mk.jpg
---
Sometimes we need to select more than one item. We may select items through the tag name, the class, or a specific attribute.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a54zahv4hc7ksywqnznc.png)

```javascript
        <div className="fruits" data-fruits="I love fruits">🍉</div>
        <div className="fruits" data-fruits="I love fruits">🍑</div>
        <div className="fruits" data-fruits="I love fruits">🥭</div>
        <div className="fruits" data-fruits="I love fruits">🍅</div>
        <div className="fruits" data-fruits="I love fruits">🍈</div>
        <div className="fruits" data-fruits="I love fruits">🍌</div>
        <div className="fruits" data-fruits="I love fruits">🥑</div>
        <div className="fruits" data-fruits="I love fruits">🍒</div>
```
querySelectorAll returns a nodelist that is an array-like, object—objects that looks like arrays. Array-like objects have length properties and have numbers as keys. In order to avoid problems, I suggest to always convert the nodelist in an array:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ykuzr89wx9r3o4fgbd6u.png)
Now we may perform all the actions that an array allows us, like forEach method.
There are other methods that allow us to grab more than one items. They are getElementByClassName and getElementByTagName. This two methods are more fast than querySelectorAll method , but that is not a valid reason to use them.
The most important difference between getElementById, getElementByTagName and querySelectorAll is that querySelectAll is a  static collection; this means that if you add or remove elements from the original selection your selection is not affected from this. On the other hand, with the other two methods the list is a live collection so if you change the original collection also your collection changes. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6oycb4sbxto951zo8bo9.png)
[More about querySelectorAll MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
[More about getElemntById MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
[More about getElementByClassName MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName)
Simple Keyboard Shortcuts: VS Code Edition
Tags: vscode, beginners, productivity, codenewbie
Published: 2020-05-06 16:00:19

So you've mastered the keyboard shortcuts on your Mac and are churning out code like a cyborg now, eh? Good for you. Let's up your game even more. Here are some VS Code specific shortcuts for Mac that I have found useful:

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

* Control-Backtick (`): Open your terminal/jump to command line.
* Command-W: Close current tab.
* Command-P: Quick open/search files by name.
* Command-O: Open file.
* Command-N: New window.
* Control-Tab (or Control-Shift-Tab): Toggle between files.
* Control-R: Search/open recent files.
* Command-Up/Down: Go to beginning/end of file.
* Fn-Left/Right: Go to beginning/end of line.
* Command-L: Select current line.
* Option-Up/Down: Move entire line up/down.
* Option-Z: Toggle word wrap.
* Option-Shift-F: Auto-format code.
* Command-Control-F: Toggle full screen.
* Option-click: Create multiple cursors.
* Command-K then Command-T: Select color themes.
* Command-K then Command-S: Open keyboard shortcut list.

Also, be sure to search the different color schemes and install one that you like. You're going to be spending a lot of time in VS Code, so get comfortable and enjoy yourself!
Get certified on ArangoDB today for free!
Tags: arangodb, database, certification, multimodeldatabase
Published: 2020-05-06 15:47:45

---
title: Get certified on ArangoDB today for free!
published: true
description: Getting certified on ArangoDB, a multi-model Database
tags: arangodb, database, certification, multi-model database
---

Hi Devs!

If you don't know ArangoDB, it is a Multi-Model database. That means that ArangoDB can work as a Key-Value Database, Graph Database or Document Oriented Database, claiming to be very good on each aspect.

Now you can get officially certified, so its a good time to learn more about ArangoDB and, if you like it, you can add it to your CV after completing the certification.

If you are interested in it, please feel free to [learn ArangoDB](https://www.arangodb.com/certification-exam/).
What's your coding level?
Tags: javascript, computerscience, java, cpp
Published: 2020-05-06 15:46:52

Today we released "Ranked" mode on Codr. Do your best to solve problems but with a nice twist: no coding required! It's mobile friendly and even if you don't know a thing about coding.

If you're a beginner or unfamiliar with JavaScript you can go into practice mode, or jump straight into ranked. Try to climb the leaderboards and get Genius status!

In the coming days people will be able to customize their profiles to showcase and promote their sites or projects.

URL: https://nevolin.be/codr/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y5isuulzb729x4bgbfy6.png)
How to Record Videos in VueJS with Ionic Framework, Capacitor and Cordova Plugins
Tags: vue, javascript, tutorial, ionic
Published: 2020-05-06 15:46:43

> VueJS Support Is Still Beta in Ionic

This video is a quick step by step on how to integrate the [video-capture-plus plugin](https://ionicframework.com/docs/native/video-capture-plus) into a [Ionic Framework](https://ionicframework.com/docs) VueJS mobile application and deploy it to an ios device using [Ionic Capacitor](https://capacitor.ionicframework.com/) 

Often see Ionic Framework developers getting confused about how to use the cordova plugins and [Ionic Native](https://ionicframework.com/docs/native) plugins in Reactjs or Vuejs, which is still in beta, but there is not much to it.

Below is a quick step by step on how to integrate the video-capture-plus plugin into a reactjs application and deploy it to an ios device using Ionic Capacitor

{% youtube cxCFCfGjUIM %}

###VueJS Video Playlist
https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz
What platform (website) should I use to show my amazing project(s)
Tags: developers, jobseekers, promoteyourself
Published: 2020-05-06 15:46:03

---
title: What platform (website) should I use to show my amazing project(s)
published: true
description: find what platform(s) developers use for promoting themselves
tags: developers, jobseekers, promote_yourself
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/o90lvlw1ek6m06tff6fb.jpg
---
I'd like to find if there is a platform or website somewhere, for frontend and even backend developers where they can show what they've created/built at work or during their free time. 

Many developers are not known very well, because they can be just out of a college, just out of dev bootcamp or they have lost their jobs. They haven't had enough time to build their personal brand and be widely seen on social media or outside of their personal network. But they can still be amazing as developers/engineers. how would you recommend for them to be seen? Where they should go to promote themselves?  

Please share this article and left a comment below to help others to be seen :raised_hand:.
How To Use Requests With Tor
Tags: python, todayilearned, security, privacy
Published: 2020-05-06 15:43:40

[**What's Tor?**](https://en.wikipedia.org/wiki/Tor_(anonymity_network)) Software that helps you browse the internet anonymously (almost). <br>
[**What's stem?**](https://stem.torproject.org/index.html) Python library to interact with Tor.

<hr>

In this tutorial we’re going to learn how to use the famous requests library to get resources from internet via Tor network. That means, we’ll be using tor as a proxy between us and the internet.

https://sigmapie8.github.io/learning-stem/requests_with_tor.html

<hr>

Tell me if you liked it :)
Help with Image Click Through (Like a Carousel) using React Hooks
Tags: react, hooks, carousel, useEffect
Published: 2020-05-06 15:38:19

I have a component that is similar to a carousel, only I'm just clicking through using React Hooks. I have a full-width image with a left and a right click arrow. (I only have the right arrow click for now. Also not worrying about conditionals just yet.)

1. I am setting the images in the useState
2. Setting the default image to be the 0 index of the state values.
```
let indexValue = 0; // Initial slide index value
    let currentSlide = slides[indexValue];
```
Image, alt, and title display properly, cool.
3. Created a right arrow click function that's supposed to update the image.
```
    const arrowRightClick = () => {
        currentSlide = slides[indexValue + 1];
        console.log(currentSlide);
    }
```
When I click on the right arrow, the console log does indeed display the next image, img2.jpg, however, the image itself never updates. 

??? What am I doing wrong?

I feel like I have to do useEffect somewhere.
I've tried this(doesn't work):
```
useEffect(() => {
        function changeSliderImage(currentSlide) {
            setSlides(currentSlide.setSlides);
        }
        return () => {
        <img src={currentSlide.source} alt={currentSlide.title} title={currentSlide.title} className="slider-img" />
    }
    }, [])
```
I feel like it's close to something like the previous code, but I'm not sure.


Full code below:
```
import React, { useState, useEffect } from 'react';

function Carousel() {

    const [slides, setSlides] = useState([
        {
            source: "../images/img1.jpg",
            title: "Half Moon Pier"
        },
        {
            source: "../images/img2.jpg",
            title: "Port Washington Rocks"
        },
        {
            source: "../images/img3.jpg",
            title: "Abandoned Rail"
        }
    ]);

    let indexValue = 0; // Initial slide index value
    let currentSlide = slides[indexValue]; // variable index value we can reference later

    // Index value moves up, but doesn't update the image. Why???
    const arrowRightClick = () => {
        currentSlide = slides[indexValue + 1];
        console.log(currentSlide);
    }

    return (
        <div className="carousel-block">
            <div className="flex-container">
                <div id="slider">
                    <div className="slide">
                        <img src={currentSlide.source} alt={currentSlide.title} title={currentSlide.title} className="slider-img" />
                        <div className="arrows">
                            <div id="arrow-left"><i className="fas fa-arrow-alt-circle-left"></i></div>
                            <div id="arrow-right" onClick={arrowRightClick}><i className="fas fa-arrow-alt-circle-right"></i></div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    )
}

export default Carousel;
```

Any help would be appreciated
What do you dislike about your favorite language?
Tags: discuss
Published: 2020-05-06 15:34:55

---
title: What do you dislike about your favorite language?
published: true
description: 
tags: discuss
---
DEV is in the process of launching a podcast and we'd love for you to be involved! We're recording the episodes in advance, and this week we'd like to know:

What do you dislike about your favorite language?

If you'd like to participate, please:

- Call our Google Voice at at +1 (929)500-1513 and leave a message 📞
- Send a voice memo to pod@dev.to 🎙
- OR, if you don't want your voice recorded...just leave a comment here and we'll read your response aloud for you 🗣

![cartoon-bitter-taste-reaction](https://media.giphy.com/media/cheJFyHLOAfEQ/giphy.gif)

Thank you!
How to Setup React Router v5 using React Hooks
Tags: React, reactrouter, javascript, webdev
Published: 2020-05-06 15:17:32

React Router library makes the navigation experience of the client in your web page application more joyful, but how?!

React Router, indeed, prevent the page from being refreshed. Thus the blank page resulted from a refreshed page is not displayed while the user is navigating and routing through your web. This tool enables you to manipulate your web application routes through provided routing components and dynamic routing while the app is rendering.

How to start:
You need a React web app, to get started. If you don't have, install create-react-app and launch a new project using it. Then you need to install react-router-dom, applying either npm or yarn.

```javascript
npm install --save react-router-dom
yarn add react-router-dom
```
Now all the required components are installed. We are enabled to add any component to the App.js inside the router to build our unique web page. All these elements are the router children to which we specify their path. For instance, I add the components of Homepage, About, and Products inside the router where one can navigate through them. Also, React Router allows us to redirect our clients by a simple click on a button. To this purpose, import the Link to your component, define an onclick function for the button and redirect it to your intended path.

These are not all. There are other features in React Router. If you want to know how to install and benefit from it, join me in this YouTube video to decode the solution. I create the above-mentioned app and its components and explain all the features that we can use to improve it:

{% youtube 4sRGfyUNV48 %}
The Security Challenge Associated with AI Chatbots
Tags: ai, chatbots, security
Published: 2020-05-06 15:10:43

AI chatbots are very popular these days. One reason is that people have become quite familiar with messaging and voice assistant platforms, both of which use some form of AI. Having a conversational AI on your site is beneficial for your business. Also, They can secure their conversation through chatbot-the <a href="https://www.flyundervpn.com/is-vpn-safe/">VPN system</a> integration. 

However, AI chatbots are still machines, and they have potential vulnerabilities. True, the algorithms used in AI chatbots are much more complex than your <a href="https://www.supermonitoring.com/blog/find-best-alternatives-web-apps/">average alternative apps</a>, so security breaches are less likely. But, it is still a possibility and during <a href="https://www.reviewcroc.com/app-reviews-aso/">app review</a>, these security concerns should be rectified if there any issue found.

You can minimize your risk if you choose from the best <a href="https://shanebarker.com/blog/best-conversational-ai-platforms/"> conversational AI</a> platforms currently available. It is most likely that they all have user ID authentication, but that is not always enough. 

Even the authorized users are not always careful about protecting the privacy and data of their customers.

Therefore, you need to check if the AI chatbots platform that you plan to use has the following security measures:

-End-to-end encryption
-Two-factor authentication
-Critical data blocking
-Channel restriction
-Time-based restriction
-Biometric verification

Meeting the security challenges associated with AI chatbots is crucial. 

Find out more about other challenges that you need to address with AI chatbots in this infographic. 

To know the best AI chatbots that you can use, check out blog <a href="https://shanebarker.com/blog/best-ai-chatbot/"> Shanebarker.com</a>.
<div style="text-align:center"><img alt="AI Chatbots Challenges and Opportunities You Need to Understand" src="https://shanebarker.com/wp-content/uploads/2019/08/AI-Chatbots-Challenges-and-Opportunities-You-Need-to-Understand-min.jpg" style="max-width: 100%;"/><div style="margin-bottom:5px;margin-top:5px">Image Courtesy: <a target="_blank" href="https://shanebarker.com/blog/challenges-and-benefits-of-ai-chatbots/ ">Shanebarker.com</a></div></div>
OneDev 3.1: super easy and high performance GitLab alternative
Tags: java, docker, git, devops
Published: 2020-05-06 14:49:00

Written completely in Java, high performance and easy to install. Featuring code intelligence, customizable issue workflow, visual editor for ci job definition, code discussion and comprehension, fine-grained permission control, etc. For details, please check: 

https://github.com/theonedev/onedev

Version 3.1 sees git over SSH and yaml based ci spec.
Lecture 1 - CSS Cardio Project Introduction + Complete Tutorials
Tags: css, html, codepen, webdev
Published: 2020-05-06 14:45:31

Channel Link: [LearnModernWebDevelopment](https://www.youtube.com/channel/UCMuGiELIVlWYROUw6s4g8rA) 


CSS Cardio Complete Tutorials: [CSS CARDIO](https://www.youtube.com/watch?v=JdajB5Wpi5k&list=PLcHee_83k35Zj_9-bTpc-7DOdHSSgmcnn) 


Content you can expect in future (Project based tutorials):
* HTML5/CSS3/JAVASCRIPT
* MERN Stack (MongoDB Express React Node)
* Nginx & Apache (Web Servers)
* Docker
* Digital Ocean Droplets (Linux Ubuntu)
* API Development with best practices
* Microservices
* GatsbyJS
* And much more...
Exiting/Terminating Python Scripts (Simple Examples)
Tags: python, beginners, tutorial
Published: 2020-05-06 14:38:32

---
title: Exiting/Terminating Python Scripts (Simple Examples)
published: true
description: 
tags: #python #beginners #tutorial
---

1 Why does Python automatically exit a script when it’s done?
2 Detect script exit
3 Graceful exit
4 Exit with error messages
5 Exiting without error
6 Exit and release your resources
7 Exit after a time
8 Exiting using a return statement
9 Exit in the middle of a function
10 Exit when conditions are met
11 Exit on keypress
12 Exit a multithreaded program
13 End without sys exit
14 Exit upon exception
15 Exit and restart

https://likegeeks.com/terminating-python-scripts/

Hope you like it.
May 6 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-05-06 14:37:36

---
title: May 6 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Fiber web and Go
Tags: go
Published: 2020-05-06 14:05:40


<a href="https://gofiber.io/">Fiber</a> is an Express inspired web framework written in <a href="https://golang.org/">Go</a>. You need Go 1.11 or higher to work with Fiber.

You should <a href="https://golangr.com/">learn Go</a> before playing with Fiber, because the way things work in Go are a bit different than Python or PHP.

It supports routing, static files and a lot of middle ware. Here is a list of features:

* Robust routing
* Serve static files
* Extreme performance
* Low memory footprint
* API endpoints
* Middleware & Next support
* Rapid server-side programming
* Template engines
* WebSocket support
* Rate Limiter

You can install it with the `go get` command:

    go get -u github.com/gofiber/fiber

Then this would be a simple hello world program:

```go
    package main

    import "github.com/gofiber/fiber"

    func main() {
       app := fiber.New()
    
       app.Get("/", func(c *fiber.Ctx) {
         c.Send("Hello, World!")
       })
   
       app.Listen(3000)
     }
```

If you then open your localhost:3000 in the web browser and open the url, it will show:

    Hello, World!

Fiber is built on top of Fasthttp, the fastest HTTP engine for Go. It's designed to ease things up for fast development: zero memory allocation.

**Related links:**
* <a href="https://golangr.com/">Learn Go</a>
* <a href="https://gofiber.io/">Fiber framework</a>
Accessible collapsible mobile navigation?
Tags: help
Published: 2020-05-06 13:48:54

Hello!

Upon searching the internet I realized that I couldn't find a decent explanation/example of an accessible collapsible menu with the classic "Hamburger" button.

[Bootstrap](https://themes.getbootstrap.com/) example is pretty close to what I'm looking for. The hamburger button has `aria` attributes but 
I feel like it's missing the accessibility features on the actual navigation when it gets toggled.

Having said that, am I overcomplicating things or can someone point me to a resource/example of accessible navigation.

Thanks.
Windows Docker Image for LoadRunner Developer
Tags: docker, loadrunner, testing, performance
Published: 2020-05-06 13:36:02

{% github QAInsights/windows-docker-devweb no-readme %}

# Windows Docker Image for LoadRunner Developer
This docker image helps you to run LoadRunner Developer scripts in Windows container. LoadRunner Developer leverages DevWeb protocol, a brand new offering from Micro Focus.

## Prerequisites

Following are the prerequisites required to work in LoadRunner Developer:

* LoadRunner Developer package (latest stable version)
* Working knowledge on DevWeb protocol. Check out my [Udemy course](https://www.udemy.com/course/performance-testing-using-truweb/) to learn about DevWeb procotol.

## How to download LoadRunner Developer?

LoadRunner Developer is free to use for up to 50 virtual users. You need to create an account at Micro Focus Marketplace.
* Download LoadRunner Windows package from [marketplace](https://marketplace.microfocus.com/appdelivery/content/loadrunner-developer).


## How to build this image?

I suggest you to build this image before you start using it. Follow the below steps to build this image.

* Clone this repository
* Place the DevWeb zip file inside your folder
* Run the build command

`docker build -t <name> .`

e.g. `docker build -t devweb .`

This image uses Windows Server core as base image. It will download Visual C++ Redistributable for Visual Studio 2015 and install it inside your container. This component is prerequisite for LoadRunner Developer.

## How to run the container?

Once the build is successful, you can run the script from the `examples` folder using the below command.

`docker run devweb -mode=single .\examples\EmptyScript`

Important Notes:
* No need to append DevWeb.exe in the command
* Default working directory is `C:\DevWeb_2020.1\DevWeb`

{% github QAInsights/windows-docker-devweb no-readme %}

## How to mount the volume to the container?

You can mount your host to the container using the below command.

`docker run --isolation=hyperv -v C:\Scripts\AdvantageOnlineShopping:C:\Scripts\AdvantageOnlineShopping devweb --mode=load C:\Scripts\AdvantageOnlineShopping`

## How to view the results?

Using the mount volume command, after the execution is completed, you can view the results inside the script folder e.g. `C:\Scripts\AdvantageOnlineShopping\results`.

## Why building the image is required?

DevWeb package file is not publicly downloadable. You need to login and download it. This repo doesn't contain the DevWeb package, as it is against Micro Focus terms to host the DevWeb contents in the public repo. It is must for you to download the DevWeb zip file and place it in your local repo.

## Learn more
Visit my [blog](https://qainsights.com/what-is-loadrunner-developer/) to learn more about LoadRunner Developer, DevWeb and more.
Welcome Thread - v72
Tags: welcome
Published: 2020-05-06 13:29:35

---
title: Welcome Thread - v72
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![buscemi hello](https://media.giphy.com/media/remMvcYDTQNKE/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**