teleren/devto huggingface dataset:
Using URL Query Params in Nuxt 3
Tags: nuxt, vue
Published: 2022-02-15 19:16:02

# Using URL Query Params in Nuxt 3

> This is a continuation of my previous [post](https://codybontecou.com/silently-update-url-nuxt-3.html) on how to set query parameters in Nuxt 3. We'll be continuing with the code written there so make sure you check it out.

## The problem we're solving

We left off with our URL looking like `localhost:3000/test?streamer=faker`. This is nice but contained a few cases that are less than ideal.

Because the URL parameter is being updated using our input's v-model, if the page is refreshed, we lose that local state and the value stored in `twitchStreamer`.

## Using useRoute in Nuxt

NuxtJS relies on [vue-router](https://router.vuejs.org/) for most of its routing logic.

In our example, we are using the Composition API, one of the new features built into Nuxt 3.

In order to get our route, we use bring `useRoute()` into our `setup()`. Nuxt 3 auto-imports `useRoute()` so we can chose to be explicit or implicit.

```js
setup() {
  const route = useRoute()
}
```

Having our route unlocks all of the benefits of `vue-router`, including access to our query params!

## Making the query param persist

With access to our route, we can check the query variable (what's after the = in `streamer=`) using `route.query.streamer`.

Easy!

I now use this logic alongside a [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) with the `twitchStreamer` variable.

```js
const twitchStreamer = ref(route.query.streamer ? route.query.streamer : '')
```

Now, every time the page is navigated to or refreshed, our `twitchStreamer` will check if our `route` has a streamer query parameter.

If it does, our `twitchStreamer` will contain the parameter's value. Otherwise, it'll be an empty string.

## Final code snippet

```html
<!-- pages/example.vue -->
<template>
  <input v-model="twitchStreamer" />
</template>

<script>
  setup() {
    const route = useRoute()
    const router = useRouter()
    const twitchStreamer = ref(route.query.streamer ? route.query.streamer : '')

    watch(twitchStreamer, (twitchStreamer, previous) => {
      router.push({
        path: '/test',
        query: { streamer: twitchStreamer },
      })
    })

    return { twitchStreamer }
</script>
```
Making communication easier between Developers and SEOs
Tags: webdev, beginners, seo, programming
Published: 2022-02-15 19:11:23

👋 Hey there,

Communication between developers and SEOs can sometimes be complicated.
But it does not need to be that way.

That's why I'm building seoasked.com :
➡️Free and clear SEO resources especially created for developers and IT Teams.
➡️Coming in few weeks.

In order to make the website as comprehensive as possible I would like to ask the Devs here:

- What are the common friction points that you experienced while implementing some SEO recommendations coming from an external consultant?
- Are some SEO recommendations obscure for you (why should we update canonicals, why should we implant Y features in the CMS, etc .. )?
- Any other friction point for which you would like to have a resource available on the web at anytime.

Feel free to share your experience in the comments.

And if there is an SEO resource that you would like (or would have liked) to have available on the web, feel free to let me know and I will try my best to include it on the website :)

Keep making awesome websites and apps 💎

Best,
Matthis


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f3qm4npnayjlfol7tsy.png)
GitHub - Learning Lab uma nova maneira de subir de nível
Tags: github, learning, beginners, programming
Published: 2022-02-15 19:06:50

![Github Lab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj08enihoazifbr8twad.png)
 

O GitHub é mais do que um lar para código. É um fórum para colaboração, uma sandbox para testes, uma plataforma de lançamento para implantação e, muitas vezes, uma plataforma para aprender novas habilidades. Depois de treinar milhares de pessoas para usar o Git e o GitHub, a equipe de treinamento do GitHub estabeleceu um método testado e comprovado para ajudar os novos desenvolvedores a reter mais informações e acelerar rapidamente à medida que iniciam suas jornadas de software. E agora, estamos tornando essas experiências acessíveis para desenvolvedores em todos os lugares com o GitHub Learning Lab.

Em vez de um tutorial tradicional ou webcast, o GitHub Learning Lab é um aplicativo que oferece uma experiência de aprendizado da qual você pode participar ativamente, sem sair do GitHub. Nosso bot amigável o guiará por uma série de laboratórios práticos e divertidos que fornecerão as habilidades de que você precisa rapidamente e compartilhará feedback útil ao longo do caminho.

### Como funciona?

Com o GitHub Learning Lab, você aprenderá por meio de **issues** em aberto por um bot em um repositório do GitHub. Depois de concluir as tarefas, o bot comentará seu trabalho e até revisará suas solicitações de **pull** como um colaborador do projeto faria.

Se você tiver dúvidas durante a conclusão de um curso, poderá obter respostas no Fórum da comunidade do GitHub Learning Lab. Essa é uma nova maneira de obter suporte de uma comunidade de alunos e treinadores especializados (incluindo membros da equipe de treinamento do GitHub) à medida que sua jornada avança.

### Quais conteúdos estão disponíveis?

Você encontrará 5 cursos cobrindo nossos tópicos mais populares no lançamento:

- **[Introdução ao GitHub](https://lab.github.com/githubtraining/introduction-to-github)** - Obtenha uma introdução ao fluxo de trabalho colaborativo mais comum para desenvolvedores em todo o mundo.

- **[Comunicando-se usando Markdown](https://lab.github.com/githubtraining/communicating-using-markdown)** - Aprenda a se comunicar no GitHub e além com a sintaxe simples do Markdown.

- **[GitHub Pages](https://lab.github.com/githubtraining/github-pages)** - Hospede um site ou blog diretamente do seu repositório GitHub.

- **[Movendo seu projeto para o GitHub](https://lab.github.com/githubtraining/migrating-your-repository-to-github)** - obtenha dicas para migrar seu código e colaboradores para o GitHub.

- **[Gerenciando conflitos de mesclagem](https://lab.github.com/githubtraining/managing-merge-conflicts)** - Saiba por que os conflitos de mesclagem acontecem e como corrigi-los.

Entre muitos e muitos outros cursos disponíveis, basta acessar [clicando aqui](https://lab.github.com/) para observar o que o Lab do GitHub tem a te oferecer. Então está esperando o que?

Fontes onde pesquisei esse conteúdo:

- https://lab.github.com/
Scanner Vs BufferedReader
Tags: discuss, java, programming, beginners
Published: 2022-02-15 19:03:52

##Taking Input from User
Most of the program often request for data to be processed from the user and most of the programming language if not all provides a mechanism through which a user can enter data to be processed into the computer.

For instance in **python** its done through the use of input method e.g
```
name = input("Enter name >>> ")
```
In **C Programming** scanf is used e.g,
```
char name[20];
printf("[+]Enter your name >>> ");
scanf("%s",&name);
```
##How about Java?
In Java, there are two ways of doing it.
`Scanner` and `BufferedReader` class are sources that serve as ways of reading inputs. When using scanner, it doesn't through an exception while when using Buffered reader it throws exceptions.

###Sample code for the use of the Two

####Scanner

```
import java.util.Scanner;

public class NameReader{
    public static void main(String[] args){
        int Age;
        Scanner input = new Scanner(System.in);
        System.out.print("[+]Enter your Age >>> ");
        Age = input.nextInt();
        System.out.println("Your Age is "+Age);
    }
}
```
**OutPut:**
```
[+]Enter your Age >>> 23
Your Age is 23

Process finished with exit code 0
```
####Buffered Reader

```
import java.io.BufferedReader;
import java.io.InputStreamReader;
public class AgeReader{
    public static void main(String[] args)throws Exception{
        int Age;
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        System.out.print("[+]Enter your Age >>> ");
        Age = Integer.parseInt(br.readLine());
        System.out.println("Hello your age is "+Age);
    }
}
```
**Output:**
```
[+]Enter your Age >>> 23
Hello your age is 23

Process finished with exit code 0
```
These are the two main mechanisms through which users can interact with the computer in Java.
Qdrant raises pre-seed to build the future of open-source neural search technology
Tags: news, startup
Published: 2022-02-15 18:38:23

Qdrant is a Berlin-based open-source based deep-tech start-up developing the leading neural search technology to bring applied AI solutions to the next level and make **metric learning** practical. Our flagship product - **neural search engine** provides a production-ready service with a convenient API to store, search, and manage vectors along with the additional payload. Qdrant engine is tailored to extended filtering support making it useful for all sorts of neural-network or semantic-based matching, recommendations, faceted search, etc. The area of application is quite broad and ranges from semantic search and product recommendations for e-commerce to image recognition and anomaly detection. The main focus is on processing unstructured data.

We want to announce a €2 million pre-seed round of financing from two European funds: 42CAP, an industry-specialized German fund based in Munich, and IBB Ventures, an early-stage VC fund based in Berlin, joined by several business angels with a deep know-how of the industry. With the investment, we plan to grow the community of early adopters and going to establish our technology as a standard by releasing the major version of its open-source neural search engine later this year.

Check out our GitHub repository for details: https://github.com/qdrant/qdrant
PS: [We are looking](https://qdrant.join.com) for Rust Engineers 🦀 and ML Engineers 😉
Obfuscate & Reveal text animation in React using baffle.js
Tags: react, javascript, animation
Published: 2022-02-15 18:22:53

We are going to recreate this [baffle](https://camwiegert.github.io/baffle/)

## **Lets get started**
First we will install baffle.js package by running the following command.

```
npm install --save baffle
```

**Import baffle**

```
import baffle from 'baffle';
```
Assign a specific className to the div which contains the text you want to apply the obfuscated effect.
_Here is an example:_
In this case we have assigned the class 'obfuscated' to the div.

```
<div className = "col obfuscated">
        tothemoon.
</div>
```
Use useEffect hook to start the animation.

```
useEffect(() => {
        const target = baffle('.obfuscated')
        target.set({
            characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█<░▒ ▓/░>",
            speed: 100
        })
        target.start()
        target.reveal(1000, 100)
    })
```
Replace your div class accordingly in this line.

```
const target = baffle('.obfuscated')
```
Set your animation duration and delay accordingly in the last line

```
target.reveal(duration, delay)
```
Now you are all set, and the effect should take place as soon as the page loads.
Unleashing React Synthetic Events
Tags: react, javascript
Published: 2022-02-15 18:14:21

## What are React Synthetic Events ?? 

React Synthetic Event in ReactJs, is a cross-browser wrapper around the browser’s native event. It has the same interface as the native event, so all the methods available on native events like preventDefault, etc are also available on React Events as well. 

## Working of React Synthetic Events

_Step 1:-_
React listens to every event at the document level, after receiving an event from the browser, React wraps this event with a wrapper that has the same interface as the native browser event.

![React Synthetic Events Working ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgwl5zfpqf6qedquvh3m.png)

_Step 2:-_
Once the event handler is invoked, an event handler is a method executed once an event is triggered, all the properties on this event object will be nullified, set to their empty/default states, to be ready to be reused again.

![Synthetic Events Pooling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6psham8jgu1miwy01m2.png)

## Advantages of React Synthetic Events over native Events

- Cross Browser:  It wraps the browser’s native event through nativeEvent attribute and provides a uniform API and consistent behavior on the top level across browsers

- Better performance: Events are delegated to document through bubbling.


> Note:-  Event Pooling is removed in React 17

_[Official Documentation Link](https://reactjs.org/docs/events.html)_
View AWS event bridge rules with visidata
Tags: python, cli, bash
Published: 2022-02-15 18:03:51

---
canonical_url: https://waylonwalker.com/til/aws-eventbridge-visidata/
published: true
tags:
- python
- cli
- bash
series: til
title: View AWS event bridge rules with visidata
---

Reading eventbridge rules from the command line can be a total drag, pipe it into visidata to make it a breeze.

I just love when I start thinking through how to parse a bunch of json at the command line, maybe building out my own custom cli, then the solution is as simple as piping it into visidata.  Which is a fantastic tui application that had a ton of vim-like keybindings and data features.


``` python
alias awsevents = aws events list-rules | visidata -f json
```
Part 2: Getting started with Entando
Tags: entando, beginners, kubernetes, modular
Published: 2022-02-15 17:52:10

{% youtube IRzTVVUiIxw %}

Hey there! Welcome back! In the previous blog we learned about:

* What is Entando
* What are components and business capabilities
* And the 4 essential c’s of the Application Composition Platform.

If you’re passing by this blog, make sure you’ve checked out our previous [blog](https://www.entando.com/page/en/part_1_what_is_entando?contentId=BLG5707&modelId=64) that explains What is Entando.

In this blog, we’d learn to actually, get started with the Entando Platform!

There are two types of installation, automatic and manual installation. In this blog, we’ll go through the automatic installation.

Here’s a little flow, we’ll first check if we have multipass installed, as that’s an important step of our installation process. And then, we’ll run a simple command to install our entando platform. Once that’s done, we’ll finally log in to our entando app dashboard!

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

## What is Multipass?

Multipass is a mini-cloud on your workstation using native hypervisors of all the supported platforms like Windows, macOS, and Linux. Now we’ll move on to install multipass using this command. If we have it installed, we just check the version using this command. For me, it’s installed, so I’ll go ahead and just check the version.

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

Perfect! We can see the version here. Now, we go ahead and install entando on our local machine, using this command:

```
curl -sfL https://get.entando.org | bash
```

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

This is going to take a couple of minutes, and then we’ll be done. The sequence of steps performed by the CLI also explains what the CLI does. 

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

And by the end of this, we’ll be able to see the link to our app, printed here on the console.

Once we have it, we’ll paste it on the address bar of our browser and we log in.

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

And there we go, we see our app dashboard.

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

That’s all. I hope we were able to understand the entire entando installation process. In the next blog, we’d learn to build a simple bundle using Entando ACP. Till then, you can explore more of our [blogs](https://www.entando.com/page/en/blog). Thanks for reading!
GitHub - Selecionando Imagens com base no tema
Tags: github, images, readme, tips
Published: 2022-02-15 17:25:52

![Github Working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbz29scty481guzasbex.png)
 

Como desenvolvedor, desenvolvemos projetos, escrevemos código o dia todo e temos a opção de publicá-lo no GitHub para guardar (uma espécie de backup), permitir que outras pessoas entendam e usem nosso projeto. E com isso o Markdown desempenha um papel vital na explicação do código, utilizando para descrever seus projetos, adicionar snippets de utilização entre outras coisas.

Todos vocês sabem o quanto é a mania do Dark Mode hoje em dia principalmente entre os Devs. Mas a maioria dos navegadores tem o modo light como padrão, caso você não saiba o GitHub adapta a maioria das partes do **README** de acordo com o tema escolhido seja ele *Light* ou *Dark*, mas ele não faz nada com suas imagens por padrão, ou seja se tiver uma imagem com a mesma tonalidade que a cor do Dark mode possivelmente as pessoas só irão enxergar um espaço vazio em seu **README**. 

Então tem uma solução que você pode querer utilizar para otimizar suas imagens de acordo com o tema atual do navegador da pessoa que está visualizando ou também talvez demostrar seu conhecimento acima da média da ferramenta porque não?

### Mãos a obra 

O procedimento é muito simples (é sério, não estou brincando, é realmente muito simples):

- Primeiro de tudo será necessário criarmos 2 versões separadas de suas imagens que serão utilizadas como "capa do seu repositório" (ou ícone como preferir), como por exemplo esse logo de um aviãozinho de papel que coloquei, onde a versão que está preenchida de preto será para visualizadores que estão utilizando o tema Light e o que está com o contorno em cinza bem claro será para visualizadores que estão utilizando o tema Dark:

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

- Agora vem o nosso "segredo", paara tornar uma imagem visível apenas no Dark mode, adicione `#gh-dark-mode-only` no final do URL da imagem, e para tornar uma imagem visível apenas no Light mode, adicione `#gh-light-mode-only`, como exemplificado logo abaixo:

```markdown
https://user-images.githubusercontent.com/60971382/154115099-ad024ae0-95ed-4f77-9e08-6c724abb6b08.png#gh-dark-mode-only

https://user-images.githubusercontent.com/60971382/154115268-8bfc611f-e3a8-4078-b5c0-20a2bd4de0b7.png#gh-light-mode-only
```

É isso, agora nossa variante Dark mode da Imagem só será visível no Dark mode e a variante Light mode só será visível no Light mode 
simples assim.

Fontes onde pesquisei esse conteúdo:

- https://github.com/settings/appearance
- https://docs.github.com/pt/account-and-profile/setting-up-and-managing-your-github-user-account/managing-user-account-settings/managing-your-theme-settings
CSS Positioning: Beginner Intro to CSS Positioning
Tags: webdev, beginners, css, tutorial
Published: 2022-02-15 17:25:23

## What is CSS positioning?

CSS position is the location where an element will be placed in a document. Using the top, bottom, right, and left attributes, you can specify the exact position of an element. 

## Types of CSS positions 

There are five CSS positioning types:

- 	Static 

- 	Relative

- Absolute 

- Fixed

- Sticky 

Let’s look at each.

**Static Positioning**

This is the default positioning of elements in a document. It positions them from top to bottom. 

![CSS positions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uktwy0qnmb47a7a2dui.png)

You can also use it to reset the position of an element that has a positioning you don’t need. It neither affects the parent nor the surrounding elements.

Here, _Child1_ assumes a static position.

{% codepen https://codepen.io/samlancoder/pen/JjOrmyx %}


**Relative positioning**

When an element assumes this position, it is placed relative to its initial position. However, should you use it and not indicate the top, right, left, or bottom coordinates, it will assume a static position. 

If you give it an attribute of left: 50px, it will move 50px from the left.
 
Here, _Child1_ has a relative position with the left set to 50px.
{%codepen https://codepen.io/samlancoder/pen/RwjLeLN %}

Besides, a parent with a relative positioning allows you to absolutely position child elements within it. As such, you can position the elements anyhow you want.

**Absolute positioning**

Yet another powerful CSS positioning type that allows you to position elements where you want them. 

It allows you to ignore the normal document flow by setting the top, right, bottom, and left attributes. 

The values have to be relative to the parent element with relative positioning.

If there lacks a parent, the element will position itself relative to the HTML document. This position does not affect adjacent elements.

All the four child elements have different absolute positions.

{% codepen https://codepen.io/samlancoder/pen/yLPzRpp %}

**Fixed positioning**

As the name suggests, the element is fixed to its position when you scroll the page. 

That said, it assumes an absolute position allowing you to set the top, bottom, left, and right attributes. 

Remember the element is positioned relative to the viewport. 

The _Nav_ has a fixed position.

{% codepen https://codepen.io/samlancoder/pen/jOaGJaQ %}

**Sticky positioning**

Like the static position, sticky positioning positions elements according to normal document flow. 

While fancy, not all browsers support it. As you scroll through the page, the element assumes a relative position until the viewport location reaches the specified point. 

For example, top: 0.

Here, the _home_ section is sticky.
{% codepen https://codepen.io/samlancoder/pen/WNXZWNW %}
The ultimate tech stack for your portfolio project
Published: 2022-02-15 17:19:59

Is the one you already know.

## That's it
I made this one short to emphasize the message. Now, time for you to to go out there and **create amazing stuff**!

If you found this insightful, you can join [the newsletter](https://thefreelancechoice.com/casestudies) or hit me up on [twitter](https://twitter.com/CebriaGabriel). I send weekly emails with top lessons to help you become a better and happier freelancer. 

Peace!
Gabri