teleren/devto huggingface dataset:
Harnessing the Power Strictly Typed Forms in Angular: A Simple Tutorial
Tags: angular, typescript, frontend, typedform
Published: 2023-06-12 00:53:32

When working with Angular, handling forms is a common task. However, forms can get complicated very quickly, and ensuring type safety can become a struggle. 

That's where Angular Typed Forms come in. Let's dive into how we can leverage typed forms to make our applications more robust.


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

&ensp;
&ensp;

## Understanding Angular Typed Forms
Angular provides two ways to work with forms: **template-driven** and **reactive.** While both have their benefits, reactive forms provide more flexibility and are better suited for working with typed forms.

Angular Typed Forms is an innovative approach to reactive forms that brings strong typing into the picture. With typed forms, you define your form controls and groups using interfaces, helping you to maintain type safety.
&ensp;

## Setting Up a Book Collection Typed Form
Suppose we're working on a form for a book collection. We'll start by defining an interface for our form data.

```typescript
interface BookForm {
  title: string;
  author: string;
  genre: string[];
  publicationYear: number;
}
```
Now, we'll use this interface to create a typed form group.

```typescript
const bookForm = new FormGroup<BookForm>({
  title: new FormControl(''),
  author: new FormControl(''),
  genre: new FormArray<string>([]),
  publicationYear: new FormControl(''),
});
```
&ensp;

## Manipulating Typed Form Values
One of the most common operations on forms is getting and setting values. With typed forms, this becomes straightforward, and the compiler will warn you if you're accessing or assigning properties that do not exist on the interface.

```typescript
// Getting values
const bookTitle = bookForm.controls.title.value;

// Setting values
bookForm.controls.publicationYear.setValue(2023);
```
&ensp;


## Working with Form Arrays
Form arrays are used when you have a variable set of controls. With typed forms, you can handle form arrays with ease.

Here's how you add a new genre to the array in our book form:

```typescript
bookForm.controls.genre.push(new FormControl('Science Fiction'));
```
This way, working with forms becomes more intuitive, and you get the benefit of strong typing, which prevents many common mistakes that might be overlooked when dealing with 'any' types.
&ensp;
&ensp;

## Conclusion
By using Angular Typed Forms, we ensure that our forms are type safe. It brings in an extra layer of security to our applications by enabling us to leverage TypeScript's powerful typing. 

It makes our code cleaner, easier to understand, and less prone to errors. The typed forms provide a simple, yet innovative way to handle the complexities of form management in Angular, making your development process much more efficient and enjoyable.

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

Thanks for reading, and happy coding:metal:!
&ensp;
&ensp;
C++, erase all duplicate items/chars in vector or string
Published: 2023-06-12 00:42:22

To remove all duplicate items/characters in a vector or string, we can use a combination of the std::remove and std::erase functions

```cpp
string str = "this.is.string.with.dot";
//only removing the items not equal to '.' toward the begining of string
auto s_it = remove(str.begin(), str.end(), '.');  
str.erase(s_it, str.end()); // we need to erase it
cout << "str without dot  " << str << endl;

vector<int> iV{ 3,4,5,4,8,3,4,90,45,4,7 };
auto it = remove(iV.begin(), iV.end(), 4);
iV.erase(it, iV.end());
for (auto v : iV) {
    cout << " " << v;
}
cout << endl;
```
Optimizing WordPress Website Performance: 3 Basic Tips for Faster Loading
Tags: wordpress, webdev, php
Published: 2023-06-12 00:02:36

In the digital world, having a fast website is crucial for user satisfaction and retaining visitors. This also applies to WordPress. Concerns about performance have raised questions about WordPress's ability to maintain speed over time. This post aims to address these concerns directly and provide a simple guide on optimizing your WordPress site for faster loading times.

1) **Choose Lightweight Themes and Plugins:**

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

Select themes and plugins that are lightweight and well-coded. Avoid bloated options with excessive features, as they can slow down your site. Look for themes and plugins that are optimized for performance and have positive reviews. Here are a few lightweight WordPress themes that I personally recommend based on their reliability and efficiency: Astra, Divi, and Ocean WP. While there are other options available, these themes have gained recognition and positive feedback from the WordPress community.

2) **Remove Unused Themes and Plugins:**
Removing unused themes and plugins from your WordPress website can improve its speed and performance. Here are a few reasons why this optimization is beneficial.

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

   I. Reduced server load: Every installed theme and plugin adds extra code and functionality that the server needs to process. Unused themes and plugins can increase the server load, leading to slower response times.
   II. Avoid code conflicts: Active themes and plugins can sometimes conflict with unused ones, causing performance issues. By removing unused themes and plugins, you minimize the chances of conflicts and optimize the overall codebase.
   III. Compact backups: Regular website backups are important. By removing unused themes and plugins, you can reduce the size of your backups, saving storage space and making the backup process more efficient.
   IV. Streamlined updates: Even unused themes and plugins require updates for compatibility and security with the latest WordPress version. Removing them simplifies the update process, focusing only on active components and reducing maintenance time and effort.

3) **Image Optimization:** 
Optimize your images to reduce file sizes without compromising quality. Large image files can slow down page load times. You can use image optimization plugins like Smush or EWWW Image Optimizer to automatically compress and optimize images.

_By following these simple steps, you can enhance the speed and performance of your WordPress site, ensuring a better user experience and improved visitor retention._
Evolução da espécie vs Desenvolvimento de um software
Tags: webdev, programming, beginners, productivity
Published: 2023-06-11 23:35:16



##  Introdução

Neste mundo cada vez mais digital, é fascinante perceber as conexões entre campos aparentemente distintos. Hoje, vamos explorar uma comparação única: a evolução da espécie e o desenvolvimento de software. Ambos possuem processos complexos que se desenvolvem ao longo do tempo, melhorando gradualmente através de várias etapas.

## Conceitos Fundamentais: Evolução da espécie

A evolução da espécie, de acordo com Darwin, é impulsionada pela seleção natural. Isso significa que características benéficas tendem a se propagar ao longo das gerações, enquanto as desvantajosas são gradualmente eliminadas.

## Conceitos Fundamentais: Desenvolvimento de software

O desenvolvimento de software é um processo estruturado que envolve várias etapas, desde a concepção até a manutenção. Uma dessas etapas é a depuração, onde os bugs são identificados e corrigidos.

##  Paralelos entre Evolução da espécie e Desenvolvimento de software

Assim como na evolução das espécies, o desenvolvimento de software também passa por uma "seleção natural", mas de ideias e soluções. As melhores soluções tendem a ser adotadas, enquanto as menos eficientes são descartadas.

##  A seleção natural comparada à depuração de bugs

A depuração de bugs pode ser vista como a "seleção natural" do desenvolvimento de software. Assim como os genes desfavoráveis são eliminados através da seleção natural, os bugs são identificados e corrigidos, permitindo que o software melhore e evolua.

## Aplicação dos Princípios da Evolução ao Desenvolvimento de Software

Os princípios da evolução podem ser aplicados no desenvolvimento de software para melhorar a eficiência e eficácia do processo. Através da aplicação de conceitos como seleção natural e sobrevivência do mais apto, podemos desenvolver software que seja robusto, adaptável e capaz de evoluir com as necessidades do usuário.

## Conclusão

A comparação entre a evolução da espécie e o desenvolvimento de software oferece uma nova perspectiva sobre como os processos evolutivos podem ser aplicados em áreas distintas. Assim como a natureza, através da seleção natural, aprimora as espécies ao longo do tempo, a depuração de bugs permite que os softwares se tornem cada vez mais eficientes e eficazes. Esta analogia entre biologia e tecnologia abre caminho para uma compreensão mais profunda de como as melhores práticas podem ser aplicadas para melhorar nossos softwares e nossas vidas.
You don't need a modal window
Published: 2023-06-11 23:23:05

After a conversation in the [htmx Discord](https://htmx.org/discord), and realizing .dev domains aren't as expensive as I remember, I decided to make a microsite:

[YouDontNeedAModalWindow.dev](https://YouDontNeedAModalWindow.dev)

I tried to talk about the flaws and dangers of modal windows and how I think they're overused, while also acknowledging the cases where they are the right solution.

What do you think?
SSH Keys, GitHub..
Published: 2023-06-11 22:59:32

As I continue to learn how to become a Front End Dev, I learned all about github today, and I used GitBash to create and connect my SSH Keys to my local computer and github so it's ready for collaboration with tutors and other students on my Coding Bootcamp.

I also learned about peer-programming and agile dev. I've read all about agile dev, it's history, the 12 tenets and so on. Exciting!!!
JavaScript Array Methods # 14
Tags: javascript, beginners, programming, react
Published: 2023-06-11 21:56:23

// Array Methods 
let num = [1, 2, 3, 34, 4]
let b = num.toString() // b is string now 
console.log(b,typeof b)
let c = num.join("_")
console.log(c,typeof c)
num.pop()
console.log(num)
// let r = num.pop()// pop return the poped element
// console.log(num, r)
// let r = num.push(69)// push return the new array length
// console.log(num, r)
// let r = num.shift()// Remove an element from the start arry
// console.log(r, num)
let r = num.unshift(69)// Remove an element from the start arry
console.log(r, num)

[](https://replit.com/@SkSage/JavaScript-Array-Methods-17#index.js)

[](https://replit.com/@SkSage?path=folder/JavaScript%20Repl)

[](https://www.facebook.com/profile.php?id=100092185536136)

[](https://youtube.com/@explorewithsidd2721)
🦑 Squid has landed on endoflife.date ⏳
Tags: devops, productivity, product, opensource
Published: 2023-06-11 21:33:19

## ❔ About

[Squid (cache)](http://www.squid-cache.org/) was previously not available on [`endoflife.date`](https://endoflife.date/):

{% embed https://github.com/simple-icons/simple-icons/issues/8706 %}

As it's a very widely used piece of software, it was making sense to: 

✅ Push it on [`endoflife.date`](https://endoflife.date/squid)
✅ Remind a bit about this software to a wider audience

## 🍿 Demo

{% youtube BRyC0AcQzCo %}

## 🔖 `squid` on GitHub

{% embed https://github.com/squid-cache/squid %}
RxJS Operators: of
Tags: rxjs, typescript, javascript, webdev
Published: 2023-06-11 21:18:12

RxJS is a JavaScript library that enables the creation of asynchronous and event-based programs. The main type is the `Observable` and a suite of functions and operators are provided to make it easier to work with the data coming through. This series will detail those operators (and a few stand-alone functions) and provide examples of their use.

In this post, we’re going to cover the `of` function.

## What does it do?

Strictly speaking, this isn’t an operator, but it is useful in its own right. I’ll be making use of it to simplify the examples presented.

The `of` function allows us to turn a normal value, or series of values, into an observable. When we subscribe to this observable it will emit all the values that were provided to it. Once all values have been emitted it will be automatically completed.

## Example

`of` can be used just like we would any other observable:

```tsx
import { of } from 'rxjs';

of('Test Value')
    .subscribe(x => {
        console.log(x);
    });
```

Running this we will see

```bash
Test Value
```

The `of` function is that simple. It takes in a value and gives us back an observable.

If we need the observable to emit multiple values we can do that by passing multiple values to the `of` function:

```tsx
import { of } from 'rxjs';

of('Test Value', 'And a second', 'Third and final')
    .subscribe(x => {
        console.log(x);
    });
```

```bash
Test Value
And a second
Third and final
```

While it is simple, don’t underestimate its utility. Here are a few example use cases:

**Unit testing** - Being able to mock external dependencies is essential for effective unit testing. The `of` function makes it easy to specify return values from observable functions.

**Caching** - If we’ve got an observable call that we know doesn’t change often, we may want to cache the result. On subsequent calls, we can just return the cached result rather than running the query repeatedly. `of` allows us to return the cached value as an observable, meaning the calling code doesn’t need any knowledge of the internal handling to process the result.

**Error handling** - If we have an HTTP call implemented using observables (like the Angular HTTP client) there is a chance of errors. While these should always be handled, we might not want to throw the exception back to the initiator. In this case, we can handle the error (using the `catchError` operator) and use `of` to return a default value.

These are just a few of the areas I see this used in. The point is, it comes in handy more often than you might expect.

The source code for this example is available on GitHub:
{% embed https://github.com/drownedintech/rxjs-operators %}
How to set up publication signature with the Gradle plugin
Tags: gradle, gpg, signing, nexus
Published: 2023-06-11 21:09:40

## Introduction:
In the realm of software development, ensuring the security and integrity of your artifacts is of paramount importance. One effective approach is to sign your artifacts using GPG (GNU Privacy Guard) keys. This article will guide you through the process of setting up GPG, generating keys, and utilizing [The Signing Plugin](https://docs.gradle.org/current/userguide/signing_plugin.html) to sign artifacts before publishing them to Nexus.

### 1. Installing GPG:
To begin, let's install GPG on our system. Follow the instructions below:

   **Linux**:
      - Open a terminal window.
      - Execute the command: `sudo apt-get install gnupg`

   **macOS**:
      - Open a terminal window.
      - Run the command: `brew install gnupg`

   **Windows**:
      - Download the Gpg4win installer from the [Gpg4win website](https://gpg4win.org/).
      - Run the installer and follow the on-screen instructions.

### 2. Generating GPG Keys:
Once GPG is installed, let's generate GPG keys. These keys will be used to sign your artifacts. Follow these steps:

   - Open a terminal or command prompt.
   - Execute the command: `gpg --full-generate-key`
   - Follow the interactive prompts to configure your key, such as selecting the key type and size.
   - Set a strong passphrase for your key. Remember this passphrase as you will need it later.
   - Once the key generation is complete, your GPG key pair will be stored in the GPG keyring.

### 3. Configuring The Signing Plugin:

   - Open the `build.gradle` file of your project.
   - Add the following lines to the top of the file:

   ```groovy
   plugins {
       id 'signing'
   }
   ```

   - Configure the signing plugin for root project:

   ```groovy
   signing {
       sign publishing.publications
   }
   ```

   - Provide the GPG key details in `gradle.properties`:

   ```groovy
signing.keyId=YOUR_KEY_ID
signing.secretKeyRingFile=~/.gnupg/secring.gpg
signing.password=YOUR_PASSPHRASE
   ```

**Note**: 
- To get the `keyId`, you can run the following command `gpg --list-keys --keyid-format short` and take the 8-digit value
- The secring.gpg file has been removed in GPG 2.1. However, GPG still can create such a file: `gpg --export-secret-keys -o secring.gpg`
- To upload your public key to the keyserver, you can use the following command `gpg --keyserver hkp://keyserver.ubuntu.com --send-keys YOUR_KEY_ID`

### 4. Publish with signing:
`./gradlew publishToMavenLocal`
`./gradlew publish`
******** ¿ What is ? ********
Published: 2023-06-11 21:07:41


![Docker Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xih7j7wwi4pq5b3fyx15.png)


What exactly is Docker. Docker is a Platform As A Service, (PaaS), that uses virtualization to deliver software in packages called containers. Docker automates the deployment of these lightweight containers so that the software can work efficiently in multiple isolated environments.

Virtualization is the creation of a virtual computer hardware platform, storage, and network resources. Virtualization creates these virtual resources from hard drives, CPU's, and GPU's. When virtualizing you combine a network of resources into what is seemingly one object.

A _Virtual Machine (VM)_ is software used for virtualization but must be built on top of hypervisor software. This allows VMs' to run a separate operating system from the host hardware. The advantages of this are you can install new software, change code to the operating system, or rollback to a previous configuration while maintaining the security of the host hardware and operating system.


![virtual machine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf0lmintjjasotz6bbs9.png)


A _Container_ is an application completely isolated from other programs on a shared kernel. Containers are built from read-only images that usually run single processes or applications but can run multiple if needed. They are a guest operating system with virtual recourses who have no functional awareness of other processes running on the host operating system. The communication between the container and the device, as well as any other processes are handled by a container engine. One of the fundamental applications to Docker Daemon and its role in the Docker Engine.

Docker uses Daemon to create and manage containers. The advantage of these docker containers is their portability. They can run in multiple environments because of their lightweight in resource usage. They run consistently no matter the operating system you implement because each container packages its own dependencies.


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

Docker Containers Vs. Virtual Machines

- Direct access to hardware

- Easily update and delete instances of applications

- Simplifies complex tasks such as a CI/CD Pipeline

- Facilitate the use of microservices

Although these seem like two competing tools when deciding to virtualize your programs, they can be used together. The security of virtual machines and the efficiency of Docker containers allow you to take advantage of all the benefits of virtualization. When using VMs' to secure your applications and using containers to deploy code between machines you can utilize both of their strengths.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgna7rqrh3bsgr6rsksw.jpg)
Semantic HTML
Tags: html, webdev
Published: 2023-06-11 20:49:56

HTML has both **semantic** tags and **non-semantic** tags. Semantic tags use words that help you understand the purpose of that tag, instead of a non-semantic tag that uses a word unrelated to what's going on.

Specifically, **semantic **means "of or relating to meaning in language" according to the trusty Merriam Webster Dictionary.

Practically, an example of semantic vs. non-semantic is:

- `<div>` is non-semantic. It doesn't really explain what's going on here. It's just a div.
- `<header>` is semantic. This tag explains what it's purpose is: it's a header and will contain header information at the top of the page.

Semantic tags are good for SEO and accessibility. Browsers are able to interpret these semantic tags for screen-readers and other software to help make the web as accessible as possible.

Semantic tags that are common are below (along with their meaning):

`<header>`: usually contains navigation links or header tags at the top of the page.

`<nav>`: usually contains a nav bar of some sort (lists)

`<main>`: contains the main content of a page. This can contain article tags, header tags, and others.

`<footer>`: contains the information at the bottom of a page. Contact information, bottom navs, copyright, terms of use, site map.

`<section>`: group related content inside of a main div. Usually done by topic.

`<article>`: contains content that makes sense on it's own. This can be a single article, post, write-up. This would be inside a section.

`<aside>`: contains information that is not needed but can enhance the information presented in an article or section.

`<figure>`: you can insert an img inside here.

`<figcaption>`: inside the figure element, you can insert a caption for the image.

`<audio>`: plays audio files. It can use the "autoplay" and "controls" attributes to enhance it.

`<source>`: goes inside the audio element, and you can use the "src" attribute to specify an audio source.

`<video>`: used for displaying videos. Can take the "src" and "controls" attributes.

`<embed>`: used to embed content into a site, including audio, gifs, and videos. It can also take the "src" attribute.

In general, it is good to use semantic HTML tags when you can. It assists other devs, helps accessibility software do it's job better, and overall makes the code look cleaner and easier to read.
LogoStoreAI - Launch
Tags: logo, ai, chatgpt, openai
Published: 2023-06-11 20:42:11

Hello everyone!

For my new project I decided to focus on something that I always spent a ton of time doing when launching projects which is choosing a logo, so I decided to create a store with AI-generated logos ready to use. 

LogoStoreAI is an extensive library to shop for AI-generated logos plus others icons and image assets.


{% embed https://youtu.be/3BWkLnVfA2w %}



[LogoStoreAI](https://logostoreai.com)

[Twitter](https://twitter/balt1794)

Thank you! 😊
Integrating SAP and GCP Effectively and Simply!
Tags: datascience, database, sap, cloud
Published: 2023-06-11 20:19:51

Hello,

Today I'm passing by to leave a summary of some alternatives to provide data by integrating SAP with GCP in a post on Medium.

To know more:

https://jlgjosue.medium.com/integrating-sap-and-gcp-effectively-and-simply-9f3a51ba8598

Thanks for reading; share this post! :)