teleren/devto huggingface dataset:
HTML CSS 基礎 Part 02 -- カードの折り返しを設定する
Tags: html, css, flex
Published: 2023-03-24 05:32:24


## why

カードデザインを並べる時、はみ出しの折り返しが咄嗟に出てこなかった。
なのでまとめておく。

## 結論

前提

1. display flex が適用されている
2. カードが左から右に流れ、画面をはみ出している

この状況の時に、`flex-wrap: wrap` を適用する。
すると画面右にはみ出していたカードが下に出る。

コードと解説は下記

---

## html

```html
<body>
  <div class="container">
    <div class="card">
      card1
    </div>
    <div class="card">
      card2
    </div>
    <div class="card">
      card3
    </div>
    <div class="card">
      card4
    </div>
    <div class="card">
      card5
    </div>
  </div>
  
</body>
```

- container
  - card1
  - card2
  - card3
  - card4

このような構造にする。

---

## css

```css
body {
  background-color: #000;
  color: #fff;
}
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  background-color: #111;
  margin: 0 auto;
  padding: 0;
}
.card{
  background-color: #222;
  margin: 0 auto;
  margin: 10px;

  border-radius: 20px;
  box-shadow: 0 1px 16px;

  min-width: 248px;
  min-height: 522px;
}
```

---

### 背景色

まずみやすくするために背景をつける。
手前側に来るに従って
000 -> 111 -> 222
と色が薄くなるようにする

---

### カードを包むコンテナのサイズ

```css
  margin: 0 auto;
  padding: 0;
```

- 上下マージン 0
- 左右マージン 自動中央揃え
- パディング 0

これでみっちりしたコンテナを作る。
折り返しがあるので、みっちりさせないと違和感が出る。

角は丸めておく。Zoom 準拠

---

### カードを包むコンテナの秩序

前提として flex を使う。
デフォルトなので右に流れていく。
通常だと画面を超えていく。

```css
  flex-wrap: wrap;
```

なので　flex-wrap を使う。
これによって画面のサイズに収まらないカードが出た場合、
画面からはみ出ず、自動的に下に流れてくれる。
Pulumi with Serilog
Published: 2023-03-24 05:27:27

I use Serilog everywhere and I want to do the same in Pulumi projects. It provides all the flexibility I want/need for logging, so I try and bake it into any new project (_unless it's going to be a shared library, in which case I want minimal dependencies_.)

When doing this, we want to ensure we don't lose any of the console logging that Pulumi does.

First thing, add the Serilog [nuget](https://www.nuget.org/packages/serilog/) package. Then what I do is create a method somewhere to configure it. (this can usually go into the config file however with the way Pulumi runs, that doesn't work out so well, didn't for me anyway).

Config method:
```
    public static void ConfigureLogger()
    {
        
        Log.Logger = new LoggerConfiguration()
            .Enrich.FromLogContext()
            .Enrich.WithExceptionDetails(new DestructuringOptionsBuilder()
                .WithDefaultDestructurers()
                .WithDestructuringDepth(8)) // essential to limit the depth
            .WriteTo.PulumiLogSink()
            .WriteTo.File(path: $"{Environment.CurrentDirectory}\\log\\log.txt")
            .CreateLogger();

        Log.Information("Logging configured");

    }
```

Either remove "WithExceptionDetails" or add that [package](https://github.com/RehanSaeed/Serilog.Exceptions). Same with WriteTo.File, I recommend adding, then you have a history.

Then what we need to do, is implement PulumiLogSink...so we don't lose any of the normal Pulumi output.

Info on building a custom sink is [here](https://github.com/serilog/serilog/wiki/Developing-a-sink). Following those instructions our Pulumi sink looks like this:

```
    public class PulumiLogSink : ILogEventSink
    {
        private readonly IFormatProvider _formatProvider;

        public PulumiLogSink(IFormatProvider formatProvider)
        {
            _formatProvider = formatProvider;
        }

        public void Emit(LogEvent logEvent)
        {
            var message = logEvent.RenderMessage(_formatProvider);
            if (logEvent.Level == LogEventLevel.Debug || logEvent.Level == LogEventLevel.Verbose)
                Pulumi.Log.Debug(message);
            if (logEvent.Level == LogEventLevel.Information)
                Pulumi.Log.Info(message);
            if (logEvent.Level == LogEventLevel.Warning)
                Pulumi.Log.Warn(message);
            if (logEvent.Level == LogEventLevel.Error || logEvent.Level == LogEventLevel.Fatal)
                Pulumi.Log.Error(message);
        }
    }

    public static class MySinkExtensions
    {
        public static LoggerConfiguration PulumiLogSink(
            this LoggerSinkConfiguration loggerConfiguration,
            IFormatProvider formatProvider = null)
        {
            return loggerConfiguration.Sink(new PulumiLogSink(formatProvider));
        }
    }
}
```
Finally, the first line of our Pulumi should call `ConfigureLogger()` and voila, serilog logging hooked up so you can add whatever sinks you like. 

Tip, you probably want to add this using: `using Log = Serilog.Log;` to ensure 'Log.' uses serilog and not the Pulumi logger.
If and else statements(C++)
Tags: webdev, programming, beginners, cpp
Published: 2023-03-24 05:16:18

Hello, today we will talk about if and else statements.

The operator" If/else", is called the" condition " operator in C++.

If one condition holds, the If/else operator is used in C++ code. It is an operator, a type of operator where the program can perform actions under all conditions.

Example for If/else:

```
#include <iostream>

using namespace std;

int main() {
  
  int a = 10;
  
  if (a > 5) {
    cout << "a is greater than 5";
  } else {
    cout << "a is less or equal than/with 5";
  }

  return 0;
}

```
In the above code, if variable A is greater than 5, the text "a greater than 5" is output. In another case," A is less than or equal to 5 " must be output.

The syntax used is as follows:

if (conditions) { // if conditions are true, actions must be performed } else { //otherwise, actions must be performed }

If the conditions are correct, the" if "block is executed and otherwise The" else " block is executed.
vectorization engine (oepnGauss)
Published: 2023-02-27 02:43:50

vectorization engine
availability
This feature has been introduced since openGauss version 1.0.0.

Feature introduction
openGauss provides a vectorization engine, usually used in OLAP data warehouse systems. The main reason is that analytical systems are usually data-intensive, and basically use sequential methods to access most of the data in the table, then perform calculations, and finally output the calculation results to users.

value of customer
Through batch calculation, the query performance of complex classes is greatly improved.

Characteristic description
Traditional database query execution adopts the pipeline execution mode of one array (tuple) at a time, so most of the processing time of the CPU is not used to process data, but to traverse the query operation tree. In this case, the effective utilization of the CPU is not high, and it will also lead to low instruction cache performance and frequent jumps. To make matters worse, this method of execution cannot take advantage of new optimization features of modern hardware to speed up query execution. In the execution engine, another solution is to change the mode of one array at a time (tuple) to one column at a time. This is also a basis for our vectorized execution engine.

The vectorization engine is bound to the column storage technology, because the data of each column is stored together in the column storage, and it can be considered that these data are stored in the form of an array. Based on this feature, when the column of data needs to perform a certain operation, a cycle can be used to efficiently complete the calculation of each value of this data block.

The advantages of the vectorized execution engine are:

It can reduce the scheduling between nodes and improve the utilization rate of CPU.
Because the same type of data is placed together, it is easier to take advantage of new optimization features of the hardware and compiler.

dependencies
Depends on column storage.
Send Offline Receiving Messages to Email Notification
Tags: offlineuser, email, notification
Published: 2023-03-24 05:08:41

We were working on the chat application. 
For my case, user might get messages when they are offline. At this time I want to notify them in email that new message from XXX like teams. 
I would like to know how can I achieve this, and what is the way to implement this.

Platform Working - Web-React, AND & IOS.

I'm trying to identify which way we can use to implement this logic and what steps we need to take care. Also it would be helpful if you share useful links
How to Effectively Read Code: Tips and Strategies
Tags: webdev, tutorial, programming, beginners
Published: 2023-03-24 04:29:04

Reading code is an essential skill for developers. Whether you're working on a new project or trying to understand someone else's code, being able to read and understand code is crucial for success. However, reading code can be a daunting task, especially for beginners. In this post, we'll explore some tips and strategies to help you read code effectively.

**1. Start with a clear understanding of the problem** 🤔
Before you start reading the code, it's important to have a clear understanding of the problem the code is trying to solve. This will help you put the code in context and understand its purpose. Make sure you have a clear understanding of the requirements and any constraints before you start diving into the code.

**2. Take it step by step** 🚶‍♂️
Don't try to read the entire codebase in one go. Instead, take it step by step. Start by identifying the entry point of the code, which is usually the main method or function. From there, follow the code's flow, one step at a time. Take your time and make sure you understand each step before moving on to the next.

**3. Use comments and documentation** 📝
Comments and documentation can be extremely helpful when reading code. Look for comments that explain the purpose of a particular block of code or function. Documentation can provide a high-level overview of the codebase and help you understand its structure and organization.

**4. Break the code down into smaller parts** 🔍
If you're having trouble understanding a particular block of code, try breaking it down into smaller parts. Look for patterns and try to identify any recurring code blocks. This will help you understand the code's structure and make it easier to read.

**5. Experiment with the code** 💡
One of the best ways to understand code is to experiment with it. Make small changes to the code and see what happens. This will help you understand how the code works and give you a better understanding of its purpose.

**6. Use a debugger** 🐞
Debuggers are tools that allow you to step through code and see how it's executed. This can be extremely helpful when trying to understand how code works. Use the debugger to step through the code and see how it's executed. This will give you a better understanding of how the code works and help you identify any issues or bugs.

**7. Practice, practice, practice** 💪
Reading code is a skill that takes practice. The more you read code, the better you'll get at it. Take the time to read and understand code from different projects and in different programming languages. This will help you develop your skills and become a better developer.

In conclusion, reading code is an essential skill for developers. By following these tips and strategies, you'll be able to read code effectively and become a better developer. Remember to take it step by step, use comments and documentation, break the code down into smaller parts, experiment with the code, use a debugger, and practice, practice, practice. Happy coding!
Rate Limiting
Tags: architecture, beginners, tutorial, systems
Published: 2023-03-24 04:28:31

We briefly discussed rate limiting in [Endpoint Protection](https://dev.to/pragyasapkota/endpoint-protection-1hm0). Let’s see it in detail here.

Rate Limiting is defined as a way that prevents the overflow of frequency of any operations than a defined limit. The main functionality of rate limiting in [distributed systems](https://dev.to/pragyasapkota/distributed-system-the-definition-nkh) is to maintain availability by sharing resources evenly. They even protect the underlying services and resources on large-scale systems, so they function properly. In addition, your API can stay safe from overuse since the number of requests is limited to reach the API in each time gap.

## Algorithms

### 1. Leaky Bucket

It is a simple algorithm that handles rate limiting via a queue by adding the requests at the end of the queue for the first in, first out (FIFO) time interval. In a case where the queue is full, new requests are discarded.

### 2. Token Bucket

This uses the concept of a bucket where a request comes in and the bucket provides a token to process. The request is refreshed occasionally, and if the token expires, you need to request again.

### 3. Fixed Window

There is a window size of n seconds that looks for a fixed window algorithm rate. When a request is made, the window counter is incremented which is discarded in case the counter exceeds the threshold.

### 4. Sliding Log

This tracks the time-stamped logs for each request stored in a time-sorted hash table. The new requests follow calculating the sum of logs that help find out the request rate. When the timestamps lie beyond the threshold, it discards those logs and when the request would exceed the threshold rate, it is held.

### 5. Sliding Window

Further, we have a hybrid approach — a sliding window. It combines the fixed window and sliding log algorithms to bring together the low processing cost and better boundary conditions. We can even counter for each fixed window. Then, we look at the weighted value of the previous window’s request rate based on the current timestamps that smoothen the traffic bursts.

## Advantages

- Denial of Service (DoS) attacks helps prevent resource starvation.
- Rate limiting helps as a defense wall against some attacks.
- Rate limiters can control the flow of data when there are large amounts of processed data.
- Operational costs are controlled with the virtual cap on the auto-scaling of resources. This is vital because if not they are not kept in check, there might be even more exponential bills.

**_I hope this article was helpful to you._**

**_Please don’t forget to follow me!!!_**

**_Any kind of feedback or comment is welcome!!!_**

**_Thank you for your time and support!!!!_**

**_Keep Reading!! Keep Learning!!!_**
1466. Leetcode Solution in cpp
Tags: cpp
Published: 2023-03-24 03:25:57

```cpp
class Solution {
 public:
  int minReorder(int n, vector<vector<int>>& connections) {
    vector<vector<int>> graph(n);

    for (const auto& conn : connections) {
      graph[conn[0]].push_back(conn[1]);
      graph[conn[1]].push_back(-conn[0]);  // - := conn[0] -> conn[1]
    }

    return dfs(graph, 0, -1);
  }

 private:
  int dfs(const vector<vector<int>>& graph, int u, int parent) {
    int change = 0;

    for (const int v : graph[u]) {
      if (abs(v) == parent)
        continue;
      if (v > 0)
        ++change;
      change += dfs(graph, abs(v), u);
    }

    return change;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/reorder-routes-to-make-all-paths-lead-to-the-city-zero/
[shorts] Comando nohup Linux — Deixar executando comandos após sair no Linux
Tags: linux
Published: 2023-03-24 02:17:54

## Introdução

Já precisaram deixar rodando um certo script em segundo plano no Linux e a sessão do seu usuário caiu e você perdeu a execução?

Ou, precisaram deixar executando um script em segundo plano e precisaram sair da sua sessão?

Sua solução é o comando nohup! 😉

## Sobre o comando nohup

O comando nohup irá ignorar qualquer sinal de hangup e irá continuar o seu script e irá gravar a saída no arquivo nohup.out no diretório que o comando nohup foi executado.

## Explicando o comando

```sh
nohup watchdog.sh &
```

`nohup` Comando

`watchdog.sh` Script ou comando que será executado

`&` Comando para rodar script ou comando em background

## Conclusão

Espero que o artigo seja útil como foi para mim. Há algumas semanas atrás precisei deixar um script rodando sem ficar logado na máquina e não sabia como fazer isso. Pesquisei e achei essa lindeza!
Fazer backup de uma tabela de um banco de dados
Published: 2023-03-24 02:12:11

Algumas vezes precisei fazer um backup bem específico de somente uma tabela de um banco de dados, seja para me precaver de um possível erro na criação da tabela, proteger os registros de uma alteração em lote ou a criação de uma nova tabela baseada numa consulta beeem específica.

## Backup de uma única tabela

```sql
-- Fazer o backup de uma única tabela 

create table 
auditoria_insert_bkp as (select * from auditoria_insert);
```

## Variações
Existem outras variações dependendo da sua necessidade e motivações como, por exemplo, instruções com JOIN, WHERE, etc.

```sql
-- Criando uma tabela baseada na coluna 'codigo_old' da tabela 'cor' 

create table cor_bkp as (select codigo_old from cor);

-- Criando uma tabela filtrando pela coluna 'pessoa' da tabela 'auditoria_insert' 

create table auditoria_insert_tabela_pessoa as (select *
                                                from auditoria_insert
                                                where tabela = 'pessoa'
                                                order by tabela);

-- Criando uma tabela filtrando pela coluna 'pessoa', pelo intervalo de data da coluna 'data' e ordenando pela coluna 'tabela' da tabela 'auditoria_insert' 

create table auditoria_insert_tabela_pessoa as (select *
                                                from auditoria_insert
                                                where tabela = 'pessoa'
                                                  and data between '2022-01-01' and '2022-05-26'
                                                order by tabela);
```

## Para Consulta

[SQL: CREATE TABLE AS Statement](https://www.techonthenet.com/sql/tables/create_table2.php)
[SQL CREATE TABLE Statement](https://www.w3schools.com/sql/sql_create_table.asp)
[SQL SELECT INTO Statement](https://www.w3schools.com/sql/sql_select_into.asp)
[shorts] Acompanhar alterações em um arquivo com o comando Tail Linux
Tags: beginners, linux
Published: 2023-03-24 02:02:17

## Introdução

O comanda `tail` é aquele utilizado para ler o conteúdo do final de um arquivo de log, por exemplo. Ele tem várias opções que podem serem úteis nosso dia a dia. Uma as opções que acho que muito útil, é acompanhar o log de algum serviço que estou executando.

## Como Usar

```sh
tail -f nome_do_arquivo
```

Executando o comando acima, o conteúdo do final do arquivo ficará sendo atualizado em tempo real.

## Conclusão

Isso foi uma dica rápida e que eu utilizo muito no meu dia. Espero que tenha sido útil para você. Pretendo fazer essas dicas mais vezes por ser algo rápido de se fazer!

Até mais!
Wakatime
Tags: wakatime, productivity
Published: 2023-03-24 01:34:08


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

Já faz um tempo que utilizo WakaTime para acompanhar minhas horas trabalhadas em cada projeto, seja ele do meu trabalho ou freela. Achei que seria útil eu fazer um pequeno artigo sobre essa ferramenta sensacional.

# Sobre a Dashboard

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


O WakaTime possui uma Dashboard que te dá uma visão muito interessante dos projetos que você está trabalhando. Logo de cara, você tem:
1. um gráfico de linha por horas trabalhadas por projetos,
2. um gráfico de barras verticais com as horas totais por dia,
3. um gráfico com a hora do dia que você trabalhou e em qual projeto,
4. um gráfico de média diária (aqui você acompanha se está dentro da sua média - sensacional!),
5. um gráfico em pizza com as linguagens que você trabalhou em horas e
6. um gráfico em pizza com os editores ou IDEs que você trabalhou.

Tudo isso de forma bem prática e acessível logo de cara! Os gráficos possuem certas interações como, por exemplo, ver os detalhes.

# Sobre os Goals (Metas)

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

Aqui, é uma das partes mais sensacionais que eu acho do Wakatime. Você pode criar metas baseado em:
1. horas gerais,
2. por projeto,
3. por linguagem (particularmente útil quando se está estudando uma nova linguagem) e
4. utilizando um editor (…)

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

Você pode escolher os dias que não serão contabilizados nas suas metas, por exemplo, Domingo.

No meu caso, tenho metas por projeto e por linguagem. Metas por projeto eu uso para acompanhar minhas horas no meus projetos pessoais e freelas. Já para metas por linguagem, eu utilizo para fins didáticos, por exemplo, hoje, eu estou estudando Angular (angular 2+) e eu acompanho minhas horas estudadas pelo Wakatime! Tudo isso escolhendo os dias que não deverão serem contabilizados. Sensacional, não?!

# Integração com editores de texto e IDEs

Outro ponto bacana! Ele se integra com os editores e IDEs mais famosos que temos, como o VSCode e PHPStorm. No PHPStorm, eu precisei instalar o plugin do WakaTime e colocar a API KEY no plugin e pronto!
Ele também oferece integração com o Gitlab, Github, Bitbucket e entre outros.

# Conclusão

O WakaTime, para mim, tem um registro muito preciso da hora em que você estava digitando e contabiliza isso muito bem. Hoje, ele faz parte do meu dia a dia e tem me ajudado a entender os dias e horas que estou mais produtivo.

> Não se gerencia o que não se mede, não se mede o que não se define, não se define o que não se entende, e não há sucesso no que não se gerencia
> - William Edwards Deming (1900–1993)

> Mata o tempo e matas a tua carreira
> - Bryan Forbes (1926–2013)
What We Learned About Leveling Up from Alice Goldfuss: CodeNewbie Podcast
Tags: codenewbie, beginners, career, podcast
Published: 2023-03-24 01:03:49

[Alice Goldfuss](https://twitter.com/alicegoldfuss?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) came onto our podcast yesterday and talked to us about her prior experience advancing in her career and how she builds resilient distributed systems at scale. 

Find the full episode here: {% embed https://www.codenewbie.org/podcast/coding-in-2020-and-beyond %}

SO, (as always) we listened to it and compiled some different things we learned about advancing your career in tech that Alice shared with us. 

1. **There are communities that can help you learn and explain things that may be confusing to you— you are not alone in your coding journey.**

2. **There is no shame in taking a job that will give you money.**

3. **Asking for harder challenges at work is an easy way to level up your skills.**

4. **Look for other forms of happiness outside just your job so that your life is defined by more than your work.**


If you listened— what did you learn? Do you have any tips on leveling up?

Send us your thoughts below and don't forget to give it a listen here or wherever you listen to your podcasts! 💜