teleren/devto huggingface dataset:
How To Configure ESLint & Prettier in React PJ
Tags: javascript, react, memorandum
Published: 2022-11-12 00:23:24

 I had chance to introduce and set up ESLint & prettier in project while working. So, the purpose of writing this post is simply memorandum and output for my sake. Please be aware that this post has inaccurate information. I will fix it As I realize

# **_Introduce ESLint_**

_**Install ESLint**_

```
npm install eslint --save-dev
```
If the project is created by "create-react-up", Eslint has been installed already. You should not install again because it may cause some error later.

_**Set up ESLint**_

```
npm init @eslint/config
```
.eslintrc.json will be generated after You answer interactive questions on terminal.

_**Add .eslintignore**_

Write one line below into .eslintignore to prevent ESLint from linting files in node_modules.

```
node_modules/
```

# **_Introduce Prettier_**

_**Install Prettier**_

```
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier
```

_**Edit .eslintrc**_

*Exsample below is JSON format.
```
"extends":[
   "xxxxx",
   "prettier" // make sure to add om the last line.
]
```

_**Check your settings has no confliction**_
```
npx eslint-config-prettier ./src/**
```
Execute the command above

If you see response like below, you can confirm the setting has no confliction
```
No rules that are unnecessary or conflict with Prettier were found.
```

**_Add .prettierignore_**

Write one line below into .prettierignore to prevent prettier from formatting files in node_modules.

```
node_modules
```
**_Add .prettierrc_**

You can setup your own formatting rule in this file.
If you do not create this file and configure, those setting below are applied as default

```
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "parser": "none",
  "filepath": "none",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto"
}
```
Day 652 : No Confusion
Tags: hiphop, code, coding, lifelongdev
Published: 2022-11-11 23:25:16

_liner notes_:
- Professional : Basically tried to rest up today after such a long journey home yesterday. Filled out some documents for the conference I went to. Also booked a COVID test for the next conference I'm going to. Pretty productive lazy day.

- Personal : So, it took around 12 hours for me to get home yesterday. My flight got cancelled and rebooked for 2 days later, but I was already at the airport. The gate agents were able to work some magic and get me on standby for a later flight. After a couple of gate changes and some delays, my name was called! Awesome. On the plane, feeling tired but good ready to head home, but apparently there was a person that was on the plane that wasn't supposed to be. So the flight attendants had to go down a list one by one and the passengers had to show their Ids. So after some more time, we found the person who was on the plane when it arrived at the airport and it looks like they don't speak English and they thought they had to stay on the plane to get to the next stop. So yeah, we take off and land and I get to the van and went straight to sleep.

![View from the ocean at the coast of Kālepa Ridge, HI, USA with a beach and large spikey mountain with a mountain range in the distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51hbk93bmccku3ibo23m.png) 

Still pretty tired. Took a nap. Going to work on the radio show and maybe some coding. I want to watch "Bleach" and the last episode of "Atlanta", such a good show, no confusion. It's getting dark outside earlier now with the time change. I really don't like this time of year.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube LB4ea30sg-8 %}
need help on product filter display
Tags: react
Published: 2022-11-11 23:04:49

I created a product list using state and also, a filter to filter the products. The problem is the moment i click the category button to filter the second time, my page turns white. Will really appreciate your help guys.
My sandbox link to my code is here. Thanks.


https://codesandbox.io/s/l1b3od?file=/src/styles.css&resolutionWidth=612&resolutionHeight=675
The Little Things Add Up
Published: 2022-11-11 22:49:22

The first week of learning a new computer language is always the toughest for me. I guess that makes sense. The first few days of learning something new are challenging in many things in life. However, when it comes to programming, the aspect that I find the most difficult early on is not usually the big overarching ideas that I'm trying to wrap my brain around. Instead, I find my biggest problem are all of the little mistakes that I make that keep me from getting to even work on the big ideas.

For example, here was a tiny error that I made during my first days of learning React.js that cost me way too much time to debug. This was time that I could have been using to work on the concept of components, props, state and effect. Instead, I spent that time trying to determine what bug was in my code that was causing none of it to run at all? Here's the error:

TypeError: items.map is not a function

And here was where the error referred me to:

const mappedItems = items.map(player =>

What did it mean that .map is not a function? Map is a method just like filter and forEach. And I used them learning javascript and I used it exactly the right way in my code this time and now it suddenly isn't working? Why is React conspiring against me?!

And technically, I was correct. There was NOTHING wrong with the way the code the error was referring me to was written. So after too many minutes of looking over the code and searching through examples to make sure I'd used map correctly, I turned to Google and copied in the error.

"TypeError: map is not a function" occurs when we call the map() method on an object that is not an array. To solve the error, console. log the value you're calling the map() method on" Well, I'm a step ahead of you Google! I already put in a console.log right after I pulled the items from the JSON and it told me that items IS an array of objects. So I ask again - WHY IS REACT CONSPIRING AGAINST ME?! 

So I don't want to bore you with all the details, but after some more console.logs I did eventually discover the error. When I pulled the items from the database, it WAS an array of objects, but then when I put it in state, I wanted the state to start off empty so I wrote the following:

const [items, setItems] = useState("")

And there was my problem! In useState I set items to an empty string. And instead I needed to write this:

const [items, setItems] = useState([]) 

and set it an empty array... TWO CHARACTERS that cost me WAY too much time.

But the saddest part? I made the same mistake AGAIN three days later! And those two characters had seemed like such a simple mistake in the midst of learning far more complex concepts that I hadn't bothered to write it down in my notes of what to look out for. So it took me ANOTHER ten minutes to remember the issue and resolve the problem a second time.

So what's the moral of this sad tale? Don't gloss over the tiny mistakes you make when you're learning something complex because it could very well be those itty bitty mistakes that cost you a bunch of debugging time later.
Make your CSS genuinely shiny
Tags: css, design, ux, webdev
Published: 2022-11-11 22:48:39

[MetalliCSS](https://www.metallicss.com) is a tiny, dependency-free, free (as in beer AND speech) JavaScript library that makes your CSS literally shine. Rather than resorting to pre-rendered static images, MetalliCSS dynamically renders custom-fit graphics that are generated on the fly based on your CSS properties!

[Try out the live demo!](https://www.metallicss.com)
A NEW REGEX ENGINE IS HERE!
Tags: regex, cpp, opensource, github
Published: 2022-11-11 21:49:51

In the last week, I've been working on a new regex engine called [Mregex](https://github.com/MBU-ModernBinaryUtility/MRegex-Engine), a free and open regular expression engine and still under development.

Enough talking let's explore its features.

As any regex engine it supports the following:

- sub-expressions:
```
#include <Mregex.h>

int main ( void ) {
    char regex [] = "(he), \0llo", str [] = "he, hello";
    short c = Regex ( regex, str, NULL, 0 );
    // Will return SUCCES
}
```
   the above code has defined two strings the regex string which 
   has one expression that will match "he" and then will match 
   ", " and then will match the first sub-expression again and 
   then will match the "llo".

- Anchors:
   ^: will match the beginning of the string or the beginning of the line in multi-Line mode ( more on that later).
   $: will match the ending of the string or the ending of the line in multi-Line mode

```
#include <Mregex.h>

int main ( void ) {
    char regex [] = "^ $", str [] = " ";
    short c = Regex ( regex, str, NULL, 0 );
    // Will return SUCCES
}
```


- Character class:
    [char-group]: Match any single character in the char-group. 
    [^char-group]: Negation match any single character not in the char-group.
    [start-end]: Char range: Match any character between the start and end in the ASCII Table.
    . : Match any single character in the ASCII table instead '\n' and NULL Byte


- Quantifier:
    *:  Match the previous element zero or more times
    +: Match the previous element one or more times
    ?: Match the previous element zero or one time
    {min, max}: Match the previous element min times or more but no more than max


- Modes:
    NoCase: use it whit case insensitive
    NoWhit: ignore all the white spaces
    MultiLine: Use multiline mode, where ^ and $ match the beginning and end of each line (instead of the beginning and end of the input string)

###The Regex function

 The Regex function has 4 parameters 
 the first parameter is the regex string
 the second parameter is the text string (the string to be matched)
 the third parameter is not yet implemented
 the fourth parameter is the modes where it can be ( 0 or NoCase | NoWhite)

`Regex ( regex, str, NULL, MultiLine | NoWhite )`

- IMPORTANT:
    Whenever you use '.+' or '.*' make sure that the next character is a valid character or escaped character like '\(' or 'v' but MAKE SURE IT'S NOT '('


So, what are you waiting for, go ahead and try it out.
Found a bug Let us know at modernbinaryutility@gmail.com
About functions in JavaScript, what are functions, the correct way of using them.
Tags: javascript, function
Published: 2022-11-11 20:58:27

Functions are some sort of building blocks, i.e., sets of statements, in JavaScript, which take an input and give the desired output. It consists of a FUNCTION keyword, followed by the function’s name, a list of parameters used in it, and statements that define the function. The parameters in it are separated with commas and enclosed with parentheses. Meanwhile, the statements are held with curly brackets. 
What refers to the correct way of using functions in JavaScript, there are three ways: function declaration, function expression, and arrow function. 
Function Declaration - a traditional way to define the function. In this case, we should start with the keyword ‘’function’’, add its name of it, and then the parameters. 
Function Expression - another way to define the function through the variables and storing the returned value in those variables. We suppose the function is a whole expression, and the returned value is in the variable. 
And the last way is the ‘’Arrow function’’. Instead of using the keyword ‘’function’’ we use the arrow in order to shorten the code. 
   As we know, there are three types of scopes in Javascript: scope of function, block, and global. So, now, we’ll discuss the function scope. 
   Variables declared inside of the function become local to the function. Hence, local variables have function scope and are available and visible only inside of that function. This property allows us to use variables with the same name in different functions. For instance, variables declared with ‘’var’’, ‘’let’’, ‘’const’’ have function scope.
About variables in JavaScript, differences between var, let, const. What are scopes?
Tags: javascript, beginners
Published: 2022-11-11 20:45:26

Variables mean that they can vary, and they are used to name the stored memory locations. In JavaScript, they can be created by three different keywords:
 VAR
 LET
 CONST
   They can store different types of data, like one’s name, email, a number, a string, a true or false boolean, an object. 
   However, initially only VAR was created, but due to many issues connected with it, developers created LET and CONST. And the question that comes afterwards is about the difference between these three variables. But, firstly, we should clarify the meaning of the scopes. 
   Scopes can determine the accessibility of the variables in distinct parts of the program. In JavaScript are two types of scopes: local and global.
   Global scopes let the variables be anywhere in the program. This type of scoped variables are those declared outside of the block or function. In contrast, if the variable is declared inside of a function or a block, then it is locally scoped. This means that variables declared inside of the block or the function are available only in that part. But, in their turn, locally scoped variables are  divided into two types: function scoped and block scoped. As their names tell, the function scoped variables can be used only inside of the function. And the block scoped ones are accessible only inside of it, even if the block can be in the function. 
   Now let's talk about those three variable keywords. There are some differences between them, one of which is about their, let’s say, location. ‘’Var’’ is both a global and function-scoped variable, meanwhile ‘’let’’ and ‘’const’’ are block-scoped ones. Another difference is about their reassignment. Both ‘’var’’ and ‘’let’’ can be reassigned during program execution, while ‘’const’’ can’t be reassigned and it is immutable.
This is how i got more performance in WebSockets than Node or Bun using Python
Tags: showdev, python, webdev, javascript
Published: 2022-11-11 20:44:57

---
title: This is how i got more performance in WebSockets than Node or Bun using Python
published: true
description: How many messages per second is that?! 900k!
tags: showdev, python, webdev, javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-11 20:41 +0000
---


[Bun](https://bun.sh) is changing out the scenario for Node.js, with much more performance in HTTP and WebSockets, but how FAST it is compared with Python?

In the Bun website https://bun.sh/, the source code of the WebSocket benchmark is available, so... let's try to run Falcon + uvicorn on it!

## Benchmark

I just simplified a little the benchmark, to remove a string concatenation, to measure more of the raw throughput with less impact other things, and runned using Falcon + uvicorn and [socketify.py](https://github.com/cirospaciari/socketify.py), when benchmarking i was talking with Vytautas Liuolia in the [Falcon Gitter](https://gitter.im/falconry/user) for tunning HTTP performance in other raw throughtput testing as well, and Falcon is not so much focused on WS performance, this also depends a lot of ASGI server too. For this test i choose uvicorn with gunicorn as ASGI server. 


Messages per second with Linux x64:

![image](https://raw.githubusercontent.com/cirospaciari/socketify.py/main/misc/ws-bar-graph.svg)


>Runtime versions: PyPy3 7.3.9, Python 3.10.7, node v16.17.0, bun v0.2.2<br/>
Framework versions: gunicorn 20.1.0 + uvicorn 0.19.0, socketify alpha, gunicorn 20.1.0 + falcon 3.1.0, robyn 0.18.3<br/>
WebSocket tested with [Bun.sh](https://bun.sh) bench chat-client check the source code in [this link](https://github.com/cirospaciari/socketify.py/tree/main/bench)<br/>
Machine OS: Debian GNU/Linux bookworm/sid x86_64 Kernel: 6.0.0-2-amd64 CPU: Intel i7-7700HQ (8) @ 3.800GHz Memory: 32066MiB 

Socketify.py got almost 900k messages/s with PyPy3 and 860k with Python3 the same performance as [Bun](https://bun.sh),
with Falcon 35k messages/s and with Falcon with PyPy3 56k messages/s, node.js manages 192k.

Bun is REALLY fast! But why the performance of Bun is almost identicall to socketify.py? The answer is that it also uses uWebSockets as base, actually the same code of the PR i made to the C API is been used in Bun with some tweaks, and it endup with almost the same performance that [socketify.py](https://github.com/cirospaciari/socketify.py), showing that both have some DNA in common.

Follow [@cirospaciari](https://twitter.com/cirospaciari) on twitter for more updates about [socketify.py](https://github.com/cirospaciari/socketify.py) and if you have some time check out the github https://github.com/cirospaciari/socketify.py this project can be even better with some community love ;)
Code Metrics inside Visual Studio 2022
Tags: visualstudio, metrics, productivity
Published: 2022-11-11 20:28:04

In the last days I was curious about how many lines of code I have written in my last product called [Red Origin](https://twitter.com/kasuken/status/1591061873906311168?s=20&t=yEbcGkWm65bw_yd-03AqyQ).
I forgot Visual Studio (even the Community Edition) has a built-in feature called Code Metrics.

From the menu "**Analyze**" -> "**Calculate Code Metrics**", you can view calculate and see the metrics.

![Code Metrics menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7vuzjt6y4kyya863pbn.png)

After a few seconds, a new window will open in the bottom area of Visual Studio with a lot of numbers in a table.

![Code Metrics numbers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3uclsemw21h4ri7ju47.png)

What you can see very quickly are the lines of code metrics.
The line of Source code is the number of all lines of code in your project with spaces, blank lines and similar.
Lines of executable code are the effective executable lines of code.
This number is definitely much smaller than the last one.

There are other metrics present in the report:
- Maintainability Index: Calculates an index value between 0 and 100 that represents the relative ease of maintaining the code. A high value means better maintainability. 
- Cyclomatic Complexity: Measures the structural complexity of the code.
- Depth of Inheritance: Indicates the number of different classes that inherit from one another, all the way back to the base class.
- Class Coupling: Measures the coupling to unique classes through parameters, local variables, return types, method calls, generic or template instantiations, base classes, interface implementations, fields defined on external types, and attribute decoration.  

If you want to know more about Code Metrics, you can follow this [link](https://learn.microsoft.com/en-us/visualstudio/code-quality/code-metrics-values?view=vs-2022) for the official documentation.
OSD600 Lab 8
Tags: opensource, beginners, cpp, testing
Published: 2022-11-11 16:32:20

## What I did this week
This week, I added a testing module to [my SSG](https://github.com/rudychung/SauSaGe). Since my SSG was created using C++, I used [Catch2](https://github.com/catchorg/Catch2) as my testing framework. I chose Catch2 as my testing framework since it seemed to be the most popular among C++ developers, and it was all contained within a single header file. 

## Setting up Catch2
The setup for Catch2 was very simple. I had to include the header to run testing, and using my own command-line argument parsing, I ran the tests from the main function. Then, by calling `Catch::Session().run()` in the main function, it executed my tests, which I created in a testing file that contained all my test cases. This testing file also included the Catch2 header as well. 
Using the macros defined by Catch2 (`TEST_CASE`, `SECTION`, and `REQUIRE`), I was able to specify names for test cases and their sections and define what was expected from each test. Overall, it functioned like Jest, and I'm assuming most other testing frameworks for other languages.

## Testing my patience
Since I offloaded my markdown parsing to [maddy](https://github.com/progsource/maddy), I did not test for it because it was not my own code. As a result, it was difficult to find parts that I could test. I mostly created my test cases for end to end testing. Since the number of things to test for is always numerous, I ended up finding a few things I could test for. But, I definitely am not satisfied with the number of tests I currently have and will be adding more in the future. 

## Caught in the bug net
In one of my tests, I parsed both a `.md` and `.txt` file into an `.html` file and compared them to what I expected the parsed `.html` to look like. While parsing my `.md` file, I noticed that it did not product the same `.html` file as the one produced by parsing the `.txt` file even though both files' contents were identical. This uncovered something about maddy that I was not aware was happening. It would append a space to each paragraph before the paragraph closing tag. I made a small change to one of maddy's headers that seemed to fix the issue. 

## What I learned
I learned how testing can be done in C++. Using Catch2, it was very simple to create and run tests. Previously I had only done testing in JavaScript using Jest. In future projects, I will be sure to add testing as it is a good way to maintain all the required functionality and ensure it all functions as intended.