teleren/devto huggingface dataset:
Node.js what?benifits?where?
Tags: javascript, node
Published: 2023-03-18 14:20:00

[](url)Hi Everyone, as a frontend developer, I've reached a crucial point in my career where I must learn about backend development. I have decided to take on the challenge of learning Node.js and will be sharing my insights on a regular basis. Rather than focusing solely on code, my aim is to delve into the underlying concepts of Node.js development. While there are countless tutorials available online for the coding aspect, my focus will be on understanding the technology as a whole.I will be following this [roadmap](https://roadmap.sh/nodejs) along with other references and node Docs. I am eager to share my journey with you all and welcome any feedback or comments you may have. Let's learn and grow together in our pursuit of Node.js mastery.

---

## What is Node.js?
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows developers to run JavaScript on the server-side, rather than just in the browser. Node.js provides a powerful and efficient way to build network applications, as it's built with non-blocking I/O, allowing it to handle multiple requests at once without blocking any other requests.

## Benefits of Node.js:
There are several benefits of using Node.js, some of which include:

- **Speed**: Node.js is known for its fast execution time, making it great for building scalable and efficient applications.
- **Cross-platform**: Node.js is cross-platform, meaning you can run it on Windows, Linux, and macOS.
- **Large community**: Node.js has a large and active community of developers who contribute to its ecosystem by creating modules, libraries, and frameworks.
- **Open-source**: Node.js is an open-source platform, meaning anyone can contribute to its development and use it for free.

## Where is Node.js used?
Node.js can be used for a variety of applications, some of which include:

- **Web Applications**: Node.js is great for building web applications, as it's fast, efficient, and can handle multiple requests at once.
- **Real-time Applications**: Node.js is perfect for building real-time applications like chat applications, online gaming, and more.
- **APIs**: Node.js can be used to build RESTful APIs, which are lightweight and easy to use.
- **Command-line Tools**: Node.js can be used to build command-line tools, making it a versatile platform for developers.

### Conclusion:
By understanding what Node.js is, its benefits, and its use cases, you'll be able to better understand the platform and how it can be used to build powerful applications.

> Next topic - [Node.js Modules: CommonJS vs. ECMAScript](https://dev.to/saisathish/nodejs-modules-commonjs-vs-ecmascript-28da)
Why we need test automation framework and how to develop it?
Tags: testing, automation, framework
Published: 2023-03-18 14:19:42

Test automation is a fundamental process along with testing applications manually. To make this whole automation process easier and performing automation testing in an effective and efficient way, QA engineers use automation frameworks. There are different types of frameworks available that serve different purposes. Some of the popular testing frameworks are: 

* **Cypress** - For E2E(End to End) Testing.
* **Selenium** - For Web automation.
* **RESTAssured** - A Java library to test REST API's.
* **Cucumber** - Simple Gherkin used framework for BDD testing. 

All the test automation frameworks serves some similar objectives. Those are: 

**Reusability**: Frameworks gives the power to QA engineers to make their test automation process in a more non-redundant way and reuse the automated test cases. 

**Maintainability**: Requirement changes most often. To maintain the test cases with the changing requirements, framework gives QA the additional benefits to make the changes more efficiently. Also, anyone can add more test cases or modify existing test cases if needed. 

**Readability**: Framework makes it easier for QA engineers to read and understand the code more easily.

Test automation framework gives a boost to QA engineers to get their job done in a more convenient way. But there some phases to develop a test automation framework. The key phases are:

1. **Requirement gathering**: Before designing a framework, it's important to understand the requirements first. What type resources a QA engineer needs, URL's or API all these things need to be considered first before developing a framework. 
2. **Choosing automation tool**: Considering the needs and purpose of automation, tools should be chosen accordingly.
3. **Designing the framework**: It's one of the crucial phase of developing a framework. A framework with good design model makes handling the automation code in a more non-redundant way, makes it more maintainable and readable. One of the popular automation design model is POM(Page Object Model).  
4. **Development and execution**: After choosing and designing the framework, the QA engineer needs to implement the files. 
5. **CI/CD**: After development and execution, the framework can be deployed in CI/CD to maintain the continuous integration of automation codes.
About me
Tags: career
Published: 2023-03-18 14:15:27

&nbsp;
<h2 align="center">Welcome 👋, I'm Julio Arana Jr.</h2>
<h3 align="center">AWS Cloureach Talent Academy DACH 2022 - Associate Cloud Systems Developer</h3>
<hr align="center" size="6" width="100%"  color="green"></hr>
#### **Overview**
- Cloud Systems Developer & Consultant with teamwork skills. Ability to adapt to new environments. Committed to leading the migration and delivery the promise of the Cloud.
- High Technical Analytical Skills. Ability to work with team's goals with high standards and quality. Adaptation, mobility and discipline to perform with other people, in multicultural environments, where teamwork is essential.
- Empathy and compromise with the consumer's needs. Acuity to detect &  locate the needs of the market. Knowledge and experience in the management and implementation of projects.
- Full action. Proactive by nature. High Initiative and motivation.  Oriented to work achieving goals. Innovation, creativity and commitment to meet the objectives set by the company.
- More than 10 years of experience as IT Consultant, Venezuelan Petroleum Companies, Telecommunications and Medical Software Solutions.
- Undergoing AWS upskilling program with Cloudreach Talent Academy.
- Languages: Spanish, English.
- Location: (Germany)
<hr align="center" size="6" width="100%"  color="green"></hr>
<h3 align="center">Certifications</h3>
<div align="center">
![AWS-CERTIFICATIONS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nuix9aqxmoqaus6p9oe.png)
<div/>
<hr align="center" size="6" width="100%"  color="green"></hr>
&nbsp;
I’m currently AWS Certified Solutions Architect
使用命令列工具上傳檔案到 ESP32 開發板
Tags: esp32, spiffs
Published: 2023-03-18 14:13:13

[arduino-esp32fs-plugin](https://github.com/me-no-dev/arduino-esp32fs-plugin) 外掛目前並不支援 Arduino IDE 2, 不過其實可以依照以下的步驟[利用命令列工具上傳檔案](https://docs.espressif.com/projects/esp-idf/en/latest/esp32/api-reference/storage/spiffs.html)：

1. 從 Arduino 的 preferences.txt 找到目前選擇的控制板型號、晶片平台以及分割 (partition) 方式：

    ```ini
    board=d32
    ...
    custom_PartitionScheme=d32_default
    ...
    target_platform=esp32
    ```

1. 目前平台可用的分割方式可在平台的 board.txt 檔中找到, 底下以 ESP 的 d32 板子為例, 檔案在 packages\esp32\hardware\esp32\2.0.5\boards.txt：

    ```ini
    d32.menu.PartitionScheme.default=Default
    d32.menu.PartitionScheme.default.build.partitions=default
    ```
    
    第一行是顯示在 Arduino 工具功能表下的分割方式選項文字, 第二行是對應的分割設定檔名稱。

1. 利用上述資訊, 即可找到分割設定檔, 例如 default 設定檔在 packages\esp32\hardware\esp32\2.0.5\tools\partitions\default.csv：

    ```csv
    # Name,   Type, SubType, Offset,  Size, Flags
    nvs,      data, nvs,     0x9000,  0x5000,
    otadata,  data, ota,     0xe000,  0x2000,
    app0,     app,  ota_0,   0x10000, 0x140000,
    app1,     app,  ota_1,   0x150000,0x140000,
    spiffs,   data, spiffs,  0x290000,0x170000,
    ```
    
    就可以知道個別分割區的類型、起始位址、大小。

4. 有了以上資訊就可以利用隨 ESP32 Arduino Core 就有的 [mkspiffs](https://github.com/igrr/mkspiffs) 工具從指定的資料夾建立該資料夾的 spiffs 映像檔：

    ```
    # .\mkspiffs -c .\test_dir\ -s 0x170000 test.bin
    ```

    |選項|說明|
    |---|---|
    |-c|要建立映像檔的資料夾, 所有要上傳到 ESP32 開發板的檔案都要放在這個映像檔內|
    |-s|映像檔的大小, 這可從 partition 設定檔中取得|
    
    mkspiffs 工具在 packages\esp32\tools\mkspiffs 下。
    
5. 製作好的映像檔可以透過 [esptool](https://docs.espressif.com/projects/esptool/en/latest/esp32/index.html) 上傳到 ESP32 開發板上, 例如：

    ```
    # ./esptool.exe --chip esp32 --port com4 --baud 921600  write_flash -z  0x290000 test.bin
    ```
    
    |選項|說明|
    |---|---|
    |--chip, -c|晶片型號, 可用 auto, esp8266, esp32, esp32s2, esp32s3beta2, esp32s3, esp32c3, esp32c6beta, esp32h2beta1, esp32h2beta2, esp32c2|
    |--port, -p|連接埠|
    |--baud, -b|上傳速率|
    
    最後的兩個參數是 spiffs 分割區的位址以及映像檔的路徑, 分割區位址可由分割設定檔中取得。

    
    esptool 工具放在 packages\esp32\tools\esptool_py 下。
Code Smell 202 - God Constant Class
Tags: webdev, javascript, beginners, programming
Published: 2023-03-18 14:10:55

*Constants should be together to find them easily*

> TL;DR: Don't define too many unrelated constants in the same class. Don't pile up the junk together.

# Problems

- Bad Cohesion

- High Coupling

- Magic Numbers

- Single Responsibility principle violation

# Solutions

1. Break the contents following Real World responsibilities using the [MAPPER](https://maximilianocontieri.com/what-is-wrong-with-software).

# Context

This is a special case of a God Object restricted only to constant definitions.

The repository can be a class, file, or JSON. 

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/402d6689b9a9bdef6a0cedf4e8974805)

```csharp

public static class GlobalConstants
{
    public const int MaxPlayers = 10;
    public const string DefaultLanguage = "en-US";
    public const double Pi = 3.14159; 
}


```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/d26aa5ca0e29c906689c7e0b3be8cd54)

```csharp

public static class MaxPlayersConstants
{
    public const int MaxPlayers = 10;    
}

public static class DefaultLanguageConstants
{
    public const string DefaultLanguage = "en-US";
}

public static class MathConstants
{
    public const double Pi = 3.14159;
}


```

# Detection

[X] Semi-Automatic

We can tell our linters to warn us of too many constants' definitions against a preset threshold. 

# Tags

- Coupling

# Conclusion

Finding correct responsibilities is one of our primary tasks when designing software.

# Relations

https://maximilianocontieri.com/code-smell-14-god-objects

https://maximilianocontieri.com/code-smell-29-settingsconfigs

https://maximilianocontieri.com/code-smell-02-constants-and-magic-numbers

# More Info

[Medium](https://bytedev.medium.com/the-god-constant-class-30d82cd4f677)

# Disclaimer

Code Smells are my [opinion](https://maximilianocontieri.com/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned).

# Credits

Photo by [Aaron Burden](https://unsplash.com/@aaronburden) on [Unsplash](https://unsplash.com/images/things/book)
    
* * *

> If someone says their code was broken for a couple of days while they are refactoring, you can be pretty sure they were not refactoring.

_Martin Fowler_
 
https://maximilianocontieri.com/software-engineering-great-quotes

* * *

This article is part of the CodeSmell Series.

https://maximilianocontieri.com/how-to-find-the-stinky-parts-of-your-code
A smooth underline hover effect to use!
Tags: webdev, css, tutorial, beginners
Published: 2023-03-18 14:04:00

Here's a nice and smooth hover effect that's great for your next website! All you need is positioning, a psuedo element, and two lines of scaling.

{% codepen https://codepen.io/lensco825/pen/RwYBZgQ %}

1. Make your text has a position of relative while your after psuedo element will have a position of absolute. That way you can position your after psuedo element under the text.

```css
h1 {
  position: relative;
}


h1::after {
content: ' ';
position: absolute;
/*Positioning the underline*/
 left: 0;
 top: 40px;
/**/
  width: 100%;
  height: 3px;
}
```
<br>
2 . Transform your underline to hanve an X scale of 0 with `transform: scaleX(0)` and make sure it transforms to the right with `transfrom-origin: right`. 

```css
h1 {
  position: relative;
}


h1::after {
content: ' ';
position: absolute;
 left: 0;
 top: 40px;
  width: 100%;
  height: 3px;
/*Transforming*/
  transform: scaleX(0);
  transition: transform 0.2s;
  transform-origin: right;
}
```
<br>
3 . Give your text a hover effect where the underline transforms to the left back at full X scale!

```css
h1:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}
```
<hr>
Now give a transition, a border-radius, and a color of your choosing, and there's your underline animation! If you want an example of how this can be used here's a [react web app ](https://animal-info.netlify.app/) i'm making with it. Hover on the nav bar text elements to see it in action!
HTML structure for Beginners
Tags: beginners, html, codenewbie, frontend
Published: 2023-03-18 13:59:15

HTML (Hypertext Markup Language) is a markup language (computer language that consists of easily understood keywords, names or tags) for creating webpages. HTML has an overall simple structure but contains many elements and these elements tell the browser how to display the content. Examples of HTML elements are <`h1`> or <`p`> but we will get onto these another time, for now we want to focus on the basic HTML document.

## Basic HTML Document


```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
```

- The first line of code <`!DOCTYPE html`> confirms that it is an HTML5 document.

- The second line of code <`html`> is the root element of the html page.

- The third line of code <`head`> is the element which contains meta information about the page. Meta information is used to provide additional information about a page to search engines and clients.

- The fourth line of code <`title`> is the element which is known as the title of the page. This will also show up in the browsers bar. 

- The sixth line of code <`body`> establishes the documents body, and it contains all of the visible content such as the headings, images, paragraphs etc...

- The eighth line of code <`h1`> is the heading element. Heading elements go from <`h1`> up to <`h6`>. Use the heading element when you want to form a heading on the page. 

- The ninth line of code <`p`> is the paragraph element and this interprets a paragraph.  Use the paragraph element when you want to build a paragraph.


This is the very basics of a HTML document explained and the more you code, the more you will understand the structure of HTML and the elements involved. 



I hope this blog has helped and thank you for reading 😁

Keep Coding!
Verson Control Systems
Published: 2023-03-18 13:58:37

👨‍👩‍👧‍👦 Version control also enables teams to work together on the same codebase without fear of overwriting each other's work. It's like having a shared whiteboard where everyone can contribute without stepping on each other's toes.

🌳 Git is a popular version control system used by software engineers around the world. It allows developers to create branches and merge changes, making it easy to experiment with new features without affecting the main codebase. 🌿

🔀 Git also enables developers to rollback changes if something goes wrong, helping to prevent costly mistakes.

📚 There are many resources available to help you learn version control and Git, including online tutorials and courses. It's a valuable skill for any software engineer to have and can make working on complex projects much easier.

🚀 By using version control, developers can be more productive and efficient, allowing them to focus on what really matters: creating amazing software that improves people's lives. #softwareengineering #people #work #projects #software #softwareengineer #help #like #like #engineers
Common errors in releasing custom pod
Published: 2023-03-18 13:57:04

There are a few common errors that we generally face while creating the Custom Pod. 

Lets find out the reason of their occurrence and resolution - 

**1. Error 1** - `Unable to accept duplicate entry for Pod (VersionNumber)`

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

This error means that Pod with mentioned version number was already released and you are trying to release again on same version. 

_<u>Note:-</u>_ The version should be higher every time release your Pod.

So to resolve this follow the steps - 
   1. podspec file -> Increase the version number
   2. commit and push to git 
   3. give the tag on commit (same tag as used in point 1)
   4. now try pod trunk push

**2. Error 2** - `no file exists at source_files`

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

    This error means that your library files were not found at the path specified on podspec -> `s.source_files`.
This usually comes up because in the project created by Cocoapod the example file “Replace Me” comes up under classes folder.
    But when you add / create your files on the same level as of Replace Me then it doesn’t get added to the classes folder.
    But the path  podspec -> `s.source_files` is still pointing to classes folder where it finds nothing and causes the error.


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

**How to resolve this ? **
1. Create a folder named Sources and add your files under this. 
    <u>NOTE</u>: You can give any name to the folder. It doesn’t has to be just 'Sources'.
2. Update folder path under podspec as follow - 
         `s.source_files = 'Sources/**/*'`


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

Happy Coding 🎉
Redux Simplified: A Beginner’s Guide to the Core Concepts of Redux
Tags: javascript, programming, react, redux
Published: 2023-03-18 13:54:22

Redux is a powerful state management library for JavaScript applications. It has gained popularity over the years for its ability to manage complex application state in a predictable and efficient manner. In this article, we will delve into the fundamentals of Redux and explore how it works.

At its core, Redux is a library that helps manage application state. It is designed to work with any UI library or framework, such as React, Angular, or Vue. Redux provides a central store that holds the application state, and actions that can be dispatched to update the state. Let's take a closer look at how these components work together.

**State**
The state is the data that drives the application. It can be anything from user input to server responses. In Redux, the state is represented as a plain JavaScript object that is immutable. This means that the state cannot be changed directly. Instead, we must create a new state object every time we want to update the state. This approach makes it easier to track changes to the state over time.

**Store**
The store is the central component in Redux. It holds the application state and provides a way to access and update the state. The store is created using the createStore function, which takes a reducer function as an argument. The reducer is a pure function that takes the current state and an action as arguments and returns the new state.

**Actions**
Actions are payloads of information that are sent to the store to update the state. They are objects that have a type property and can contain any other properties that are needed to update the state. Actions are created using action creator functions, which return the action objects.

**Reducers**
Reducers are pure functions that take the current state and an action as arguments and return the new state. They are responsible for handling the actions and updating the state accordingly. Reducers must be pure functions, which means that they cannot modify the state directly. Instead, they must create a new state object every time they update the state.

**Middleware**
Middleware is a powerful feature in Redux that allows us to intercept and modify actions before they reach the reducers. Middleware functions can be used to implement features such as logging, error handling, and async actions.

**In conclusion**, Redux is a powerful library for managing application state in JavaScript applications. It provides a central store that holds the application state, actions that can be dispatched to update the state, and reducers that handle the actions and update the state. By using Redux, we can manage complex application
Part -3 Become a better you with these 10 visuals
Tags: webdev, javascript, productivity, beginners
Published: 2023-03-18 13:52:00

You may become the best version of yourself with the help of these graphics.

---

## 1. 


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b3fza92foezrty0kkwy.png)

---

## 2.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0j5s32y1pghpafbop21.png)

---

## 3.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5eo2hvuxhiio9ifylnk9.png)

---

## 4.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9peb2au0cng3z1zr5p5.png)

---

## 5.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s90cpuap94yycjrmo1vl.png)

---

--- 
## Support us 
Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

{% youtube xa9i2SVnHro %}

---
---

## 6.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omxtobitzw2psthr8207.png)

---

## 7.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r903hu9jzhy3pncvxn7.png)

---

## 8.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbgdpd2nhc9sx8z3ubrr.png)

---

## 9.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm32lnn3z8kxkbqfp8p7.png)

---

## 10.


![Become a better you with these 10 visuals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itiv8gky4g83sh68fq3n.png)



Source - [Linkedin](https://www.linkedin.com/posts/amewborn_10-visuals-that-will-rewire-your-mindset-activity-7042480756564135938--fuc?utm_source=share&utm_medium=member_desktop)


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my youtube channel 
[https://www.youtube.com/channel/UCTBG1pUL9HtP4ntbj63Fngw](https://www.youtube.com/channel/UCTBG1pUL9HtP4ntbj63Fngw)

3. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

4. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

6. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)
- Sudoku Game And API
[https://sudoku-game-and-api.netlify.app/](https://sudoku-game-and-api.netlify.app/)

---
---
 
--- 
## Support us 
Don't miss the amazing video we've embedded in this post! Click the play button to be inspired

{% youtube  PnqDy99p3EA %}

---