teleren/devto huggingface dataset:
Simple Calculator Just Using Properties in Vue JS [Beginners]
Tags: vuejs, beginners, programming, tutorial
Published: 2022-04-04 12:45:57

---
canonical_url: https://softauthor.com/vuejs-simple-calculator-using-computed-property/
---

This article demonstrates how easy it is to create a simple calculator in Vue JS just using in the combination of regular and computed properties without using any events similar to the animation below.

![alt text](https://softauthor.com/wp-content/uploads/2020/09/Create-A-Simple-Calculator-in-Vue.gif)

In the vue template, declare four HTML elements.

- <input> for number 1
- <select> with four operands ( +, -, * , /) as options
- <input> for number 2
- <h2> for the result.

```HTML
<template>
<section>
  <input placeholder="num1" type="number">
  <select > 
    <option value="+"> + </option>
    <option value="-"> - </option>
    <option value="*"> * </option>
    <option value="/"> / </option>
  </select>
  <input placeholder="num2" type="number" >
  <h2></h2>
  </section>
<template>
```

Then declare four properties inside this component, three inside the data() model and one will be a computed property.

```JavaScript
<script>
    export default {
      data() {
        return {
          num1: 0,
          num2: 0,
          operand:""
        };
      },
    }
</script>
```

Then bind these three properties to the input fields using a v-model directive with the number modifier except the operand property.

The number modifier will cast the value of num1 and num2 properties to a number so that we do not have to convert it outside of the template.

```HTML
<input placeholder="num1" type="number" v-model.number="num1">
<select v-model="operand" > 
  <option value="+"> + </option>
  <option value="-"> - </option>
  <option value="*"> * </option>
  <option value="/"> / </option>
</select>
<input placeholder="num2" type="number" v-model.number="num2">
```

There are multiple ways to implement the calculation, but the simplest way is to use a computed property.

Computed property is a great way to create new data from the existing properties declared in the data() model.

It also can be reactive and recompute any operation inside the computed property when any of the properties used inside have changed.

```JavaScript
computed: {
  result() {
    switch(this.operand) {
      case "+":
        return this.num1 + this.num2
      case "-":
        return this.num1 - this.num2
      case "*":
        return this.num1 * this.num2
      case "/":
        return this.num1 / this.num2
    }
  }
}
```

Every time there will be data changed in the num1, num2 or operand properties, the result computed property will recalculate the num1 and num2 based on the operand and return an appropriate result.

Then we can use the result in the template.

```HTML
<h2> {{result}} </h2>

```

![alt text](https://softauthor.com/wp-content/uploads/2020/09/Create-A-Simple-Calculator-in-Vue.gif)
Fleet vs VSCode
Tags: fleet, vscode
Published: 2022-04-04 12:28:59

## Table of Contents
1. [What is Fleet](#what-is-fleet)
2. [When will it be available?](#when-will-it-be-available)
3. [Would you ever switch?](#would-you-leave-vscode)

### What is Fleet?
[Fleet](https://www.jetbrains.com/fleet/) is a brand new IDE which supports multiple programming languages and has built-in remote collaboration tools. There is currently a debate whether it will replace VS Code. What do you think? It's marketing itself as a direct competitor to VS Code as a high-performance IDE with quick load times, responsive performance, and a light-weight text editor. It's said to be the "next-generation IDE", the same way VS Code is the lighter alternative to Visual Studio.

![Fleet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9hj5qsu8z19tv6v26j2.png) 

Fleet currently [supports languages](https://devdojo.com/howtoubuntu/a-new-ide-that-could-overtake-vs-code) such as JavaScript, TypeScript, PHP, C++, C#, Ruby, Java, Python, Rust, Go, JSON, Kotlin, and others. Similar to VS Code, it includes auto-suggestions, auto-completion and intellisense. Fleet also features remote development using [JetBrains Space](https://www.jetbrains.com/space/). The desktop version will be available for macOS, Windows, and Linux.

### When Will It Be Available?
At the moment, Fleet is still under active development. You are able to subscribe to receive announcements on when it becomes available on [their website](https://www.jetbrains.com/fleet/#distributive). 

### Would You Leave VSCode?
I'd love to hear from you. Assuming you've used VS Code for a good amount of time now, would you ever consider switching to a new IDE? Does it sound worth looking into or are you good where you are since VS Code has been around for so long and has always been a stable IDE? Let me know in the comments below

Happy coding!
How to setup git on linux and windows
Published: 2022-04-04 12:24:00

# This is a guide towards setting up your git environment

![Git](https://git-scm.com/images/logo@2x.png)
### TLDR,
Assumptions for `git` theories

# Where can you get `git`?

Depending on your `os` we'll handle them differently 
# Windows

To install git on windows head over to
[Git source link](https://git-scm.com/)

Download the given executable file for windows
Once downloaded, <br/>
double click on the `.exe` file and accept the licence agreements <br/>
For the rest of choices click `next` and leave every other setting as default <br/>
Once installed head over to your windows applications list <br/>
Search for `git bash`

> ## Confirm if its installed properly
> Open your `cmd` and type ` Users\uname> git --version` <br/>
> If there's no version you may reconsider re-installing the app again


Next we need to setup the git config
`Git` is now installed and we can now setup the configurations from any terminal eg

- `cmd`
- `powershell`
- `git bash`
- `cmder`


So open your terminal and type the following

```sh
$ git config --global user.name <username> # eg git config --global user.name "Jane Doe"
$ git config --global user.email <email-address> # eg git config --global user.email "janeDoe@gmail.com"
$ git config --global core.editor "code --wait"
$ git config --global core.autocrlf true

```
# Linux 

I'm using debian distros i.e 
- `kali linux`
- `Ubuntu`
- `zorin`
- `Parrot`

The git package is already available for you in the terminal
To confirm run `$ git --version`
If it does't exist run
```sh
$ sudo apt-get install git
```
The command should install `git` to your system
Next we configure git

```sh
$ git config --global user.name <username> # eg git config --global user.name "Jane Doe"
$ git config --global user.email <email-address> # eg git config --global user.email "janeDoe@gmail.com"
$ git config --global core.editor "code --wait"
$ git config --global core.autocrlf input

```
# ⚠️ Be careful 
Make sure to consider the differences in the values of `core.autocrlf` for `Windows` and `Linux` difference

Now we have setup git and configured it to the system
To check your settings run
```sh
$ git config --list
```
## Well done
![Success](https://media3.giphy.com/media/opmIBtljGbwZi/giphy.gif?cid=ecf05e47ig17qz4fqkd1w6z6shbfk3wjc4fk6lgpe4o4ucv6&rid=giphy.gif&ct=g)

We've successfully setup git in our system
Behold, the first post! Why this?
Tags: career, azure, aws, devops
Published: 2022-04-04 12:05:25

I am currently focused on building up my portfolio site.  I am working with AWS and Azure at this time, seeking to obtain more certifications in both.  This post is an explanation of what I am doing with the portfolio site, and will be used to explain my work with the Cloud Resume Challenge, using both AWS.  The portfolio site can be found at: [RemoteRevolutionsPortfolio.com](https://RemoteRevolutionsPortfolio.com)
OneDev 7 - self-hosted git service with CI/CD and Kanban
Tags: devops, git
Published: 2022-04-04 12:02:31

The self-hosted open source git service [OneDev](https://github.com/theonedev/onedev) reaches 7.0. Some feature highlights:

## Show job dependencies as pipeline

Visualize job dependencies as pipeline to get instant understanding of job relationships and their execution statuses.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fg9fuwwm1jn4vnkm3rf7.gif)

## Two-factor authentication

TOTP based two-factor authentication can be enabled by user. Site administrator can also enforce 2FA for all users or certain groups

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o59eygu6pcps7kt8rqnp.png)

## Commit/Tag GPG signature verification and generation

Commits and tags with GPG signature can be verified. Branch/tag protection rule can be set up to enforce signed commits/tags. OneDev can use its own signing key to sign commits/tags generated by itself (pull request merge commits etc). GPG public key of other git hosting services can be imported so that their signed commits/tags can be trusted

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xc08zujp0d0peudtdr58.png)

## Able to cache cloned repository to improve CI/CD speed

Repository can now be cloned into a sub directory under job workspace, and can be cached to improve speed. For instance a fresh clone of Linux repository takes 5 minutes, while updating a cached one takes 5 seconds

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryiwuepnc6k7e05gtbtl.png)

## Other improvements

For a complete list of changes, please check the [release notes](https://code.onedev.io/projects/160/builds/2475/fixed-issues?query=%22State%22+is+%22Released%22+order+by+%22Type%22+asc+and+%22Priority%22+desc)
Contributing to a Go open source repository
Tags: go, tutorial, opensource
Published: 2022-04-04 11:56:46

In this post we are going to list the first steps to contribute to a Go lang open source project.

In this example, we'll simulate a contribution to [Bubbletea](https://github.com/charmbracelet/bubbletea) repository.

1) Fork the project

The first step is to fork the project you want to contribute. Search the project on GitHub and click on `Fork`: you'll get your own version of the repository `<your_name>/bubbletea`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwz9uecb7ow6b0e1d12m.png)

2) Clone the fork project into your computer

Clone the forked version of bubbletea into your computer. For the sake of this example, let's say you've cloned the repository at `/home/forked_bubbletea` on your computer.

3) Use your local forked repository

We'll create a new folder at `/home/test_bubble`. Create a file `main.go` with a simple example:
```go
package main

import (
	"fmt"
	"os"
	tea "github.com/charmbracelet/bubbletea"
)

.
.
.

func main() {
	p := tea.NewProgram(initialModel())
	if err := p.Start(); err != nil {
		fmt.Printf("Alas, there's been an error: %v", err)
		os.Exit(1)
	}
}
```
Create a `go.mod` file by doing:
```sh
go mod init test_bubble
```

Then, we need to replace the library we want to contribute by our own version of the library. For this, we need to append this line at the end of the `go.mod` file:
```go
...
replace github.com/charmbracelet/bubbletea v0.20.0 => /home/forked_bubbletea
```

By doing this, when we call in `main.go` the library `bubbletea`, we are going to call our local version of the library. Therefore, we can change our local version of the library and instantly see the effects in our code.

4) Raise a pull request

Finally, after we changed and committed our local version of the repository, all we need to do is raise a pull request to the repository we want to contribute. For this, go to the repository you want to contribute and click `Compare & pull request`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbctfm1zm4b5umtkti8b.png)
Angular production build error for safari-15.2-15.3
Published: 2022-04-04 11:22:40

building angular production causing "error: Invalid version: **"15.2-15.3"**, this error is mainly coming from new safari browser in-compatibility. If the error comes, we can check first what are the browsers added in to our browsers list, this is the list controls angular application supported. 

check the supported list.
`npx browserslist`

and_chr 99
and_ff 96
and_qq 10.4
and_uc 12.12
android 99
baidu 7.12
chrome 99
chrome 98
chrome 97
chrome 96
edge 99
edge 98
edge 97
firefox 98
firefox 97
firefox 96
firefox 91
ie 11
ios_saf 15.4
ios_saf 15.2-15.3
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
kaios 2.5
op_mini all
op_mob 64
opera 83
opera 82
safari 15.4
**safari 15.2-15.3**
safari 14.1
samsung 16.0
samsung 15.0

the highlighted line is causing issue, we can either remove or adding the following file in to your project would solve the problem. 

Add **.browserslistrc** in to your project directory, and the following content. 

`
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3`

it will now work.
Android - Multiple Draggable objects in Jetpack Compose
Tags: android, jetpackcompose, programming, javascript
Published: 2022-04-04 11:41:56

{% embed https://youtu.be/17WypJzuX7k %}

Source code available at :[https://gitlab.com/cp-hardik-p/multipledraggableobjects](https://gitlab.com/cp-hardik-p/multipledraggableobjects)
Use Vocal Commands to Apply Markdown to Your Article!
Tags: hackwithdg, productivity, writing, tooling
Published: 2022-04-04 11:34:05

## Hello everyone 👋

This is a second release for a [project I previously submitted](https://dev.to/moose_said/write-articles-with-ai-speech-recognition-and-live-preview-508k). But if you're not going to check out the first submission then you should just know that **Wordleit Editor** is a free in-browser markdown text editor that gives you a seamless experience as both a reader and a writer. And also it's supported with Deepgram AI Speech Recognition service.

![Wordleit Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejr7d77zv0jhg3epbfxv.png)

### What's new?

1- Fixed "Stop Recording" button to make it close Deepgram connection and stop listening to the mic.
2- Some improvements for the UI.
3- Markdown improvements.
4- **<u>MAGIC KEYS!!</u>**

### "Magic Keys" 🎩?

Magic keys are keywords you can use while recording in order to apply a specific markdown action. I tried to include as many as I could and make things as smooth as possible at the same time.

![magic keys gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gz7pfvt54azbv8og0u9g.gif)

This is all VueJS and Deepgram magic 🚀

### Show me 👀!

This is a quick video I recorded to demonstrate the new feature and show you how it can be used.

{% youtube HDuDvC0zvBA %}

### Try it out yourself:

https://wordleit.herokuapp.com

### Link to Code on GitHub:

{% github https://github.com/MooseSaeed/wordleup %}

### Possible improvements:
There is still a big room of improvement to the UI and to the code but there is something that I would like to add in the next update which is a new feature to check your article positive vibes after finishing. Mainly track positive and negative keywords and then gives you a score.

Thank you for checking this out and please let me know if you think it's cool 🤘
Power BI Advantages
Tags: powerbi
Published: 2022-04-04 09:54:45

Here are some advantages of Power BI, as shown below:

**1.Secure Report Publishing:**

You can automate arrangement information revive and distribute reports that permitting every one of the clients to benefit the most recent data.

**2.No Memory and Speed Constraints:**

To Shift a current BI framework into a strong cloud climate with Power BI implanted kills memory. Speed requirements guarantee that information is rapidly retrievable and investigated.

**3.No Specialized Technical Support required:**

The Power BI gives fast request and examination without the requirement for specific specialized help. It additionally upholds a strong regular language interface and the utilization of instinctive graphical fashioner apparatuses.

**4.Simple to Use:**

Power BI is simple to use. Users can easily find it only on behalf of a short learning curve.

**5.Constant innovation:**

The Power BI product is updated in every month with new functions and features.

**6.Rich, personalized dashboard:**

The delegated component of Power BI is the data dashboards that can be redone to meet the specific need of any venture. You can without much of a stretch insert the dashboards, and BI reports in the applications to give a brought together client experience.
Learn more about Salesforce CPQ refer below link:
https://writeupcafe.com/salesforce-cpq-how-does-it-work/
Episode #5: Mental Health and the Job Search with Angel (@AlioFonzy43)
Tags: career, mentalhealth, webdev, jobs
Published: 2022-04-04 11:25:05

_An excerpt from [RenderATL](https://www.renderatl.com/)'s Culture & Code podcast Episode #5: Mental Health and the Job Search with Angel ([@Aliofonzy43](https://twitter.com/Aliofonzy43)):_

**Ashley:**
So going into you mentioned obviously, you went through that horrific interview experience that was obviously 10 times longer than it should've been, so with that, what are some things that you feel like you're looking out for now or tactics that you try to apply while interacting with companies to prevent that exploitation from happening again?

**Angel:**
That's a good question. I have to think about that for a moment. The way I've been approaching the things is **I have a checklist, questions I ask the company because the thing that I like is how there's a two-way conversation, where as they ask you questions, you ask them questions.**

And usually I ask them, **"Do they have a culture of blameless analysis? What is the structure? Is their documentation? How is the onboarding process like? Do they have support for not only entry level, but do they have support for their mid level and senior levels?"** And there's just a lot of things that as I'm in an interview and as I'm talking to companies, I wait to find the right certain words that they say or find the right keywords that I'm looking for, like the green flags, and they're not generic words.

I don't like to usually say the words I look for out loud, so it's not too known, but there's certain things they ask and word it in a certain way that based on how they answer, I will know, do I find myself a good fit for the company or not? And it's something that I've been finding each time I've been going to each interview, but every time that I've done it, I've usually got hit right on the nail on, yeah, this company may be a good fit, or this company may not be a good fit, or this one is just... It's absolutely perfect, but they just showed a huge, critical flaw that may make it hard for me to work with if I was onboarded.

_This was an excerpt from [Culture & Code](https://www.renderatl.com/culture-and-code), a podcast brought to you by [RenderATL](https://www.renderatl.com/) that is focused on leveling up your tech career and exploring new technologies._ 

_You can listen to the full episode and read the complete transcript on our website [here](https://www.renderatl.com/culture-and-code/episode-5)._
Day 01: Another Day 1.
Tags: codenewbie, writing
Published: 2022-04-04 11:11:07

Our lives are filled with plenty of familiar day ones, aren't they? On one hand, they remind us of our many failed attempts. The harsh truth that we lack the resolve and skill to follow through on our goals successfully. On another hand, it is a testimony of our resilience and hopefulness. Around ten years ago as the mobile platform rose in prominence, I found myself ogling at the evolution of typography and layout on mobile web. I followed along in the backseat as others had exciting discussions and shared and developed ideas that consequently shaped the standards that we have today. The problem; my voyeuristic viewings with nary a documented practice left no evidence of my passion for it.

Now in my thirties, I often times feel resigned - that it is too late to pursue a career in Interaction Design. Especially since I have neither working experience nor credentials. It has always been an intense tug of war between my anxiety, resentment and despair and my stubbornness and hopefulness. But here I am, unready to give in to the defeatist's voice in my head. Here, I am, willing to try yet again. 

I'm still unsure how to go about documenting the journey. Beyond publishing a showcase portfolio, what exactly would I be doing here? Honestly, I'm not too sure yet but I am enjoying myself as I write this post. I'm not sure of how engaging the community is here either. I found myself here because the domain name, the logo and the aesthetic experience of the site appealed to me. I'm unapologetically shallow like that.

This might sound incredibly trivial and mundane, but my goal for day one is simply to spend sometime to write this out. And considering that I've posted this, I suppose I'm already winning. Hopefully by the next post, I would have looked at how others have documented their journey and find clarity to how I should go about with mine.
Data structure in Python
Tags: python
Published: 2022-04-04 10:49:37

The data structure is necessary to improve the performance and runtime of a program. To update or modify data in the memory is an significant part of performance improvement. 
The [data structure](https://www.insideaiml.com/blog/What-Is-Data-Structure-In-Python%3F-1149) is required for organizing, managing and storing data for easy access and perform operations.
Deepgram api integration for Deepgram + Dev hackathon 22'
Tags: hackwithdg
Published: 2022-04-04 10:48:25

Build Challenge

### Overview of My Submission

Created a simple Deepgram APi integration for dev community deepgram hackathon.

### Submission Category: 

Wacky Wildcards


### Link to Code on GitHub

{% embed https://github.com/bagya00/Deppgram-Hack22 %}

```
Happy Coding

```