teleren/devto huggingface dataset:
Webpack installation
Tags: tutorial
Published: 2023-10-10 06:31:36

You need to: 

- Make a .gitigore where you write:
    ```
    node_modules
    ```
- When you make a package.json file with all of this:
    ```json
    {
    "dependencies": {
        "css-loader": "^6.8.1",
        "mini-css-extract-plugin": "^2.7.6",
        "postcss": "^8.4.31",
        "postcss-loader": "^7.3.3",
        "postcss-preset-env": "^9.2.0",
        "sass": "^1.69.3",
        "sass-loader": "^13.3.2",
        "style-loader": "^3.3.3",
        "webpack": "^5.88.2",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1"
    },
    "name": "webpack-test",
    "description": "We will start by install the necessary by go to the terminal on your procject and write:",
    "version": "1.0.0",
    "main": "postcss.config.js",
    "scripts": {
        "serve": "webpack serve",
        "build": "webpack",
        "build:watch": "webpack --watch",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
    }
    ```
- When a postcss.config.js with this:
    ```js
    module.exports = {
        plugins: [require("postcss-preset-env")]
    }
    ```
- And a webpack.config.js with this:
    ```js
    const MiniCssExtractPlugin = require("mini-css-extract-plugin")

    module.exports = {
        mode: process.env.environment == "production" ? "production" : "development",
        plugins: [new MiniCssExtractPlugin()],
        module: {
            rules: [
                {
                    test: /\.(s[ac]|c)ss$/i,
                    //test: path.resolve(__dirname, "src/scss/*"),
                    use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader", "postcss-loader"]
                },{
                    test: /\.png$/i,
                    type: "asset"
                }
            ]
        },
        devtool: "source-map",
        devServer: {
            static: "./dist"
        }
    }
    ```
- Now you can write in you terminal:
    > npm install

    or
    > npm install webpack webpack-cli webpack-dev-server css-loader style-loader sass sass-loader postcss postcss-loader postcss-preset-env mini-css-extract-plugin
- When make a src/index.js file
    ```
    src (folder)
        index.js (file)
    ```
- And now you can writh in you terminal: 
    > npm run build:watch

- Now you can make a index.html file in the dist folder with a link to main.css. In this file you can make you own html
- Then you when need a css, scss or js file you will make it in the src folder and import those in you index.js like e.g: 
    ```js
    import "style.scss";
    ```
SyntaxHighlighter does not highlight the code block when used with ReactMarkdown
Tags: reactmarkdown, syntaxhighlighter, react, javascript
Published: 2023-10-10 06:28:10

I faced this little bug with SyntaxHighlighter does not highlight the markdown code block.

```js
const Test = () => {
	const markdown = `Here is some JavaScript code:

    ~~~js
    console.log('It works!')
    ~~~
    `;
	return (
		<ReactMarkdown
			children={markdown}
			components={{
				code(props) {
                    console.log(props);
					const { children, className, node, ...rest } = props;
					const match = /language-(\w+)/.exec(className || "");
					return match ? (
						<SyntaxHighlighter
							{...rest}
							children={String(children).replace(/\n$/, "")}
							language={match[1]}
							PreTag="div"
						/>
					) : (
						<code {...rest} className={className}>
							{children}
						</code>
					);
				},
			}}
		/>
	);
};
```

I have this simple component that renders a mark-down code block as JSX. But the SyntaxHighlighter was not highlighting the code. I found that the issue was that the `props` argument in `code` function does not have any `className` property due to which the `match` does not have the language we specified in the markdown. Due to this the if condition is always `false` and the default `<code>` block always gets rendered. 

**Solution**
I updated the code a bit and instead of using the `className` to know which language is used in the markdown code string. I  extract the language from the `children` property, that is the content we have in the markdown string. 

```js
const Test = () => {
	const markdown = `Here is some JavaScript code:

    ~~~js
    console.log('It works!')
    ~~~
    `;
	return (
		<ReactMarkdown
			children={markdown}
			components={{
				code(props) {
					console.log(props);
					const { children, className, node, ...rest } = props;
					const codeValue = props.children; // Get the code block content
                    console.log(codeValue);
					const match = /~~~(\w+)/.exec(codeValue); // Use a regex to extract the language
                    console.log(match);
					return match ? (
						<SyntaxHighlighter
							{...rest}
							children={String(children).replace(/\n$/, "")}
							language={match[1]}
							PreTag="div"
						/>
					) : (
						<code {...rest} className={className}>
							{children}
						</code>
					);
				},
			}}
		/>
	);
};
```

Hope it will help you!! Thank you
Smart Contract Auditing Services
Tags: smartcontract, smartcontractauditdevelopment, blockchain, webdev
Published: 2023-10-10 06:17:21

At the center of our smart contract auditing services is a commitment to blockchain security. Powered by Beleaf Technologies innovative solutions, we employ advanced technology for meticulous code analysis, minimizing risks and ensuring dependable transactions. Trust in our expertise to safeguard your blockchain projects, providing peace of mind in this rapidly evolving technology domain.
Know more,
Website :-https://beleaftechnologies.com/smart-contract-auditing-service-company
Contact:-+91 80567 86622
Understanding the Data Science Lifecycle
Tags: datascience, datascienceprocess, dataanalytics, bigdata
Published: 2023-10-10 06:15:59


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q55x90dyfzpicoob0swm.jpg)
In the rapidly evolving world of technology, **data science** has emerged as a critical discipline, steering decisions and strategies for businesses across industries. Central to the practice of data science is the **data science lifecycle** – a systematic approach that structures the entire process, from raw data to valuable insights. In this article, we’ll break down the essential stages of the data science lifecycle and explore why it's a pivotal component for any successful data-driven endeavour.

**1. Problem Definition:**

The foundation of any **data science process** begins with understanding the problem. What are the specific objectives? What do you aim to achieve with the data? By defining the problem, **data scientists** can align their efforts with organizational goals.

**2. Data Collection:**

Once the problem is clear, the next step is to gather the relevant data. This involves identifying the best sources for the data, whether it's databases, APIs, web scraping, or direct surveys.

**3. Data Cleaning:**

Data is rarely perfect. There might be inconsistencies, missing values, or outliers. Cleaning and preprocessing the data is a pivotal step in the **data science lifecycle** to ensure the subsequent analysis is accurate.

**4. Data Exploration:**

This phase involves understanding the data’s characteristics and patterns. Data scientists use statistical analysis and visualization techniques to explore, highlight trends, and identify any anomalies or patterns in the data.

**5. Model Building:**

Based on insights from the exploration phase, data scientists select appropriate algorithms and models, train them on the data, and refine their parameters for optimal performance.

**6. Model Validation:**

After building the model, it's crucial to validate its accuracy and reliability. This involves testing the model on new, unseen data to ensure it generalizes well and meets the desired performance metrics.

**7. Deployment and Monitoring:**

The final model is then integrated into production systems. However, the **data science process** doesn’t end with deployment. It’s essential to continuously monitor the model's performance, ensuring it remains accurate and relevant as new data flows in.

**In Conclusion:**

The **data science lifecycle** is a structured approach that ensures efficiency and accuracy in deriving insights from data. By understanding and following this lifecycle, businesses can maximize the value they get from their data science initiatives, ensuring that they make informed decisions backed by rigorous analysis. As data continues to play an ever-increasing role in our world, grasping the intricacies of the **[data science process](https://www.grapestechsolutions.com/blog/data-science-process)** becomes more crucial than ever.
Why the Laravel Framework is a Great Choice for Mobile App Development?
Published: 2023-10-10 06:05:03


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

Laravel is a free and open-source PHP framework that is widely used for web application development. It is known for its elegant syntax, robust features, and extensive ecosystem. While Laravel is primarily used for web development, it can also be used to build Laravel mobile app.

Here are some of the reasons why Laravel is a great choice for mobile app development:

    • It is a robust and scalable framework. Laravel is built on a solid foundation and can handle even the most complex mobile applications. It is also highly scalable, meaning that it can easily adapt to changing requirements as your app grows. 

    • It is easy to use and learn. Laravel has a well-designed API and a large and active community of developers. This makes it easy to learn and use Laravel, even if you are new to mobile app development. 

    • It is feature-rich. Laravel comes with a wide range of built-in features that can be used to develop mobile applications, such as authentication, authorization, caching, routing, and database management. This can save you a lot of time and effort in developing your mobile app.
 
    • It has a large ecosystem. Laravel has a large and active community of developers who have created a wide range of packages and extensions. This means that you can find a Laravel package for almost any task that you need to accomplish. 

In addition to the above reasons, Laravel is also a great choice for [Laravel mobile app](https://webkul.com/blog/laravel-ecommerce-mobile-app/) development because of the following:

    • It can be used to build progressive web apps (PWAs). PWAs are web apps that can be installed on mobile devices like native apps. They offer many of the benefits of native apps, such as offline access and push notifications, but they can be built with web technologies like HTML, CSS, and JavaScript. Laravel can be used to build PWAs that are fast, secure, and reliable. 

    • It can be used to build hybrid apps. Hybrid apps are mobile apps that are built with a combination of native and web technologies. Laravel can be used to build the web part of hybrid apps. This allows you to leverage the benefits of both native and web development. 

    • It can be used to build native apps. While Laravel is a PHP framework, it can also be used to build native apps for Android and iOS. This is possible through the use of cross-platform development frameworks like Flutter and React Native. 

Overall, Laravel is a great choice for mobile app development because it is robust, scalable, easy to use, feature-rich, and has a large ecosystem. It can be used to build PWAs, hybrid apps, and native apps. [Webkul](https://webkul.com/) is a leading provider of [Laravel development services](https://webkul.com/laravel-development/), including mobile app development. Webkul has a team of experienced Laravel developers who can help you build custom mobile apps for your business.
A Very Big Sum - Problem-Solving | HackerRank
Tags: python, algorithms, coding, github
Published: 2023-10-10 05:54:01

A Very Big Sum is an easy-level Python problem that requires basic knowledge of Python. In this post, we will provide a Python solution for A Very Big Sum.

## Problem Statement and Explanation

In this challenge, you need to compute and print the sum of the elements in an array, taking into account that some of those integers may be exceedingly large.

### Input Format

- The array ‘arr’ includes integers ‘a[i]’ ranging from 1 to 10^10.

### Output Format

- The sum of the elements in the array, as a single integer.

## Solve Me First Solution in Python
{% gist https://gist.github.com/codeperfectplus/edc7a287620372f87ad995f14f196d5f.js %}
## Solve Me First Solution in C++

{% gist https://gist.github.com/codeperfectplus/8a25c752fd2c4161794db10649a544e7.js %}

## Explanation of Solution

- `aVeryBigSum` is a function in C++ that takes a vector of integers as input and returns the sum of all the elements in the vector. The function uses the `accumulate()` function to calculate the sum.

- The `accumulate()` function is a standard library function in C++. It takes three arguments: the beginning iterator of the range, the end iterator of the range, and an initial value. In this case, the initial value is 0.

- The `accumulate()` function works by iterating over the range and adding each element to the initial value. The final value of the accumulator is the sum of all the elements in the range.
Released a Desktop Client App "itos" for ChatGPT
Tags: react, typescript, tauri, chatgpt
Published: 2023-10-10 05:53:07


## Overview

We have released a desktop app called itos for conversing with ChatGPT.
It is compatible with Windows, MacOS, and Linux.

The release page is available [here](https://github.com/Mikoshiba-Kyu/Tauri-itos/releases).
Please download the installer compatible with your OS and use it.

A ChatGPT API KEY is required to use it.
The available models are `gpt-4` and `gpt-3.5-turbo`.

![App Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qsqh530gfbolf1joj1l.png)

## Features

* It is possible to display multiple conversations side by side. Each conversation can be rearranged, and you can toggle between visibility and non-visibility.
This makes it easy to handle applications such as having discussions on related topics with ChatGPT.

* You can specify a prompt for the entire conversation (`role: "system"` in the ChatGPT API).

* You can set your own avatar icon and an avatar icon for ChatGPT for each conversation.
Together with the previously mentioned prompt setting, you can play games such as having simulated conversations with specific characters.

* The app supports both English and Japanese display languages, and it also supports two theme settings.

## Development

We used Tauri as the application framework.
At this point, all implementations were done only in TypeScript, and there was no need for Rust.
The front-end uses React and MUI. We developed freely using only what we like.

## Afterword

*If my product could be a great experience for you, Please buy me a hot cup of coffee. Thank you.*
[buymeacoffee.com](https://www.buymeacoffee.com/mikoshibakyu)

## Related Links

[Repository](https://github.com/Mikoshiba-Kyu/Tauri-itos)
[Tauri](https://tauri.app/)
[OpenAI](https://openai.com/)
Solve Me First - Problem Solving | HackerRank
Tags: python, programming, algorithms, beginners
Published: 2023-10-10 05:46:59

Solve me first is easy-level Python problem that requires basic knowledge of Python. In this post, we will provide a Python solution for Solve me first.

## Problem Statement and Explanation

Add two numbers and return the sum. The numbers are provided as input to the function.

### Input Format

- int a - first number
- int b - second number

### Output Format

- int - sum of the two numbers

## Solve Me First Solution in Python
{% gist https://gist.github.com/codeperfectplus/2c713e888bad386dd943b8e0bb4a03b2.js %}
## Solve Me First Solution in C++

{% gist https://gist.github.com/codeperfectplus/adc5aa44a0381642450dafb259081bf8.js %}

## Explanation of Solution

- The `#include` statements at the top of the code tell the compiler to include the necessary header files. These header files contain definitions for functions and variables that are used in the code.
- The using `namespace std` statement tells the compiler to use the `std` namespace. This namespace contains many commonly used functions and variables, such as `cin` and `cout`.
- The `solveMeFirst` function takes two integers as input and returns their sum. The function definition starts with the keyword `int`, which tells the compiler that the function returns an integer value. The function name is `solveMeFirst`, and it takes two arguments, `a` and `b`. The body of the function is enclosed in curly braces (`{}`). The first line of the function body returns the sum of `a` and `b`.
- The main function is the entry point of the program. It prompts the user to enter two integers, calls the `solveMeFirst` function to calculate their sum, and then prints the sum to the console. The `main` function definition starts with the keyword `int`, which tells the compiler that the function returns an integer value. The function name is `*main`, and it takes no arguments. The body of the function is enclosed in curly braces (`{}`). The first line of the function body reads two integers from the user. The second line calls the `solveMeFirst` function to calculate the sum of the two integers. The third line prints the sum to the console.
JavaScript : Prototype and Inheritance (English/Hindi)
Tags: webdev, javascript, beginners, programming
Published: 2023-10-10 05:34:50

## English

JavaScript uses a concept called **prototype** for object-oriented programming. It allows you to create new objects that inherit properties and methods from existing objects. Think of it like a family tree, where child objects inherit characteristics from their parent objects.

In JavaScript, every object has a prototype, which is essentially a reference to another object. When you access a property or method on an object, JavaScript first looks for it on that object. If it doesn't find it there, it searches in the object's prototype, and so on, until it reaches the root prototype called **Object.prototype**.

Let's look at an example in JavaScript:

```javascript
// Parent object
var animal = {
  makeSound: function() {
    console.log("Some generic sound");
  }
};

// Child object inheriting from the parent
var cat = Object.create(animal);

// Adding a specific method to the child object
cat.meow = function() {
  console.log("Meow!");
};

// Now, cat inherits makeSound from animal
cat.makeSound(); // Outputs: Some generic sound
cat.meow();      // Outputs: Meow!
```

In this example, the **cat** object inherits the **makeSound** method from the **animal** object through the prototype chain.


## Hindi

JavaScript mein **prototype** naam ka ek concept istemal hota hai object-oriented programming ke liye. Isse aap naye objects create kar sakte hain jo existing objects se properties aur methods inherit karte hain. Isse ek family tree ki tarah samjha ja sakta hai, jahan child objects parent objects se characteristics inherit karte hain.

JavaScript mein har object ka ek prototype hota hai, jo basically doosre object ka ek reference hota hai. Jab aap ek object par property ya method access karte hain, to JavaScript pehle us object par dekhta hai. Agar wahin par nahi milta, to wah us object ke prototype par dekhta hai, aur isi tarah se root prototype **Object.prototype** tak jata hai.

Chaliye JavaScript mein ek udaharan dekhte hain:

```javascript
// Parent object
var animal = {
  makeSound: function() {
    console.log("Kuch generic awaaz");
  }
};

// Child object, jo parent se inherit karta hai
var cat = Object.create(animal);

// Child object mein ek specific method add kiya gaya hai
cat.meow = function() {
  console.log("Meow!");
};

// Ab, cat animal se makeSound inherit karta hai
cat.makeSound(); // Output: Kuch generic awaaz
cat.meow();      // Output: Meow!
```

Is udaharan mein, **cat** object **animal** object se prototype chain ke zariye **makeSound** method ko inherit karta hai.
PyQuery 2.0 與 1.X 的差異
Tags: python
Published: 2023-10-10 05:10:29

我自己被 JQuery 荼毒極深, 所以很喜歡使用 [PyQuery](https://pyquery.readthedocs.io/en/latest/), 不過 PyQuery 2.0 和 1.X 版有一些改變, 如果沒注意, 程式執行一定會出錯。

## 要用 url 指名引數傳入網址

PyQuery 2.0 有一個關鍵的改變, 就是建立 PyQuery 物件時, 網址要用 url 指名引數傳入, 例如在 1.X 版中可以直接將網址傳入, 像是這樣寫：

```python
>>> from pyquery import PyQuery as pq
>>> p = pq('https://flagtech.github.io/flag.txt')
>>> print(p.html())
```

顯示結果如下：

```
<body><p>FLAG&#13;
  ______ _               _____ &#13;
 |  ____| |        /\   / ____|&#13;
 | |__  | |       /  \ | |  __ &#13;
 |  __| | |      / /\ \| | |_ |&#13;
 | |    | |____ / ____ \ |__| |&#13;
 |_|    |______/_/    \_\_____|&#13;
                               &#13;
                               </p></body>
```

PyQuery 的建構方法中會[自動判斷傳入的字串是不是網址](https://github.com/gawel/pyquery/blob/099d6b891092102f3a61a991ca96bd9f8d1548f0/pyquery/pyquery.py#L154)。

但是在 2.0 中, 同樣的寫法會被當成是要以傳入引數內容建立 PyQuery 物件, 而不是要載入網頁的網址：

```python
>>> from pyquery import PyQuery as pq
>>> p = pq('https://flagtech.github.io/flag.txt')
>>> print(p.html())
https://flagtech.github.io/flag.txt
```

必須改成用 [`url`](https://github.com/gawel/pyquery/blob/6c996addb86bf28810191126a6bae8f50b77bd65/pyquery/pyquery.py#L174) 指名引數傳入網址：

```python
>>> p = pq(url='https://flagtech.github.io/flag.txt')
>>> print(p.html())
```

顯示結果如下：

```
<body><p>FLAG&#13;
  ______ _               _____ &#13;
 |  ____| |        /\   / ____|&#13;
 | |__  | |       /  \ | |  __ &#13;
 |  __| | |      / /\ \| | |_ |&#13;
 | |    | |____ / ____ \ |__| |&#13;
 |_|    |______/_/    \_\_____|&#13;
                               &#13;
                               </p></body>
```
What is a middleware and for what purposes we can use it ?
Published: 2023-10-10 04:52:21

Middleware is a software assembled into an app pipeline to handle request and response.

In simple words middleware gives us the facility to add additional logic before and after the HTTP request.

We can use middlewares for following purposes:

- Caching
- Logging
- Routing
- Static Files
- Rate Limiting 
- Compression
- Authorization
- Authentication
- Error Handling
- Content Type Negotiation
- CORS (Cross-Origin Resource Sharing)

We have three ways to create middleware:

- Request delegate
- By convention
- Using middleware factory

I already wrote an article about how to create middlewares, you can read it here and if you enjoyed that make sure to subscribe my newsletter for more amazing content ??
https://dev.to/ashu_rajput/what-is-middleware-and-multiple-ways-to-create-middleware-in-net-core--32li


![how to create middleware in .net](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv4sbdeax9r1o0wl2q51.png)