teleren/devto huggingface dataset:
Event bus in Nuxt3
Tags: vue3, nuxt3
Published: 2022-07-15 14:52:31

---
title: Event bus in Nuxt3
published: true
description: Learn how to implement event bus in Nuxt3.
tags: vue3, nuxt3
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Event bus is typically a mechanism that makes it possible to have communication between different components. These components can be present at any level of component hierarchy in your project.

To know more about Event bus and its implementation in Nuxt2 visit link

[VueJS Eventbus: Easy way to pass data between components](https://paragchirde.medium.com/vuejs-eventbus-easy-way-to-pass-data-between-components-2d2a663a3e83)

However, the [official documentation](https://v3.vuejs.org/guide/migration/events-api.html#_2-x-syntax) you can see how the Event Bus implementation has changed from Vue 2 to Vue 3.



Introducing [mitt](https://www.npmjs.com/package/mitt), a new and simple way of implementing event bus on Vue3/Nuxt3

We’ll start by installing mitt.

```bash
npm i mitt
```

Next we’ll register a new plugin named `mitt.client.js` in the plugins directory.

```bash
import mitt from "mitt";
const emitter = mitt();
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.provide('bus', {
      $on: emitter.on,
      $emit: emitter.emit,
    })
  })
```

Know more about registering plugins in Nuxt3 [here](https://v3.nuxtjs.org/guide/directory-structure/plugins/)

Let’s see how to emit and listen to events in different components. Consider two components A and B. In our case **Component A** will emit the event and Component B will listen to the event.

ComponentA.js

```bash
this.$bus.$emit("someEvent", 'Data to send')
```

ComponentB.js

```bash
mounted() {
this.$bus.$on("someEvent", (data) => {
	console.log(data);
	//Some stuff to do..
}
```

That’s pretty neat and clean. Thank you for reading!
parseInt()!
Published: 2022-07-15 14:51:28

**Introduction**

The reason behind choosing this particular topic? As a student at Flatiron School we go through many challenges and many time you come across a challenge that requires you to google. I still have a lot to improve on my googling skills. See here comes in the choice of my topic. I just could not find the answer to this very simple question. I tried so many ways and even though you can find some answer they just seemed way to difficult.

"The challenge"
In that particular challenge you had to add a vote based on the value of your input field to your total vote count.

```
   <h4>Total Votes: <span id="vote-count">Character's Votes</span></h4>;
        <form id="votes-form">;
          <input type="text" placeholder="Enter Votes" id="votes" name="votes" />;
          <input type="submit" value="Add Votes" />;
        </form>;
```

It is nothing too complicated right? Well the answer was not so straight forward. Since the input is a string it will not be able to cumulate your votes.

This is when parseInt() comes useful.
```
 let count = 0;
 count =  parseInt(input.value) + count;
   characterVote.textContent = count;
```
This function will return an integer from the string argument and from now it will be able to cumulate your total count.

Hope this was useful! Feel free to reach out if you have or had the same struggle with parseInt() and strings :D.

Also here is a link to more information about parseInt():


MDN web docs_:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
3 killer tools to debug your Monorepos
Tags: tooling, javascript, devops, frontendops
Published: 2022-07-15 14:45:29

Lately, I've been doing a lot of migration from single repositories to Monorepos. Here are three very handy tools to make these setups debugging easier.

## 1 - Yarn why / npm ls
If you're using Yarn, this is really useful for checking why a certain dependency is inside your codebase, how it got there and which packages are depending on it.

`yarn why react`

[Official docs on Yarn why here](https://classic.yarnpkg.com/en/docs/cli/why).

If you're not a Yarn user, you can also use the following command:

`npm ls`

Run this itself to get to know about dependency errors inside your project (marked with red).

Or you can also check how many times a package got involved in your project by just giving the package name as a parameter

`npm ls react`

Be brave about resolving your dependency hells! 🍀

## 2 - Tame your TypeScript configs
So let's say we have something like this for the structure for your monorepo:

```monorepo/
├─ apps/
│  ├─ frontend/
│  ├─ backend/
├─ packages/
│  ├─ tsconfig/
│  ├─ config/
```
It could happen that there is a `tsconfig.json` in your `apps/frontend` and also `apps/backend` folders and they're extending a base config from `packages/tsconfig`. 

Also there could be more complex cases, so if you're curious at the end of the day how your final `tsconfig.json` will look like for a specific project you can do:

`tsc -p apps/frontend --showConfig`

This is going to print out the whole merged typescript config what the project will use.

Original [idea from here](https://mariusschulz.com/blog/the-showconfig-compiler-option-in-typescript), big shout out to Marius. 🎉

I also advise to record this into your root `package.json` as 
```"tsconfig:debug:frontend": "tsc -p apps/frontend --showConfig"```
to give your team a nifty debug script that they can rely on. 

## 3 - Ace your eslint configs
In my experience eslint configurations can blow up really quickly, especially when you're trying to make sense and merge from two different projects. 

🤔 Not sure which plugins/rules are actually being used when you run eslint?

Try this for one of your files:

```
npx eslint --print-config apps/frontend/what/ever/your/file.ts
```

This will print out all the rules and plugins being used so you can grasp what's happening under the hood.

## Summary
That's it for today, I wish you Happy debugging! 🤘
Today i found out : colorful markdown code blocks
Tags: markdown, html, design, documentation
Published: 2022-07-15 14:43:43

Markdown is neat way to write html like structured content.

Dev.to article is a markdown one one thing that took me till today is how to make my code look colorful

the syntax for a regular code block is

![code block before style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvskhkdwidxsose15p95.png)

and all we have to do to make it look less bland is add the language extension after the 3 opening backticks in this case this is c code 


![example extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouxv76a4ecv7lz6q5r2v.png)
it also applies for js,ts,....   


![code block after style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czwzrn7ka3fw0u7ak692.png)

and that's it . better looking code
The fear of merging
Tags: beginners, productivity, career, programming
Published: 2022-07-15 14:43:14

You just opened a pull request. Wrote a detailed description. Asked for reviews. The notification bell is ringing. It's your colleagues commenting "LGTM". Hit the merge button and 10 minutes later you get error notifications from your code. You broke production.

That starts a cycle with most of your code submissions. You're told by the impostor syndrome you're not qualified for the job. You think you're not as good as other software engineers. Other developers (mostly Twitter stars) seem error-proof.

Let me tell you something you already know: everybody makes mistakes. Senior engineers, junior engineers, CTOs. The difference between a good and an average professional is how you deal with the incident. Good engineers do as follow:

- Don't try to find the culprit but focus on solving the issue
- Know how to differentiate a critical from a minor problem
- Don't fear asking for help from other developers
- Warn the team as soon as they notice a production issue (even if they caused it)
- They're proactive in documenting post-mortem in written and searchable form for future reference. This includes technical details and potential business outcomes from the incident

You don't need to blame yourself. Production incidents don't happen just because of someone's code. It is a chain of causes that trigger a problem. And these causes aren't technical only. Good engineering environments do as follow:
- Strong testing culture (automated and manual)
- CI and CD tools integrated with code submissions
- Error monitoring tools with real-time notifications
- Healthy code review culture
- Good communication culture and tools
- Expect errors to happen and people to make mistakes

Organizations and teams must be expecting incidents to happen and builds a strong and healthy culture inside the engineering environment. This does not mean that incidents should happen often, but if they're happening, it's an opportunity for the organization to learn how to prepare better when it comes.
DigitalCrafts Project - Calendly Curator
Published: 2022-07-15 14:42:46

[**Calendly Curator**](https://ocampb.github.io/Calendly-Curator-Front-End-Project/welcome_page.html) is a dashboard which fetches information about scheduled Calendly Meetings and displays them in a weekly view. 


**Why create a dashboard outside of Calendly to display booked meetings?**

- **Visibility across teams** - specifically for a team member who doesn't require a paid Calendly Account and/or isn't apart of the Calendly Organization.

- **Visual alternative** to the Calendly UI for reviewing booked meetings. 



**How to Use Calendly Curator:**

1. Visit Calendly Curator: https://ocampb.github.io/Calendly-Curator-Front-End-Project/
2. Login to your Calendly account and create a [personal access token](https://calendly.com/integrations/api_webhooks).
3. Paste your personal access token into the Login Page on the Dashboard Website


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


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


I created this project during my sixth week in DigitalCraft's Web Development Course and I built it using HTML, CSS and Javascript. The scheduled events data is pulled in through Calendly's API through the user's personal access token.


I got the idea for this project during my role as an Account Executive at Calendly, where I had many conversations with customers about their love of the platform and received their feedback for ways to improve the user experience.


Thanks for reading about my project!
Align attribute in HTML
Tags: beginners, html
Published: 2022-07-15 14:37:55

An important information to the beginners!

While designing my first **HTML** website I came across that **HTML5** does not support **align**(**centre, left, right**) attribute as it is removed from the **HTML5** document. 

```
<p align = "centre"> Coderlogs </p>   // not supported format //
```
You can use the CSS text-align property to **centre** any **text** or object or **form** in HTML.

Stay tuned!
Color JS, Prisma New Releases. Summer Edition 22 - Frontend News #27
Published: 2022-07-15 14:29:37

{% youtube SKhNXcE-oZc %}
Hi! The fresh Frontend News is already on the channel! What’s in? 👇

What’s in Frontend News #27?
🟣 Color.js
🟣 Svelte 3.49.0
🟣 Prisma 4.0.0
🟣 Vue 2.7 Naruto
🟣 Bun

Enjoy, you can read the article at [Frontend House](https://frontendhouse.com/frontend-news/color-js-prisma-new-releases-summer-edition-22-frontend-news-27).
You can actually mutate imports in Javascript
Tags: javascript, webdev
Published: 2022-07-15 14:25:49

---
canonical_url: https://ogzhanolguncu.com/blog/mutable-imports
---
Recently, I've realized that you can mutate imported objects in Javascript. Interesting right? I've always thought imported objects give us fresh copies each time they are requested/accessed - apparently not.

And mutation not only impacts the file you requested the import, but mutation also happens in all the files that particular import is being used. 

E.g, you cannot expect to have the same outcome when you import a file __catList__ and mutate it in file __catListPopper__, then, import the __catList__ in the __catListLooker__. Because, now both __catList__ and __catListLooker__ share the mutated import - same reference. 

Let's elaborate.

![Mutating cat file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pulfq4mkbsln31zv8y3.png)

You can imagine this diagram as a backend application. An API endpoint imports an object and mutates it, then, maybe returns a JSON object as a result. Then, another file tries to
imports the `cat.js`, but instead of getting an array of objects with full of cats, gets an empty array as result. Why? Due to Javascript's nature, objects are not immutable by default and
imports do not restart their states after being called.

In order to understand this behaviour we need to get a level deeper. These days, we use bundlers such as Webpack or SWC to run and customize our codes. What they do is, they boil down all the code
into a single file and let them share the same/common lexical scope - so we don't have to download each file individually when we requested a website. Let's try to reproduce the scenario above.


![Bundling them together](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y62bh6ls3kflemoeo31d.png)

Even though we think we work in different files, in reality we are actually working in a single file at the end. But, preventing this behaviour is actually pretty easy.


![Bundling them together](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3njolas0h47uj2t2hcf.png)

As you can see once we copied the `CatList` into different variable, `console.log` and `pop()`, they both reference the different objects.

```javascript
var n = [
      { name: "Cat1" },
      { name: "Cat2" },
      { name: "Cat3" },
      { name: "Cat4" },
    ];
    //function that copies catlist into some other variable.
    console.log(n);
    a.pop(), a.pop(), a.pop(), a.pop();
```

We successfully prevented the mutation of an object.

## Conclusion

It's important to keep the code as mutation free as possible to get rid of those unwanted behaviours. With a simple copy, you can save yourself from hours of working.
So, new time think twice while importing and mutating objects. Stay mutation free!
AWS Artifact !
Tags: aws, tutorial, webdev, cloud
Published: 2022-07-15 14:03:44

## **Introduction**
AWS Artifact is a self service which anyone with AWS account can access and use it for free, it provides AWS customers to access compliance documentation and agreements on demand for free. It is like a portfolio for AWS reports which we can see and read about it in details. Even all IAM users with admin permissions can access this service and get to know more about AWS compliance and agreements.

All the agreements found here will be of two types

## _Active_ 
– Agreements which are signed by users and are currently going on.

## _Inactive_ 
– These are agreements which are not accepted by the user or user has terminated these agreements.

AWS root account has all the permissions to access any kind of document through this service, for IAM users we have an option to use IAM policies to give access to certain documents to certain IAM users according to their authority and requirement.

For example if there is an audit needed and our auditors need access to certain documents needed for the audit, we can create IAM user and give it to access certain types of documents only.

## How to access AWS Artifact?
We simply need to go to our AWS account and type “artifact” in the AWS service search option and select Artifact from the list.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3shl0pn76bpyj5dm1xb.png)

## How to download reports?
On the current AWS service console, we will see these two buttons, one is to view agreements and one is to view reports, click on “View reports”.

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

We need to select the document which we want to download and then click on “Download report” button.

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

## How to accept agreements?
Select “View agreements” which is on the home page of AWS artifact service then select the agreement which you want to accept and click on “Accept agreement” button on the page.


**## Conclusion**
Overall AWS Artifact is a great service provided by AWS so their users can get to know them more and evaluate them.
Follow Friday: Git Edition (15 July 2022)
Tags: watercooler, meta, git, github
Published: 2022-07-15 13:50:06

---
title: Follow Friday: Git Edition (15 July 2022)
published: true
description: 
series: Follow Friday
tags: watercooler, meta, git, Github
---

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

This week we launched a new Twitter account, [@TheGitDev](https://twitter.com/thegitdev), to share our favorite Git content straight to your Twitter feed. That’s because we have so many excellent DEV writers sharing their tips and tricks for wrangling your favorite version control system.

So, devs: who are your favorite DEV community members writing about Git?

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow for Git goodies (and letting us know why you love their posts!) ⤵️
What is AWS ??
Tags: aws, beginners, codenewbie, webdev
Published: 2022-07-15 13:39:09

_**What is AWS?🤔**_

Hey!
It's Shriya. It is 2022 and AWS is getting so popular nowadays, but still some of the College and University Students like me🌚 still don't know that "What is AWS (Amazon Web Services)"? So let's explore the Basic Definition of AWS and why it is getting so popular nowadays.
Now here comes the Definition from Google and other sources: -
"AWS provides servers, storage, networking, remote computing, email, mobile development, and security."

Still doesn't get it🤔? The AWS is basically a cloud provider–from infrastructure technologies like computing, storage, and databases–to emerging technologies, such as ML and AI, data lakes and analytics, and the IoT.
AWS and some of its most used technologies, But???
There are other Cloud infrastructure technologies too like Azure, Google Cloud, IBM Cloud, Oracle Cloud, and many more…
So what makes AWS so popular? Following are some of the famous reasons for choosing AWS:-
Large Community
AWS has the largest community, with more than a million active users and thousand of partners worldwide. People across the world use AWS from every country and industry. Whether it is a Tech Giant or a Small Startup, Programmers and Cloud Architects love to play with AWS technologies and services.
Secure
AWS is considered to have one of the most secured and flexible cloud computing environments today. AWS supports 80+ security standards and compliance certifications, more than 100 AWS services that are storing customer data offer the ability to encrypt that data, and all of this is backed by a deep set of cloud security tools, with 200+ security, compliance, and governance services and features.

THE END
Let me know if you liked the post😊.
**Thank you**
Information Flow in React.js
Tags: javascript, react, webdev, beginners
Published: 2022-07-15 12:53:10

**Why is information flow in React.js different from JavaScript?**
    In traditional JS programming a single page document was used to accomplish all actions. This means scope of variables is the only barrier for communication from function to function. React.js allows the use of components which significantly increase the organization and readability of the JavaScript in the application. React.js grants the ability to make a component hierarchy or tree of components. This tree of components need a way of communicating with each other.

**How to pass information down the tree**
    Information passes from the parent component to child component with the use of props. 
These props have to be passed to child:

```
import React from "react"
import Child from "./Child"

function Parent(){
const x="this is from my parent"
return(
   <Child x={x}/>
)
}

export default Parent;
```
Then, accepted by the child:

```
import React from "react"

function Child({x}){
return(
   console.log(x)
)
}

export default Child;
```
The console.log in this Child component would output the string assigned to x from the parent function.

**How to pass information back up the tree**
    Passing information back up the tree otherwise known as inverse data flow gets a little more complicated. To do this a function from the parent component must be passed to the child and then called with the data needed in the parent component.

```
import React from "react"
import Child from "./Child"

function Parent(){
  function getName(nameFromChild){
    console.log(name)
  }
return(
   <Child getName={getName}/>
)
}

export default Parent;
```
Then, accepted by the child:

```
import React from "react"

function Child({getName}){
  const name="Steve"
  getName(name)
}

export default Child;
```
This will return a console.log of "Steve".

**Conclusion**
  The woes of information flow may seem daunting at first. After passing hundreds of props and callback functions up and down component trees it feels like second nature, and the gains you receive in terms of organization and readability far outweigh the slight learning curve. Thank you for reading!!!
What is your one day mobile data & speed? ( survey )
Tags: discuss, survey, newse, community
Published: 2022-07-15 13:34:42

## Guys, I need a little survey from you.

  1) Do you ever or frequently download any large files?

  2) If so what kind of file do you want it to be (ex: .zip, .mp4, or etc... ).  

  3) What is the size of the file you are downloading? (ex: 10mb, 500mb, 10gb, or much more).

  4) Do you have insufficient mobile data while downloading and the download is cancelled?  

5) What is your daily mobile data allowance?  (ex: 200mb, 1gb, or etc...).  

6) Do you think a free alternative would be better for you?  (like webtorrent with high bandwidth)

7) And last, what is your data speed?

Thanks for your response 🙂
How to apply for AWS Community Builder Program?
Tags: awscommunitybuilder, awscloud, beginners, tutorial
Published: 2022-07-15 13:32:45

**What is AWS Community Builder Program?**

The AWS Community Builders Program(CB) is a officially organized by AWS. The program supports AWS enthusiasts and other community members by providing:

1. Technical mentorship
2. Service reviews
3. Exclusive networking opportunities
4. AWS Branded Swags and more...

**Criteria**:

Anyone who is meeting below mention criteria can apply

Any individual who is 18 years or older and passionate about building on AWS.
AWS Community Builders program seeks applicants from all regions, demographics, and underrepresented communities.
The AWS Community Builders program is for technical builders who create community contributions such as written/video content (blog posts, videos, webinars, tutorials, etc.) or organize technical communities that help other AWS builders to learn and build on AWS.

**Categories**:

You have to priorities two categories among these

- Machine Learning
- Mobile and Web Apps
- Storage
- Containers
- Developer Tools
- Management, Governance and Migration
- Serverless
- Gravitron / Arm Development
- Data (Databases, Analytics, Blockchain)
- Security, Identity & Compliance
- Game Tech
- Networking and Content Delivery

**What you will get after becoming a CB?**

- AWS community builder branded Swag!
- AWS Promotional Credits
- Online training academy subscription
- Certification Exam Voucher
- AWS User Groups / Community help
- Mentoring / Coaching / Career Opportunities
- Exclusive Events
- AWS Service Previews
- 3rd Party Benefits
- Network of like minded people