teleren/devto huggingface dataset:
Sync Repos beetwen Github & Gitlab
Tags: git, sync, gitlab, github
Published: 2023-04-17 18:21:56

I'm been using Gitlab since January 17, 2016 and I'm very happy with this tool for years was my main repository of code. But now I have some of repositories in Github and I want to sync them with Gitlab, because I want that Gitlab to be a source of truth

I research a little bit and I found this [repo](https://github.com/wangchucheng/git-repo-sync) that show me how I can do it.
<!--more-->
First, we need to look at process of sync:

![Flow of sync](https://carloslatorre.net/images/github-sync-gitlab.png)

We need to start creating workflow file into your repo in Github, you can find the file in this [link](https://github.com/carbans/dotfiles/blob/master/.github/workflows/publishGitlab.yaml)

```yaml
name: GitlabSync

on:
  - push
  - delete

jobs:
  sync:
    runs-on: ubuntu-latest
    name: Git Repo Sync
    steps:
    - uses: actions/checkout@v3
      with:
        fetch-depth: 0
    - uses: wangchucheng/git-repo-sync@v0.1.0
      with:
        # Such as https://github.com/wangchucheng/git-repo-sync.git
        target-url: ${{ secrets.TARGET_URL }}
        # Such as wangchucheng
        target-username: ${{ secrets.TARGET_USERNAME }}
          # You can store token in your project's 'Setting > Secrets' and reference the name here. Such as ${{ secrets.ACCESS\_TOKEN }}
        target-token: ${{ secrets.TARGET_TOKEN }}
```

As you can see we need to create 3 secrets to use this workflow:

- TARGET_URL => https://gitlab.com/username/test.git
- TARGET_USERNAME => your username in Gitlab
- TARGET_TOKEN => Access token of your repo settings in Gitlab

Once you create the Token into Gitlab you need to add secrets into Github repository. To do these you need to go to Settings > Secrets and add the secrets.

These not it's the best way to do it, but it's a good way to start and simple way to do it and little maintenance.
How to accelerate the training of junior devs who work as devs Part 1 - THE FEAR
Tags: beginners, mentor, devland, junior
Published: 2023-04-17 20:05:19



This is an article of a series I intend to do about my journey as a techlead and mentor in a startup that seeks to train developers inside the clients with high performance and to question the dogmas of the tech area.

Hello, my name is Paulo. I have been working for 9 years as a software engineer and today I am taking on the new challenge of being a guide for future programmers.

Before talking about what works and what does not work in the formation of a junior developer, the first point that I mapped out and want to share with you is **not technical but has to do with the emotional**.

The beginning and specially the first job as a developer has an extremely heavy load in relation to pressure and doubts.

Will I be able to deliver the task?

Will I be able to do it?

And if I can't, will I be fired?

There are so many questions going through your head that it creates a very bad creative and productive environment.

`I have a terrible example to share, but I always laugh when I talk about it.`

Imagine that you are a lion, the king (you have a lot of potential).

![https://media4.giphy.com/media/553vlRAc1XZTVlAk3L/giphy.gif?cid=ecf05e4739fxh34sb0ahk9pwxvc3tlkr4xcth7zy194f2hav&rid=giphy.gif&ct=g](https://media4.giphy.com/media/553vlRAc1XZTVlAk3L/giphy.gif?cid=ecf05e4739fxh34sb0ahk9pwxvc3tlkr4xcth7zy194f2hav&rid=giphy.gif&ct=g)

but your fear turns you into a kitten (fear creates giant barriers).

![https://media3.giphy.com/media/j6Uls25PT5Q4g/giphy.gif?cid=ecf05e47im7kdjnqvrwoqyfjjqq3n1u5xqvw2zhhaeoc6fqq&rid=giphy.gif&ct=g]
(https://media3.giphy.com/media/j6Uls25PT5Q4g/giphy.gif?cid=ecf05e47im7kdjnqvrwoqyfjjqq3n1u5xqvw2zhhaeoc6fqq&rid=giphy.gif&ct=g)

I know it's really bad, but it makes sense.

The impetus to try, courage, persist and triumph is gone.

## Eliminate the fear.

It's okay if you don't have time, if you make a mistake it's part of the process, learn from your mistake ALWAYS.

## Here are some tips on how to do this.

- Give real tasks and try to remove the deadline/timebox from them so the TIME factor will no longer be a variable in the learner's head
- Pair program and break complex problems into smaller problems (for example a dependency injection you can do the first time and show him the whole step by step and let him try in the future to add one more by himself)
- Create a safe environment ( Give immediate positive or negative feedbacks it doesn't matter they love to know if they are going in the right way or if they should correct the route)
- Let them have their own opinions (always ask for their opinion and create a collaborative environment for decision making and even if they choose a wrong path when possible correct them but with examples, this will make them feel part of the process)

And of course I'm open to anyone who wants to talk about it.
Join us on April 27 at our SF HQ for a free hackathon—and a chance to win up to $1,000
Tags: eventsinyourcity
Published: 2023-04-17 19:43:49

Hi all,

Join us at our San Francisco HQ on Thursday, April 27th, where you’ll spend the day connecting with other engineers while you build or contribute to an open source project that aligns with our Environmental, Social, and Governance (ESG) commitments.

Use your skills to help our planet, and you can win up to $1,000, paired with some exclusive New Relic swag. Seating is limited, so be sure to RSVP for this special event!

**[RSVP here](https://newrelic.com/events/2023-04-27/hack-for-good-sf?utm_source=devto&utm_medium=community&utm_campaign=amer-fy-24-q1-hack-for-good_external-post)** 

See you there,
Daniel
why utilities as a service model is path-breaking for software development?
Published: 2023-04-17 19:41:21

UaaS enables potential for companies to reduce costs, improve efficiency, and access the latest technology without investing in infrastructure and software. It is especially useful for small and medium-sized businesses that cannot afford to invest in expensive hardware and software. Additionally, UaaS allows companies to scale up or down quickly to meet changing business demands, making it an attractive option for organizations with fluctuating resource requirements.

What do you think?
Best Practices for Writing on DEV: Creating a Series
Tags: meta, writing, howtodevto
Published: 2023-04-17 19:34:18

Hey hey DEV Community, Sloan here!

If we haven't met, I'm pleased to make your acquaintance. I'm a moderator here on DEV, and I'm also a [Hoffmann's two-toed sloth](https://en.wikipedia.org/wiki/Hoffmann%27s_two-toed_sloth). 👋🦥

I'm here to share some tips for success when it comes to writing on DEV. If you’ve been looking to improve your technical writing skills, make the most of DEV as a blogging platform, and take your content to the next level — this series is for you!

I'll start by showing you how to make a content series on DEV. Serializing your content makes it easy for your readers to follow along through multiple steps, and it also helps you keep your content organized by theme.

DEV has two post editors: `Basic Markdown` and `Rich + Markdown`. You can set your editor type under `settings` > `customization` > `writing`. Here's how to create a series with each one.

## Creating a Series with Basic Markdown

DEV's post editor uses [Jekyll Front Matter](https://jekyllrb.com/docs/front-matter/). To create a series or add your post to an existing series, add the `series` variable to your front matter. Here's an example of what that would look like for this post:

```
---
title: Best Practices for Writing on DEV: Creating a Series
published: true
description: A post about creating a series on DEV.
tags: meta, writing
series: Best Practices for Writing on DEV
---
```

## Creating a Series with Rich + Markdown

Select the hexagon icon at the bottom of the post editor. It looks like this:


![The bottom toolbar of the DEV Rich + Markdown editor with the hexagon icon circled in red. It shows a blue rectangular "Publish" button, gray text reading "Save draft, a gray hexagon icon, and gray text reading "Revert new changes."](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xok7aqnhfr9vqbssqeiu.png)

The post options menu will open, which will allow you to [set a canonical URL](https://dev.to/maddy/how-to-add-canonical-links-on-devto-4j3h), [schedule a publication](https://dev.to/devteam/this-post-is-scheduled-for-1130am-299k), and create or continue a series.


![The post options menu, with open fields for setting a canonical URL, scheduling a publication, and creating a series. In the series box is written "Best Practices for Writing on DEV."](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zb2xxnlel0iyggynmnna.png)

Once you add your series name the first time, it will appear in the `Existing series` dropdown menu for future posts.

🚨**Note: If you've written the first entry in a series and are wondering why the series info is not showing up when viewing the post, it's because we don't actually display information about a post being part of a series until there is more than one entry in the series. Once you write your second entry in the series, the Table of Contents and title for the series should appear.**🚨

That's it! Happy series-creating. The next installment of this series will be about **formatting.**
Understanding useState and useEffect in React
Tags: webdev, javascript, beginners, react
Published: 2023-04-17 19:32:28

React hooks are a powerful way to manage state and side effects in functional components. In this post, we'll explore two of the most commonly used hooks: `useState` and `useEffect`.

First, let's start with `useState`. This hook allows us to add state to our functional components. Here's an example:

```jsx
import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
In this example, we use useState to create a count state variable and a setCount function to update the state. When the user clicks the “Increment” button, the setCount function is called with the new count value.

Next, let’s look at useEffect. This hook allows us to run side effects in our functional components. Here’s an example:

import { useState, useEffect } from 'react';

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <p>Loading...</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};
In this example, we use useEffect to fetch user data from an API when the component mounts. The second argument to useEffect is an array of dependencies. In this case, we only want to run the effect when the userId prop changes.

By using useState and useEffect, we can manage state and side effects in our functional components. Happy coding!
Introduce yourself, take 2
Tags: buildinpublic, webdev, clojure, productivity
Published: 2023-04-17 19:27:05

And hello again dev.to community!

I have no followers so I will be talking to myself most probably but anyway I think it is important for me, as a new member, to share as much as possible since the beginning of my presence here.

Recently I have started a new website, to keep track of the progress of my projects:

- tools or products
- learning new things, like programming languages, tools, recipes, whatever
- communication 

There is no clear path yet, but I'll be happy to share everything in the process, hoping to be useful for others as well as for myself.

It is all for now, if curious point your browser to https://fpsd.codes

It be great to get any kind of feedback, see you soon!
Razões para monitorar um sistema
Tags: monitoring, sre
Published: 2023-04-17 19:21:28

## Por que Monitorar?

Algumas razões porquê você deve monitorar um sistema.

### Analisar tendências de longo prazo

- Qual o tamanho do meu storage e em quanto tempo estará cheio? Qual a taxa de crescimento de acessos ao meu site?

### Comparações ao longo do tempo ou grupos de experimentos

- Minhas consultas são mais rápidas usando o banco XPTO ou o Banco XYZ? Minha aplicação está mais lenta do que na semana passada?

### Gerar Alertas

- Algo parou de funcionar e precisa ser consertado. Ou algo está preste a parar de funcionar.

### Criar dashboards

- Os dashboards devem responder a perguntas básica sobre o estado do serviço. Normalmente abordam os quatro sinais de ouro (golden signals)

### Realizar um debugging

- A latência de um serviço aumentou muito. O que mais estava ocorrendo no momento do evento?

O monitoramento também é útil para fornecer informações brutas sobre análises de negócios. Junto com os alertas permite que um sistema nos diga quando algo está quebrado, ou nos diga o que está prestes a quebrar.

## Os Quatro Sinais de Ouro

Os quatro sinais de ouro do monitoramento são: latência, tráfego, erros e saturação.

### Latência

- O tempo que se leva para atender a uma solicitação. Importante separar a latência das solicitações bem sucedidas, das solicitações com falha.

### Tráfego

- Medida de quanta demanda está sendo colocada em seu sistema (quantidade de transações, requisições, execuções...)

### Erros

- Taxa de solicitações que apresentaram falha (erros 4xx/5xx, timeout...)

### Saturação

- Uma medida da fração do sistema, enfatizando os recursos que são mais restritos. Exemplo, em um sistema com restrição de memória, mostrar a medição da memória.
- Quanto tráfego/processamento seu sistema pode lidar, antes de começar a apresentar degradação?
- As previsões de saturação iminente (espaço em disco, por exemplo) também são preocupações desse ponto.

Medir os quatros sinais dourados e gerar alertas quando um sinal apresentar problemas (ou quase problema), faz com que seu serviço esteja minimamente coberto pelo monitoramento.

_Esse texto foi adaptado do capitulo 6 - [Monitoring Distributed Systems - do livro](https://sre.google/sre-book/monitoring-distributed-systems/) - do livro Site Reliability Engineering_

Conheça também as metodologias RED e USE: [Monitoring Methodologies: RED and USE](https://thenewstack.io/?p=22690467)
Routing in React with React Router
Tags: webdev, javascript, react, beginners
Published: 2023-04-17 19:13:48

Routing is an essential part of any single-page application (SPA), and React is no exception. In this post, we'll explore how to implement routing in a React app using the popular `react-router` library.

First, let's start by installing `react-router-dom`:

```sh
npm install react-router-dom
Next, we’ll need to wrap our app in a BrowserRouter component and define our routes using the Route component:

import { BrowserRouter, Route } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </BrowserRouter>
);
Each Route component defines a path and a component to render when the user navigates to that path. In the example above, when the user navigates to the root path (/), the Home component will be rendered. When the user navigates to /about, the About component will be rendered, and so on.

We can also use the Link component to create links between pages in our app:

import { Link } from 'react-router-dom';

const Navigation = () => (
  <nav>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
  </nav>
);
By using react-router, we can easily implement routing in our React app. Happy coding!
Efficiently Rendering Lists in React
Tags: webdev, javascript, react
Published: 2023-04-17 18:56:18

Rendering large lists of data can be a challenge in any front-end framework, and React is no exception. In this post, we'll explore some techniques for efficiently rendering lists in React.

First, let's start with the basics. When rendering a list of items in React, it's important to include a `key` prop on each list item. This helps React keep track of which items have changed and only re-render those items. The `key` prop should be a unique identifier for each item in the list.

```jsx
const MyList = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);
Another technique for improving the performance of list rendering is to use virtualization. This involves only rendering the visible items in the list and dynamically updating the list as the user scrolls. There are several libraries available that can help with this, such as react-virtualized and react-window.

Finally, it’s important to consider the cost of re-rendering the entire list when only a few items have changed. One way to avoid this is to use React.memo to prevent unnecessary re-renders of list items.

const MyListItem = React.memo(({ item }) => (
  <li>{item.name}</li>
));

const MyList = ({ items }) => (
  <ul>
    {items.map(item => (
      <MyListItem key={item.id} item={item} />
    ))}
  </ul>
);
By using these techniques, we can improve the performance of rendering large lists in React. Happy coding!
Design System vs Style Guide: O que difere um do outro?
Tags: react, reactnative, mobile, frontend
Published: 2023-04-17 18:29:59

Nos últimos anos, tem havido uma mudança significativa no mundo do design em relação à maneira como as equipes criam e gerenciam estilos visuais e padrões de design. Design systems e style guides são dois termos frequentemente usados ​​neste contexto, mas muitas vezes são confundidos ou usados ​​de forma intercambiável. Neste artigo, exploraremos as diferenças entre design systems e style guides e como eles se complementam.

**O que é um style guide? -**

Um style guide é um conjunto de diretrizes de design que define como uma marca deve ser representada visualmente. Ele abrange as diretrizes para o uso de elementos de design, como cores, tipografia, ícones, gráficos, entre outros. O style guide ajuda a garantir que todos os elementos visuais da marca estejam consistentes e alinhados com os valores e objetivos da empresa.

Embora um style guide seja útil para garantir a consistência visual da marca, ele pode não ser suficiente para atender às necessidades de design de uma equipe mais ampla. Isso ocorre porque um style guide é geralmente focado em elementos de design específicos e pode não fornecer informações suficientes para ajudar as equipes a criar experiências de usuário coerentes em diferentes plataformas e dispositivos.

**O que é um design system? -**

Um design system é um conjunto de padrões de design, componentes, diretrizes e ferramentas que são usados ​​para criar uma experiência de usuário consistente em todos os produtos e plataformas de uma empresa. Um design system é uma coleção de ativos reutilizáveis ​​que as equipes de design e desenvolvimento podem usar para criar e manter consistentemente a marca e a identidade visual da empresa.

Ao contrário de um style guide, um design system inclui elementos de design, como padrões de cores, tipografia, ícones e componentes de interface do usuário, mas também inclui uma documentação mais abrangente e ferramentas para ajudar as equipes a trabalhar de maneira mais eficiente e colaborativa.

**Diferenciando Style Guide e Design system -**

A principal diferença entre um style guide e um design system é o escopo. Enquanto um style guide é uma ferramenta para garantir a consistência visual da marca, um design system é um conjunto mais amplo de padrões de design, componentes e diretrizes que podem ser usados ​​para criar experiências de usuário coerentes em diferentes plataformas e dispositivos.

Outra diferença importante é que um design system é uma ferramenta para colaboração. Ao fornecer documentação abrangente e ferramentas para ajudar as equipes a trabalhar juntas de forma mais eficiente, um design system pode ajudar a garantir que todas as equipes estejam alinhadas na criação de experiências de usuário consistentes.

Espero que esse artigo tenha te ajudado a entender a diferença entre uma e outra, e também aprender a respeito de Style Guide e Design Sistem. Obrigado por ler!!!
PlantUML meets OpenAI on iPad
Tags: plantuml, openai, ipad, gpt3
Published: 2023-04-17 18:19:07


## <u>ChatGPT</u> and the rise of [AI] for everyone

Currently after that [ChatGPT] hase been unveiled to the world seems that nothing has more sense without an integration with the artificial intelligence ([AI])

Someone are worried about [AI] domination and they would want suspend its wide usage, others instead try to use it to provide the next generation of services and tools.

### <u>self-pilot</u> vs <u>co-pilot</u>

I think that stopping the development of artificial intelligence will be difficult, but we need a sort of [AI] governance, my opinion is:

> the [AI] must not be used in **self-pilot** mode, rather it should be used in **co-pilot** mode in which the human brain is always involved in the final decisions.

Using [AI] to help work amplifying your effectiveness, could be one of the main goals of the next future for  services and tools developers, so the challenge should be to identify the possibly use cases allowing to express the power of the cooperation with Artificial Intelligencex.

## <u>PlantUML</u> as an [AI] use case

So i've embraced this challenge trying to enhance my "[PlantUML App fo iPad][PlantUMLapp]" to give the possibility to create and/or update [PlantUML] diagrams using [AI].

> For who doesn't know [PlantUML] it is a tool belong to **diagram-as-code** category that is an **open-source tool allowing users to create diagrams from a plain text language**.

I've started with an experimental branch using [OpenAI] api through the swift package [OpenAIKit] with the  "**Text-Davinci-Edit-001**" Model and **honestly I was really surprised by the Incredible results obtained** 😲

## Conclusion

The new release of the [PlantUML App fo iPad][PlantUMLapp] with [AI] integration is still in development but I couldn't wait to share with you the first amazing outcomes. for this reason, I've realized a short [video] that contains a simple but meaningful use case 

[![IMAGE_ALT](https://img.youtube.com/vi/4FiPYPe1VsY/0.jpg)](https://youtu.be/4FiPYPe1VsY)

Please take a look 👀 and let me know. In the meanwhile, ... enjoy the [AI]🧐👋 

[ChatGPT]: https://openai.com/blog/chatgpt
[AI]: https://en.wikipedia.org/wiki/Artificial_intelligence
[plantUML]: https://plantuml.com
[PlantUMLapp]: https://apps.apple.com/us/app/plantuml-app/id6444164984
[OpenAI]: https://openai.com
[OpenAIKit]: https://github.com/marcodotio/OpenAIKit.git
[video]:  https://youtu.be/4FiPYPe1VsY
Animation -23 : Finger tap loading animation
Tags: css, design, animation, beginners
Published: 2023-04-17 17:56:21

Free CSS Loading Animation for your website 

#### Finger tap loading animation

---

{% youtube MYOz7haeJ2A %}

 ---
### [Source code](https://democoding.netlify.app/loaders/finger-tap-loading-animation)


---

## For more information
 

1. Subscribe my Youtube Channel 
[https://www.youtube.com/@democode](https://www.youtube.com/@democode) 

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Follow me on Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

 
---
---

{% twitter 1642235382074064896 %}