teleren/devto huggingface dataset:
What do you use for SSL monitoring?
Tags: launch, webdev, devops, cybersecurity
Published: 2023-09-21 22:43:29

---

## What do you use for SSL monitoring?

Hey fellow devs 👋,

I'm curious, what tools or methods are you currently using for monitoring your SSL certificates? How do you ensure they don't expire unnoticed, potentially throwing a wrench into your users' trust?

I recently rolled out [WatchMySSL](https://watchmyssl.com), aiming to make this monitoring process more seamless. It's a straightforward tool that gives you a heads-up before your certificates are about to expire.

If any of you could take a moment to check it out, I'd genuinely appreciate any feedback or criticism. Continuous improvement is the game!

---
Disable Turbo on the whole application
Tags: rails, hotwire
Published: 2023-09-21 22:20:34

I am working on ["The Turbo Rails Tutorial"](https://www.hotrails.dev/).

## Problem
In [Chapter 7](https://www.hotrails.dev/turbo-rails/flash-messages-hotwire), I can't disable Turbo on the whole application only by writing the below. For example, when I push the submit button it won't return to the homepage.
```js
// app/javascript/application.js
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
```

## Solution
The rule would be changed a bit from Turbo 7.2.x. We can add `data-turbo="false"` to the tag and disable Turbo.
```js
// app/views/layouts/application.html.erb
<body data-turbo="false">
```

## Reference
https://github.com/hotwired/turbo/issues/826
How has the COVID-19 Pandemic Effected Leadership?: CodeNewbie Podcast
Tags: discuss, codenewbie, podcast, career
Published: 2023-09-21 22:19:55

Yesterday on our podcast, [Rachel Nabors](https://twitter.com/rachelnabors), a developer education leader on sabbatical from Big Tech met with @saronyitbarek talk about what they have been up to since they were last on the show in 2017. We discussed the inside scoop on Big Tech, all informed by Rachel’s experience working for companies such as Meta, Amazon, and Microsoft.

Rachel shared with us their experience navigating a changing, and arguably regressing, world in leadership during the COVID-19 pandemic.

They shared:

> #### I think that happened over the pandemic we don’t talk about is that women’s leadership just disappeared off the board.

> #### I feel like there are even fewer women in React now than at the start of the pandemic that I can point to and say, “This is a thought leader.”

> #### And maybe that’s because the social networks might’ve changed.

> #### Maybe they’re all on YouTube or Twitch right now.

> #### But I do think that we saw a pattern during the pandemic of, at least when I was organizing that conference, I noticed originally the set of people who’d confirmed they would speak.

> #### Half of them bowed out because they had to pick up the slack at home and it was too much.

---

The effects of the COVID-19 pandemic are still being felt deeply in many job fields. As we continue to process the ramifications of the pandemic, what have you gleaned from your time in the pandemic alongside your interest in tech? 

Or, more specifically:

### How do you think the COVID-19 pandemic has effected leadership in the developer community?

---

Also, if you didn't get a chance to listen already, find that episode below or wherever you get your podcasts:

{% embed https://dev.to/codenewbieteam/big-tech-what-they-say-vs-what-they-mean-codenewbie-podcast-s25e6-37n7 %}


_Send us your thoughts below and don't forget to give it a listen here or wherever you listen to your podcasts. Be well y'all._ 💜
Aprendendo em camadas
Tags: learning, beginners, programming, productivity
Published: 2023-09-21 22:17:01

## Introdução
Todos nós já nos deparamos em uma certa situação: Ter que conciliar a vida profissional com os estudos, faculdade, provas etc...

E quando nos encontramos nessa situação não há outro caminho a não ser **estabelecer prioridades**, abdicar de algo para priorizar os estudos ou trabalho naquele momento. 
Mas o que não paramos para pensar é que existem muitos **métodos de estudo** que podem nos ajudar a continuar indo bem nos estudos enquanto priorizamos outra área da nossa vida.

O aprendizado em camadas é para ser usado quando temos pouco tempo para dominar algum assunto. Alguns estudos indicam que podemos passar em uma prova sabendo de 20% dos tópicos mais importantes, e tirar uma nota excelente sabendo de 80% dos tópicos com os detalhes. 
## Aprendendo em camadas
O nosso aprendizado é composto por camadas e estruturas, assim como uma casa. Primeiro fazemos o esboço do projeto, levantamos a estrutura e depois focamos nos detalhes. Nosso cérebro aprende da mesma maneira, essas camadas são dividas em três:

- Camada 1: Conceitos 
- Camada 2: Explicação
- Camada 3: Detalhes

A diferença entres as camadas 2 e 3 é que a segunda ajuda a compreender a primeira camada. Já a camada 3 seria um complemento específico ao aprendizado, é o que se colocaria na parte de trás de um flashcard. 

## Passos para aprender em camadas
 1. Começar com uma lista de palavras chave. 
 2. Categorizar as palavras chaves nas camadas.
 3. Focar nos conceitos -> depois os detalhes importantes 
 -> detalhes menos importantes. 

### Na prática
1. Faça uma lista dos tópicos da matéria/capítulo
2. Se pergunte o que é cada tópico e os categorize nas camadas
3. faça um mapa mental desses tópicos
4. Estude de acordo com a prioridade
Very Simple way to handle requests
Tags: javascript, typescript, tutorial
Published: 2023-09-21 22:15:35

### How do you handle fetching in frontend?.... it's a pain right?

When i tried supabase i liked how they handle their request
```js
const { data, error } = await supabaseRequest()

if (error) {
// handle error
 return
}
// since there is not an error
// intellisense will show that data cannot be null 
console.log(data)
```

**IT'S SO SIMPLE!!!**
**IT'S SO SIMPLE!!!**

So I tried replicating the structure but with my own backend and using axios in the frontend

---

### 1st Step
Make sure you are returning ` { data, error} ` in the backend
```js
export const createProduct = async (req: Req, res: Res) => {
  try {
    const newProd = await saveProductDb(req.body);

    return res.status(201).json({ data: newProd, error: null });
  } catch (error) {
    return res.status(400).json({ data: null, error: error.message });
  }
};

```

### 2nd step ( optional, probably )
Initialize Axios Instance / Interceptors
```ts
// Initialize Axios Instance
axios.defaults.withCredentials = true;
const AxiosInstance = axios.create({
  baseURL: BASE_URL,
  withCredentials: true,
});

AxiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    // You can handle errors here
    toast({
      title: error.response.data.error,
      status: "error",
      position: "top-right",
    });
    console.log(error);
    return Promise.reject(error);
  }
);
```

### 3rd step
Initiliaze Types, this is for the intellisense in the responses
```ts
// Initialize Types
type ApiRes<T> = {
  data: T | null;
  error: string | null;
};

type AxiosParsedResponse<T> =
  | { data: null; error: AxiosError<ApiRes<T>> }
  | {
      data: T;
      error: null;
    };
```

### 4th step
Create your Get,Post,Etc axios instances
```ts
export const AxiosGet = async <T>(
  url: string
): Promise<AxiosParsedResponse<T>> => {
  try {
    const res = await AxiosInstance.get<ApiRes<T>>(url);
    return { data: res.data.data!, error: null };
  } catch (err) {
    const error = err as AxiosError<ApiRes<T>>;
    return { data: null, error: error };
  }
};
```
in this example we're using get.

### DONE!
```ts
export const Register = async (userData: RegisterFields) => {
  const { data, error } = await AxiosPost<UserData>("/auth/register", userData);
  // data can be null
  if (error) return;

  // intellisense shows data is not null
  console.log(data);
};
```

There is probably a better way out there to do this please do comment, i want to learn and there are probably more ways to handle request better than this, but i just want to share this because it works for me.

Thanks for reading!



[**SAMPLE IMPLEMENTATION**](https://github.com/mmvergara/agri-connect/blob/master/Frontend/services/AxiosInstance.ts)
Discover the Hidden Powers of PostgreSQL: Lateral Joins and JSON Columns Decoded!
Tags: sql, postgres, database, json
Published: 2023-09-21 22:08:28

Hey there, fellow code enthusiast! 🚀 If you've been dabbling with PostgreSQL and have a decent grasp of general SQL, you're in for a treat today. We're diving deep into the world of lateral joins, especially when dealing with JSON columns. So, grab a cup of coffee, and let's get started!

### What's a Lateral Join Anyway?

Before we jump into the JSON goodness, let's get our basics right. A lateral join in PostgreSQL is like that friend who always brings another friend to the party. In SQL terms, it allows a subquery in the FROM clause to refer to columns of the preceding tables. This is super handy when you want to generate a series of values for each row in a table.

### JSON in PostgreSQL

Now, if you're a developer in the modern world, you know JSON is everywhere. It's like the universal language of data. PostgreSQL, being the awesome database system that it is, offers fantastic support for JSON columns. You can store, query, and even create indexes on them. Sweet, right?

### Marrying the Two: Lateral Joins with JSON Columns

Imagine you have a table `users` with a JSON column `preferences` that stores a list of user's favorite programming languages. It might look something like this:

```sql
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name TEXT,
    preferences JSONB
);
```

Now, let's say you want to extract each programming language for every user. This is where the magic of lateral joins comes into play.

```sql
SELECT users.name, lang.value::text AS language
FROM users, LATERAL jsonb_array_elements_text(users.preferences->'languages') AS lang(value);
```

What's happening here is that for each row in the `users` table, the `jsonb_array_elements_text` function is being applied to the `preferences` column, and the results are being "joined" back to the original row. The result? A neat list of users and their favorite programming languages.

### Why Should You Care?

1. **Performance**: Lateral joins can be a lifesaver when dealing with complex queries, especially with JSON columns. They can help you avoid multiple subqueries and make your queries run faster.
2. **Flexibility**: With lateral joins, you can generate series, compute aggregates, and do a lot more for each row in your table.
3. **Cleaner Code**: Instead of writing lengthy and complicated subqueries, lateral joins can make your SQL code cleaner and more readable.

### Wrapping Up: Join the Lateral Revolution!

Lateral joins, especially with JSON columns in PostgreSQL, are like the secret sauce that can spice up your SQL queries. They offer a powerful way to combine and extract data in ways you might not have imagined.

And hey, if you enjoyed this deep dive and are looking for more insights, tips, and tricks in the world of development, don't forget to follow me! I'm always sharing the latest and greatest from the tech world. Let's keep the code flowing and the knowledge growing! 🚀🔥

*Happy coding!*
Apply caching when restoring NuGet packages using a GitHub hosted runner
Tags: githubactions, github
Published: 2023-09-24 18:39:53

---
title: Apply caching when restoring NuGet packages using a GitHub hosted runner
published: true
date: 2023-09-24 20:00:00 UTC
tags: GitHubActions,GitHub
canonical_url: https://mindbyte.nl/2023/09/22/apply-caching-restoring-nuget-packages-github-hosted-runner.html
---

When you are using a GitHub hosted runner to build your project, you can apply caching to speed up the build process. This is especially useful when you are using NuGet packages. As you get a new runner every time you run a build, you will need to restore all NuGet packages every time. This can take a lot of time as it is not the most efficient network calls.

To speed up the process, you can cache the NuGet packages. This will make sure that the next time you run a build, the NuGet packages will be restored from the cache instead of the NuGet website. To make sure that the cache is invalidated when a new version of a NuGet package is referenced, you can use the hash of the project files as part of the cache key. This will make sure that the cache is invalidated when changes are made to the project files.

For completness sake, I have included a full example of a workflow file that uses caching to speed up the build process. GitHub will automatically add a post step to store the files in the cache.

By setting the `NUGET_PACKAGES` environment variable, you can make sure that the NuGet packages are restored to the same location as the cache. This will make sure that the cache is used when restoring the NuGet packages.

```yaml
name: Build Services
on:
  push:

jobs:
  build:
    runs-on: windows-latest
    name: Build services
    permissions:
      packages: write
      contents: read
    env:
      NUGET_PACKAGES: $/.nuget/packages    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup .NET
        uses: actions/setup-dotnet@v3
        with:
          dotnet-version: 7.0.x

      - uses: actions/cache@v3
        with:
          path: $\.nuget\packages
          key: $-nuget-$ #hash of project files
          restore-keys: |
            $-nuget-

      - name: Restore dependencies
        run: dotnet restore solution.sln 

      - name: Build
        run: dotnet build solution.sln --no-restore
        
      - name: Test
        run: dotnet test solution.sln --no-build --verbosity normal
      
      - name: Publish
        run: | 
          dotnet publish solution.sln -c Release --no-restore -o publish 

      - name: Upload a Build Artifact
        uses: actions/upload-artifact@v3
        with:
          name: services
          path: publish/**
          if-no-files-found: error 

```

This workflow will restore, build, test and package the solution. The resulting package will be uploaded as an artifact and can be deployed in subsequent steps.

Do use the logs to verify that the cache is used and validate if the amount of time that is used is worthwhile.
Elevate Your Typography: Adding Custom Fonts in Next.js 13 with Tailwind CSS
Tags: nextjs, customfonts, configure, development
Published: 2023-09-21 21:33:50


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

### Adding Custom Fonts in Next.js 13 with Tailwind CSS
Before we dive into the process of adding custom fonts, make sure you have the following prerequisites in place:

 - Next.js 13 Project: Ensure you have a Next.js 13 project set up and ready for customization.

 - Custom Font Files: Obtain the .woff, .woff2, or .ttf font files that you want to use. Make sure you have the appropriate licensing for the fonts.
Okk so let's go!!

 - Step 1: Organize Your Fonts
Create a folder within your `public` directory. Naming it 'fonts' is a common convention
```bash
|-- app/
|-- styles/
|-- public/fonts/  <-- Place your custom font files here
|-- ...
```
 - Step 2: Import Fonts in your CSS file (Note: we will setup in our global.css file but you can setup with other css file with same process)
In your project's 'app' directory, open `global.css` file and define the @font-face rule to import your custom fonts:
```css
//app/globals.css

@font-face {
  font-family: 'limelight';
  font-style: regular;
  font-weight: 400;
  src: url('/fonts/Limelight-Regular.ttf') format('truetype'); // mention format of your font
}
```
 - Step 3: Open `tailwind.config.ts/js` file and configure you custom font-family.
```js
// tailwind.config.ts
module.exports = {
  // ...other configuration...

  extend: {
    fontFamily: {
     limelight: ['limelight', 'sans-serif'],
    },
  },
}

```
And that's it can you your `limelight` font-family in anywhere in your project.
i.e
```js
import React from 'react';

const index: React.FC = () => {
  return (
    <p className="font-limelight text-2xl">Thanks for Reading</p>
  );
};

export default index;
```
That's it all configurations are done for setting up the custom fonts in Next.js projects in optimize way.
Thanks for reading buddy see you soon!!
Happy coding! 🚀✨
Mastering React Performance: Tips and Best Practices
Tags: react, performance, frontend, reactjsdevelopment
Published: 2023-09-21 21:24:51

## Introduction
Building a React app is easy. But optimization is the most difficult part. In this article, I will be discussing some of the most popular techniques to master **web performance** in **React**. 

## Code Splitting
**Code Splitting** is one of the most popular techniques for optimizing web performance. In Code Splitting, we split our application into **smaller chunks** and **load them** when needed. `<Suspense/>` and `lazy()` will help us with this. 
```jsx
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));

const Parent = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
```

## Image Optimization
Images can become an **enemy of web performance**. So, we need to use images in the React project cautiously. We can use techniques like **Lazy Loading Images**, **Image Compression**, and **Right Image Formatting** to optimize images in the project. To learn more about Image Optimization in React, check out my blog ["Boosting Performance: Image Optimization in React"](https://dev.to/debajit13/boosting-performance-image-optimization-in-react-1f4g).
```jsx
const App = () => {
  return (
    <div>
      <img src="image.jpg" loading="lazy" height="300px" width="300px" 		/>
    </div>
  );
}
```
## Memoization 
**Memoization** is one of the amazing features of React. **State** and **function** re-rendering is an expensive computational task. To reduce unnecessary re-renders we can use the `useMemo` and `React.memo` functions.
```jsx
const MyComponent = React.memo(TestComponent);
```
## Debouncing and Throttling
Specially for **scroll** and **resize** events we do a lot of re-rendering in React. Implement **debouncing** and **throttling** for **event handlers** to prevent excessive rendering.

## Caching
Caching is one of the most underrated ways to improve performance. Implement **client-side caching** for data that doesn't change frequently to reduce the need for unnecessary API calls.

## Summary
In this article, I have discussed some of the most popular techniques for improving React Performance. If you want to learn more about Frontend Development and Software Engineering check out my profile on [Dev](https://dev.to/debajit13).
Discussion of the Week - v3
Tags: bestofdev, discuss, gamedev
Published: 2023-09-21 21:21:08

In this weekly roundup, we highlight what we believe to be the most thoughtful, helpful, and/or interesting discussion over the past week! Though we are strong believers in healthy and respectful debate, we typically try to choose discussions that are positive in nature and avoid those that are overly contentious.

Any folks whose articles we feature here will be rewarded with our Discussion of the Week badge. ✨

![The Discussion of the Week badge. It includes a roll of thread inside a speech bubble. The thread is a reference to comment threads.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvizv31dpchucxic2lxc.png)

Now that y'all understand the flow, let's go! 🏃💨

## The Discussion of the Week

Y'all give it up for (@godot) who shared the excellent [#gamedev](https://dev.to/t/gamedev)-centric discussion ["Unity New Pricing in 2024 is Absurd"](https://dev.to/godot/unity-new-pricing-in-2024-is-crazy-3hnn):

{% embed https://dev.to/godot/unity-new-pricing-in-2024-is-crazy-3hnn %}

Godot's post does an excellent job of outlining the new pricing updates Unity announced and explaining the ensuing backlash. Quite a few Unity users have concerns and they are not holding back in voicing them... Godot pulled these concerns together in a list, summing them up nicely for us.

After offering up a TL;DR for skimmers like me, Godot's post ends with a handful of helpful questions to get the conversation flowing in the comments. On the note of the comments section, shoutout to @luuk and @tycholarfero for their respectful and informative debate here. It's nice to see well-measured points and counterpoints like this. 🙌 That said, thus far, a read through the comments suggests that this change is unpopular. 

If you have thoughts to share on Unity and this new pricing model, head over to Godot's post and participate in the discussion!

## What are your picks?

The DEV Community is particularly special because of the kind, thoughtful, helpful, and entertaining discussions happening between community members. As such, we want to encourage folks to participate in discussions and reward those who are initiating or taking part in conversations across the community. After all, a community is made possible by the people interacting inside it.

There are loads of great discussions floating about in this community. This is just the one we chose to highlight. 🙂

I urge you all to share your favorite discussion of the past week below in the comments. And if you're up for it, give the author an @mention — it'll probably make 'em feel good. 💚
How to Replace Spaces with Dashes in a JavaScript String
Tags: javascript, webdev, react
Published: 2023-09-21 20:51:08

**Output 1**
```
let myString = "Hello World";
let stringWithoutSpaces = myString.replace(/\s+/g, '-');

console.log(stringWithoutSpaces); // "Hello-World"
```

**Output 2**

```
let myString = "  Hello World ";
let trimmedString = myString.trim();
let formattedString = trimmedString.replace(/\s+/g, '-');

console.log(formattedString); // "Hello-World"
```
A Belated Introduction
Tags: beginners, introductions
Published: 2023-09-21 20:35:17

Hi, I'm Rachel. I joined this community a few years ago, but I quickly got distracted with school and life and never did anything with it. Since then, I had a baby and graduated with my bachelor in IT.  

Now that I'm done with my courses, I have some time to explore my interests and possibly choose a specialization. I've known for a long time that I wanted to work in tech, but I can see myself doing so many different things that it's hard to narrow it down! I started in the computer science program, picturing myself working as a software developer, but I felt bogged down and bored with all the theory of it. I'm a hands-on learner and it was hard to stay motivated and confident in my career direction without learning the tools or ever applying my knowledge. I also had the desire to explore things like hardware and networking, and ultimately decided to switch my major to information technology. I was happy with that direction and learned a ton, but now that I've graduated, I still feel that itch to code. 

At the moment, I am a full-time parent, but I plan to rejoin the work force soon. I'm using this time to explore some possible career paths - namely, web development and/or cloud computing. 

I love to write, so I'm hoping I can use this platform to chronicle my journey, solidify things I've learned, and keep up my momentum. 

I so appreciate your time if you’ve read this far! Whether you’re a fellow learner hoping to break into the industry, or a seasoned professional willing to share their experience, please feel free to say hey!