teleren/devto huggingface dataset:
Coding Shorts: Nested Routing in Vue.js
Tags: vue, javascript, typescript
Published: 2022-07-17 20:33:50

---
title: Coding Shorts: Nested Routing in Vue.js
published: true
date: 2022-07-05 00:00:00 UTC
tags: 
  - vue
  - vuejs
  - javascript
  - typescript
canonical_url: https://wildermuth.com/2022/07/05/coding-shorts-nested-routes-vuejs-routing/
cover_image: "https://wilderminds.blob.core.windows.net/img/2022/07/05/cover.jpg"
---

I’ve been working on a new Microservice example ([on GitHub](https://github.com/shawnwildermuth/tempus)) and I’m writing the client in Vue.js. Due to the nature of the project, I needed to use Nested Routing. I thought this might be a good topic for a Coding Short. Take a look below:

> [Watch](https://www.youtube.com/watch?8P3WChCOHw)

> [View All Rants](https://shawnl.ink/rants)  
> [Subscribe to my YouTube Channel](https://shawnl.ink/yt)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
React: introduction to Redux Toolkit (2022) - State Management Strategies in React - Pt #3
Published: 2022-07-04 23:58:18

This video is completely dedicated to Redux, Redux Toolkit and Redux Developer Tools.
At the end of the video you can also find a comparison between several techniques and state managers.

## WHAT IS REDUX?
Redux is one of the oldest state manager for React and one of the most used library in enterprise applications.We can also say that is a pattern since it provides several rules to create your architectures
The main advantage is that you can easily split your user interface from the business logic, and each part of this logic is defined by a specific element: actions, store, selectors, middleware and so on.

Furthermore I love Redux Developer Tools, an amazing browser extension to debug your Redux application. I couldn't live without it anymore 😅

---

### TOPICS:
00:00 Introduction to Redux Toolkit
02:00 Configure the Store
02:28 Actions
04:52 Selectors
05:51 Middlewares
06:52 Advantages
07:29 Redux Developer Tools
08:56 State Managers / Comparison 

---
🔗  Follow me on:

* [YouTube](https://www.youtube.com/c/FabioBiondi)
* [LinkedIn](https://www.linkedin.com/in/fabiobiondi)
* [Twitch](https://www.twitch.tv/fabio_biondi)
* [Twitter](https://www.twitch.tv/fabio_biondi)
Day 86: Heroku again Urgh
Published: 2022-07-04 23:49:33

Hi!
Heroku will always come back to haunt me with it's errors. today I had to set up a CD again with GitHub actions and until now it's giving me errors I guess is because I procrastinated on the series about Heroku hahaha :) currently I'm too tired to be debugging so I will diving into it tomorrow 
so tired... have to go...

signing off...
nodejs exec(``) runs commands in different shell
Tags: help
Published: 2022-07-04 23:41:44

What is your question/issue (provide as much detail as possible)?
- For example, when running exec(`echo $SHELL`), I get 'bin/zsh' which is what I am also using on my terminal. However, when running different commands like exec(`echo $SHELL`), I keep getting an error saying that "Error: Command failed: tree /bin/sh: tree: command not found"

What technologies are you using?
- Running shell commands with nodejs v12 exec() on WebStorm

What were you expecting to happen?
- I would like to run shell commands using exec()

What is actually happening?
- error says "Error: Command failed: tree /bin/sh: tree: command not found" as if I am trying to run the command in /bin/sh

What have you already tried/thought about?
- I ran exec(``, {shell: '/bin/zsh'}, () => {}), but it keeps saying that the command is not found

What errors are you getting?
- error says "Error: Command failed: tree /bin/sh: tree: command not found" as if I am trying to run the command in /bin/sh
React: Zustand, Valtio and Jotai/Recoil - State Management Strategies in React - Pt #2
Published: 2022-07-04 23:40:32

In the previous video we have analyzed a lot of functionalities provided by the React library.
And as we have seen, they are often useful for managing the local state of a component and its direct children.

In this video we’ll see some of the most famous state managers (Zustand, Valtio, Jotai / Recoil) for the global state management, useful for example to share the state across components on different branches of the application or  when we use a router and we need to share something between several pages.


### TOPICS:
00:00 Introduction
01:24 Zustand
03:25 Valtio
04:42 Jotai / Recoil


---
🔗  Follow me on:

* [YouTube](https://www.youtube.com/c/FabioBiondi)
* [LinkedIn](https://www.linkedin.com/in/fabiobiondi)
* [Twitch](https://www.twitch.tv/fabio_biondi)
* [Twitter](https://www.twitch.tv/fabio_biondi)
React: composition vs props, useState, useReducer, context - State Management Strategies in React #1
Published: 2022-07-04 23:40:15

In many blogs, on twitter and communities, discussions about the best state management techniques in React are very frequent.
For this reason I decided to prepare this video by creating a short guide to analyze the most common strategies for local and global state management in React applications.

### TOPICS:
00:00 Introduction
00:53 Drilling Props
01:49 Composition
02:47 useReducer
03:57 Context
05:36 multiple Context
06:24 nested Context & useReducer


---
🔗  Follow me on:

* [YouTube](https://www.youtube.com/c/FabioBiondi)
* [LinkedIn](https://www.linkedin.com/in/fabiobiondi)
* [Twitch](https://www.twitch.tv/fabio_biondi)
* [Twitter](https://www.twitch.tv/fabio_biondi)
Identifying HTTP request
Published: 2022-07-04 22:29:07

http://www.domain.com:12345/page101?t=win&s=chess#para5 these would be:

- Scheme: http
- Authority: www.domain.com:12345
- User Information: not present
- Host: www.domain.com
- Port: 12345
- Path: /page101
- Query String: t=win&s=chess
- Fragment: para5


QueryString also called URL parameters or URL query parameters

It refers to the portion of the URL that comes after a question mark (?) and consist of a key and a value, separated by an equal sign (=),  multiple parameters are each then separated by an ampersand (&)

? : query string begins
= : value separator
& : parameter separator



for example:

```
https//www.domain.com/page?key1=value1&key2=value2 

```
⚛ React Portfolio
Tags: react, beginners, javascript, spanish
Published: 2022-07-04 22:07:21

# Preview

Hello everyone, I wanted to share with you a mini portfolio that I am starting to create to practice ReactJS.
Any feedback is accepted 🤗


🔴 web: https://react-dark-portfolio-mu.vercel.app/
😽 repository: https://github.com/cutioluis/react-dark-portfolio

🌙 Dark mode
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x13ouhdbp6kpcitrr2z3.png)
-- 
⛅ Light mode

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

Give me a star ⭐
Code Benchmarking in Python using Trainer ⏱
Tags: python, benchmarking, metrics, testing
Published: 2022-07-04 21:53:00

Have you ever wanted to benchmark parts of your code but found that most libraries restrict you to the function scope level measuring (and nothing more granular)? 

We did at my workplace. To solve the issue, we leveraged the power of [Python contexts](https://docs.python.org/3/library/contextlib.html). Check out the following example to understand what I mean:

```Python
def example_func():
    with t('metric1'):
        time.sleep(0.5)

    with t('metric2'):
        time.sleep(0.3)

# ... later in the code

m = t.add_total('total').metrics
print(m)
```

prints:
```sh
{
    'metric1': {'start': 1656844808.09, 'end': 1656844808.59, 'interval': 0.5},
    'metric2': {'start': 1656844808.59, 'end': 1656844808.89, 'interval': 0.3},
    'total': {'start': 1656844808.09, 'end': 1656844808.89, 'interval': 0.8}
} 
```

Using Python contexts (the "with" statements), your benchmarking scope is not limited to whole functions (in this case, `example_func`), but you can indent specific parts of your code you'd like to measure. 

It is a short but clever piece of code I call Trainer ⏱ that is now available to anyone [on my GitHub](https://github.com/MichalMoravik/trainer) and can be installed as a package using pip. Feel free to leave your star as you might need this in the future.
An opinionated checklist on how to (re)start your presence on the Web as a (non)developer
Tags: career, beginners, internet, pizza
Published: 2022-07-04 21:33:33

TLDR; I wanted to restart my presence on the web with a new handle and establish foundations for discover-ability, this is a list of what I did.url


- Start a new `Twitter` Account
- Create a new `GitHub`/`GitLab` Account
- Create a new `dev.to` Account
- Generate a new landing page via Vercel

## Why?

I wanted to start fresh.

I wanted to be able to have a space and accounts that are unified under a common similar handle.
I wanted to be able to share/link this to my LinkedIn profule and establish a presence that could point to the "me" that is seen in professional settings.

I wanted to differentiate my presence on social platforms that was created at a different era/time in my life.

My other Twitter account was noisy and not curated or focused on software development entirely and with that came this mix.

I wanted less noise.

## How?

### Start a new `Twitter` Account
I registered a domain, `typingona.computer`, that is able to receive email and so I created a new `Twitter` account (@mannyistyping) associated with that email address that would overlap across multiple platforms.

### Create a new `GitHub`/`GitLab` Account
I went to both `GitHub` and `GitLab` and created an account using a similar username.

This provides a clean slate to start projects and also make decisions on how I want to organize them.

At the moment I am considering using a monorepo that would encompass all related projects.

### Create a new `dev.to` Account
Here we are! I am writing this on the new account to document my work and also provide a space to capture my thoughts, ideas, etc.

I am also looking at `forem` and considering registering for that as well. (I have never used `forem` and so I am unsure as how to use it!)

### Generate a new landing page via Vercel

Using the newly created GitHub account, I went and registered for [Vercel's personal account](https://vercel.com/) using the Next.js Blog Template.

http://mannyis.typingona.computer

--------------------------------

And there we are!
The beginning to establishing a new Web presence on the internet.


What I plan to do next after writing this initial post on `dev.to` is to start working on http://mannyis.typingona.computer so that I can either automate posts here to land there or posts there to land here. 

`#developer` `#newbeginnings` `#webpresence` `#startingover` `#devlife`
Color scheme generator using javascript and apis
Tags: javascript, react, css, productivity
Published: 2022-07-04 21:23:00

Hello friends!

I am presenting to you my last project that I built using, I had lot of fun building it especially the design and the apis part and here is the final result.

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

This project is very helpful to get the color scheme for your own future projects and it is not the final version I'm looking forward to add other useful features to it and I hope you can tell me you opinions and ideas I can add to develop this amazing project 🙏!

**Used technologies**
- HTML
- CSS(Media queries classes...)
- JS(Apis...)
- Figma



**My newfound knowledge**
Apis applications, fetching data from them, turn it to Json and get data from it and also the ability to read apis documentation.

**What are the challenges**
Working with data that is fetched from the api and turning it show it to the user, this part is very important and needed more focus from me and effort and I learned many things at the end.

**Source code**
You can see the source code by clicking to this link of github repository
[source code](https://github.com/mariamaitbella/color-scheme-generator)

**Preview**
Try out the project, review it, and share your thoughts in the comments area below. 🙏
[Test the colorScheme](https://mariamaitbella.github.io/color-scheme-generator/)
Cómo comprobar si un número es un cuadrado perfecto con Javascript
Tags: javascript, beginners, tutorial
Published: 2022-07-04 21:21:12

La definición de número cuadrado perfecto puede entenderse como: _un número natural entero positivo cuya raíz cuadrada es también un número natural entero positivo._

Así que tenemos: 1, 4, 9, 16, 25, 36, 49, 64, 81, 100...

¿Sabe entonces cómo validar, utilizando **Javascript**?

Para comprobarlo, podemos utilizar un algoritmo muy corto:

```javascript
const isSquare = function (n) {
    return Math.sqrt(n) % 1 === 0;
};
```

Con esta sencilla función, podemos comprobar si el número es un cuadrado perfecto o no.

Este tipo de pregunta se hace a menudo en las pruebas de las entrevistas, en los exámenes de la universidad, ¡o incluso en una situación determinada en nuestros trabajos!
Making the Properties of an Object Optional in Typescript
Tags: typescript, beginners, tutorial, learning
Published: 2022-07-04 21:10:51

In cases where you want to construct a type with all properties of another type set to optional, the `Partial<Type>` is a helpful utility.

This is pretty useful when you need the subset of a given type.

For instance,

```typescript
interface Person {
  name: string;
  age: number;
}

let persons: Person[] = [
  { name: "Abel", age: 19 },
  { name: "Drake", age: 23 },
  { name: "Lucid", age: 22 },
  { name: "Mark", age: 87 },
];

// takes an argument of 
function searchBySub(subObj: Partial<Person>) {
  return persons.find((person) => {
    return Object.keys(subObj).every((key) => {
      return person[key] === subObj[key];
    });
  });
}
```

The argument, `subOj`, can only be a sub-type of `Person`, so the code below would raise a type error

```typescript
searchBySub({ unknownProperty: "unknown" }) 
// error - Argument of type '{ unknownProperty: string }' is not
// assignable to parameter of type 'Partial<Person>' 
```
Hyperledger Fabric and MSP
Tags: beginners, blockchain, hyperledger
Published: 2022-07-04 20:56:59


> The purpose of building this blog is to write down the detailed operation history and my memo for learning the dApps and Web3 programming.

> MSP - Membership Service Provider


### What is Hyperledger Fabric?

Hyperledger Fabric, hosted by Linux Foundation, is a modular and extensible open-source system for deploying and operating permissioned and private blockchain. 

It is the first truly extensible blockchain network for distributed applications written in standard, general-purpose programming languages, without systemic dependency on a native cryptocurrency. This is a sharp contrast to existing platforms requiring domain-specific programming languages or relying on a cryptocurrency.

Hyperledger Fabric also allows component pluggability, such as membership, database, and consensus. Typically, the membership layer can authenticate users and grant them access based on their access level and the system policy.

### What is Hyperledger Fabric Identity Management?



**Identity Management** refers to the **Membership Service Provider** (MSP), which manages and authenticates all the participants/users on the network. 

If any participants connect to the network, the owner can register them on MSP, where specific information about them will be stored. After that, a certificate will be generated and issued by the MSP, which will act as their identity over the blockchain. They will need this certificate identity for all transactions on the Fabric network. So, MSP provides you access control over the permissions. 


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

For example, in the case of academic credentials, only universities and educational institutes have permission to create new transactions over the network, which means only they can upload the academic credentials over the network. 

On the other hand, students can only have the read permissions allowing them to view their educational credentials or report cards without giving them the authority to perform any functionalities over the network. 

### Benefits of Hyperledger Fabric

- _Permissioned network_

Establish decentralized trust in a network of known participants rather than an open network of anonymous participants.

- _Confidential transactions_

Expose only the data you want to share to the parties you want to share it with.

- _Pluggable architecture_

Tailor the blockchain to industry needs with a pluggable architecture rather than a one-size-fits-all approach.

- _Easy to get started_

Program smart contracts in the languages your team works in today, instead of learning custom languages and architectures.

---
#### References
https://dl.acm.org/doi/pdf/10.1145/3190508.3190538
https://www.ibm.com/topics/hyperledger
https://www.hyperledger.org/use/fabric
AWS CloudWatch — Use Cases
Tags: aws, cloudwatch, ec2, cloud
Published: 2022-07-04 20:31:38


❄️ AWS CloudWatch
CloudWatch collects monitoring and operational data in the form of logs, metrics, and events, and visualizes it using automated dashboards so you can get a unified view of your AWS resources, applications, and services that run on AWS and on premises.

📄Overview
⚜️Why AWS CloudWatch?

Amazon CloudWatch is the component of Amazon Web Services that provides real-time monitoring of AWS resources and customer applications running on Amazon infrastructure.

The following image shows the different AWS resources monitored by Amazon CloudWatch.


🔅Uses Cases:
Configure Amazon CloudWatch to send a notification when CPU utilization of an instance is greater than 1%.

👉Step 1 : Creating a CPU utilization metric
Go to Amazon CloudWatch Management Console and select metrics from the navigation pane.


👉Step 2 : Click on Metrics — All metrics.
Click on Graphed metrics.


👉Step 3: Click on Add metrics using browse or query.
Click EC2 -View automatic dashboard



👉Step 4: Creating an alarm to notify when CPU Utilization metric of the instance is greater than 1%.
Now select the Graphed Metrics option on the same page. Then set the time period according to your need. And choose an alarm icon located beside the selected instance.

Then create a Alarm.


Step 5:

Create new topic if you don’t have any existing topics.


If you want to Autoscaling according to CPU utilization.

Click Add Auto Scaling Action.


👉Step 6: Give your alarm a name and description. Set the Threshold condition.

👉Step 7:
You want AWS to send you an email notification whenever the alarm condition is satisfied. The notification is sent through Amazon SNS Topic.


👉Step 8: Congratulations, you have successfully configured Amazon CloudWatch Alarm to monitor your instance. You will receive the notification through an e-mail on the mail-id you have specified when the alarm condition is met.

🔅Use Case 2: You can log the changes in the state of an Amazon EC2 instance by using CloudWatch Events with the assistance of AWS Lambda function.

Benefits of Amazon CloudWatch
Amazon CloudWatch allows you to access all your data from a single platform. It is natively integrated with more than 70 AWS services. Vodafone company uses Amazon CloudWatch with Auto Scaling groups to monitor CPU usage and to scale from three Amazon EC2 instances to nine during peak periods automatically.

Provides real-time insights so that you can optimize operational costs and AWS resources. Kellogg company uses Amazon CloudWatch for monitoring, which helps the company make better decisions around the capacity they need, so that they can avoid wastage.

THANK YOU !!

💠Keep Learning Keep Sharing💠
[pt-BR] Quero me tornar dev, como começar?
Tags: beginners, programming, webdev
Published: 2022-07-04 19:55:01

## Intro


Com toda a certeza, essa tem sido a pergunta que eu mais venho recebendo no meu [discord](https://discord.com/channels/@thribeiro8##3386), [github](https://github.com/thribeiro8) e [linkedin](https://www.linkedin.com/in/thomasdribeiro). Por isso resolvi fazer um breve passo a passo, para ajudar você que se encontra perdido nesse mundo de dev. Antes de qualquer coisa, é necessário escolher uma área e focar seus estudos.

No que se trata de desenvolvimento, existem basicamente três caminhos para começar a jornada, são eles:


* Backend
* Frontend
* Mobile

Uma dica que vale muito é **NÃO QUEIRA SABER DE TUDO** pois na maioria das vezes isso pode ser um tiro no pé e atrapalhar mais do que ajudar, o que é crucial é ter foco e se tornar bom naquilo, porque com a experiência e situações do dia a dia, as demais tecnologias, metodologias e aprendizados vão se formando de forma gradativa.

Essa coisa de ser de cara logo um FullStack não é tão indicado porque pode confundir a cabeça de uma pessoa que não tem vivência em tech. Então o ideal é sempre pegar pequenas ideias e treinar.

## Estudos


É indicado procurar materiais que despertem a curisidade, poir um bom desenvolvedor é aquele que nunca cansa de pequisar. Então sempre que começar com alguma tecnologia, é bom dar boa uma olhada na documentação, pegar pequenos *passo a passos* e praticar como se fossem *tarefinhas de casa*.

Também o que ajudar bastante é responder questões e responder dúvidas e enquetes de outros **devs**. Isso faz com que a empolgação e espírito de aprendizado se desafie cada vez mais.


## Não procrastinar, nem tudo são flores


Com o passar do tempo, desafios maiores tendem a surgir e isso faz muitas vezes o profissional e estudante a duvidar e se estressar quando não consegue resolver algo de primeira como de costume, mas o segredo está justamente no fato de **não desistir**, quanto mais insistente e treinado você estiver, mais capaz de utilizar sua lógica de forma ágil estará.


## Algumas tecnologias para buscar...


**Backend**

* C++
* C#
* Java
* Node
* Php
* Python

**Frontend**

* Html
* Css
* Javascript
* Angular
* React
* Vue

**Mobile**

* Android
* Objective-C
* Kotlin
* Swift


## Conselhos


* Faça uma boa base, afinal antes de utilizar *bhaskara*, você precisou aprender a somar e subtrair;
* Escolha aonde você vai atuar no início (frontend, backend, mobile);
* Não pule etapas, se está difícil, volte um passo;
* Tenha foco!;
* Quebre a cabeça para resolver problemas com uma dificuldade maior a cada acerto que você tiver;
* **Certificados** são bons, mas **conhecimento** é muito melhor;
* Coloque a mão na massa;
* Busque por vagas no [linkedin](https://www.linkedin.com/);
* Estabeleça bons networkings;
* Tire dúvidas com pessoas mais experientes na área, nunca tenha vergonha ou medo de perguntar, afinal, o aprendizado é uma dádiva.



> Se prepare, pois tempo de preparação não é tempo perdido!