teleren/devto huggingface dataset:
How to Add a QR and Barcode Scanner to Your Vue.js App
Tags: vue, javascript, qr, scanner
Published: 2022-01-30 07:31:24

In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This is a great way to increase engagement with your users and can be used for a variety of purposes, such as marketing, product identification, and more! We will be using the [vue-barcode-reader](https://github.com/olefirenko/vue-barcode-reader) library for this tutorial, which is a popular option for scanning both QR codes and barcodes. Let’s get started!

## Installation

First, we need to install the **vue-barcode-reader** library. We can do this with npm:

```bash
    npm install vue-barcode-reader --save
```

Or yarn:

```bash
    yarn add vue-barcode-reader
```

Please note that for projects which use the Vue 2.0 version you need to install the compatible version of the library (vue-barcode-reader@0.0.3).

## TypeScript

If you are using TypeScript, you will need to install additionally the definitions of the vue-barcode-reader types. There are type definitions available at DefinitelyTyped for those who work with TypeScript.

```bash
    npm install @types/vue-barcode-reader --save-dev
```

Or

```bash
    yarn add -D @types/vue-barcode-reader
```

## Usage

Next, we need to add the library to our project. We can do this by adding it to our Vue component:

```bash
    import { StreamBarcodeReader } from "vue-barcode-reader";
```

Now, we need to add a QR or barcode scanner component to our project. We can do this by adding the following code:

```bash
    <StreamBarcodeReader
        @decode="onDecode"
        @loaded="onLoaded"
    ></StreamBarcodeReader>
```

We should also implement the handlers for **decode** and **loaded** events which the library exposes.

```bash
    onDecode(text) {
        console.log(`Decode text from QR code is ${text}`)
    },

    onLoaded() {
       console.log(`Ready to start scanning barcodes`)
    }
```

Now, you can scan QR codes and barcodes in your Vue.js application! Here is an example of a QR code that I scanned:


![QR code scanning in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41h855g0snp4r0mfybgf.jpg)

## Demo

You can find the source code of the example application on [Github](https://github.com/olefirenko/vue-barcode-reader-example) or check it live at [Vercel](https://vue-barcode-reader-example-2iiz1fhbf-olefirenko.vercel.app/) or [Netlify](https://stupefied-meitner-58f299.netlify.app/). You can also check how `vue-barcode-reader` library works on the live production website [here](https://parceltrackingapp.com/en).

## Conclusion

In this blog post, I showed you how to add a QR and barcode scanner capabilities to your Vue.js app. This is a great way to increase engagement with your users, and can be used for a variety of purposes, such as marketing, product identification, and more! I hope you found this blog post helpful. Feel free to ask me any questions in DM on [Twitter](https://twitter.com/olefyrenko). Thanks for reading!
Created a React app for calculating PNL for crypto trading
Tags: crypto, trading, blockchain, react
Published: 2022-01-30 07:22:21

Hey guys it's my first reactjs project.
I made a PNL calculator for crypto trading.
You need to enter the details of your trading strategy and execute and you can see your PNL. 
As of now the trade will be randomised depends upon your winrate and the PNL is calculated.

Link: https://crypto-pnl.herokuapp.com/

Github: https://github.com/Athulr32/crypto-pnl-calculator

Thank you!
I made my first GL project using Piston.
Tags: rust, opengl, watercooler, gamedev
Published: 2022-01-30 07:21:15

So, [I made a Tweet](https://twitter.com/BaenenCalin/status/1487662032681938946) not too long before I made this post, and it was me showing off my first OpenGL project using [Piston] (https://github.com/PistonDevelopers/piston).  
And I attached two images.

One of the `target` folder, with the program over it:
![Image of program and `target` folder.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l1fn9bgydilxivo6eos.png)
And the other of the `src` folder, so you could see how the app was structured:
![The `src` folder.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxy7o6s8xdwkrpjjjt08.png)



<br/>



The point of this post is to talk about how my experience was, and even as someone who just started, would recommend Piston.  
So. What was the project I made in Rust?
A game in-development.

I'm working on RuntDeale, a game inspired by (but **NOT** an AU of) [Undertale](https://undertale.com/), an 2.5D RPG bullet-hell game.
What do I have so far? -- I have a white background with a purple square that can be moved using the W, A, S, and D keys.

<br/>

So far, my experience has been okay.
I've been able to create a window of a variable size and title, have been able to draw a shape to the screen, provide custom colors, and rotate a shape.

Now, how much code does it take to do all that?
With Piston, this much:
```
                   # Total lines: 234
                   #     Compact: 135
                   #     CptLns:  (12, 28, 2, 11, 1, 27, 54)
                   #
                   # Avg lines:   033
                   #     Compact: 019
src/
  rd_events/
    gameloop.rs    # Lines: 23
    buttons.rs     # Lines: 49
    mod.rs         # Lines: 02
  
  rd_utils/
    colors.rs      # Lines: 27 (not all lines are required)
    mod.rs         # Lines: 01
  
  main.rs          # Lines: 39 (some lines are whitespace)
  app.rs           # Lines: 93
```

So relative to what I've seen before, that's not a lot of code.
Just a few lines for making the window and event register, a fair bit of lines to rendering the the background and drawing the shape at its given X, Y position, and a small bit for detecting the key-presses and updating the X and Y position.  
<br/>

So. Why do I like Piston so far?
It's concise, and it's been (for the most part) straightforward.

Check out [their homepage, https://piston.rs](https://www.piston.rs), they even show off some great examples of how their library has been used!
 - [Rust 2048](https://github.com/Coeuvre/rust-2048)
 - [Hematite](https://github.com/PistonDevelopers/hematite)




<center><b><h1>Thanks for reading.<br/>Cheers.</h1></b></center>
The Problems with Web3 and NFTs
Tags: nft, web3, blockchain, dao
Published: 2022-01-30 07:18:01

Okay, so this may seem like a lazy post since it is essentially reposting the content of others - but I think this stuff is so important that it's worth spreading the message.

If you are considering getting involved with Web3 (as it relates to blockchain), NFTs, or other stuff like this - whether just as a participant, or as a developer... **please** consider watching or reading one or both of these extremely well researched pieces.

A great, long read - https://tante.cc/2021/12/17/the-third-web/

An excellent (again, long) video - over 2 hours:
{% youtube YQ_xWvX1n9g %}

### Further Reading

* [Keep the web free,
say no to Web3](https://yesterweb.org/no-to-web3/)
* [Web3 is Just Expensive P2P](https://netfuture.ch/2022/05/web3-is-just-expensive-p2p/)
* [Blockchain is Dangerous Nonsense](https://www.eisfunke.com/article/blockchain-technology.html)
* https://web3isgoinggreat.com/
* https://davidgerard.co.uk/blockchain/2021/03/11/nfts-crypto-grifters-try-to-scam-artists-again/
* https://amycastor.com/2021/03/14/metakovan-the-mystery-beeple-art-buyer-and-his-nft-defi-scheme/
* https://www.stephendiehl.com/blog/crypto-absurd.html
* https://blog.mollywhite.net/blockchains-are-not-what-they-say/
* https://www.motherjones.com/politics/2021/11/who-goes-crypto-eth-bitcoin-etc-financialization-gamestop-class-wealth/
* https://twitter.com/davetroy/status/1478017698676228099
* https://davidgolumbia.medium.com/cryptocurrency-is-garbage-so-is-blockchain-3e80078e77fe
* https://marker.medium.com/fintech-is-a-scam-a-listicle-in-eight-parts-7b6161f3a35a
* https://naavik.co/business-breakdowns/axie-infinity/#axie-decon=
* https://www.gawker.com/culture/the-future-is-useless-expensive
* https://twitter.com/NFTtheft
* https://www.theatlantic.com/ideas/archive/2021/04/nfts-werent-supposed-end-like/618488/
* https://www.gamesindustry.biz/articles/2021-11-05-baseless-nft-hype-hits-a-crescendo-but-its-play-to-earn-thats-worth-watching-opinion
* https://www.technollama.co.uk/platform-is-law-the-cautionary-tale-of-stolen-nfts
* https://davidgerard.co.uk/blockchain/2021/02/12/libra-shrugged-chapter-6-banking-the-unbanked/
* https://twitter.com/Bitfinexed
* [Web3 is centralized (and inefficient!)](https://www.neelc.org/posts/web3-centralized/)
* [The Man Behind Ethereum Is Worried About Crypto's Future](https://time.com/6158182/vitalik-buterin-ethereum-profile/)
* [The Complete Argument Against Crypto](https://www.stephendiehl.com/blog/complete.html)

### Full disclosure

I do personally own some crypto (worth a non-trivial amount), but I was given it for free as part of a previous job's remuneration package.
Return Statement in Programming Languages
Tags: java, programming, tutorial, notes
Published: 2022-01-30 06:43:41

1. **Return Statement:-** It is used to return any value from a function/method when the method is being called in the main() in any programming language.

2. Return statements are mostly used in **recursion** programs.

3. **Example to demonstrate Return Statement in Java:-** 
Here, after the function call the method returns the sum of the two variables and doesn't execute the last one i.e., the print statement and it remains unreachable and throws an error as the method ends after the return statement.

```java
public class Sum {
	public static void main(String args[]){
		int a = 10;
		int b = 20;
		int ans = sum(a,b);
		System.out.println("Answer = " + ans);
	}
	
	public static int sum(int a, int b) {
		int sum = a + b;
		return sum; // Function ends
		
		System.out.println("Unreachable statement"); // This will give an error.
	}
}
```
 
Thus after the return statement, if there's any more lines of code then those will not be executed and will give an error and the method will stop it's execution.

---

## Hope this helps you. Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCsuzc8lqAbgUYo4yzpjtfSw) and connect on [LinkedIn](https://www.linkedin.com/in/susmita-dey-15a15a210/) or [Twitter](https://twitter.com/its_SusmitaDey).
Also, feel free to [support](https://www.buymeacoffee.com/susmitadey) my work.😊
New AWS Console Looks
Tags: aws, news, discuss
Published: 2022-01-30 06:28:16

Hello!

I'm very glad that AWS Console has a new looks. Here we go.

## AWS Console Home

![AWS Console Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4g9yt4gguugbkg5jrsi.png)

If you want to opt out to previous Console Home. You can click **Actions** dropdown at the top right and click **Revert to previous Console Home**.

![Opt Out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6zm38aw5g8b0j8raz4n.png)

### Add Widget

![Add Widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8xaskl42lgvd7d78wps.png)

### Arrange the widgets

![Arrange Widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn6qw59m8vcsrd4zvx7g.png)

## Cool

![Cool GIF](https://media.giphy.com/media/SVH9y2LQUVVCRcqD7o/giphy.gif)

This new feature is really cool for me. I really like it. How about you?
Git Graph Extension In Vs Code
Published: 2022-01-30 06:18:24

Recently, I watched a github tutorial. and i found out a fascinating git tool extension in vs code called "Git Graph".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqi8ztlbx4q1796lxhb8.png) 

If you working a bigger projects.Lots of people commit there code and merge in other branches so sometimes it pretty much confusing to see their commit and merging.
 
This extension help pretty  good visualization of the my branch in relation to other branches.something this-
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sde5sk6okhidc802dir.png)
You can also see who made commit full details about it.
thanks!
How Identity works in web3?
Tags: web3, blockchain, programming, smallblog
Published: 2022-01-30 06:15:36

The identity in web3 is very different than web2. In web2 we have authorisation with password and email address. But in web3 we have our wallet address with which the unique identity of every user will be tied.

**Wallet -  A self-custody wallet enabling access to the 3rd generation of the web including the usage of dapps. Web3 wallet is really just a browser added to the regular self-custody wallet enabling the usage of dapps.**

Wallet addresses are totally anonymouus and its uers's wish to make it public. 

Ethereum has working RFP(Request for proposals) specification for users to sign-in with ethereum and replaces traditional authentication ways.

Stay tuned for more short blogs, if you have any doubt which is RELATED to this blog, please comment and we'll look for answers together. 

I am exploring web3 everyday, we'll surely write more blogs as I find new and exciting things about it.

Thanks for reading, happy learning!

Source - Freecodecamp
Log HTTP Requests in Laravel.
Tags: laravel, http, logging
Published: 2022-01-30 05:40:30

I just finished releasing a new package for Laravel and wanted to share with you first.

It's called Flashlight and it's a package for logging HTTP request in a Laravel application.

It is highly customizable and easy to install.

All you have to do is download it and add it to the routes you want to log and monitor.

Here's a link to its [Github repository](https://github.com/hesamzakerirad/laravel-flashlight). 

I hope it is useful for you.

If you had any questions regarding how it work, how I built and so on, I'll be more than happy to help you.

✌
Self-Taught Developer Journal, Day 50: TOP Building Rock Paper Scissors UI cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-01-30 05:05:44

Today I worked on the UI layout. 

I started with using flexbox to center the main game UI, I created a flex-container class with my only flex item being the grid container for the grid. Next, I'm arranged the elements with CSS grid to fit the mockup I created.

![Rock Paper Scissors UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pdi8tmxvnh7cwxkv57i.png)

I ended up removing some container classes I created when I was using flexboxes because they are not longer applicable. I was having issues setting the flex-container to take up the whole screen and ended up Googling it. I found a good article that helped: https://softauthor.com/css-make-a-div-height-full-screen/.

After messing around with grid and its properties. I was able to set up a 3 by 3 grid. It's more or less coming together.

![Layout Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jf7w7cskq3vqusth4q1.png)
 
I think I have it at a good place to start working on the JavaScript and then come back to make it better.

*Make it work, Make it right, Make it better*

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
[Revisiting Rock Paper Scissors](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/revisiting-rock-paper-scissors)
Go Get Golang Private Module
Tags: go, beginners
Published: 2022-01-30 04:00:25

---
title: Go Get Golang Private Module
published: true
date: 2022-01-30 03:54:55 UTC
tags: golang,beginners
series: "Sunday Snippet"
canonical_url: https://clavinjune.dev/en/blogs/go-get-golang-private-module/
---

![Sunday Snippet #2 go get golang private module](https://clavinjune.dev/img/sunday-snippet/image.png "Sunday Snippet #2 go get golang private module")

I assume before fetching golang private module, you already have put your public SSH key on your git repository.

```bash
$ mkdir example && cd example
$ go mod init example
go: creating new go.mod: module example
# this is my private repo, this attempt will produce error
$ go get github.com/clavinjune/testing@latest
go get github.com/clavinjune/testing@latest: module github.com/clavinjune/testing: git ls-remote -q origin in [redacted]: exit status 128:
	fatal: could not read Username for 'https://github.com': terminal prompts disabled
Confirm the import path was entered correctly.
If this is a private repository, see https://golang.org/doc/faq#git_https for additional information.

# change the https to ssh, go get will try fetching your private module using your SSH key
$ git config --global --add url."git@github.com:".insteadOf "https://github.com/"
$ go get github.com/clavinjune/testing@latest
go get: added github.com/clavinjune/testing v1.0.0
# success! But if above method still doesn't work set GOPRIVATE first
$ go env -w GOPRIVATE="github.com/clavinjune/*"
# then, go get again
```
My new project
Tags: javascript, webdev, beginners, programming
Published: 2022-01-30 03:48:30

Hello my dear friends i created a new stress releasing game simple dimple.Simple dimple is the top most selling toy.i created its virtual version you can play it through my website it is secure don't worry!Please play it now through my website and comment your feedback and Thank you everyone comment on my last post

web url:https://sripadhs.github.io/simple-dimple/
Photo App on React and Ruby on Rails...
Tags: react, javascript, ruby, node
Published: 2022-01-30 03:26:44


The scope of this project was to implement React as front-end to my photo app Ruby of rails backend. So the app allows you to upload photos. 


Also you can create an account logging . Once you Sign in and create an account you will be able to add photos and delete them. This is all possible thanks to Ruby on Rails and React.

An API was created to display the data. JWT was implemented to keep the data safe when created. 

React handles the Front-end and a user authentication was build with React/Redux to easily handle our JWT.

Check it out and have a look at the code. It might be fun.

What I learn:

Complete and run a whole project in React and Ruby on rails.

Integrate Redux to my react application and use it to handle a user JWT authentication.

Create an app that serves as a community to add photos and share them.

The implementation of useContext as a hook to help sharing data throughout different components in the app. 

The use of Hooks on functional components as well as managing states and props. 

Check the repo and have fun. Questions, concerns or issue can be manage though GitHub. 

You can find the Front-end here:

[35mm front-end](https://github.com/JcBonassin/35mmReact-front-end)

and Backend here:

[35mm Backend](https://github.com/JcBonassin/35mm-react-backend-rails)

Please follow the instructions to install and ..Happy Coding 

Thanks for reading ..
Storage Full on Device ! No need to delete memories [Problem Solved]
Tags: storage, tips, sh20raj, beginners
Published: 2022-01-30 02:56:08

Let's consider your mobile device storage is full and you have to _delete you memorable videos_ 💕 or images for getting some space in mobile.
**Here's a solution** - That will save your videos and files and you will also get space in your device.

### Reliable Sorces :- Telegram, YouTube, Pinterest, Google Drive...

## Videos

For making our storage full video are in the major role. So we need to fix it. So we are going to get a `reliable` cloud ☁️ hosting for it.
And No one can surpass [YouTube](https://youtube.com) from this solution.

**You don't need to properly edit your videos 😜 or think that videos will be on internet and it's out of my hand**

YouTube is a trusted community.

- Upload you all videos there in `private` or `unlisted` (if you want to share videos with your relatives)
- Use the playlist feature of YouTube to manage your videos and make collection of videos. Like one video is is added in `2022` playlist because is was recorded that year and also added to `Birthday 🎉` playlist because it was a birthday video and also added to the playlist of `(name)` whom birthday was.
- That's how you can manage you private videos 👍.

### Now After Uploading you can `delete` your videos from your device.

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

## Images
Images also take a huge part of your storage. So you need a survice that can take `UNLIMITED` images and can also manage your images `as we do in Image Gallary`and one more thing that it should have `PRIVATE` Uploading features so your images will not be revealed to others.

**Here's a impressing option comes That is [Pinterest](https://in.pinterest.com)**

- Create Private boards here.

- Pinterest's User Interface is just awesome. It's uses boards as we create album or folders in our devices.

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

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

### Now After Uploading you can `delete` your photos from your device and keep the Pinterest App. It's a reliable platform.


## Other Files

For other files you can use `telegram` , `Google Drive` or your `mobile storage`. 🤭

## Extra
Article written from mobile

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


Follow  Me.🎉
Day 22 of 100 - Java
Published: 2022-01-30 02:18:08

Basic Java programs

https://github.com/j143/java-reflection-examples/blob/main/src/BasicExamples.java

working with `LinkedList`, `HashMap`, `Set`, `Arrays`


Floating point arithmetic resources
1. https://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
ReactJS Roadmap | Beginners to Advanced (Resource Compiled)🔥
Published: 2022-01-30 02:04:10

<!-- wp:paragraph -->
<p>Hello, In this blog I am gonna walk you through the roadmap for learning React, I've broken down the concept of React into small parts as modules so that It will be easier to understand. This is only for the beginners, Soon I'll publish another blog on advance roadmap of React and also this is just a roadmap(learning path), For learning these concepts I've added the official documentation links(for most of the concepts) where you can go and learn, One interesting thing is that I have also added what you gonna achieve by learning those concepts🎯.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="pre-requisites"><a href="https://dev.to/suhailzone/reactjs-roadmap-for-beginners-2021-14en#prerequisites"></a>Pre-requisites📝:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I assume that you have some basic understanding of the following:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Basics of HTML(such as HTML elements, form, table, div and list tags with their attributes).</li><li>Basics of CSS(such as styling the html elements, CSS selectors and box model).</li><li>Basics of JavaScript(such as variables, conditional statements, loops, data types, DOM manipulation and event triggering).</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Read More : <strong><a href="https://news.google.com/articles/CAIiEMifr0fAKdD5z1Eekgo6m8sqGQgEKhAIACoHCAowwLGvCzDNvMcDMP_gtgc?uo=CAUiPGh0dHBzOi8vd3d3LmNvZGVsaXZseS5jb20vcmVhY3Rqcy1yb2FkbWFwLWEtYmVnaW5uZXJzLWd1aWRlL9IBAA&amp;hl=en-US&amp;gl=US&amp;ceid=US%3Aen" target="_blank" rel="noreferrer noopener">ReactJS Roadmap | Beginners to Advanced (Resource Compiled)🔥</a></strong> </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I hope you found what you were looking for from this tutorial. If you want more Roadmap like this, then do join our <strong><a href="https://t.me/codelivly">Telegram channel</a></strong> for future updates.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading, have a nice day 🙂</p>
<!-- /wp:paragraph -->