teleren/devto huggingface dataset:
Dear Friends, Followers, and Readers
Tags: webdev, friends, frontend, watercooler
Published: 2023-06-16 22:49:05

It has been a long minute.

A break from all things blogging, writing, and programming in general. 

I have been working on a lot of projects, some C.S. related others hobby related. 

I wrote something about all of this on a different platform. 

Sometimes we all need breaks. 

So I am writing this to you. 

[Dear Friend](https://medium.com/@aniscratch/dear-friend-ac4c3f5ebceb)
Animação de Preenchimento
Tags: codepen
Published: 2023-06-16 21:57:16

<p>O código acima implementa uma animação de barra de progresso que preenche gradualmente. Quando a página é clicada, a animação começa e uma requisição é enviada para um servidor. Após a conclusão da requisição, a resposta é processada e você pode personalizar as ações a serem realizadas com os dados recebidos.</p>

{% codepen https://codepen.io/qpjfptxi-the-encoder/pen/ZEmWOMK %}
Day 764 : Figure It Out
Tags: hiphop, code, coding, lifelongdev
Published: 2023-06-16 21:42:55

_liner notes_:
- Professional : It's Friday! We made it! haha. Today was pretty good. Helped out with some community questions. Got some clarification on some questions I had. Met with someone to talk about some demos I've been working on. I think I have a better understanding that I can make it work.

- Personal : Last night I bought some tracks on Bandcamp for the radio show and prewrote the tweets I post on Fridays. I was able to add the ability to generate credentials. I even added a check to make sure that the person is authorized to generate credentials. I started working on saving all the data to the "database".  Did some research on how to generate images on the server so that there is an image preview if you share the link to social media. Then I went to sleep.

![Trees growing out of the water in New Orleans Bayou, LA, USA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j5nr8ff43fbw1jr9sxn.jpg)

Got a new Windows laptop. It's smaller than my other one so I should be able to travel with this one since it take up less space and is lighter. I'm going to set it up this weekend. Finish putting together the radio show for tomorrow at https://kNOwBETTERHIPHOP.com . I want to complete saving to the backend and be able to pull the info to display on a page. Thinking about it, I may want to work on the image generation feature since that would also be added to the data that I want to save. I'll figure it out. Maybe I'll work on it during my study sessions on Sunday at https://untilit.works .

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube QGsy6vlH6ZU %}
Changing pod instances in Kubernetes in OKE
Tags: oracle, cloud, kubernetes, devops
Published: 2023-06-16 21:38:44

Say you followed [my instructions](https://dev.to/farisdurrani/deploying-a-react-app-to-kubernetes-on-oracles-oke-38nf) to deploy a React app to the Oracle Cloud Infrastructure (OCI) Container Engine for Kubernetes (OKE)

Now you made some changes that require you to change the OCI Compute Instances used by the pods. Some cases where this can be required is when you change the number of replicas or version of your OKE node pools. 

We assume the new OKE pods have been manually/automatically created.

When this happens, you need to update the OCI Load Balancer to use the correct Backend IP address and port in order for the load balancer to properly route external connections to the correct Compute Instance. 

## How to ensure the Load Balancer routes the traffic to the new pods

In the OCI Console, go to: 
\> Load Balancers 
\> (select your OKE Load Balancer) 
\> Backend sets
\> (select your desired set, e.g., `TCP-80`)
\> Backends

Add your new Backend IP address and Port. Select from the given list of Backends and put down the correct port number.

## Example

Say you currently have this on your `kubectl get all`:
![Screenshot of kubectl get all](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agxterp4qtlbm063cwum.png)

As you can see, I have a container running on port 80 and another in port 8000. 

In the Load Balancer page, I need to make sure the Backends are pointing to the correct Instance IP address and port numbers.

Here is the screenshot of my Load Balancer's backend set for `TCP-80`:

![Backend for TCP-80 on LB](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nunatn81psyfgxa2mp20.png)

The port number is 32577 which is equal to the port number forwarded under `service/myApp-lb`, port listed being 80:32577/TCP.

The IP address which ends in .178 meanwhile is the private IP address of the Instance running this pod, as shown in this screenshot of the Instance:

![OKE pod Instance screenshot showing private IP address ending in .178](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl7xhovfv0hb9weo43ej.png)



---

***Safe harbor statement***
The information provided on this channel/article/story is solely intended for informational purposes and cannot be used as a part of any contractual agreement. The content does not guarantee the delivery of any material, code, or functionality, and should not be the sole basis for making purchasing decisions. The postings on this site are my own and do not necessarily reflect the views or work of Oracle or Mythics, LLC.

*This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/).*
Caso de uso: initial css value
Tags: css, flexbox, webdev, portugues
Published: 2023-06-16 21:19:44

Dias atrás cá estava eu, estudando sobre _flexbox_ e acabei lendo a cerca de uma propriedade css chamada _flex_. Um possível valor que pode ser atribuído à ela seria o valor **initial**. Ele faz como se a propriedade css _flex_ estivesse utilizando seus valores default. Utilizar seus valores _default_, em outras palavras, seria como se não houvesse nenhum valor ainda atribuído para uma regra css específica, fazendo com que ela ficasse com um valor automaticamente pré-atribuído pelo próprio navegador para aquele elemento HTML.

## Glosário de termos

- **Shorthand property:** refere-se à uma regra css que possui a capacidade de abreviar múltiplas regras css (chamadas também de _longhand properties_) em uma única regra somente. Por exemplo, a propriedade flex, consegue abreviar outras três regras css, _flex-grow_, _flex-shrink_ e _flex-basis_.
- **Longhand property:** refere-se a regras css que podem ser declaradas de forma lateral, ou seja, através de outras regras css (também chamadas de _shorthand properties_).

Imagine um cenário que você tivesse que declarar uma (ou mais do que uma) de algumas das seguintes regras css em um elemento HTML, através de algum seletor css:

- flex-grow
- flex-shrink
- flex-basis

Como você faria para modificar o comportamento adquirido com essas propriedades?

Uma possível solução seria criar outro seletor css, com uma [cascading order](https://www.w3.org/TR/CSS21/cascade.html#specificity) mais alta, para que o comportamento anterior pudesse ser substituído por esse novo comportamento. Você atribuíria um novo valor para uma ou mais dessas regras css, todas elas agrupadas nesse novo seletor css.

Digamos que o comportamento desejado utilizasse valores que fossem exatamente os mesmos valores pré-estabelecidos pelo navegador, caso você não atribuísse nenhum seletor css a esse elemento HTML (como se fosse um “reset” de propriedades). Você ainda teria o trabalho de atribuir o valor a cada uma dessas regras, dentro desse novo seletor css.

Mas, e se você pudesse fazer isso utilizando apenas uma declaração de regra css? Como? Oras, utilizando o valor **initial**.

Lembra-se das propriedades conhecidas como _longhand_? Elas possuem a capacidade de abreviar diversas regras css em somente uma única regra. Utilizando o valor _initial_ em conjunto com elas, você consegue fazer tudo isso em uma única linha.

Resumidamente, **flex: initial;** faz com que **flex-grow**, **flex-shrink** e **flex-basis** fiquem automaticamente todas com o valor **initial**, ou seja:

- flex-grow: initial;
- flex-shrink: initial;
- flex-basis: initial;

Por hoje é só…
What is Optional Chaining (?.) In javaScript?
Tags: javascript, jsdaily, optionalchaining, javascriptnew
Published: 2023-06-16 21:06:34

Optional chaining is a feature that simplifies accessing nested properties or calling functions on objects that may be nullish or undefined. It allows you to avoid the common "TypeError: Cannot read property 'x' of undefined" error when accessing properties deep within an object hierarchy.

Here's an example to illustrate how optional chaining works:

```javascript
const user = {
  id: 1,
  name: 'John',
  address: {
    city: 'New York',
    street: '123 Main St'
  }
};

// Accessing nested property without optional chaining
const city = user.address.city; // 'New York'

// Accessing nested property with optional chaining
const city = user.address?.city; // 'New York'

// Accessing non-existent property with optional chaining
const country = user.address?.country; // undefined
```

In the example above, the `address` property is optional. With optional chaining (`?.`), you can safely access the `city` property of `address` even if `address` itself is `null` or `undefined`. If `address` is `null` or `undefined`, the expression will simply return `undefined`.

Optional chaining is especially useful when working with data from APIs or when dealing with complex object structures where certain properties may not always exist.

Note that optional chaining is supported in modern JavaScript environments, including most up-to-date browsers. However, if you're working in an older environment or need to support older browsers, you might need to transpile your code using a tool like Babel to ensure compatibility.
How to Restart a Kubernetes Deployment on OKE
Tags: oracle, cloud, kubernetes, devops
Published: 2023-06-16 20:45:42

Say you followed [my instructions](https://dev.to/farisdurrani/deploying-a-react-app-to-kubernetes-on-oracles-oke-38nf) to deploy a React app to Oracle Cloud's Kubernetes Engine (OKE). 

But now you've made some changes to your code and you want OKE to restart the Docker container with the latest code. 

Assuming you've pushed the latest code to the Oracle Cloud Container Registry ([see instructions here](https://dev.to/farisdurrani/pushing-docker-image-to-oracle-container-registry-5kl)) and you have local access to your OKE cluster through kubectl, we can restart the running container.

## Safe restart using rollout

This safe command will attempt to pull the latest Docker images from Container Registry and run them. On success, the old pods that run the old containers will be destroyed and replaced with the new one. On failure, the old pods remains running.

```sh
kubectl rollout restart deployment.apps/myApp
```

where:
- `deployment.apps/myApp` is the name of your app deployment which you can find using `kubectl get all`

The status of the rollout can be checked using:
```sh
kubectl rollout status deployment.apps/myApp
```
or:
```sh
kubectl get all
```

## Force restart using delete
To forcefully destroy (delete) the currently running containers and restart them using the latest images, run:

```sh
kubectl delete pod/myApp-6c789d5720-9fgia
```

where:
- `pod/myApp-6c789d4595-7hftd` is the name of the pod of your container found using `kubectl get all`.

You will have to run this command for all the pods of the running application deployment. Kubernetes is designed to manage multiple running replicas of the same application images, depending on the number of `replicas` you put in `deployment.yaml`.

You can also elect to delete all running pods using:
```sh
kubectl delete --all pods
```

**Warning:** Between the time the containers are destroyed and the new containers are successfully running, the deployment will be offline. This can be permanent if the new containers never successfully build. Use the previous command to safely restart the deployment instead if possible.

---
**Detail:** I may be interchanging terminologies between deployment, pod, and container, in which case please let me know a better way to rephrase my sentences.

***Safe harbor statement***
The information provided on this channel/article/story is solely intended for informational purposes and cannot be used as a part of any contractual agreement. The content does not guarantee the delivery of any material, code, or functionality, and should not be the sole basis for making purchasing decisions. The postings on this site are my own and do not necessarily reflect the views or work of Oracle or Mythics, LLC.

*This work is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/).*
Alterações de páginas de forma dinâmica com o UseState
Tags: react, javascript, usestate, hooks
Published: 2023-06-16 20:43:56

**`useState`** é um hook do React que permite a um componente de função ter um estado interno. O estado é uma informação que pode ser armazenada e modificada durante a vida útil de um componente. Em resumo, **`useState`** é uma maneira de adicionar e manipular o estado em componentes de função no React, permitindo que você crie componentes dinâmicos e interativos.

Vamos analisar um exemplo prático do uso de UseStates e como seria sua aplicação num projeto.

Faremos uma página web simples, com um título com um nome e um input que irá alterar este título em tempo real. Além disso, um contator incrementado via button, tudo isso com o uso de Hooks e UseState.

São declaradas duas variáveis de estado usando o hook **`useState`**. O primeiro argumento passado para **`useState`** é o valor inicial do estado, e retorna um array com duas posições: a primeira posição contém o valor atual do estado e a segunda posição contém uma função para atualizar o valor do estado.

```jsx
const [name, setName] = useState('jojosuelobo');
```

Neste caso, o estado **`name`** é inicializado com o valor **`'jojosuelobo'`** e a função **`setName`** é usada para atualizar o estado **`name`** posteriormente. A próxima linha declara outra variável de estado chamada **`number`**

```jsx
const [number, setNumber] = useState(1);
```

O estado **`number`** é inicializado com o valor **`1`**, e a função **`setNumber`** é usada para atualizar esse estado. Em seguida, há a definição de uma função chamada **`changeNumber`**:

```jsx
const changeNumber = () => {
  setNumber((prevNumber) => prevNumber + 1);
};
```

Essa função é chamada quando o botão "Mudar número!" é clicado. Ela utiliza a função **`setNumber`** para atualizar o estado **`number`**. A função **`setNumber`** recebe uma função como argumento, que é chamada com o valor anterior do estado (**`prevNumber`**). Dentro dessa função, o valor do estado anterior é incrementado em 1 e o novo valor é atribuído ao estado **`number`**.

No retorno da função do componente, há um bloco JSX, que representa a estrutura da interface de usuário que será renderizada no navegador.

```jsx
return (
  <div className='App'>
    <h2>Meu nome é: {name}</h2>
    <input type='text' placeholder={name} onChange={e => setName(e.target.value)} />
    <div>
      <p>Número: {number}</p>
      <button onClick={changeNumber}>Mudar número!</button>
    </div>
  </div>
);
```

Se tudo ocorrer como previsto, a página irá se comportar da seguinte forma:


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


Aplicação React

Em resumo, o **`useState`** é um recurso essencial do React que permite que os componentes de função tenham um estado interno. Ele fornece uma maneira simples e eficiente de armazenar e atualizar informações ao longo da vida útil de um componente, possibilitando a criação de interfaces dinâmicas e interativas para as aplicações React.

Repositório do Projeto: {% embed https://github.com/jojosuelobo/UseState-React %}
The Most Profitable Advertising Model: Email Marketing
Tags: email, emailmarketing, newsletter, ai
Published: 2023-06-16 20:35:19

In the digital age, there are countless advertising models that businesses can utilize. However, one consistently garners high returns on investment: email marketing. Today, we'll delve into why email marketing is the most lucrative advertising model, and how an *[AI-powered email marketing platform](https://mailscribe.com)* can make your email marketing campaigns even more effective.

## The Power of Email Marketing

In the digital marketing sphere, email remains one of the most powerful tools businesses can leverage. Here's why:

### High ROI

For every dollar spent, email marketing typically generates $42 in return. No other digital advertising strategy comes close to delivering such impressive results. 

### Flexibility And Versatility

Email marketing can serve various purposes. Whether you're looking to drive website traffic, promote a new product, or maintain relationships with existing customers, email campaigns can do the trick.

### Personalization

Email marketing allows for a high degree of personalization. You can tailor emails to match individual customer preferences and shopping behaviors, consequently driving higher conversion rates.

### Automation Capabilities

With tools like Mailscribe, you can automate your email marketing campaigns, saving time and effort while ensuring consistent outreach.

## Advantages of AI-Powered Email Marketing

Mailscribe brings artificial intelligence to your email marketing efforts. Using AI in your campaigns endows them with several benefits:

### AI Content Generation

As an effective [email content generator](https://mailscribe.com), Mailscribe can curate compelling content for your emails based on the preferences and behaviors of your audience.

### Efficient Translation

If your business operates in international markets, Mailscribe's AI-powered translation can save time and ensure the accuracy of your messaging.

### Mood Detection

Mailscribe can even detect the mood of your messages, helping you maintain a tone that resonates with your audience.

### Personalization At Scale

AI allows you to personalize your email marketing campaigns at a much larger scale than ever before.

## Time to Elevate Your Email Marketing with AI

No matter what your business is, email marketing, especially when powered by AI, is a lucrative advertising model. With an AI-powered platform like Mailscribe, you can take your email marketing campaigns to a new level efficiently. 

Explore how Mailscribe, an AI-powered email marketing tool, can boost your advertising profitability starting today.
#4: Lots of Pandas
Tags: devjournal
Published: 2023-06-16 20:28:40

I’ll start off this post by saying that it’s been hard to work extensively on the game project due to full time work, but I expected that. My own personal work this week has been trying to find some suitable assets for our game considering we have no designers or animators at the moment. My uncle is hiring a project manager so hopefully she will help with the direction going forward. We’ve been doing a lot of research with AI to use for our game, since we want some autonomous learning for each agent for each game. It’s meant to be very realistic.

As for work, a lot of it has been combing through our Salesforce data and making some exploratory correlations and just seeing what kind of data is there. I found an interesting little correlation between day of the week and motor vehicle accidents as far as our leads go in which they’re far less common on Sundays. This may be due to a lower general volume of calls in the first place but I’ll have to look deeper. I used Simple Salesforce to log in with Python code and spun up a Jupyter notebook to play around with all this stuff, converting the SOQL query results to a DataFrame. I might switch over to some other APIs to see what works, such as SalesforcePy and/or Polars, just to get my feet wet and see what else is out there. I’m also looking to draw even more correlations, especially longitudinally. I also want to determine how much of our data is “unclean,” since it’s all human input and inconsistent.

Overall, as I said last week, fairly dry stuff at the moment but it’s keeping me engaged at least. We got two new hires on Tuesday but we haven’t started collaborating yet. I’m told we should be meeting each other and working together starting next week which may be a nice change of pace. Cheers till then!
The Ideal Frequency for Sending Newsletters: A Comprehensive Guide
Tags: newsletter, email, emailmarketing, marketing
Published: 2023-06-16 20:25:21

If you own a business, sending newsletters is a smart way to stay connected with your present and potential customers. But determining the right frequency for newsletter dispatch can be a rather tough task. In this blog post, we will delve into some important considerations to help you define the ideal frequency for your business. 

 ## Analysing your Audience 

To begin with, it’s crucial to understand your target audience’s needs. Are they interested in daily updates, or would a weekly or monthly roundup work better for them? By evaluating your audience and their preferences, you can tailor your newsletter frequency accordingly.

## Quality over Quantity 

While it's important to maintain regular communication with your audience, it's equally crucial that your newsletters offer substance. If you're rushing to send them daily for the sake of staying in touch, but the content is lacking relevance and quality, your audience might lose interest. 

Remember, according to a report, an average person receives 121 emails per day! You don't want your newsletter to be another insignificant drop in this ocean. Hence, ensure that whenever you hit the send button, your newsletter is valuable and interesting. 

## Business Type and Industry 

Your type of business and industry can also influence the frequency of newsletters. If you're in a rapidly evolving industry, like technology or fashion, your readers might appreciate more regular updates. 

However, if your business or industry changes are less frequent, it might make sense to send newsletters less frequently while still providing valuable content. 

## Using AI-Powered Email Marketing Tools 

Platforms like [Mailscribe](https://mailscribe.com), an AI-powered email marketing tool, can help you create engaging newsletters promptly. Utilizing such tools can assist determine the best time and frequency to send newsletters based on data analysis and user behavior, making your task easier and more efficient.

## Experiment and Track

Finally, it's always a good idea to experiment with different frequencies and then track the open and click-through rates of your e-newsletters. This approach will give you an understanding of what works best for your audience.

## Conclusion 

While there isn't a one-size-fits-all approach to newsletter send frequency, keeping these tips in mind can certainly guide you in defining what works best for your business and audience.