teleren/devto huggingface dataset:
How to Use "NuxtJS + Lanyard"
Tags: javascript, webdev, programming, nuxt
Published: 2022-04-22 22:13:30

# What is lanyard used for?
Lanyard is a service that makes it super easy to export your live Discord presence to an API endpoint and to a WebSocket for you to use wherever you want. This plugin creates a connection between Lanyard and your Nuxt app as a plugin and lets you access the $lanyard anywhere in your app!


## 🔧 Install
You'll need Node.js and an existing NuxtJS app to use this plugin 

```
Download the module via NPM, Yarn or your package manager.
- For NPM: npm install @eggsydev/vue-lanyard
- For Yarn: yarn add @eggsydev/vue-lanyard
```

## 🚀 Setup for NuxtJS 


- Create **plugins ** folder in root project

- Create "Nuxtlanyard.js" in plugins folder **(You don't need to use this name, it can be different name, but make a note of it. It will be used in nuxt.config.js)**

- Open "Nuxtlanyard.js" file to edit then write this code in your file

```
import Vue from "vue";
import VueLanyard from "@eggsydev/vue-lanyard";

Vue.use(VueLanyard);
```

- Then you need to add your plugin to nuxt.config.js file

```
export default {
  plugins: [
    {
      src: "@/plugins/Nuxtlanyard.js",
      mode: "client",
    },
  ],
};
```


### ❤️ Examples
The current winnerose.live website is developed with lanyard's js side, but my website alysum is completely powered by nuxt.

- Alysum: [Source](https://github.com/WinneRose/Alysum) | [Website](https://alysum.vercel.app/)
- WinneRose: [Source](https://github.com/WinneRose/winnerose.github.io) | [Website](https://winnerose.live/)
```
//Example Fetching Profile Picture from Discord Avatar
async mounted() {
    const socket = await this.$lanyard({
      userId: '701896585604497490',
      socket: true,
    })
    // Set a listener for "message" event
    socket.addEventListener('message', ({ data }) => {
      const { d: status } = JSON.parse(data)
      this.profileurl = `https://cdn.discordapp.com/avatars/701896585604497490/${status.discord_user.avatar}.png?size=256`
      this.name = status.discord_user.username
    })
``` 



Thanks For Reading Article
- WinneRose | https://github.com/WinneRose
How do I clean up my json response?
Published: 2022-04-22 22:12:38

Hey there! I am trying to store a json response in a mongodb database, but that isn't working because of the annoying format that looks like this: `{ '0': '9M0FY9GXM0' }`

Does anyone know how to make it just output the second string instead of all of it when using for example "`console.log(res.data)`"?

Thank you very much!
Lambda Series
Tags: aws, webdev, javascript, watercooler
Published: 2022-04-22 22:06:26

Currently writing notes along side writing my Appwrite React forum series to replace the appwrite element write Lambda. Aiming to release these as soon as the current series is done. Goal is to be able to clone the finished appwrite series and then replace the api interfaces with the AWS SDK.

Idea is to cover cognito, lambda and api gateway (with route 53, ofcourse). Bare with, middle of trying to organise this mess :-)

ps. part 3 should be out over the next few days - drop a follow to get notified!
Add Laravel Installer in MontereyOS
Tags: php, laravel, symfony, webdev
Published: 2022-04-22 21:53:09

Install the `installer` for Laravel projects:

```
composer global require laravel/installer
```

## Place Composer's system vendor bin directory in your $PATH

If you are using bash in your terminal, run these commands:

```
echo 'export PATH="$PATH:$HOME/.composer/vendor/bin"' >> ~/.bashrc
```

```
source ~/.bashrc
```

If you are running zsh execute these commands:

```
echo 'PATH=/bin:/usr/bin:/usr/local/bin:${PATH}
export PATH' >> ~/.zshrc
```

```
source ~/.zshrc
```

## Create your first Laravel project with the installer

I recommend to set a directory for your projects, if you are using valet you should run the `valet park` command inside that directory, inside that directory you can create new Laravel projects:

```
laravel new example
```

Now you can visit in the browser this site: `http://example.test/`

With the Laravel installer you can add multiple flags to set more features like create a github project with a branch, etc you can check this flags in the laravel.com site.
Weekly 009
Tags: weeklyretro
Published: 2022-04-22 21:52:58

### Monday

Holiday 🙂

By the way I spent a lot of hours writing one of my last three chapters for the book for Packt. 

In the evening I scheduled my next AMA for UGIdotNet with Fabio Franzini.

**Mood:** 😐

### Tuesday

What a day!
I started the morning with a lot of energy even if I didn’t sleep a lot because of my son.
In the morning I went live after a while on my Twitch channel 🙂 Finally!

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

Follow me on my channel: https://twitch.tv/kasuken

During the live I have refactored a lot of code of Red Origin.
It’s very hard to switch from a PoC to a Production Ready Product, every-single-time.

In the evening we went live with our montly meetup with the community Blazor Developer Italiani.
It was great, as always.
I love having a lot of new people that want to share their experiences.

{% embed https://youtu.be/8Zrt66RQFx8 %}

**Mood: 🙂**

### Wednesday

I started the morning to write down a few page of the book about Minimal API for Packt.
After that I went live on Twitch for the second time this week with the co-working streaming.

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

A lot of new people and a lot of interactions.
I did a lot of refactoring and change something in the UI.
Now it looks better than before.

After lunch I finalize my table of contents for the LinkedIn course about “Learning GitHub”.

**Mood: 🙂**

### Thursday

Normal day.
Nothing to share.

In the afternoon I went live for the “AMA” show for UgiDotNET.
We talked about the PowerPlatform with Fabio Franzini.

{% embed https://youtu.be/juU0FJu9YtE }

**Mood: 🙂**

### Friday

Another great day 🙂

Started the morning to write down some words on my book about Minimal API.
Then I started to work on Red Origin but in the middle of the morning I received an email from my manager with a new good/bad news: we have to work on an high priority project/product BUT we need the first prototype for the next week 🙂

Welcome to my job.

With another member of the Blazor Community, we have started to work on a project on GitHub: Blaster.
It will be a state manager for Blazor.

{% embed https://github.com/kasuken/Blaster %}

In the afternoon I received a great news!
I got nominated as “Auth0 Ambassador”! 😀

Yes, it’s another achievement for this year.
I will write a detailed article at the beginning of the next week!

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

**Mood: 🦸**
Best Data Science Bootcamp
Tags: datascience, database
Published: 2022-04-22 21:41:14

Data science is a field that is always changing. As a result, if you want to be a successful data scientist, you'll need to know how to use important data tools including Apache HBase, Python, Hadoop, R, HDFS, and Scala. As a result, when you enroll in the finest [data science bootcamp](https://www.synergisticit.com/data-science/), you will learn about all of the tools that are currently in use. Some employment role may necessitate the knowledge of a specific tool. In this scenario, you can use training to supplement your previous expertise and learn more about the tool. This will boost your self-assurance in front of your boss.
DRY & the Wrong Abstraction
Tags: discuss, programming
Published: 2022-04-22 21:32:38

I was chatting with someone in my [Virtual Coffee community](https://virtualcoffee.io/) today, and they were talking about acronyms, because we love to create acronyms in tech. DRY came up, a.k.a. Don't Repeat Yourself, and then we got to talking about sometimes it's fine not to be DRY. I referenced Sandi Metz's great post, [The Wrong Abstraction](https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction) and a great talk by Sebastien Markbage (former React core team member), Minimal API Surface Area at JSConf 2014.

{%embed https://www.youtube.com/watch?v=4anAwXYqLG8 %}

So with all that set up, let's hear from you, the community, on when to maybe DRY it up and maybe when not to. It'd be great to hear about real world examples to help others in their developer journey.

Photo by <a href="https://unsplash.com/@jrkorpa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jr Korpa</a> on <a href="https://unsplash.com/s/photos/abstraction?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
How to add Rich Text Editor Field in Django?
Tags: django, python, webdev, codenewbie
Published: 2022-04-22 21:27:04

Sometimes we need a field to get data other than a paragraph or heading tag that field is called the text area field. This field is used to get the long text as input from the user. Or we can say that we use the text area field as an alternative to the input field to get the long input from the user. The Syntax of the text area filed is:  

## Syntax:

>   <textarea></textarea>

But the text area field is quite simple and we can’t get the option to format the text or change the layout of the text and add images to the text area field. So, we use Rich Text Editors for design purposes.

## Rich Text Editor:

The rich-text editor is based on an open-source application called CKEditor. For more information on the CKEditor, you may also refer to the following website.

>  https://ckeditor.com/docs/   

We will use the rich text editor field as the Rich Text field in Django Model. It is an external Package, so we need to download it before implementation.

## How to download Rich Text Editor for Django:

For downloading we need to install the following package using the pip command. After Installing we have to add it to the installed app which will placed in project’s folder.

>  pip install django-ckeditor

The above commands will install the package of the latest Django on your local machine. And ck-editor packages and its built-in files into our local machine.

After installation add it to the Installed app.

**Settings.py:**

```
INSTALLED_APPS = [
    'website',
    'ckeditor',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
```

After this, we are able it to just import and use the Rich Text Editor Field in Django.

**Models.py:**

```
from django.db import models
from ckeditor.fields import RichTextField
class Blogs(models.Model):
    title = models.CharField(max_length=200)
    desc = RichTextField()
```

After that, we need to do _makemigrations_ and _migrate_ to apply the changes at the database.
And done!
You have successfully installed Rich Text Editor Field in Django.

## Some Other Blogs

[A Step-By-Step Tutorial For Coding Your First HTML Document](https://coding-india.herokuapp.com/blogs/readblog/3/)
[Complete CSS Grid Tutorial | Learn CSS by practicing it](https://coding-india.herokuapp.com/blogs/readblog/10/)
[How to deploy django on heroku server?](https://coding-india.herokuapp.com/blogs/readblog/11/)
[What is virtual environment and how to use it in python?](https://coding-india.herokuapp.com/blogs/readblog/5/)
[What are the file structure of django projects and apps and how to create django project and apps](https://coding-india.herokuapp.com/blogs/readblog/12/)
Code Smell 131 - Zero Argument Constructor
Published: 2022-04-22 21:25:42

*Objects created without arguments are often mutable and erratic*

> TL;DR: Pass all your essential arguments when creating objects.

# Problems

- [Mutability](https://dev.to/mcsee/the-evil-powers-of-mutants-1noo)

- Anemic Models

# Solutions

1. Use one complete and single constructor.

2. Avoid [Setters](https://dev.to/mcsee/code-smell-28-setters-2hih) and [Getters](https://dev.to/mcsee/code-smell-68-getters-o12)

# Context

It is common usage using a zero-argument constructor and a bunch of setters to change it.

[Beans](https://en.wikipedia.org/wiki/JavaBeans) is a well-known example of this code smell.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/d42be6d1931e7f4f80781b1360e86a0f)
```java
 public Person();

// Anemic and mutable
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/af9b6b0a60b76d984cd43b2c26720040)
```java
public Person(String name, int age){
     this.name = name;
     this.age = age;
     } 
 }

// We 'pass' the essence to the object 
// So it does not mutate
```

# Detection

[X] Automatic 

We can check all constructors, but there are some false positives.

Stateless objects are a valid example.

# Tags

- Mutability

# Conclusion

Empty constructors are mutability hints and accidental implementation issues.

We need to research usages to improve our solutions.

# Relations

{% post https://dev.to/mcsee/code-smell-68-getters-o12 %}

{% post https://dev.to/mcsee/code-smell-28-setters-2hih %}

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

# More Info

- [Nullary Constructor](https://en.wikipedia.org/wiki/Nullary_constructor)

- [Nude Models — Part I : Setters](https://dev.to/mcsee/nude-models-part-i-setters-5c9i)

- [Nude Models — Part II : Getters](https://dev.to/mcsee/nude-models-part-ii-getters-3f2a)

- [The Evil Power of Mutants](https://dev.to/mcsee/the-evil-powers-of-mutants-1noo)

# Credits

Photo by [Ade Adebowale](https://unsplash.com/@adebowax) on [Unsplash](https://unsplash.com/s/photos/crane)  

* * *

> Don't worry about design, if you listen to your code a good design will appear...Listen to the technical people. If they are complaining about the difficulty of making changes, then take such complaints seriously and give them time to fix things.

_Martin Fowler_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Typescript project starter
Tags: typescript, javascript, webdev
Published: 2022-04-22 21:22:59

Many times you just want an `index.ts` and `package.json` to run a simple script like project for typescript.

What is the bare minimum way to do that?

```
nvm use
npm init -y
npm install typescript --save-dev
```

After that follow this guide.

https://blog.appsignal.com/2022/01/19/how-to-set-up-a-nodejs-project-with-typescript.html
Memory Systems
Published: 2022-04-22 21:10:04

Memory Systems.

After searching online about hot field - memory systems, I found this great paper.  


The _**memory system**_ is the storage of information (data) in a computer system. The processor (also called the central processing unit, or CPU) accesses (reads or loads) data from the memory system, performs computations on them, and stores (writes) them back to memory. The memory system is a collection of storage locations. Each storage location, or memory word, has a numerical address. A collection of storage locations from an address space. Figure 1 shows the essentials of how a processor is connected to a memory system via address, data, and control lines.


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

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

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

This is work in progress. 

Resources:

https://www.studytonight.com/computer-architecture/memory-organization

https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.103.9197&rep=rep1&type=pdf

### Conclusion

It was a Great project to work on and a great course to learn about different ways to optimize code. 

Thank you, professor and readers!

⚠️ Computer Architecture Blog Post: Link

### Links

🖇 Follow me on [GitHub](https://github.com/aserputov) 

🖇 Follow me on [Twitter](https://twitter.com/aserputov)

_p.s This post was made for Telescope.
Install Laravel Valet in MontereyOS
Tags: php, laravel, symfony, webdev
Published: 2022-04-22 20:38:11

## Install Valet Globally

In the terminal type this command:

```
composer global require laravel/valet
```

## Execute Valet install command

In the terminal type this command:

```
valet install
```

### You can change the PHP version for different projects

You can use a different PHP version for multiple projects and change between PHP versions with this command syntax:

```
valet use php@7.2 // for Laravel 5.6 to 8

valet use php@8.0 // for Laravel 9
```

If you are going to handle a lot of different projects with different versions you can use the new feature of Valet 3 of Multiversion support.

### Isolate a PHP version with Valet

Located in the project root directory, you can run this command:

```
valet isolate php@7.4 // for Laravel 5.6 to 8
valet isolate php@8.0 // for Laravel 9
```
Day 14: We did it!
Published: 2022-04-22 20:35:58

Hi!
We did it (me and my team) I can now sleep the demo went as smoothly as expected after sleepless nights on Wednesday and Thursday and I think I deserve some time to rest! I noticed that now time flies even more faster you start a week and just like that it's Friday already. so the next week will have to be a challenging one I will have to research about `redis` and `websockets` that we are going to use in the project we are building and these concepts are totally new to me and I don't have any Idea about where to start. I plan to get started by this weekend and see what I will be able to find 
I also plan to continue working on my project And hopefully I will be able to write another article about it but no pressure
time to sleep 

signing off...
Happy Earth Day Greeting (Shareable)
Tags: earthday, discuss, augmentedreality, appdevelopment
Published: 2022-04-22 20:12:29


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

We have one earth and we should take care of it!
 
To share this Earth Day greeting with your friends and family, scan this QR code or share this link: [https://go.echo3d.co/ws12](Link)

![QRCode.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650658112677/nyBQJTZVD.png)

***
To learn more about creating AR apps without code, visit the [echo3D docs](https://docs.echo3d.co/).

To make your own, sign up for echo3D for free [here](https://console.echo3d.co/#/auth/register).

To recreate this, follow this [short tutorial](https://medium.com/echo3d/create-an-ar-experience-and-share-with-a-qr-code-link-f02e63114bbb).

Special thanks to [www.benmusic.com](http://www.benmusic.com/) for the audio clip.

## More Tutorials

- [Get a Quarantine Dog…in AR!](https://medium.com/echo3d/get-a-quarantine-dog-in-ar-8383ea55376b)
- [How to Create 3D Content and See it in AR (FREE & NO CODING REQUIRED)](https://medium.com/echo3d/how-to-create-3d-content-and-see-it-in-ar-free-no-coding-required-369e5b4a4b3e)
- [Make a Valentine’s Day Slideshow in AR](https://medium.com/echo3d/make-a-valentines-day-slideshow-in-ar-free-and-no-code-c1e35a4206d4)

***
>*echo3D (www.echo3D.co; Techstars 19’) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.*

![echo3D - Logo 2021 - Background.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1650657995144/woK4vJhX5.png)
Hosting a website on the blockchain
Tags: web3, webdev, discuss
Published: 2022-04-22 20:08:15

I have been trying to get my head around how to use Web3 and this may become a series as make sense of each part. Hope it help someone else taking a look at web3.

This will list out the requirements to host a decentralized (Web3) website and the associated cost. 

## HOSTING
### Integrated service - fleek.co
Fleek [https://fleek.co/](https://fleek.co/) is an integrated SaSS similar to Netlify that takes care of building the page from the code, uploading it to IPFS, and tying a regular DNS and ENS, as well as SSL certificates. 
PRICING - [https://fleek.co/pricing/](https://fleek.co/pricing/)
The Basic plan ($0)  should be more than enough for most static sites. 3GB/Month
### Non-Integrated 
It is possible to use a service like Pinata [https://www.pinata.cloud/](https://www.pinata.cloud/) to upload compiled site to IPFS and then use Cloudflare's IPFS gateway to provide the gateway and domain hosting services. 
### NOTES
While it is technically possible to create our own IPFS node and gateway since the code is open source. It is not recommended since there are other parts to hosting these nodes safely and securely that would add a lot more overhead cost than any tangible benefits. 

## DOMAIN
In the same way that normal URLs have registrars, there are registrars for domains on the blockchain. 
.eth names are available and can be used to point to multiple things such as wallets, NFTs, IPFS files (websites)
You can buy any name for the following price plus the gas fee. 
5+ character .eth names: $5 in ETH per year.
4 character .eth names: $160 in ETH per year.
3 character .eth names $640 in ETH per year.
However, if you have a normal URL that supports DNSSEC they can be registered for only the gas fee. 

The fee is meant to prevent domain squatting. 
## GLOSSARY:
**IPFS**: Inter-Planetary File System (https://ipfs.io/). This is the immutable decentralized network that is used to host files for Web3 applications. Once a file is uploaded to IPFS it has a Unique identifier for file retrieval. 
**Gateway**: Server that provides a connection between the regular internet and IPFS. Allowing the viewing of IPFS from any browser. 
**ENS**: Ethereum Name Service (https://ens.domains/). This is the blockchain equivalent of a URL. It can be used to point to wallets or IPFS files.
**Gas**: Gwei. A gas fee refers to the fee required to successfully conduct a transaction on the Ethereum blockchain. Gas fees are paid in Ethereum's native currency Ether (ETH) and denominated in gwei.
Finally shipping ContactCarrd
Tags: shipping
Published: 2022-04-22 20:07:27

---
title: Finally shipping ContactCarrd
published: true
description: 
tags: shipping
//cover_image: https://direct_url_to_image.jpg
---
https://contactcarrd.com

I'm happy to announce that the project I've been working on for the past few months is (hopefully) ready for prime time!

With the pandemic and everything else going on the past couple years, I've found it hard to hand over my phone to let someone else enter in their contact info so I decided to develop a small PWA to create and share contract cards in .vcf or QR code formats.

Please give it a shot and let me know what you think. I'm really happy with it for my own personal uses so I hope others can get some use out of it as well.

https://contactcarrd.com