teleren/devto huggingface dataset:
showing a category specified field after clicking radio button

Published: 2021-02-22 16:07:03

here I have written a code for multistep form with radio button. So here in a first step I have a category field where user enters a category and based on that category we are prompting the next field. So here while user enters a category after that radio button form will display. if radio button is checked also we need to prompt a form whatever category entered in first step. Simply if user enters category then next step is radio button form if we checked the radio button then next form should display based on the entered category in first step


```
 <div id="app">
  <form>
  <div v-if="step === 1">

    <h1>Step One</h1>
    <p>
    <legend for="name">Your Name:</legend>
    <input id="name" name="name" v-model="category">
    </p>

    <button @click.prevent="next()">Next</button>

  </div>



<div v-if="step === 2">
    {% if user_type == 'business' %}
        <template>
            <input type="radio" @change="handleClickInput"></br>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
        </template>
        {% else %}
          <template v-if="category == 'laptop'">
           <h1>template laptop</h1>
            <button @click.prevent="prev()">Previous</button>9
            <button @click.prevent="next()">Next</button>
          </template>

          <template v-else-if="category == 'IT'">
           <h1>template IT</h1>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>

          <template v-else-if="category == 'computer'">
           <h1>template computer</h1>
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>
    {% endif %}
</div>

  <div v-if="step === 3">
    <h1>Step Three</h1>

    <button @click.prevent="prev()">Previous</button>
    <button @click.prevent="submit()">Save</button>

  </div>
  </form>

  <br/><br/>Debug: {{registration}}
</div>
```

**vue.js**
```
const app = new Vue({
  el:'#app',
  data() {
    return {
      step:1,
        category:null,
        street:null,
        city:null,
        state:null,
        numtickets:0,
        shirtsize:'XL'
    }
  },
  methods:{
    prev() {
      this.step--;
    },
    next() {
      this.step++;
    },
    submit() {
      alert('Submit to blah and show blah and etc.');      
    }
  }
});
```
7 easy steps to implement Springboot logging in the application | Onurdesk
Published: 2021-02-22 16:05:12

Logging is one of the key features of any enterprise program, along with a few configuration details, we can get an understanding of the Spring Boot Logging mechanism in this article.

Understand the logging by 7 steps
Introduction of Springboot Logging
Understanding of Springboot Logs
How to configure Springboot logging in the controller?
Log File Output for Springboot logging application
The setting of log level for Springboot logging application
Configure Logback Through External File for Springboot logging application
Spring Boot Profiles in Springboot Logging application
Final Summary of Springboot logging application

For more details, please visit(https://onurdesk.com/7-easy-steps-to-implement-springboot-logging-in-app/)
map() Array Method
Tags: javascript, beginners, tutorial, arrays
Published: 2021-02-22 16:00:33

Lets take a look at JavaScript  `map()` method.

The map() method executes a callback function for each element of array. That callback function accepts between one and three arguments:

- Current Value (required) - The value of the current array element being processed in loop.
- Index (optional) - The current element's index number.
- Array (optional) - The array `map()` was called upon.

That sounds a lot like [forEach() method](https://dev.to/alitahashakir/foreach-array-method-1d71). But where forEach() method is allowed to mutate the original array and will always return `undefined`, map() method will always utilize the return values and actually returns a new Array of the same size.

Considering that we have the following array below:
```
const numbersArray = [1, 2, 3, 4, 5];
```
Let’s apply foreach() method on above array.

*Note: that you would never `return` from a `forEach()` method as the `return` values are simply discarded:*


    numbersArray.forEach((number, index) => {
        return numbersArray[index] = number * 2;
    });
    console.log(numbersArray);

result will be:


    numbersArray = [2, 4, 6, 8, 10]

Now here’s an example with map() method:


    const numbersTimesTwo = numbersArray.map(number => {
        return number * 2
    })
    console.log(numbersTimesTwo)

result will be:


    numbersTimesTwo = [2, 4, 6, 8, 10]


Let’s look at another example: say you received an array which contains multiple objects – each one representing a student. The thing you really need in the end, though, is an array containing only the id of each student.


    // What you have
    let students = [
      { id: 12, name: 'Chadwick Boseman' },
      { id: 18, name: 'Chris Hemsworth' },
      { id: 27, name: 'Chris Evans' },
      { id: 56, name: 'Scarlett Johansson' }
    ];
    
    // What you need
    [12, 18, 27, 56]

There are multiple ways to achieve this. You might want to do it by creating an empty array, then using `forEach()` method to push the id in an empty array


    let studentsIds = [];
    students.forEach(function(student) {
      studentsIds.push(student.id);
    });

OR we can make this simpler and use map() method


    let studentsIds = students.map(function(student) {
      return student.id
    });

Alternatively, you can use the ES6 arrow function representation for simplifying the code:


    const studentsIds = students.map(student => student.id);

If you enjoyed this post please share, and follow me on [DEV.to](https://dev.to/alitahashakir) or [Twitter](https://twitter.com/AliTahaShakir) if you would like to know as soon as I publish a post! 🔥
How to Build a Cloud-Connected AR/VR App in 15 Minutes or Less [WORKSHOP]
Tags: beginners, unity3d, showdev, augmentedreality
Published: 2021-02-22 16:00:30

**The latest recording of our AR/VR workshop is LIVE!**

Learn "How to Build a Cloud-Connected AR/VR App in 15 Minutes or Less" with Alon Grinshpoon, Founder & CEO @ [echoAR](https://www.echoar.xyz/).

<a href="http://www.youtube.com/watch?feature=player_embedded&v=VRqi3TBkolM
" target="_blank"><img src="http://img.youtube.com/vi/VRqi3TBkolM/0.jpg"</a>

**Workshop Description**: The workshop will show how to quickly create AR/VR apps with no technical skills or coding required and scale existing apps by connecting them to the cloud. Workshop participants will learn how to create real-time cloud-connected augmented and virtual reality (AR/VR) apps using the echoAR platform. Participants will also discover how AR/VR are changing the world through the demonstration of different use cases of 3D applications and live demos of AR/VR experiences. Participants are encouraged to bring a laptop and a smartphone


**Topic Areas**: Augmented Reality (AR), Virtual Reality (VR), Spatial Cloud Computing, Developer Tools

**Link**: https://youtu.be/VRqi3TBkolM


![Picture2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614009469943/j5FlcFRxy.png)

> **echoAR** (http://www.echoAR.xyz; Techstars '19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.


![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613595125215/iizen9ar5.png)
JavaScript Interview Question #18: What's the sum of two booleans in JavaScript?
Tags: beginners, codenewbie, javascript, webdev
Published: 2021-02-22 15:53:17

![js-test-18](https://learn.coderslang.com/js-test-18.png)

Can you add booleans in JS? Is something `false` here? What will be logged to the screen?	

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Just as in the [previous test](https://learn.coderslang.com/js-test-17/), we’re dealing here with `type conversion` and `loose equality` using the `==` operator.

When JavaScript evaluates the expression `true + true` it first converts booleans to numbers, which is `1` for `true` and `0` for `false`.

When we try to do calculate the value of `2 == true`, the typecast happens again and we arrive at the final condition `2 == 1`.

The result is obviously false, so we go into the `else` branch.

To understand how type conversion works with the `+` operator and different data types, you can read [this article](https://learn.coderslang.com/0002-basic-javascript-arithmetics/).

---

**ANSWER**: the string `everyone is different after all` will be logged to the console.

[Learn Full Stack JavaScript](https://js.coderslang.com/sign-in)
Who Cares?
Published: 2021-02-22 15:31:25

---
title: Who Cares?
published: true
description: People who complain often care the most
tags: 
cover_image: https://images.unsplash.com/photo-1597176116047-876a32798fcc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2767&q=80
---

# Who Cares?

Often those who complain a lot are the ones who care the most. They're, in a way, protesting something out of their control. The difference between needless complaints and legit protest is the effort put into exhausting all other options before the complaint arises. In other words, we've done everything we can and this needless injustice still exists, so it's time to let others know it's an issue so those who can change it will change it.

Next time someone is complaining about something at work, first ask, have we exhausted all options within our power? Then, is it worth fighting for? If yes to both, it might be a good idea to start complaining too.
Fading on click with CSS Transition
Tags: css, javascript
Published: 2021-02-22 15:42:09

I was getting my hands on this week Scrimba's weekly challenge [Dog Years Converter](https://scrimba.com/learn/weeklychallenge/the-weekly-web-dev-challenge-dog-years-converter-latest-challenge-co7514c16a160c165d54acd82), and I figured I'd make some text fade out and then in when I clicked a button. This button should calculate and make my application show how many dog years old is a human being.

So let's begin. This is my html container with a form, with a number input and a submit button in it:

```html
<div class="container">
    <h1 class="title">Dog Years Converter</h1>
    <form id="myForm" enctype="multipart/form-data">
        <input
            name="humanYears"
            type="number"
            id="humanYearsInput"
            min="0"
            max="150"
            step="1"
            placeholder="Human Years"
            required
        />
        <input type="submit" value="Convert me to dog years!" />
    </form>
    <h3 class="result" id="result"></h3>
</div>   
```
When I click the submit button, a text should a appear below the form, indicating how many dog years, months and days old are you:

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

What I wanted, is that the first time I set my human years and clicked the submit button, a fade in effect on the result text (`<h1>`) kicked in. And the second time I clicked the submit button the text would fade out and then fade in again with the new calculated dog age.

To get this effect going on, what I did was toggle a `.fade` class on the `<h1>` result element, wait 500ms for the transition to finish, set the new value, and toggle the `.fade` class again whenever a submit event was triggered:

```javascript
document.getElementById('myForm').addEventListener('submit', async (e) => {
  e.preventDefault()
  
  const formData = Array.from(new FormData(e.currentTarget))

  const numberConversion = Number(formData[0][1])/10.5
  
  const resultContainer = document.getElementById('result')
  
  resultContainer.classList.toggle('fade')

  await new Promise(r => setTimeout(r, 500))

  numberConversion > 0 ?
    resultContainer.innerText = `You're ${yearsToYearsMonthsDays(numberConversion)}!`
    :
    resultContainer.innerText = "You're not born yet!"
    
  resultContainer.classList.toggle('fade')
})
```

The fading transition is defined in the CSS as follows:

```css
.result {
    opacity: 1;
    transition: opacity 500ms ease-in-out;    
}

.result.fade {
    opacity: 0;    
}
```

Should you want to checkout the full code, it's available on [Scrimba](https://scrimba.com/scrim/cof4843f9baebf97b17e0c69a)!
Flask or ExpressJS for backend
Tags: javascript, flask, python, express
Published: 2021-02-22 15:30:00

Hey guys, I'm creating a chrome Extension that tracks my activity in a web page. The purpose is to outpot a specifications JSON file that I'll use later in my python project with Selenium.
I'm using ReactJS for frontend.
I'm not sure if should I use Flask or ExpressJS as a backend for this project. what would you guys choose think and why ? Knowing that I won't be using a database in my project.
Hack the Planet ($5k grand prize) contest ends Friday
Tags: meta, newrelic, hacktheplanet, challenge
Published: 2021-02-22 15:26:31

Details here:

{% link https://dev.to/devteam/announcing-the-new-relic-hack-the-planet-contest-on-dev-5d %}

The New Relic contest is a chance to get into observability and data visualization.
Day 23: Ducci sequence
Tags: 100daysofcode, python
Published: 2021-02-22 15:24:46

A Ducci sequence is a sequence of n-tuples of integers, sometimes known as "the Diffy game", because it is based on sequences.


```python
def ducci_sequence(*ns):
    while True:
        yield ns
        ns = tuple(abs(ns[i - 1] - ns[i]) for i in range(len(ns)))

def ducci(*ns):
    known = set()
    for ns in ducci_sequence(*ns):
        print(ns)
        if ns in known or set(ns) == {0}:
            break
        known.add(ns)
    return len(known) + 1
print(ducci(0, 345, 1788, 5078), "steps")
```
Aquariums, Money, Happiness, Javascript, Code challenges and a Squid
Tags: react, node, webdev, javascript
Published: 2021-02-22 15:19:12

Its Monday !! Time to hit the Publish button on my weekly blog.

This week its about Aquariums, Money, Happiness, Javascript, Code challenges and a Squid. Read Below.

https://gokhale.me/aquariums-money-happiness-javascript-code-challenges-and-a-squid
Better way to handle paths in python
Tags: python, codequality
Published: 2021-02-22 15:18:04

## What this is about?
You might have seen python code handling paths like this.

```py
folder_path = 'C:\\users\\dr\\Documents'
# in unix based machines like below
# folder_path = "/home" + "/" + "dr"
file_name = 'test.txt'
file_path = folder_path + '\\' + file_name

with open(file_path) as file_data:
	do_something_with(file_data)
```

of course, this will work. But, if we want our program to work in other OS such as Mac or Linux, then the code will fail, because Windows handles path differently compared to UNIX based Operating Systems.

So, another way is to use `join` method from `os.path` module like below.

```python
import os
file_path =  os.path.join("C:\\", "users", "dr", "Documents", "test.txt")
print(file_path) # C:\users\dr\Documents
```
But, a better way to handle paths would be

## Using `Path` from `pathlib`

first lets import `Path` from `pathlib`

```py
from pathlib import Path
```

Then we will initiate path like follows,  note we use `/` even in Windows OS instead of `\\`.

```py
folder_path = Path('C:/Users/dr/Documents')
```

Then to append path we simply have to use `/` like so

```py
file_path = folder_path / file_name
```

Even if we have a long paths it would be easier to write and read.
```py
long_file_path = root / folder_a / folder_b / filename
```
this will work properly in Windows, Mac & Linux, we don't have to worry about `\\` or `/`. 

Apart from this advantage, `Path` also provides lot of functions such as `is_file`, `is_dir`, `mkdir`, which we normally use from `os.path` module.

```py
# few methods
import Path from pathlib
path = Path("/home/dr")
path.exists() # returns True if folder exists else False
path.home() # "/home/dr"
path.is_dir() # True
path.is_file() # False
path.mkdir() # create folder
# and a lot more
```
How do you know you've written a "good" article?
Tags: discuss, meta, help, watercooler
Published: 2021-02-22 15:11:04

How do you know? Do you have a reviewer or editor? Do you measure by reactions or view counts? comments? Or maybe you "just know"...

I feel like the articles I cared least about writing have been my best performers (by orders of magnitude, in viewership, comments, and reactions); meanwhile some that I was truly interested in and excited about writing recently have had basically zero interaction.
Integrate Ninject into ASP.NET MVC 5 and Web API.
Tags: aspnet, mvc, webapi, dotnet
Published: 2021-02-22 15:10:28

In this post, I show you how to integrate Ninject into ASP.NET MVC and Web API.

Prior to the implementation, I explain to you what Ninject is. Ninject is a IoC framework for .NET platform to help you to integrate DI into .NET applications easily.

### Install Nuget Packages
- Ninject.Web.WebApi
- Ninject.MVC5

### Implement the integration
Integrating Ninject is simple:

- Global.asax must inherit NinjectHttpApplication
- Override the CreateKernel method.
- Inject required services.

```vb
Public Class Global_asax
    Inherits NinjectHttpApplication

    Protected Overrides Function CreateKernel() As IKernel
        Dim kernel = New StandardKernel()
        RegisterServices(kernel)
        Return kernel
    End Function

    Private Sub RegisterServices(ByVal kernel As IKernel)
        ' TODO: inject your services here...
        ' e.g. kernel.Bind(Of IUserAccountRepository)().To(Of UserAccountRepository).InRequestScope()
    End Sub

    Protected Overrides Sub OnApplicationStarted()
        MyBase.OnApplicationStarted()
        AreaRegistration.RegisterAllAreas()
        GlobalConfiguration.Configure(AddressOf WebApiConfig.Register)
        RouteConfig.RegisterRoutes(RouteTable.Routes)
    End Sub

End Class
```

ASP.NET MVC
```vb
Public Class HomeController
    Inherits Controller

    Private ReadOnly UserRepository As IUserAccountRepository

    Public Sub New(UserRepository As IUserAccountRepository)
        Me.UserRepository = UserRepository
    End Sub

End Class
```

ASP.NET Web API
```vb
Public Class UserApiController
    Inherits ApiController

    Private ReadOnly UserRepository As IUserAccountRepository

    Public Sub New(UserRepository As IUserAccountRepository)
        Me.UserRepository = UserRepository
    End Sub

End Class
```

Hope you enjoy this post

Happy coding :)
Day 56 OF 100DaysofCode: More Properties OF SQL
Tags: womenintech, 100daysofcode, codenewbie, beginners
Published: 2021-02-22 15:01:48

This is my 56th days of #100Daysofcode and #python. Today I learned more properties of SQL including BETWEEN, WHERE IN, SELECT COUNT(*), LIKE and NOT LIKE, Aggregate function, AVG(),SUM(),MAX(),MIN() etc from datacamp.
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 56 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/python?src=hash&amp;ref_src=twsrc%5Etfw">#python</a> <br>More Properties Of SQL<a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://t.co/0e8EZYmCDL">pic.twitter.com/0e8EZYmCDL</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1363864094474838018?ref_src=twsrc%5Etfw">February 22, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
The best practice method to install VirtualBox on Fedora 32/33 (and later)
Tags: howto, fedora, centos, linux
Published: 2021-02-23 10:10:36

---
title: The best practice method to install VirtualBox on Fedora 32/33 (and later)
published: true
date: 2021-02-22 14:55:00 UTC
tags: howto,fedora,centos,linux
cover_image: https://blog.kagesenshi.org/assets/images/best-practices.png
canonical_url: https://blog.kagesenshi.org/2021/02/install-virtualbox-fedora.html
---

In any linux distribution, there will be multiple methods to achieve a certain goal. You might have encountered many guides out there on how to install [VirtualBox](https://www.virtualbox.org/) on Fedora, however, please take note, many of them uses intrusive methods which can be difficult to maintain in long run, and would likely to break after a kernel update.

Everytime I caught a new team member following those guides, I tend to get annoyed, so I think I should write up the best practice method of doing this, which I have practiced on my Fedora installation for years now.

## Installing RPMFusion Repository

Packages governed in Fedora official repositories are subject to several legal and technical guideline. This mean, many software which are not 100% FOSS or not patent-encumbered would not be available in the official repositories because they would open the sponsors of Fedora to legal liability under the laws of United States.

Unfortunately, many free/open source software are patent incumbered, but while they might be illegal to distribute in the United States, they are perfectly legal to distribute in other countries.

Many of such packages are available in [RPMFusion Repositories](https://rpmfusion.org/). Unlike many 3rd party repositories out there, RPMFusion contains the highest quality packages as its contributor also consist of people who package official RPMS in Fedora, and I generally recommend any new users of Fedora to install RPMFusion, especially if they are not US residents.

To install and enable RPMFusion on Fedora, you can install the release package using following command which will install both the free and nonfree repositories:

```
sudo dnf install https://mirrors.rpmfusion.org/free/fedora/rpmfusion-free-release-$(rpm -E %fedora).noarch.rpm \
    https://mirrors.rpmfusion.org/nonfree/fedora/rpmfusion-nonfree-release-$(rpm -E %fedora).noarch.rpm

```

## Installing VirtualBox

Once you have RPMFusion installed, you can then install VirtualBox from it. VirtualBox in RPMFusion is very well maintained, would remain functional after kernel updates through an automatic kernel module builder (`akmods`), and generally carry the latest version of VirtualBox.

```
sudo dnf install VirtualBox
sudo akmods
sudo modprobe vboxdrv

```

And you are done and can now launch VirtualBox from the application menu. Please take note however, VirtualBox does not go well together with `libvirtd`. If you have`libvirtd` installed, it is suggested for you to disable it using:

```
sudo systemctl stop libvirtd
sudo systemctl disable libvirtd

```

Hope this guide will help you in installing VirtualBox in a less intrusive and more maintainable method.