teleren/devto huggingface dataset:
Advice for new DevOps
Published: 2023-03-21 22:47:01

New Developers and DevOps Engineers ask me for career advice. It's not always clear what skills are useful in the market, and which jobs are fun and rewarding.

**Move adjacent to do Security work**

You're a professional looking to for a niche in the market. All companies need security help, and they know it, and will pay for it. Help them.

Often (feature) Developers see security as a distraction from building features, so working with companies to ensure they have strong security is a good career move.

I worked with a bank building a "secure cloud" on top of a public cloud. That is, our team got a long list of requirements, like "storage buckets encrypted at rest". Our software watched for cloud changes, then alert or fix the issue.  The bank got to use the public cloud, but also had a much finer-grained control of a lot of security concerns.

The project was easy enough (accept events, parse them, make API calls), but it produced a *ton* of value for the bank.

For me it was extra fun. I'm writing a book on Feedback Loops. For the bank project they had 1) unit tests (fast dev feedback), 2) pre-canned event tests (same), 3) BDD-style integration tests (slow, quality feedback). In addition I wrote a custom security linter. The bank could say "all EKS clusters now need an extra encryption parameter", and my code would scan *500* different security plugins for the relevant code. We could go in and fix 10 plugins vs 500, it was much easier.

If you're a Dev or DevOps Engineer, consider doing Security work. It's very rewarding and *always* needed by businesses.
Performance Optimization using Code Splitting - Day 2 of 30 Days of React Tips and Tricks
Tags: webdev, javascript, react, programming
Published: 2023-03-21 22:46:28

As applications grow larger and more complex, it can become challenging to maintain good performance. One way to tackle this issue is by optimizing your application's performance using code splitting. In this article, we will explore how to use code splitting to improve the performance of your React application.

**What is code splitting?**

Code splitting is a technique that allows us to split your JavaScript code into smaller chunks that can be loaded on demand. This means that instead of downloading the entire JavaScript file, the browser will only load the code that is required for the current page or component. By loading only the necessary code, we can reduce the initial load time of our application, resulting in a faster and more responsive user experience.

**How to use code splitting in React**

React provides a built-in mechanism for code splitting called Dynamic Import. Dynamic Import allows us to load a module asynchronously, which means that the code will be loaded only when it is needed. Here is an example of how to use Dynamic Import in React:

```javascript
import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}
```

In the code above, we are using the lazy function to load MyComponent asynchronously. We wrap the component inside the Suspense component and provide a fallback component in case the component takes longer to load.

**Benefits of code splitting**

_Improved performance_: By loading only the necessary code, we can reduce the initial load time of our application, resulting in a faster and more responsive user experience.

_Reduced bundle size_: By splitting our code into smaller chunks, we can reduce the size of our application bundle, making it easier and faster to download.

_Better user experience_: By optimizing our application's performance, we can provide a better user experience, resulting in happier and more satisfied users.

**Conclusion**

Code splitting is an essential technique for optimizing the performance of our React application. By loading only the necessary code, we can reduce the initial load time of our application, resulting in a faster and more responsive user experience. If you want to learn more, stay tuned for the next post in our 30 React Tips and Tricks series.
Hello From a Newbie Bootcamp Student
Published: 2023-03-21 22:33:06

Hello! Just writing this as an exercise to get myself comfortable utilizing dev to write blog posts. I'll be utilizing this site as a study tool for myself to help me drill in the information I'm learning, and as a way for me to begin contributing to the developer community. 

I'm currently a Day 2 Software Engineering Student with a focus on front-end and UX!

If anyone else is (relatively) new to learning how to program leave a comment below so we can grow together!
Introducing: Hot Potato 🥔🔥 for Todoist
Tags: nextjs, webdev, serverless, hotpotato
Published: 2023-03-21 22:00:18

I made a small thing this weekend. I use it myself and I was curious if others might be interested as well.

## Introducing: Hot Potato 🥔🔥 (working title, lol)

**Summary**: Automatically prioritize slacking tasks in Todoist. Link: https://hotpotato.cattlea.com (open to product/domain name suggestions if this thing gets used by more people).

Visit the site, click "Connect with Todoist". That's the gist of it for now! Hot Potato now monitors changeing tasks and checks if the due date is delayed. If it is, it automatically one-ups the priority of that task.

This way, slacking tasks that get pushed forward automatically become more visible.

Your task becomes a "Hot Potato"; the more it slacks, the hotter it gets.

--

### Disclaimer / FAQ;

- There might sometimes be a slight delay between updating the task and chaning the priority. This is because it's listening for webhook events from Todoist which aren't always instantaneous.

- This is very much a hobby/beta project. Things can change and things can break. Use at your own risk.

- When you click the "Delete my account" button in the account section, you're entirely removed from the app, so you can stop using it at any time.

- I slapped this thing together in a couple of days even though I only used tools I never used before: NextJS 13, React, Vercel hosting and the PlanetScale serverless MySQL database.

Please feel free to share all the feedback you have. I'm open to (feature) suggestions!

Leave a comment down below or @_its_robin on Twitter and Dev.to
Episode 23/11: TypeScript 5, Ng-Poland Videos, Cypress 12.8 & NgRx 15.4
Tags: angular, webdev, javascript, programming
Published: 2023-03-21 21:53:31

Last week, we had the final release of TypeScript 5 which comes with stable support for decorators. In addition, Ng-Poland released some of their conference recordings.

{% embed https://youtu.be/wiix70gqkJs %}

## TypeScript 5

The beta version of TypeScript 5 was already covered in episode  23/4. Since then, there weren't any significant changes. So TypeScript 5 was released last week, and it came with stable support for decorators.

{% embed https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/ %}

In terms of the JavaScript standardisation process, decorators are already in stage 3 of 4. There is one exception, though. Parameter Decorators are in stage 2 and therefore are not available in TypeScript 5.

For more information, I'd recommend to read the official blog post or watch Matt Pocock's video.

{% embed https://youtu.be/iOTAFRFgm8I %}

There is already a PR for Angular itself. We'll see if it TypeScript 5 lands in 15.3 or in 16. For the time being, Angular will not use the stable version of the decorators but stays with the experimental one.

{% embed https://github.com/angular/angular/pull/49464 %}

## Ng-Poland Videos

Ng-Poland released four video recordings from their conference last cover. You can find them on YouTube. The talks cover topics like best practices on how to setup successful teams in an enterprise environment. Or bringing in ideas from the hexagonal architecture, which we usually find in the backend.

{% embed https://youtu.be/9gmQXaZy588 %}

{% embed https://youtu.be/2hv0piaWnW0 %}

{% embed https://youtu.be/nNIUTBHaiG8 %}

{% embed https://youtu.be/fMOQjgSCWnI %}

## Minor Versions

Cypress, a testing framework, went up to 12.8. It added a tiny feature that allows to disable the logs of the network interceptor.

{% embed https://docs.cypress.io/guides/references/changelog#12-8-0 %}

And NgRx, the most used library for state management in Angular, made it up to 15.4.

{% embed https://ngrx.io/ %}
Day 718 : Don't Touch That Dial
Tags: hiphop, code, coding, lifelongdev
Published: 2023-03-21 21:50:28

_liner notes_:
- Professional : Got up a little early to sit in on a team member practicing for a talk they have coming up. It was really good. I didn't know much about the topic, but by the end I got a pretty good basic understanding. A little while after, I took part in a presentation to the team and demoed a couple of things that I've been working on. Then there was a company-wide town hall thing. After that, I met with my manager and talked about some stuff I've been working on and what I'll be doing this week. Spent the rest of the day working on those things. Made some progress.

- Personal : Last night I went through tracks for the radio show, worked on my side project and watched an episode of "Vinland Saga" and "Spy x Family" before going to bed.

![A field with a lot of grass, shrubs, and bushes in Waiheke Island, New Zealand with 2 llamas, one white and one brown, looking at the camera](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi68mz65so1ei1qcxoy1.jpg)

Looking to do a replay of last night. I've been thinking of ways to cut down on the calls to the backend of my side project. Ever since I found out that the service I'm using has a limit of 500 calls an hour, I've been thinking of ways to lessen how many times I need to make a request. The limit should be fine, but I want to help make sure. Will I get it to work? Don't touch that dial and find out. haha.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 5dZTxABxxHQ %}
ChatGPT Session
Tags: chatgpt
Published: 2023-03-21 21:50:21

Now, we are talking about the ChatGPT of OpenAI. This is really excellent and funny to work with it. 

ChatGPT will help a lot of things for developers as well, and we can build up a great service using it and get from it. 

I would like to open a session to discuss how we use ChatGPT in our developer's life. 

Hope to hear your thoughts
How to add Nprogress to SvelteKit
Tags: svelte, javascript, webdev, tutorial
Published: 2023-03-21 21:16:00

You may be wondering how to add Nprogress to SvelteKit. This is a simple guide to help you get started.

We first need to install nprogress to SvelteKit. To do this, we can run the following command:

```bash
npm install nprogress # or pnpm install nprogress or yarn add nprogress
```

## Step 2: Modify the layout

We need to modify the layout to add the nprogress bar. Create or modify the layout file in `src/routes/+layout.svelte` to add the following code:

```html
<script>
    import "nprogress/nprogress.css";
    import NProgress from "nprogress";
      import { navigating } from "$app/stores";


    NProgress.configure({
        // Full list: https://github.com/rstacruz/nprogress#configuration
        minimum: 0.16,
    });

    $: {
        if ($navigating) {
            NProgress.start();
        } else NProgress.done();
    }
</script>
```

Here we are importing the nprogress css and the nprogress library. We are also importing the navigating store from the app store. We are then configuring the nprogress bar. We are then using a `$:` block to check if the user is navigating. If they are, we start the nprogress bar. If they are not, we stop the nprogress bar.

## Typescript

Here is the typescript version of the above code:

```html
<script lang="ts">
    import "nprogress/nprogress.css";
    import NProgress from "nprogress";
    import { navigating } from "$app/stores";

    NProgress.configure({
        // Full list:
        minimum: 0.16,
    });

    $: {
        if ($navigating) {
            NProgress.start();
        } else NProgress.done();
    }
</script>
```

Make sure to add the `lang="ts"` attribute to the script tag. And also install the typescript types for nprogress:

```bash
npm install @types/nprogress # or pnpm install @types/nprogress or yarn add @types/nprogress
```

## Conclusion

That's it! You now have nprogress added to your SvelteKit app. You can now navigate around your app and see the nprogress bar.
How to use the IDisposable interface in event handlers in C#
Tags: programming, beginners, csharp, dotnet
Published: 2023-03-21 20:56:27

The `IDisposable ` interface provides a way to release unmanaged resources such as file handles, network connections, and database connections when they are no longer needed. The following code demonstrates how to implement the IDisposable interface in an event handler to ensure that objects are properly disposed of when they are no longer needed.

```c#
using System;
using System.IO;

namespace Example
{
    class Program
    {
        static void Main(string[] args)
        {
            using (var handler = new EventHandler())
            {
                handler.SomeEvent += (sender, e) =>
                {
                    Console.WriteLine("Event fired!");
                };

                Console.ReadLine();
            }
        }
    }

    class EventHandler : IDisposable
    {
        private FileStream _fileStream;

        public event EventHandler<EventArgs> SomeEvent;

        public EventHandler()
        {
            _fileStream = new FileStream("test.txt", FileMode.Create);
        }

        protected virtual void Dispose(bool disposing)
        {
            if (disposing)
            {
                if (_fileStream != null)
                {
                    _fileStream.Dispose();
                    _fileStream = null;
                }
            }
        }

        public void Dispose()
        {
            Dispose(true);
            GC.SuppressFinalize(this);
        }

        ~EventHandler()
        {
            Dispose(false);
        }
    }
}

```
In this example, we create a custom `EventHandler` class that implements the IDisposable interface. The EventHandler class has a FileStream field named _fileStream that is used to create a file. The class also has an event named SomeEvent that can be raised by the client code.

In the Main method, we create an instance of the EventHandler class using the using statement to ensure that the instance is properly disposed of when it is no longer needed. We then attach an event handler to the SomeEvent event. Finally, we wait for user input before exiting the program.

The EventHandler class overrides the Dispose method to release any unmanaged resources that it is holding onto. The Dispose method is also responsible for suppressing the finalization of the object if it is called by the client code.

In the event handler for the SomeEvent event, we simply print out a message to the console to indicate that the event has been fired.

By using the IDisposable interface in our EventHandler class, we can ensure that any unmanaged resources are properly disposed of when the instance is no longer needed. This helps prevent memory leaks and other resource-related issues that can cause problems in your application.
#DEVDiscuss: The Future of AI
Tags: devdiscuss, ai, machinelearning, chatgpt
Published: 2023-03-21 20:54:33

*image created by [Margaux Peltat](https://www.patreon.com/margauxpeltat) for the [Chilled Cow YouTube channel](https://www.youtube.com/watch?v=lTRiuFIWV54)*

Time for #DEVDiscuss — right here on DEV 😎

Inspired by @brownrita460's [Top 7 post](https://dev.to/devteam/top-7-featured-dev-posts-from-the-past-week-1cpi), tonight’s topic is...**the future of AI** 🤖🔮

{% embed https://dev.to/brownrita460/what-is-the-future-of-ai-n4o %}


---
Questions:
- **How do you think the proliferation of AI will affect society over the next 10 years? How about 20 years? 100 years?**
- **How does this topic make you feel? Scared, excited, optimistic, cynical, or skeptical? Or something else?**
- **Any triumphs, fails, or other stories you'd like to share on this topic?**
Learning TypeScript with Exercism
Tags: typescript, javascript, exercism, challenge
Published: 2023-03-21 20:52:28

I've been wanting to learn TypeScript, so I recently started doing TypeScript problems in [Exercism](https://exercism.org/).

Exercism is great if you want to expand your knowledge of a language through challenges and problems.

![stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpd507sa2czn38ox6aim.png)
I'm nearly halfway through my TypeScript track and I've learnt so many new things in TypeScript like how to create and use classes.

I'm storing all my answers to the challenges on this GitHub repo:
{% embed https://github.com/VulcanWM/typescript_exercism %}

I'm hoping to get this track completed in less than a month, so I can start creating cool websites with TypeScript!
Multiples Postgres databases in one service with Docker Compose
Tags: docker, postgres
Published: 2023-03-21 20:36:35

---
title: Multiples Postgres databases in one service with Docker Compose
published: true
description: Multiples Postgres Services with Docker Compose
tags: docker, postgres
# cover_image:
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-19 16:51 +0000
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hbribpzdsrwf96miict.png)

Sometimes, we need to have multiple database instances to test our projects. Until now, Docker and Docker Compose don't have an easy alternative to resolve this. 

Some people (and I) have gotten around this by creating services for each database they need:

```yml
### docker-compose.yaml
services:
  postgres_1:
    image: postgres:latest
  postgres_2:
    image: postgres:latest
```


I resolved this by adding a new entrypoint and setting a environment var in the Docker Compose Service for Postgres:

The container entrypoint:
```bash
### entrypoint.sh
#!/bin/bash

set -e
set -u

function create_user_and_database() {
	local database=$1
	echo "  Creating user and database '$database'"
	psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" <<-EOSQL
	    CREATE USER $database;
	    CREATE DATABASE $database;
	    GRANT ALL PRIVILEGES ON DATABASE $database TO $database;
EOSQL
}

if [ -n "$POSTGRES_MULTIPLE_DATABASES" ]; then
	echo "Multiple database creation requested: $POSTGRES_MULTIPLE_DATABASES"
	for db in $(echo $POSTGRES_MULTIPLE_DATABASES | tr ',' ' '); do
		create_user_and_database $db
	done
	echo "Multiple databases created"
fi
```
And the docker-compose service:
```yml
### docker-compose.yaml

  postgres:
    image: postgres:alpine
    container_name: postgres
    restart: unless-stopped
    ports:
      - 5432:5432
    environment:
        POSTGRES_PASSWORD: "postgres"
        POSTGRES_MULTIPLE_DATABASES: users, products, orders
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U postgres"]
      interval: 5s
      timeout: 5s
      retries: 5
   volumes:
     - ./<path-of-the-entrypoint>/multiple-databases.sh:/docker-entrypoint-initdb.d/multiple-databases.sh

```
Using regex with make find-and-replace in VS Code
Tags: vscode, productivity
Published: 2023-04-09 11:00:37

---
title: Using regex with make find-and-replace in VS Code
published: true
date: 2023-03-21 20:20:00 UTC
tags: vscode, productivity
canonical_url: https://rachsmith.com/using-regex-with-and-find-and-replace/
---

The context for how and why is [too niche](/learning-in-public-is-complicated/) for me to go in to here, but I had a bunch of files where I needed to change all instances of this:

`'FileClient:1643853467530'`

to this:

`'PenVersionFileClient:{"cpid":"1643853467530"}'`

Except for each instance, the id value (the number) was different.

I wanted to keep the number in there, but change the text that wraps it.

Because I needed to replace text on either side of the number, a simple find-and-replace term wasn't going to work. I needed regex.

To turn on search using regex, you want to make sure this option is selected:

![A screenshot of VS Code's search sidebar with "Use Regular Expression" selected](https://rachsmith.com/images/regex-search.png)

To replace the text on either side of text, you want a regular expression that follows this pattern:

`/BEFORE_TEXT(.+?)AFTER_TEXT/`

where `BEFORE_TEXT` and `AFTER_TEXT` match the text on the left and the right of the text you want to wrap-replace.

Then, in the Replace input of the Search UI, you add a `$1` to wherever you want the original text to go.

`NEW_BEFORE_TEXT$1NEW_AFTER_TEXT`

For my case above, I used this:

**Search** : `'FileClient:(.+?)'`   
**Replace** : `'PenVersionFileClient:{"cpid":"$1"}'`
Checkbox marcar todos
Tags: javascript, webdev, programming
Published: 2023-03-21 20:18:44

O Script abaixo permite que você marque todos os checkbox em uma grid, apenas colocando o id do **#checkTodos** que ira ser utilizado para marcar todos percorrendo o id do **#check** comum utilizando o laço de repetição for após uma condicional que valida se o **#checkTodos** = **true**.

```JS
<script>
    const checkbox = document.getElementById('checkTodos');
    checkbox.addEventListener('click', () => {
        var meuInput = $('#checkTodos');
        var estaSelecionado = meuInput.prop('checked');
        if (estaSelecionado) {
            var elementos = document.querySelectorAll('.check');
            for (var i = 0; i < elementos.length; i++) {
                if (!elementos[i].checked) {
                    elementos[i].checked = true;
                } else {
                    elementos[i].checked = true;
                }
            }
        } else {
            var elementos = document.querySelectorAll('.check');
            for (var i = 0; i < elementos.length; i++) {
                if (!elementos[i].checked) {
                    elementos[i].checked = false;
                } else {
                    elementos[i].checked = false;
                }
            }
        }
    });
</script>
```