teleren/devto huggingface dataset:
Our Chrome Extension is Back Online! (After Getting Taken Down by Google)
Published: 2021-08-24 04:08:21

Firstly, I’d like to thank everyone who has commented and reached out to me after reading my first post. It has been a hectic two weeks, and it’s only now that I’m able to sit down and write an update. With great relief, I can finally say that our chrome extension, [LinkedIn Hashtag Analytics](https://filtpod.com/resources/linkedin-hashtag-chrome-extension/), is finally reinstated on the Chrome Web Store.

For those who have not read my previous post, our free tool was taken down from the web store two weeks ago after a competitor filed a complaint against us. Google instantly took our extension down before hearing our side of the story. For us to get our tool back online, we needed to file a counter notification and wait for 15 days.

Fifteen days is a *long* time for startups like us, but my team’s just glad we can share this tool with the dev.to community at last.

Now here is what I want to share with you today, why we built this tool and how it can also benefit the career for the people like us - developers!

From my own experience of having worked in a MNC company previously, engineers who continue to climb up the ladder are often those who communicate well with others. Those who actually climb all the way to the top, becoming CIO, CTO or CDO -- that takes more than interpersonal skills.

These engineers spend considerable time building their brand outside their organization, utilizing every opportunity they can find; this includes speaking engagements, webinars, github and even establishing a strong presence on networking platforms like LinkedIn.

In a nutshell, you need to amplify your voice so that potential employers know your existence, as well as recognize and trust your expertise. 

It’s never too late to start building your brand and networking here on dev.to as well as LinkedIn. 

If you post content on LinkedIn (or plan to do so), make sure you understand how the LinkedIn algorithm works so that people are seeing your post. Reaching a broader audience beyond your current network can be tough if you don’t have enough engagement on your posts.

This is why LinkedIn content creators use hashtags; we need them to become more discoverable by specific hashtag followers.

For those curious about the latest trending topics on LinkedIn, I thought I'd share them here:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnxxm9wqu0pkn9cvol3l.png)

And yes, the follower counts are updated (as of August 2021). LinkedIn Hashtag Analytics retrieves real-time data, so you don’t have to go researching for the latest numbers every month; all the best hashtags are at your fingertips.

Want to learn how this free Chrome extension works? Watch this [short 1-minute video](https://youtu.be/8YeInxA21B8).

Which hashtag do you use the most on your posts?
S1E1 - Instalando ZSH & ASDF en Ubuntu
Tags: spanish, ubuntu, wsl, raspberrypi4
Published: 2021-08-24 03:33:43

Hola a todos, y bienvenidos a una entrega mas, ahora en formato video y en español para su mayor comodidad. En esta ocasión comenzaremos realizando uno de mis articulos en Frances **ZSH & ASDF sur WSL2 Ubuntu** , ya que aprovechando de que obtuve una Raspberry Pi 4, aproveche para hacer este video. Espero les guste y no olviden dejar su Like & compartir para seguir trayendo mas contenido. 

{% youtube 9hGEk8Dt3p0 %}
Deep Dive into Zooming and Panning Features in the Flutter Maps
Tags: flutter, dart, webdev, mobile
Published: 2021-08-24 03:32:34

Learn how to perform zooming and panning in Syncfusion [Flutter Maps](https://www.syncfusion.com/flutter-widgets/flutter-maps) widget. 

This video explains how to use the zoomPanBehavior property of MapTileLayer and perform initial zooming, enabling double-tap zooming, setting min and max zoom levels. It also explains the zooming and panning callbacks, perform zooming programmatically on a button tap and reset zooming. Finally, you will learn how the same zoomPanBehavior property settings work in MapShapeLayer.

Documentation: https://bit.ly/3g7w8zC

API Documentation: https://bit.ly/2Qw1JBa 

Examples – GitHub: https://bit.ly/3cG5f57

{% youtube kXUnXvzHmiA %}
Supabase Storage Image Upload Tutorial Using Ionic React & Capacitor Camera
Tags: supabase, react, ionic, javascript
Published: 2021-08-24 03:30:01

This is a post to support the video I did on the same topic. The video was split into two parts, one covering setting up [Ionic Framework in ReactJS](https://ionicframework.com/docs/react) to work with the [Capacitor Camera](https://capacitorjs.com/) Plugin, and the other part was to upload the image captured from the camera to [Supabase Storage](https://supabase.io/storage). 

##The Video
{% youtube MVy46MGmfOQ %}

## Uploading the Camera Image
All of the magic happens here
```javascript
 /**
   * upload to storage bucket, convert path to blob
   * get file name from path
   * 
   * @param path
   */
  const uploadImage = async (path: string) => {
    const response = await fetch(path);
    const blob = await response.blob();

    const filename = path.substr(path.lastIndexOf("/") + 1);

    const { data, error } = await supabase.storage
      .from("image-bucket")
      .upload(`${filename}`, blob, {
        cacheControl: "3600",
        upsert: false,
      });

    if (error) alert(error?.message);

    console.log(data);

    getAllImages();
    

    return true;
  };
```
We take the `webPath` from the Capacitor Camera Plugin and use `fetch` to get a blob which we then upload to supabase.

##Downloading the Image From Supabase
What I do here is create a seperate component `RenderImage` and in the initial `useEffect` hook, I make an API call to supabase to get the publicURL of the image and set it to a local state variable, when the variable is set, the image is drawn to the screen.

```javascript
const RenderImage: React.FC<any> = ({ path }) => {
  const [publicUrl, setPublicUrl] = useState<any>("");
  useEffect(() => {
    (async () => {
      const { publicURL } = supabase.storage
        .from("image-bucket")
        .getPublicUrl(path);

      setPublicUrl(publicURL);
    })();
  },[path]);

  return <IonImg src={publicUrl} />;
};
```

##All The Rest...
the rest of the video is a more detailed explanation of the supabase api and how you need to setup the buckets for use.

###Source Code
- https://github.com/aaronksaunders/ionic-react-supabase-simple-storage
How to use a loading animation in your Vue app
Tags: vue, beginners
Published: 2021-08-24 02:35:34

## Why do we need loading animations?
Loading animations simply allow us to notify the users of an ongoing process(e.g. data retrieval, validation etc.)

You can build your own using HTML and CSS [here's the link to a W3schools tutorial](https://www.w3schools.com/howto/howto_css_loader.asp) or you can visit [Loading.io](https://loading.io/) to see a lot of cool designs.

## How do we use loaders in Vue
In this article we will set up a simple loader to run when we try to retrieve data from an API. To get started:

**1. Set up a Vue project**
Requirements for Vue CLI:
- [Node](https://nodejs.org/en/)
- An open command line terminal on your computer

To get started:
Install the Vue CLI to easily create a new Vue project from your terminal:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlvor1vvt2gjc6bv8m0g.png)

Once it has been installed, enter the code below to create a new vue project:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zaq7wh4lqh73cpai9426.png)
*To see how to setup a Vue CLI project, click [here](https://cli.vuejs.org/guide/creating-a-project.html#vue-create)*
 
  
**2. Set up a simple Vue file**
The basic Vue SFC(Single File Component) has three sections 
`<template></template>` - This holds your HTML
`<script></script>` - This holds your Javascript
`<style></style>` - This holds your css

Here is a sample Vue file:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/um2mcxrbwb7t2ks2thdr.png)
 

**3. Set up the HTML container for the data**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltsa41c7kt95n3iwdpmm.png)

**4. Set up the CSS and layout for the container**
I've set up a simple flexbox with centered content:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmqvj0k7z7a4wugyflin.png)

**5. Setting up data retrieval and loading animation**
We can have a sample loading animation [here](https://loading.io/spinner/disk/-wordpress-disk-ball-circle-round-rotate):
This is done in the JavaScript section and we will be using [NBA boxscores](https://any-api.com/nba_com/nba_com/console/_boxscore/GET). Here's how we'll do it:
- Create data object and set loading to true
- Add a method to get data to the methods list
-  On created, fetch the data, append to the HTML component and set loading to false to disable loading animation

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


**6. Finally reference the updated data in the HTML**
All together now:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oveh2kmj58546jy3p2xa.png)
 
That's it! Now when you try to retrieve data from the endpoint, the loading animation will show first for better UX.
O que é e para que serve CQRS
Published: 2021-08-24 02:11:45

 O **C**omand **Q**uery **R**esponsability **S**egregation (Separação das Operações de Comando e de Consulta, em português), como dito por [Greg Young](http://codebetter.com/gregyoung/2010/02/16/cqrs-task-based-uis-event-sourcing-agh/), é um padrão onde ocorre a criação de dois modelos que previamente era um. Essa separação ocorre em contextos em que os métodos podem ser comandos (onde há escrita) ou leitura (consultas). 

## Exemplo

Considere o seguinte serviço e seus métodos:

```
CustomerService

void MakeCustomerPreferred(CustomerId)
Customer GetCustomer(CustomerId)
CustomerSet GetCustomersWithName(Name)
CustomerSet GetPreferredCustomers()
void ChangeCustomerLocale(CustomerId, NewLocale)
void CreateCustomer(Customer)
void EditCustomerDetails(CustomerDetails)
```
Ao aplicar o padrão CQRS teríamos dois modelos diferentes:

```
CustomerWriteService

void MakeCustomerPreferred(CustomerId)
void ChangeCustomerLocale(CustomerId, NewLocale)
void CreateCustomer(Customer)
void EditCustomerDetails(CustomerDetails)
```
```
CustomerReadService

Customer GetCustomer(CustomerId)
CustomerSet GetCustomersWithName(Name)
CustomerSet GetPreferredCustomers()
```

Ao dividir o modelo original do serviço Customer utilizando o padrão CQRS obtém-se dois novos modelos: CustomerWriteService e CustomerReadService. O modelo CustomerWriteService é responsável por alocar os comandos da aplicação, ou seja, funções que podem causar mutação na base de dados. Já o modelo CustomerReadService serve apenas para fazer consultas a base de dados. Note que ao empregar esse padrão, os modelos podem compartilhar uma mesma instância de banco de dados ou ter um próprio.

## Vantagem
 Ao aplicar o padrão CQRS muitas abordagens podem ser empregadas. Por exemplo em sistemas onde a maior parte de suas operações são de leitura ao invés de escrita, pode-se alocar mais recurso de processamento para lidar com as consultas da aplicação, eliminando concorrência entre escrita e leitura. 

Em aplicações o mesmo dado pode ter diversas apresentações, dependendo do contexto em que o usuário está. Com a criação de diferentes modelos pode-se criar uma representação para cada situação, evitando que um único modelo cresça muito e fique complexo.

## Desvantagem
 A maioria dos sistemas não necessitam de fato da aplicação do padrão CQRS o que poderia simplesmente apenas trazer mais complexidade a aplicação.
 Sistemas que utilizam da implementação de CQRS e possuem diferentes instâncias de banco de dados para seus modelos, precisa-se preocupar com [**Eventual Consistency**](https://www.allthingsdistributed.com/2008/12/eventually_consistent.html) pois torna-se necessária a garantia de consistência entre os bancos de escrita e leitura.

## Considerações finais
O padrão CQRS pode fazer com que a performance de uma aplicação aumente consideravelmente ao criarmos diferentes modelos para leitura e escrita de uma aplicação. Entretanto, sua implementação deve ser bem analisada e ponderada se os ganhos serão mais vantajosos do que a complexidade trazida, como por exemplo a necessidade de garantia de consistência entre diferentes bancos de dados.
Así puedes abreviar los imports en angular
Tags: angular, frontend, spanish
Published: 2021-08-24 01:39:18

En muchas ocasiones importando nuestros módulos o diferentes funcionalidades custom quedamos con rutas como estas: 

```jsx
import { Youtube } from '../../../core/models/youtube/youtube';
```

lo que nos ocasiona un desagrado visual y a futuro algo poco mantenible. 

Para esto utilizaremos lo denominado short links y mejoraremos la visual de nuestras importaciones, solo necesitaremos nuestro file `tsconfig.json` el cual se encuentra en la raíz de nuestro proyecto.

Sobre este empezaremos agregando el atributo `paths`  dentro de `compilerOptions`, en este crearemos un objeto json que contendrá todas las rutas a las cuales queremos acortar la importación, como resultado tendremos algo parecido a esto: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7bfihds4ga3scuoecqs.png)

Configurado la próxima vez que importemos será algo parecido a: 

```jsx
import { Youtube } from '@core/models/youtube/youtube';
```

Espero te ayudara con una mejora sobre tus proyectos actuales y próximos.

Gracias por leer.
Cloudy Thoughts
Tags: cloudskills, aws, azure, googlecloud
Published: 2021-08-24 01:21:18

As I work my way through the AWS Certified Cloud Practitioner course at A Cloud Guru, I’ve found myself reflecting on the side effects of taking this course.

I did not formally study computer science. I preceded the current proliferation of dev boot camps. For the most part, I am a self-taught software engineer. I used things like Adobe GoLive 7 to “write” my first HTML. It’s a common experience for me to be studying some tech or reading an article or something, and I suddenly realize that dots are being connected, that weren’t connected before.

This course, as with the other practitioner level courses, presents wonderful exposure to so many different technological fundamentals. Virtual private clouds. Load balancers. Auto-scaling. Fault tolerance. User management, security groups, and roles. CDNs, availability zones, and subnets. Architecture. Port management. Databases, hard-drives, servers. Bash scripting. Apache. On and on, the utilization of so many fundamental tools and tech is a deeply edifying side effect.

I keep having the somewhat deceptive appreciation of, “It’s this simple...” Prior to modern CMS platforms, I vividly remember the day I discovered how PHP could `include` repeatable elements across web pages. Orders of magnitude further, with Cloud based services, at one’s fingertips is all of this computing power. Last night, I created EC2 ( server ) and RDS ( database ) instances behind a load balancer, that programmatically grabbed WordPress, installed it, and had a fault tolerant website running in multiple availability zones in a matter of minutes, and securely so. And then I tore it down, and did it again. All the while, giggling...

As I move through this year, there are certain technologies that are becoming more and more evident as things one should have exposure to, no matter what your engineering discipline might be.  Cloud based services are one them.  If you have not yet worked with AWS, Azure, or Google Cloud Platform, the practitioner courses at ACG are super well done and highly accessible.

Have a nice, cloudy week.
How to convert an HTMLCollection object to an Array in JavaScript?
Tags: javascript
Published: 2021-08-24 00:00:00

---
  title: How to convert an HTMLCollection object to an Array in JavaScript?
  published: true
  tags: JavaScript
  date: Tue Aug 24 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-html-collection-object-to-array-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-df900a1d1e274d41e9a6a02127d42126.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-html-collection-object-to-array-javascript)
  
To convert an `HTMLCollection` object to an array, we can use the `from()` method from the global `Array` object in JavaScript.

### TL;DR

```js
// Get all the references to the elements with classname 'header'.
// The method return an HTMLCollection object.
const headers = document.getElementsByClassName("header");

// Convert HTMLCollection object to array
// using the Array.from() method
const headersArr = Array.from(headers);

console.log(headersArr); // [div.header, div.header]
```

For example, let's say we have a two `div` tags with same class name called `header` in the HTML template like this,

```html
<!-- 2 div tags with same class name -->
<div class="header">Header 1</div>
<div class="header">Header 2</div>
```

So if we were to get all the elements with the class name called `header`, we can use the `getElementsByClassName` method from the global `document` object and pass the class name as an argument to the method. In our case, the class name is `header`.

It can be done like this,

```js
// Get all the references to the elements with classname 'header'.
// The method return an HTMLCollection object.
const headers = document.getElementsByClassName("header");
```

The above method returns the references to both the `div` tags as an `HTMLCollection` object which is an array-like object but not an array.

So to convert this `HTMLCollection` object to an `array`, we can use the `Array.from()` method and pass the `HTMLCollection` object as an argument to the method.

It can be done like this,

```js
// Get all the references to the elements with classname 'header'.
// The method return an HTMLCollection object.
const headers = document.getElementsByClassName("header");

// Convert HTMLCollection object to array
// using the Array.from() method
const headersArr = Array.from(headers);

console.log(headersArr); // [div.header, div.header]
```

Now if we log the output of the `headersArr` using the `console.log()` method we can see that the `HTMLCollection` object is now converted to an `Array` in JavaScirpt 🎉.

Now we can use all the native array methods in JavaScirpt like `map()`, `forEach()`, `find()`, `filter()`, etc.

See the above code live in [JSBin](https://jsbin.com/wanoguqoci/1/edit?html,js,console,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
"DevOps" can mean anything
Tags: devops, jobtitle
Published: 2021-08-26 10:15:48

---
title: "DevOps" can mean anything
published: true
date: 2021-08-24 00:00:00 UTC
tags: devops,jobtitle
canonical_url: https://jhall.io/archive/2021/08/24/devops-can-mean-anything/
---

The [2021 State of DevOps Report](https://www2.circleci.com/2020-state-of-devops-report.html) spends a couple of pages talking about DevOps as a job or team title (see pages 12-13). And while the authors tend to agree with me (that DevOps [does not belong in a job/team title](https://jhall.io/archive/2021/02/11/devops-is-just-cooperation/)), they make one particularly interesting point:

> The role that a “DevOps team” plays can vary widely, including:
> 
> - A team with end-to-end product responsibilities (doing “Dev” and “Ops” together).
> - A team with responsibilities for supporting Dev teams with a combination of release automation, deployment pipelines, and developer tooling.
> - A team that builds the awkward things that application developers don’t want or need to care about: infrastructure, container fabrics, monitoring, and metrics.
> - A team responsible for encouraging and enabling DevOps practices across an organization.

In other words, “DevOps team” (and by exentsion, “DevOps Engineer”) is too ambiguous to be meaningful.

The report goes on to say:

> In our experience, organizations that have less ambiguous team names, with more clearly defined responsibilities, are far more likely to have a higher performing IT function.

This makes intiutive sense, too. Which team would you expect to score hire in a football match, a team described as “Sports Team” or one described as “Football Team”?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
@Transactional Rollback options in Spring Data
Tags: spring, java, all
Published: 2021-08-26 17:54:04

---
title: @Transactional Rollback options in Spring Data
published: true
date: 2021-08-24 00:00:00 UTC
tags: spring,java,all
canonical_url: http://www.initgrep.com/posts/java/spring/Spring-data-transactional-rollback
---

Transactions manage the changes that are performed in a system. The main purpose of transactions is to provide [ACID](https://en.wikipedia.org/wiki/ACID) characteristics to guarantee data validity.

Spring provides a consistent programming model for transactions. `@EnableTransactionManagement` is used to enable transaction management for the spring application. Spring boot enables it by default.

[`@Transactional`](https://docs.oracle.com/javaee/7/api/javax/transaction/Transactional.html) annotation is used to designate the transaction boundary.

- If this annotation is provided on the class then all the methods of the class have transactions enabled.
- If no annotation is provided on the class, then the individual methods will require the explicit `@Transactional` annotation - if required.

`@Transactional` annotation provides various options to control the behavior of the transaction. We will only focus on two options that help in defining the rollback behavior of the transaction.

> The default behavior of the transactions is to rollback for the runtime exceptions and the errors. You wouldn’t need to change the defaults in most of the scenarios. However, there are some cases, where you might care about whether the transaction should rollback or not.

Let’s consider the below example —

```

class ProductService{

	@Transactional
	public void processProducts(){
		
			saveAllProducts(...products); // saves the data in the database
			sendNotification();
	}

	/*
	* sendNotification throws an exception
	*/
	private void sendNotification() throws NotificationException{
		//sending the notification
	}

}

```

- `processProducts()` method supports the transaction.
- `saveAllProducts()` saves the product data in the database.
- `sendNotification()` sends the notification through some external system. It throws `NotificationException` for any failure.

This code will work just fine. The products will be saved and after that, the notifications will be sent.

**However, if the external system is down and we are unable to send the notifications, `NotificationException` will happen and the transaction will rollback all the changes. This means, due to the notification failure, we are unable to save the products in the database.**

Now, if we want to save the data _irrespective of the notification operation success or failure_. We would need to modify the default transaction rollback behavior. 

`@Transactional` annotation provides two options `dontRollbackOn` and `rollbackOn` for the same.

You can check the complete post at [here](https://www.initgrep.com/posts/java/spring/Spring-data-transactional-rollback)