teleren/devto huggingface dataset:
React CSS Grid
Tags: css, grid, react, beginners
Published: 2022-09-25 22:43:25

1. Creating our app

```
npx create-react-app my-react-grid  
cd my-react-grid
code .
```
2. Cleaning up our app:
Delete everything in our App.js 
add four divs:
1) Container
2)header 
3)main body
4)footer 
it should look like this once you're done.

```
import "./App.css";

function App() {
  return (
    <div className="grid-container">
      <div className="header-container">Header</div>
      <div className="body-container">body</div>
      <div className="footer-container">Footer</div>
    </div>
  );
}

export default App;

```

Next is cleaning up our app.css:
Delete everything and add the following code:

```
.grid-container {
  display: grid;
  grid-template-areas:
    "header header header header header header"
    "body body body body body body"
    "footer footer footer footer footer footer";
  gap: 10px;
  padding: 10px;
}

.header-container {
  grid-area: header;
}
.body-container {
  grid-area: body;
  height: 100vh;
}
.footer-container {
  grid-area: footer;
}
```

The grid template area is where we establish the cells in the grid and assign them names.
grid-area property specifies a grid item's size and location in a grid layout. 
Giving the body a height of 100vh allows it to take the maximum height, pushing the header to the top and the footer to the bottom.
A way to enable ANSI escape sequences in the Windows virtual terminal using Python
Tags: python, firstpost, console
Published: 2022-09-25 22:35:41

One of the projects that I'm currently working on is an implementation of [the classic Spider Solitaire game](https://en.wikipedia.org/wiki/Spider_(solitaire)) that is played in the console, made using Python. 

To make the output easier on the eyes, I intended to change the colour of a few details using escape sequences, as I've used them before. During my first test to see if I managed to format the output correctly, I was surprised to see the sequences in string format:

```
←[90mXX←[97m ←[90mXX←[97m ←[90mXX←[97m ←[90mXX←[97m ←[90mXX←[97m
```

This was even more surprising as I had already implemented [2048 in a similar way](https://github.com/slendersnax/python-2048), in the console, and it was working fine.

After some digging, I found out that while the Windows terminal supports ANSI escape sequences, this feature _isn't enabled by default_. You have to [enable it from within the application](https://learn.microsoft.com/en-us/windows/console/console-virtual-terminal-sequences#example-of-enabling-virtual-terminal-processing), something which is pretty easily done [in Python as well](https://stackoverflow.com/a/60194390).

I was still wondering why it was working in the 2048 implementation but not in this project, and I managed to figure it out after some inspection. I still hadn't implemented cleaning the screen in Spider Solitaire, which I did with the `os` module:

```
os.system("cls")
```

Or, since I was planning on porting it to Linux anyway, as little effort as that may require with Python:

```
os.system("cls" if os.name == "nt" else "clear")
```
Suddenly, the output was coloured:

![the result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz06oouf3dmxmvxh69u4.png)

I had to implement clearing the screen anyway, but I never expected that this little bit of code had such an overarching effect. 

I'm not sure if Microsoft knows of this, as their page about [clearing the console screen](https://learn.microsoft.com/en-us/windows/console/clearing-the-screen) also includes enabling the escape sequences. It may just be the overconfidence of youth talking, though.

To check that it wasn't some background Python magic I wrote a small C++ program to check:

```
#include <iostream>
#include <windows.h>

int main() {
    system("cls");
    std::cout << "\033[31mHello, red\033[97m" << std::endl;
    return 0;
}
```

Lo, and behold, without `system("cls")`, it outputs all the characters, but with it, only the short text in the desired red colour:

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

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

It may have something to do with the fact that I'm still using Windows 10, even though I doubt it, but it is an interesting and odd observation nonetheless.

Thanks for reading!
#10daysofcodechallenge by Ingressive for Good (#Day 5)
Tags: javascript
Published: 2022-09-25 22:30:42

I've just begun a 10-day coding challenge organized by Ingressive for Good and I'll be sharing my thoughts on Day 5 of the challenge.

Let me briefly describe how the challenge works before I share my experience with you. From September 21 through October 30, 2022, the challenge is to solve one common algorithm problem every day for ten days.

Today's algorithm problem was "sorting a string in decreasing order based on the frequency of the characters." It is the 451st algorithm challenge on "Leetcode.com".

I'll now discuss my algorithm solving experience. To do this, I made a map that iterates through the string and stores the characters while keeping track of how often each character appears. The mapped values are then saved in an array, which is sorted after which the array's elements are merged to create the string.

This task was completed in javaScript, took 76 milliseconds to execute, and consumed about 43.9 MB of memory.
ESLint folder naming rule for NextJS [slug] folders
Tags: eslint, nextjs, glob
Published: 2022-09-25 22:18:11

We have a `check-file/folder-naming-convention` ESLint rule in our NextJS project.

```
"check-file/folder-naming-convention": [
  "error",
  {
    "src/pages/**/": "KEBEB_CASE",
    ...
  }
]
```

It was fine until we have a `[slug]` folder for some dynamic routes.

Luckily, `check-file/folder-naming-convention` supports custom pattern. Here is how we solved it:

```
"check-file/folder-naming-convention": [
  "error",
  {
    "src/pages/**/": "?(\\[)+([a-z0-9-])?(\\])",
    ...
  }
]
```
Como publicar um Storybook no netlify
Tags: programming, storybook, webdev, devops
Published: 2022-09-25 22:15:40

Se utilizar npm usar --> 
npm run build-storybook -- -o ./path/to/build


1° Seu script do package deve estar da seguinte forma 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emsu3tiggdefajjkbt9m.png)


2° A configuração do netlify deve estar da seguinte forma
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po90qb2aoy9skui3h30m.png)


3° adicionais que podem ajudar, mudar a versão do node se precisar e o CI deixar como true
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1a3nhfvkrmo7tw1oxva.png)
Sort Character by frequency
Tags: javascript, sort, hash, bucket
Published: 2022-09-25 22:14:48

**Challenge**
Given a string s, sort it in decreasing order based on the frequency of the characters. The frequency of a character is the number of times it appears in the string.

Return the sorted string. If there are multiple answers, return any of them.

Example 1:

Input: s = "tree" Output: "eert" Explanation: 'e' appears twice while 'r' and 't' both appear once. So 'e' must appear before both 'r' and 't'. Therefore "eetr" is also a valid answer. 

Example 2:

Input: s = "cccaaa" Output: "aaaccc" Explanation: Both 'c' and 'a' appear three times, so both "cccaaa" and "aaaccc" are valid answers. Note that "cacaca" is incorrect, as the same characters must be together. 

Example 3:

Input: s = "Aabb" Output: "bbAa" Explanation: "bbaA" is also a valid answer, but "Aabb" is incorrect. Note that 'A' and 'a' are treated as two different characters. 

**Algorithm**

- Find the frequencyof each character string.
 
To achieve this, the counter function, item method and bucket in python is used.

The Counter.items() method helps to see the elements of the list along with their respective frequencies in a tuple. 

[Bucket](https://stackabuse.com/bucket-sort-in-python/) Sort is a comparison-type algorithm which assigns elements of a list we want to sort in Buckets, or Bins. The contents of these buckets are then sorted, typically with another algorithm. After sorting, the contents of the buckets are appended, forming a sorted collection
Bucket Sort can be thought of as a scatter-order-gather approach towards sorting a list, due to the fact that the elements are first scattered in buckets, ordered within them, and finally gathered into a new, sorted list.

- sort in decreasing order

The string is now sorted in reverse order based on the frequency using the reverse function in python.
DAY 5: Sort characters by frequency
Tags: java, codereview
Published: 2022-09-25 21:56:46

Hey! It's day 5 of 10 days coding challenge with I4G. Today's challenge was to write a code that sorts characters by frequency.

**Thought Process:**
**Understanding of problem:** The problem here is to write a code that checks through a string and sorts each character based on their frequency of occurrence 
**Solution:** In order to achieve this, I utilized some java classes such as HashMap and StringBuilder. The HashMap is java classes uses the Map interface to store key pair values. In this task I used it to iterate through the given string and store each character and its count in a Map. The character map was then sorted based on frequency and then the string builder was used to build the result back to a string.

**Algorithm:**

1. Instantiate the string builder to builder
2. Instantiate the HashMap using the Map interface to charMap as a key pair of Character and Integer
3. User for loop to traverse through the string and store it in the charMap
4. Sort the character map for each key-value pairs
5. Using another for loop iterate through the key-value pair and append to the string builder.
6. Return the builder in string format

Checkout the code here: https://leetcode.com/submissions/detail/808336602/
Sort Characters By Frequency - Leetcode
Published: 2022-09-25 21:46:30

[Sort Characters By Frequency](https://leetcode.com/problems/sort-characters-by-frequency/)

While this is a problem with difficulty at medium, I actually enjoyed solving it and had it run on first write of code.

> Given a string s, sort it in decreasing order based on the frequency of the characters. The frequency of a character is the number of times it appears in the string.

I first had to break it down by making a string that holds all the value as unique values and also created a map of the values and the number of times they appeared in the given string.

I then looped through the reverse of length of the strings and joined each value as they appeared in the map in a new string.

This isn't the most optimal solution as it takes O(n^2) to run.

I'll update this article when I get a more optimal solution.
Day 5 I4G 10 Days Code Challenge
Tags: javascript, leetcode, programming
Published: 2022-09-25 21:23:31

We are half way Day 5;
Problem: The problem is given a string you should sort it base on the character that has the highest frequency;
E.g given 'aabbbcdee'
'bbb' has highest frequency ,followed by 'aa' and 'ee' (has same frequency), then 'c' and 'd' (has same frequency).
hence the output should be 'bbbaaeecd'
Note for characters that have same frequency they can be in any order; that is the output can as well be 'bbbeeaadc';
Category: **Medium** we are getting their right!!!


Solution that came to my mind is to use hash map.

Step One
The Map keys are characters and the values are the characters frequency;
E.g of the map for the above Testcase will be;
{'b':3,'a':2,'e':2,'c':1,'d':1}

You can Get this by iterating through the string and creating the property or if it exist incrementing its value.

Step Two
Then create an array of arrays with two values character and the number of time it occurs;
e.g [['b',3],['a',2],['e',2],['c',1],['d',1]]
using Javascript in-built Object.entries(Object) method

Iterate through the array the create another Hash map with the keys as number of time character occurs and the value as array of the characters.
E.g
{'1':['c','d'],'2':['e','a'],3:['b']}

Get all the keys of the map using Object.keys(Object) method;
E.g ['1','2','3'];
Create the returned string
iterate through the keys starting from the highest, get all the characters and multiply it by the time it occur, increment it into the string.
Until the last key.
Return the string


Pretty Long right.

Time Complexity: O(n)
Space Complexity: O(n)
[Sort Characters by frequency](https://leetcode.com/problems/sort-characters-by-frequency/)

[Solution Implementation](https://github.com/ismaelsadeeq/I4G_coding_challenge/blob/main/sortStringWithFrequency.js)
Sort Characters By Frequency
Tags: algorithms, python, javascript
Published: 2022-09-25 21:02:26

Day 5 of the #I4G10DaysOfCodeChallenge featured sorting a given string in decreasing order based on frequency of the characters. The frequency of a character is the number of times it appears in the string.

The idea was to sort the vector pairs in accordance with the frequency that was stored after storing each letter together with its frequency in a vector of pairs. The vector should then be printed in order.

The steps I took were as follows:

- Return count of character in the string by declaring a count variable, assigning it to an empty dictionary and updating it as you loop through all the characters in the string.


- Next was to sort the vector, according to the number of characters.

- And finally, to print the sorted vector content.

Thank You.
How to parse Azure PostgreSQL Server log files using AWK?
Tags: postgres, azure, logs, parsing
Published: 2022-09-25 21:01:14


AWK is a text-processing utility on GNU/Linux. It is very powerful and uses a simple programming language. It can solve complex text processing tasks with a few lines of code. 

This post demonstrates how to parse Azurer PostgreSQL Server  log files using AWK.

### How to list “connection authorized” text pattern occurrences in the hour:minute db_user format?

```
grep "connection authorized" postgresql-2021-12-09_100000.log | awk ' { printf("%s %s\n", substr($2, 1, 5), substr($6, index($6,"user=")+5, index($6, "database=")-6)); } '

10:59 db_user_1
10:59 db_user_2
10:59 db_user_1
10:59 db_user_2
10:59 db_user_2
```

### How to list top DB users by “connection authorized” text pattern occurrences sorted in descending order?

```
grep "connection authorized" postgresql-2021-12-09_100000.log | awk ' { printf("%s %s\n", substr($2, 1, 5), substr($6, index($6,"user=")+5, index($6, "database=")-6)); } ' | awk '{count[$2]++} END {for (word in count) print word, count[word]}' | sort -k 2,2 -n -r

db_user_1 1821
db_user_2 196
db_user_3 136
db_user_4 136
db_user_5 130
```

### How to list the distribution of “connection authorized” text pattern occurrences per hour:minute (HH24:MI) sorted in descending order by the number of occurrences?

```
grep "connection authorized" postgresql-2021-12-09_100000.log | awk ' { printf("%s %s\n", substr($2, 1, 5), substr($6, index($6,"user=")+5, index($6, "database=")-6)); } ' | awk '{count[$1]++} END {for (word in count) print word, count[word]}' | sort -k 2,2 -n -r

10:53 644
10:23 509
10:29 502
10:22 479
10:52 463
```

### How to list the distribution of “connection authorized” text pattern occurrences per hour:minute:second (HH24:MI:SS) sorted in descending order by the number of occurrences?

```
grep "connection authorized" postgresql-2021-12-09_100000.log | awk ' { printf("%s,%s\n", substr($2, 1, 7), $6) } '

10:29:44  90
10:28:15  67
10:35:02  61
10:05:51  57
10:30:36  56
```
DAY 5 CODE CHALLENGE
Tags: javascript, programming, leetcode, challenge
Published: 2022-09-25 20:43:52

## **SORT CHARACTERS BY FREQUENCY**
A string s= tree is given to rearrange in decreasing order of frequency such that, the output will be "eetr" or "eert". 

**APPROACH** 
Check the frequency of the characters;
e = 2;
t = 1;
r = 1;
writing this in decreasing order of frequency;
output = eetr 
or
output = eert
Here r and t are of the same frequency, therefore anyone can be written first.

**PROCEDURE** 

- I saved the frequencies in a hashtable.

- I sorted them (frequencies) in decreasing order.

- I rebuilt the strings based on  frequencies.

**OUTCOME**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uij0utk7iuweyw734y4z.PNG)
Python Dictionaries 🍫
Tags: python, programming, 100daysofcode
Published: 2022-09-25 20:34:45

A dictionary is an unordered set of `key:value` pairs. 

Dictionaries provide is a way to map pieces of data into eachother so that we can find values that are associated with one another. 

Lets say we want to gather all of the calories in various candy bars 🍫 

- Snickers 215 🍫
 
- Reese's 210 🍫

- KitKat 218 🍫

We can create a dictionary called `chocolate` to store this data:

```python
chocolate = {'Snickers': 215, 'Reese's': 210, 'KitKat': 218}
```

1. A dictionary begins with curly brackets `{ }`

2. Each of the keys are surrounded by quotations `" "` and each `key:value` pairs are separated by a colon `:`

*** It is considered good practice to insert a space ` ` after each comma, although it will still run without the spacing.

We can also create an empty dictionary:
```python
empty_dict = {}
```
A single `key:value` pair can be added to the dictionary like this:

```python
dict[key] = value
```
Let's try adding a single key:value pair to our `empty_dict` we created before. click "➡️Run" to see the output
{% replit @kimester/Dictionaries %}

Multiple `key:value` pairs can be added to a dictionary by using the `.update()` method
```python
empty_dict = {'a':'alpha'}
empty_dict.update({'b':'beta','g':'gamma'})
print(empty_dict)
```
Output:

```python
{'a':'alpha','b':'beta','g':'gamma'}
```
![diagram of key:value pairs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iq4iq6r9faqpfa3uboj7.png)
Values can be overwritten by using this syntax:
```python
dictonary_name['key'] = value
```
Let's go back to our empty_dict example and change the value of 'a' from alpha ---> apple
```python
empty_dict = {'a':'alpha','b':'beta','g':'gamma'}
empty_dict['a'] = apple
print(empty_dict)
```
Output:

```python
{'a': 'apple ', 'b': 'beta', 'g': 'gamma'}
```
How to get started with open source?
Tags: opensource, github, webdev, beginners
Published: 2022-09-25 20:28:53

How to get started with open source?

I just found a awesome tweet by 
YK Sugi
 , i just wanna publish it so that more and more get benefitted with this.

##1. First of all, know your *why*.
Some of the most common reasons for contributing to open source are:

- to learn fast as a software engineer
- to network with other engineers
- to experiment with new tech
- to have proof that you can do the type of work you want to do.

##2. Get started.
Get familiar with the mechanics of forking, branching, committing, pushing, and sending a PR (pull request).

You can practice that with this repo: github.com/firstcontribut…

Alternatively, you can do the same with this repo of mine:

##3. Find a project to contribute to.
Common ways to find it:

- Check an open-source library or tool you use
- Find people on Twitter and check their projects
- On GitHub, look for *good first issues*
- Find which open source companies are hiring, and contribute to their projects

##4. Keep going!
It's ok to start small, for example with a typo fix.

Then, after that, just keep going!

Don't be afraid to ask questions, get involved in communities, or try sending small PRs.

It's important to be consistent - so I recommend the #100DaysOfOpenSource challenge.

## 5. (Bonus step)
I've created a repo that keeps track of active open source repos you may want to contribute to.

I've been actively managing this list recently and I'm hoping it'll be a helpful resource.
GDPR is Important for Everyone to Understand, But Why?
Tags: devops, todayilearned, management, agile
Published: 2022-09-25 20:26:00

{% youtube -AyN3VuVpgo %}

Drata Co-Founder Daniel Marashlian joins Dev Interrupted to tell us what a GDPR compliance checklist is and the best ways to implement it into your business and product. No matter where you're located, it's wise to make sure you are GDPR compliant, and Drata can help you out. 

Check out Drata's GDPR compliance tool at https://drata.com/gdpr
HubSpot's GDPR checklist: https://www.hubspot.com/data-privacy/gdpr-checklist
Watch the full interview with Dan Lines here: https://www.youtube.com/watch?v=K_ce_YmtJUw

-------------------------------------

## [You’re invited to Interact on October 25th!](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog)

*Want to know how engineers at Slack and Stripe connect their dev teams’ work to the business bottom line? Or how team leads at Shopify and CircleCI keep elite cycle time while minimizing dev burnout and maximizing retention?*

*These are just two of the topics we’ll tackle at [Interact](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog) on October 25th.* 

*A* ***free, virtual, community-driven engineering leadership conference,*** *[Interact](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog) is a one-day event featuring over 25 of the most respected minds in development, all selected by the thousands of engineering leaders in the Dev Interrupted community.* 

## [Register now!](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog)


![Register now!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9xpvwbw5xfawom98qga.jpg)
📊 Count comments on a GitHub issue 🎫
Tags: github, productivity, tutorial, tooling
Published: 2022-09-25 20:23:02

## ☝️ Why counting comments matters ?

There are two type issues with a lot of comments : 

1️⃣ The ones that are popular, then getting a lot of feedback 🤗
2️⃣ The ones that have a lot of comments because we struggle to fix them efficiently 😱

👉 In both cases, performing report on them can be helpful to monitor your `RUN` performances.

## ❔ Count with API calls

☝️ There actually is no native [`gh issue`](https://cli.github.com/manual/gh_issue) command to count issues on a specific command...

👉 but [`gh api`](https://cli.github.com/manual/gh_api)...

> _"Makes an authenticated `HTTP` request to the GitHub API and prints the response."_

```shell
gh api <endpoint> [flags]
```

💡 This short post is documenting how easy it is to count comments on a given issue.

## 🤓 Snippet

```shell
gh api -X GET \
  -H "Accept: application/vnd.github.v3+json" \
  -F per_page=100 \
  /repos/YOUR_ORGA/REPO/issues/ISSUEID/comments | \
  jq '. | length'
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phorj3zhmgpmwrs077b0.png)
VAT Calculator Online
Published: 2022-09-25 20:07:07

This is a VAT calculator that I made in Python3. It has the ability to add or remove VAT (20%) to any numerical value provided. The result then automatically copies to clipboard so that the value can be used where required. It is programmed to loop so that it can be used with as many values as needed.

VAT calculator

This is the code I used.
import pyperclip

vat = 1.2


def remove_vat(x, y):
    return x / y
def add_vat(x , y):
    return x * y

while True:
    print("#### VAT Calculator ####")
    num = float(input("Enter Amount: "))

    print("Choose Operation:")
    print("1. Remove VAT")
    print("2. Add VAT")

    choice = input("Enter Choice(1/2):")
    result = 0

    if choice =='1':
        result = remove_vat(num , vat)
    elif choice == '2':
        result = add_vat(vat , num)
    else:
        print("Invalid Input")

    print(round(result , 2))
    pyperclip.copy(round(result , 2))
I was inspired to make this because I was using an [online VAT calculator](http://vatonlinecalculator.co.uk/) which was effective but I believed that I could speed up my workflow by making this simple tool and did not want to rely on an internet connection to be able to use it.