teleren/devto huggingface dataset:
3 React tips to Boost your Application
Tags: react, performance, webdev
Published: 2023-02-28 14:27:52


Frontend performance refers to the speed and efficiency with which a website or web application is displayed and interacts with users in a browser. It is a crucial aspect of web development, as a slow or poorly optimized frontend can result in a frustrating user experience and lower engagement or conversion rates.
Many factors can impact frontend performance, including the size and complexity of the code and assets, the network speed and reliability, the browser and device used to access the site, and the user's location and other external factors. Today we will see some tips to boost your performance in React applications.
## Lazy Loading
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
![](https://cms.tuliocalil.com.br/content/images/2023/02/image.png)
We can use this strategy in images, components, videos, fonts and more. Check the [React.lazy](https://beta.reactjs.org/reference/react/lazy) and the [Suspense](https://beta.reactjs.org/reference/react/Suspense) from React docs and the [Mozilla docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) to see examples for fonts, images and CSS.

## Code Splitting
Code splitting is a technique used in web development to split a large codebase into smaller chunks, which can be loaded on-demand, rather than all at once. This can help to improve the performance and user experience of a website or application, particularly on slower networks or devices.
![](https://cms.tuliocalil.com.br/content/images/2023/02/image-1.png)

[React has a nice doc about it](https://reactjs.org/docs/code-splitting.html) and you can use this with Lazy loading and Suspense component to get a real nice performance.

##Use virtualized lists
List virtualization, or "windowing", is the concept of only rendering what is visible to the user. The number of elements that are rendered at first is a very small subset of the entire list and the "window" of visible content moves when the user continues to scroll. This improves both the rendering and scrolling performance of the list.
![](https://cms.tuliocalil.com.br/content/images/2023/02/image-3.png)

There are awesome libs for this, but we can focus on two of then: [React Window](https://react-window.vercel.app/#/examples/list/fixed-size) and [React Virtualized](https://github.com/bvaughn/react-virtualized).
On this tweet you can see more tips to boost your performance on React apps:
{% embed https://twitter.com/Tuliocalil/status/1625838158905475074 %}
Mel spectrogram and MFCC
Tags: python, audio, programming, mfcc
Published: 2023-02-28 14:27:27



## Algorithm flow
![Algorithm flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77itb11zc9r0e2p1pepb.png)


-  Read 220Hz audio data
```python
import audioflux as af

audio_path = af.utils.sample_path('220')
audio_arr, sr = af.read(audio_path)
```
- Extract spectrogram of dB
```python
low_fre = 0
spec_arr, fre_band_arr = af.mel_spectrogram(audio_arr, samplate=sr, low_fre=low_fre)
spec_dB_arr = af.utils.power_to_db(spec_arr)
```

- Show mel spectrogram plot
```python
import matplotlib.pyplot as plt
from audioflux.display import fill_spec
import numpy as np

# calculate x/y-coords
audio_len = audio_arr.shape[0]
x_coords = np.linspace(0, audio_len/sr, spec_arr.shape[1] + 1)
y_coords = np.insert(fre_band_arr, 0, low_fre)

fig, ax = plt.subplots()
img = fill_spec(spec_dB_arr, axes=ax,
                x_coords=x_coords,
                y_coords=y_coords,
                x_axis='time', y_axis='log',
                title='Mel Spectrogram')
fig.colorbar(img, ax=ax, format="%+2.0f dB")
```


![mel spectrogram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idmrjz96bmaazgbi3l6y.png)

- Extract mfcc data
```python
cc_arr, _ = af.mfcc(audio_arr, samplate=sr)
```

- Show mfcc plot
```python
# calculate x-coords
audio_len = audio_arr.shape[0]
x_coords = np.linspace(0, audio_len/sr, cc_arr.shape[1] + 1)

fig, ax = plt.subplots()
img = fill_spec(cc_arr, axes=ax,
                x_coords=x_coords, x_axis='time',
                title='MFCC')
fig.colorbar(img, ax=ax)
```

![mfcc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80lh0hj6z6v5oneb02jh.png)
he technology of industry hrudimentary tools to advanced machinery and
Published: 2023-02-28 14:25:35

One of the most significant advancements in industrial technology is automation. Automation involves the use of machinery, robotics, and computer systems to perform tasks that were once done by humans. Automation has enabled industries to increase their production efficiency, reduce labor costs, and minimize human errors.

Another significant technological advancement in the industry is the Internet of Things (IoT). IoT is a network of physical devices, vehicles, and other items embedded with sensors, software, and other technologies that enable them to connect and exchange data. IoT technology has been used in the industry to improve safety, increase efficiency, and reduce downtime by enabling real-time monitoring and analysis of industrial processes.
TIL how to view the history of a file with git
Tags: todayilearned, git
Published: 2023-05-19 20:37:20

---
title: TIL how to view the history of a file with git
published: true
date: 2023-02-28 14:24:00 UTC
tags: TIL,git
canonical_url: https://www.zufallsheld.de/2023/02/28/til-how-to-view-the-history-of-a-file-with-git/
---

When reading the title you may think: “d’oh! that’s easy, with `git log`, of course!” And of course it’s done with [git log](https://www.git-scm.com/docs/git-log). But what I didn’t know is that with `git log -p path/to/file` you can show the history of a file including its changes:

```
> git log -p molecule/mysql_hardening/molecule.yml
commit 47c771cc628c4a570552c4b76cba22a5aaa92660
Author: Martin Schurz <Martin.Schurz@t-systems.com>
Date: Fri Feb 24 01:07:41 2023 +0100

    add idempotency check

    Signed-off-by: Martin Schurz <Martin.Schurz@t-systems.com>

diff --git a/molecule/mysql_hardening/molecule.yml b/molecule/mysql_hardening/molecule.yml
index a9c5a0b..0eef4be 100644
--- a/molecule/mysql_hardening/molecule.yml
+++ b/molecule/mysql_hardening/molecule.yml
@@ -53,6 +53,6 @@ scenario:
     - create
     - prepare
     - converge
- # - idempotence # not idempotent
+ - idempotence
     - verify
     - destroy

commit c2e9c9a8dd81d2758a94ba1509a18dd9d2b5654e
Author: Sebastian Gumprich <rndmh3ro@users.noreply.github.com>
Date: Mon Feb 6 14:01:40 2023 +0100

    try to fix molecule local tests (#632)

    these settings are probably not necessary (geerlingguys images dont have them either)

    Signed-off-by: Sebastian Gumprich <sebastian.gumprich@t-systems.com>

diff --git a/molecule/mysql_hardening/molecule.yml b/molecule/mysql_hardening/molecule.yml
index bbbfe30..a9c5a0b 100644
--- a/molecule/mysql_hardening/molecule.yml
+++ b/molecule/mysql_hardening/molecule.yml
@@ -15,15 +15,6 @@ platforms:
     privileged: true
     cgroupns_mode: host
     pre_build_image: true
- environment:
- container: docker
- security_opts:
- - apparmor=unconfined
- env:
- http_proxy: "${http_proxy}"
- https_proxy: "${https_proxy}"
- no_proxy: "${no_proxy}"
- container: docker
 provisioner:
   name: ansible
   options:

```

That’s it. :)
Typewriter Animation using Jetpack Compose with highlighted texts
Tags: android, jetpackcompose, programming, mobile
Published: 2023-02-28 14:22:47

Typewriter animations are a great way to add some personality and interactivity to your app’s user interface. 

With Jetpack Compose, Google’s modern toolkit for building native Android UIs, creating typewriter animations is easier than ever.

In this blog post, you will learn how to use Jetpack Compose’s animation APIs to create a typewriter effect, where text appears as if it’s being typed out letter by letter. 

We’ll cover everything from setting up the layout to creating the animation, so whether you’re new to Jetpack Compose or a seasoned pro, you’ll be able to follow along.

The complete source code of the implementation is available on [GitHub](https://github.com/cp-radhika-s/TypeWriter_Jetpackcompose).

For implementation detail, check out our [Canopas Blog](https://blog.canopas.com/jetpack-compose-typewriter-animation-with-highlighted-texts-74397fee42f1).
Resolvendo problemas no HackerRank: Subindo um vale!
Tags: javascript, beginners, programming
Published: 2023-02-28 14:14:49

Olá, seja bem vindo a mais uma etapa do Resolvendo problemas no Hacker-Rank,nessa sessão iremos fazer um algoritmo que irá revelar a contagem de valer percorridos. Vejamos como separar isso.

**Couting Valleys -**

Nesse caso, teremos uma alpinista que anda por diversos locais, e que salva seus registros de caminhada. Ele tem um meio de salvar que tem como base subidas e descidas.

step =passos
u =subida
d =descida
path =contagemDeSubidaEDescida

Por exemplo, seu último registro foi passado do seguinte modelo: 

```
steps = 8 path =[dduuudd]
```

Temos também certas regras a seguir nesse caso, com respeito a subida de montanhas e entrada em lagos. 

- Uma montanha é uma sequência de degraus consecutivos acima do nível do mar, começando com um degrau acima do nível do mar e terminando com um degrau abaixo do nível do mar.

- Um vale é uma sequência de degraus consecutivos abaixo do nível do mar, começando com um degrau abaixo do nível do mar e terminando com um degrau subindo até o nível do mar.

Com isso, vejamos a solução encontrada para esse código:

```
function countingValleys(steps, path) {
    // Write your code here
//step=passos,u=subida,d=descida,path=contagemDeSubidaEDescida
    var traversedValleyCount = 0;
    var `isInValley` = false;
    var altitude = 0;
    
    for (let i = 0; i < steps; i++) {
        if (path[i] === "D") {
            altitude--

C;
        } else if (path[i] === "U") {
            altitude++;
        }
        if (altitude < 0 && isInValley === false) {
            isInValley = true;
        } else if (isInValley === true && altitude === 0) {
            traversedValleyCount++;
            isInValley = false;
        }
    }
    return traversedValleyCount;
 
}
```

O código acima começa com uma função que guarda `steps`e `path` como parâmetros. Logo após isso nós criamos as variáveis `traversedValleyCount`,`isInValley` e `altitude`. Com uma sendo para caso seja um vale sendo atravessad´, averiguar se é um vale e sua altitude.

Com isso, criamos o primeiro laço `for` que vai iterar o index baseado no número de `steps`. Se o index de `path` que guardará o número de subidas e descidas for igual a D, altitude irá diminuir. Caso contrário e for igual a U, irá aumentar. Também temos o caso da altitude for abaixo de 0, ou seja abaixo do nível do mar nesse caso, que seria quando entramos no vale, com isso o `isInValley` que inicia com valor `false` será `true`. 

Quando o `isInValley` for igual true e ser igual a 0, adicionará mais 1, a contagem do `traversedValleyCount` e o `IsInValley` voltará a ser false. Após isso, nós retornamos o `traversedValleyCount` com todos os casos prontos.

O resultado será:

```
8
UDDDUDUU

input: 1
```

Com isso concluímos mais um episódio, e nos vemos na próxima!!!
Trying SPVM
Published: 2023-02-28 14:00:25

Hi! I'm japanese perl beginner. 

Currently I'm trying [SPVM](https://metacpan.org/pod/SPVM) which is a programming language and is opened at CPAN.

> SPVM (Static Perl Virtual Machine) is a perl-ish static typed programing language. SPVM provides fast calculation, fast array operations, easy C/C++ binding, and creating executable files.
(from [SPVM](https://metacpan.org/pod/SPVM) )

You can create SPVM module and call the module from Perl easily. And it helps development easier sometims.

There's a tutorial and documentations. Now I'm trying those and made one issue.

https://github.com/yuki-kimoto/SPVM/issues/291

If you have sometime and interest try with me!
Blog Launch
Tags: webdev, computerscience, programming, challenge
Published: 2023-02-28 13:59:28

Hello everyone,

Welcome to my personal/professional blog which I will be using as platform to share my latest projects and experiences. My name is Rafael, and I've served for years as an IT Manager with a passion for technology and innovation. Graduated in Business and with a background in Education, Technology, and Television industries, I have been fortunate enough to have worked on some exciting projects over the years.

For the past 6+ years, I have been working in TV production, where I have gained invaluable experience collaborating with large teams, working alongside management, and ensuring projects are delivered on time and within budget. However, my passion for technology has always been an important part of my life, and I have recently graduated in Web Development at the University of Toronto.

Now, I am excited to apply my skills and knowledge to make my way back into the tech industry, and I want to take you on this journey with me. On this blog, I will be sharing my latest projects, discussing the Tech Stack and innovations, and exploring the ever-evolving landscape of the tech industry.

If you would like to connect with me, feel free to visit my website or check out my LinkedIn and GitHub profiles:

- My website: [https://rafdev.netlify.app/](https://rafdev.netlify.app/)
- LinkedIn: [https://www.linkedin.com/in/rafael-a-gomes/](https://www.linkedin.com/in/rafael-a-gomes/)
- GitHub: [https://github.com/rfabreu](https://github.com/rfabreu)

I hope that you will join me on this journey and share your thoughts and experiences along the way. Thank you for reading, and I look forward to connecting with you all soon!
Let's ask ChatGPT about Playwright versus Ruby's Capybara
Tags: selenium, testing, ruby, automation
Published: 2023-02-28 13:51:50

I wanted to learn more about Playwright, so I simply asked ChatGPT a series of questions to find out more! See some of the below snapshots for my interesting conversation with the AI bot that is all the rage nowadays.


![ChatGPT writes a Playwright test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb1dvofdwnpj196yd9p5.png)<figcaption>Wow! ChatGPT puts together what looks to be a valid UI test for a Google Search.</figcaption>


![Asking about await](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ik9zznqg952a9083s5o.png)<figcaption>I have pretty basic knowledge of async and promises, but I wasn't super clear on why it might be so prevalent in JS-based UI testing. Maybe I've always oversimplified my take on the complexity of DOM events. Returning a promise object on a mouse click is a little foreign to me.</figcaption>


![First attempt at refactor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o61jqpl821hovi4fc98i.png)<figcaption>I have a tendency for code to simply look cleaner. For example I'll always try to refactor away string literals where I can. I thought maybe the await keyword can be abstracted away somehow.</figcaption>


![Second attempt at refactor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jtdxfngccn5cc6rlmun.png)<figcaption>I still wasn't too satisfied so I asked ChatGPT to refactor again.</figcaption>


![ChatGPT writes a test in Capybara](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyp4alevh648y1428pbg.png)<figcaption>I went ahead and asked ChatGPT to write the same test using Capybara. It produces exactly what I expect (and with MUCH fewer lines of code!)</figcaption>


![ChatGPT gives a take on the two frameworks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yc2l27zqr5m1g5ynzaa.png)<figcaption>And finally I ask for ChatGPT's take on what I perceived as a vast difference... verbosity?</figcaption>

So there you have it! A quick exercise and comparison between Ruby's stack and Playwright, and an interesting assessment on both from ChatGPT.
Innodb Storage Engine (part 2)
Tags: innodb, storageengine
Published: 2023-02-28 13:51:43

**Performance and Scalability**

InnoDB is designed for high-performance and high-concurrency environments. It provides good performance for both read-intensive and write-intensive workloads.

InnoDB uses a buffer pool to cache frequently-accessed data in memory, which reduces disk I/O and improves performance. InnoDB also supports adaptive hash indexes, which can be used for frequently accessed small tables.

InnoDB also supports multi-core CPUs and can take advantage of parallelism for certain operations, such as index creation and bulk data loading.

InnoDB is also scalable and can handle large datasets. InnoDB supports tablespaces, which can be used to partition data across multiple physical storage devices. InnoDB also supports online schema changes, which allows for changes to the database schema without blocking concurrent transactions.

**InnoDB in MariaDB And different from other Storage Engines in Mariadb**

MariaDB is a community-developed fork of MySQL that aims to be a drop-in replacement for MySQL with additional features and improvements. MariaDB uses the same storage engines as MySQL, including InnoDB.

Mariadb has multiple storage engines apart from Innodb and some of them are following **MyIsam, Aria, Xtradb** but we need to see the differences of innodb from the rest of storage engine which has made it the default storage engine in mariadb from version 10.2.

InnoDB is a popular storage engine in MariaDB, and it differs significantly from other storage engines such as MyISAM, Aria, and XtraDB. InnoDB provides transactional processing, MVCC, and row-level locking, which allows for high concurrency and data consistency. InnoDB also provides scalability features such as adaptive hash indexes, parallelism, and online schema changes.

MyISAM, on the other hand, is faster for read-intensive workloads and has a smaller disk footprint for small tables. Aria is a simpler and more lightweight alternative to InnoDB that provides similar transactional features. XtraDB is a fork of InnoDB that includes performance and scalability improvements over the standard InnoDB.

Choosing the right storage engine depends on the specific needs of the application. InnoDB is a good choice for applications that require high concurrency, data consistency, and scalability, while MyISAM may be more suitable for read-intensive workloads with small tables. Aria is a good alternative to InnoDB for simpler applications, while XtraDB is a good choice for high-performance and high-concurrency environments
Paracetamol.ts💊| #21: Explica este código TypeScript
Tags: typescript, javascript, spanish, webdev
Published: 2023-02-28 13:00:00

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark> </center>

```ts
enum FinDeSemana {
  "Sabado" = "Sábado",
  "Domingo" = "Domingo",
}

const fn = (dia:FinDeSemana) => {
  return dia;
}

console.log(fn(123))
console.log(fn("Domingo"))
console.log(fn(FinDeSemana.Domingo))
```

- A. `Error`, `Error`, `Error`
- B. `123`, `Domingo`, `Domingo`
- C. `Error`, `Error`, `Domingo`
- D. `Error`, `Domingo`, `Domingo`

{% details **Respuesta** %} 

✅ C. `Error`, `Error`, `Domingo`

Los `enum` pueden ser unsados como tipos de datos, la función `fn` recibe un parámetro de tipo `FinDeSemana` lo que significa que solo puede funcionar con los valores de `FinDeSemana`.

* Para `fn(123)`:
❌ Nos da error, ya que `123` no es un valor válido para `FinDeSemana`.

* Para `fn("Domingo")`:
❌ Nos da error, pese a que la cadena `Domingo` si pertenece al `enum` no funciona por que el valor en cadena `Domingo` no es lo mismo que acceder al `enum` así `FinDeSemana.Domingo`.

* Para `fn(FinDeSemana.Domingo)`:
✅ Si funciona, la menra correcta de pasar el argumento a la función es `FinDeSemana.Domingo`

{% enddetails %}


---

Puedes ver el reto anterior acá:

{% post https://dev.to/duxtech/paracetamolts-20-explica-este-codigo-typescript-3bpk?preview=cb26d2646282253cce6227cf4e5801d7f4cc802790fa0a76f2e38ddc0392f3f4c367c501e0144d9026e4bc9f084f0991f77bd169ebf81936aa6a2c65 %}
Swift - Data Types Explained
Tags: swift, beginners, ios, mobile
Published: 2023-02-28 13:27:24

Hello everyone, today I want talk a little bit about Data Types in Swift.

Data Types are the most important part of any programming language. Swift support six data types: `Int`, `String`, `Float`, `Double`, `Bool` and `Character`.

So let's start.

`1. Int:` In Swift, the integer is a data type that is used to represent a whole number with no fraction, for example, “2”, “56”, “3”, etc. Integer can be of 8, 16, 32, and 64 signed or unsigned bits. A variable of integer data type can be defined using the Int keyword. Int can be represented as a signed integer and UInt represents an unsigned integer.

Ex: `var age: Int = 22`

`2. String:` In Swift, the string is used to represent a sequence of characters or textual data, for example, “GeeksforGeeks”. The variable of string data type is defined using the String keyword. 

Ex: `var firstName: String = "Marcos"`

`3. Float:` In Swift, the float data type is used to represent decimal numbers or we can say that float is used to represent 32-bit floating-point numbers, for example, “3.23”, “0.89753”, etc. It stores data with less precision. This data type represents up to 6 decimal places, so it is generally used when the floating-point number is less. If you want to store more decimal places then you can use a double data type. The variable of float data type is defined using the Float keyword.

Ex: `var inputData: Float = 3.43`

`4. Double:` Double data type is used to represent a number with fractional components or we can say that double data type is a 64-bit floating-point number, for example, “2.3345656”, “0.24354656”, etc. This data type represents up to 15 decimal places and it is generally used when the floating-point number is large. The variable of double data type is defined using the Double keyword.

Ex: `var inputData: Double = 23.45788`

`5. Bool:` In Swift, bool or boolean is used to represent logical entities. This data type has only two values that is true or false. Here the variable of boolean data type can be defined using the Bool keyword.

Ex: `var isLoading: Bool = true`

`6. Character:` In Swift, the character is used to represent a single letter or string literal. For example “G”, “E”, “K”, “S”, etc. A variable of character data type can be defined using the Character keyword.

Ex: `var myInitial: Character = "M"`